/* ==========================================================================
   Sky Guest House — The Ocean Breeze Residences
   Limbola, Limbe · Kamerun

   Die Farben kommen aus dem Haus und aus dem Logo, nicht aus einem
   Hotel-Baukasten: das Blau der Bildmarke, das warme Taupe der Wortmarke,
   das gebrochene Weiss der Fassade, und ein sehr dunkles Blaugruen fuer die
   Flaechen dazwischen - die Farbe, die der Atlantik nach Sonnenuntergang hat.

   Die Seite ist hell gehalten. Dunkel wird sie nur dort, wo ein Foto den
   ganzen Bildschirm einnimmt, im Fuss und im Startvorhang. Das haelt die
   Fotos vorne und die Gestaltung hinten.

   Aufbau dieser Datei:
     1 Werte          2 Grundlagen      3 Raster
     4 Kopfleiste     5 Startvorhang    6 Kopfbild
     7 Bausteine      8 Galerie         9 Formular
    10 Fusszeile     11 Leuchtkasten   12 Bewegung
    13 Social-Wand   14 Anfragestrecke  15 Lageplan
    16 Sides4you     17 Kleine Bewegungen
    18 Handy/Tablet  19 Menue          20 Brotkrumen
    21 Fehlerseite
   ========================================================================== */


/* ── 1 Werte ─────────────────────────────────────────────────────────── */

:root{
  /* Die Fassade: gebrochenes Weiss, warm, nie kalt */
  --sand:#F7F3EC;
  --sand-2:#EFE8DC;
  --sand-3:#E4DACB;
  --papier:#FFFDF9;

  /* Der Atlantik nach Sonnenuntergang */
  --tinte:#0E1A1F;
  --tinte-2:#16272E;
  --tinte-3:#1E343D;

  /* Schrift auf Hell */
  --text:#243036;
  --text-2:#5A666C;
  --text-3:#8A9298;

  /* Schrift auf Dunkel */
  --hell:#F7F3EC;
  --hell-2:rgba(247,243,236,.72);
  --hell-3:rgba(247,243,236,.46);

  /* Das Blau der Bildmarke */
  --himmel:#2DAAE1;
  --himmel-tief:#1A7CAC;   /* dunkel genug fuer Text auf Sand */
  --himmel-hell:#5EC2EE;

  /* Das Taupe der Wortmarke */
  --taupe:#8B7B71;
  --taupe-2:#6D5F57;
  --taupe-hell:#C6BAB1;

  /* Linien */
  --linie:rgba(36,48,54,.13);
  --linie-2:rgba(36,48,54,.24);
  --linie-hell:rgba(247,243,236,.18);
  --linie-hell-2:rgba(247,243,236,.34);

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --grotesk:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  --breit:1320px;
  --mittel:960px;
  --schmal:760px;
  --rand:clamp(1.25rem,5vw,4.5rem);

  --radius:2px;          /* fast eckig - Rundungen wirken schnell billig */
  --radius-gross:4px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-aus:cubic-bezier(.16,1,.3,1);
  --ease-rein:cubic-bezier(.7,0,.84,0);

  --dauer:.72s;
  --dauer-kurz:.34s;

  --kopf-hoehe:76px;
}

@media (max-width:900px){ :root{ --kopf-hoehe:62px; } }


/* ── 2 Grundlagen ────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-hoehe) + 20px);
}

body{
  font-family:var(--grotesk);
  font-size:clamp(16px,.32vw + 15.1px,17.5px);
  line-height:1.68;
  font-weight:400;
  color:var(--text-2);
  background:var(--sand);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}

img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* Muss ganz oben stehen und muss gewinnen: mehrere Bausteine setzen
   display:flex oder :grid und wuerden das hidden-Attribut sonst
   ueberstimmen - die Fehlermeldung im Formular stand dadurch von Anfang
   an sichtbar auf der Seite. */
[hidden]{display:none !important}

:focus-visible{
  outline:2px solid var(--himmel);
  outline-offset:3px;
  border-radius:var(--radius);
}

::selection{background:var(--himmel);color:#fff}

.sprung{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:.7rem 1.1rem;background:var(--tinte);color:var(--hell);
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.sprung:focus{transform:none}


/* Typografie ─────────────────────────────────────────────────────────── */

.gross{
  font-family:var(--display);
  font-weight:400;
  color:var(--text);
  line-height:1.02;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1.gross{font-size:clamp(2.9rem,7.4vw,6.4rem)}
h2.gross{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{
  font-family:var(--display);font-weight:400;color:var(--text);
  font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.14;letter-spacing:-.012em;
}

.kicker{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.85rem;
}
.kicker::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none;
}



.vorspann{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--text-2);
  max-width:52ch;
  margin-top:1.6rem;
}

.fliess p + p{margin-top:1.1rem}
.klein{font-size:.85rem;line-height:1.6}
.leise{color:var(--text-3)}


/* Knoepfe ────────────────────────────────────────────────────────────── */

.knopf{
  --k-farbe:var(--tinte);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.7rem;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--radius);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .38s var(--ease),border-color .38s var(--ease);
  white-space:nowrap;
}
.knopf svg{width:15px;height:15px;flex:none;transition:transform .42s var(--ease-aus)}
.knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--k-farbe);
  transform:translateY(0);
  transition:transform .48s var(--ease-aus);
}
.knopf:hover svg{transform:translateX(5px)}

.knopf--voll{color:var(--sand)}
.knopf--voll:hover{color:var(--sand)}
.knopf--voll::before{background:var(--tinte)}
.knopf--voll:hover::before{background:var(--himmel-tief)}

.knopf--linie{color:var(--text);border:1px solid var(--linie-2)}
.knopf--linie::before{background:var(--tinte);transform:translateY(101%)}
.knopf--linie:hover{color:var(--sand);border-color:var(--tinte)}
.knopf--linie:hover::before{transform:translateY(0)}

.knopf--hell{color:var(--tinte);background:var(--sand)}
.knopf--hell::before{background:var(--sand)}
.knopf--hell:hover::before{background:var(--himmel)}
.knopf--hell:hover{color:#fff}

.knopf--nackt{
  color:var(--text-2);padding:.9rem 0;text-transform:none;letter-spacing:.01em;
  font-weight:400;font-size:.92rem;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--linie-2);
}
.knopf--nackt:hover{color:var(--himmel-tief);text-decoration-color:currentColor}
.knopf--nackt::before{display:none}

.knopf--klein{padding:.72rem 1.15rem;font-size:.7rem;letter-spacing:.12em}
.knopf--gross{padding:1.2rem 2.1rem}


/* Korn und Fortschritt ───────────────────────────────────────────────── */

.koernung{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:url("../img/koernung.png");
  background-size:120px 120px;
  opacity:.028;mix-blend-mode:multiply;
}

.fortschritt{
  position:fixed;top:0;left:0;height:2px;z-index:120;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--himmel),var(--himmel-hell));
  pointer-events:none;
}


/* ── 3 Raster ────────────────────────────────────────────────────────── */

.band{
  width:100%;max-width:var(--breit);
  margin-inline:auto;padding-inline:var(--rand);
}
.band--mittel{max-width:var(--mittel)}
.band--schmal{max-width:var(--schmal)}

.abschnitt{padding-block:clamp(4.5rem,10vw,9rem)}
.abschnitt + .abschnitt{padding-top:0}

.abschnitt-kopf{max-width:44ch;margin-bottom:clamp(2.6rem,5vw,4.5rem)}
.abschnitt-kopf--reihe{
  max-width:none;display:flex;justify-content:space-between;
  align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.abschnitt-kopf--reihe > div:first-child{max-width:44ch}


/* Bildrahmen ─────────────────────────────────────────────────────────── */

.rahmen{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:var(--seiten,1.5);
  background:var(--platz,#2a2a2a);
}
.rahmen-zug{position:absolute;inset:0;will-change:transform}
.rahmen img{width:100%;height:100%;object-fit:cover}
.bildhuelle{width:100%;height:100%}


/* ── 4 Kopfleiste ────────────────────────────────────────────────────── */

.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--kopf-hoehe);
  transition:transform .5s var(--ease),background-color .4s var(--ease),
             border-color .4s var(--ease);
  border-bottom:1px solid transparent;
  isolation:isolate;
}
/* Solange die Leiste ueber dem Kopfbild schwebt, liegt ein zarter Verlauf
   darunter. Ohne ihn verschwindet die Navigation, sobald ein Foto oben
   hell ist - und die Fassade auf diesen Bildern ist strahlend weiss. */
.kopfleiste::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(9,17,21,.62),rgba(9,17,21,.16) 68%,transparent);
  transition:opacity .4s var(--ease);
}
.kopfleiste.ist-fest::after{opacity:0}
.kopfleiste-innen{
  height:100%;max-width:var(--breit);margin-inline:auto;
  padding-inline:var(--rand);
  display:flex;align-items:center;gap:2rem;
  position:relative;
}

/* Ueber dem Kopfbild durchsichtig, danach fest. */
.kopfleiste.ist-fest{
  background:rgba(247,243,236,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--linie);
}
.kopfleiste.ist-weg{transform:translateY(-101%)}

