/* ============================================================
   AirBagCity, Startseite
   Der Absprungwinkel ist das Layoutprinzip. Die ganze Seite
   steigt an: Kanten, Karten und Text folgen der Rampe.
   ============================================================ */

:root{
  --rot:#9A1E1E;
  --rot-hell:#C42B1C;
  --signal:#FF4A1C;
  --sand:#ECD998;
  --sand-hell:#F7EBC4;
  --schwarz:#12100D;
  --asphalt:#241F19;
  --weiss:#FFFDF6;

  /* Hinter der echten Schrift steht eine Ersatzschrift mit angeglichenen
     Massen (siehe fonts.css). Ohne sie springt die Seite, sobald Saira
     nachgeladen ist. system-ui bleibt als letzte Reserve dahinter. */
  --display:'Saira Condensed','Saira Condensed Ersatz',system-ui,sans-serif;
  --body:'Saira','Saira Ersatz',system-ui,sans-serif;

  --winkel:-7deg;              /* Absprungwinkel der Rampe */
  --rand:clamp(1.2rem,5vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--schwarz);color:var(--weiss);
  font-family:var(--body);font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.08rem);line-height:1.6;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.88;text-transform:uppercase;letter-spacing:.005em;margin:0;text-wrap:balance}
/* Lange Ortsnamen dürfen umbrechen, sonst sprengen sie schmale Displays */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}


.spur{max-width:1280px;margin-inline:auto;padding-inline:var(--rand)}
.mini{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}

/* ---------- Kopf ---------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:140;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--rand);
  background:rgba(18,16,13,.8);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,253,246,.12);
}
.marke{
  display:flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--display);font-weight:900;font-size:1.4rem;text-transform:uppercase;letter-spacing:.01em;
}
.marke .rampe{
  width:26px;height:14px;background:var(--signal);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.marke:hover .rampe{transform:translateY(-4px) scaleY(1.3)}
.nav{display:flex;gap:1.4rem}
.nav a{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.7;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1;color:var(--signal)}
@media(max-width:1140px){.nav{display:none}}

/* Buttons schießen die Rampe hoch */
.knopf{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:none;
  background:var(--signal);color:var(--schwarz);text-decoration:none;
  padding:.7rem 1.4rem;
  font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s;
}
.knopf:hover{transform:translate(4px,-5px)}
.knopf:active{transform:translate(1px,-1px)}
.knopf-leer{background:transparent;color:var(--weiss);box-shadow:inset 0 0 0 1.5px rgba(255,253,246,.42)}
/* Der Ticketknopf traegt dieselbe schwarze Schrift wie alle anderen Knoepfe.
   Weiss auf Signalorange kam nur auf 3,3:1 und fiel damit unter die Schwelle
   von 4,5:1. Schwarz erreicht 5,65:1. Die weisse Fassung war ohnehin die
   einzige Ausnahme auf der Seite. */
.knopf-leer:hover{background:rgba(255,253,246,.1)}
/* Auf hellen Flaechen muss der leere Knopf dunkel werden, sonst steht weisse
   Schrift auf Sand und ist nicht zu lesen. */
.hell .knopf-leer{color:var(--schwarz);box-shadow:inset 0 0 0 1.5px rgba(18,16,13,.45)}
.hell .knopf-leer:hover{background:rgba(18,16,13,.08)}
/* Auf der roten Flaeche traegt Orange zu wenig Kontrast, dort beide Knoepfe weiss */
.rotflaeche .knopf{background:var(--weiss);color:var(--schwarz)}
.rotflaeche .knopf-leer{background:transparent;color:var(--weiss);
  box-shadow:inset 0 0 0 1.5px rgba(255,253,246,.55)}
.rotflaeche .knopf-leer:hover{background:rgba(255,253,246,.14)}

/* ---------- Hero ---------- */
.hero{
  /* Status- und Wetterbalken schweben ueber dem Hero. Damit die Ueberschrift
     bei flachen Fenstern nicht darunter laeuft, richtet sich die obere
     Polsterung nach der Unterkante der beiden Balken. */
  --balken-oben:clamp(5.5rem,14vh,9rem);
  --balken-hoehe:clamp(2.9rem,5.4vw,3.4rem);
  --balken-unten:calc(var(--balken-oben) + var(--balken-hoehe) + 3.6rem);
  position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:var(--balken-unten) 0 clamp(4rem,10vw,7rem)}
.hero-bild{position:absolute;inset:0;z-index:0}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 58%;opacity:0;
  /* Jedes Bild kommt leicht vergroessert herein und faehrt ueber die ganze
     Standzeit auf Normalgroesse zurueck. Fein genug, dass man es nicht als
     Bewegung liest, aber das Bild steht nicht tot da. */
  transform:scale(1.055);
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1), transform 9s cubic-bezier(.2,0,.3,1);
}
.hero-bild img.da{opacity:1;transform:scale(1)}
/* Das weichende Bild liegt unter dem neuen und behaelt seine Deckkraft, bis
   das neue oben ist. Sonst scheint in der Mitte des Uebergangs der Grund
   durch und der Wechsel bekommt eine dunkle Delle. */
.hero-bild img:not(.da){transition:opacity 0s linear 1.2s, transform 0s linear 1.2s}
.hero-bild img.da{z-index:2}
/* Auch das erste Bild tritt ein, statt einfach dazustehen. Vor dem Start
   liegt es unsichtbar bereit, main.js setzt .los und loest den Uebergang aus. */
.js .hero:not(.los) .hero-bild img{opacity:0;transform:scale(1.055);transition:none}
html:not(.js) .hero-bild img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero-bild img,.hero-bild img:not(.da){transition:none;transform:none}
}
/* Das Foto laeuft bis zur Unterkante durch. Der zweite Verlauf kommt von
   unten und haelt Fliesstext und Taste lesbar, dort stand vorher die Rampe. */
.hero-bild::after{
  content:"";position:absolute;inset:0;
  /* Muss ueber dem aktiven Bild liegen, das beim Wechsel z-index 2 traegt.
     Sonst steht die Ueberschrift ungeschuetzt auf dem Foto. */
  z-index:3;
  background:
    linear-gradient(0deg,rgba(18,16,13,.85) 0%,rgba(18,16,13,.35) 22%,rgba(18,16,13,0) 46%),
    linear-gradient(72deg,rgba(18,16,13,.95) 0%,rgba(18,16,13,.7) 42%,rgba(18,16,13,.2) 72%,rgba(154,30,30,.35) 100%);
}
.hero .spur{position:relative;z-index:3;width:100%}

/* Der Status faehrt als weisser Balken von links herein. Die rechte Kante
   folgt dem Rampenwinkel, damit er zum Rest der Seite passt. */
.status-banner{
  position:absolute;left:0;top:var(--balken-oben,clamp(5.5rem,14vh,9rem));z-index:4;
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--weiss);color:var(--schwarz);
  padding:.72rem clamp(2.2rem,4vw,3.4rem) .72rem clamp(1.2rem,5vw,4.5rem);
  font-family:var(--display);font-weight:900;font-size:clamp(.92rem,2vw,1.24rem);
  letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
}
.js .status-banner{transform:translateX(-102%)}
.js .hero.los .status-banner{transform:none;
  transition:transform .8s cubic-bezier(.19,1,.22,1) .25s}
.status-banner .punkt{
  width:11px;height:11px;border-radius:50%;background:#128A3C;flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(18,138,60,.22);animation:takt 1.8s infinite;
}
.status-banner.zu .punkt{background:var(--rot);box-shadow:0 0 0 4px rgba(154,30,30,.2)}
/* Ruhezustand, solange start.js den Status noch nicht gesetzt hat. Der
   gruene Punkt haette "offen" behauptet, bevor irgendetwas geprueft war.
   start.js ueberschreibt className vollstaendig (siehe anzeigen()), die
   Klasse verschwindet also von selbst, sobald ein echter Status da ist. */
