/* Baukasten-Gestaltung für Kundenwebseiten.
   ANPASSEN: (1) die Farben unter :root, (2) die Schriftnamen und die Pfade
   in den @font-face-Zeilen, (3) überall mustermann durch den Ordnernamen
   der Seite ersetzen (derselbe Name wie BASIS in baue-seiten.py).
   Der Scroll-Fix darunter ist Pflicht und wird nicht angefasst. */

/* Scroll-Fix (Pflicht, iPhone).
   Zweck bleibt unveraendert: die Seite muss sich auf dem iPhone immer
   scrollen lassen, verboten sind height:100vh und overflow:hidden.
   EINE Aenderung gegenueber dem Baukasten (gemessen am 04.09.2026):
   der body steht auf overflow-y:visible statt auto. Mit "auto" auf dem
   body gilt der body als eigener Scroll-Bereich, und dann klebt kein
   position:sticky mehr. Genau deshalb scrollte die Kopfzeile auf ALLEN
   Seiten einfach weg, obwohl sie als sticky gebaut ist. "visible" ist der
   Normalzustand des Browsers, scrollt also genauso, und die Kopfzeile
   bleibt wieder oben stehen. */
html{height:auto !important;min-height:100%;overflow-y:auto !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}
body{height:auto !important;min-height:100%;overflow-y:visible !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}

@font-face{font-family:"Open Sans";src:url("/referenzen/gartenbau/schriften/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/referenzen/gartenbau/schriften/OpenSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Farbwelt Gartenbau Mustermann.
     Das Blau stammt aus dem bestehenden Logo des Betriebs (gemessen
     #194cff) und ist fuer Flaechen und Schrift eine Spur abgedunkelt,
     damit Text darauf lesbar bleibt. Das Gruen steht fuer den
     Gartenbau- und Landschaftspflege-Teil. */
  --tinte:#101520;
  --waerme:#4e9a3f;      /* Gruen: Ortspunkte, Leben auf der Karte */
  --waerme-tief:#2f6b25; /* dasselbe Gruen, dunkel genug fuer Schrift */
  --wasser:#2f7fbf;      /* Rhein und Graeben auf der Gelaendekarte */
  --erde:#8a6a45;        /* Erdreich, Boeschungen */
  --akzent:#1b47e0;
  --akzent-dunkel:#1236ab;
  /* Flaechenfarbe fuer die grossen blauen Streifen (Erreichbarkeitsband,
     Kontakt-Leiste, Zeichenband). Torben, 04.09.2026: das Logo-Blau war
     ueber eine ganze Bandbreite gezogen zu grell. Kleine Flaechen (Knoepfe,
     Sinnbilder, Ziffern) bleiben im kraeftigen Logo-Blau, grosse Flaechen
     bekommen dieses ruhige, tiefe Blau. */
  --akzent-flaeche:#1c3a70;
  --akzent-blass:#eef2ff;   /* sehr helle Toenung, fuer Flaechen */
  --akzent-hell:#d3ddff;    /* helle Toenung, fuer Text auf Akzentflaeche */
  --papier:#ffffff;
  --grau:#f2f5f9;
  --linie:#dde3ec;
  --nebentext:#4d5666;
  /* Dunkle Flaeche: KEIN reines Schwarz. Reines Schwarz neben Weiss war
     bei Elektro Glatz genau der harte Uebergang, den Torben geruegt hat
     (04.09.2026). Diese Tiefe traegt weisse Schrift genauso, stoesst aber
     nicht so hart gegen die hellen Nachbarflaechen. */
  --dunkel:#111a2e;
  --dunkel-tief:#0b1222;
  /* Maschinenfarben. Ein Bagger ist ockergelb und steht auf dunklen Ketten,
     egal welche Hausfarbe der Betrieb hat (Torben, 04.09.2026). Diese Farben
     gehoeren dem Geraet, nicht der Marke, und werden deshalb nie an die
     Firmenfarbe angepasst. */
  --maschine-gelb:#e0a12a;
  --maschine-stahl:#2b3033;
  --maschine-rolle:#8d9296;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Open Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinte);background:var(--papier);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
/* Lange deutsche Woerter ("Verbraucherstreitbeilegung") passen auf einem
   320 Pixel breiten Bildschirm nicht in eine Zeile und schoben die Seite
   seitlich heraus. Deshalb duerfen Ueberschriften umbrechen und trennen.
   Gefunden am 04.09.2026 vom Asymmetrie-Waechter, Fehlerart B. */
h1,h2,h3,h4{font-weight:700;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px}
h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px}
h3{font-size:19px}
p{margin-bottom:14px;color:var(--tinte)}
.innen{max-width:1120px;margin:0 auto;padding:0 20px}
.schmal{max-width:780px}
.mittig{text-align:center}
.breit-text{max-width:760px;color:var(--nebentext)}
.mittig.breit-text,p.mittig{margin-left:auto;margin-right:auto}
.abschnitt{padding:72px 0}
.abschnitt-grau{background:var(--grau)}
.abschnitt-dunkel{background:var(--dunkel);color:#fff}
.abschnitt-dunkel h2,.abschnitt-dunkel p{color:#fff}
.abschnitt-dunkel .breit-text{color:#d3cecd;margin-left:auto;margin-right:auto}
.abschnitt-akzent{background:var(--akzent-flaeche);color:#fff}
.abschnitt-akzent h2,.abschnitt-akzent p{color:#fff}
.abschnitt-akzent .breit-text{color:var(--akzent-hell);margin-left:auto;margin-right:auto}
.seitenkopf{padding-bottom:40px}
.ico{flex:none}
.ico-akzent{color:var(--akzent)}

/* Kopfzeile */
.kopfzeile{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);z-index:50}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px}
.marke img{width:210px;height:auto}
.hauptmenue{display:flex;align-items:center;gap:26px;font-weight:700;font-size:16px}
.hauptmenue a{text-decoration:none}
.hauptmenue a:not(.knopf):hover{color:var(--akzent);text-decoration:underline;text-underline-offset:5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:24px;height:2px;background:var(--tinte);margin:5px 0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--akzent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:8px;border:2px solid var(--akzent);cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knopf-klein{padding:9px 16px;font-size:15px;border-radius:7px}
.knopf-umriss{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-umriss:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}
.knopf-weiss{background:#fff;color:var(--akzent-flaeche);border-color:#fff}
.knopf-weiss:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);color:var(--akzent-flaeche)}
.knopf-umriss-weiss{background:transparent;color:#fff;border-color:#fff}
.knopf-umriss-weiss:hover{background:#fff;color:var(--tinte);border-color:#fff}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.abschnitt-dunkel .knopfreihe,.abschnitt-akzent .knopfreihe{justify-content:center}

/* Held (Startseite) */
.held{padding:64px 0}
.held-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:stretch}
.held-text{display:flex;flex-direction:column;justify-content:center}
.vorzeile{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:14px}
.held-bildrahmen{border-radius:14px;overflow:hidden;min-height:340px}
.held-bildrahmen img,.held-bildrahmen video{width:100%;height:100%;object-fit:cover}

/* Erreichbarkeits-Band (Telefon, SMS, WhatsApp wie auf der Anzeige).
   Hell statt Blau (Torben, 04.09.2026): Das Band sitzt direkt unter dem
   dunklen Kopfbild. Als blauer Streifen liess es die Seite oben zwischen
   dunkel, hell und dunkel springen. Zwei feine Linien trennen es jetzt
   sauber ab, ohne dass eine neue Farbflaeche entsteht. */
.band{background:var(--papier);color:var(--tinte);padding:18px 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.band-innen{display:flex;align-items:center;justify-content:center;gap:14px 34px;flex-wrap:wrap;
  font-weight:700;font-size:16px;text-align:center}
.band a{display:inline-flex;align-items:center;gap:10px;color:var(--tinte);text-decoration:none}
.band a:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:4px}
.band .ico{color:var(--akzent)}

/* Stärken-Karten */
.staerken{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.staerken-drei{grid-template-columns:repeat(3,1fr)}
.staerke{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px;
  display:flex;flex-direction:column}
.karte-kopf{display:flex;align-items:center;gap:14px;min-height:56px;margin-bottom:8px}
/* Feste Höhe für die Überschrift: sonst sitzt eine zweizeilige Überschrift
   in der Nachbarkarte 11 Pixel höher als eine einzeilige (Torbens Regel
   "gleichartige Elemente auf einer Ebene"). Der Asymmetrie-Wächter meldet
   das sonst als E:Ueberschrift. */
.karte-kopf h3{margin:0;min-height:46px;display:flex;align-items:center}
.karte-kopf .ico{color:var(--akzent)}
.staerke p{margin:0;color:var(--nebentext);font-size:15.5px}

/* Leistungs-Kacheln: feste Breite, zentriert (nie 2+1-Loch) */
.kachelreihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:34px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:26px;
  width:340px;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(27,71,224,.14);border-color:var(--akzent)}
.kachel p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px}
.weiter{font-weight:700;font-size:15px;margin-top:auto;color:var(--akzent)}
/* Bild oben in der Kachel, bündig bis an den Rand; zoomt sanft beim Überfahren */
.kachel-bildrahmen{display:block;margin:-26px -26px 18px;border-radius:11px 11px 0 0;
  overflow:hidden;aspect-ratio:16/9}
.kachel-bildrahmen img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.kachel:hover .kachel-bildrahmen img{transform:scale(1.06)}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;align-items:stretch}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px;
  display:flex;flex-direction:column}
/* Zahl und Überschrift stehen in EINER Zeile (Icon links, Titel rechts),
   nie untereinander. Die feste Kopfhöhe hält die Texte auf einer Ebene. */
.schritt-zahl{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--akzent);color:#fff;font-weight:700;font-size:19px;flex:none}
.schritt h3{margin:0}
.schritt p{margin:0;color:var(--nebentext);font-size:15.5px}

/* ---- Ablauf-Kästchen: der blaue Rahmen läuft durch ----------------------
   Baukasten-Baustein, Fassung 1 (siehe werkzeuge/bausteine-ablauf.py).
   Regel aus dem Playbook (Torben, 04.09.2026): Der Ablauf-Abschnitt steht
   nie still, man muss sehen, WIE der Prozess weitergeht.
   Beim Herunterscrollen zeichnet sich um das erste Kästchen ein Rahmen im
   Logo-Blau, läuft über das Verbindungsstück zum nächsten weiter und bleibt
   stehen. Am Ende sind alle vier umrandet und beim letzten Schritt steht
   statt der Ziffer ein grünes Häkchen. Läuft EINMAL, keine Dauerschleife. */
.ablauf{
  --glut-a:#5b82ff;      /* helles Logo-Blau, Anfang des Strichs */
  --glut-b:#1236ab;      /* tiefes Blau, Ende des Strichs */
  --rohr:rgba(16,21,32,.12);
  --fertig:#2f6b25;      /* Grün für das Häkchen am Schluss */
  --zeichnen:1.4s;       /* wie lange ein Rahmen zum Umlaufen braucht */
  --versatz:1.2s;        /* Abstand von Kästchen zu Kästchen */
}

.schritt{position:relative;overflow:visible}
.schritt-inhalt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}

/* Der Rahmen liegt genau auf der Kante des Kästchens */
.rahmen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:2}
.rahmen rect{fill:none;stroke:var(--glutstrich);stroke-width:2;
  stroke-dasharray:100;stroke-dashoffset:100}
.rahmen-halo{stroke-width:7;opacity:.18}
.laeuft .rahmen rect{animation:rahmen-zeichnen var(--zeichnen) ease-in-out forwards;
  animation-delay:calc(var(--nr) * var(--versatz))}
@keyframes rahmen-zeichnen{to{stroke-dashoffset:0}}

/* Verbindungsstück in der Mitte zwischen zwei Kästchen */
.ablauf .schritt::before,.ablauf .schritt::after{content:"";position:absolute;
  top:50%;right:-20px;width:20px;height:3px;margin-top:-1.5px;border-radius:2px}
.ablauf .schritt::before{background:var(--rohr)}
.ablauf .schritt::after{background:linear-gradient(90deg,var(--glut-a),var(--glut-b));
  transform:scaleX(0);transform-origin:left center}
.laeuft .schritt::after{animation:strecke-fuellen .35s ease-out forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen))}
.ablauf .schritt:last-child::before,.ablauf .schritt:last-child::after{display:none}
@keyframes strecke-fuellen{to{transform:scaleX(1)}}