.marke{display:flex;align-items:center;gap:.8rem;flex:none}
.logo{width:auto;flex:none}
.logo--leiste{height:34px}
.lg-dach{fill:var(--l-dach,#D8CEC7)}
.lg-haus{fill:var(--l-haus,#8B7B71)}
.lg-meer{fill:var(--l-meer,#2DAAE1)}

.marke-text{display:flex;flex-direction:column;line-height:1.1}
.marke-text b{
  font-family:var(--display);font-weight:400;font-size:1.16rem;
  letter-spacing:.004em;color:var(--text);
}
.marke-text i{
  font-style:normal;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);margin-top:.16rem;
}

/* Heller Zustand: ueber dem Kopfbild und ueber dem offenen Menue. */
.kopfleiste:not(.ist-fest) .logo--leiste,
.menue-offen .kopfleiste .logo--leiste{--l-dach:#E8E1DC;--l-haus:#C6BAB1;--l-meer:#2DAAE1}
.kopfleiste:not(.ist-fest) .marke-text b,
.menue-offen .kopfleiste .marke-text b{color:var(--hell)}
.kopfleiste:not(.ist-fest) .marke-text i,
.menue-offen .kopfleiste .marke-text i{color:var(--taupe-hell)}
.kopfleiste:not(.ist-fest) .haupt-nav li > a{color:var(--hell-2)}
.kopfleiste:not(.ist-fest) .haupt-nav li:hover > a,
.kopfleiste:not(.ist-fest) .haupt-nav li.ist-da > a{color:var(--hell)}
.kopfleiste:not(.ist-fest) .sprache,
.menue-offen .kopfleiste .sprache{color:var(--hell-3)}
.kopfleiste:not(.ist-fest) .sprache:hover,
.kopfleiste:not(.ist-fest) .sprache.ist-da,
.menue-offen .kopfleiste .sprache:hover,
.menue-offen .kopfleiste .sprache.ist-da{color:var(--hell)}
.kopfleiste:not(.ist-fest) .menue-knopf i,
.menue-offen .kopfleiste .menue-knopf i{background:var(--hell)}
.kopfleiste:not(.ist-fest) .kopf-anfrage,
.menue-offen .kopfleiste .kopf-anfrage{color:var(--tinte)}
.kopfleiste:not(.ist-fest) .kopf-anfrage::before,
.menue-offen .kopfleiste .kopf-anfrage::before{background:var(--sand)}
.kopfleiste:not(.ist-fest) .kopf-anfrage:hover,
.menue-offen .kopfleiste .kopf-anfrage:hover{color:#fff}
.kopfleiste:not(.ist-fest) .kopf-anfrage:hover::before,
.menue-offen .kopfleiste .kopf-anfrage:hover::before{background:var(--himmel)}
/* Bei offenem Menue liegt die Leiste auf der dunklen Flaeche - dann darf
   sie keinen eigenen hellen Grund mehr haben. */
.menue-offen .kopfleiste{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
.menue-offen .kopfleiste::after{opacity:0}

.haupt-nav{margin-left:auto}
.haupt-nav ul{display:flex;align-items:center;gap:.3rem}
.haupt-nav li{position:relative}
.haupt-nav li > a{
  display:block;padding:.55rem .78rem;
  font-size:.795rem;font-weight:500;letter-spacing:.008em;color:var(--text-2);
  transition:color .28s var(--ease);
}
.haupt-nav li > a::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s var(--ease-aus);
}
.haupt-nav li:hover > a,
.haupt-nav li.ist-da > a{color:var(--text)}
.haupt-nav li:hover > a::after,
.haupt-nav li.ist-da > a::after{transform:scaleX(1)}

.unterliste{
  position:absolute;top:100%;left:0;min-width:230px;
  background:var(--papier);border:1px solid var(--linie);
  padding:.5rem;border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(14,26,31,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.hat-kinder:hover .unterliste,
.hat-kinder:focus-within .unterliste{opacity:1;visibility:visible;transform:none}
.unterliste a{
  display:block;padding:.62rem .8rem;font-size:.83rem;color:var(--text-2);
  border-radius:var(--radius);transition:background-color .2s,color .2s;
}
.unterliste a:hover,.unterliste a.ist-da{background:var(--sand-2);color:var(--text)}

.kopfleiste-rechts{display:flex;align-items:center;gap:1.1rem;flex:none;margin-left:auto}
.haupt-nav + .kopfleiste-rechts{margin-left:0}

.sprachwahl{display:flex;align-items:center;gap:.1rem}
.sprache{
  padding:.34rem .48rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  color:var(--text-3);transition:color .24s var(--ease);
}
.sprache:hover{color:var(--text)}
.sprache.ist-da{color:var(--text);text-decoration:underline;text-underline-offset:4px}

.menue-knopf{
  display:none;width:40px;height:40px;position:relative;margin-right:-8px;
}
.menue-knopf i{
  position:absolute;left:9px;width:22px;height:1.5px;background:var(--text);
  transition:transform .42s var(--ease-aus),opacity .2s;
}
.menue-knopf i:first-child{top:17px}
.menue-knopf i:last-child{top:23px}
.menue-offen .menue-knopf i:first-child{transform:translateY(3px) rotate(45deg)}
.menue-offen .menue-knopf i:last-child{transform:translateY(-3px) rotate(-45deg)}


/* Vollbild-Menue ─────────────────────────────────────────────────────── */

.menue-voll{
  position:fixed;inset:0;z-index:99;background:var(--tinte);
  display:flex;align-items:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .78s var(--ease-aus);
}
.menue-voll[hidden]{display:none}
.menue-offen .menue-voll{clip-path:inset(0 0 0 0)}
.menue-innen{
  width:100%;max-width:var(--breit);margin-inline:auto;
  padding:calc(var(--kopf-hoehe) + 3rem) var(--rand) 3rem;
  max-height:100dvh;overflow-y:auto;
}
.menue-punkt{
  display:flex;align-items:baseline;gap:1rem;width:100%;
  font-family:var(--display);font-size:clamp(2rem,7.5vw,3.4rem);
  line-height:1.16;color:var(--hell);text-align:left;
  padding:.14em 0;
  opacity:0;transform:translateY(28px);
}
.menue-offen .menue-punkt{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-aus),transform .6s var(--ease-aus);
}
.menue-liste li:nth-child(1) > .menue-punkt{transition-delay:.16s}
.menue-liste li:nth-child(2) > .menue-punkt{transition-delay:.22s}
.menue-liste li:nth-child(3) > .menue-punkt{transition-delay:.28s}
.menue-liste li:nth-child(4) > .menue-punkt{transition-delay:.34s}
.menue-liste li:nth-child(5) > .menue-punkt{transition-delay:.40s}
.menue-liste li:nth-child(6) > .menue-punkt{transition-delay:.46s}
.menue-liste li:nth-child(7) > .menue-punkt{transition-delay:.52s}
.menue-liste li.ist-da > .menue-punkt{color:var(--himmel-hell)}

.menue-fuss{
  margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--linie-hell);
  display:flex;justify-content:space-between;align-items:center;
  gap:1.4rem;flex-wrap:wrap;
}
.sprachwahl--gross .sprache{font-size:.82rem;color:var(--hell-3);padding:.4rem .6rem}
.sprachwahl--gross .sprache:hover,
.sprachwahl--gross .sprache.ist-da{color:var(--hell)}
.menue-tel{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--hell);
  font-size:.95rem;
}
.menue-tel svg{width:17px;height:17px}

@media (max-width:1120px){
  .haupt-nav{display:none}
  .menue-knopf{display:block}
}
@media (max-width:560px){
  .kopf-anfrage{display:none}
  .marke-text i{display:none}
}


/* ── 5 Startvorhang ──────────────────────────────────────────────────── */

.vorhang-laeuft{overflow:hidden}

.vorhang{
  position:fixed;inset:0;z-index:150;
  background:var(--tinte);
  display:grid;place-items:center;
  animation:vorhang-hoch .9s var(--ease-rein) 2.05s forwards;
}
.vorhang::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 46%,rgba(45,170,225,.16),transparent 62%);
  opacity:0;animation:schein 1.5s var(--ease) .35s forwards;
}
@keyframes schein{40%{opacity:1}100%{opacity:0}}
@keyframes vorhang-hoch{to{transform:translateY(-101%)}}

.vorhang-marke{display:grid;place-items:center;gap:1.9rem;position:relative}
.logo--vorhang{
  height:clamp(92px,17vw,150px);
  --l-dach:#E8E1DC;--l-haus:#B9ADA5;--l-meer:#2DAAE1;
}
.logo--vorhang path{
  opacity:0;
  transform:translateY(18%);
  transform-box:fill-box;transform-origin:50% 50%;
  animation:marke-rein .82s var(--ease-aus) forwards;
}
.logo--vorhang .lg-dach{animation-delay:.10s}
.logo--vorhang .lg-haus{animation-delay:.24s}
.logo--vorhang .lg-meer{animation-delay:.38s}
@keyframes marke-rein{to{opacity:1;transform:translateY(0)}}

.vorhang-schrift{
  display:flex;align-items:center;
  font-size:clamp(.62rem,1.5vw,.8rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--hell-2);font-weight:500;
}
.vorhang-schrift i{width:.9em;flex:none}
.vorhang-schrift span{
  opacity:0;transform:translateY(9px);
  animation:buchstabe .5s var(--ease-aus) forwards;
}
.vorhang-schrift span:nth-child(1){animation-delay:.62s}
.vorhang-schrift span:nth-child(2){animation-delay:.66s}
.vorhang-schrift span:nth-child(3){animation-delay:.70s}
.vorhang-schrift span:nth-child(5){animation-delay:.76s}
.vorhang-schrift span:nth-child(6){animation-delay:.80s}
.vorhang-schrift span:nth-child(7){animation-delay:.84s}
.vorhang-schrift span:nth-child(8){animation-delay:.88s}
.vorhang-schrift span:nth-child(9){animation-delay:.92s}
.vorhang-schrift span:nth-child(11){animation-delay:.98s}
.vorhang-schrift span:nth-child(12){animation-delay:1.02s}
.vorhang-schrift span:nth-child(13){animation-delay:1.06s}
.vorhang-schrift span:nth-child(14){animation-delay:1.10s}
.vorhang-schrift span:nth-child(15){animation-delay:1.14s}
@keyframes buchstabe{to{opacity:1;transform:none}}


/* ── 6 Kopfbild ──────────────────────────────────────────────────────── */

.kopf{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding-block:calc(var(--kopf-hoehe) + 3rem) clamp(3.4rem,7vw,6rem);
  overflow:hidden;
  isolation:isolate;
  background:var(--tinte);
}
.kopf--klein{min-height:clamp(430px,66svh,660px)}

.kopf-bild{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.kopf-bild picture,.kopf-bild img{width:100%;height:100%}
.kopf-bild img{
  object-fit:cover;
  animation:kopf-zoom 2.4s var(--ease-aus) forwards;
}
@keyframes kopf-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

.kopf-schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(9,17,21,.92) 0%,rgba(9,17,21,.72) 26%,
                    rgba(9,17,21,.34) 52%,rgba(9,17,21,.12) 74%,
                    rgba(9,17,21,.46) 100%),
    linear-gradient(100deg,rgba(9,17,21,.68) 0%,rgba(9,17,21,.26) 46%,transparent 74%);
}

.kopf-inhalt{position:relative;width:100%}
/* Ein weicher Schatten unter dem Text. Der Verlauf allein reicht nicht,
   wenn unter der Ueberschrift zufaellig eine weiss gestrichene Wand liegt. */
.kopf .kicker{color:var(--himmel-hell);text-shadow:0 1px 14px rgba(9,17,21,.8)}
.kopf .gross,.kopf-text{text-shadow:0 2px 26px rgba(9,17,21,.4)}
.kopf .gross{color:var(--hell);max-width:15ch}
.kopf--klein .gross{max-width:18ch}
.kopf-text{
  color:var(--hell-2);max-width:46ch;margin-top:1.7rem;
  font-size:clamp(1rem,1.3vw,1.16rem);
}
.kopf-tasten{display:flex;gap:.9rem;margin-top:2.4rem;flex-wrap:wrap}
.kopf-tasten .knopf--voll{color:var(--tinte)}
.kopf-tasten .knopf--voll::before{background:var(--sand)}
.kopf-tasten .knopf--voll:hover{color:#fff}
.kopf-tasten .knopf--voll:hover::before{background:var(--himmel)}
.kopf-tasten .knopf--linie{color:var(--hell);border-color:var(--linie-hell-2)}
.kopf-tasten .knopf--linie::before{background:var(--sand)}
.kopf-tasten .knopf--linie:hover{color:var(--tinte);border-color:var(--sand)}

.kopf-hinweis{
  position:absolute;bottom:1.7rem;right:var(--rand);
  display:flex;align-items:center;gap:.8rem;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hell-3);
}
.kopf-hinweis i{
  width:1px;height:52px;background:var(--linie-hell-2);
  position:relative;overflow:hidden;
}
.kopf-hinweis i::after{
  content:"";position:absolute;inset:0;background:var(--himmel-hell);
  animation:scroll-strich 2.1s var(--ease) infinite;
}
@keyframes scroll-strich{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}
@media (max-width:700px){.kopf-hinweis{display:none}}


/* ── 7 Bausteine ─────────────────────────────────────────────────────── */

/* Aussage */
.aussage{text-align:center}
.aussage .kicker{justify-content:center}
.aussage-text{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,3.5vw,2.7rem);
  line-height:1.24;letter-spacing:-.014em;color:var(--text);
  text-wrap:balance;
}
.aussage-text .wort{
  display:inline-block;
  opacity:.16;
  transition:opacity .5s var(--ease);
}
.aussage-text.ist-da .wort{opacity:1}

/* Zahlen */
.zahlen ul{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2rem 1.6rem;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding-block:clamp(2rem,4vw,3.2rem);
}
.zahlen li{display:flex;flex-direction:column;gap:.65rem}
.zahl{
  font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.6rem);
  line-height:1;color:var(--text);letter-spacing:-.02em;
}
.zahl > span{font-variant-numeric:tabular-nums}
.zahl i{font-style:normal;font-size:.56em;letter-spacing:.02em;margin-left:.06em}
.zahl-text{
  font-size:.82rem;color:var(--text-3);line-height:1.45;max-width:22ch;
}
@media (max-width:760px){
  .zahlen ul{grid-template-columns:repeat(2,1fr)}
}

/* Wechsel: Text und Bild */
.wechsel-gitter{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.4rem,5vw,5.5rem);align-items:center;
}
.wechsel--links .wechsel-text{order:2}
.wechsel--links .wechsel-bild{order:1}
/* Die Ueberschrift braucht Luft nach unten - ohne diesen Abstand klebt
   der erste Absatz direkt an der Unterlaenge der letzten Zeile. */