.status-banner.unklar .punkt{background:#726a50;box-shadow:0 0 0 4px rgba(114,106,80,.22);animation:none}
@media (max-width:560px){
  .status-banner{top:clamp(4.6rem,12vh,7rem);font-size:.84rem;
    padding:.62rem 1.9rem .62rem 1.1rem;clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
}

/* Taktanzeige des Hero-Sliders. Der Fortschrittsbalken ist zugleich der
   Taktgeber des Wechsels, deshalb koennen Anzeige und Bild nicht auseinander
   laufen. Sitzt rechts oberhalb der Rampenkante. */
.hero-takt{
  position:absolute;z-index:4;right:clamp(1.1rem,4vw,3rem);
  bottom:clamp(5.5rem,9vw,6.5rem);
  display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1rem);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.hero-takt .zahl{
  font-family:var(--display);font-weight:900;line-height:1;
  letter-spacing:.06em;color:rgba(255,253,246,.55);font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.hero-takt .zahl b{color:var(--weiss);font-size:1.2rem}
.hero-takt .zahl s{text-decoration:none;margin:0 .12em;color:rgba(255,253,246,.4)}
.hero-takt .striche{display:flex;gap:.42rem}
.hero-takt .strich{
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;cursor:pointer;
  width:clamp(24px,4.6vw,42px);height:5px;position:relative;overflow:hidden;
  background:rgba(255,253,246,.5);transform:skewX(-22deg);
  transition:background .3s ease,transform .3s ease;
}
/* Die sichtbare Leiste ist absichtlich duenn. Die Trefferflaeche darf das nicht
   sein, sonst trifft man sie am Handy nicht. */
.hero-takt .strich::before{content:"";position:absolute;inset:-14px -6px}
.hero-takt .strich:hover{background:rgba(255,253,246,.55)}
.hero-takt .strich:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.hero-takt .strich i{
  position:absolute;inset:0;background:var(--signal);
  transform:scaleX(0);transform-origin:left center;
}
.hero-takt .strich.aktiv i{animation:taktfuellung 6s linear forwards}
.hero-takt.pause .strich i{animation-play-state:paused}
@keyframes taktfuellung{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:560px){
  .hero-takt{gap:.55rem}
  .hero-takt .zahl{font-size:.78rem}
  .hero-takt .zahl b{font-size:1rem}
}
/* Auf Handy und Tablet ausgeblendet. Auf dem kleinen Schirm konkurriert die
   Anzeige mit dem Hauptknopf, und die duennen Striche sind mit dem Daumen
   ohnehin kaum zu treffen. Von Martin am 10.09.2026 so entschieden.

   visibility statt display: die Fortschrittsanimation ist zugleich der
   Taktgeber des Bildwechsels, start.js:366 haengt an ihrem animationend.
   Mit display:none laeuft keine CSS-Animation mehr, das animationend bliebe
   aus und der Hero stuende fuer immer auf Bild 1. Mit visibility:hidden
   laeuft die Animation weiter, die Bilder wechseln also wie bisher. */
@media (max-width:820px){
  .hero-takt{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  /* Ohne laufenden Wechsel gibt es nichts herunterzuzaehlen, die Leiste zeigt
     dann nur noch, wo man steht. */
  .hero-takt .strich.aktiv i{animation:none;transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .js .status-banner{transform:none}
  .status-banner .punkt{animation:none}
}

/* Der Hauptknopf im Hero darf groesser sein, er ist der einzige */
.knopf-gross{font-size:clamp(1.1rem,2.4vw,1.45rem);padding:1rem 2.1rem}
@keyframes takt{0%,100%{opacity:1}50%{opacity:.25}}

.hero h1{
  font-size:clamp(2.1rem,min(8.2vw,10.5vh),7rem);line-height:.86;margin-bottom:1.3rem;
}
/* Vorzeile der Ueberschrift. Klein, gesperrt, in der Bodyschrift: sie ordnet
   ein, ohne dem Backflip die Buehne zu nehmen. Steigt mit derselben Bewegung
   herein wie die drei grossen Zeilen. */
.hero h1 .h1-vor{
  display:block;font-family:var(--body);font-weight:600;text-transform:uppercase;
  font-size:clamp(.72rem,1.5vw,.86rem);letter-spacing:.2em;line-height:1.3;
  color:rgba(255,253,246,.68);margin-bottom:clamp(.7rem,1.6vw,1.1rem);
}
.js .hero h1 .h1-vor{opacity:0;transform:translate(-30px,40px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.19,1,.22,1)}
.js .hero.los h1 .h1-vor{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero h1 .h1-vor{opacity:1;transform:none;transition:none}
}

/* Jede Zeile steigt weiter an – die Headline fährt die Rampe hoch */
.hero h1 .z{display:block;transform-origin:left bottom}
.hero h1 .z1{margin-left:0}
.hero h1 .z2{margin-left:clamp(.5rem,4vw,4rem);color:var(--signal)}
.hero h1 .z3{margin-left:clamp(1rem,8vw,8rem)}
.js .hero h1 .z{opacity:0;transform:translate(-30px,40px)}
.js .hero.los h1 .z{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.js .hero.los h1 .z2{transition-delay:.12s}
.js .hero.los h1 .z3{transition-delay:.24s}

.hero-satz{max-width:42ch;font-size:1.1rem;color:rgba(255,253,246,.84);margin:0 0 2rem}
.hero-tasten{display:flex;gap:.7rem;flex-wrap:wrap}

/* Winkelanzeige – der Kicker in Zahlen */
.winkel-box{position:absolute;right:var(--rand);bottom:clamp(9rem,15vw,11.5rem);z-index:4;
  text-align:right;font-family:var(--display);
}
.winkel-box b{display:block;font-weight:900;font-size:clamp(2.4rem,6vw,4.4rem);line-height:.85;color:var(--signal);
  text-shadow:0 2px 6px rgba(18,16,13,.7),0 6px 34px rgba(18,16,13,.85)}
.winkel-box span{font-family:var(--body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,253,246,.92);text-shadow:0 1px 4px rgba(18,16,13,.9),0 4px 22px rgba(18,16,13,.85)}
@media(max-width:820px){.winkel-box{display:none}}
/* Bei flachen Fenstern liegt der feste WhatsApp-Knopf darueber. */
@media(max-height:620px){.winkel-box{display:none}}

/* ---------- Trampolin: alles Anklickbare federt ----------
   Squash and Stretch wie auf dem Sprungtuch: kurz stauchen, hochschnellen,
   nachwippen. Zwei Kurven, damit sich Navigation und Tasten nicht gleich anfuehlen. */
@keyframes huepfen{
  0%  {transform:translateY(0)      scale(1,1)}
  14% {transform:translateY(2px)    scale(1.05,.9)}   /* eintauchen */
  34% {transform:translateY(-10px)  scale(.96,1.09)}  /* abheben */
  54% {transform:translateY(0)      scale(1.03,.95)}  /* landen */
  72% {transform:translateY(-4px)   scale(.99,1.03)}  /* nachwippen */
  88% {transform:translateY(0)      scale(1.01,.99)}
  100%{transform:translateY(0)      scale(1,1)}
}
@keyframes huepfen-klein{
  0%  {transform:translateY(0)     scale(1,1)}
  18% {transform:translateY(1px)   scale(1.03,.94)}
  40% {transform:translateY(-6px)  scale(.98,1.05)}
  62% {transform:translateY(0)     scale(1.02,.97)}
  80% {transform:translateY(-2px)  scale(1,1.01)}
  100%{transform:translateY(0)     scale(1,1)}
}
.nav a{display:inline-block}
.federkern{display:inline-block;transform-origin:center bottom;will-change:transform}
.federkern.federt{animation:huepfen .62s cubic-bezier(.28,.9,.35,1) 1}
.federkern.federt-klein{animation:huepfen-klein .5s cubic-bezier(.28,.9,.35,1) 1}
.marke{display:inline-flex;align-items:center;gap:.55rem}

@media (prefers-reduced-motion:reduce){
  .federkern.federt,.federkern.federt-klein{animation:none}
}

/* ---------- Schräge Abschnittskanten ---------- */
.schraeg{--k:clamp(60px,8vw,120px);
  position:relative;background:var(--asphalt);
  /* Die eigene Schraege ragt oben aus der Sektion heraus, die Schraege der
     Folgesektion schneidet unten hinein. Dadurch wirkt oben mehr Luft als
     unten, obwohl beide Abstaende gleich gesetzt sind. Der Ausgleich geht
     gegenlaeufig, damit die Sektionshoehe gleich bleibt. */
  padding-top:calc(clamp(5rem,11vw,9rem) - var(--k) * .23);
  padding-bottom:calc(clamp(5rem,11vw,9rem) + var(--k) * .23);
}
/* Die Schraege selbst. Sie erbt die Farbe der Sektion und schiebt sich in die
   vorige hinein. */
.schraeg::before{
  content:"";position:absolute;left:0;right:0;top:1px;height:var(--k);
  background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%);
  transform:translateY(calc(-1 * var(--k)));z-index:2;
}
/* Der Hero bringt seine Rampenkante selbst mit. Die Schraege der folgenden
   Sektion wuerde sich darueberlegen, dann sieht man zwei parallele Kanten. */
.hero + .schraeg::before{display:none}
/* Gerader Schnitt: ohne Rampenkante braucht die Folgesektion oben weniger Luft */
.hero + .schraeg{padding-top:clamp(4rem,9vw,7rem)}
/* Kopfzeilen stehen auf Fotos, ein weicher Schlagschatten haelt sie auch
   ueber hellen Bildstellen lesbar. */
.band h1,.band h2,.band p,.sequenz h1,.sequenz p{
  text-shadow:0 2px 5px rgba(18,16,13,.55),0 8px 26px rgba(18,16,13,.45);
}

/* Der Punkt, auf dem man gerade steht, bleibt im Menue markiert. */
.nav a[aria-current="page"],
.mobilmenu a[aria-current="page"]{color:var(--signal)}
.nav a[aria-current="page"]{position:relative}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.45rem;height:2px;
  background:var(--signal);
}

.hell{background:var(--sand)}
.hell,.hell h2,.hell h3{color:var(--schwarz)}
.rotflaeche{background:var(--rot)}
/* Erster Besuch: das Foto fuellt den Hintergrund, links haelt ein Verlauf den
   weissen Text lesbar. */
/* Die schraege Oberkante wird geschnitten statt mit Farbe nachgebaut. Vorher
   trug das ::before nur die Sektionsfarbe, ueber der Kante stand also reines
   Rot ohne Foto und darunter Rot plus Foto. Genau dieser Sprung war die harte
   Linie im Bild. Jetzt traegt das Foto die Schraege selbst. */
.rotflaeche.mit-bild{
  --keil:clamp(60px,8vw,120px);
  clip-path:polygon(0 var(--keil),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * var(--keil));
  overflow:visible;
  /* Oben und unten denselben Abstand zur Kante: an der Textspalte liegt die
     Schraege rund neun Zehntel der Keilhoehe unter der Sektionsoberkante,
     dieser Betrag kommt oben dazu. */
  padding-top:calc(clamp(3.2rem,7vw,5.9rem) + var(--keil) * .5);
  padding-bottom:clamp(3.2rem,7vw,5.9rem);
}
/* Die farbige Flaeche der Schraege entfaellt, den Platz fuellt jetzt das Bild */
.rotflaeche.mit-bild::before{display:none}
.rotflaeche .hintergrundbild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  z-index:0;
}
.rotflaeche .schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(154,30,30,.97) 0%,
    rgba(154,30,30,.93) 34%,
    rgba(154,30,30,.62) 58%,
    rgba(154,30,30,.18) 82%,
    rgba(154,30,30,.06) 100%);
}
.rotflaeche .spur{position:relative;z-index:2}
/* Der Textblock steht in einer Spalte statt ueber die ganze Breite. Bei
   1280 px liefen die Zeilen auf rund 140 Zeichen, lesbar sind 60 bis 75.
   Nebeneffekt: rechts bleibt das Foto frei, genau dafuer ist der Schleier
   von links nach rechts aufgebaut. */
.rotflaeche .paar{grid-template-columns:minmax(0,1fr)}
.rotflaeche .paar > div{max-width:54ch}
/* Der erste Punkt traegt die Kernaussage und bekommt mehr Gewicht, die
   uebrigen folgen als kompakte Aufzaehlung. */
.rotflaeche .punkte{gap:.7rem}
.rotflaeche .punkte li:first-child{
  font-size:clamp(1.05rem,1.9vw,1.24rem);line-height:1.5;
  margin-bottom:.45rem;
}
.rotflaeche .punkte li:first-child::before{margin-top:.55rem}
@media (max-width:900px){
  .rotflaeche .hintergrundbild{object-position:70% 50%}
  .rotflaeche .schleier{background:linear-gradient(180deg,
    rgba(154,30,30,.94) 0%,rgba(154,30,30,.9) 55%,rgba(154,30,30,.72) 100%)}
}

.titel{margin-bottom:2.8rem}
.titel .mini{color:var(--signal);display:block;margin-bottom:.9rem}
.hell .titel .mini{color:var(--rot)}
.titel h2{font-size:clamp(2.2rem,7.5vw,5.2rem)}
.adresse{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:.02em;color:var(--signal);margin:.7rem 0 0}
.leitsatz{max-width:56ch;color:rgba(255,253,246,.75);margin:0 0 3rem;font-size:1.06rem}
.hell .leitsatz{color:rgba(18,16,13,.75)}

/* ---------- Willkommen: der Originaltext der alten Seite ---------- */
/* Das Logo steht ueber der Ueberschrift auf der Sandflaeche. Auf den dunklen
   Abschnitten der Seite traegt es nicht: sein Braun liegt zu nah am Grund und
   der Claim verschwindet. Deshalb nur hier. */
.willkommen-logo{display:block;width:min(260px,58vw);height:auto;
  margin:0 auto clamp(1.6rem,3.5vw,2.6rem)}
.willkommen{text-align:center}
.willkommen .titel{margin-bottom:2rem}
.willkommen h2{font-size:clamp(1.9rem,5.6vw,4rem);line-height:1.02}
/* Der Zuruf sitzt dicht unter dem Namen, beide lesen sich als ein Block.
   Darunter zieht ein feiner Strich den Schlussstrich, kurz und mittig, damit
   er die Zeile abbindet statt sie zu unterstreichen. */
/* Beide Zeilen sind Bloecke. Als inline-Elemente bestimmte die Schriftmetrik
   den Abstand, er liess sich weder ueber margin noch ueber line-height sauber
   steuern. Als Block zaehlt schlicht der Rand. */
.willkommen .landung .zeile{display:block}
.willkommen .erfolg{color:var(--rot);margin-top:.1em}
.willkommen h2::after{
  content:"";display:block;height:2px;width:clamp(70px,8vw,116px);
  margin:clamp(1rem,2.2vw,1.5rem) auto 0;background:var(--rot);opacity:.6;
}
.willkommen .leitsatz{margin-inline:auto;text-align:center}
.willkommen .leitsatz.gross{font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--schwarz);
  max-width:34ch;margin-bottom:1.6rem;font-weight:600}
.willkommen .leitsatz:not(.gross){max-width:60ch;margin-bottom:0}

/* Die Ueberschrift kommt wie ein Sprung an: sie faellt herein, das Kissen gibt
   nach, sie federt aus. Die generische Auf-Bewegung wird hier abgeschaltet,
   sonst laufen zwei Animationen gegeneinander. */
.js .willkommen .titel.auf{opacity:1;transform:none;transition:none}
.js .willkommen .landung .zeile{transform-origin:50% 100%;opacity:0}
.js .willkommen .titel.da .landung .zeile{animation:einschlag 1.1s both}
.js .willkommen h2::after{transform:scaleX(0)}
.js .willkommen .titel.da h2::after{animation:strichZieht .7s cubic-bezier(.19,1,.22,1) .85s both}
@keyframes strichZieht{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .willkommen .titel.da .landung .erfolg{animation:einschlag-nach 1s .22s both}

@keyframes einschlag{
  0%  {opacity:0;transform:translateY(-72px) scaleY(1.18) scaleX(.9);
       animation-timing-function:cubic-bezier(.45,0,.85,.4)}
  16% {opacity:1}
  40% {transform:translateY(0) scaleY(1.12) scaleX(.94);
       animation-timing-function:cubic-bezier(.3,0,.2,1)}
  54% {transform:translateY(7px) scaleY(.76) scaleX(1.11)}
  68% {transform:translateY(-11px) scaleY(1.09) scaleX(.97)}
  82% {transform:translateY(2px) scaleY(.93) scaleX(1.04)}
  92% {transform:translateY(-3px) scaleY(1.02) scaleX(.99)}
  100%{opacity:1;transform:none}
}

/* Die zweite Zeile faellt flacher, sonst kaeme sie durch die erste hindurch. */
@keyframes einschlag-nach{
  0%  {opacity:0;transform:translateY(-38px) scaleY(1.12) scaleX(.94);
       animation-timing-function:cubic-bezier(.45,0,.85,.4)}
  18% {opacity:1}
  42% {transform:translateY(0) scaleY(1.08) scaleX(.96);
       animation-timing-function:cubic-bezier(.3,0,.2,1)}
  56% {transform:translateY(5px) scaleY(.82) scaleX(1.08)}
  70% {transform:translateY(-7px) scaleY(1.06) scaleX(.98)}
  84% {transform:translateY(1px) scaleY(.95) scaleX(1.03)}
  100%{opacity:1;transform:none}
}

/* ---------- Lines als Hoehentreppe: ein grosses Bild, darunter die Stufen ---------- */
/* Dieselbe abgeschraegte Ecke wie bei den uebrigen grossen Bildern. Sie sitzt
   auf dem Rahmen, damit auch der Verlauf darueber mitgeschnitten wird. */
.buehne-line{position:relative;aspect-ratio:16/9;overflow:hidden;background:rgba(18,16,13,.5);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
@media (max-width:760px){.buehne-line{aspect-ratio:4/3}}
.buehne-line img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.buehne-line img.da{opacity:1}
.buehne-line::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,16,13,.94) 0%,rgba(18,16,13,.6) 28%,rgba(18,16,13,.05) 58%)}

