/* Anton Mustermann, Handwerk. Farbwelt aus der Werbeanzeige des Kunden:
   Schwarz, Weinrot #872124, Weiß. Schrift: Open Sans (selbst gehostet). */

/* Scroll-Fix (Pflicht, iPhone) */
html,body{height:auto !important;min-height:100%;overflow-y:auto !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}

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

:root{
  --tinte:#111111;
  --rot:#872124;
  --rot-dunkel:#6b1a1d;
  --rot-blass:#f7eded;
  --papier:#ffffff;
  --grau:#f5f3f2;
  --linie:#e4dfde;
  --nebentext:#57514f;
  --wasser:#2d6f92;   /* der Rhein auf der Einsatzkarte */
  --karten-linie:#d6cfcd; /* Rand der Einsatzkarte, 1,39:1 gegen das Grau (Regel 9) */
}

*{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}
h1,h2,h3,h4{font-weight:700;line-height:1.2}
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)}
/* Dunkler Abschnitt: kein harter Farbwechsel, sondern ein weicher Verlauf.
   Oben blendet er aus dem Grau des vorigen Abschnitts ins Schwarz, unten
   wieder ins Weiß. Das größere Innenmaß sorgt dafür, dass Text und Bild
   erst auf der voll schwarzen Fläche beginnen (Lesbarkeit). */