.wechsel-text .fliess{margin-top:1.75rem}
.wechsel .haken{margin-top:2rem;display:grid;gap:.75rem}
.haken li{
  display:flex;align-items:flex-start;gap:.72rem;
  font-size:.93rem;color:var(--text-2);
}
.haken svg{
  width:15px;height:15px;flex:none;margin-top:.32em;color:var(--himmel-tief);
}
.wechsel .knopf{margin-top:2.2rem}
@media (max-width:900px){
  .wechsel-gitter{grid-template-columns:1fr}
  .wechsel--links .wechsel-text,.wechsel--links .wechsel-bild{order:initial}
}

/* Sticky-Folge */
.folge-gitter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.folge-buehne{
  position:sticky;top:calc(var(--kopf-hoehe) + 4vh);
  height:min(74vh,660px);
}
.folge-halter{position:relative;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;background:var(--tinte-2)}
.folge-bild{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.06);
  transition:opacity .85s var(--ease),transform 1.3s var(--ease-aus);
}
.folge-bild.ist-da{opacity:1;transform:scale(1)}
.folge-bild picture,.folge-bild img{width:100%;height:100%}
.folge-bild img{object-fit:cover}

.folge-spalte{display:grid}
.folge-schritt{
  min-height:64vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:2rem;
  opacity:.36;transition:opacity .55s var(--ease);
}
.folge-schritt.ist-da{opacity:1}
.folge-nummer{
  font-family:var(--display);font-size:.95rem;color:var(--himmel-tief);
  letter-spacing:.1em;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.8rem;
}
.folge-nummer::after{content:"";height:1px;flex:1;background:var(--linie);max-width:60px}
.folge-schritt h3{margin-bottom:.9rem}
.folge-klein{display:none;margin-top:1.6rem;border-radius:var(--radius);overflow:hidden}
@media (max-width:900px){
  .folge-gitter{grid-template-columns:1fr}
  .folge-buehne{display:none}
  .folge-schritt{min-height:0;opacity:1;padding-block:1.6rem}
  .folge-schritt + .folge-schritt{border-top:1px solid var(--linie);padding-top:2.6rem}
  .folge-klein{display:block}
}

/* Karten */
.karten-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)}
.karten--gross .karten-gitter{grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4rem)}
.karte{position:relative;display:flex;flex-direction:column}
.karten--gross .karte{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
}
.karten--gross .karte:nth-child(even) > .rahmen{order:2}
/* Im Dreier-Raster bekommen alle Bilder dasselbe Format. Mit den
   Originalseitenverhaeltnissen (16:9, 3:2, 4:3 durcheinander) stehen die
   Ueberschriften darunter auf drei verschiedenen Hoehen - das sieht nach
   Versehen aus, nicht nach Gestaltung. */
.karten:not(.karten--gross) .rahmen{aspect-ratio:4/3}
.streifen .rahmen{aspect-ratio:4/3}
.rahmen--karte{margin-bottom:1.5rem}
.karten--gross .rahmen--karte{margin-bottom:0}
.karte-unter{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:.7rem;
}
.karte-text h3{margin-bottom:.7rem}
.karte-text p{font-size:.95rem}
.karte-punkte{
  margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.45rem;
}
.karte-punkte li{
  font-size:.72rem;letter-spacing:.05em;color:var(--text-2);
  border:1px solid var(--linie);padding:.34rem .7rem;border-radius:100px;
}
.karte .knopf{margin-top:1.6rem;align-self:flex-start}
.karte-flaeche{position:absolute;inset:0;z-index:1}
.karte:hover .rahmen-zug,
.karte:focus-within .rahmen-zug{transform:scale(1.045)}
.rahmen-zug{transition:transform 1.1s var(--ease-aus)}
@media (max-width:1000px){
  .karten-gitter{grid-template-columns:1fr;gap:2.8rem}
  .karten--gross .karte{grid-template-columns:1fr}
  .karten--gross .karte:nth-child(even) > .rahmen{order:initial}
}

/* Volles Bild */
.voll{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(84svh,760px);
  display:flex;align-items:center;
  padding-block:clamp(5rem,11vw,9rem);
  background:var(--platz,var(--tinte));
  margin-block:clamp(4.5rem,10vw,9rem);
}
.abschnitt + .voll{margin-top:0}
.voll-bild{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.voll-bild picture,.voll-bild img{width:100%;height:100%}
.voll-bild img{object-fit:cover}
.voll-schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(9,17,21,.86) 0%,rgba(9,17,21,.58) 42%,
                    rgba(9,17,21,.16) 82%,transparent 100%),
    linear-gradient(to top,rgba(9,17,21,.34),transparent 46%);
}
.voll-inhalt{position:relative;margin-inline:0;padding-left:var(--rand)}
.voll .kicker{color:var(--himmel-hell);text-shadow:0 1px 14px rgba(9,17,21,.8)}
.voll .gross,.voll-inhalt p{text-shadow:0 2px 26px rgba(9,17,21,.4)}
.voll .gross{color:var(--hell);max-width:16ch}
.voll-inhalt p{color:var(--hell-2);margin-top:1.75rem;max-width:48ch}
.voll .knopf{margin-top:2.2rem}
@media (min-width:1400px){
  .voll-inhalt{margin-inline:auto;padding-left:var(--rand);max-width:var(--breit)}
  .voll-inhalt > *{max-width:var(--schmal)}
}

/* Merkmale */
.merkmale-gitter{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(2rem,3.4vw,3rem);
}
.merkmale--gross .merkmale-gitter{grid-template-columns:repeat(3,1fr)}
.merkmal{display:flex;flex-direction:column}
.merkmal-symbol{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--linie);border-radius:50%;
  color:var(--himmel-tief);margin-bottom:1.4rem;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease);
}
.merkmal-symbol svg{width:20px;height:20px}
.merkmal:hover .merkmal-symbol{
  background:var(--tinte);border-color:var(--tinte);color:var(--himmel-hell);
}
.merkmal h3{font-size:1.16rem;margin-bottom:.55rem}
.merkmal p{font-size:.91rem}
@media (max-width:1000px){
  .merkmale-gitter,.merkmale--gross .merkmale-gitter{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .merkmale-gitter,.merkmale--gross .merkmale-gitter{grid-template-columns:1fr}
}

/* Laufband
   Frueher ein dunkler Balken mit grosser Serifenschrift quer durch die
   Seite - das hat den Lesefluss zerschnitten und wie eine Leuchtschrift
   gewirkt. Jetzt eine schmale Leiste in Sandton, kleine Versalien mit
   viel Laufweite, an beiden Raendern weich ausgeblendet. Beim
   Ueberfahren haelt sie an, damit man lesen kann, was vorbeizieht. */
.laufband{
  overflow:hidden;
  background:var(--sand-2);
  border-block:1px solid var(--linie);
  padding-block:1.15rem;
  --lauf:52s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.laufband-spur{display:flex;width:max-content;animation:laufen var(--lauf) linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband-satz{display:flex;align-items:center;flex:none}
.laufband-satz span{
  font-size:.76rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-2);
  padding-inline:1.5rem;white-space:nowrap;
}
.laufband-satz i{
  width:4px;height:4px;border-radius:50%;background:var(--himmel);flex:none;opacity:.8;
}
@keyframes laufen{to{transform:translateX(-50%)}}

/* Bildstreifen */
.streifen-spur{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.8vw,1.5rem);
}
.streifen-stueck{display:block;width:100%;text-align:left;cursor:zoom-in;position:relative}
.streifen-stueck:hover .rahmen-zug{transform:scale(1.05)}
@media (max-width:820px){
  .streifen-spur{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);
    scrollbar-width:none;
  }
  .streifen-spur::-webkit-scrollbar{display:none}
  .streifen-stueck{flex:0 0 74%;scroll-snap-align:start}
}

/* Filme */
.filme-gitter{display:flex;gap:clamp(1.2rem,2.6vw,2.2rem);flex-wrap:wrap}
.film{flex:1 1 260px;max-width:340px}
.film-rahmen{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-gross);background:var(--tinte-2);
}
.film-rahmen video{width:100%;height:100%;object-fit:cover}
.film-knopf{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(14,26,31,.5),rgba(14,26,31,.12));
  color:#fff;transition:opacity .4s var(--ease);
}
.film-knopf svg{
  width:22px;height:22px;
  padding:0;
  transform:translateX(1px);
}
.film-knopf::before{
  content:"";position:absolute;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(14,26,31,.22);
  backdrop-filter:blur(3px);
  transition:transform .45s var(--ease-aus),background-color .3s;
}
.film-knopf svg{position:relative}
.film-knopf:hover::before{transform:scale(1.1);background:rgba(45,170,225,.5)}
.film.laeuft .film-knopf{opacity:0;pointer-events:none}
.film figcaption{
  margin-top:.9rem;font-size:.8rem;letter-spacing:.06em;color:var(--text-3);
}

/* Mietwagen */
.wagen-gitter{display:grid;gap:0;border-top:1px solid var(--linie)}
.wagen{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:1.4rem;
  padding-block:1.6rem;border-bottom:1px solid var(--linie);
}
.wagen-symbol{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--linie);border-radius:50%;color:var(--taupe);
}
.wagen-symbol svg{width:19px;height:19px}
.wagen-text h3{font-size:1.16rem}
.wagen-text p{font-size:.8rem;color:var(--text-3);margin-top:.16rem}
.wagen-preis{text-align:right;line-height:1.2}
.wagen-preis b{
  font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--text);
  display:block;font-variant-numeric:tabular-nums;
}
.wagen-preis em{
  font-style:normal;font-family:var(--grotesk);font-size:.6rem;font-weight:600;
  letter-spacing:.12em;color:var(--taupe);margin-left:.4em;vertical-align:.32em;
}
.wagen-preis span{
  display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-top:.1rem;
}
.wagen-preis i{
  display:block;font-style:normal;font-size:.78rem;color:var(--text-3);
  margin-top:.35rem;font-variant-numeric:tabular-nums;
}
.wagen-liste .klein{margin-top:1.4rem}

/* Tabelle */
.tabelle-rolle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelle{min-width:620px;font-size:.9rem}
.tabelle th,.tabelle td{
  padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--linie);
}
.tabelle thead th{
  font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--text);
  border-bottom-color:var(--linie-2);
}
.tabelle tbody th{font-weight:500;color:var(--text-2);font-size:.82rem;letter-spacing:.04em}
.tabelle tbody td{color:var(--text)}
.tabelle tbody tr:hover td,.tabelle tbody tr:hover th{background:var(--sand-2)}
.tabelle td:nth-child(2){background:rgba(45,170,225,.05)}

/* Fragen */
.fragen-liste{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.35rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(1.08rem,1.7vw,1.32rem);
  color:var(--text);line-height:1.3;
  transition:color .28s var(--ease);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--himmel-tief)}
.frage summary svg{
  width:17px;height:17px;flex:none;color:var(--taupe);
  transition:transform .4s var(--ease-aus);
}
.frage[open] summary svg{transform:rotate(135deg)}
.frage-text{padding-bottom:1.5rem;max-width:66ch}
.frage-text p{font-size:.95rem}