.buehne-text{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.4rem,4vw,2.8rem)}
.buehne-text .hoch{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:.9;color:var(--sand)}
.buehne-text .wer{display:block;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--signal);margin:.5rem 0 .7rem;font-weight:600}
.buehne-text p{max-width:42ch;margin:0;color:rgba(255,253,246,.86);font-size:1rem}

/* Die Stufen steigen an, so wie die Kissen hoeher werden */
/* Die Reihe fuellt die Breite der Buehne darueber, egal wie viele Stufen es
   gerade sind. Feste Spaltenzahl liess bei vier Stufen rechts eine Luecke. */
.stufen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(.5rem,1.4vw,1rem);
  align-items:end;margin-top:clamp(1rem,2.5vw,1.8rem)}
.stufen button{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;
  background:rgba(255,253,246,.04);border:1px solid rgba(255,253,246,.16);
  border-radius:10px;padding:.85rem .9rem;cursor:pointer;text-align:left;
  font-family:var(--body);color:rgba(255,253,246,.72);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.hell .stufen button{background:rgba(18,16,13,.04);border-color:rgba(18,16,13,.16);color:rgba(18,16,13,.7)}
.stufen button .m{font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,3.2vw,2rem);
  line-height:1;color:var(--weiss)}
.hell .stufen button .m{color:var(--schwarz)}
.stufen button .n{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
/* Beim Ueberfahren fuellt sich die Taste von unten, so wie sich das Kissen fuellt,
   und hebt sich um die Haelfte einer Stufe an. */
.stufen button{position:relative;overflow:hidden}
.stufen button::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:0;
  background:linear-gradient(0deg,rgba(255,74,28,.42) 0%,rgba(255,74,28,.14) 60%,transparent 100%);
  transition:height .42s cubic-bezier(.19,1,.22,1);
}
.stufen button > *{position:relative;z-index:1}
.stufen button:hover{border-color:rgba(255,74,28,.55);color:var(--weiss);transform:translateY(-7px)}
.hell .stufen button:hover{color:var(--schwarz)}
.stufen button:hover::before{height:100%}
.stufen button:hover .m{color:var(--signal)}
/* Der Taktbalken laeuft auf der gewaehlten Taste durch und ist zugleich der
   Taktgeber: laeuft er ab, kommt die naechste Line. Dadurch koennen Anzeige
   und Inhalt nicht auseinanderlaufen, auch nicht nach einer Tabpause. */
.stufen button .takt{
  position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:2;
  background:var(--signal);transform:scaleX(0);transform-origin:left center;
}
.stufen button[aria-selected="true"] .takt{animation:taktfuellung 7s linear forwards}
.stufen.pause button .takt{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .stufen button .takt{animation:none!important;transform:scaleX(0)}
}

/* Die gewaehlte Taste bleibt gefuellt */
.stufen button[aria-selected="true"]::before{height:100%;
  background:linear-gradient(0deg,rgba(154,30,30,.55) 0%,rgba(154,30,30,.2) 65%,transparent 100%)}
.stufen button[aria-selected="true"]{
  background:rgba(154,30,30,.28);border-color:var(--rot-hell);color:var(--weiss);
}
.stufen button[aria-selected="true"] .m{color:var(--signal)}
.stufen button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* Stufenhoehe: jede Taste steht hoeher als die vorige */
.stufen button:nth-child(1){min-height:74px}
.stufen button:nth-child(2){min-height:88px}
.stufen button:nth-child(3){min-height:104px}
.stufen button:nth-child(4){min-height:126px}
.stufen button:nth-child(5){min-height:150px}
@media (max-width:560px){
  .stufen{gap:.35rem}
  .stufen button{padding:.6rem .5rem;border-radius:8px}
  .stufen button .m{font-size:clamp(1.05rem,4.4vw,1.4rem)}
  .stufen button .n{font-size:.58rem;letter-spacing:.1em}
  .stufen button:nth-child(1){min-height:62px}
  .stufen button:nth-child(2){min-height:72px}
  .stufen button:nth-child(3){min-height:84px}
  .stufen button:nth-child(4){min-height:98px}
  .stufen button:nth-child(5){min-height:114px}
}
@media (prefers-reduced-motion:reduce){
  .buehne-line img{transition:none}
  .stufen button{transition:none}
}

/* ---------- Preise als Startnummern ---------- */
/* Zwei Reihen zu dritt: oben die Einzeltickets, unten die Bloecke und das
   Trampolin. Bei auto-fit blieb die letzte Karte allein in der zweiten Zeile. */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.tickets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.tickets{grid-template-columns:1fr}}
/* Zwei Karten in einem Dreierraster laessen rechts eine Luecke. Der
   Sprungkurs hat genau zwei Gruppen, deshalb hier zwei gleich breite
   Spalten. Ab 540px greift die Einspaltigkeit oben wie gehabt. */
/* Ein Foto ueber die volle Spurbreite. Anders als .regeln-bild bleibt es auch
   auf schmalen Displays stehen, es traegt hier den Abschluss des Abschnitts. */
.breitbild{margin:clamp(2rem,5vw,3.2rem) 0 0}
.breitbild img{width:100%;height:auto}
.tickets.zwei{grid-template-columns:repeat(2,1fr)}
@media (max-width:540px){.tickets.zwei{grid-template-columns:1fr}}
.ticket{
  background:var(--weiss);color:var(--schwarz);padding:1.4rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  /* drop-shadow statt box-shadow: der clip-path schneidet einen box-shadow
     weg, drop-shadow folgt dagegen der abgeschnittenen Ecke. */
  transition:transform .3s cubic-bezier(.34,1.7,.5,1),filter .3s ease;
  filter:drop-shadow(0 0 0 rgba(18,16,13,0));
  will-change:transform;
}
/* Die Einblende-Regel .js .auf.da setzt transform:none und ist spezifischer
   als .ticket:hover. Ohne diesen Vorrang bewegt sich beim Ueberfahren nichts. */
.js .ticket.auf:hover,
.ticket:hover{
  transform:translate(4px,-6px);
  filter:drop-shadow(0 10px 18px rgba(18,16,13,.28)) drop-shadow(0 2px 4px rgba(18,16,13,.18));
}
/* Beim Ueberfahren springt der Preis auf die Signalfarbe und die Zeile
   darueber wird lesbarer. Auf der orangen Karte waere Signalfarbe unsichtbar,
   dort bleibt der Preis dunkel. */
.ticket .euro,.ticket .art{transition:color .25s ease,opacity .25s ease}
.ticket:not(.stark):hover .euro{color:var(--rot)}
.ticket:hover .art{opacity:.85}
@media (prefers-reduced-motion:reduce){
  .ticket,.ticket:hover{transition:none;transform:none}
}
.ticket.stark{background:var(--signal)}
.ticket .art{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.62;margin-bottom:.6rem}
.ticket .euro{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,6vw,3.2rem);line-height:.85}
.ticket .dazu{display:block;font-size:.84rem;opacity:.72;margin-top:.7rem}

/* ---------- Status ---------- */
.lage{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.4rem}
.lage-gross{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,7vw,4.2rem);line-height:.86;text-transform:uppercase}
.lage-gross.ja{color:#5FD08A}
.lage-gross.nein{color:var(--sand)}
.plan{list-style:none;margin:0;padding:0;font-size:.95rem}
.plan li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid rgba(255,253,246,.14)}
.plan li.heute{color:var(--signal);font-weight:600}

/* ---------- Zwei Spalten ---------- */
.paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,5vw,4rem);align-items:center}
.paar img{width:100%;max-height:580px;object-fit:cover;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
/* Zwei kleine Aufnahmen der Anlage, sie fuellen den Rest der Textspalte.
   Gleiche abgeschraegte Ecke wie das Hauptbild, nur kleiner. */
/* ---------- Karte mit vorgeschalteter Einwilligung ----------
   Vor dem Klick wird nichts von Google geladen, der Platzhalter ist ein
   eigenes Foto. Erst der Knopf setzt den iframe ein. */
/* Gleiche Groesse und gleiche abgeschraegte Ecke wie das Bild, das hier
   vorher stand, damit die Spalte unveraendert wirkt. */
.karte-feld{position:relative;aspect-ratio:3/2;max-height:580px;overflow:hidden;
  background:var(--schwarz);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.karte-feld iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.karte-sperre{position:absolute;inset:0;display:grid}
.karte-sperre > img{grid-area:1/1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) brightness(.42)}
.karte-text{grid-area:1/1;position:relative;z-index:2;align-self:center;
  padding:clamp(1.2rem,3.5vw,2.2rem);max-width:52ch}
.karte-text b{display:block;font-family:var(--display);font-weight:900;
  text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.5rem);margin-bottom:.5rem}
.karte-text p{margin:0 0 1.1rem;font-size:.92rem;color:rgba(255,253,246,.82);line-height:1.5}
.karte-tasten{display:flex;flex-wrap:wrap;gap:.7rem}
.karte-tasten .knopf{font-size:.9rem;padding:.7rem 1.2rem}
.karte-merken{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-size:.84rem;color:rgba(255,253,246,.72);cursor:pointer}
.karte-merken input{accent-color:var(--signal);width:16px;height:16px;cursor:pointer}
.karte-mehr{display:inline-block;margin-top:.6rem;font-size:.84rem;
  color:rgba(255,253,246,.6);text-underline-offset:3px}
.karte-mehr:hover{color:var(--signal)}
@media (max-width:560px){
  .karte-feld{aspect-ratio:4/5}
  .karte-text p{font-size:.86rem}
}

/* ---------- Bike-Slider auf der Seite "Ueber mich" ----------
   Gleiche Pose, gleicher Ort, nur das Bike wechselt. Deshalb ein weiches
   Ueberblenden statt eines Schiebers: der Wechsel liest sich als Bike-Tausch,
   nicht als Bildwechsel. */
.bikes{position:relative;aspect-ratio:3/2}
.bikes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.bikes img.da{opacity:1}
html:not(.js) .bikes img{opacity:1}
/* Dieselbe Taktanzeige wie im Hero, nur auf heller Flaeche: dort steht sie
   auf dem Foto und ist deshalb weiss, hier auf Sand und deshalb dunkel. */
.bike-takt{position:absolute;left:0;bottom:-2.4rem;z-index:2}
.bike-takt .zahl{color:rgba(18,16,13,.5)}
.bike-takt .zahl b{color:var(--schwarz)}
.bike-takt .zahl s{color:rgba(18,16,13,.38)}
.bike-takt .strich{background:rgba(18,16,13,.22)}
.bike-takt .strich:hover{background:rgba(18,16,13,.34)}
.bike-takt .strich i{background:var(--rot)}
.bike-takt{filter:none}
@media (prefers-reduced-motion:reduce){.bikes img{transition:none}}
@media (max-width:820px){.bike-takt{bottom:-2rem}}

/* Das Ziel steht allein auf der Flaeche, mittig und gross. */
.ziel{background:var(--sand);text-align:center}
/* Daniel steht auf der Kante zum Fuss, nur auf "Ueber mich". Das Bild ragt aus
   der Sektion nach oben in die Sandflaeche, deshalb hier unten mehr Polsterung. */
.ziel:has(.ziel-daniel){padding-bottom:calc(clamp(5rem,11vw,9rem) + var(--k) * .23 + clamp(60px,7vw,110px))}
.ziel-daniel{
  position:absolute;right:clamp(5.5rem,9vw,8rem);bottom:0;z-index:2;
  width:clamp(150px,15vw,240px);height:auto;pointer-events:none;
}
@media (max-width:900px){
  .ziel-daniel{display:none}
  .ziel:has(.ziel-daniel){padding-bottom:calc(clamp(5rem,11vw,9rem) + var(--k) * .23)}
}
.ziel .spruch{max-width:34ch;margin:0 auto;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.8rem);line-height:1.02;color:var(--schwarz)}
.ziel .mini{margin:1.4rem 0 0;color:var(--rot)}
/* Derselbe feine Strich wie unter der Begruessung auf der Startseite, hier in
   Schwarz, weil er auf der Sandflaeche unter der Signatur steht. */