.abschnitt-dunkel{color:#fff;padding:150px 0;
  background:linear-gradient(180deg in oklab,var(--grau) 0,#000 120px,#000 calc(100% - 120px),var(--papier) 100%)}
.abschnitt-dunkel h2,.abschnitt-dunkel p{color:#fff}
.abschnitt-dunkel .breit-text{color:#d3cecd;margin-left:auto;margin-right:auto}
.abschnitt-rot{background:var(--rot);color:#fff}
.abschnitt-rot h2,.abschnitt-rot p{color:#fff}
.abschnitt-rot .breit-text{color:#f2dede;margin-left:auto;margin-right:auto}
.seitenkopf{padding-bottom:40px}
.ico{flex:none}
.ico-rot{color:var(--rot)}

/* 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}

/* ---- Leistungen-Untermenü in der Kopfzeile ------------------------------
   PFLICHT auf jeder Kundenseite (Torben, 04.09.2026): Von jeder Leistung
   muss man mit einem Klick zu jeder anderen kommen. "Leistungen" bleibt
   dabei ein Link auf die Übersicht, zum Aufklappen sitzt ein eigener
   kleiner Pfeil-Schalter daneben.
   STOLPERSTEIN: Der Menüpunkt muss auf die volle Höhe der Kopfzeile
   gezogen werden (align-self:stretch). Sonst bleibt zwischen Menüpunkt und
   Untermenü eine Lücke, in der das Zeigen abreißt und die Liste sofort
   wieder zuklappt. */
.hauptmenue{align-self:stretch}
.menue-punkt{position:relative;align-self:stretch;display:flex;align-items:center;gap:4px}
.unter-schalter{display:flex;align-items:center;background:none;border:0;padding:4px;
  color:inherit;cursor:pointer;border-radius:6px}
.unter-schalter svg{transition:transform var(--dur-1)}
.unter-schalter:hover{color:var(--rot)}
.unter-schalter:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.menue-punkt:hover .unter-schalter svg,
.menue-punkt:focus-within .unter-schalter svg,
.menue-punkt.offen .unter-schalter svg{transform:rotate(180deg)}
.untermenue{display:none;position:absolute;top:100%;left:-16px;z-index:60;
  grid-template-columns:1fr 1fr;gap:2px;padding:12px;
  background:var(--papier);border:1px solid var(--linie);
  border-top:4px solid var(--rot);border-radius:0 0 12px 12px;
  box-shadow:0 20px 44px rgba(0,0,0,.20)}
.menue-punkt:hover .untermenue,
.menue-punkt:focus-within .untermenue,
.menue-punkt.offen .untermenue{display:grid}
.untermenue a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-size:15px;font-weight:600;white-space:nowrap}
.untermenue a .ico{color:var(--rot)}
.hauptmenue .untermenue a:hover,.hauptmenue .untermenue a:focus-visible{
  background:var(--rot-blass);color:var(--rot);text-decoration:none}
.untermenue .unter-alle{color:var(--rot)}
.hauptmenue a:not(.knopf):hover{color:var(--rot);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(--rot);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:8px;border:2px solid var(--rot);cursor:pointer;
  transition:background var(--dur-1),border-color var(--dur-1),opacity var(--dur-1)}
.knopf:hover{background:var(--rot-dunkel);border-color:var(--rot-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(--rot);border-color:#fff}
.knopf-weiss:hover{background:#f2dede;border-color:#f2dede;color:var(--rot-dunkel)}
.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-rot .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(--rot);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) */
.band{background:#000;color:#fff;padding:18px 0}
.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:#fff;text-decoration:none}
.band a:hover{color:#f2dede;text-decoration:underline;text-underline-offset:4px}
.band .ico{color:var(--rot)}

/* 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}
.karte-kopf h3{margin:0}
.karte-kopf .ico{color:var(--rot)}
.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 var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-1)}
.kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(135,33,36,.14);border-color:var(--rot)}
.kachel p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px}
.weiter{font-weight:700;font-size:15px;margin-top:auto;color:var(--rot)}
/* 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 var(--dur-3) 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(--rot);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 rote Rahmen läuft durch -----------------------
   Baukasten-Standard (Torben, 04.09.2026): Der Ablauf-Abschnitt steht nie
   still, man muss sehen, WIE der Prozess abläuft. Beim Herunterscrollen
   zeichnet sich um das erste Kästchen ein Rahmen im Weinrot des Betriebs,
   läuft über das Verbindungsstück zum nächsten weiter und bleibt danach
   stehen. Am Ende sind alle vier umrandet, beim letzten Schritt erscheint
   ein grünes Häkchen. Läuft EINMAL, nicht in Dauerschleife.
   Bauanleitung: _baukasten/werkzeuge/bausteine-ablauf.py (Fassung 1). */
.ablauf{
  --glut-a:#c94a4e;      /* helles Weinrot, Anfang der Glut */
  --glut-b:#6b1a1d;      /* tiefes Weinrot */
  --rohr:rgba(0,0,0,.12); /* das ruhende Verbindungsstück */
  --fertig:#16a34a;      /* Grün für das Häkchen am Schluss */
  --zeichnen:calc(var(--dur-takt) * 1.4);       /* wie lange ein Rahmen zum Umlaufen braucht */
  --versatz:calc(var(--dur-takt) * 1.2);        /* 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 (rx wie border-radius) */
.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 */
.schritt::before,.schritt::after{content:"";position:absolute;top:50%;right:-20px;
  width:20px;height:3px;margin-top:-1.5px;border-radius:2px}
.schritt::before{background:var(--rohr)}
.schritt::after{background:linear-gradient(90deg in oklab,var(--glut-a),var(--glut-b));
  transform:scaleX(0);transform-origin:left center}
.laeuft .schritt::after{animation:strecke-fuellen calc(var(--dur-takt) * .35) ease-out forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen))}
.schritt:last-child::before,.schritt:last-child::after{display:none}
@keyframes strecke-fuellen{to{transform:scaleX(1)}}

/* Grünes Häkchen: erscheint, wenn der letzte Schritt umrandet ist */
.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 calc(var(--dur-takt) * .5) var(--ease-pop-leicht) forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen) + var(--dur-takt) * .15)}
@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) .schritt::after{transform:scaleX(1)}
html:not(.js) .fertig-haken{opacity:1;transform:scale(1)}

/* Zwei Kästchen nebeneinander: dazwischen ist kein Platz für die Strecke. */
@media (max-width:1100px){
  .schritt::before,.schritt::after{display:none}
}
/* Handy: die Kästchen stehen untereinander, die Strecke steht senkrecht. */
@media (max-width:560px){
  .schritt::before,.schritt::after{display:block;top:auto;bottom:-20px;
    left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px}
  .schritt::after{background:linear-gradient(180deg in oklab,var(--glut-a),var(--glut-b));
    transform:scaleY(0);transform-origin:top center}
  .laeuft .schritt::after{animation-name:strecke-fuellen-hoch}
  html:not(.js) .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}
  .schritt::after{transform:scaleX(1)}
  .fertig-haken{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .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(--rot);
  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 var(--dur-1)}
.film-neustart:hover{background:var(--rot)}
.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(--rot)}
.infokasten{background:var(--rot-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(--rot)}
.frage summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--rot)}
.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(--rot);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(--rot);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(--rot-blass);border-left:4px solid var(--rot);border-radius:8px;
  padding:16px 20px;margin:10px 0 18px}
.platzhalter p{color:var(--tinte);margin:0}

/* Fußzeile */
.fusszeile{background:#000;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 var(--dur-3) 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){
  .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}
  /* Auf dem Handy gibt es kein Zeigen. Das Untermenü öffnet NUR über den
     Schalter, deshalb müssen :hover und :focus-within hier ausdrücklich
     wieder ausgeschaltet werden. Sonst klappt die Liste auf dem iPhone
     beim ersten Antippen unkontrolliert auf. */
  .hauptmenue{align-self:auto}
  .menue-punkt{align-self:auto;justify-content:space-between;flex-wrap:wrap}
  .menue-punkt > a{flex:1}
  .unter-schalter{padding:12px 6px}
  .menue-punkt:hover .untermenue,
  .menue-punkt:focus-within .untermenue{display:none}
  .menue-punkt.offen .untermenue{display:grid}
  .untermenue{position:static;width:100%;grid-template-columns:1fr;
    padding:6px;margin:0 0 8px;border:0;border-left:3px solid var(--rot);
    border-radius:0 8px 8px 0;background:var(--grau);box-shadow:none}
  .untermenue a{padding:11px 10px}
  .band-innen{flex-direction:column;gap:12px}
  /* Auf dem Handy ist die Karte klein: die Ortsnamen werden groesser
     gesetzt, sonst sind sie nicht mehr zu lesen. Der Platz dafuer wird
     in werkzeuge/baue-kuppel.py schon beim Setzen freigehalten. */
  .k-ort-name{font-size:19px;stroke-width:4.5}
  .k-name-gross{font-size:23px;stroke-width:5}
}
@media (max-width:560px){
  .staerken,.staerken-drei,.schritte{grid-template-columns:1fr}
  /* Auf dem kleinen Bildschirm schrumpft die Karte, die Quellenangabe aber
     nicht: sie wuerde sonst breiter wirken als das Bild darueber. */
  .karten-quelle{font-size:10px;padding:1px 5px}
  .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%}
}