/* Grünes Häkchen: erscheint, wenn der letzte Schritt umrandet ist */
.ablauf .schritt-zahl{position:relative}
.zahl-ziffer{position:relative}
.fertig-haken{position:absolute;inset:0;border-radius:50%;background:var(--fertig);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5)}
.fertig-haken svg{width:24px;height:24px}
.laeuft .fertig-haken{animation:haken-stempel .5s cubic-bezier(.2,1.3,.5,1) forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen) + .15s)}
@keyframes haken-stempel{
  0%{opacity:0;transform:scale(.5)}
  60%{opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

/* Ohne JavaScript und bei "Bewegung reduzieren" steht das fertige Bild da */
html:not(.js) .rahmen rect{stroke-dashoffset:0}
html:not(.js) .ablauf .schritt::after{transform:scaleX(1)}
html:not(.js) .fertig-haken{opacity:1;transform:scale(1)}

/* Zwei Kästchen nebeneinander: dazwischen passt kein Verbindungsstück. */
@media (max-width:1100px){
  .ablauf .schritt::before,.ablauf .schritt::after{display:none}
}
/* Handy: die Kästchen stehen untereinander, das Verbindungsstück senkrecht. */
@media (max-width:560px){
  .ablauf .schritt::before,.ablauf .schritt::after{display:block;top:auto;
    bottom:-20px;left:50%;right:auto;width:3px;height:20px;margin-top:0;
    margin-left:-1.5px}
  .ablauf .schritt::after{background:linear-gradient(180deg,var(--glut-a),var(--glut-b));
    transform:scaleY(0);transform-origin:top center}
  .laeuft .schritt::after{animation-name:strecke-fuellen-hoch}
  html:not(.js) .ablauf .schritt::after{transform:scaleY(1)}
}
@keyframes strecke-fuellen-hoch{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .laeuft .rahmen rect,.laeuft .schritt::after,.laeuft .fertig-haken{animation:none}
  .rahmen rect{stroke-dashoffset:0}
  .ablauf .schritt::after{transform:scaleX(1)}
  .fertig-haken{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .ablauf .schritt::after{transform:scaleY(1)}
}

/* Vorher/Nachher-Schieberegler: das obere (Vorher-)Bild wird über eine
   CSS-Variable beschnitten, der unsichtbare Schieber darüber steuert sie.
   touch-action:pan-y lässt die Seite auf dem Handy weiter senkrecht rollen. */
.vergleich{position:relative;max-width:920px;margin:34px auto 0;border-radius:14px;
  overflow:hidden;aspect-ratio:16/9;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich-vorher{-webkit-clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vergleich-griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 10px rgba(0,0,0,.5)}
.vergleich-knauf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--akzent);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.vergleich-schild{position:absolute;bottom:14px;background:rgba(0,0,0,.55);color:#fff;
  font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;pointer-events:none}
.vergleich-schild-links{left:14px}
.vergleich-schild-rechts{right:14px}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;touch-action:pan-y}
.vergleich input::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px}
.vergleich:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px}

/* Zweispalter: beide Kästen gleich hoch */
.zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.zweispalter .knopf{margin-top:8px}
.bildrahmen{border-radius:14px;overflow:hidden;min-height:300px}
.bildrahmen img,.bildrahmen video{width:100%;height:100%;object-fit:cover}
/* Wiederholen-Knopf: erscheint auf Verwandlungs-Filmen, wenn sie zu Ende sind */
.bildrahmen,.held-bildrahmen{position:relative}
.film-neustart{position:absolute;right:14px;bottom:14px;width:46px;height:46px;
  border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:none;
  align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.film-neustart:hover{background:var(--akzent)}
.film-neustart.da{display:flex}
.bild-breit{min-height:0}
.bild-breit img,.bild-breit video{aspect-ratio:16/7;object-fit:cover}

/* Leistungsseite */
.brotkrumen{font-size:14px;color:var(--nebentext);margin-bottom:16px}
.brotkrumen a{color:var(--nebentext)}
/* Seitenkopf der Leistungsseiten: links der Text, rechts die Animation.
   Beide Spalten enden oben und unten auf derselben Linie. */
.kopf-zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.kopf-zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start}
.kopf-zweispalter .bildrahmen{min-height:340px}
.kopf-zweispalter h1{margin-bottom:14px}
.kopf-zweispalter .breit-text{max-width:none}
.kopf-zweispalter .knopfreihe{margin-top:6px}
.zweispalter-breit{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:stretch}
.hakenliste{list-style:none;margin-top:10px}
.hakenliste li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--linie);font-size:16.5px}
.hakenliste li:last-child{border-bottom:0}
.hakenliste .ico{margin-top:4px;color:var(--akzent)}
.infokasten{background:var(--akzent-blass);border:1px solid #e8d3d3;border-radius:12px;padding:28px;
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.infokasten p{color:var(--nebentext);font-size:15.5px;margin:0 0 4px}
.infokasten .knopf{width:100%}

/* Fragen */
.frage{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:0;margin-top:14px}
.frage summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;position:relative;padding-right:46px}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--akzent)}
.frage summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--akzent)}
.frage[open] summary::after{content:"–"}
.frage p{padding:0 22px 18px;color:var(--nebentext);margin:0}