.ziel .mini::after{
  content:"";display:block;height:2px;width:clamp(70px,8vw,116px);
  margin:clamp(1rem,2.2vw,1.5rem) auto 0;background:var(--schwarz);opacity:.55;
}

.bildpaar{display:grid;grid-template-columns:1fr 1fr;
  gap:.8rem;margin-top:clamp(1.6rem,3.5vw,2.4rem);max-width:420px}
.bildpaar img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}

.punkte{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.punkte li{display:flex;gap:.9rem;align-items:flex-start}
.punkte li::before{
  content:"";flex-shrink:0;width:18px;height:11px;margin-top:.42rem;
  background:var(--signal);clip-path:polygon(0 100%,100% 0,100% 100%);
}
.spruch{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.8vw,2.5rem);line-height:1.05;text-transform:none;margin:0 0 1.4rem}

/* ---------- Regeln am Airbag ----------
   Am Rechner die Originalgrafik, am Handy die Liste. Die Grafik ist 1919 px
   breit und auf einem schmalen Display nicht mehr lesbar. */
/* ---------- Regeln am Airbag ---------- */
.regeln{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(.8rem,2vw,1.4rem);margin-top:clamp(1.8rem,4vw,2.8rem);
}
.regeln li{
  list-style:none;display:flex;gap:.9rem;align-items:flex-start;
  background:rgba(255,253,246,.04);border:1px solid rgba(255,253,246,.12);
  padding:1rem 1.1rem;
}
.hell .regeln li{background:rgba(18,16,13,.04);border-color:rgba(18,16,13,.14)}
.regeln li b{
  flex:0 0 auto;font-family:var(--display);font-weight:900;font-size:1.05rem;
  color:var(--signal);line-height:1.35;min-width:1.6em;
}
.hell .regeln li b{color:var(--rot)}
.regeln li span{font-size:.95rem;line-height:1.5;color:rgba(255,253,246,.78)}
.hell .regeln li span{color:rgba(18,16,13,.78)}
.notfall{
  margin-top:clamp(1.4rem,3vw,2.2rem);padding:clamp(1.1rem,2.6vw,1.7rem);
  background:var(--rot);color:var(--weiss);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.notfall b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.15;margin-bottom:.4rem}
.notfall span{font-size:.98rem;opacity:.92}

/* Am Rechner die Originalgrafik, am Handy die Liste. Die Grafik ist 1919 px
   breit und auf einem schmalen Display nicht mehr lesbar. */
.regeln-bild{display:block;width:100%;height:auto;margin-top:clamp(1.8rem,4vw,2.8rem);
  background:#e6e6e4}
.regeln{display:none}
@media (max-width:760px){
  .regeln-bild{display:none}
  .regeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

/* ---------- Galerie im Zeilensatz ----------
   Jede Zeile ist gleich hoch und fuellt die volle Breite. Die Bilder behalten
   ihr eigenes Seitenverhaeltnis, hoch und quer stehen nebeneinander, ohne
   Beschnitt und ohne Luecken. Der Abstand ist ueberall derselbe. */
.galerie{
  --zeile:clamp(150px,17vw,240px);
  --luft:clamp(.4rem,.9vw,.8rem);
  display:flex;flex-wrap:wrap;gap:var(--luft);
  margin-top:clamp(1.8rem,4vw,3rem);
}
.galerie button{
  position:relative;padding:0;border:0;background:rgba(18,16,13,.4);
  overflow:hidden;cursor:zoom-in;display:block;
  height:var(--zeile);
  flex-grow:calc(var(--v) * 100);
  flex-basis:calc(var(--v) * var(--zeile));
}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.19,1,.22,1)}
.galerie button:hover img{transform:scale(1.06)}
.galerie button:focus-visible{outline:3px solid var(--signal);outline-offset:3px;z-index:2}
/* Fuellt die letzte Zeile auf, damit sie nicht ueberdehnt wird */
.galerie .fueller{flex-grow:1000000;height:0;min-width:0;background:none}
@media (max-width:560px){.galerie{--zeile:clamp(120px,34vw,170px)}}
@media (prefers-reduced-motion:reduce){.galerie button:hover img{transform:none}}

/* ---------- Sequenzband: Auftakt der Galerieseite ----------
   Aufbau 1:1 wie .band auf der Sicherheitsseite: gleiche Sektionshoehe,
   gleicher Verlauf, gleiche Textmasse, gleicher Abstand nach unten. */
.sequenz{
  --keil:clamp(60px,8vw,120px);
  position:relative;min-height:min(76svh,720px);
  display:flex;align-items:flex-end;background:var(--schwarz);
  /* Wie .band: die Oberkante ist schraeg geschnitten und die Sektion rutscht
     um den Keil nach oben unter den Kopf. Ohne beides stand das Band um die
     Keilhoehe tiefer und damit sichtbar hoeher als das der Sicherheitsseite. */
  clip-path:polygon(0 var(--keil),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * var(--keil));
  z-index:0;
}
.sequenz-schiene{position:absolute;inset:0;z-index:0;overflow:hidden}
.sequenz-schiene img{
  /* --zoom vergroessert den Ausschnitt, --seit schiebt ihn waagrecht. Mehr
     als 100 Prozent Breite heisst: das Bild ragt seitlich hinaus und die
     Motive werden groesser. Ein groesserer --seit-Wert schiebt sie nach
     rechts, weil dann links mehr abgeschnitten wird. */
  position:absolute;left:var(--seit,0%);width:var(--zoom,100%);max-width:none;
  object-fit:cover;object-position:50% var(--hoch,50%);
  /* Das Bild ist hoeher als sein Rahmen. Genau dieser Ueberschuss ist der
     Weg, den der Parallax faehrt. Ohne ihn haette ein 2:1-Bild in einem
     schmaleren Rahmen gar keine senkrechte Reserve und nichts zu bewegen. */
  height:calc(100% + var(--ueberhoehe,0%));
  /* --versatz schiebt das Motiv zusaetzlich nach unten, ohne die Ueberhoehe
     und damit den Parallaxweg zu veraendern. */
  top:calc(-1 * var(--ueberhoehe,0%) / 2 + var(--versatz,0%));
}
.sequenz::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,16,13,.95) 0%,rgba(18,16,13,.82) 30%,
    rgba(18,16,13,.42) 58%,rgba(18,16,13,.1) 82%);
}
.sequenz .spur{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(2.5rem,7vw,5rem) clamp(2.2rem,5.5vw,4.8rem);
}
.sequenz h1{font-size:clamp(1.9rem,6vw,4.2rem);max-width:14ch;text-wrap:balance}
.sequenz p{max-width:48ch;color:rgba(255,253,246,.86);margin:1.1rem 0 0;font-size:1.06rem}
.sequenz .wisch{display:none}
/* Die Sequenz ist ein Panorama. Zu viel Ueberhoehe wuerde sie seitlich
   beschneiden und die aeusseren Fahrer abschneiden, deshalb hier weniger
   als bei der Sicherheitsseite. */
/* Das Kopfbild ist 3:2 und damit deutlich hoeher als ein Panorama. Dadurch
   kostet die Ueberhoehe hier kaum seitlichen Beschnitt, es reicht wenig
   davon fuer einen sichtbaren Weg. */
/* Galerie: 3:2-Bild, leicht herangeholt und nach rechts gerueckt. */
#sequenz{--ueberhoehe:16%;--zoom:124%;--seit:-3%}
/* Ueber mich: 16:9-Bild, kein Zoom noetig. */
/* Ueber mich: 16:9-Bild in einem flacheren Rahmen, es hat dadurch schon von
   sich aus senkrechte Reserve. Wenig Ueberhoehe genuegt, und der Ausschnitt
   sitzt hoch, damit der Fahrer im Bild bleibt. */
/* Ueber mich: Die Sektion liegt 115 px unter dem Kopf, dazu 75 px Kopfhoehe.
   Die obersten rund 190 px sind damit immer verdeckt. Der Fahrer sitzt im
   Bild schon bei acht Prozent Hoehe, deshalb braucht es genug Ueberschuss,
   um das Bild um diese 190 px nach unten zu schieben. */
#ueberkopf{--ueberhoehe:96%;--hoch:0%}
/* Auf schmaleren Fenstern wird der Ausschnitt niedriger. Mit der vollen
   Ueberhoehe rutschte der Fahrer dann so weit nach oben, dass Kopf und
   Oberkoerper hinter der Kopfleiste verschwanden. Weniger Ueberhoehe schiebt
   das Motiv wieder nach unten ins Bild. Gemessen bei 900, 1100 und 1280 px. */