/* Lageplan */
.lageplan-gitter{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.4rem,5vw,5rem);align-items:center;
}
.entfernungen{margin-top:2.2rem;border-top:1px solid var(--linie)}
.entfernungen li{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding-block:.9rem;border-bottom:1px solid var(--linie);
}
.entfernungen b{font-weight:500;color:var(--text);font-size:.93rem}
.entfernungen span{font-size:.84rem;color:var(--text-3);text-align:right;flex:none}
.lageplan-bild{background:var(--sand-2);border-radius:var(--radius);overflow:hidden}
.plan{width:100%;height:auto}
.plan-land{fill:#E7DECF}
.plan-berg{fill:#DCD0BE}
.plan-strasse{fill:none;stroke:#C9BCA6;stroke-width:3.5;stroke-linecap:round}
.plan-strasse--klein{stroke-width:2;stroke-dasharray:6 7}
.plan-punkt{fill:var(--himmel-tief)}
.plan-punkt-hof{
  fill:var(--himmel);opacity:.2;
  transform-box:fill-box;transform-origin:center;
  animation:puls 3.2s var(--ease) infinite;
}
@keyframes puls{
  0%,100%{transform:scale(.55);opacity:.3}
  50%{transform:scale(1);opacity:.06}
}
.plan-schrift{
  font-family:var(--grotesk);font-size:13px;fill:var(--text-3);
  text-anchor:middle;letter-spacing:.08em;text-transform:uppercase;
}
.plan-schrift--marke{
  fill:var(--text);font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:none;font-family:var(--display);
}
.plan-schrift--see{fill:var(--himmel-tief);opacity:.7}
@media (max-width:900px){
  .lageplan-gitter{grid-template-columns:1fr}
}

/* Abschluss */
.abschluss{
  background:var(--tinte);color:var(--hell);
  padding-block:clamp(5rem,11vw,9rem);
  text-align:center;position:relative;overflow:hidden;
}
.abschluss::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 50% 118%,rgba(45,170,225,.22),transparent 62%);
}
.abschluss > *{position:relative}
.abschluss .kicker{color:var(--himmel-hell);justify-content:center}
.abschluss .gross{color:var(--hell);margin-inline:auto}
.abschluss p{color:var(--hell-2);margin-top:1.4rem;max-width:52ch;margin-inline:auto}
.abschluss-tasten{
  display:flex;gap:.9rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap;
}
.abschluss-tasten .knopf--voll{color:var(--tinte)}
.abschluss-tasten .knopf--voll::before{background:var(--sand)}
.abschluss-tasten .knopf--voll:hover{color:#fff}
.abschluss-tasten .knopf--voll:hover::before{background:var(--himmel)}
.abschluss-tasten .knopf--linie{color:var(--hell);border-color:var(--linie-hell-2)}
.abschluss-tasten .knopf--linie::before{background:var(--sand)}
.abschluss-tasten .knopf--linie:hover{color:var(--tinte);border-color:var(--sand)}

/* Rechtstexte */
.rechtskopf{
  padding-top:calc(var(--kopf-hoehe) + clamp(4rem,9vw,7rem));
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--linie);
}
.recht section + section{margin-top:2.8rem}
.recht h2{
  font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--text);
  margin-bottom:.8rem;
}
.recht p{max-width:70ch}
.recht p + p{margin-top:.9rem}
.recht a{color:var(--himmel-tief);text-decoration:underline;text-underline-offset:3px}
.luecken{margin-top:1rem;display:grid;gap:.75rem}
.luecken li{display:flex;align-items:baseline;gap:.9rem;font-size:.9rem;color:var(--text-3)}
.luecke{
  flex:none;width:170px;height:1px;
  background:repeating-linear-gradient(90deg,var(--linie-2) 0 6px,transparent 6px 11px);
}


/* ── 8 Galerie ───────────────────────────────────────────────────────── */

.filterleiste{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  padding-bottom:1.4rem;border-bottom:1px solid var(--linie);
}
.filter{
  padding:.5rem .95rem;font-size:.75rem;font-weight:500;letter-spacing:.08em;
  color:var(--text-3);border:1px solid transparent;border-radius:100px;
  transition:color .26s,border-color .26s,background-color .26s;
}
.filter:hover{color:var(--text)}
.filter.ist-da{color:var(--text);border-color:var(--linie-2);background:var(--papier)}

.raster{columns:3;column-gap:clamp(.9rem,1.6vw,1.4rem)}
.raster-stueck{
  display:block;width:100%;text-align:left;cursor:zoom-in;position:relative;
  break-inside:avoid;margin-bottom:clamp(.9rem,1.6vw,1.4rem);
}
.raster-stueck[hidden]{display:none}
.raster-lupe{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(14,26,31,.32);color:#fff;
  opacity:0;transition:opacity .38s var(--ease);
}
.raster-lupe svg{width:24px;height:24px}
.raster-stueck:hover .raster-lupe,
.raster-stueck:focus-visible .raster-lupe{opacity:1}
.raster-stueck:hover .rahmen-zug{transform:scale(1.05)}
@media (max-width:1000px){.raster{columns:2}}
@media (max-width:600px){.raster{columns:1}}


/* ── 9 Formular ──────────────────────────────────────────────────────── */

.anfrage-formular{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1.3rem 1.2rem;
  background:var(--papier);
  border:1px solid var(--linie);
  padding:clamp(1.6rem,3.6vw,3rem);
  border-radius:var(--radius-gross);
}
.feld{grid-column:span 6;display:flex;flex-direction:column;gap:.5rem}
.feld--halb{grid-column:span 3}
.feld--drittel{grid-column:span 2}
.feld label{
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);
}
.feld label b{color:var(--himmel-tief);margin-left:.2em}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.85rem .95rem;
  background:var(--sand);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  font-size:.95rem;color:var(--text);
  transition:border-color .26s var(--ease),background-color .26s var(--ease);
}
.feld textarea{resize:vertical;min-height:110px;font-family:inherit}
.feld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.6rem;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--himmel);background:var(--papier);
}
.feld.hat-fehler input{border-color:#C2503C}
.feld-fehler{
  grid-column:span 6;color:#C2503C;font-size:.85rem;
  display:flex;align-items:center;gap:.5rem;
}
.anfrage-fuss{
  grid-column:span 6;display:flex;align-items:center;gap:1.6rem;
  flex-wrap:wrap;margin-top:.4rem;
}
.anfrage-hinweis{grid-column:span 6;max-width:56ch}
@media (max-width:760px){
  .feld--halb,.feld--drittel{grid-column:span 6}
}

/* Kontaktdaten */
.daten-gitter{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,3rem);
  border-top:1px solid var(--linie);padding-top:2.2rem;
}
.daten-block{display:grid;gap:.3rem;align-content:start;font-style:normal}
.daten-zeile{
  display:flex;align-items:flex-start;gap:.9rem;padding:.7rem 0;
  font-size:1.02rem;color:var(--text);
  transition:color .26s var(--ease);
}
.daten-zeile svg{width:18px;height:18px;flex:none;margin-top:.28em;color:var(--taupe)}
a.daten-zeile:hover{color:var(--himmel-tief)}
a.daten-zeile:hover svg{color:var(--himmel-tief)}
.daten-zeile--still{color:var(--text-2);font-size:.95rem;line-height:1.6}
@media (max-width:700px){.daten-gitter{grid-template-columns:1fr}}


/* ── 10 Fusszeile ────────────────────────────────────────────────────── */