/* Kontakt */
.kontakt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.kontakt-karten .kachel{width:auto}
.formular-raster{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:stretch}
.formular-bildrahmen{border-radius:12px;overflow:hidden}
.formular-bildrahmen img{width:100%;height:100%;object-fit:cover}
.formular-kasten{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:32px}
form label{display:block;font-weight:700;font-size:15px;margin-bottom:16px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid #cbc5c4;border-radius:8px;font:inherit;font-weight:400;background:#fff;color:var(--tinte)}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--akzent);outline-offset:1px}
form .knopf{width:100%}
.formular-hinweis{font-size:13.5px;color:var(--nebentext);margin:10px 0 0}

/* Zeichenband: die fünf Sinnbilder wie auf der Werbeanzeige des Kunden */
.zeichenband{background:var(--akzent-flaeche);padding:38px 0}
.zeichen-reihe{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.zeichen{display:flex;align-items:center;justify-content:center;width:66px;height:66px;
  border:2px solid #fff;border-radius:5px;color:#fff;flex:none}

/* Rechtstexte */
.rechtstext h2{margin-top:34px}
.rechtstext h3{margin-top:24px;margin-bottom:8px}
.rechtstext h4{margin-top:18px;margin-bottom:6px;font-size:16.5px}
.rechtstext p{color:var(--nebentext)}
.platzhalter{background:var(--akzent-blass);border-left:4px solid var(--akzent);border-radius:8px;
  padding:16px 20px;margin:10px 0 18px}
.platzhalter p{color:var(--tinte);margin:0}

/* Google-Bewertungen (Daten in inhalte/google-bewertungen.json).
   Endlos laufendes Band, haelt bei Mausberuehrung und beim Antippen an.
   Gescrollt wird nur im Band selbst (.bew-band), nie die ganze Seite. */
.bewertungen{overflow:hidden}
.bew-kopf{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.g-logo{display:block;width:auto}
.bew-schnitt{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;color:var(--nebentext)}
.bew-schnitt strong{color:var(--tinte);font-size:18px}
.sterne{display:inline-flex;align-items:center;gap:2px;line-height:0}
.sterne svg{fill:#fbbc04;flex:none}
.bew-band{margin-top:26px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bew-band::-webkit-scrollbar{display:none}
.bew-lauf{display:flex;gap:20px;width:max-content;padding:4px 20px;
  animation:bew-laufen 64s linear infinite}
.bew-band:hover .bew-lauf,.bew-band:active .bew-lauf{animation-play-state:paused}
@keyframes bew-laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bew-lauf{animation:none}}
.bew-karte{width:340px;flex:none;background:#fff;border:1px solid var(--linie);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;text-align:left;margin:0}
.bew-karte blockquote{margin:12px 0 16px;font-size:16px;line-height:1.6;color:var(--tinte)}
.bew-karte figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--linie);padding-top:12px}
.bew-karte figcaption strong{font-size:16px}
.bew-karte figcaption span{font-size:14px;color:var(--nebentext)}
.bew-knoepfe{justify-content:center;margin-top:26px}
.bew-herkunft{max-width:760px;margin:18px auto 0;font-size:13.5px;line-height:1.55;color:var(--nebentext)}

/* Google-Karte. Standard ist die direkt ladende Fassung: dann braucht es nur
   .kartenfeld und .kartenfeld iframe. Die Klassen .karten-sperre,
   .karten-kasten und .karte-geladen gehoeren zur Zwei-Klick-Fassung. */
.kartenfeld{position:relative;margin-top:26px;border-radius:16px;overflow:hidden;
  border:1px solid var(--linie);background:var(--grau);aspect-ratio:16/10}
.kartenfeld img{width:100%;height:100%;object-fit:cover}
.kartenfeld iframe{display:block;width:100%;height:100%;border:0}
.karten-sperre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(255,255,255,.28)}
.karten-kasten{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  max-width:460px;padding:24px 26px;background:#fff;border:1px solid var(--linie);
  border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.karten-kasten p{margin:0;font-size:15px;color:var(--nebentext)}
.karten-kasten p strong{font-size:18px;color:var(--tinte)}
.karten-kasten .knopf{margin-top:8px}
.karten-quelle{position:absolute;right:8px;bottom:6px;margin:0;font-size:11.5px;
  color:var(--nebentext);background:rgba(255,255,255,.8);padding:2px 7px;border-radius:6px}
.karte-geladen{aspect-ratio:16/9}
.kartenknoepfe{justify-content:center}

/* Einsatzgebiet: Kopf, dann die Karte ueber die volle Breite, darunter die
   Ortsliste. Die Karte ist eine Landschaft im Querformat. Neben einer hohen
   Textspalte blieb rundherum viel Weissraum (Rueckmeldung Torben, 04.09.2026),
   ueber die volle Breite passt sie ohne Leerflaechen. */
.gebiet-bereich{display:flex;flex-direction:column;align-items:center}
.gebiet-kopf{max-width:760px;text-align:center;margin-bottom:24px}
.gebiet-kopf .karte-kopf{justify-content:center;margin-bottom:6px}
.gebiet-kopf h2{margin:0}
.gebiet-kopf p{margin-bottom:0}
.gebiet-fuss{display:flex;flex-direction:column;align-items:center;text-align:center}
.gebiet-karte{position:relative;width:100%;max-width:900px;aspect-ratio:720/612;
  border-radius:16px;overflow:hidden;border:1px solid var(--linie);
  background:var(--grau)}
.gebiet-karte img{display:block;width:100%;height:100%;object-fit:cover}
/* 3D-Gelaendekarte des Einsatzgebiets mit Schutzkuppel.
   Das Relief ist ein gerechnetes Bild (werkzeuge/baue-gelaende.py) und liegt
   zweimal uebereinander: grau als Ausgangsbild und farbig als Schlussbild.
   Alles darueber ist gezeichnet (werkzeuge/baue-kuppel.py): Kuppel, Rhein,
   Waermestrecken, Ortsnamen, Firmenschild und die Servicefahrzeuge. Beides
   benutzt dieselbe Kamera, deshalb sitzt jede Linie genau im Gelaende.
   Ablauf: die Kuppel baut sich auf, das Firmenschild setzt sich auf
   Beispieldorf, die Orte erscheinen, der Rhein zeichnet sich blau, dann
   fliesst die Waerme von der Zentrale in jeden Ort, die Fahrzeuge fahren
   los und zum Schluss wird die ganze Karte farbig und warm.
   Losgetreten wird das erst, wenn der Abschnitt ins Bild kommt: das Skript
   am Seitenende setzt dann die Klasse "laeuft". Ohne JavaScript steht das
   fertige Bild einfach da. */
.kuppelkarte{display:block;width:100%;height:100%}
html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:0}
html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:0}
.k-meridian,.k-ring,.k-kante,.k-fuss,.k-welle,.k-fahrweg,.k-fluss,
.k-waermespur{fill:none;stroke:var(--tinte);stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.k-meridian,.k-ring{stroke-width:1;opacity:.55}
.k-meridian.k-hinten,.k-ring.k-hinten{opacity:.17}
.k-kante{stroke-width:1.3;opacity:.65}
.k-fuss{stroke-width:1.6;opacity:.75}
.k-welle{stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.k-gitter{filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
.k-randsaum{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.k-schattengitter{fill:none;stroke:var(--tinte);stroke-width:2.2;opacity:.24}

/* Der Rhein, Grenze zu Frankreich */
.k-fluss{stroke:var(--wasser);stroke-width:2.4;stroke-linejoin:round}
.k-fluss-name{font-size:12.5px;font-weight:700;fill:var(--wasser);
  stroke:#fff;stroke-width:3;paint-order:stroke;stroke-linejoin:round;
  letter-spacing:.03em}

/* Waermestrecken von der Zentrale in die Orte */
.k-waermespur{stroke:var(--waerme);stroke-width:1.8;
  filter:drop-shadow(0 0 3px rgba(232,114,42,.5))}
.k-warmlicht{opacity:0}

/* Orte: Punkt mit weissem Hof, Name klar und gut lesbar */
.k-ort-punkt{fill:var(--tinte)}
.k-ort-warm{fill:var(--waerme);opacity:0}
.k-ort-ring{fill:#fff}
.k-ort-welle{fill:none;stroke:var(--tinte);stroke-width:1.4}
.k-ort-punkt,.k-ort-warm,.k-ort-ring,.k-ort-welle{transform-box:fill-box;
  transform-origin:50% 50%}
.k-ort-name{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.01em;fill:var(--tinte);
  stroke:#fff;stroke-width:3.4;paint-order:stroke;stroke-linejoin:round}
.k-name-gross{font-size:16.5px;stroke-width:4}

/* Sinnbilder (werkzeuge/sinnbilder.py): flache Silhouetten mit weisser
   Kontur. Das Muenster traegt seine Sandsteinfarbe, Wasser ist blau. */
.k-sb-flaeche{fill:var(--tinte);stroke:#fff;stroke-width:1.2;
  paint-order:stroke;stroke-linejoin:round}
.k-sb-linie{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round}
.k-muenster-bau{fill:#9d4a35;stroke:#fff;stroke-width:1.2;
  paint-order:stroke;stroke-linejoin:round}
.k-sb-dampf{fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round}
.k-sb-wasser,.k-sb-welle{fill:none;stroke:var(--wasser);stroke-width:2;
  stroke-linecap:round}
.k-sb-schnabel{fill:#c2511f;stroke:#fff;stroke-width:.8;paint-order:stroke}
.k-sb-bein{fill:none;stroke:#c2511f;stroke-width:1.6;stroke-linecap:round}

/* Das Muenster ploppt erst mit Musterstadt auf, nicht schon am Anfang
   (Rueckmeldung Torben, 04.09.2026: stand vorher plump von Beginn an da) */
.kuppelkarte.laeuft .k-wahrzeichen{transform-box:fill-box;
  transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(2.75s + var(--i)*.05s)}
html.js .kuppelkarte:not(.laeuft) .k-wahrzeichen{opacity:0}

/* Besonderheiten der Orte: erscheinen beim Klick auf den Ortsknopf */
.k-extra{opacity:0;pointer-events:none;transition:opacity .35s ease}
.k-extra.zeigt{opacity:1}
.k-extra-schatten{fill:var(--tinte);opacity:.2}
.k-extra.zeigt .k-extra-bild{transform-box:fill-box;transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.k-extra.zeigt .k-extra-blase{animation:k-auf .35s ease .25s both}
.k-blase-kasten{fill:#fff;stroke:var(--linie)}
.k-blase-zipfel{fill:#fff}
.k-blase-text{font-size:12.5px;font-weight:700;fill:var(--tinte)}

/* Der Wolf von Wolfsmuster hat am Schluss seinen Auftritt */
.kuppelkarte.laeuft .k-wolf-auftritt{
  animation:k-wolfszene 5s ease 10s both}
.kuppelkarte.laeuft .k-wolf-auftritt .k-extra-bild{transform-box:fill-box;
  transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) 10.1s both}
.kuppelkarte.laeuft .k-wolf-heult{transform-box:fill-box;
  transform-origin:50% 100%;animation:k-heulen 1.5s ease-in-out 11s 2}


/* Firmenschild, sitzt mit der Spitze genau auf dem Betrieb in Beispieldorf */
.k-schild-tafel{fill:#fff;stroke:var(--tinte);stroke-width:1.2;stroke-linejoin:round}
.k-schild-punkt{fill:var(--tinte)}
.k-schild-schatten{fill:var(--tinte);opacity:.22}

/* Die Wege bleiben blass, das Fahrzeug faehrt darauf zum Kunden.
   Welches Fahrzeug es ist, entscheidet das Gewerk: bei Gartenbau Mustermann
   der Bagger, bei einem Haustechnikbetrieb der Servicewagen. Umgestellt
   wird das in werkzeuge/baue-kuppel.py (FAHRZEUG), nicht hier. */
.k-fahrweg{stroke-width:1.2;opacity:.22;stroke-dasharray:4 6}
/* Servicewagen: schlichte Silhouette in Tinte mit weisser Kontur */
.k-fahrzeug-korb{fill:var(--tinte);stroke:#fff;stroke-width:1.3;
  paint-order:stroke;stroke-linejoin:round}
.k-fahrzeug-rad{fill:var(--tinte);stroke:#fff;stroke-width:1.2;
  paint-order:stroke}
.k-fahrzeug-logo{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",
  Arial,sans-serif;font-size:4.2px;font-weight:800;font-style:italic;
  letter-spacing:.02em;fill:#fff;stroke:none}
/* Bagger: Baggergelb auf dunklen Ketten, mit dunkler Kontur. Der weisse
   Saum kommt aus dem Schlagschatten unten, damit das Geraet auf der gruenen
   Karte freisteht, ohne dass die Kontur die Maschine zerlegt. */
.k-bagger-korb,.k-bagger-ausleger{fill:var(--maschine-gelb);
  stroke:#20272a;stroke-width:1;paint-order:stroke;stroke-linejoin:round}
.k-bagger-kette{fill:var(--maschine-stahl);stroke:#fff;stroke-width:1.1;
  paint-order:stroke;stroke-linejoin:round}
.k-bagger-rolle{fill:var(--maschine-rolle)}
.k-bagger-loeffel{fill:#3a4145;stroke:#20272a;stroke-width:.8;
  paint-order:stroke;stroke-linejoin:round}
/* Scheibe hell, Fahrer dunkel: nur so erkennt man bei dieser Groesse, dass
   jemand im Bagger sitzt (Torben, 04.09.2026). */
.k-bagger-glas{fill:#cfe2ee;stroke:#20272a;stroke-width:.7;
  paint-order:stroke;stroke-linejoin:round}
.k-bagger-fahrer{fill:#20272a}
.k-bagger-logo{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",
  Arial,sans-serif;font-size:3.4px;font-weight:800;font-style:italic;
  letter-spacing:.02em;fill:#20272a;stroke:none}
.k-fahrzeug{filter:drop-shadow(0 .5px 1.4px rgba(255,255,255,.95))}

.k-koerper,.k-randsaum,.k-glanz,.k-lauflicht,.k-schatten,.k-orte,.k-wege,
.k-schild,.k-fahrzeuge,.k-fluss,.k-fluss-name,.k-waermespur,.k-warmbild{opacity:0}
/* Ohne JavaScript wird nichts bewegt, dann steht das fertige Bild da */
html:not(.js) .k-koerper,html:not(.js) .k-randsaum,html:not(.js) .k-schatten,
html:not(.js) .k-orte,html:not(.js) .k-wege,html:not(.js) .k-schild,
html:not(.js) .k-warmbild,html:not(.js) .k-fluss-name{opacity:1}
html:not(.js) .k-glanz{opacity:.4}
html:not(.js) .k-fluss{opacity:.85}
html:not(.js) .k-waermespur{opacity:.35}
html:not(.js) .k-warmlicht{opacity:1}
html:not(.js) .k-ort-warm{opacity:1}
html:not(.js) .k-ort-name{fill:var(--waerme-tief)}
/* Ohne JavaScript starten die Wagen nicht, dann bleiben sie weg */
html:not(.js) .k-fahrzeuge{display:none}

@keyframes k-ziehen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes k-auf{from{opacity:0}to{opacity:1}}
@keyframes k-auf-glanz{from{opacity:0}to{opacity:.4}}
@keyframes k-auf-fluss{from{opacity:0}to{opacity:.85}}
@keyframes k-auf-spur{from{opacity:0}to{opacity:.35}}
@keyframes k-warmtext{from{fill:var(--tinte)}to{fill:var(--waerme-tief)}}
@keyframes k-welle{0%{transform:scale(.04);opacity:0}
  14%{opacity:.5}100%{transform:scale(1.02);opacity:0}}
@keyframes k-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes k-warmpop{0%{transform:scale(0);opacity:0}
  55%{transform:scale(1.7);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes k-ortwelle{0%{transform:scale(.35);opacity:0}
  14%{opacity:.6}100%{transform:scale(3.6);opacity:0}}
@keyframes k-wolfszene{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes k-heulen{0%{transform:rotate(0)}45%{transform:rotate(-7deg)}
  70%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
@keyframes k-schild-auf{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}
@keyframes k-lauf{0%{transform:translateX(0);opacity:0}
  5%{opacity:1}30%{transform:translateX(1440px);opacity:1}
  36%{transform:translateX(1440px);opacity:0}
  100%{transform:translateX(1440px);opacity:0}}

/* Ablauf: 1. Impuls ueber das Gebiet  2. Kuppelfuss  3. Laengslinien
   4. Ringe  5. Glas, Schatten, Lichtsaum  6. Firmenschild  7. Orte
   8. Rhein  9. Waerme fliesst in die Orte  10. Fahrzeuge  11. Farbe */
.kuppelkarte.laeuft .k-welle{animation:k-welle 1.5s cubic-bezier(.2,.7,.3,1) both}
.kuppelkarte.laeuft .k-welle2{animation-delay:.4s}
.kuppelkarte.laeuft .k-welle3{animation-delay:.8s}
.kuppelkarte.laeuft .k-fuss{stroke-dasharray:1;
  animation:k-ziehen 1.15s cubic-bezier(.4,0,.2,1) .2s both}
.kuppelkarte.laeuft .k-meridian{stroke-dasharray:1;
  animation:k-ziehen 1s cubic-bezier(.3,0,.2,1) both;
  animation-delay:calc(.7s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-ring{stroke-dasharray:1;
  animation:k-ziehen .85s cubic-bezier(.3,0,.2,1) both;
  animation-delay:calc(1.35s + var(--i)*.09s)}
.kuppelkarte.laeuft .k-koerper{animation:k-auf 1.3s ease 1.95s both}
.kuppelkarte.laeuft .k-schatten{animation:k-auf 1.2s ease 2.05s both}
.kuppelkarte.laeuft .k-randsaum{animation:k-auf 1.2s ease 2.15s both}
.kuppelkarte.laeuft .k-kante{stroke-dasharray:1;
  animation:k-ziehen 1.1s cubic-bezier(.4,0,.2,1) 1.9s both}
.kuppelkarte.laeuft .k-glanz{animation:k-auf-glanz 1.1s ease 2.35s both}
.kuppelkarte.laeuft .k-schild{transform-box:fill-box;transform-origin:50% 100%;
  animation:k-schild-auf .7s cubic-bezier(.2,1.3,.4,1) 2.2s both}
.kuppelkarte.laeuft .k-orte{opacity:1}
.kuppelkarte.laeuft .k-ort-punkt,.kuppelkarte.laeuft .k-ort-ring{
  animation:k-pop .45s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay:calc(2.6s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-ort-welle{animation:k-ortwelle 1s ease-out both;
  animation-delay:calc(2.6s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-fluss{stroke-dasharray:1;
  animation:k-ziehen 1.7s ease-out both, k-auf-fluss .6s ease both;
  animation-delay:calc(3.1s + var(--i)*.12s)}
.kuppelkarte.laeuft .k-fluss-name{animation:k-auf .7s ease 4.2s both}
.kuppelkarte.laeuft .k-waermespur{stroke-dasharray:1;
  animation:k-ziehen var(--t) cubic-bezier(.35,0,.45,1) both,
            k-auf-spur .35s ease both;
  animation-delay:calc(3.8s + var(--i)*.06s)}
/* Der Ort wird warm, sobald die Waerme dort ankommt */
.kuppelkarte.laeuft .k-ort-warm{
  animation:k-warmpop .6s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(3.8s + var(--i)*.06s + var(--t))}
.kuppelkarte.laeuft .k-ort-name{
  animation:k-auf .45s ease both, k-warmtext .8s ease both;
  animation-delay:calc(2.6s + var(--i)*.05s),
                  calc(3.8s + var(--i)*.06s + var(--t))}
.kuppelkarte.laeuft .k-wege{animation:k-auf 1s ease 6.0s both}
.kuppelkarte.laeuft .k-fahrzeuge{animation:k-auf 1s ease 6.3s both}
/* Zum Schluss wird aus der grauen Karte eine warme, gruene Landschaft */
.kuppelkarte.laeuft .k-warmbild{animation:k-auf 2s ease 7.2s both}
.kuppelkarte.laeuft .k-warmlicht{animation:k-auf 2.2s ease 7.4s both}
.kuppelkarte.laeuft .k-lauflicht{animation:k-lauf 11s ease-in-out 9.6s infinite}

@media (prefers-reduced-motion:reduce){
  html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:1}
  html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:1}
  .kuppelkarte *{animation:none !important}
  .kuppelkarte .k-koerper,.kuppelkarte .k-randsaum,.kuppelkarte .k-schatten,
  .kuppelkarte .k-orte,.kuppelkarte .k-wege,.kuppelkarte .k-schild,
  .kuppelkarte .k-warmbild,.kuppelkarte .k-fluss-name,
  .kuppelkarte .k-ort-warm,.kuppelkarte .k-warmlicht{opacity:1}
  .kuppelkarte .k-glanz{opacity:.4}
  .kuppelkarte .k-fluss{opacity:.85}
  .kuppelkarte .k-waermespur{opacity:.35}
  .kuppelkarte .k-ort-name{fill:var(--waerme-tief)}
  .kuppelkarte .k-welle,.kuppelkarte .k-ort-welle{opacity:0}
  .kuppelkarte .k-fahrzeuge{display:none}
}
.ortsliste{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 20px;padding:0}
.ortsliste li{list-style:none}
.orts-knopf{background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:7px 14px;font-size:15px;color:var(--tinte);font-family:inherit;
  cursor:pointer;transition:border-color .15s,transform .15s}
.orts-knopf:hover{border-color:var(--tinte);transform:translateY(-1px)}
.gebiet-hinweis{color:var(--nebentext);font-size:15.5px;margin:0 0 18px}
.fuss-gebiet{margin-top:14px;font-size:14.5px;line-height:1.55}
.fuss-gebiet strong{color:#fff}
.fusszeile a.fuss-gebiet-link{display:inline;padding:0;text-decoration:underline}

.ortsliste{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 20px;padding:0}
.ortsliste li{background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:7px 14px;font-size:15px;color:var(--tinte)}
.gebiet-hinweis{color:var(--nebentext);font-size:15.5px;margin:0 0 18px}
.fuss-gebiet{margin-top:14px;font-size:14.5px;line-height:1.55}
.fuss-gebiet strong{color:#fff}
.fusszeile a.fuss-gebiet-link{display:inline;padding:0;text-decoration:underline}

/* Fußzeile */
.fusszeile{background:var(--dunkel-tief);color:#fff;padding:56px 0 0;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px}
.fusszeile h3{margin-bottom:12px;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.fusszeile p{color:#d3cecd;font-size:15.5px}
.fusszeile a{display:block;color:#d3cecd;text-decoration:none;font-size:15.5px;padding:3px 0}
.fusszeile a:hover{color:#fff;text-decoration:underline}
.fuss-logo{width:230px;height:auto;margin-bottom:14px}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px;padding-bottom:18px;
  font-size:14.5px;color:#b3adac}
.fuss-rechts{display:flex;gap:20px}
.fuss-rechts a{display:inline;padding:0}

/* Sanftes Einblenden beim Scrollen. Die Klasse "anim" setzt das Skript nur,
   wenn der Besucher keine reduzierte Bewegung eingestellt hat; ohne die
   Klasse (und ohne JavaScript) bleibt alles ganz normal sichtbar. */
html.anim :is(.kachel,.staerke,.schritt,.vergleich){opacity:0}
html.anim .sichtbar{opacity:1;animation:einblenden .55s ease backwards}
@keyframes einblenden{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Zwischenbreiten: vier Spalten würden die Karten so schmal machen, dass die
   Titel neben dem Zeichen umbrechen. Deshalb hier schon auf zwei Spalten. */
@media (max-width:1100px){.staerken,.schritte{grid-template-columns:1fr 1fr}}

/* Handy */
@media (max-width:900px){
  /* Am Handy ist die Gelaendekarte klein: nur die wichtigsten Orte
     beschriften, dafuer groesser, sonst kann man die Namen nicht lesen. */
  .k-ort-name{font-size:19px;stroke-width:4.5}
  .k-name-gross{font-size:23px;stroke-width:5}
  .k-fluss-name{font-size:18px;stroke-width:4}
  .k-name-klein{display:none}
  .gebiet-raster{grid-template-columns:1fr;gap:28px}
  /* Google-Bausteine auf dem Handy */
  .bew-karte{width:270px;padding:18px}
  .bew-knoepfe{flex-direction:column;align-items:stretch}
  .bew-knoepfe .knopf{width:100%}
  .kartenfeld{aspect-ratio:3/4}
  .karte-geladen{aspect-ratio:3/4}
  .karten-sperre{align-items:flex-end;padding:14px 14px 34px}
  .karten-kasten{padding:16px 18px;gap:6px}
  .karten-kasten p{font-size:14.5px}
  .karten-kasten p strong{font-size:16.5px}
  .abschnitt{padding:52px 0}
  .held{padding:36px 0}
  .held-raster,.zweispalter,.zweispalter-breit,.formular-raster,
  .kopf-zweispalter{grid-template-columns:1fr;gap:28px}
  .kopf-zweispalter .bildrahmen{min-height:0}
  .kopf-zweispalter .bildrahmen img,.kopf-zweispalter .bildrahmen video{aspect-ratio:16/10}
  .staerken,.schritte{grid-template-columns:1fr 1fr}
  .staerken-drei{grid-template-columns:1fr}
  .kontakt-karten{grid-template-columns:1fr}
  .held-bildrahmen{min-height:240px;order:-1}
  .formular-bildrahmen{max-height:340px}
  .marke img{width:180px}
  .burger{display:block}
  .hauptmenue{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;
    padding:14px 20px;gap:4px}
  .hauptmenue.offen{display:flex}
  .hauptmenue a{padding:12px 4px}
  .hauptmenue .knopf-klein{justify-content:center;margin-top:8px}
  .band-innen{flex-direction:column;gap:12px}
}
@media (max-width:560px){
  .staerken,.staerken-drei,.schritte{grid-template-columns:1fr}
  .kachel{width:100%}
  .bild-breit img,.bild-breit video{aspect-ratio:16/10}
  .vergleich{aspect-ratio:4/3}
  /* Untereinander stehende Knöpfe sind gleich breit, nie unterschiedlich lang */
  .knopfreihe{flex-direction:column;align-items:stretch}
  .knopfreihe .knopf{width:100%}
}

/* Kauf-Leiste (nur solange die Seite eine Demo ist): führt zur honeyflow-Verkaufsseite */
.kauf-leiste{background:#2540a8;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#2540a8;
  font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35}
.kauf-leiste .kauf-knopf:hover{background:#eef1fb}
.kauf-leiste .kauf-knopf svg{flex:none}
/* Auf sehr schmalen Geraeten (320 Pixel) schob der lange Knopftext die
   ganze Seite seitlich heraus: gemessen 349 statt 320 Pixel. Gefunden am
   04.09.2026 vom Asymmetrie-Waechter, Fehlerart B. */
.kauf-leiste .kauf-knopf{max-width:100%}
@media (max-width:420px){
  .kauf-leiste{padding:9px 10px}
  .kauf-leiste .kauf-knopf{padding:9px 14px;font-size:14px;gap:8px}
}

/* ================================================================
   Projektbild mit Punkten  (aus Elektro Glatz, 04.09.2026)
   Das echte Foto des Kunden bleibt unverändert. Darüber liegen
   nummerierte Punkte, die zeigen, WAS an diesem Objekt gebaut wurde
   (Satanlage, Außenbeleuchtung, Türkommunikation …).
   Regeln dabei:
   - Die Liste unter dem Bild zeigt IMMER alle Angaben im Klartext.
     Wer nicht tippt oder mit der Maus fährt, verpasst nichts, und
     Vorleseprogramme finden den Text.
   - Bewegung läuft EINMAL ab, wenn das Bild ins Sichtfeld kommt.
   - Bei "Bewegung reduzieren" bleibt alles ruhig stehen.
   ================================================================ */
.projektbild{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--akzent-dunkel);
  box-shadow:0 18px 44px rgba(19,32,42,.22)}
/* Die Bühne trägt Foto UND Punkte. Beides muss zusammen bewegt werden,
   sonst wandern die Punkte beim Heranfahren von ihrem Bauteil weg. */
.projektbild-buehne{position:absolute;inset:0;transform-origin:50% 50%}
.projektbild img{width:100%;height:100%;object-fit:cover;display:block}
/* Sanftes Heranfahren, damit das Standbild lebt. Läuft einmal und bleibt stehen. */
html.anim .projektbild.laeuft .projektbild-buehne{animation:heranfahren 14s ease-out forwards}
@keyframes heranfahren{from{transform:scale(1)}to{transform:scale(1.05)}}

/* Ein Punkt: der Knopf auf dem Foto. Der Halter ist ein Punkt ohne Ausdehnung
   an der Stelle im Bild; Knopf und Schild haengen daran. */
.punkt-halter{position:absolute;width:0;height:0;z-index:2}
.punkt{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:38px;height:38px;padding:0;
  border-radius:50%;border:2px solid #fff;background:var(--akzent);color:#fff;
  font-weight:700;font-size:16px;line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.45);transition:background .15s,transform .15s}
.punkt:hover,.punkt:focus-visible{background:var(--signal);color:var(--akzent-dunkel);
  transform:translate(-50%,-50%) scale(1.12)}
.punkt:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Erscheinen nacheinander, sobald das Bild sichtbar wird */
html.anim .projektbild .punkt{opacity:0}
html.anim .projektbild.laeuft .punkt{animation:punkt-auf .5s ease forwards}
@keyframes punkt-auf{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* Ein einziger Ring, der nach dem Erscheinen einmal aufgeht */
.punkt::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--signal);opacity:0}
html.anim .projektbild.laeuft .punkt::after{animation:ring 1.6s ease-out .5s 2}
@keyframes ring{from{opacity:.85;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}

/* Das Schild am Punkt. Erscheint beim Überfahren, beim Antippen und bei
   Tastatur-Bedienung. Es liegt bewusst innerhalb des Bildes. */
.punkt-schild{position:absolute;left:0;top:0;transform:translate(-50%,-100%);margin-top:-26px;
  background:rgba(19,32,42,.93);color:#fff;border-radius:10px;padding:11px 15px;
  width:250px;z-index:3;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .18s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.punkt-schild b{display:block;font-size:15.5px;margin-bottom:3px;color:var(--signal)}
.punkt-schild span{display:block;font-size:14px;line-height:1.45;color:#dfe7ee}
.punkt-halter:hover .punkt-schild,.punkt-halter:focus-within .punkt-schild,
.punkt-halter.offen .punkt-schild{opacity:1;visibility:visible}
/* Am linken und rechten Bildrand rutscht das Schild nach innen,
   damit es nicht aus dem Bild ragt. */
.punkt-halter.links .punkt-schild{transform:translate(-14%,-100%)}
.punkt-halter.rechts .punkt-schild{transform:translate(-86%,-100%)}

/* Warmes Licht an der Außenleuchte: geht am Ende der Bewegung leise an.
   Es wird nichts ins Foto hineinerfunden, nur der vorhandene Strahler
   bekommt einen weichen Schein. */
.lichtschein{position:absolute;transform:translate(-50%,-50%);width:18%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(circle,rgba(255,208,128,.72) 0%,rgba(255,198,110,.30) 36%,rgba(255,195,105,0) 70%)}
html.anim .projektbild.laeuft .lichtschein{animation:licht-an 2.6s ease-out 1.5s forwards}
@keyframes licht-an{from{opacity:0}to{opacity:1}}

/* Die Liste unter dem Bild: alle Punkte im Klartext, immer sichtbar. */
.punktliste{list-style:none;margin:0}
.punktliste li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--linie)}
.punktliste li:last-child{border-bottom:0}
.punktliste .nummer{flex:none;width:30px;height:30px;border-radius:50%;background:var(--akzent);
  color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
  margin-top:2px}
.punktliste b{display:block;font-size:16.5px}
.punktliste span{display:block;color:var(--nebentext);font-size:15.5px}

/* Projekt-Block: links das Bild, rechts der Text. Beide Spalten enden oben
   UND unten auf derselben Linie (Torbens Regel). */
.projekt-block{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:stretch}
.projekt-block-gedreht{grid-template-columns:1fr 1.35fr}
.projekt-block>div{display:flex;flex-direction:column;justify-content:center}
.projekt-block .projektbild{justify-content:flex-start}
.projekt-marke{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:10px}
.abschnitt-dunkel .projekt-marke,.abschnitt-akzent .projekt-marke{color:var(--signal)}
.abschnitt-dunkel .punktliste li,.abschnitt-akzent .punktliste li{border-color:rgba(255,255,255,.16)}
.abschnitt-dunkel .punktliste span,.abschnitt-akzent .punktliste span{color:var(--akzent-hell)}
.abschnitt-dunkel .punktliste .nummer,.abschnitt-akzent .punktliste .nummer{background:var(--signal);color:var(--akzent-dunkel)}

/* Zwei Bilder nebeneinander (Übersicht und Ausschnitt): gleich hoch. */
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
/* KEIN height:100% am Bild! Mit fester Seitenverhaeltnis-Angabe wuerde das
   Bild dann seine Breite aus der Zeilenhoehe rechnen und aus der Spalte
   herauslaufen. Gleiche Hoehe entsteht hier dadurch, dass beide Bilder
   dasselbe Seitenverhaeltnis haben (siehe baue-projektbilder.py). */
.bildpaar>div{display:flex;flex-direction:column}
.bildunterschrift{font-size:14.5px;color:var(--nebentext);margin:10px 0 0}
.abschnitt-dunkel .bildunterschrift{color:var(--akzent-hell)}

/* Vorher/Nachher: drei Schieber untereinander, jeder mit eigener Überschrift.
   Der Schieber selbst steckt im Bauteil .vergleich weiter oben. */
.vergleich-reihe{display:grid;grid-template-columns:1fr;gap:44px;margin-top:10px}
.vergleich-block h3{margin-bottom:6px}
.vergleich-block .kopf{max-width:860px;margin:0 auto;text-align:center}
.vergleich-block p{color:var(--nebentext);margin-bottom:0}
.abschnitt-dunkel .vergleich-block p{color:var(--akzent-hell)}
.vergleich-hoch{aspect-ratio:5/8;max-width:520px}
.vergleich-quer{aspect-ratio:4/3;max-width:860px}

/* Übersicht der weiteren Projekte */
/* Zwei feste Spalten: acht Karten ergeben vier volle Reihen. Bei drei
   Spalten bliebe in der letzten Reihe ein Loch (die 2+1-Optik). */
.projektraster{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;margin-top:34px}
.projektkarte{background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.projektkarte-bild{aspect-ratio:16/10;overflow:hidden}
.projektkarte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.projektkarte:hover .projektkarte-bild img{transform:scale(1.05)}
.projektkarte-text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.projektkarte h3{min-height:50px;display:flex;align-items:center;margin-bottom:6px}
.projektkarte p{color:var(--nebentext);font-size:15.5px;margin:0}

@media (max-width:900px){
  .projekt-block,.projekt-block-gedreht,.bildpaar{grid-template-columns:1fr;gap:26px}
  .projektraster{grid-template-columns:1fr}
  .punkt{width:34px;height:34px;font-size:15px}
  .punkt-schild{width:200px}
  .vergleich-hoch,.vergleich-quer{max-width:none}
}
@media (max-width:560px){
  .projektraster{grid-template-columns:1fr}
  .punkt-schild{width:170px;padding:9px 12px}
  .punkt-schild span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html.anim .projektbild.laeuft .projektbild-buehne,
  html.anim .projektbild.laeuft .punkt,
  html.anim .projektbild.laeuft .punkt::after,
  html.anim .projektbild.laeuft .lichtschein{animation:none}
  html.anim .projektbild .punkt{opacity:1}
}

/* Punktliste quer unter dem Bild: die Angaben stehen nebeneinander statt
   untereinander, damit das Bild darüber die volle Breite bekommt.
   Feste Spaltenzahl, nie auto-fit, sonst entsteht die 2+1-Optik. */
.punktliste-quer{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:26px}
.punktliste-zwei{grid-template-columns:repeat(2,1fr)}
.punktliste-quer li{border-bottom:0;padding:0}
/* Bild allein in der Mitte der Spalte, mit Deckelbreite */
.bild-mitte{margin-left:auto;margin-right:auto}
.mittelblock{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:900px){
  .punktliste-quer,.punktliste-zwei{grid-template-columns:1fr;gap:0}
  .punktliste-quer li{padding:13px 0;border-bottom:1px solid var(--linie)}
  .punktliste-quer li:last-child{border-bottom:0}
}

/* Team-Portraet: die echten Schwarzweissfotos des Betriebs, Hochformat 4:5.
   Sie stehen an der Stelle des Monogramms, links neben Name und Funktion. */
.team-bild{flex:none;width:96px;height:120px;object-fit:cover;border-radius:10px;
  background:var(--grau)}
@media (max-width:560px){
  .team-bild{width:80px;height:100px}
}

/* Fußzeile auf dem Handy: die drei Spalten passen unter 760 Pixel nicht mehr
   nebeneinander, die Seite wurde dadurch auf dem iPhone seitlich verschoben
   (gemessen 641 statt 390 Pixel breit). Betraf ALLE Seiten, nicht nur die
   Projekte-Seite. Gefunden am 04.09.2026 beim Prüfen der Projekte-Seite. */
@media (max-width:760px){
  .fuss-raster{grid-template-columns:1fr;gap:28px}
}

/* ================================================================
   Zusatz-Bauteile fuer Kundenseiten
   (Zertifizierungen, Team, Bueroezeiten, Standortkarte, Marken)
   Grundsatz wie ueberall: nebeneinander heisst gleich hoch und gleich
   breit. Deshalb feste Spaltenzahlen, die ohne Rest aufgehen, und
   align-items:stretch statt Zufallshoehen.
   ================================================================ */

/* Zertifizierungen: acht Nachweise, also 4x2 bzw. 2x4 bzw. 1x8.
   Bewusst KEINE Ueberschrift in den Kaesten, sondern ein Textstueck:
   die Nachweisnamen sind unterschiedlich lang und wuerden als h3
   sonst auf verschiedenen Zeilen beginnen. */
.zert-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  align-items:stretch;margin-top:32px}
.zert{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:20px;
  display:flex;align-items:center;gap:14px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.zert:hover{border-color:var(--akzent);box-shadow:0 8px 20px rgba(28,53,71,.12)}
.zert .ico{color:var(--akzent)}
.zert-text{font-weight:700;font-size:15.5px;line-height:1.35}
.abschnitt-dunkel .zert{background:rgba(255,255,255,.06);border-color:rgba(253,182,44,.35);color:#fff}
.abschnitt-dunkel .zert .ico{color:var(--signal)}
.abschnitt-dunkel .zert:hover{border-color:var(--signal);box-shadow:none}

/* Team: zwei Spalten, damit 14 Personen ohne angebrochene Reihe aufgehen.
   Kein erfundenes Portraetfoto, sondern die Initialen als Zeichen. */
.team-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  align-items:stretch;margin-top:32px}
.team-karte{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:22px;
  display:flex;align-items:flex-start;gap:18px}
.monogramm{display:flex;align-items:center;justify-content:center;flex:none;
  width:58px;height:58px;border-radius:50%;background:var(--signal);
  color:var(--akzent-dunkel);font-weight:700;font-size:19px;letter-spacing:.02em}
.team-karte h3{margin:0 0 4px;min-height:29px;display:flex;align-items:center}
.team-karte p{margin:0;color:var(--nebentext);font-size:15.5px}
.team-karte a{display:inline-block;color:var(--akzent);font-weight:700;font-size:15px;
  text-decoration:none;margin-top:6px}
.team-karte a:hover{text-decoration:underline;text-underline-offset:4px}
.team-karte .team-inhalt{display:flex;flex-direction:column}

/* Hinweiszeile unter einem Abschnitt, zum Beispiel fuer fehlende Angaben */
.hinweiszeile{margin-top:26px;font-size:14.5px;color:var(--nebentext);
  border-left:4px solid var(--signal);padding:10px 0 10px 16px}

/* Bueroezeiten */
.zeiten{margin-top:8px;border-top:1px solid var(--linie)}
.zeiten-reihe{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px}
.zeiten-reihe span:first-child{font-weight:700}
.zeiten-reihe.zu span:last-child{color:var(--nebentext)}

/* Standortkarte: laedt direkt mit der Seite, ohne Zwischenklick */
.karte-rahmen{border-radius:14px;overflow:hidden;border:1px solid var(--linie);
  background:var(--grau);min-height:320px;height:100%}
.karte-rahmen iframe{display:block;width:100%;height:100%;min-height:320px;border:0}
.karte-hinweis{font-size:13.5px;color:var(--nebentext);margin-top:10px}

/* Marken und Partner: sechs Kaesten, also 3x2 bzw. 2x3 bzw. 1x6 */
.partner-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  align-items:stretch;margin-top:32px}
.partner{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:22px;
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s}
.partner:hover{border-color:var(--akzent)}
.partner-name{font-weight:700;font-size:17px;margin-bottom:6px}
.partner p{margin:0;color:var(--nebentext);font-size:15px}

/* Fussleiste: soziale Netze */
.fuss-social{display:flex;gap:18px;margin-top:12px}
.fuss-social a{display:inline-flex;align-items:center;gap:8px;padding:0}
.fuss-social .ico{color:var(--signal)}

@media (max-width:1100px){
  .zert-raster{grid-template-columns:repeat(2,1fr)}
  .partner-raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .team-raster{grid-template-columns:1fr}
}
@media (max-width:560px){
  .zert-raster,.partner-raster{grid-template-columns:1fr}
  .team-karte{padding:18px;gap:14px}
  .monogramm{width:48px;height:48px;font-size:17px}
}

/* ================================================================
   Projektbild mit Punkten  (Elektro Glatz, 04.09.2026)
   Das echte Foto des Kunden bleibt unverändert. Darüber liegen
   nummerierte Punkte, die zeigen, WAS an diesem Objekt gebaut wurde
   (Satanlage, Außenbeleuchtung, Türkommunikation …).
   Regeln dabei:
   - Die Liste unter dem Bild zeigt IMMER alle Angaben im Klartext.
     Wer nicht tippt oder mit der Maus fährt, verpasst nichts, und
     Vorleseprogramme finden den Text.
   - Bewegung läuft EINMAL ab, wenn das Bild ins Sichtfeld kommt.
   - Bei "Bewegung reduzieren" bleibt alles ruhig stehen.
   ================================================================ */
.projektbild{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--akzent-dunkel);
  box-shadow:0 18px 44px rgba(19,32,42,.22)}
/* Die Bühne trägt Foto UND Punkte. Beides muss zusammen bewegt werden,
   sonst wandern die Punkte beim Heranfahren von ihrem Bauteil weg. */
.projektbild-buehne{position:absolute;inset:0;transform-origin:50% 50%}
.projektbild img{width:100%;height:100%;object-fit:cover;display:block}
/* Sanftes Heranfahren, damit das Standbild lebt. Läuft einmal und bleibt stehen. */
html.anim .projektbild.laeuft .projektbild-buehne{animation:heranfahren 14s ease-out forwards}
@keyframes heranfahren{from{transform:scale(1)}to{transform:scale(1.05)}}

/* Ein Punkt: der Knopf auf dem Foto. Der Halter ist ein Punkt ohne Ausdehnung
   an der Stelle im Bild; Knopf und Schild haengen daran. */
.punkt-halter{position:absolute;width:0;height:0;z-index:2}
.punkt{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:38px;height:38px;padding:0;
  border-radius:50%;border:2px solid #fff;background:var(--akzent);color:#fff;
  font-weight:700;font-size:16px;line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.45);transition:background .15s,transform .15s}
.punkt:hover,.punkt:focus-visible{background:var(--signal);color:var(--akzent-dunkel);
  transform:translate(-50%,-50%) scale(1.12)}
.punkt:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Erscheinen nacheinander, sobald das Bild sichtbar wird */
html.anim .projektbild .punkt{opacity:0}
html.anim .projektbild.laeuft .punkt{animation:punkt-auf .5s ease forwards}
@keyframes punkt-auf{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* Ein einziger Ring, der nach dem Erscheinen einmal aufgeht */
.punkt::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--signal);opacity:0}
html.anim .projektbild.laeuft .punkt::after{animation:ring 1.6s ease-out .5s 2}
@keyframes ring{from{opacity:.85;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}

/* Das Schild am Punkt. Erscheint beim Überfahren, beim Antippen und bei
   Tastatur-Bedienung. Es liegt bewusst innerhalb des Bildes. */
.punkt-schild{position:absolute;left:0;top:0;transform:translate(-50%,-100%);margin-top:-26px;
  background:rgba(19,32,42,.93);color:#fff;border-radius:10px;padding:11px 15px;
  width:250px;z-index:3;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .18s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.punkt-schild b{display:block;font-size:15.5px;margin-bottom:3px;color:var(--signal)}
.punkt-schild span{display:block;font-size:14px;line-height:1.45;color:#dfe7ee}
.punkt-halter:hover .punkt-schild,.punkt-halter:focus-within .punkt-schild,
.punkt-halter.offen .punkt-schild{opacity:1;visibility:visible}
/* Am linken und rechten Bildrand rutscht das Schild nach innen,
   damit es nicht aus dem Bild ragt. */
.punkt-halter.links .punkt-schild{transform:translate(-14%,-100%)}
.punkt-halter.rechts .punkt-schild{transform:translate(-86%,-100%)}

/* Warmes Licht an der Außenleuchte: geht am Ende der Bewegung leise an.
   Es wird nichts ins Foto hineinerfunden, nur der vorhandene Strahler
   bekommt einen weichen Schein. */
.lichtschein{position:absolute;transform:translate(-50%,-50%);width:18%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(circle,rgba(255,208,128,.72) 0%,rgba(255,198,110,.30) 36%,rgba(255,195,105,0) 70%)}
html.anim .projektbild.laeuft .lichtschein{animation:licht-an 2.6s ease-out 1.5s forwards}
@keyframes licht-an{from{opacity:0}to{opacity:1}}

/* Die Liste unter dem Bild: alle Punkte im Klartext, immer sichtbar. */
.punktliste{list-style:none;margin:0}
.punktliste li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--linie)}
.punktliste li:last-child{border-bottom:0}
.punktliste .nummer{flex:none;width:30px;height:30px;border-radius:50%;background:var(--akzent);
  color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
  margin-top:2px}
.punktliste b{display:block;font-size:16.5px}
.punktliste span{display:block;color:var(--nebentext);font-size:15.5px}

/* Projekt-Block: links das Bild, rechts der Text. Beide Spalten enden oben
   UND unten auf derselben Linie (Torbens Regel). */
.projekt-block{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:stretch}
.projekt-block-gedreht{grid-template-columns:1fr 1.35fr}
.projekt-block>div{display:flex;flex-direction:column;justify-content:center}
.projekt-block .projektbild{justify-content:flex-start}
.projekt-marke{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:10px}
.abschnitt-dunkel .projekt-marke,.abschnitt-akzent .projekt-marke{color:var(--signal)}
.abschnitt-dunkel .punktliste li,.abschnitt-akzent .punktliste li{border-color:rgba(255,255,255,.16)}
.abschnitt-dunkel .punktliste span,.abschnitt-akzent .punktliste span{color:var(--akzent-hell)}
.abschnitt-dunkel .punktliste .nummer,.abschnitt-akzent .punktliste .nummer{background:var(--signal);color:var(--akzent-dunkel)}

/* Zwei Bilder nebeneinander (Übersicht und Ausschnitt): gleich hoch. */
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
/* KEIN height:100% am Bild! Mit fester Seitenverhaeltnis-Angabe wuerde das
   Bild dann seine Breite aus der Zeilenhoehe rechnen und aus der Spalte
   herauslaufen. Gleiche Hoehe entsteht hier dadurch, dass beide Bilder
   dasselbe Seitenverhaeltnis haben (siehe baue-projektbilder.py). */
.bildpaar>div{display:flex;flex-direction:column}
.bildunterschrift{font-size:14.5px;color:var(--nebentext);margin:10px 0 0}
.abschnitt-dunkel .bildunterschrift{color:var(--akzent-hell)}

/* Vorher/Nachher: drei Schieber untereinander, jeder mit eigener Überschrift.
   Der Schieber selbst steckt im Bauteil .vergleich weiter oben. */
.vergleich-reihe{display:grid;grid-template-columns:1fr;gap:44px;margin-top:10px}
.vergleich-block h3{margin-bottom:6px}
.vergleich-block .kopf{max-width:860px;margin:0 auto;text-align:center}
.vergleich-block p{color:var(--nebentext);margin-bottom:0}
.abschnitt-dunkel .vergleich-block p{color:var(--akzent-hell)}
.vergleich-hoch{aspect-ratio:5/8;max-width:520px}
.vergleich-quer{aspect-ratio:4/3;max-width:860px}

/* Übersicht der weiteren Projekte */
/* Zwei feste Spalten: acht Karten ergeben vier volle Reihen. Bei drei
   Spalten bliebe in der letzten Reihe ein Loch (die 2+1-Optik). */
.projektraster{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;margin-top:34px}
.projektkarte{background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.projektkarte-bild{aspect-ratio:16/10;overflow:hidden}
.projektkarte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.projektkarte:hover .projektkarte-bild img{transform:scale(1.05)}
.projektkarte-text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.projektkarte h3{min-height:50px;display:flex;align-items:center;margin-bottom:6px}
.projektkarte p{color:var(--nebentext);font-size:15.5px;margin:0}

@media (max-width:900px){
  .projekt-block,.projekt-block-gedreht,.bildpaar{grid-template-columns:1fr;gap:26px}
  .projektraster{grid-template-columns:1fr}
  .punkt{width:34px;height:34px;font-size:15px}
  .punkt-schild{width:200px}
  .vergleich-hoch,.vergleich-quer{max-width:none}
}
@media (max-width:560px){
  .projektraster{grid-template-columns:1fr}
  .punkt-schild{width:170px;padding:9px 12px}
  .punkt-schild span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html.anim .projektbild.laeuft .projektbild-buehne,
  html.anim .projektbild.laeuft .punkt,
  html.anim .projektbild.laeuft .punkt::after,
  html.anim .projektbild.laeuft .lichtschein{animation:none}
  html.anim .projektbild .punkt{opacity:1}
}

/* Punktliste quer unter dem Bild: die Angaben stehen nebeneinander statt
   untereinander, damit das Bild darüber die volle Breite bekommt.
   Feste Spaltenzahl, nie auto-fit, sonst entsteht die 2+1-Optik. */
.punktliste-quer{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:26px}
.punktliste-zwei{grid-template-columns:repeat(2,1fr)}
.punktliste-quer li{border-bottom:0;padding:0}
/* Bild allein in der Mitte der Spalte, mit Deckelbreite */
.bild-mitte{margin-left:auto;margin-right:auto}
.mittelblock{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:900px){
  .punktliste-quer,.punktliste-zwei{grid-template-columns:1fr;gap:0}
  .punktliste-quer li{padding:13px 0;border-bottom:1px solid var(--linie)}
  .punktliste-quer li:last-child{border-bottom:0}
}

/* Team-Portraet: die echten Schwarzweissfotos des Betriebs, Hochformat 4:5.
   Sie stehen an der Stelle des Monogramms, links neben Name und Funktion. */
.team-bild{flex:none;width:96px;height:120px;object-fit:cover;border-radius:10px;
  background:var(--grau)}
@media (max-width:560px){
  .team-bild{width:80px;height:100px}
}

/* Team-Portraet: die echten Schwarzweissfotos des Betriebs, Hochformat 4:5.
   Sie stehen an der Stelle des Monogramms, links neben Name und Funktion. */
.team-bild{flex:none;width:96px;height:120px;object-fit:cover;border-radius:10px;
  background:var(--grau)}
@media (max-width:560px){
  .team-bild{width:80px;height:100px}
}


/* Fußzeile auf dem Handy: die drei Spalten passen unter 760 Pixel nicht mehr
   nebeneinander, die Seite wurde dadurch auf dem iPhone seitlich verschoben
   (gemessen 641 statt 390 Pixel breit). Betraf ALLE Seiten, nicht nur die
   Projekte-Seite. Gefunden am 04.09.2026 bei Elektro Glatz. */
@media (max-width:760px){
  .fuss-raster{grid-template-columns:1fr;gap:28px}
}

/* ================================================================
   Marken-Laufband  (Elektro Glatz, 04.09.2026)
   Vorbild: weil.bizzcenter.de. Sechs identische Saetze liegen
   nebeneinander, verschoben wird um genau eine Satzbreite. Danach
   springt die Animation zurueck, was man nicht sieht, weil an der
   Stelle schon der naechste Satz steht.
   Wichtig: das Band liegt in einem eigenen Kasten mit overflow:hidden,
   damit nie die ganze Seite waagerecht scrollt (Scroll-Fix-Regel).
   ================================================================ */
.marken-band{position:relative;overflow:hidden;margin-top:38px;
  padding:6px 0;contain:paint}

/* Weiches Ausblenden an beiden Raendern. Der Farbwert muss zum
   Abschnittshintergrund (--grau) passen. */
.marken-band::before,.marken-band::after{content:"";position:absolute;top:0;bottom:0;
  width:120px;z-index:2;pointer-events:none}
.marken-band::before{left:0;background:linear-gradient(to right,var(--grau),rgba(244,246,248,0))}
.marken-band::after{right:0;background:linear-gradient(to left,var(--grau),rgba(244,246,248,0))}

.marken-lauf{display:flex;width:max-content;will-change:transform;
  animation:marken-lauf 38s linear infinite}
.marken-band:hover .marken-lauf{animation-play-state:paused}

.marken-satz{display:flex;flex-shrink:0}

/* Jedes Logo bekommt dasselbe Feld und wird darin eingepasst. Dadurch
   stehen breite und schmale Wortmarken auf einer Ebene und wirken
   gleich gross (Regel: Nebeneinander heisst gleich hoch und breit).
   ACHTUNG: Die Klasse heisst .marken-logo, NICHT .marke. Die Klasse
   .marke gehoert dem Firmenlogo in der Kopfzeile; als beide gleich
   hiessen, hat das Laufband dem Firmenlogo seine Masse aufgezwungen. */
.marken-band{--grundgroesse:66px}
.marken-logo{flex-shrink:0;width:210px;height:74px;margin:0 14px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:transform .2s}
/* Die Logos stehen in ihren Originalfarben. Eine Entsaettigung wuerde
   zwar ruhiger wirken, nimmt den Marken aber die Wiedererkennung, und
   genau darum geht es in diesem Abschnitt. */
.marken-logo:hover,.marken-logo:focus-visible{transform:scale(1.06)}

/* Die Hoehe je Logo kommt aus dem Generator: Grundgroesse mal Faktor.
   Der Faktor gleicht das Seitenverhaeltnis aus, damit eine breite
   Wortmarke nicht groesser wirkt als eine kompakte. */
.marken-logo img{height:calc(var(--grundgroesse) * var(--f,.5));width:auto;
  max-width:100%;object-fit:contain}

@keyframes marken-lauf{
  from{transform:translateX(0)}
  to{transform:translateX(-16.6667%)}   /* genau ein Satz von sechs */
}

@media (max-width:700px){
  .marken-band::before,.marken-band::after{width:56px}
  .marken-band{--grundgroesse:52px}
  .marken-logo{width:158px;height:62px;margin:0 10px}
  .marken-lauf{animation-duration:26s}
}

/* Bei "Bewegung reduzieren" steht das Band still und laesst sich von Hand
   schieben. Gehoert in den vorhandenen Block
   @media (prefers-reduced-motion:reduce){ ... } :
     .marken-lauf{animation:none}
     .marken-band{overflow-x:auto;scrollbar-width:thin}
     .marken-satz:not(:first-child){display:none}
*/

/* ================================================================
   Weiche Uebergaenge zwischen hellen und dunklen Flaechen
   (Torben, 04.09.2026, Elektro Glatz: nie mehr hart Weiss auf Dunkel
   stossen lassen). Der Generator setzt vor und nach jeder dunklen
   Flaeche einen .uebergang-Streifen; die Verlaufsfarben kommen aus dem
   Helfer uebergang(von, nach) in baue-seiten.py und muessen die Farben
   der BEIDEN Nachbarflaechen sein.
   ================================================================ */
.uebergang{display:block;height:96px}
@media (max-width:900px){.uebergang{height:60px}}

/* ================================================================
   Kino-Kopf der Startseite (Gartenbau Mustermann, 04.09.2026)

   Torbens Regel: oben gehoert ein animierter Wow-Effekt hin, er laeuft
   EINMAL und bleibt dann ruhig stehen. Der erste Versuch war eine
   gezeichnete Bagger-Animation. Torbens Urteil: "ein Comic-Ding, das sieht
   aus wie ein Video von Dreijaehrigen." Gelernt: Wow entsteht nicht durch
   Zeichnung, sondern durch ein grosses ECHTES Foto, filmisch behandelt.

   Aufbau: bildschirmfuellendes Foto, sehr langsame Kamerafahrt hinein
   (22 Sekunden, einmal), dunkler Schleier von links fuer die Schrift,
   gestaffelt aufbauender Text und eine weisse Leiste, die den Bildfuss
   ueberlappt.

   Grundzustand dieser Regeln ist das FERTIGE Bild. Erst wenn JavaScript
   die Klasse "laeuft" setzt (Abschnitt sichtbar UND niemand hat "Bewegung
   reduzieren" eingestellt), starten die Animationen. Ohne JavaScript und
   bei reduzierter Bewegung steht sofort alles da.
   ================================================================ */
.kinokopf{position:relative;background:var(--papier);padding-bottom:16px}
.kk-buehne{position:relative;overflow:hidden;background:var(--dunkel-tief);
  min-height:clamp(560px,86vh,820px);display:flex;align-items:flex-end}
.kk-buehne picture{position:absolute;inset:0}
.kk-foto{width:100%;height:100%;object-fit:cover;object-position:52% 56%}

/* Der Film liegt UNTER dem Foto und zeigt dieselbe Stelle: Der Bagger
   schaufelt Geroell auf und kippt es woanders ab (Torben, 04.09.2026).
   Gleicher Ausschnitt wie das Foto (object-position), sonst springt das Bild
   beim Filmstart.

   Wichtig: Der Film selbst bleibt IMMER sichtbar (keine Deckkraft 0). Safari
   startet einen Film nur, wenn das Video-Element sichtbar ist; ein
   durchsichtiges Video laeuft dort nie los. Verdeckt wird er deshalb vom
   Foto darueber, und dieses Foto blendet sich weg, sobald der Film wirklich
   laeuft. Laeuft er nicht, bleibt das Foto liegen und deckt auch Safaris
   Abspielknopf zu. */
.kk-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 56%;pointer-events:none}
/* Nur EINER der beiden Filme steht im Bild. Der andere ist display:none und
   wird vom Browser deshalb weder geladen noch abgespielt. */
.kk-film-hoch{display:none}
@media (max-width:720px){
  .kk-film-quer{display:none}
  .kk-film-hoch{display:block}
}
.kk-foto{transition:opacity .8s ease}
.kinokopf.film-laeuft .kk-foto{opacity:0}

/* Notknopf fuer den Film. Er steht NUR da, wenn der Browser das
   automatische Abspielen verbietet (Safari: "Nie automatisch abspielen",
   Energiesparmodus). Sonst bleibt er weg, damit der Kopfbereich ruhig
   bleibt. Er sitzt unter den beiden Hauptknoepfen und ist bewusst
   kleiner und leiser als die, damit er ihnen nicht die Aufmerksamkeit
   nimmt. */
/* Der Knopf steht RECHTS NEBEN den beiden Hauptknoepfen, nicht darunter
   (Torben, 04.09.2026). Er sitzt deshalb in derselben Reihe und ist genau
   so hoch wie sie (dieselbe Innenhoehe, dieselbe Rahmenstaerke), damit die
   drei auf einer Ebene stehen. Leiser gestaltet ist er trotzdem: nur ein
   duenner heller Rahmen, kein gefuellter Grund. */
.kk-filmknopf{display:none;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .2s,border-color .2s}
.kk-filmknopf:hover{background:rgba(255,255,255,.24);border-color:#fff}
.kinokopf.film-blockiert .kk-filmknopf{display:inline-flex}

/* Der Schleier macht die Schrift lesbar, ohne einen Kasten ins Bild zu
   setzen: dunkel von links, zusaetzlich etwas Tiefe von unten. */
.kk-schleier{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,13,26,.86) 0%,rgba(8,13,26,.72) 32%,
    rgba(8,13,26,.34) 62%,rgba(8,13,26,.10) 100%),
  linear-gradient(to top,rgba(8,13,26,.55) 0%,rgba(8,13,26,0) 52%)}

/* Ein einziger heller Streifen wandert beim Laden ueber das Bild.
   Er ersetzt das frueher gezeichnete Funkeln: dezent, aber man merkt,
   dass die Seite lebt. */
.kk-lichtstreifen{position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%;
  transform:skewX(-12deg);opacity:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0))}

/* Filmische Vignette am Bildfuss. Erster Versuch war ein Verlauf ins Weisse,
   der legte aber einen milchigen Nebelstreifen quer ueber das Foto. Dunkel
   nach unten sieht aus wie Kino und traegt ausserdem die weisse Leiste,
   die darauf sitzt. */
.kk-ausblendung{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,13,26,0) 0%,rgba(8,13,26,.30) 55%,rgba(8,13,26,.62) 100%)}

.kk-innen{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:132px}
.kk-innen .vorzeile{color:#bcd0ff;margin-bottom:16px}
/* Die grosse Ueberschrift wird NICHT getrennt: "Bagger-biss" quer ueber
   zwei Zeilen sah auf dem Handy nach Fehler aus. Sie bricht nur an
   Leerzeichen. */
.kk-innen h1{hyphens:manual;color:#fff;font-size:clamp(33px,5.2vw,58px);max-width:15ch;
  margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.kk-satz{color:rgba(255,255,255,.88);max-width:54ch;font-size:clamp(16px,1.4vw,19px);
  text-shadow:0 1px 16px rgba(0,0,0,.45)}
.kk-innen .knopfreihe{margin-top:26px}

/* Die Leiste mit den vier Versprechen ueberlappt den Bildfuss. Feste
   Spaltenzahl, gleiche Mindesthoehe, Sinnbild und Ueberschrift in einer
   Zeile: alle vier stehen damit auf einer Ebene (Torbens Regel). */
.kk-leiste{position:relative;z-index:3;margin-top:-74px;background:#fff;
  border-radius:16px;box-shadow:0 22px 54px rgba(16,21,32,.18);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.kk-punkt{display:flex;align-items:center;gap:14px;padding:22px 22px;min-height:108px;
  border-right:1px solid var(--linie)}
.kk-punkt:last-child{border-right:0}
.kk-punkt .ico{color:var(--akzent)}
.kk-punkt strong{display:block;font-size:16px;line-height:1.3}
.kk-punkt span{display:block;font-size:14px;line-height:1.45;color:var(--nebentext)}

/* ---- ab hier laeuft die Animation, genau einen Durchlauf ---- */
.js .kinokopf .kk-an{opacity:0}
.kinokopf.laeuft .kk-foto,
.kinokopf.laeuft .kk-film{animation:kk-fahrt 22s .1s cubic-bezier(.18,.6,.32,1) both}
.kinokopf.laeuft .kk-lichtstreifen{animation:kk-licht 2.1s .45s ease-out both}
.kinokopf.laeuft .kk-an{animation:kk-auf .85s cubic-bezier(.2,.75,.3,1) both}
.kinokopf.laeuft .kk-1{animation-delay:.12s}
.kinokopf.laeuft .kk-2{animation-delay:.28s}
.kinokopf.laeuft .kk-3{animation-delay:.46s}
.kinokopf.laeuft .kk-4{animation-delay:.62s}
.kinokopf.laeuft .kk-5{animation-delay:.86s}

/* Choreografie auf dem Handy (Torben, 04.09.2026): Dort soll der Bagger
   ERST ein Stueck arbeiten, dann kommt die Ueberschrift, und wenn er die
   Bewegung einmal ganz gemacht hat, folgt der Rest nacheinander.
   Die Zahlen haengen am Film: der erste Loeffel voll ist nach rund drei
   Sekunden, ein ganzer Arbeitstakt dauert acht. Wird der Film getauscht,
   gehoeren diese Verzoegerungen nachgezogen. */
@media (max-width:720px){
  .kinokopf.laeuft .kk-1{animation-delay:3.2s}
  .kinokopf.laeuft .kk-2{animation-delay:3.6s}
  .kinokopf.laeuft .kk-3{animation-delay:8.4s}
  .kinokopf.laeuft .kk-4{animation-delay:9.1s}
  .kinokopf.laeuft .kk-5{animation-delay:9.8s}
}

@keyframes kk-fahrt{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes kk-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes kk-licht{0%{transform:translateX(0) skewX(-12deg);opacity:0}
  25%{opacity:1}100%{transform:translateX(430%) skewX(-12deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .js .kinokopf .kk-an{opacity:1;transform:none}
  .kinokopf .kk-foto,.kinokopf .kk-film,
  .kinokopf .kk-lichtstreifen{animation:none !important;transform:none}
}

/* Die Kopfzeile schwebt auf der Startseite ueber dem Foto: das Bild
   beginnt dann wirklich an der Oberkante. Sobald gescrollt wird, setzt das
   Skript "kopf-fest" und die Zeile bekommt ihren weissen Grund zurueck.

   Stolperstein (gemessen am 04.09.2026): Der negative Abstand muss an das
   BILD, nicht an die Kopfzeile. Mit margin-bottom:-78px auf der Kopfzeile
   schrumpft ihr Bereich im Textfluss auf null, und ein sticky-Element ohne
   Bereich klebt nicht mehr: die Kopfzeile scrollte einfach weg. Zieht man
   stattdessen den Kopfbereich um dieselben 78 Pixel nach oben, behaelt die
   Kopfzeile ihren Platz und klebt weiter. */
.kopf-ueber .kinokopf{margin-top:-78px}
.kopf-ueber .kopfzeile{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;
  transition:background .25s ease,border-color .25s ease}
.kopf-ueber .marke .logo-farbig{display:none}
.kopf-ueber .marke .logo-weiss{display:block}
.kopf-ueber .hauptmenue a:not(.knopf){color:#fff}
.kopf-ueber .burger span{background:#fff}
.kopf-ueber.kopf-fest .kopfzeile{background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom-color:var(--linie)}
.kopf-ueber.kopf-fest .marke .logo-farbig{display:block}
.kopf-ueber.kopf-fest .marke .logo-weiss{display:none}
.kopf-ueber.kopf-fest .hauptmenue a:not(.knopf){color:var(--tinte)}
.kopf-ueber.kopf-fest .burger span{background:var(--tinte)}

/* Ohne JavaScript wird "kopf-fest" nie gesetzt. Weisse Menueschrift auf
   hellem Grund waere unlesbar, deshalb steht die Kopfzeile dann ganz
   normal ueber dem Bild statt darauf. */
html:not(.js) .kopf-ueber .kinokopf{margin-top:0}
html:not(.js) .kopf-ueber .kopfzeile{background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom-color:var(--linie)}
html:not(.js) .kopf-ueber .marke .logo-farbig{display:block}
html:not(.js) .kopf-ueber .marke .logo-weiss{display:none}
html:not(.js) .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)}
html:not(.js) .kopf-ueber .burger span{background:var(--tinte)}

@media (max-width:900px){
  .kk-buehne{min-height:clamp(500px,78vh,700px)}
  .kk-innen{padding-top:104px;padding-bottom:104px}
  .kk-leiste{grid-template-columns:repeat(2,1fr);margin-top:-56px}
  .kk-punkt{min-height:98px;border-bottom:1px solid var(--linie)}
  .kk-punkt:nth-child(2n){border-right:0}
  .kk-punkt:nth-child(n+3){border-bottom:0}
  /* Das Klappmenue hat einen weissen Grund, seine Zeilen bleiben dunkel. */
  .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)}
}
@media (max-width:600px){
  /* Hochformat: der Schleier kommt von unten, sonst liegt die Schrift
     ueber dem hellen Himmel. */
  .kk-schleier{background:linear-gradient(to top,rgba(8,13,26,.92) 0%,
    rgba(8,13,26,.74) 38%,rgba(8,13,26,.34) 72%,rgba(8,13,26,.46) 100%)}
  .kk-innen h1{max-width:none}
  /* Hochformat: den Bildausschnitt etwas tiefer legen, sonst fuellt der
     Himmel die obere Haelfte und der Bagger rutscht hinter den Text. */
  .kk-foto{object-position:56% 64%}
  .kk-leiste{grid-template-columns:1fr;margin-top:-44px}
  .kk-punkt{min-height:0;padding:18px 20px;border-right:0}
  .kk-punkt:nth-child(n+3){border-bottom:1px solid var(--linie)}
  .kk-punkt:last-child{border-bottom:0}
}

/* ================================================================
   Ergaenzungen Gartenbau Mustermann (04.09.2026)
   ================================================================ */

/* Projektbild mit Punkten neben der Klartext-Liste.
   Das Bild behaelt sein Seitenverhaeltnis exakt: die Punkte sitzen in
   Prozent, ein nachtraeglicher Beschnitt wuerde sie neben ihr Bauteil
   schieben (Playbook, Abschnitt 5). Die Liste daneben streckt sich
   deshalb auf die Hoehe des Bildes, nicht umgekehrt. */
.projekt-raster{display:grid;grid-template-columns:.85fr 1fr;gap:44px;
  align-items:stretch;max-width:980px;margin:36px auto 0}
.projekt-raster .punktliste{display:flex;flex-direction:column;
  justify-content:center;gap:6px;margin:0}
@media (max-width:860px){
  .projekt-raster{grid-template-columns:1fr;gap:26px;max-width:520px}
}

/* Gelaendekarte des Einsatzgebiets auf der hellen Flaeche.
   Der Hintergrund muss GENAU der Flaechenfarbe des Abschnitts entsprechen
   (--grau), sonst sieht man das Rechteck des Reliefbildes. Denselben Ton
   traegt werkzeuge/baue-gelaende.py als HINTERGRUND. */
.kartenwelt{max-width:760px;margin:34px auto 0;border-radius:16px;
  overflow:hidden;background:var(--grau)}
.karten-hinweis{margin:14px auto 0;max-width:640px;font-size:13px;
  color:var(--nebentext);text-align:center}
.karten-hinweis a{color:var(--nebentext)}

/* Ortsknoepfe unter der Karte. Ein Klick zeigt das Sinnbild des Ortes.
   Feste Spaltenzahl statt auto-fit, damit nie eine 2+1-Optik entsteht. */
.ortsknoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:26px auto 0;max-width:820px}
.ort-knopf{font:inherit;font-size:14px;line-height:1;color:var(--tinte);cursor:pointer;
  background:#fff;border:1px solid var(--linie);
  border-radius:999px;padding:9px 15px;transition:background .2s,border-color .2s}
.ort-knopf:hover{border-color:var(--akzent);color:var(--akzent)}
.ort-knopf.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)}
@media (max-width:600px){.ort-knopf{font-size:13px;padding:8px 12px}}

/* Ortsnamen auf der Gelaendekarte bleiben in dunkler Tinte.
   Der Baukasten faerbt sie am Ende der Bewegung in die Gewerksfarbe um (bei
   M&B Haustechnik das Orange der Waerme). Hier ist die Gewerksfarbe Gruen,
   und die Karte wird am Ende ebenfalls gruen: gruene Schrift auf gruener
   Landschaft ist nicht lesbar. Deshalb bleibt hier nur das Einblenden.
   Der weisse Saum kommt aus der Grundfassung und traegt die Schrift ueber
   dem Relief. */
.kuppelkarte.laeuft .k-ort-name{
  animation:k-auf .45s ease both;
  animation-delay:calc(2.6s + var(--i)*.05s);
  fill:var(--tinte);stroke:#fff;stroke-width:3.6}
html:not(.js) .k-ort-name{fill:var(--tinte)}
@media (prefers-reduced-motion:reduce){
  .kuppelkarte .k-ort-name{fill:var(--tinte)}
}
}