@media (max-width:1280px){#ueberkopf{--ueberhoehe:56%;--versatz:8%}}
@media (max-width:1000px){#ueberkopf{--ueberhoehe:30%;--versatz:14%}}

/* Gleicher Abstand zur Folgesektion wie auf der Sicherheitsseite */
#galerie{padding-top:clamp(3.2rem,7vw,6rem)}

/* Auf dem Handy waere von einer 2:1-Montage in einem hochformatigen
   Ausschnitt fast nichts mehr uebrig. Dort steht das Bild ungeschnitten in
   voller Hoehe und man wischt den Sprung seitwaerts ab, gleiches Prinzip
   wie .band.weit auf der Startseite. */
@media (max-width:760px){
  .sequenz{min-height:0;display:block}
  .sequenz::after{display:none}
  .sequenz-schiene{
    position:relative;inset:auto;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .sequenz-schiene::-webkit-scrollbar{display:none}
  .sequenz-schiene img{
    position:relative;top:auto;left:auto;
    width:auto;height:58svh;object-fit:contain;max-width:none;
  }
  /* Der feste WhatsApp-Knopf sitzt unten rechts, sonst liegt er auf dem Hinweis. */
  .sequenz .spur{padding-right:calc(var(--rand) + 4.2rem)}
  .sequenz .wisch{display:block;margin-top:.9rem;font-weight:600;color:var(--signal)}
  /* Zeigt an, dass rechts noch etwas kommt. Am Ende der Schiene weg. Der
     Verlauf haengt an der Sektion, nicht an der Schiene: in einem
     scrollenden Element wuerde er mitwandern statt am Rand zu bleiben. */
  .sequenz::before{
    content:"";position:absolute;top:0;height:58svh;right:0;width:3.2rem;
    background:linear-gradient(270deg,rgba(18,16,13,.92),rgba(18,16,13,0));
    pointer-events:none;transition:opacity .3s ease;z-index:2;
  }
  .sequenz.am-ende::before{opacity:0}
}

/* ---------- Fotos vom Eroeffnungstag ----------
   Wegweiser in die externe Galerie. Das Bild ist der Aufhaenger, der Text
   darunter klaert Passwort und Zeitpunkt. Faellt mit der Aktion weg. */
.eroeffnung-bild{
  display:block;position:relative;overflow:hidden;
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
  background:rgba(18,16,13,.06);
  clip-path:polygon(0 0,100% 0,100% 100%,clamp(20px,3vw,44px) 100%);
}
.eroeffnung-bild img{
  width:100%;height:auto;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.eroeffnung-bild:hover img,
.eroeffnung-bild:focus-visible img{transform:scale(1.025)}
/* Sagt, dass das Bild irgendwohin fuehrt. Ohne den Hinweis sieht es aus wie
   ein normales Galeriebild, das sich nur vergroessern liesse. */
.eroeffnung-marke{
  position:absolute;right:0;top:0;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--signal);color:var(--schwarz);
  padding:.55rem 1.1rem;
  font-family:var(--display);font-weight:900;font-size:.98rem;
  letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.eroeffnung-bild:hover .eroeffnung-marke{transform:translate(3px,-3px)}

.eroeffnung-text{max-width:62ch}
.eroeffnung-text .leitsatz{margin-top:0}
.eroeffnung-hinweis{
  background:rgba(154,30,30,.09);
  padding:.9rem 1.1rem;margin:0 0 1.6rem;
  line-height:1.55;
}
.eroeffnung-hinweis b{color:var(--rot)}
/* Der Kontaktweg steht in einer eigenen Zeile, sonst geht er im Satz unter.
   Der WhatsApp-Link bleibt dabei zusammen, getrennt sah er wie zwei Links aus. */
.eroeffnung-weg{display:block;margin-top:.55rem}
.eroeffnung-weg a[href^="https://wa.me"]{white-space:nowrap}
.eroeffnung-hinweis a{font-weight:600;text-underline-offset:3px}

/* Auf dem Handy nahm die Marke fast die halbe Bildbreite ein und legte sich
   ueber das Motiv. Gemessen bei 390 px: 150 von 351 Pixeln. */
@media(max-width:560px){
  .eroeffnung-marke{font-size:.72rem;padding:.35rem .7rem;letter-spacing:.06em}
  .eroeffnung-marke b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .eroeffnung-bild img,.eroeffnung-marke{transition:none}
  .eroeffnung-bild:hover img{transform:none}
  .eroeffnung-bild:hover .eroeffnung-marke{transform:none}
}

/* ---------- Lightbox: das Bild springt auf wie vom Sprungtuch ---------- */
.leuchtkasten{
  border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100vw;height:100dvh;overflow:hidden;
}
.leuchtkasten::backdrop{background:rgba(10,8,5,.94)}
.leuchtkasten .rahmen{position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3.5rem);
  padding-bottom:calc(clamp(74px,9vh,104px) + clamp(1.6rem,4vw,3rem))}
.leuchtkasten img{
  max-width:calc(100vw - clamp(2rem,8vw,7rem));
  max-height:calc(100dvh - clamp(74px,9vh,104px) - clamp(2rem,8vw,7rem));
  display:block;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);will-change:transform,opacity}
.leuchtkasten .zu,
.leuchtkasten .vor,
.leuchtkasten .zurueck{
  position:absolute;z-index:3;background:rgba(255,253,246,.1);border:1px solid rgba(255,253,246,.28);
  color:var(--weiss);width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.3rem;line-height:1;
  transition:background .25s,transform .25s,border-color .25s;
}
.leuchtkasten .zu:hover,.leuchtkasten .vor:hover,.leuchtkasten .zurueck:hover{
  background:var(--signal);border-color:var(--signal);color:var(--schwarz);transform:scale(1.08)}
/* display:grid schlaegt das hidden-Attribut, deshalb hier ausdruecklich */
.leuchtkasten [hidden]{display:none}
.leuchtkasten .zu{top:clamp(.8rem,2.5vw,1.6rem);right:clamp(.8rem,2.5vw,1.6rem)}
.leuchtkasten .zurueck{left:clamp(.6rem,2vw,1.6rem);top:50%;margin-top:-24px}
.leuchtkasten .vor{right:clamp(.6rem,2vw,1.6rem);top:50%;margin-top:-24px}
.leuchtkasten .zaehler{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(clamp(74px,9vh,104px) + .8rem);z-index:3;
  font:600 .74rem/1 ui-monospace,monospace;letter-spacing:.18em;color:rgba(255,253,246,.85);
  background:rgba(10,8,5,.72);padding:.42rem .8rem;border-radius:99px;backdrop-filter:blur(4px)}

/* Miniaturen unten in der Mitte */
.leuchtkasten .streifen{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;gap:.4rem;justify-content:flex-start;align-items:center;
  padding:.7rem clamp(.6rem,3vw,2rem);overflow-x:auto;scroll-behavior:smooth;
  background:linear-gradient(0deg,rgba(10,8,5,.92),rgba(10,8,5,0));
  scrollbar-width:none;
}
.leuchtkasten .streifen::-webkit-scrollbar{display:none}
.leuchtkasten .streifen .mitte{margin:auto;display:flex;gap:.4rem}
.leuchtkasten .streifen button{
  flex:0 0 auto;width:clamp(54px,7vw,78px);aspect-ratio:3/2;padding:0;border:0;
  background:none;cursor:pointer;opacity:.42;overflow:hidden;
  outline:2px solid transparent;outline-offset:0;
  transition:opacity .3s,outline-color .3s,transform .3s;
}
.leuchtkasten .streifen button img{width:100%;height:100%;object-fit:cover;display:block}
.leuchtkasten .streifen button:hover{opacity:.8;transform:translateY(-2px)}
.leuchtkasten .streifen button[aria-current="true"]{opacity:1;outline-color:var(--signal)}
.leuchtkasten .streifen button:focus-visible{outline-color:var(--weiss)}
@media (max-width:640px){
  .leuchtkasten .zurueck,.leuchtkasten .vor{bottom:calc(clamp(74px,9vh,104px) + .8rem)}
}
@media (max-width:640px){
  .leuchtkasten .zurueck,.leuchtkasten .vor{top:auto;bottom:clamp(.9rem,3vw,2rem);margin-top:0}
  .leuchtkasten .zurueck{left:clamp(.9rem,4vw,2rem)}
  .leuchtkasten .vor{right:clamp(.9rem,4vw,2rem)}
}
/* Alles, was sich vergroessern laesst, zeigt es auch */
.zoombar{cursor:zoom-in}

/* ---------- WhatsApp: fester Knopf unten rechts ---------- */
/* ---------- Zurueck nach oben ----------
   Die Startseite hat zwoelf Abschnitte, von unten ist der Weg zurueck lang.
   Der Knopf sitzt UEBER dem WhatsApp-Knopf, nicht daneben: unten rechts ist
   besetzt, und links waere er auf dem Handy im Daumenweg des Menues.
   Form und Kante wie die uebrigen Knoepfe der Seite, nicht die Pille von
   WhatsApp, damit er als Teil der Seite gelesen wird und nicht als Fremdkoerper. */
.nach-oben{
  position:fixed;z-index:59;
  right:clamp(14px,2.5vw,26px);
  /* Hoehe des WhatsApp-Knopfs plus Luft. Beide Werte haengen an derselben
     clamp-Formel, damit der Abstand auf jeder Breite gleich bleibt. */
  bottom:calc(clamp(14px,2.5vw,26px) + 50px + 12px);
  width:48px;height:48px;padding:0;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--signal);color:var(--schwarz);
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.5,.5,1),background .3s;
}
.nach-oben.da{opacity:1;pointer-events:auto;transform:none}
.nach-oben:hover,.nach-oben:focus-visible{background:var(--weiss);transform:translateY(-4px)}
.nach-oben:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}
.nach-oben svg{width:22px;height:22px;display:block}
@media (max-width:560px){
  .nach-oben{bottom:calc(clamp(14px,2.5vw,26px) + 54px + 10px)}
}
@media (prefers-reduced-motion:reduce){
  .nach-oben{transition:opacity .2s ease}
  .nach-oben.da,.nach-oben:hover,.nach-oben:focus-visible{transform:none}
}

.wa{
  position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:60;
  display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#0B3D22;text-decoration:none;
  padding:.85rem 1.15rem;border-radius:999px;
  font:700 .84rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.34,1.5,.5,1),box-shadow .3s,background .3s;
}
.wa svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.wa span{white-space:nowrap}
.wa:hover,.wa:focus-visible{background:#1FBE59;transform:translateY(-4px) scale(1.03);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.75)}
.wa:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}
@media (max-width:560px){
  .wa{padding:.9rem;border-radius:50%}
  .wa span{display:none}
  .wa svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.wa{transition:background .3s}.wa:hover{transform:none}}

/* ---------- Fuß ---------- */
/* Unten 6rem statt 2rem: der schwebende WhatsApp-Knopf klebt am unteren
   Fensterrand und lag sonst genau auf der Schlusszeile. Gemessen bei 320,
   1024 und 1440 px. */
.fuss{background:var(--schwarz);padding:clamp(3rem,7vw,5rem) 0 6rem;border-top:1px solid rgba(255,253,246,.12);
  position:relative;overflow:clip}
.fuss .spur{position:relative;z-index:1}
.fuss-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:2rem;margin-bottom:2.4rem}
/* h2, nicht h4: die Fusszeile ist ein eigener Bereich auf oberster Ebene,
   ihre Spalten sind dessen Unterpunkte. Mit h4 sprang die Gliederung zwei
   Stufen, mit h3 blieb auf "Ueber mich" noch ein Sprung, weil jene Seite
   ausser der h1 gar keine Ueberschrift hat. */
.fuss h2{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin:0 0 .9rem;font-weight:600;font-family:var(--body)}
.fuss a{display:block;text-decoration:none;opacity:.74;padding:.16rem 0;font-size:.94rem;
  transition:opacity .2s ease,color .2s ease,transform .25s cubic-bezier(.34,1.5,.5,1)}
/* Beim Ueberfahren rueckt der Eintrag ein, das zeigt die Zeile an, ohne dass
   eine zusaetzliche Farbe oder Linie noetig waere. */
.fuss a:hover{opacity:1;color:var(--signal);transform:translateX(6px)}
/* Die Symbolzeile rueckt als Ganzes, nicht jedes Symbol einzeln */
.fuss .sm a:hover{transform:none}
.fuss .sm a{transition:opacity .2s ease,color .2s ease}
@media (prefers-reduced-motion:reduce){.fuss a:hover{transform:none}}
/* Gedaempft wird ueber die Textfarbe, nicht ueber opacity: sonst zieht der
   Container den Link mit herunter und das Orange kaeme nie voll an. */
.fuss-ende{border-top:1px solid rgba(255,253,246,.12);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.78rem;color:rgba(255,253,246,.52)}

/* Der Link in der Fusszeile ist kein Menuepunkt: er bleibt in der Zeile,
   traegt die Textfarbe und markiert sich nur mit einer feinen Linie. */
.fuss-ende a{display:inline;opacity:1;padding:0;font-size:inherit;color:var(--signal);
  text-decoration:none;border-bottom:1px solid rgba(255,74,28,.45)}
.fuss-ende a:hover{color:var(--signal);transform:none;border-bottom-color:currentColor}

/* ---------- Einblenden: Elemente fahren die Rampe hoch ---------- */
.js .auf{opacity:0;transform:translate(-18px,26px);transition:opacity .7s ease,transform .75s cubic-bezier(.19,1,.22,1)}
.js .auf.da{opacity:1;transform:none}


/* ---------- Mobilnavigation ---------- */
.burger{
  display:none;width:44px;height:44px;padding:0;border:none;background:transparent;
  cursor:pointer;position:relative;z-index:120;color:inherit;
}
.burger span{
  display:block;width:24px;height:2px;margin:5px auto;background:currentColor;
  transition:transform .35s cubic-bezier(.34,1.6,.5,1),opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilmenu{
  position:fixed;inset:0;z-index:110;background:var(--schwarz);color:var(--weiss);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:5rem clamp(1.5rem,7vw,3rem) 2rem;
  /* Bei acht Punkten wird das Menue auf niedrigen Geraeten laenger als das
     Fenster. Ohne diese zwei Zeilen faellt die Fussleiste unsichtbar unten
     heraus und laesst sich nicht erreichen. "safe center" haelt den Anfang
     im Bild: reines center schneidet bei Ueberlauf auch oben ab. */
  overflow-y:auto;
  justify-content:safe center;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.19,1,.22,1),visibility .35s;
}
.mobilmenu.offen{opacity:1;visibility:visible;transform:none}
.mobilmenu a{
  text-decoration:none;color:inherit;font-size:clamp(1.6rem,7vw,2.4rem);
  font-weight:700;padding:.4rem 0;border-bottom:1px solid rgba(127,127,127,.22);
  display:flex;justify-content:space-between;align-items:center;
}
.mobilmenu a::after{content:"→";color:var(--signal);font-size:.7em;opacity:.7}
.mobilmenu a:hover{color:var(--signal)}
.mobilmenu .menu-cta{margin-top:1.8rem;font-size:1.05rem;font-weight:700;border:none;justify-content:center;padding:.95rem 1.4rem;border-radius:99px;background:var(--signal);color:var(--schwarz);transition:transform .3s cubic-bezier(.34,1.6,.5,1)}
/* Die allgemeine Hover-Regel darueber faerbt Links signalfarben. Auf dem
   signalfarbenen Knopf verschwindet der Text damit. Hier bleibt er dunkel. */
.mobilmenu .menu-cta:hover,
.mobilmenu .menu-cta[aria-current="page"]{color:var(--schwarz)}
.mobilmenu .menu-cta:hover{transform:scale(1.03)}
.mobilmenu .menu-cta::after{content:none}
.mobilmenu .menu-fuss{
  margin-top:2rem;display:flex;flex-direction:column;gap:.5rem;
  font-size:.92rem;opacity:.75;
}
.mobilmenu .menu-fuss a{font-size:.98rem;font-weight:400;border:none;padding:.1rem 0}
.mobilmenu .menu-fuss a::after{content:none}
@media(max-width:1140px){.burger{display:block}}
@media(max-width:479px){.kopf > .knopf{display:none}}
/* Gegenstueck zum Umschaltpunkt oben: ab hier gibt es die Kopfleiste mit
   allen Punkten, das Mobilmenue wird nicht gebraucht. Die drei Werte
   (Zeile 65, 985 und hier) muessen zusammenpassen, sonst oeffnet der Burger
   ein leeres Menue. */