.fusszeile{
  background:var(--tinte-2);color:var(--hell-2);
  padding-block:clamp(3.4rem,7vw,5.5rem) 2rem;
  font-size:.9rem;
}
.fuss-oben{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2.2rem,5vw,4rem);
  padding-bottom:clamp(2.4rem,5vw,4rem);
  border-bottom:1px solid var(--linie-hell);
}
.logo--fuss{height:52px;--l-dach:#D8CEC7;--l-haus:#9F938B;--l-meer:#2DAAE1}
.fuss-name{
  font-family:var(--display);font-size:1.45rem;color:var(--hell);margin-top:1.1rem;
}
.fuss-unter{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe-hell);margin-top:.3rem;
}
.fuss-sozial{display:flex;gap:.5rem;margin-top:1.6rem}
.fuss-sozial a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--linie-hell);border-radius:50%;color:var(--hell-2);
  transition:background-color .3s,color .3s,border-color .3s;
}
.fuss-sozial svg{width:17px;height:17px}
.fuss-sozial a:hover{background:var(--himmel);border-color:var(--himmel);color:#fff}

.fuss-nav{display:grid;gap:.62rem;align-content:start}
.fuss-nav a,.fuss-kontakt a{
  color:var(--hell-2);transition:color .26s var(--ease);width:fit-content;
}
.fuss-nav a:hover,.fuss-kontakt a:hover{color:var(--himmel-hell)}
.fuss-kontakt{display:grid;gap:.62rem;align-content:start}
.fuss-kontakt p{margin-top:.7rem;color:var(--hell-3);line-height:1.7}

.fuss-unten{
  display:flex;justify-content:space-between;align-items:center;
  gap:1.2rem 2rem;flex-wrap:wrap;padding-top:1.8rem;
  font-size:.78rem;color:var(--hell-3);
}
.fuss-recht{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
/* Der Weg zur Verwaltung. Klein und ruhig, aber mit Symbol und Rahmen -
   wer ihn sucht, findet ihn auf Anhieb; wer ihn nicht sucht, uebersieht
   ihn. */
.fuss-admin{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.32rem .7rem;border-radius:100px;
  border:1px solid var(--linie-hell);
  color:var(--hell-3);font-size:.72rem;letter-spacing:.06em;
  transition:border-color .3s var(--ease),color .3s var(--ease),
             background-color .3s var(--ease);
}
.fuss-admin svg{width:13px;height:13px}
.fuss-admin:hover{
  border-color:var(--himmel);color:var(--himmel-hell);
  background:rgba(45,170,225,.1);
}
.fuss-recht a:hover{color:var(--hell)}
.fuss-bauer a{color:var(--hell-2);text-decoration:underline;text-underline-offset:3px}
.fuss-bauer a:hover{color:var(--himmel-hell)}
@media (max-width:860px){
  .fuss-oben{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:span 2}
}
@media (max-width:560px){
  .fuss-oben{grid-template-columns:1fr}
  .fuss-marke{grid-column:span 1}
}


/* ── 11 Leuchtkasten ─────────────────────────────────────────────────── */

.leuchtkasten{
  position:fixed;inset:0;z-index:140;
  background:rgba(9,17,20,.96);
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;transition:opacity .38s var(--ease);
}
.leuchtkasten[hidden]{display:none}
.leuchtkasten.ist-da{opacity:1}
.lk-buehne{
  max-width:min(1200px,100%);max-height:82vh;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.lk-buehne img{
  max-width:100%;max-height:76vh;width:auto;object-fit:contain;
  border-radius:var(--radius);
  opacity:0;transform:scale(.97);
  transition:opacity .42s var(--ease),transform .55s var(--ease-aus);
}
.leuchtkasten.bild-da .lk-buehne img{opacity:1;transform:none}
.lk-buehne figcaption{
  color:var(--hell-3);font-size:.85rem;text-align:center;max-width:70ch;
}
.lk-schliessen,.lk-pfeil{
  position:absolute;width:52px;height:52px;display:grid;place-items:center;
  color:var(--hell);border:1px solid var(--linie-hell);border-radius:50%;
  transition:background-color .3s,border-color .3s,transform .3s var(--ease-aus);
}
.lk-schliessen:hover,.lk-pfeil:hover{background:rgba(247,243,236,.12);border-color:var(--linie-hell-2)}
.lk-schliessen svg,.lk-pfeil svg{width:20px;height:20px}
.lk-schliessen{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lk-pfeil--links{left:clamp(.7rem,3vw,2.4rem);top:50%;transform:translateY(-50%) rotate(180deg)}
.lk-pfeil--rechts{right:clamp(.7rem,3vw,2.4rem);top:50%;transform:translateY(-50%)}
.lk-pfeil--links:hover{transform:translateY(-50%) rotate(180deg) translateX(3px)}
.lk-pfeil--rechts:hover{transform:translateY(-50%) translateX(3px)}
.lk-zaehler{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  color:var(--hell-3);font-size:.76rem;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
@media (max-width:700px){
  .lk-pfeil{width:44px;height:44px;top:auto;bottom:clamp(1rem,3vw,2rem);transform:none}
  .lk-pfeil--links{left:calc(50% - 76px);transform:rotate(180deg)}
  .lk-pfeil--rechts{right:calc(50% - 76px);transform:none}
  .lk-pfeil--links:hover{transform:rotate(180deg)}
  .lk-zaehler{bottom:calc(clamp(1rem,3vw,2rem) + 62px)}
}


/* ── 13 Social-Wand ──────────────────────────────────────────────────── */

.sozialwand{background:var(--sand-2);margin-block:clamp(4.5rem,10vw,9rem)}
.abschnitt + .sozialwand{margin-top:0}
.sozialwand .abschnitt-kopf--reihe{align-items:flex-end}

.konten{display:flex;gap:.7rem;flex-wrap:wrap}
.konto{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.7rem 1.1rem .7rem .85rem;
  border:1px solid var(--linie-2);border-radius:100px;background:var(--papier);
  transition:border-color .3s var(--ease),transform .4s var(--ease-aus),
             box-shadow .4s var(--ease);
}
.konto svg{width:18px;height:18px;flex:none;color:var(--text)}
.konto span{display:flex;flex-direction:column;line-height:1.15}
.konto b{font-size:.82rem;font-weight:600;color:var(--text)}
.konto i{font-style:normal;font-size:.7rem;color:var(--text-3)}
.konto:hover{
  border-color:var(--tinte);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,26,31,.09);
}

.sozial-spur{display:flex;gap:clamp(1rem,2vw,1.6rem);flex-wrap:wrap}
.film--social{flex:1 1 220px;max-width:290px}
.film-quelle{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .66rem;border-radius:100px;
  background:rgba(9,17,21,.62);backdrop-filter:blur(6px);
  color:#fff;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.film-quelle svg{width:13px;height:13px}
@media (max-width:820px){
  .sozial-spur{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);
    scrollbar-width:none;
  }
  .sozial-spur::-webkit-scrollbar{display:none}
  .film--social{flex:0 0 62%;max-width:none;scroll-snap-align:start}
}


/* ── 14 Anfragestrecke ───────────────────────────────────────────────── */

.strecke{
  background:var(--papier);border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.5rem,3.6vw,3rem);
  box-shadow:0 1px 2px rgba(14,26,31,.03),0 20px 50px rgba(14,26,31,.06);
}

.strecke-kopf{
  display:flex;align-items:center;gap:1.4rem;
  padding-bottom:1.6rem;margin-bottom:2rem;
  border-bottom:1px solid var(--linie);
}
.strecke-balken{
  flex:1;height:2px;background:var(--sand-3);border-radius:2px;overflow:hidden;
}
.strecke-balken i{
  display:block;height:100%;width:20%;
  background:linear-gradient(90deg,var(--himmel-tief),var(--himmel));
  border-radius:2px;
  transition:width .68s var(--ease-aus);
}
.strecke-zaehler{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;flex:none;
}
.strecke-zaehler b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.strecke-zaehler span{display:none}
@media (min-width:600px){.strecke-zaehler span{display:inline}}

/* Ohne JavaScript stehen alle Schritte untereinander. Erst wenn das Skript
   laeuft, wird daraus eine Strecke. */
.schritt{border:0;padding:0;margin:0}
.schritt + .schritt{margin-top:3rem}
.strecke--gefuehrt .schritt{display:none;margin-top:0}
.strecke--gefuehrt .schritt.ist-da{display:block;animation:schritt-rein .5s var(--ease-aus)}
@keyframes schritt-rein{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.schritt-frage{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.14;
  color:var(--text);letter-spacing:-.014em;
  margin-bottom:1.6rem;padding:0;
}
.schritt-hinweis{font-size:.9rem;color:var(--text-3);margin:-.9rem 0 1.5rem}

/* Auswahlkacheln */
.kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (max-width:620px){.kacheln{grid-template-columns:1fr}}
.kachel{cursor:pointer;position:relative;display:block}
.kachel input{position:absolute;opacity:0;width:0;height:0}
.kachel-flaeche{
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"symbol titel haken" "symbol unter haken";
  gap:.1rem .95rem;align-items:center;
  padding:1.05rem 1.15rem;height:100%;
  border:1px solid var(--linie-2);border-radius:var(--radius);
  background:var(--sand);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             transform .4s var(--ease-aus),box-shadow .4s var(--ease);
}
.kachel-symbol{grid-area:symbol;width:22px;height:22px;color:var(--taupe);
  transition:color .3s var(--ease)}
.kachel-flaeche b{grid-area:titel;font-size:.98rem;font-weight:600;color:var(--text);align-self:end}
.kachel-flaeche i{grid-area:unter;font-style:normal;font-size:.8rem;color:var(--text-3);align-self:start}
.kachel-haken{
  grid-area:haken;width:17px;height:17px;color:var(--himmel-tief);
  opacity:0;transform:scale(.5);
  transition:opacity .3s var(--ease),transform .4s var(--ease-aus);
}
.kachel:hover .kachel-flaeche{border-color:var(--taupe);transform:translateY(-2px)}
.kachel input:focus-visible + .kachel-flaeche{outline:2px solid var(--himmel);outline-offset:3px}
.kachel input:checked + .kachel-flaeche{
  border-color:var(--himmel);background:var(--papier);
  box-shadow:0 0 0 1px var(--himmel) inset,0 12px 28px rgba(45,170,225,.14);
}
.kachel input:checked + .kachel-flaeche .kachel-symbol{color:var(--himmel-tief)}
.kachel input:checked + .kachel-flaeche .kachel-haken{opacity:1;transform:none}

/* Zwei Felder nebeneinander */
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){.feld-reihe{grid-template-columns:1fr}}
.schritt .feld + .feld,
.schritt .feld-reihe + .feld{margin-top:1.1rem}

/* Schalter mit eigenem Kasten */
.schalter{
  display:inline-flex;align-items:center;gap:.8rem;cursor:pointer;
  margin-top:1.4rem;font-size:.94rem;color:var(--text-2);
}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter-kasten{
  width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1px solid var(--linie-2);border-radius:var(--radius);
  background:var(--sand);
  transition:background-color .26s var(--ease),border-color .26s var(--ease);
}
.schalter-kasten svg{
  width:13px;height:13px;color:#fff;
  opacity:0;transform:scale(.5);
  transition:opacity .22s var(--ease),transform .34s var(--ease-aus);
}
.schalter input:checked + .schalter-kasten{background:var(--himmel-tief);border-color:var(--himmel-tief)}
.schalter input:checked + .schalter-kasten svg{opacity:1;transform:none}
.schalter input:focus-visible + .schalter-kasten{outline:2px solid var(--himmel);outline-offset:3px}
.schalter:hover .schalter-kasten{border-color:var(--taupe)}

/* Zaehlfelder */
.zaehlfelder{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:520px){.zaehlfelder{grid-template-columns:1fr}}
.zaehlfeld label{
  display:block;margin-bottom:.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);
}
.zaehler{
  display:grid;grid-template-columns:52px 1fr 52px;align-items:center;
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--sand);overflow:hidden;
}
.zaehler-knopf{
  height:52px;font-size:1.2rem;color:var(--text-2);
  transition:background-color .24s var(--ease),color .24s var(--ease);
}
.zaehler-knopf:hover{background:var(--sand-3);color:var(--text)}
.zaehler input{
  border:0;background:none;text-align:center;padding:.85rem 0;
  font-size:1.15rem;font-family:var(--display);color:var(--text);
  -moz-appearance:textfield;
}
.zaehler input::-webkit-outer-spin-button,
.zaehler input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zaehler input:focus{outline:none}
.zaehler:focus-within{border-color:var(--himmel)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{cursor:pointer;position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.05rem;
  border:1px solid var(--linie-2);border-radius:100px;
  font-size:.88rem;color:var(--text-2);background:var(--sand);
  transition:border-color .28s var(--ease),background-color .28s var(--ease),
             color .28s var(--ease),transform .36s var(--ease-aus);
}
.chip svg{width:16px;height:16px;flex:none;color:var(--taupe);transition:color .28s var(--ease)}
.chip:hover span{border-color:var(--taupe);transform:translateY(-2px)}
.chip input:focus-visible + span{outline:2px solid var(--himmel);outline-offset:3px}
.chip input:checked + span{
  background:var(--tinte);border-color:var(--tinte);color:var(--hell);
}
.chip input:checked + span svg{color:var(--himmel-hell)}
.chip--aus input:checked + span{background:var(--taupe-2);border-color:var(--taupe-2)}

/* Zusammenfassung im letzten Schritt */
.uebersicht{
  margin-top:2rem;padding:1.3rem 1.4rem;
  background:var(--sand);border-radius:var(--radius);
  border-left:2px solid var(--himmel);
}
.uebersicht-titel{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:.9rem;
}
.uebersicht dl{display:grid;grid-template-columns:auto 1fr;gap:.42rem 1.2rem;font-size:.88rem}
.uebersicht dt{color:var(--text-3);white-space:nowrap}
.uebersicht dd{color:var(--text)}

.strecke-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--linie);
  flex-wrap:wrap;
}
.strecke-fuss-rechts{display:flex;align-items:center;gap:1.4rem;margin-left:auto;flex-wrap:wrap}
.anfrage-hinweis{margin-top:1.2rem;max-width:58ch}


/* ── 15 Lageplan ─────────────────────────────────────────────────────── */

.plan-land{filter:drop-shadow(0 2px 0 rgba(255,255,255,.5))}

