/* Lokale Overrides der statischen Ersatzseite.
   Ersetzen die frühere JavaScript-Logik des Baukastens (Anker-Navigation, Akkordeon,
   Trennkurven, Burger-Menü, Mehr-Menü, Hervorhebungen). Das Original-CSS bleibt unverändert. */

/* 1. Navigation per Anker statt Scroll-Skript */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:110px}

/* 2. Akkordeon per details/summary statt Skript */
.ersatz-acc{display:block}
.ersatz-acc>summary{list-style:none;cursor:pointer}
.ersatz-acc>summary::-webkit-details-marker{display:none}
.ersatz-acc[open] .con-kit-component-list-item-accordion__trigger{transform:rotate(180deg)}
.ersatz-acc[open] .con-kit-component-list-item-accordion__body{opacity:1;transform:none}
.con-kit-atom-list--toggle-plus .ersatz-acc[open] line:first-child{transform:rotate(90deg)}

/* 3. Trennkurve: schmale Variante für kleine Bildschirme */
@media (max-width:768px){
  .con-kit-organism-background[style*="orgDivider2"]{clip-path:url(#orgDivider2m)!important}
}
/* Startseite: das Original nutzt die flachere Kurve im gesamten Handy-Modus (bis 960 px) */
@media (max-width:960px){
  body:has(.ersatz-start) .con-kit-organism-background[style*="orgDivider2"]{clip-path:url(#orgDivider2m)!important}
}

/* 4. Ersatz für das Kontaktformular: Hinweisblock über der reinen Anzeige von Schritt 1 */
.ersatz-kontakt{padding:8px 4px 32px;text-align:center}
.ersatz-kontakt .con-kit-quark-paragraph{margin:0 0 .75em}
.ersatz-kontakt .con-kit-quark-paragraph:last-child{margin-bottom:0}
/* Schritt 1 des früheren Quiz, nur zur Ansicht: kein Formular, keine Eingabefelder.
   Die Regeln des früheren form-Elements (Original-CSS) gelten hier für das div. */
.ersatz-quiz-form{display:flex;flex-wrap:wrap;flex-direction:column;position:relative;width:100%}
.ersatz-quiz-form .con-kit-component-select{width:100%}
.ersatz-quiz .con-kit-component-checkbox,
.ersatz-quiz .con-kit-component-select-item{cursor:default}

/* 5. Kopfzeile (nachgebaut wie im Original)
   Original: bis 960 px einzeilige Leiste mit Logo links und (wo die Kopfzeile Menü oder Telefonnummern hat: Startseite, Kontakt)
   Burger-Schaltfläche rechts, darüber die Desktop-Zeile in einer Zeile. Die Desktop-Zeile bleibt oberhalb 960 px stehen. */
.ersatz-burger{display:none}
@media (max-width:960px){
  .ersatz-has-mobile>.con-kit-molecule-header-v2__atoms{display:none}
  /* Das Ziel-Element selbst ist fixiert, sonst springt die Seite beim Öffnen zu seiner Stelle im Dokument */
  .ersatz-burger:target{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000}
  html:has(.ersatz-burger:target){overflow:hidden!important}
  /* Überschrift im Handy-Layout: Größenstufe xs statt m (im Original per Skript umgestellt) */
  .con-kit-component-header .con-kit-quark-h1[data-font-kit-type][data-font-kit-type=m]{--font-kit-scale:2;--font-kit-size-max:18}
}
@media (min-width:961px){
  .con-kit-molecule-header-v2-mobile-view{display:none}
}
/* Vollbild-Menü: öffnet und schließt per :target (Klick auf einen Menüpunkt schließt es, wie im Original) */
.ersatz-burger .con-kit-component-burger-menu__close a,
.ersatz-burger .con-kit-component-burger-menu__close a:hover{text-decoration:none}
@keyframes ersatzBurgerFade{from{opacity:0}to{opacity:1}}
@keyframes ersatzBurgerSlide{from{opacity:0;transform:translateY(-20%)}to{opacity:1;transform:none}}
.ersatz-burger:target .con-kit-component-burger-menu__container{animation:ersatzBurgerFade .3s ease both}
.ersatz-burger:target .con-kit-component-burger-menu__content{animation:ersatzBurgerSlide .7s cubic-bezier(0,.89,.13,.99) both}
@media (prefers-reduced-motion:reduce){
  .ersatz-burger:target .con-kit-component-burger-menu__container,
  .ersatz-burger:target .con-kit-component-burger-menu__content{animation:none}
}

/* 5b. Mehr-Menü (drei Punkte): Original klappt den letzten Menüpunkt unterhalb 1200 px in ein Auswahlfenster,
   wenn die fünf Punkte nicht mehr in die Zeile passen. Hier als details/summary. */
.ersatz-more{display:block;width:100%}
.ersatz-more>summary{list-style:none;cursor:pointer}
.ersatz-more>summary::-webkit-details-marker{display:none}
.ersatz-more:not([open])>.con-kit-component-menu-v2-more__elements{display:none}
.ersatz-more[open]>.con-kit-component-menu-v2-more__elements{opacity:1;pointer-events:all;transform:translate3d(-50%,0,0)}
@media (min-width:961px) and (max-width:1199px){
  .con-kit-molecule-header-v2__atoms .con-kit-atom-menu-v2>ul>li:nth-child(5){visibility:hidden;position:absolute;height:0}
  .con-kit-molecule-header-v2__atoms .con-kit-atom-menu-v2>ul>li.con-kit-component-menu-v2-more{visibility:visible;position:relative;width:auto}
}

/* 6. Raster-Spalten: das Original behält 3 bzw. 4 Spalten auch auf dem Handy (keine Media Query im Original).
   Frühere, lesbarere Variante (stapelt die Spalten) bei Bedarf wieder einschalten:
@media (max-width:768px){
  .con-kit-component-grid-list--columns-3 .con-kit-component-grid-list-item{width:100%}
  .con-kit-component-grid-list--columns-4 .con-kit-component-grid-list-item{width:calc(100% / 2 - calc(var(--one-kit-component-grid-list-horizontal-space) / 2))}
}
*/

/* 7. Kein seitliches Scrollen bei Zwischenbreiten (z. B. genau 768 px) */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}

/* 8. Hervorhebungen im Text (im Original per Skript als absolut positionierte Zierelemente über den Text gelegt).
   Hier als Zierelemente direkt am Text-Span: Span ist Bezugsrahmen (wie die per Skript gemessene Box), die Zierelemente
   liegen hinter dem Text (eigener Stapelkontext, negativer z-index). Farbe je Span über --color-border. */
span[data-highlight-type=hand-underlined-2],
span[data-highlight-type=brush-underline],
span[data-highlight-type=marker]{position:relative;z-index:0}
/* handgezeichnete Linie (Wort Baumpflege in der Hauptüberschrift) */
span[data-highlight-type=hand-underlined-2] svg{display:flex;position:absolute;left:0;width:100%;height:30%;bottom:-15%;z-index:-1;pointer-events:none}
span[data-highlight-type=hand-underlined-2] svg path{fill:none;stroke:rgba(var(--color-border),var(--alpha-border));stroke-width:calc(var(--one-kit-quark-border-width,2) * .04em)}
/* Pinselstrich (Unsere Referenzen, Haben Sie Fragen?) */
span[data-highlight-type=brush-underline] svg{display:block;position:absolute;left:0;width:100%;height:15%;bottom:-3%;z-index:-1;pointer-events:none}
span[data-highlight-type=brush-underline] svg path{fill:rgba(var(--color-border),var(--alpha-border))}
/* Marker: halbtransparenter Balken hinter dem unteren Textbereich */
span[data-highlight-type=marker]::before{content:"";position:absolute;left:-2.5%;bottom:5%;width:105%;height:40%;min-height:1px;border-radius:1px;background-color:rgba(var(--color-border),var(--alpha-border));z-index:-1;pointer-events:none}

/* 9. Selbst gehostetes Video (ersetzt den früheren Link zum externen Videodienst samt Vorschaubild, Runde 2).
   Das frühere Vorschaubild lag absolut auf der ganzen Vorschau-Fläche (object-fit cover, Position 50 % 50 %),
   Box und Rundung (4 px, overflow hidden) kommen unverändert von .con-kit-component-video-preview. */
.con-kit-component-video-preview video.fp-autoplay{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;z-index:0}

/* 10. Laufband der Fotogalerie (Runde 3, ohne Skript).
   Das Original setzte Geschwindigkeit und Breite der zweiten Kopie per Skript. Hier fest im Markup:
   --marquee-speed = Reihenbreite 4545 px geteilt durch 30 px/s = 151,5 s (Animation "marquee" aus dem Original-CSS, 0 bis -100 Prozent).
   Die zweite Kopie (.con-kit-component-marquee__repeat, aria-hidden) hat die Breite der Reihe und schließt rechts an.
   Die Bilder tragen width/height, damit die Reihenbreite steht, bevor die Bilder geladen sind, und sind verkleinerte Fassungen
   (600 px Höhe, Dateien *-mq.jpg) mit loading eager: Verzögert ("lazy") geladene Bilder standen beim Einlaufen gemessen mehr als 14 Sekunden lang leer im Band.
   Bei "Bewegung reduzieren" steht das Band still (Anfangsbild). */
@media (prefers-reduced-motion:reduce){
  .con-kit-component-marquee__content{animation:none}
}

/* 11. Fehlerseite 404.html (Runde 3): Knopf "Zur Startseite" unter dem Satz, mittig */
.ersatz-404-knopf{display:flex;justify-content:center;padding:8px 0 16px}
/* Ist das Fenster höher als die Seite, setzt sich die Farbe der Fußzeile unter der Seite fort (statt weißer Fläche) */
html:has(body.fp-404),body.fp-404{background-color:#e2e9e2}