/* Niedrige Geraete: iPhone SE (568 und 667 px hoch) und kleine Androids.
   Dort passen acht Punkte plus Knopf plus Fussleiste nicht in der vollen
   Groesse. Gemessen am 10.09.2026: ohne diese Regel fehlen 85 px. */
@media(max-height:730px){
  .mobilmenu{padding-top:3.4rem;padding-bottom:1rem;gap:.1rem}
  .mobilmenu a{font-size:clamp(1.15rem,5vw,1.6rem);padding:.26rem 0}
  .mobilmenu .menu-cta{margin-top:.9rem;padding:.7rem 1.2rem;font-size:.98rem}
  .mobilmenu .menu-fuss{margin-top:.9rem;gap:.4rem}
}
@media(min-width:1141px){.mobilmenu{display:none}}


/* ---------- Sprungsequenz: echte Einzelbilder, ein Radklick ein Frame ---------- */
/* Die Sektion ist mehrere Fensterhoehen hoch, das Bild klebt oben fest. Der
   Scrollweg dazwischen ist der Weg durch die 23 Einzelbilder, rund 130 Pixel
   je Bild. Kuerzer wirkt es hektisch, laenger wie Haengenbleiben. */
.sprungbahn{position:relative;height:380svh;background:var(--asphalt);padding:0}
.sprungbahn-fest{position:sticky;top:0;height:100svh;overflow:hidden}
/* Ohne Bewegung braucht es keinen Scrollweg, ein Standbild genuegt. */
@media (prefers-reduced-motion:reduce){.sprungbahn{height:100svh}}
.sprungbahn canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.sprungbahn-kopf{position:absolute;left:0;right:0;top:0;z-index:3;
  padding:clamp(5.5rem,13vh,8.5rem) 0 clamp(2rem,6vh,3.5rem);
  background:linear-gradient(180deg,rgba(18,16,13,.82) 0%,rgba(18,16,13,.45) 55%,transparent 100%);
  pointer-events:none}
.sprungbahn-kopf h2{font-size:clamp(1.8rem,5vw,3.4rem);max-width:16ch;text-wrap:balance}
.sprungbahn-kopf p{max-width:46ch;color:rgba(255,253,246,.78);margin:.9rem 0 0}

/* Die Sprungbahn traegt oben und unten eine gerade Kante. Das Bild laeuft ueber
   die volle Hoehe, eine Schraege wuerde es anschneiden. */
.sprungbahn::before{display:none}
.sprungbahn + .schraeg::before{display:none}

/* Statt eines Satzes ueber das Scrollen ein Zeichen. Es sagt dasselbe, ohne
   die Aufmerksamkeit vom Bild zu nehmen. Der Satz bleibt fuer Vorleseprogramme
   erhalten. */
.scrollzeichen{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-top:clamp(1.4rem,3vh,2.2rem);width:max-content}
.scrollzeichen .maus{position:relative;display:block;width:24px;height:38px;
  border:2px solid rgba(255,253,246,.62);border-radius:14px}
.scrollzeichen .maus i{position:absolute;left:50%;top:7px;width:3px;height:7px;
  margin-left:-1.5px;border-radius:2px;background:var(--signal);
  animation:radwandern 1.9s cubic-bezier(.4,0,.2,1) infinite}
.scrollzeichen .spitze{width:20px;height:12px;fill:none;
  stroke:var(--signal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  animation:spitzeblinkt 1.9s ease-in-out infinite}
@keyframes radwandern{
  0%,12%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  62%{transform:translateY(13px);opacity:1}
  80%,100%{transform:translateY(15px);opacity:0}
}
@keyframes spitzeblinkt{0%,100%{opacity:.3;transform:translateY(0)}55%{opacity:1;transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){
  .scrollzeichen .maus i,.scrollzeichen .spitze{animation:none;opacity:1}
}
/* Nur fuer Vorleseprogramme, optisch nicht vorhanden. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.sprung-lauf{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(3rem,9vh,6rem) 0 clamp(4.5rem,11vw,8.5rem);
  background:linear-gradient(0deg,rgba(18,16,13,.8) 0%,rgba(18,16,13,.4) 55%,transparent 100%);
  pointer-events:none}
.phasen-leiste{
  display:flex;flex-wrap:wrap;gap:.4rem;padding:0 0 1.1rem;
}
.phasen-leiste li{
  list-style:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .8rem;border:1px solid rgba(255,253,246,.28);border-radius:99px;
  color:rgba(255,253,246,.72);transition:background .3s,color .3s,border-color .3s;
}
.phasen-leiste li.jetzt{background:var(--signal);border-color:var(--signal);color:var(--asphalt);font-weight:700}
.sprung-fortschritt{position:relative;height:3px;background:rgba(255,253,246,.22);border-radius:99px;overflow:hidden}
.sprung-fortschritt i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--signal);transition:width .12s linear}

/* Ladeanzeige, bevor die Sequenz laeuft */
.sprung-laden{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:.9rem;
  background:var(--asphalt);transition:opacity .5s ease}
.sprung-laden.weg{opacity:0;pointer-events:none}
.sprung-laden p{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand);text-align:center;margin:0}
.sprung-laden .schiene{width:min(240px,58vw);height:3px;background:rgba(255,253,246,.18);
  border-radius:99px;overflow:hidden}
.sprung-laden .schiene i{display:block;height:100%;width:0;background:var(--sand);transition:width .2s ease}

/* Ohne JavaScript und bei reduzierter Bewegung bleibt ein ruhiges Standbild */
html:not(.js) .sprungbahn,
html:not(.js) .sprungbahn-fest{height:auto;position:static}
@media (prefers-reduced-motion:reduce){
  .sprungbahn{height:auto}
  .sprungbahn-fest{position:static;height:auto;aspect-ratio:1921/988}
  .sprung-lauf{display:none}
}

/* ---------- Kinder: ein Bildmosaik statt einer Behauptung ---------- */
.kinder-raster{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.2vw,.9rem);
  margin-top:clamp(1.8rem,4vw,3rem);
}
.kinder-raster figure{position:relative;margin:0;overflow:hidden;background:rgba(18,16,13,.3)}
.kinder-raster img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.19,1,.22,1)}
.kinder-raster figure:hover img{transform:scale(1.05)}
/* Mosaik: ein breites oben, darunter ein breites und ein stehendes.
   Die Seitenverhaeltnisse sind so gewaehlt, dass die beiden unteren Bilder
   gleich hoch werden: bei Spaltenbreite w ergibt 4w * 9/16 dasselbe wie
   2w * 9/8. */
.kinder-raster figure:nth-child(1){grid-column:span 6;aspect-ratio:16/9}
.kinder-raster figure:nth-child(2){grid-column:span 4;aspect-ratio:16/9}
/* Die Aufnahme ist im Original hochkant (4672 x 7008), im liegenden Rahmen
   blieb davon nur ein Streifen uebrig. */
.kinder-raster figure:nth-child(3){grid-column:span 2;aspect-ratio:8/9}
@media (max-width:760px){
  .kinder-raster{grid-template-columns:repeat(2,1fr)}
  .kinder-raster figure:nth-child(1){grid-column:span 2;aspect-ratio:16/10}
  .kinder-raster figure:nth-child(2){grid-column:span 1;aspect-ratio:1}
  .kinder-raster figure:nth-child(3){grid-column:span 1;aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){.kinder-raster figure:hover img{transform:none}}

/* Rechtslinks auf der Fehlerseite. Kein Footer, nur die Pflichtwege. */
.fehler-recht{
  display:flex;gap:1.6rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,5vw,3.4rem);padding-top:1.2rem;
  border-top:1px solid rgba(255,253,246,.14);
  font-size:.86rem;
}
.fehler-recht a{color:rgba(255,253,246,.6);text-decoration:none;transition:color .2s}
.fehler-recht a:hover,.fehler-recht a:focus-visible{color:var(--signal)}

/* ---------- Vollbild-Band: ein Bild traegt die Aussage ---------- */
.band{
  --keil:clamp(60px,8vw,120px);
  position:relative;min-height:min(64svh,620px);display:flex;align-items:flex-end;
  background:var(--schwarz);
  /* Die Oberkante ist schraeg geschnitten, dadurch traegt das Foto die Kante
     selbst. Ein farbiger Keil davor wuerde das Bild abdecken. Die Sektion
     rutscht um den Keil nach oben unter die vorige, sonst klafft dort ein
     Dreieck und man sieht den Seitengrund durch. */
  clip-path:polygon(0 var(--keil),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * var(--keil));
  z-index:0;
}
.schraeg{z-index:1}


.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,16,13,.95) 0%,rgba(18,16,13,.82) 30%,rgba(18,16,13,.42) 58%,rgba(18,16,13,.1) 82%)}
.band .spur{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,7vw,5rem)}
/* Auf flachen Geraeten waechst der Textblock im Bildkopf so weit, dass die
   Ueberschrift unter die feste Kopfleiste rutscht. Dort oben mehr Polster. */
@media (max-height:660px){
  .band .spur{padding-top:calc(clamp(2.5rem,7vw,5rem) + 9rem)}
}
/* Das Vollbild darunter laesst sich vergroessern. Die Textspur deckt aber die
   ganze Breite ab und hat den Klick abgefangen, obwohl das Bild als anklickbar
   ausgezeichnet war. Nur die Textbloecke selbst fangen jetzt noch. */
.band .spur{pointer-events:none}
.band .spur > *{pointer-events:auto}
/* Fuer die Luftaufnahme: mehr Hoehe, damit vom Gelaende nichts wegfaellt */
.band.weit{min-height:min(92svh,880px)}
@media (min-aspect-ratio:16/10){.band.weit{min-height:min(96svh,900px)}}
/* Auf dem Handy passt ein 3:2-Luftbild nicht hinter den Text, ohne dass fast
   alles wegfaellt. Dort steht das Bild ganz oben und der Text darunter. */
@media (max-width:760px){
  .band.weit{min-height:0;display:block;background:var(--schwarz)}
  .band.weit > img{position:relative;inset:auto;height:auto;aspect-ratio:3/2}
  .band.weit::after{display:none}
  .band.weit .spur{padding-block:clamp(1.6rem,6vw,2.4rem)}
}
/* Auf der Sicherheitsseite sitzt der Textblock hoeher im Bild als beim
   Band der Startseite. Gezielt ueber die id, damit die Startseite
   (.band.weit) unveraendert bleibt. Die Sektion waechst dabei mit: nur mehr
   Abstand nach unten wuerde den Text gegen den festen Kopf druecken. */
#sicherheit{min-height:min(76svh,720px);--ueberhoehe:18%;overflow:hidden}
#sicherheit img{
  height:calc(100% + var(--ueberhoehe));
  top:calc(-1 * var(--ueberhoehe) / 2);
}
#sicherheit .spur{padding-bottom:clamp(2.2rem,5.5vw,4.8rem)}
/* Die Regeln folgen direkt auf das Band und ruecken naeher heran, nur oben. */
#regeln{padding-top:clamp(3.2rem,7vw,6rem)}

.band h1,.band h2{font-size:clamp(1.9rem,6vw,4.2rem);max-width:14ch;text-wrap:balance}
.band p{max-width:48ch;color:rgba(255,253,246,.86);margin:1.1rem 0 0;font-size:1.06rem}
.band .zahlen{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3.4rem);margin-top:1.8rem}
.band .zahlen div b{display:block;font-family:var(--display);font-size:clamp(1.5rem,4vw,2.4rem);
  line-height:1;color:var(--signal)}
.band .zahlen div span{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,253,246,.72)}

/* ---------- Kontaktseite ---------- */
.kontakt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2.4rem,6vw,4.5rem);margin-top:clamp(1.8rem,4vw,3rem);align-items:start}
.kontakt-wege h2,.kontakt-form h2{font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);margin:0 0 1.1rem;
  font-family:var(--body);font-weight:700}
.kontakt-wege .punkte li{font-size:1.02rem}
.kontakt-wege a{color:var(--weiss);text-underline-offset:3px}
.kontakt-wege a:hover{color:var(--signal)}

.kontakt-form{display:flex;flex-direction:column;gap:.35rem}
.kontakt-form label{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:rgba(255,253,246,.8);margin-top:1rem}
.kontakt-form label span[aria-hidden]{color:var(--signal)}
.kontakt-form .freiwillig{text-transform:none;letter-spacing:0;font-weight:400;
  opacity:.55;font-size:.78rem}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea{
  font-family:var(--body);font-size:1rem;color:var(--weiss);
  background:rgba(255,253,246,.07);border:1px solid rgba(255,253,246,.22);
  padding:.8rem .9rem;border-radius:2px;width:100%;
  transition:border-color .2s ease,background .2s ease;
}
.kontakt-form input:focus,.kontakt-form textarea:focus{
  outline:none;border-color:var(--signal);background:rgba(255,253,246,.11)}