.plan-strasse-grund{fill:none;stroke:#FFFDF9;stroke-width:9;stroke-linecap:round}
.plan-strasse{
  fill:none;stroke:var(--taupe);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:10 9;
  animation:plan-fahrbahn 2.6s linear infinite;
}
@keyframes plan-fahrbahn{to{stroke-dashoffset:-38}}

/* Der Punkt faehrt die Strasse ab - das ist die Anreise in einer Bewegung. */
.plan-fahrer{
  fill:var(--himmel-tief);
  offset-path:path("M586 132 C524 190 476 244 428 288 C372 338 302 368 242 386 C226 391 208 392 196 394");
  offset-rotate:0deg;
  animation:plan-fahrt 7.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes plan-fahrt{
  0%,6%   {offset-distance:0%;   opacity:0}
  12%     {opacity:1}
  84%     {offset-distance:100%; opacity:1}
  92%,100%{offset-distance:100%; opacity:0}
}

.plan-flug-hof{
  fill:var(--himmel);opacity:.16;
  transform-box:fill-box;transform-origin:center;
  animation:plan-puls 3.4s var(--ease) infinite;
}
.plan-flieger{
  fill:var(--taupe-2);
  transform-box:fill-box;transform-origin:center;
  animation:plan-heben 3.4s var(--ease) infinite;
}
@keyframes plan-heben{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}

.plan-punkt{fill:var(--himmel-tief)}
.plan-punkt-klein{r:5;fill:var(--taupe);transition:fill .3s var(--ease),r .35s var(--ease-aus)}
.plan-punkt-hof{
  fill:var(--himmel);
  transform-box:fill-box;transform-origin:center;
  animation:plan-puls 3.2s var(--ease) infinite;
}
.plan-punkt-hof--2{animation-delay:1.6s}
@keyframes plan-puls{
  0%,100%{transform:scale(.5);opacity:.34}
  55%    {transform:scale(1);opacity:.04}
}

.plan-luftlinie{
  fill:none;stroke:var(--himmel-tief);stroke-width:1.6;
  stroke-dasharray:4 6;opacity:.7;
  animation:plan-fahrbahn 3.4s linear infinite reverse;
}

.plan-welle{animation:plan-schwappen 5s ease-in-out infinite}
.plan-welle--2{animation-duration:6.4s;animation-delay:-1.2s}
.plan-welle--3{animation-duration:7.2s;animation-delay:-2.6s}
@keyframes plan-schwappen{
  0%,100%{transform:translateX(0)}
  50%    {transform:translateX(-22px)}
}

.plan-schrift{
  font-family:var(--grotesk);font-size:13px;fill:var(--text-3);
  text-anchor:middle;letter-spacing:.08em;text-transform:uppercase;
}
.plan-schrift--klein{font-size:10.5px;letter-spacing:.1em}
.plan-schrift--marke{
  fill:var(--text);font-size:15px;font-weight:600;letter-spacing:.01em;
  text-transform:none;font-family:var(--display);
}
.plan-schrift--see{fill:var(--himmel-tief);opacity:.7}

/* Zeile in der Tabelle antippen -> Punkt auf der Karte leuchtet auf */
.entfernungen li{cursor:default;transition:color .26s var(--ease)}
.entfernungen li[data-ort]{cursor:pointer}
.entfernungen li[data-ort]:hover b,
.entfernungen li[data-ort]:focus-visible b{color:var(--himmel-tief)}
.plan-ort{transition:opacity .34s var(--ease)}
.lageplan.hat-fokus .plan-ort{opacity:.28}
.lageplan.hat-fokus .plan-ort.ist-da{opacity:1}
.plan-ort.ist-da .plan-punkt-klein{fill:var(--himmel-tief);r:8}


/* ── 16 Sides4you-Ebene ──────────────────────────────────────────────── */

.bauer-knopf{
  color:var(--hell-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie-hell-2);
  transition:color .26s var(--ease),text-decoration-color .26s var(--ease);
}
.bauer-knopf:hover{color:var(--himmel-hell);text-decoration-color:currentColor}

.s4y{
  position:fixed;inset:0;z-index:160;overflow:hidden;
  display:grid;place-items:center;
  opacity:0;
  transition:opacity .82s cubic-bezier(.33,1,.68,1);
}
.s4y.ist-da{opacity:1}
/* Die Szene faehrt langsam heran statt aufzuploppen. Zwei
   unterschiedlich lange Kurven - der Massstab braucht laenger als die
   Deckkraft, das nimmt dem Oeffnen die Haerte. */
.s4y-szene{
  position:absolute;inset:0;width:100%;height:100%;
  transform:scale(1.1) translateY(1.5%);
  opacity:.4;
  transition:transform 2.6s cubic-bezier(.16,1,.3,1),
             opacity 1.1s cubic-bezier(.33,1,.68,1);
}
.s4y.ist-da .s4y-szene{transform:none;opacity:1}
.s4y-schleier{
  opacity:0;transition:opacity 1.3s var(--ease-aus) .12s;
}
.s4y.ist-da .s4y-schleier{opacity:1}
.s4y-schleier{
  position:absolute;inset:0;
  background:
    radial-gradient(74% 66% at 50% 46%,
      rgba(4,26,42,.74) 0%, rgba(4,26,42,.63) 26%, rgba(4,26,42,.47) 46%,
      rgba(4,26,42,.29) 64%, rgba(4,26,42,.13) 82%, rgba(4,26,42,0) 100%),
    linear-gradient(to bottom,rgba(4,26,42,.26),rgba(4,26,42,0) 30%);
}
/* Ein Hauch Korn ueber der Ebene. Grosse, gleichmaessige Farbflaechen
   zeigen sonst Streifen, wo der Verlauf seine Stufen hat. */
.s4y-schleier::after{
  content:"";position:absolute;inset:0;
  background-image:url("../img/koernung.png");
  background-size:120px 120px;
  opacity:.05;mix-blend-mode:overlay;
}

.s4y-zu{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:3;
  width:50px;height:50px;display:grid;place-items:center;border-radius:50%;
  color:#fff;border:1px solid rgba(255,255,255,.42);
  background:rgba(6,32,50,.34);backdrop-filter:blur(6px);
  transition:background-color .3s,transform .4s var(--ease-aus);
}
.s4y-zu:hover{background:rgba(6,32,50,.6);transform:rotate(90deg)}
.s4y-zu svg{width:19px;height:19px}

.s4y-inhalt{
  position:relative;z-index:2;text-align:center;color:#fff;
  padding:var(--rand);max-width:min(660px,92vw);
}
.s4y-inhalt > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform 1.05s cubic-bezier(.16,1,.3,1);
}
.s4y.ist-da .s4y-inhalt > *{opacity:1;transform:none}
.s4y.ist-da .s4y-marke{transition-delay:.30s}
.s4y.ist-da .s4y-titel{transition-delay:.44s}
.s4y.ist-da .s4y-punkte{transition-delay:.58s}
.s4y.ist-da .s4y-ruf{transition-delay:.72s}
.s4y.ist-da .s4y-fuss{transition-delay:.86s}

.s4y-marke{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:1.1rem;
}
.s4y-titel{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6vw,3.9rem);line-height:1.04;letter-spacing:-.018em;
  text-wrap:balance;text-shadow:0 3px 34px rgba(3,20,34,.6);
}
.s4y-punkte{
  margin-top:2rem;display:grid;gap:.6rem;justify-content:center;
  text-align:left;width:fit-content;margin-inline:auto;
}
.s4y-punkte li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.94rem;color:rgba(255,255,255,.92);
  text-shadow:0 2px 18px rgba(3,20,34,.5);
}
.s4y-punkte svg{width:15px;height:15px;flex:none;margin-top:.35em;color:#7FE0FF}

.s4y-ruf{
  margin-top:2.2rem;display:inline-flex;align-items:center;gap:1rem;
  padding:1rem 1.9rem 1rem 1.5rem;border-radius:100px;
  background:#fff;color:var(--tinte);
  box-shadow:0 16px 44px rgba(3,20,34,.32);
  transition:transform .42s var(--ease-aus),box-shadow .42s var(--ease);
}
.s4y-ruf svg{width:21px;height:21px;color:var(--himmel-tief)}
.s4y-ruf span{display:flex;flex-direction:column;text-align:left;line-height:1.16}
.s4y-ruf i{font-style:normal;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3)}
.s4y-ruf b{font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.s4y-ruf:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 56px rgba(3,20,34,.4)}
.s4y-ruf::after{
  content:"";position:absolute;inset:0;border-radius:100px;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:s4y-klopfen 3.4s var(--ease) infinite;
  pointer-events:none;
}
.s4y-ruf{position:relative;isolation:isolate}
@keyframes s4y-klopfen{
  0%    {box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  55%,100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}
}

.s4y-fuss{
  margin-top:1.5rem;display:flex;gap:1.1rem;justify-content:center;
  align-items:center;flex-wrap:wrap;font-size:.84rem;
}
.s4y-fuss a{
  color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4);
}
.s4y-fuss a:hover{text-decoration-color:#fff}
.s4y-fuss em{font-style:normal;color:rgba(255,255,255,.62)}

/* Die Szene ---------------------------------------------------------- */

.s4y-wolken{transform-box:view-box}
.s4y-wolke{animation:s4y-treiben 46s ease-in-out infinite alternate}
.s4y-wolken--mittel .s4y-wolke{animation-duration:34s;animation-delay:-8s}
.s4y-wolken--nah .s4y-wolke{animation-duration:26s;animation-delay:-14s}
@keyframes s4y-treiben{
  from{transform:translateX(-70px)}
  to  {transform:translateX(70px)}
}

.s4y-sonnengruppe{
  transform-box:fill-box;transform-origin:center;
  animation:s4y-atmen 7s ease-in-out infinite;
}
@keyframes s4y-atmen{
  0%,100%{opacity:.92;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.035)}
}

.s4y-welle{animation:s4y-schwappen 9s linear infinite}
.s4y-welle--2{animation-duration:12s;animation-name:s4y-schwappen-2}
.s4y-welle--3{animation-duration:16s;animation-name:s4y-schwappen-3}
@keyframes s4y-schwappen-2{to{transform:translateX(-340px)}}
@keyframes s4y-schwappen-3{to{transform:translateX(-420px)}}
@keyframes s4y-schwappen{to{transform:translateX(-260px)}}

.s4y-glitzer--2{animation-duration:7s;animation-delay:-2.4s}
.s4y-glitzer{
  transform-box:fill-box;transform-origin:top center;
  animation:s4y-glimmen 5s ease-in-out infinite;
}
@keyframes s4y-glimmen{
  0%,100%{opacity:.4;transform:scaleX(1)}
  50%    {opacity:.72;transform:scaleX(1.12)}
}

.s4y-brandung{
  transform-box:fill-box;transform-origin:center bottom;
  animation:s4y-spuelen 8s ease-in-out infinite;
}
@keyframes s4y-spuelen{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%    {transform:translateY(6px) scaleY(1.03)}
}

/* Palmen: der ganze Baum wiegt sich um seinen Fuss, die Wedel zusaetzlich
   ein wenig fuer sich. Zusammen sieht das nach Wind aus statt nach Schleife. */
.s4y-palme{
  transform-box:view-box;transform-origin:1435px 900px;
  animation:s4y-wiegen 7.5s ease-in-out infinite;
}
.s4y-palme--klein{
  transform-origin:170px 900px;
  animation-duration:9.5s;animation-delay:-3s;
}
@keyframes s4y-wiegen{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}
}
.s4y-wedel{
  transform-box:fill-box;
  animation:s4y-wedeln 5.4s ease-in-out infinite;
}
.s4y-wedel--1{transform-origin:100% 62%;animation-delay:-.2s}
.s4y-wedel--2{transform-origin:100% 96%;animation-delay:-.9s}
.s4y-wedel--3{transform-origin:92% 100%;animation-delay:-1.6s}
.s4y-wedel--4{transform-origin:2% 100%; animation-delay:-2.3s}
.s4y-wedel--5{transform-origin:0% 40%;  animation-delay:-3s}
.s4y-wedel--6{transform-origin:0% 2%;   animation-delay:-3.7s}
.s4y-wedel--7{transform-origin:96% 2%;  animation-delay:-4.4s}
@keyframes s4y-wedeln{
  0%,100%{transform:rotate(-2.2deg)}
  50%    {transform:rotate(2.2deg)}
}

/* Voegel: fliegen ohne Unterbrechung, wie gewuenscht rund um die Uhr. */
.s4y-schwarm{
  transform-box:view-box;
  animation:s4y-zug 27s linear infinite;
}
.s4y-schwarm--1{--start:-140px;--ziel:1780px;--hoch:210px}
.s4y-schwarm--2{--start:-260px;--ziel:1900px;--hoch:342px;animation-duration:35s;animation-delay:-11s}
.s4y-schwarm--3{--start:-200px;--ziel:1840px;--hoch:150px;animation-duration:44s;animation-delay:-23s}
@keyframes s4y-zug{
  0%  {transform:translate(var(--start),var(--hoch))}
  25% {transform:translate(calc(var(--start) + (var(--ziel) - var(--start)) * .25),calc(var(--hoch) - 26px))}
  55% {transform:translate(calc(var(--start) + (var(--ziel) - var(--start)) * .55),calc(var(--hoch) + 18px))}
  80% {transform:translate(calc(var(--start) + (var(--ziel) - var(--start)) * .8),calc(var(--hoch) - 14px))}
  100%{transform:translate(var(--ziel),var(--hoch))}
}
.s4y-vogel path{
  fill:none;stroke:#0C2B41;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.82;
}
.s4y-fluegel-auf{animation:s4y-schlag 340ms steps(1,end) infinite}
.s4y-fluegel-ab {animation:s4y-schlag 340ms steps(1,end) infinite reverse}
.s4y-vogel--b .s4y-fluegel-auf,.s4y-vogel--b .s4y-fluegel-ab{animation-delay:-90ms}
.s4y-vogel--c .s4y-fluegel-auf,.s4y-vogel--c .s4y-fluegel-ab{animation-delay:-170ms}
@keyframes s4y-schlag{
  0%,49%  {opacity:.82}
  50%,100%{opacity:0}
}

/* Das Flugzeug zieht vorbei, dann eine Weile nichts, dann wieder. */
/* Negative Verzoegerung: die Animation startet nicht bei null, sondern
   drei Sekunden mittendrin. Dadurch ist das Flugzeug schon im Bild,
   sobald die Ebene aufgeht - kein Warten. */