/* Quellenangabe auf einem Kartenbild (Pflicht bei OpenStreetMap) */
.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}


/* 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/524;
  border-radius:16px;overflow:hidden;border:1px solid var(--karten-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,
   Einsatzstrecken, 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
   Musterdorf, die Orte erscheinen, der Rhein zeichnet sich blau, dann
   zeichnen sich die Einsatzstrecken 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-einsatzspur{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}

/* Einsatzstrecken vom Betrieb in die Orte */
.k-einsatzspur{stroke:var(--rot);stroke-width:1.8;
  filter:drop-shadow(0 0 3px rgba(135,33,36,.55))}
.k-warmlicht{opacity:0}

/* Orte: Punkt mit weissem Hof, Name klar und gut lesbar */
.k-ort-punkt{fill:var(--tinte)}
.k-ort-aktiv{fill:var(--rot);opacity:0}
.k-ort-ring{fill:#fff}
.k-ort-welle{fill:none;stroke:var(--tinte);stroke-width:1.4}
.k-ort-punkt,.k-ort-aktiv,.k-ort-ring,.k-ort-welle{transform-box:fill-box;
  transform-origin:50% 50%}
.k-ort-name{font-family:"Open Sans",-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}
/* Wolf: Originalfigur aus dem Schallstadter Wappen, fein gezeichnet.
   Der Pfad ist stark verkleinert, deshalb braucht seine weisse Kontur
   eine eigene, mitskalierte Strichstaerke. */
.k-wolf-echt{stroke-width:16}
.k-sb-fuehler{fill:none;stroke:var(--tinte);stroke-width:1.3;stroke-linecap:round}
.k-sb-punkt{fill:var(--tinte)}
.k-sb-haus{fill:#a3703f;stroke:#fff;stroke-width:1.2;paint-order:stroke}
.k-sb-spirale{fill:none;stroke:#fff;stroke-width:1;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 calc(var(--dur-takt) * .55) var(--ease-pop) both;
  animation-delay:calc(var(--dur-takt) * 2.75 + var(--i)*var(--dur-takt) * .05)}
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 var(--dur-2) 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 var(--dur-3) var(--ease-pop) both}
.k-extra.zeigt .k-extra-blase{animation:k-auf var(--dur-2) ease var(--dur-2) 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.
   Wolfsmuster ist der Ortsteil, in dem der Betrieb sitzt, der Wolf steht
   im Gemeindewappen. Sobald der Besucher selbst einen Ort antippt, hoert
   die Karte damit auf ("ruht"): sonst laegen zwei Sprechblasen
   uebereinander und keine davon waere lesbar. */
.kuppelkarte.ruht .k-wolf-auftritt{animation:none !important;opacity:0}
.kuppelkarte.ruht .k-wolf-auftritt .k-extra-bild,
.kuppelkarte.ruht .k-wolf-auftritt .k-extra-blase,
.kuppelkarte.ruht .k-wolf-heult{animation:none !important}
.kuppelkarte.laeuft .k-wolf-auftritt{
  animation:k-wolfszene calc(var(--dur-takt) * 5) ease calc(var(--dur-takt) * 10) both}
.kuppelkarte.laeuft .k-wolf-auftritt .k-extra-bild{transform-box:fill-box;
  transform-origin:50% 100%;
  animation:k-pop calc(var(--dur-takt) * .55) var(--ease-pop) calc(var(--dur-takt) * 10.1) both}
.kuppelkarte.laeuft .k-wolf-heult{transform-box:fill-box;
  transform-origin:50% 100%;animation:k-trotten calc(var(--dur-takt) * 3.6) linear calc(var(--dur-takt) * 10.3) both}


/* Firmenschild, sitzt mit der Spitze genau auf dem Betrieb in Musterdorf */
.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}

/* Der Transporter: die Wege bleiben blass, der Wagen faehrt darauf */
.k-fahrweg{stroke-width:1.2;opacity:.22;stroke-dasharray:4 6}
.k-wagen-korb{fill:var(--tinte);stroke:#fff;stroke-width:1.4;
  paint-order:stroke;stroke-linejoin:round}
.k-wagen-rad{fill:var(--tinte);stroke:#fff;stroke-width:1.2;paint-order:stroke}
.k-wagen-logo{font-family:"Open Sans",-apple-system,"Helvetica Neue",
  Arial,sans-serif;font-size:5px;font-weight:800;font-style:italic;
  letter-spacing:.02em;fill:#fff;stroke:none}
.k-wagen{filter:drop-shadow(0 1px 2px 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-einsatzspur,.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-einsatzspur{opacity:.35}
html:not(.js) .k-warmlicht{opacity:1}
html:not(.js) .k-ort-aktiv{opacity:1}
html:not(.js) .k-ort-name{fill:var(--rot-dunkel)}
/* 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(--rot-dunkel)}}
@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-trotten{from{transform:translateX(6px)}to{transform:translateX(-10px)}}
@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. Einsatzstrecken in die Orte  10. Fahrzeuge  11. Farbe */
.kuppelkarte.laeuft .k-welle{animation:k-welle calc(var(--dur-takt) * 1.5) var(--ease-welle) both}
.kuppelkarte.laeuft .k-welle2{animation-delay:calc(var(--dur-takt) * .4)}
.kuppelkarte.laeuft .k-welle3{animation-delay:calc(var(--dur-takt) * .8)}
.kuppelkarte.laeuft .k-fuss{stroke-dasharray:1;
  animation:k-ziehen calc(var(--dur-takt) * 1.15) var(--ease-zug) calc(var(--dur-takt) * .2) both}
.kuppelkarte.laeuft .k-meridian{stroke-dasharray:1;
  animation:k-ziehen calc(var(--dur-takt) * 1) var(--ease-strich) both;
  animation-delay:calc(var(--dur-takt) * .7 + var(--i)*var(--dur-takt) * .05)}
.kuppelkarte.laeuft .k-ring{stroke-dasharray:1;
  animation:k-ziehen calc(var(--dur-takt) * .85) var(--ease-strich) both;
  animation-delay:calc(var(--dur-takt) * 1.35 + var(--i)*var(--dur-takt) * .09)}
.kuppelkarte.laeuft .k-koerper{animation:k-auf calc(var(--dur-takt) * 1.3) ease calc(var(--dur-takt) * 1.95) both}
.kuppelkarte.laeuft .k-schatten{animation:k-auf calc(var(--dur-takt) * 1.2) ease calc(var(--dur-takt) * 2.05) both}
.kuppelkarte.laeuft .k-randsaum{animation:k-auf calc(var(--dur-takt) * 1.2) ease calc(var(--dur-takt) * 2.15) both}
.kuppelkarte.laeuft .k-kante{stroke-dasharray:1;
  animation:k-ziehen calc(var(--dur-takt) * 1.1) var(--ease-zug) calc(var(--dur-takt) * 1.9) both}
.kuppelkarte.laeuft .k-glanz{animation:k-auf-glanz calc(var(--dur-takt) * 1.1) ease calc(var(--dur-takt) * 2.35) both}
.kuppelkarte.laeuft .k-schild{transform-box:fill-box;transform-origin:50% 100%;
  animation:k-schild-auf calc(var(--dur-takt) * .7) var(--ease-pop-leicht) calc(var(--dur-takt) * 2.2) both}
.kuppelkarte.laeuft .k-orte{opacity:1}
.kuppelkarte.laeuft .k-ort-punkt,.kuppelkarte.laeuft .k-ort-ring{
  animation:k-pop calc(var(--dur-takt) * .45) var(--ease-pop-stark) both;
  animation-delay:calc(var(--dur-takt) * 2.6 + var(--i)*var(--dur-takt) * .05)}
.kuppelkarte.laeuft .k-ort-welle{animation:k-ortwelle calc(var(--dur-takt) * 1) ease-out both;
  animation-delay:calc(var(--dur-takt) * 2.6 + var(--i)*var(--dur-takt) * .05)}
.kuppelkarte.laeuft .k-fluss{stroke-dasharray:1;
  animation:k-ziehen calc(var(--dur-takt) * 1.7) ease-out both, k-auf-fluss calc(var(--dur-takt) * .6) ease both;
  animation-delay:calc(var(--dur-takt) * 3.1 + var(--i)*var(--dur-takt) * .12)}
.kuppelkarte.laeuft .k-fluss-name{animation:k-auf calc(var(--dur-takt) * .7) ease calc(var(--dur-takt) * 4.2) both}
.kuppelkarte.laeuft .k-einsatzspur{stroke-dasharray:1;
  animation:k-ziehen var(--t) var(--ease-fliessen) both,
            k-auf-spur calc(var(--dur-takt) * .35) ease both;
  animation-delay:calc(var(--dur-takt) * 3.8 + var(--i)*var(--dur-takt) * .06)}
/* Der Ort leuchtet auf, sobald die Strecke dort ankommt */
.kuppelkarte.laeuft .k-ort-aktiv{
  animation:k-warmpop calc(var(--dur-takt) * .6) var(--ease-pop) both;
  animation-delay:calc(var(--dur-takt) * 3.8 + var(--i)*var(--dur-takt) * .06 + var(--t))}
.kuppelkarte.laeuft .k-ort-name{
  animation:k-auf calc(var(--dur-takt) * .45) ease both, k-warmtext calc(var(--dur-takt) * .8) ease both;
  animation-delay:calc(var(--dur-takt) * 2.6 + var(--i)*var(--dur-takt) * .05),
                  calc(3.8s + var(--i)*.06s + var(--t))}
.kuppelkarte.laeuft .k-wege{animation:k-auf calc(var(--dur-takt) * 1) ease calc(var(--dur-takt) * 6.0) both}
.kuppelkarte.laeuft .k-fahrzeuge{animation:k-auf calc(var(--dur-takt) * 1) ease calc(var(--dur-takt) * 6.3) both}
/* Zum Schluss wird aus der grauen Karte eine warme, gruene Landschaft */
.kuppelkarte.laeuft .k-warmbild{animation:k-auf calc(var(--dur-takt) * 2) ease calc(var(--dur-takt) * 7.2) both}
.kuppelkarte.laeuft .k-warmlicht{animation:k-auf calc(var(--dur-takt) * 2.2) ease calc(var(--dur-takt) * 7.4) both}
.kuppelkarte.laeuft .k-lauflicht{animation:k-lauf calc(var(--dur-takt) * 11) ease-in-out calc(var(--dur-takt) * 9.6) 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-aktiv,.kuppelkarte .k-warmlicht{opacity:1}
  .kuppelkarte .k-glanz{opacity:.4}
  .kuppelkarte .k-fluss{opacity:.85}
  .kuppelkarte .k-einsatzspur{opacity:.35}
  .kuppelkarte .k-ort-name{fill:var(--rot-dunkel)}
  .kuppelkarte .k-welle,.kuppelkarte .k-ort-welle{opacity:0}
  .kuppelkarte .k-fahrzeuge{display:none}
}

.ortsliste{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:9px;margin:22px 0 18px;padding:0;max-width:900px}
.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 var(--dur-1),transform var(--dur-1)}
.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}

/* 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}

/* Film-Sicherung (Baukasten, 11.09.2026; hier nachgeruestet 14.09.2026).
   Safari startet Filme nicht immer von allein (Stromsparmodus,
   Datensparmodus, "nie automatisch abspielen") und legt dann seinen
   Abspielknopf ueber das Vorschaubild. Darum liegt ueber jedem Film ein
   Deckbild, das erst weggeht, wenn der Film nachweislich laeuft. Laeuft er
   nicht, erscheint ein eigener runder Knopf. Bei Verwandlungsfilmen zeigt
   das Deckbild das FERTIGE Bild (filme/NAME-ende.jpg), damit im Ernstfall
   nicht der alte Zustand stehen bleibt. Skript: werkzeuge/baue-seiten.py,
   geprueft mit _baukasten/werkzeuge/pruefe-film.mjs. */
.film-buehne{position:relative;width:100%;height:100%}
.film-buehne .film-deckbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;pointer-events:none}
.film-buehne video{pointer-events:none}
.film-buehne .film-deckbild{transition:opacity var(--dur-3) var(--ease-out)}
.film-buehne.film-laeuft .film-deckbild{opacity:0}
.film-knopf{display:none;align-items:center;justify-content:center;cursor:pointer;
  font:inherit;color:#fff;border:2px solid rgba(255,255,255,.8);border-radius:999px;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.film-knopf-rund{position:absolute;right:16px;bottom:16px;z-index:3;padding:0;width:52px;height:52px;
  background:rgba(0,0,0,.45)}
.film-knopf:hover{background:var(--rot);border-color:#fff}
.film-buehne.film-blockiert .film-knopf{display:inline-flex}
.film-neustart{z-index:3}
@media (prefers-reduced-motion:reduce){.film-buehne video{display:none}}

/* Koernung auf dem dunklen Verlaufsabschnitt (Farbverlauf-Standard, Regel 2):
   das Rauschen liegt ueber der Flaeche, der Inhalt darueber. */
.abschnitt-dunkel.grain>.innen{position:relative;z-index:2}