.kontakt-form textarea{resize:vertical;min-height:8rem;line-height:1.5}
.kontakt-form input:user-invalid,.kontakt-form textarea:user-invalid{border-color:var(--rot-hell)}

/* Der Honigtopf muss fuer Bots im DOM stehen, darf aber niemanden erreichen,
   der die Seite wirklich bedient. display:none wuerde manche Bots warnen,
   deshalb aus dem Sichtfeld geschoben. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kontakt-form .einwilligung{display:flex;gap:.7rem;align-items:flex-start;
  margin-top:1.4rem;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:.92rem;line-height:1.5;color:rgba(255,253,246,.78);cursor:pointer}
.kontakt-form .einwilligung input{accent-color:var(--signal);width:18px;height:18px;
  flex:0 0 auto;margin-top:.15rem;cursor:pointer}
.kontakt-form .einwilligung a{color:var(--signal);text-underline-offset:3px}
.kontakt-form .knopf{margin-top:1.6rem;align-self:flex-start;border:0;cursor:pointer;
  font-family:var(--display)}
.kontakt-form .pflicht{font-size:.78rem;opacity:.55;margin:.8rem 0 0}
.kontakt-form .pflicht span{color:var(--signal)}

/* Rueckmeldung nach dem Absenden */
#kontaktStand{padding:.9rem 1.1rem;margin-bottom:.6rem;font-size:.96rem;line-height:1.5}
#kontaktStand.gut{background:rgba(18,138,60,.18);border:1px solid rgba(18,138,60,.5)}
#kontaktStand.schlecht{background:rgba(196,43,28,.16);border:1px solid rgba(196,43,28,.5)}

/* ---------- Haeufige Fragen ----------
   details/summary statt eigener Klapp-Logik: funktioniert ohne JavaScript,
   ist von Haus aus bedienbar und Suchmaschinen lesen den Inhalt auch im
   zugeklappten Zustand. */
.faq{max-width:74ch;margin-top:clamp(1.6rem,4vw,2.6rem)}
.faq details{border-bottom:1px solid rgba(18,16,13,.16)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.22rem);line-height:1.15;letter-spacing:.01em;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rot)}
.faq summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
/* Das Zeichen ist die Rampe, kein Pfeil: dasselbe Dreieck wie in den Listen */
.faq summary::after{
  content:"";position:absolute;right:.2rem;top:50%;margin-top:-6px;
  width:16px;height:10px;background:var(--rot);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  transition:transform .3s cubic-bezier(.34,1.5,.5,1);
}
.faq details[open] summary::after{transform:rotate(-90deg)}
.faq details[open] summary{color:var(--rot)}
.faq p{margin:0 0 1.3rem;max-width:64ch;color:rgba(18,16,13,.78);font-size:1.02rem}
.faq a{color:var(--rot);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- Warum hierher: die belegbare Einordnung ---------- */
.warum-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;margin-top:2.4rem}
.warum-punkt{padding-top:1rem;border-top:2px solid currentColor}
.warum-punkt b{display:block;font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1;margin-bottom:.5rem}
.warum-punkt span{display:block;font-size:.94rem;opacity:.78;line-height:1.5}
.warum-fussnote{margin-top:2.4rem;font-size:.86rem;opacity:.6;max-width:70ch}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .auf,.js .hero h1 .z{opacity:1;transform:none}
  .js .willkommen .landung .zeile,
  .js .willkommen .titel.da .landung .zeile{opacity:1;transform:none;animation:none}
  .js .willkommen h2::after,
  .js .willkommen .titel.da h2::after{transform:none;animation:none}
}

/* Seiten ohne Bildkopf beginnen direkt mit Text. Die Kopfleiste liegt fest
   darueber und schnitt die Ueberschrift an. Betrifft Kontakt, Impressum und
   Datenschutz: nur dort ist die erste Sektion eine .schraeg. */
main > .schraeg:first-child{
  padding-top:calc(clamp(5rem,11vw,9rem) - var(--k) * .23 + clamp(4.4rem,7vw,5.2rem));
}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:72ch}
.rechtstext dl{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:.35rem 1.4rem;
  margin:0 0 2.4rem;font-size:1rem}
.rechtstext dt{color:var(--signal);font-weight:600}
.rechtstext dd{margin:0;color:rgba(255,253,246,.86)}
/* Die Displayschrift bleibt, nur nicht mehr im schwersten Schnitt. 900 plus
   Versalien war bei dieser Groesse eine Mauer, 700 mit etwas mehr Sperrung
   liest sich ruhig und bleibt trotzdem klar staerker als die Begriffe der
   Liste darueber. */
.rechtstext h3{
  font-weight:700;font-size:1.12rem;letter-spacing:.045em;line-height:1.2;
  margin:2.4rem 0 .7rem;
}
.rechtstext p{color:rgba(255,253,246,.78);margin:0 0 1rem;font-size:1rem}
.rechtstext a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.rechtstext a:hover{color:var(--sand)}
@media (max-width:560px){
  .rechtstext dl{grid-template-columns:1fr;gap:.15rem}
  .rechtstext dd{margin-bottom:.8rem}
}