.s4y-flug{
  transform-box:view-box;
  animation:s4y-vorbei 19s linear -3s infinite;
}
@keyframes s4y-vorbei{
  0%   {transform:translate(-560px,176px)}
  62%  {transform:translate(2180px,122px)}
  100% {transform:translate(2180px,122px)}
}
.s4y-flug-neigung{
  transform-box:fill-box;transform-origin:center;
  animation:s4y-schaukeln 6.5s ease-in-out infinite;
}
@keyframes s4y-schaukeln{
  0%,100%{transform:rotate(-1.4deg) translateY(0)}
  50%    {transform:rotate(1.1deg) translateY(-7px)}
}
.s4y-streifen{
  stroke-dasharray:640;stroke-dashoffset:640;
  animation:s4y-streifen-ziehen 19s linear infinite;
}
.s4y-streifen{animation-delay:-3s}
.s4y-streifen--2{animation-delay:-2.5s}
@keyframes s4y-streifen-ziehen{
  0%     {stroke-dashoffset:640;opacity:0}
  6%     {opacity:.9}
  40%,62%{stroke-dashoffset:0;opacity:.9}
  74%,100%{stroke-dashoffset:0;opacity:0}
}

/* ── Hochformat ─────────────────────────────────────────────────────
   Auf einem Handy passt eine 16:9-Szene nicht. Ohne Eingriff sieht man
   nur den mittleren Streifen: Himmel, Wasser, Sand - keine Palme, keine
   Sonne, kein Flugzeug.

   Deshalb setzt das Skript einen hohen Bildausschnitt (siehe haupt.js,
   Abschnitt 15), und hier ruecken die Bildelemente nach innen, damit sie
   in diesem schmaleren Ausschnitt auch vorkommen. */
.s4y--hoch .s4y-palme{transform-origin:1135px 900px}
.s4y--hoch .s4y-palme--klein{transform-origin:530px 900px}
.s4y--hoch .s4y-palme > *{transform:translateX(-300px)}
.s4y--hoch .s4y-palme--klein > *{transform:translateX(380px)}
.s4y--hoch .s4y-sonnengruppe{transform:translate(-190px,-40px)}
.s4y--hoch .s4y-flug{animation-name:s4y-vorbei-hoch}
@keyframes s4y-vorbei-hoch{
  0%   {transform:translate(-560px,-330px)}
  62%  {transform:translate(2180px,-392px)}
  100% {transform:translate(2180px,-392px)}
}
.s4y--hoch .s4y-schwarm--1{--start:-140px;--ziel:1780px;--hoch:-190px}
.s4y--hoch .s4y-schwarm--2{--start:-260px;--ziel:1900px;--hoch:-40px}
.s4y--hoch .s4y-schwarm--3{--start:-200px;--ziel:1840px;--hoch:-520px}
.s4y--hoch .s4y-wolken--fern .s4y-wolke{transform:translateY(-620px)}
.s4y--hoch .s4y-wolken--mittel .s4y-wolke{transform:translateY(-430px)}
.s4y--hoch .s4y-wolken--nah .s4y-wolke{transform:translateY(-250px)}

/* Der Schleier darf im Hochformat nicht so weit aufreissen, sonst steht
   der Text auf hellem Wasser. */
.s4y--hoch .s4y-schleier{
  background:
    radial-gradient(88% 52% at 50% 44%,
      rgba(4,26,42,.78) 0%, rgba(4,26,42,.66) 30%, rgba(4,26,42,.44) 54%,
      rgba(4,26,42,.2) 78%, rgba(4,26,42,0) 100%),
    linear-gradient(to bottom,rgba(4,26,42,.3),rgba(4,26,42,0) 26%);
}

body.s4y-offen{overflow:hidden}
@media (max-width:700px){
  .s4y-inhalt{padding-inline:1.4rem}
  .s4y-punkte{gap:.5rem}
  .s4y-punkte li{font-size:.88rem}
}


/* ── 17 Kleine Bewegungen, die man kaum bemerkt ──────────────────────── */

/* Der Strich vor einem Kicker waechst heraus. */
.kicker::before{width:0;transition:width .8s var(--ease-aus) .1s}
.kicker.ist-da::before{width:26px}

/* Die Symbole in den Merkmalen leben, sobald man sie anschaut. */
.merkmal-symbol svg{transition:transform .5s var(--ease-aus)}
.merkmal:hover .merkmal-symbol svg{transform:scale(1.12)}
.merkmal .merkmal-symbol{position:relative;overflow:hidden}
.merkmal-symbol::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--himmel) 0%,transparent 70%);
  opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .6s var(--ease-aus);
}
.merkmal:hover .merkmal-symbol::after{opacity:.16;transform:scale(1)}

/* Karten heben sich beim Ueberfahren minimal an. */
.karte{transition:transform .5s var(--ease-aus)}
.karten-gitter .karte:hover{transform:translateY(-4px)}
.karte-text h3{transition:color .3s var(--ease)}
.karte:hover .karte-text h3{color:var(--himmel-tief)}

/* Die Bildmarke in der Kopfleiste kippt beim Ueberfahren ein Grad. */
.marke .logo{transition:transform .55s var(--ease-aus)}
.marke:hover .logo{transform:rotate(-4deg) scale(1.06)}

/* Eine feine Welle ueber der Fusszeile. */
.fusszeile{position:relative}
/* Der Kasten sitzt VOR der Fusszeile, nicht darin: nur so wird aus dem
   Verlauf eine wellige Oberkante. Ein Bildpunkt Ueberlappung nach unten,
   damit keine Fuge sichtbar wird. */
.fuss-welle{
  position:absolute;top:-25px;left:0;width:100%;height:26px;
  display:block;color:var(--tinte-2);pointer-events:none;
}
.fuss-welle path{animation:fuss-schwappen 14s linear infinite}
@keyframes fuss-schwappen{to{transform:translateX(-240px)}}

/* Die Trennlinie ueber den Kennzahlen zieht sich beim Erscheinen auf. */
/* Eine blaue Linie zieht sich ueber die vorhandene Trennlinie. Faellt
   :has() aus, bleibt einfach die normale Linie stehen - nichts geht kaputt. */
.zahlen ul{position:relative}
.zahlen ul::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--himmel);
  transition:width 1.6s var(--ease-aus) .2s;
}
.zahlen ul:has(li.ist-da)::before{width:100%}


/* ── 18 Handy und Tablet ─────────────────────────────────────────────────
   Alles hier drin greift erst unterhalb von 1120 Bildpunkten. Die
   Desktop-Fassung bleibt unangetastet.
   ---------------------------------------------------------------------- */

/* Kennzahlen: vier nebeneinander sind auf einem Tablet zu schmal, die
   Beschriftungen brechen dann dreizeilig um. */
@media (max-width:1000px){
  .zahlen ul{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.6rem}
}
@media (max-width:420px){
  .zahlen ul{grid-template-columns:1fr;gap:1.6rem}
  .zahlen li{
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;
    gap:0 1rem;
  }
  .zahl-text{max-width:none}
}

/* ── "Das Haus": aus der Sticky-Folge wird auf kleinen Schirmen eine
      Abfolge aus Bild und Text. Das Bild kommt zuerst - man sieht, wovon
      die Rede ist, bevor man liest. ------------------------------------ */
@media (max-width:900px){
  .folge-gitter{gap:0}
  .folge-schritt{
    display:flex;flex-direction:column;
    min-height:0;opacity:1;padding-block:0;
  }
  .folge-schritt + .folge-schritt{border-top:0;padding-top:0;margin-top:3.4rem}
  .folge-klein{
    display:block;order:-1;margin:0 0 1.6rem;
    aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  }
  .folge-klein picture,.folge-klein img{width:100%;height:100%}
  .folge-klein img{object-fit:cover}
  .folge-nummer{
    font-size:1.05rem;margin-bottom:.7rem;
  }
  .folge-nummer::after{max-width:100%}
  .folge-schritt h3{margin-bottom:.7rem}
}

/* Auf dem Handy laeuft das Bild bis an beide Kanten - das gibt der
   Abfolge Rhythmus und dem Foto endlich Platz. */
@media (max-width:640px){
  .folge-klein{
    margin-inline:calc(var(--rand) * -1);
    border-radius:0;aspect-ratio:3/2;
  }
}

/* Auf dem Tablet stehen Bild und Text nebeneinander und wechseln die
   Seite - so bleibt die Idee der Sticky-Folge erhalten, ohne dass das
   Bild zu einer schmalen Saeule wird. */
@media (min-width:641px) and (max-width:900px){
  .folge-schritt{
    display:grid;align-content:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"bild nummer" "bild titel" "bild text";
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(1.6rem,3.5vw,2.8rem);
  }
  .folge-klein{grid-area:bild;order:0;align-self:center;margin:0;aspect-ratio:3/4}
  .folge-nummer{grid-area:nummer;align-self:end}
  .folge-schritt h3{grid-area:titel}
  .folge-schritt p{grid-area:text}
  .folge-schritt:nth-child(even){
    grid-template-areas:"nummer bild" "titel bild" "text bild";
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  }
  .folge-schritt + .folge-schritt{margin-top:clamp(3rem,6vw,5rem)}
}

/* ── "Umsehen" und die Videowand: kein abgeschnittenes Karussell mehr,
      sondern ein Raster, in dem alles sichtbar ist. ------------------- */
@media (max-width:820px){
  .streifen-spur{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:clamp(.7rem,2vw,1.1rem);
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .streifen-stueck{flex:none;width:100%}
  .abschnitt-kopf--reihe{align-items:flex-start;gap:1.6rem}
  .abschnitt-kopf--reihe .knopf{margin-top:0}
}
@media (max-width:820px){
  .sozial-spur{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:clamp(.7rem,2vw,1.1rem);
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .film--social{flex:none;max-width:none;width:100%}
}
/* Auf sehr schmalen Schirmen lieber eines gross als zwei winzige. */
@media (max-width:440px){
  .streifen-spur{grid-template-columns:1fr}
  .streifen .rahmen{aspect-ratio:3/2}
}

/* Die Videowand braucht Luft nach oben - sie folgt auf einen hellen
   Abschnitt und hatte vorher fast keinen Abstand. */
.sozialwand{padding-block:clamp(4.5rem,10vw,9rem)}
.abschnitt + .sozialwand{margin-top:clamp(4.5rem,10vw,9rem)}

/* Karten, Merkmale, Formular auf dem Tablet */
@media (max-width:900px){
  .karten--gross .karte{gap:1.8rem}
  .kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .kacheln{grid-template-columns:1fr}
  .strecke{padding:1.3rem 1.1rem 1.6rem}
  .strecke-fuss{flex-direction:column-reverse;align-items:stretch;gap:.8rem}
  .strecke-fuss-rechts{
    margin-left:0;flex-direction:column;align-items:stretch;gap:.6rem;
  }
  .strecke-fuss .knopf{justify-content:center}
  .strecke-fuss .knopf--nackt{text-align:center}
  .schritt-frage{font-size:1.42rem}
}

/* Preis der Mietwagen: das Eurozeichen gehoert zur Zahl, nicht darueber */
.wagen-preis em{
  font-style:normal;font-family:var(--display);font-size:.74em;
  margin-inline:.1em;color:var(--text-2);vertical-align:baseline;
}
@media (max-width:520px){
  .wagen{grid-template-columns:auto 1fr;row-gap:.8rem}
  .wagen-preis{grid-column:2;text-align:left}
  .wagen-preis span{display:inline;margin-left:.5rem}
}


/* ── 19 Das Menue ────────────────────────────────────────────────────────
   Hinter dem Menue liegt das Gegenstueck zur Strandszene von Sides4you:
   derselbe Ort bei Nacht. Sterne, Mondlicht auf dem Wasser, Palmwedel von
   den Seiten. Bewusst ruhig gehalten - lesen soll man die Navigation,
   nicht den Hintergrund.
   ---------------------------------------------------------------------- */

.menue-voll{
  background:
    radial-gradient(120% 78% at 78% 96%, #123A52 0%, rgba(18,58,82,0) 62%),
    linear-gradient(to bottom, #071620 0%, #0B2434 46%, #0C2E42 76%, #0A2434 100%);
}
.menue-himmel{position:absolute;inset:0;overflow:hidden;pointer-events:none}

.menue-schein{
  position:absolute;right:-6%;top:6%;width:min(58vw,460px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(150,214,240,.30) 0%,rgba(120,190,225,.10) 42%,transparent 70%);
  opacity:0;transform:scale(.85);
}
.menue-offen .menue-schein{
  opacity:1;transform:scale(1);
  transition:opacity 1.6s var(--ease-aus) .1s,transform 2.4s var(--ease-aus) .1s;
  animation:mond-atmen 9s ease-in-out 2s infinite;
}
@keyframes mond-atmen{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(1.22)}
}

.menue-sterne{position:absolute;inset:0;width:100%;height:100%}
.menue-sterne circle{fill:#DCEEF8}
.stern-schicht{opacity:0}
.menue-offen .stern-schicht{
  animation:stern-an .9s var(--ease-aus) forwards,
            stern-flackern 4.5s ease-in-out infinite;
}
.menue-offen .stern-schicht--1{animation-delay:.18s,1.1s}
.menue-offen .stern-schicht--2{animation-delay:.34s,1.9s}
.menue-offen .stern-schicht--3{animation-delay:.5s,2.7s}
@keyframes stern-an{to{opacity:.9}}
@keyframes stern-flackern{
  0%,100%{opacity:.9}
  50%    {opacity:.42}
}

.menue-saum{
  position:absolute;left:0;bottom:0;width:100%;height:auto;
  opacity:0;transform:translateY(26px);
}
.menue-offen .menue-saum{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease-aus) .24s,transform 1.2s var(--ease-aus) .24s;
}
.men-welle{animation:men-schwappen 11s linear infinite}
.men-welle--2{animation-duration:15s;animation-direction:reverse}
.men-welle--3{animation-duration:19s}
@keyframes men-schwappen{to{transform:translateX(-120px)}}
.men-mondbahn{
  transform-box:fill-box;transform-origin:center bottom;
  opacity:.55;
  animation:men-glimmen 7s ease-in-out infinite;
}
@keyframes men-glimmen{
  0%,100%{opacity:.45;transform:scaleX(1)}
  50%    {opacity:.72;transform:scaleX(1.16)}
}
.men-palme{transform-box:view-box;animation:men-wiegen 9s ease-in-out infinite}
.men-palme--links{transform-origin:0 40px}
.men-palme--rechts{transform-origin:1200px 40px;animation-delay:-4s}
@keyframes men-wiegen{
  0%,100%{transform:rotate(-1.6deg)}
  50%    {transform:rotate(1.6deg)}
}

/* Keine Trennstriche mehr. Struktur gibt allein die Nummer; die aktive
   Seite bekommt einen schmalen Balken links. Waagerechte Linien unter
   jedem Punkt lassen so ein Menue schnell nach Formular aussehen - genau
   das war der Eindruck, den es machte. */
.menue-innen{position:relative;z-index:1}
.menue-liste{counter-reset:menuepunkt}
.menue-liste > li{position:relative;counter-increment:menuepunkt}
.menue-liste > li::before{
  content:"";position:absolute;left:-1.1rem;top:.42em;height:1.1em;width:2px;
  background:var(--himmel);border-radius:2px;
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease-aus);
}
.menue-liste > li.ist-da::before{transform:scaleY(1)}

.menue-punkt::before{
  content:counter(menuepunkt,decimal-leading-zero);
  font-family:var(--grotesk);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;color:var(--hell-3);
  flex:none;width:2ch;
  transition:color .3s var(--ease);
}
.menue-punkt > span{transition:color .3s var(--ease)}
.menue-punkt:hover::before,
.menue-liste > li.ist-da > .menue-punkt::before{color:var(--himmel-hell)}
.menue-punkt:hover > span{color:var(--himmel-hell)}

/* Das Pluszeichen dreht sich zum Kreuz, sobald das Fach offen ist. */
.menue-pfeil{
  width:19px;height:19px;flex:none;margin-left:auto;align-self:center;
  color:var(--hell-3);
  transition:transform .45s var(--ease-aus),color .3s var(--ease);
}
.menue-auf:hover .menue-pfeil{color:var(--himmel-hell)}
.hat-kinder.ist-offen .menue-pfeil{transform:rotate(135deg);color:var(--himmel-hell)}

/* Das Aufklappfach. grid-template-rows von 0fr auf 1fr ist der einzige
   Weg, eine unbekannte Hoehe sauber zu animieren - mit max-height muesste
   man eine Zahl raten, die dann entweder zu klein oder zu langsam ist. */
.unterfach{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-aus);
}
.hat-kinder.ist-offen .unterfach{grid-template-rows:1fr}
.unterfach-innen{
  overflow:hidden;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding-left:calc(2ch + 1rem);
}
.unterfach-innen a{
  display:block;padding:.42rem 0;color:var(--hell-2);font-size:.98rem;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease-aus),transform .4s var(--ease-aus),
             color .26s var(--ease);
}
.hat-kinder.ist-offen .unterfach-innen a{opacity:1;transform:none}
.hat-kinder.ist-offen .unterfach-innen a:nth-child(1){transition-delay:.06s}
.hat-kinder.ist-offen .unterfach-innen a:nth-child(2){transition-delay:.12s}
.hat-kinder.ist-offen .unterfach-innen a:nth-child(3){transition-delay:.18s}
.hat-kinder.ist-offen .unterfach-innen a:nth-child(4){transition-delay:.24s}
.unterfach-innen a:hover,
.unterfach-innen a.ist-da{color:var(--himmel-hell)}
.unterfach-innen a.ist-da::before{
  content:"";display:inline-block;width:14px;height:1px;
  background:currentColor;margin-right:.6rem;vertical-align:middle;
}
.unterfach-innen a.ist-da{margin-left:calc(-14px - .6rem)}

.menue-fuss{align-items:center}
.menue-anfrage{margin-left:auto;color:var(--tinte)}
.menue-anfrage::before{background:var(--sand)}
.menue-anfrage:hover{color:#fff}
.menue-anfrage:hover::before{background:var(--himmel)}
@media (max-width:560px){
  .menue-fuss{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .menue-anfrage{margin-left:0;width:100%;justify-content:center}
  .sprachwahl--gross .sprache{padding-left:0;padding-right:1.1rem}
}


/* ── 20 Brotkrumen ───────────────────────────────────────────────────────
   Ein schmaler Streifen direkt unter dem Kopfbild. Er hilft beim
   Zurechtfinden und taucht in der Google-Trefferliste als Pfad unter dem
   Titel auf - deshalb steht dieselbe Kette auch in den strukturierten
   Daten.
   ---------------------------------------------------------------------- */

.krumen{
  border-bottom:1px solid var(--linie);
  background:var(--sand);
}
.krumen .band{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-block:.95rem;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);
}
.krumen a{
  color:var(--text-3);
  transition:color .26s var(--ease);
}
.krumen a:hover{color:var(--himmel-tief)}
.krumen [aria-current]{color:var(--text)}
.krumen-pfeil{width:11px;height:11px;flex:none;opacity:.5}
@media (max-width:560px){
  .krumen .band{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    white-space:nowrap;
  }
  .krumen .band::-webkit-scrollbar{display:none}
}


/* ── 21 Fehlerseite ──────────────────────────────────────────────────── */

.seite-fehler{background:var(--tinte);color:var(--hell-2)}
.fehler{
  min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(3rem,8vw,6rem);
  position:relative;overflow:hidden;
}
.fehler::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(45,170,225,.16),transparent 60%);
}
.fehler .band{position:relative}
.fehler-marke{
  display:inline-flex;align-items:center;gap:.9rem;margin-bottom:clamp(2rem,5vw,3.5rem);
}
.logo--fehler{height:40px;--l-dach:#E8E1DC;--l-haus:#C6BAB1;--l-meer:#2DAAE1}
.fehler-marke span{display:flex;flex-direction:column;line-height:1.15}
.fehler-marke b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--hell)}
.fehler-marke i{
  font-style:normal;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe-hell);margin-top:.16rem;
}
.fehler-code{
  font-family:var(--display);font-size:clamp(5rem,20vw,11rem);
  line-height:.85;color:var(--himmel);opacity:.28;
  letter-spacing:-.03em;margin-bottom:clamp(1.5rem,4vw,2.5rem);
}
.fehler-sprache{
  padding-block:clamp(1.6rem,4vw,2.4rem);
  border-top:1px solid var(--linie-hell);
  max-width:64ch;
}
.fehler-sprache h2{
  font-size:clamp(1.5rem,4vw,2.3rem);color:var(--hell);margin-bottom:.8rem;
}
.fehler-sprache p{color:var(--hell-2);margin-bottom:1.4rem}
.fehler-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.8rem}
.fehler-links a{
  color:var(--hell-2);font-size:.92rem;
  border-bottom:1px solid transparent;
  transition:color .26s var(--ease),border-color .26s var(--ease);
}
.fehler-links a:hover{color:var(--himmel-hell);border-bottom-color:currentColor}
.fehler .knopf--voll{color:var(--tinte)}
.fehler .knopf--voll::before{background:var(--sand)}
.fehler .knopf--voll:hover{color:#fff}
.fehler .knopf--voll:hover::before{background:var(--himmel)}


/* ── 12 Bewegung ─────────────────────────────────────────────────────── */

[data-auf]{will-change:transform,opacity}

[data-auf="hoch"]{
  opacity:0;transform:translateY(26px);
  transition:opacity .78s var(--ease-aus),transform .78s var(--ease-aus);
}
[data-auf="hoch"].ist-da{opacity:1;transform:none}

[data-auf="titel"] .zeile{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
[data-auf="titel"] .zeile > span{
  display:block;transform:translateY(105%);
  transition:transform .95s var(--ease-aus);
}
[data-auf="titel"].ist-da .zeile > span{transform:none}
[data-auf="titel"] .zeile:nth-child(2) > span{transition-delay:.1s}
[data-auf="titel"] .zeile:nth-child(3) > span{transition-delay:.2s}

/* Wichtig: der Beschnitt sitzt auf dem INNEREN Element, nicht auf dem, das
   der IntersectionObserver beobachtet. Ein vollstaendig weggeschnittenes
   Element meldet in Chrome nie, dass es im Bild ist - es wuerde sich also
   nie einblenden und fuer immer unsichtbar bleiben. */
[data-auf="bild"] .rahmen-zug{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.1);
  transition:clip-path 1.15s var(--ease-aus),transform 1.5s var(--ease-aus);
}
[data-auf="bild"].ist-da .rahmen-zug{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Beim Verlassen einer Seite kurz abblenden - das macht aus 39 einzelnen
   Dateien ein zusammenhaengendes Ganzes. */
.seite-geht{opacity:0;transition:opacity .28s var(--ease)}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die
   Seite ohne alles - aber vollstaendig sichtbar. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-auf]{opacity:1 !important;transform:none !important;clip-path:none !important}
  [data-auf="titel"] .zeile > span{transform:none !important}
  [data-auf="bild"] .rahmen-zug{transform:none !important}
  .aussage-text .wort{opacity:1 !important}
  .folge-schritt{opacity:1 !important}
  .kopf-bild img{animation:none}
  .laufband-spur{animation:none}
  .s4y-szene,.s4y-inhalt > *{transform:none !important;opacity:1 !important}
  .plan-fahrer{opacity:1 !important}
  .kicker::before{width:26px !important}
  .menue-saum,.menue-schein,.stern-schicht{opacity:1 !important;transform:none !important}
  .zahlen ul::before{width:100% !important}
  .vorhang{display:none}
}