/* ---------- Social-Buttons im Fuss: quadratisch, Markenfarben ---------- */
.sm{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.sm a{
  display:grid;place-items:center;
  width:44px;aspect-ratio:1;border-radius:0;
  color:#fff;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.5,.5,1),filter .25s;
}
.sm a svg{width:22px;height:22px;fill:currentColor;display:block}
.sm a .federkern{display:grid;place-items:center;transform-origin:center bottom}
/* Der Name bleibt fuer Screenreader lesbar, ist aber nicht zu sehen.
   Der Federkern ist ebenfalls ein span und muss ausgenommen bleiben,
   sonst verschwindet mit ihm auch das Symbol. */
.sm a span:not(.federkern){position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sm a{opacity:1}
.sm a:hover,.sm a:focus-visible{color:#fff;filter:brightness(1.1)}
.sm-wa:hover,.sm-wa:focus-visible{color:#0B3D22}
.sm a:focus-visible{outline:2px solid var(--weiss);outline-offset:2px}
/* Originalfarben der Dienste */
.sm-ig{background:linear-gradient(45deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%)}
.sm-fb{background:#1877F2}
.sm-wa{background:#25D366;color:#0B3D22}
.sm-wa svg{fill:#0B3D22}


/* ---------- Wetter an der Anlage ----------
   Sitzt unter der Ampel, weil der Betrieb am Wetter haengt. Die Daten kommen
   vom eigenen Server (wetter.php), es wird nichts von Dritten nachgeladen. */
/* ---------- Ganzjaehrig offen ----------
   Das staerkste Argument der Seite. Zuerst stand es als vierte Spalte neben
   dem Wochenplan und las sich wie eine Fussnote. Jetzt eine eigene Zeile,
   mittig, mit der Kernaussage in der Displayschrift. Der Strich darueber
   trennt es vom Plan, ohne einen Kasten zu bauen. */
.jahr{text-align:center;margin-top:clamp(2.6rem,5vw,4rem);
  padding-top:clamp(2.2rem,4vw,3rem);border-top:1px solid rgba(255,253,246,.14)}
.jahr .mini{opacity:.5;margin:0 0 .9rem}
.jahr-gross{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,2.9rem);line-height:1.02;color:var(--weiss);
  max-width:22ch;margin:0 auto;text-wrap:balance}
.jahr-gross::after{content:"";display:block;height:2px;width:clamp(60px,7vw,100px);
  margin:clamp(.9rem,2vw,1.3rem) auto 0;background:var(--signal);opacity:.85}
.jahr-text{max-width:58ch;margin:clamp(1rem,2.2vw,1.4rem) auto 0;
  color:rgba(255,253,246,.76)}

.wetter{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(1.8rem,4vw,2.6rem);
  border-top:1px solid rgba(255,253,246,.14)}
.wetter-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;margin-bottom:1.4rem}
.wetter-jetzt{margin:0;color:rgba(255,253,246,.82);font-size:.95rem}
.wetter-jetzt b{color:var(--weiss);font-weight:600}
.wetter-tage{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.wetter-tage li{background:rgba(255,253,246,.05);padding:1rem 1.1rem 1.1rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.wetter-tag{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.04em;margin:0 0 .7rem;color:var(--signal)}
.wetter-tage svg{width:48px;height:48px;display:block;margin-bottom:.6rem}
.wetter-grad{margin:0;font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1}
.wetter-grad span{opacity:.5;font-size:1rem;margin-left:.25rem}
.wetter-dazu{margin:.5rem 0 0;font-size:.82rem;color:rgba(255,253,246,.62);line-height:1.45}
.wetter-dazu .nass{color:var(--signal)}
.wetter-quelle{margin:1.2rem 0 0;font-size:.76rem;opacity:.45}
.wetter-quelle a{display:inline;opacity:1;padding:0}
.wetter-quelle a:hover{transform:none}
/* Die Sonne traegt die Sandfarbe, die Wolke bleibt hell, Regen und Blitz
   bekommen das Signal. So bleibt das Wetter im Farbklang der Seite. */
.w-sonne{fill:var(--sand)}
.w-wolke{fill:rgba(255,253,246,.82)}
.w-nass{stroke:var(--signal);stroke-width:2.4;stroke-linecap:round;fill:none}
.w-blitz{fill:var(--signal)}

/* ---------- Warum hierher: Text und Luftbild nebeneinander ----------
   Die Senkrechtaufnahme zeigt genau das, was der Text behauptet, alles auf
   einem Platz. Deshalb steht sie direkt daneben und nicht als eigener
   Abschnitt darueber. */
.warum-oben{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4.5vw,3.6rem);align-items:center;
  margin-bottom:clamp(2.6rem,6vw,4rem)}
.warum-oben > div > p:last-child{margin-bottom:0}
.warum-bild{margin:0}
.warum-bild img{width:100%;height:auto;display:block;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.warum-bild figcaption{margin-top:.7rem;font-size:.8rem;opacity:.55}
@media (max-width:900px){
  .warum-oben{grid-template-columns:1fr;gap:2rem}
  .warum-bild{order:-1}
}
.warum-oben .leitsatz{margin-bottom:1.2rem}

/* Das Hintergrundbild des Erstbesuchs bekommt Uebergroesse, sonst gibt es
   keinen Weg zum Verschieben. Die Sektion schneidet den Ueberschuss ab. */
.rotflaeche.mit-bild[data-parallax-mitte]{overflow:clip}
.rotflaeche.mit-bild[data-parallax-mitte] .hintergrundbild{
  top:-9%;bottom:auto;height:118%;will-change:transform;
}

/* ---------- Wetter im Hero ----------
   Setzt die Treppe des Status-Banners fort, aber dunkel und kleiner. Ein
   zweiter heller Balken wuerde dem Status die Aufmerksamkeit nehmen. */
.wetter-banner{
  position:absolute;left:0;z-index:4;
  top:calc(var(--balken-oben,clamp(5.5rem,14vh,9rem)) + var(--balken-hoehe,clamp(2.9rem,5.4vw,3.4rem)));
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(18,16,13,.74);backdrop-filter:blur(6px);color:var(--weiss);
  padding:.5rem clamp(1.8rem,3.4vw,2.8rem) .5rem clamp(1.2rem,5vw,4.5rem);
  font-family:var(--display);font-weight:900;font-size:clamp(.78rem,1.5vw,.98rem);
  letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
}
.wetter-banner svg{width:22px;height:22px;flex:0 0 auto}
.wetter-banner .spanne{font-family:var(--body);font-weight:400;letter-spacing:.02em;
  text-transform:none;opacity:.66;font-size:.94em}
.js .wetter-banner{transform:translateX(-102%)}
.js .hero.los .wetter-banner{transform:none;
  transition:transform .8s cubic-bezier(.19,1,.22,1) .38s}
@media (prefers-reduced-motion:reduce){
  .js .wetter-banner,.js .hero.los .wetter-banner{transform:none;transition:none}
}
@media (max-width:640px){.wetter-banner{display:none}}

/* Die Begruessung bekommt eine Stufe: der Name traegt, der Zuruf ordnet sich
   unter. Gleich grosse Zeilen wirken wie zwei Ueberschriften nebeneinander. */
.willkommen .landung .erfolg{font-size:.74em}

/* ---------- Haeufige Fragen: sanft auf und zu, immer nur eine ----------
   Der Inhalt sitzt in einem Raster, dessen Zeilenhoehe von 0fr auf 1fr laeuft.
   Das animiert zuverlaessig, ohne die Hoehe vorher messen zu muessen. Ohne
   JavaScript bleibt das native Verhalten unveraendert. */
.js .faq .faq-inhalt{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1)}
.js .faq details[open] .faq-inhalt{grid-template-rows:1fr}
.js .faq details[open].flach .faq-inhalt{grid-template-rows:0fr}
.faq .faq-inhalt > div{overflow:hidden;min-height:0}
@media (prefers-reduced-motion:reduce){
  .js .faq .faq-inhalt{transition:none}
}

/* ---------- Kein einzelnes Wort am Absatzende ----------
   text-wrap:pretty ist die Grundlage, Chrome haelt sich aber nicht zuverlaessig
   daran. Die eigentliche Arbeit macht main.js, das die letzten beiden Woerter
   mit einem geschuetzten Leerzeichen verbindet. */
p, li, figcaption, .leitsatz, .buehne-text p, .warum-punkt span, .ticket .dazu{
  text-wrap:pretty;
}

/* ---------- Fehlerseite ----------
   Die Zahl faellt herein, das Kissen gibt nach, sie federt aus. Dieselbe
   Bewegung, die auch die Knoepfe der Seite machen, nur groesser. */
.fehler{min-height:88svh;display:flex;align-items:center;text-align:center}
.fehler .spur{width:100%}
.fehler-buehne{
  /* Die Kissenhoehe steht einmal hier und wird unten mehrfach gebraucht. */
  --kissen:clamp(54px,7vw,84px);
  position:relative;display:block;height:clamp(170px,23vw,260px);
  margin:0 auto clamp(1.4rem,3vw,2.4rem);width:max-content;min-width:min(280px,80vw);
}
/* Die Zahl sitzt auf dem Kissen und sinkt ein Stueck ein, statt darueber
   zu schweben. */
.fehler-zahl{
  position:absolute;left:50%;bottom:calc(var(--kissen) - .22em);top:auto;
  transform:translateX(-50%);
  font-family:var(--display);font-weight:900;font-size:clamp(4.6rem,15vw,10rem);
  line-height:.8;color:var(--sand);letter-spacing:-.02em;
}
/* Drei Wuelste wie an den echten Luftkissen */
.fehler-kissen{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(230px,32vw,380px);height:var(--kissen);
  display:flex;align-items:flex-end;gap:3px;
}
.fehler-kissen i{
  flex:1;height:100%;background:linear-gradient(180deg,#FFFDF6 0%,#D8D2C4 100%);
  border-radius:60px 60px 10px 10px;
}
.fehler-kissen i:nth-child(2){height:88%}
.fehler-schatten{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:clamp(120px,17vw,200px);height:14px;border-radius:50%;
  background:rgba(18,16,13,.5);filter:blur(9px);
}

/* Ohne JavaScript steht alles ruhig an seinem Platz. */
.js .fehler-zahl{animation:zahlFaellt 1.5s cubic-bezier(.3,0,.4,1) both}
.js .fehler-kissen i{animation:kissenGibtNach 1.5s cubic-bezier(.3,0,.4,1) both}
.js .fehler-schatten{animation:schattenWaechst 1.5s cubic-bezier(.3,0,.4,1) both}
.js .fehler-marke,.js .fehler h1,.js .fehler-text,
.js .fehler-tasten,.js .fehler-wege{animation:fehlerAuf .7s ease .95s both}

@keyframes zahlFaellt{
  0%{transform:translate(-50%,-150%) scaleY(1.16) scaleX(.9);opacity:0}
  14%{opacity:1}
  46%{transform:translate(-50%,26%) scaleY(.74) scaleX(1.18)}
  64%{transform:translate(-50%,-16%) scaleY(1.08) scaleX(.96)}
  80%{transform:translate(-50%,5%) scaleY(.96) scaleX(1.03)}
  100%{transform:translate(-50%,0) scaleY(1) scaleX(1)}
}
@keyframes kissenGibtNach{
  0%,40%{transform:translateX(-50%) scaleY(1)}
  50%{transform:translateX(-50%) scaleY(.54)}
  64%{transform:translateX(-50%) scaleY(1.1)}
  78%{transform:translateX(-50%) scaleY(.94)}
  100%{transform:translateX(-50%) scaleY(1)}
}
@keyframes schattenWaechst{
  0%,36%{opacity:.18;width:clamp(60px,9vw,100px)}
  50%{opacity:.6;width:clamp(150px,21vw,240px)}
  100%{opacity:.42;width:clamp(120px,17vw,200px)}
}
@keyframes fehlerAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.fehler-marke{color:var(--signal);margin:0 0 .7rem}
.fehler h1{font-size:clamp(2.2rem,7vw,5rem);line-height:.95;margin:0 0 1.2rem}
.fehler-text{margin:0 auto;text-align:center;max-width:42ch}
.fehler-tasten{justify-content:center;margin-top:clamp(1.8rem,4vw,2.6rem)}

/* Ein paar echte Wege statt einer Sackgasse */
.fehler-wege{margin-top:clamp(2.6rem,6vw,4rem);
  padding-top:clamp(1.4rem,3vw,2rem);border-top:1px solid rgba(255,253,246,.14)}
.fehler-wege .mini{opacity:.5;margin:0 0 1rem}
.fehler-wege ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.fehler-wege a{display:inline-block;text-decoration:none;
  font-size:.86rem;letter-spacing:.04em;padding:.42rem .95rem;
  color:rgba(255,253,246,.78);border:1px solid rgba(255,253,246,.22);border-radius:99px;
  transition:background .2s,color .2s,border-color .2s}
.fehler-wege a:hover{background:var(--signal);border-color:var(--signal);color:var(--schwarz)}

@media (prefers-reduced-motion:reduce){
  .js .fehler-zahl,.js .fehler-kissen i,.js .fehler-schatten,
  .js .fehler-marke,.js .fehler h1,.js .fehler-text,
  .js .fehler-tasten,.js .fehler-wege{animation:none;opacity:1;transform:none}
  .js .fehler-zahl{transform:translateX(-50%)}
  .js .fehler-kissen i{transform:none}
  .js .fehler-schatten{transform:translateX(-50%)}
}

/* ---------- Wege im Mobilmenue ----------
   Statt einer nackten Rufnummer drei Knoepfe mit Symbol. Am Handy ist
   Antippen die Geste, nicht Ablesen und Abtippen. */
.mobilmenu .menu-fuss{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;opacity:1}
.mobilmenu .menu-fuss .menu-weg{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;line-height:1;
  padding:.62rem .5rem;border-radius:99px;white-space:nowrap;
  border:1px solid rgba(255,253,246,.26);
  font-size:.92rem;font-weight:600;letter-spacing:.02em;
  color:var(--weiss);text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
/* Die Grossbuchstaben sitzen in ihrer Zeile nicht mittig, darunter liegt die
   Reserve fuer Unterlaengen. Das Symbol rueckt um diesen Betrag nach unten,
   damit beide optisch auf einer Achse stehen. */
.mobilmenu .menu-fuss .menu-weg svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto;
  position:relative;top:.093em}
.mobilmenu .menu-fuss .menu-weg:hover,.mobilmenu .menu-fuss .menu-weg:focus-visible{
  background:var(--signal);border-color:var(--signal);color:var(--schwarz)}
/* Instagram traegt seine eigene Farbe, damit das Symbol erkennbar bleibt. */
.mobilmenu .menu-fuss .menu-ig:hover,.mobilmenu .menu-fuss .menu-ig:focus-visible{
  background:#C13584;border-color:#C13584;color:var(--weiss)}


/* ---------- Schaltflaeche zum Vergroessern ----------
   Ein Bild ist kein Knopf. Statt dem Bild eine fremde Rolle aufzudruecken,
   traegt jetzt ein echtes button-Element den Klick: bei einem img eines
   ringsherum, sonst eines unsichtbar darueber. */
.zoom-halter{position:relative}
.zoom-flaeche{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.zoom-knopf{display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;font:inherit;color:inherit;line-height:0}
.zoom-flaeche:focus-visible,.zoom-knopf:focus-visible{
  outline:3px solid var(--signal);outline-offset:3px}


/* ---------- Uebergang von "Ueber mich" zum Zitat ----------
   Hier grenzen als einzige Stelle der Website zwei Abschnitte mit demselben
   Sandgrund aneinander. Die Schraege dazwischen ist deshalb unsichtbar, ihr
   Platzausgleich steht aber weiter im Weg, und beide Abschnitte bringen ihr
   volles Polster mit. Gemessen bei 1440 px klaffte eine Luecke von 314 px
   zwischen dem Bildwechsler und dem Zitat. */
#ueber{padding-bottom:clamp(3.5rem,5vw,5rem)}
#ziel{padding-top:clamp(3rem,4.5vw,4.5rem)}


/* ---------- Vorwort der Galerie ----------
   Zwei Absaetze zwischen Leitsatz und Bildraster. Sie erklaeren, was man
   sieht, und geben der Seite ueberhaupt erst Text: vorher standen dort
   153 Zeichen. Zweispaltig ab Tablet, damit die Bilder nicht zu weit
   nach unten rutschen. */
.galerie-vorwort{margin:clamp(1.4rem,3vw,2.2rem) 0 clamp(2rem,4vw,3rem);
  display:grid;gap:clamp(.9rem,2vw,1.4rem)}
.galerie-vorwort p{margin:0;max-width:62ch;color:rgba(255,253,246,.78);
  font-size:1.02rem;line-height:1.62}
@media (min-width:900px){
  .galerie-vorwort{grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem)}
  .galerie-vorwort p{max-width:52ch}
}


/* ---------- Montage: ein ganzer Sprung in einem Bild ----------
   Das Bild laeuft randlos ueber die volle Breite, der Text steht darueber in
   der Spur. Auf dem Handy waere ein 2:1-Panorama bei 390 px nur noch 195 px
   hoch, die Fahrer waeren Punkte. Deshalb ist es dort breiter als das Fenster
   und laesst sich seitwaerts wischen, dasselbe Prinzip wie beim Kopfbild. */
/* Der folgende Abschnitt hat dieselbe Farbe, die Schraege dazwischen ist
   deshalb unsichtbar. Beide vollen Abstaende addiert ergaben am Desktop
   254 px leere Flaeche zwischen Bildunterkante und naechster Ueberschrift,
   das las sich wie ein Loch. Hier reicht deutlich weniger, gemessen. */
.montage{padding-bottom:clamp(2.8rem,5.5vw,4.5rem)}
.montage .leitsatz{margin-top:1.1rem}
.montage-rahmen{position:relative;margin-top:clamp(2.2rem,5vw,3.6rem)}
.montage-schiene{overflow:hidden}
.montage-schiene img{display:block;width:100%;height:auto}

/* Die Ueberschrift kommt Wort fuer Wort an, von links nach rechts, in
   derselben Richtung, in der der Sprung im Bild ablaeuft. Die Woerter legt
   main.js in Spans. Ohne JS steht der Satz einfach da, deshalb haengt alles
   an der .js-Klasse. */
.js .montage-titel.auf{opacity:1;transform:none}
.js .montage-titel .w{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .5s ease,transform .62s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js .montage-titel.da .w{opacity:1;transform:none}
/* Die letzten beiden Woerter bleiben zusammen, sonst steht eines allein auf
   der letzten Zeile. Die allgemeine Regel in main.js greift hier nicht mehr,
   weil die Ueberschrift nur noch aus Elementen besteht.
   Der Name ist bewusst lang: ein blosses ".paar" gibt es im Projekt schon,
   das ist die Zwei-Spalten-Klasse mit display:grid, und die hat die beiden
   Woerter prompt untereinander gestellt. */
.montage-titel .montage-paar{white-space:nowrap}

.montage .wisch{display:none}

@media (max-width:760px){
  .montage-schiene{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .montage-schiene::-webkit-scrollbar{display:none}
  .montage-schiene img{width:190vw;max-width:none}
  .montage .wisch{
    display:block;margin:.9rem var(--rand) 0;
    font-weight:600;color:var(--signal);font-size:.9rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .js .montage-titel .w{opacity:1;transform:none;transition:none}
}

/* Sehr schmale Geraete (iPhone SE 1. Generation, 320 px). Dort ragt
   "Instagram" in der Dreierreihe 37 px ueber den Rand, gemessen am
   10.09.2026. Ab .84rem passt es, .8rem laesst Luft. */
@media(max-width:359px){
  .mobilmenu .menu-fuss{gap:.4rem}
  .mobilmenu .menu-fuss .menu-weg{font-size:.8rem;gap:.3rem;padding-left:.3rem;padding-right:.3rem}
  .mobilmenu .menu-fuss .menu-weg svg{width:14px;height:14px}
}