/* ==========================================================================
   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{
  /* Deckend als Rueckfall, damit die Navigation auf Geraeten ohne
     backdrop-filter nicht vor einem Foto steht und unlesbar wird. */
  background:rgba(247,243,236,.94);
  border-bottom-color:var(--linie);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .kopfleiste.ist-fest{
    background:rgba(247,243,236,.7);
    backdrop-filter:blur(18px) saturate(1.6);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  }
}
.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;
}
/* Hinter dem Menue liegt der Nachthimmel - Sterne, Mond, Wellen. Der Fuss
   bekommt deshalb Milchglas: er hebt Sprachwahl und Rufnummer vom
   Hintergrund ab, ohne ihn zuzudecken. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .menue-fuss{
    margin-inline:calc(var(--rand) * -1);
    padding:1.4rem var(--rand);
    border-top-color:rgba(247,243,236,.14);
    background:rgba(9,17,21,.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  }
}
.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}

/* Die Stornostaffel. Sie steht in den AGB und muss auf dem Handy lesbar
   bleiben - deshalb keine feste Breite, sondern zwei Spalten, von denen die
   rechte nur so breit wird wie noetig. */
.staffel{
  width:100%;max-width:70ch;margin-top:1.1rem;
  border-collapse:collapse;font-size:.94rem;
}
.staffel th,.staffel td{
  text-align:left;padding:.62rem .8rem;
  border-bottom:1px solid var(--linie);vertical-align:top;
}
.staffel th{
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;
}
.staffel td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.staffel tbody tr:last-child td{border-bottom:0}
.staffel tbody tr:last-child{font-weight:600}
@media (max-width:520px){
  .staffel{font-size:.88rem}
  .staffel th,.staffel td{padding:.5rem .4rem}
  .staffel td:last-child{white-space:normal}
}
.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)}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .lk-schliessen,.lk-pfeil{
    background:rgba(14,26,31,.34);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
    backdrop-filter:blur(12px) saturate(1.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  }
  .lk-schliessen:hover,.lk-pfeil:hover{background:rgba(247,243,236,.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);
}

/* Die Spaltenzahl gibt der Generator als --filme mit (Anzahl der Videos,
   hoechstens sechs). So steht die Wand am Rechner in einer Reihe, ohne dass
   die letzte Zeile halb leer bleibt - bei zwei Videos wie bei sechs. */
.sozial-spur{
  display:grid;grid-template-columns:repeat(var(--filme,3),1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
.film--social{max-width:none}
.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}
/* Stufenweise schmaler: sechs am Rechner, drei am kleinen Fenster,
   zwei ab Tablet - so wie die Streifen darueber auch. */
@media (max-width:1120px){
  .sozial-spur{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .sozial-spur{grid-template-columns:repeat(2,1fr)}
}
@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);
}
/* Das Formular selbst als Milchglasflaeche. Es liegt auf dem Farbschleier
   des Abschnitts - dadurch ist der Effekt schon im ersten Schritt zu sehen
   und nicht erst, wenn der Kalender aufgeht. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .strecke{
    /* Weniger deckend als sonst: Ueber dem Foto darf man sehen, dass da
       etwas ist. Zu durchsichtig wird die Schrift unruhig - .82 ist die
       Grenze, ab der beides noch stimmt. */
    background:rgba(253,251,248,.94);
    border-color:rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.4);
    backdrop-filter:blur(30px) saturate(1.4);
    box-shadow:0 36px 90px -34px rgba(0,0,0,.5),
               inset 0 1px 0 rgba(255,255,255,.85);
  }
}
@media (prefers-reduced-transparency: reduce){
  .strecke{background:var(--papier);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Der Preis auf den buchbaren Kacheln. Er macht auf den ersten Blick
   erkennbar, dass dahinter eine Buchung steckt und nicht nur ein Formular. */
.kachel-preis{
  display:block;margin-top:.5rem;
  font-style:normal;font-size:.8rem;font-weight:600;
  color:var(--himmel-tief);font-variant-numeric:tabular-nums;
  text-decoration:none;
}
.kachel input:checked ~ .kachel-flaeche .kachel-preis{color:var(--tinte)}

.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)}

/* ── Mietwagen zur Buchung dazunehmen ─────────────────────────────────────
   Die Auswahl sitzt in Schritt 4 und ist absichtlich anders gebaut als die
   Chips daneben: ein Mietwagen kostet Geld, also braucht er eine Zeile mit
   Preis, nicht nur ein Haekchen. Form und Verhalten lehnen sich an die
   Kacheln aus Schritt 1 an, damit es dieselbe Strecke bleibt.
   ---------------------------------------------------------------------- */
.wagenblock{margin-bottom:2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--linie)}
.schritt-frage--klein{font-size:1.02rem;margin-bottom:.3rem}
.wagenwahl-liste{display:grid;gap:.6rem;margin-top:1.1rem}
.wagenwahl{cursor:pointer;position:relative;display:block}
.wagenwahl input{position:absolute;opacity:0;width:0;height:0}
.wagenwahl-flaeche{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:.1rem 1rem;align-items:center;
  padding:.95rem 1.1rem;
  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);
}
.wagenwahl-symbol{width:20px;height:20px;color:var(--taupe);
  transition:color .3s var(--ease)}
.wagenwahl-text{display:block;min-width:0}
.wagenwahl-text b{display:block;font-size:.96rem;font-weight:600;color:var(--text)}
.wagenwahl-text i{display:block;font-style:normal;font-size:.78rem;color:var(--text-3);
  margin-top:.12rem}
.wagenwahl-preis{text-align:right;line-height:1.15}
.wagenwahl-preis b{display:block;font-size:1rem;font-weight:600;color:var(--text)}
.wagenwahl-preis span{display:block;font-size:.72rem;color:var(--text-3)}
.wagenwahl-haken{
  width:16px;height:16px;color:var(--himmel-tief);
  opacity:0;transform:scale(.5);
  transition:opacity .3s var(--ease),transform .4s var(--ease-aus);
}
.wagenwahl-weg{display:none}
.wagenwahl:hover .wagenwahl-flaeche{border-color:var(--taupe);transform:translateY(-2px)}
.wagenwahl input:focus-visible + .wagenwahl-flaeche{
  outline:2px solid var(--himmel);outline-offset:3px}
.wagenwahl input:checked + .wagenwahl-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);
}
.wagenwahl input:checked + .wagenwahl-flaeche .wagenwahl-symbol{color:var(--himmel-tief)}
.wagenwahl input:checked + .wagenwahl-flaeche .wagenwahl-haken{opacity:1;transform:none}

/* "Kein Wagen" ist die Voreinstellung und soll sich nicht wie ein Angebot
   anfuehlen - schmaler, ohne Preisspalte. */
.wagenwahl--keiner .wagenwahl-flaeche{padding-top:.8rem;padding-bottom:.8rem;
  grid-template-columns:auto 1fr auto}

/* Schon vergeben: sichtbar bleiben, aber nicht anklickbar. Ein Wagen, der
   einfach verschwindet, sieht wie ein Fehler aus. */
.wagenwahl--weg{cursor:not-allowed}
.wagenwahl--weg .wagenwahl-flaeche{opacity:.5;background:var(--sand)}
.wagenwahl--weg:hover .wagenwahl-flaeche{border-color:var(--linie-2);transform:none}
.wagenwahl--weg .wagenwahl-preis{text-decoration:line-through}
.wagenwahl--weg .wagenwahl-weg{
  display:block;grid-column:2;grid-row:2;
  font-size:.72rem;color:var(--text-3);margin-top:.2rem}
.wagenwahl--weg .wagenwahl-text i{display:none}
.wagen-summe{margin-top:.9rem;font-size:.86rem;color:var(--text-2)}
.wagen-summe b{color:var(--text);font-weight:600}
@media (max-width:620px){
  .wagenwahl-flaeche{grid-template-columns:auto 1fr auto;gap:.1rem .8rem}
  .wagenwahl-preis{grid-column:2;grid-row:2;text-align:left;display:flex;
    gap:.35rem;align-items:baseline;margin-top:.2rem}
  .wagenwahl-preis b,.wagenwahl-preis span{display:inline}
  .wagenwahl-text i{display:none}
  .wagenwahl--weg .wagenwahl-weg{grid-row:3}
}

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


/* ── 14b Kalender, Preistafel und Milchglas ──────────────────────────────
   Milchglas lebt davon, dass etwas dahinterliegt. Auf der hellen Sandflaeche
   der Seite waere es unsichtbar - deshalb bekommt der Buchungsbereich einen
   weichen Farbschleier als Grund, und erst darauf liegen die Flaechen.

   Ueberall backdrop-filter zu verlangen waere falsch: Safari auf aelteren
   Geraeten kann es nicht, und ohne Rueckfall saehe man dann nur eine fast
   durchsichtige Flaeche. Deshalb steht die deckende Fassung im Grundsatz und
   das Milchglas in einem @supports darueber.
   ---------------------------------------------------------------------- */

:root{
  --glas-grund:rgba(255,253,250,.72);
  --glas-rand:rgba(255,255,255,.55);
  --glas-linie:rgba(36,48,54,.10);
  --glas-schatten:0 18px 44px -22px rgba(14,26,31,.30);
}

/* Hinter der Buchungsstrecke liegt ein Foto - die Terrasse im Abendlicht.
   Das ist keine Dekoration, sondern die Voraussetzung: Milchglas zeigt, was
   dahinterliegt. Auf hellem Sand vor hellem Sand gibt es nichts zu brechen,
   und der Effekt bleibt unsichtbar. Erst ueber einem Bild wird er sichtbar.

   Das Foto ist bewusst stark abgedunkelt und unscharf gezogen: Es soll eine
   Stimmung geben, nicht mit dem Formular um Aufmerksamkeit kaempfen. Wer
   bucht, soll auf das Formular schauen. */
/* overflow:hidden ist hier keine Kosmetik, sondern noetig: Der Hintergrund
   unten ist um 3 % vergroessert und mit 5 px weichgezeichnet. Beides laesst
   ihn ueber die Kanten des Abschnitts hinauslaufen - in die Brotkrumen
   darueber und in den naechsten Abschnitt darunter. Genau das sah man als
   schmalen Streifen ueber der Fusszeile des Bereichs. */
.abschnitt.anfrage{position:relative;isolation:isolate;overflow:hidden}
.abschnitt.anfrage::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:image-set(
    url("../img/terrasse-abend-1600.avif") type("image/avif"),
    url("../img/terrasse-abend-1600.webp") type("image/webp"));
  background-size:cover;background-position:center 38%;
  /* Ein leichter Weichzeichner nimmt dem Foto die Details, damit die
     Schrift im Formular ruhig bleibt. */
  filter:blur(5px) saturate(1.02);
  transform:scale(1.03);
}
/* Die Abdunklung liegt getrennt darueber - so laesst sie sich anpassen,
   ohne das Bild neu zu rechnen. */
.abschnitt.anfrage::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(14,26,31,.70), rgba(14,26,31,.58) 45%,
                    rgba(14,26,31,.76)),
    radial-gradient(60% 55% at 18% 12%, rgba(45,170,225,.20), transparent 70%);
}
@media (max-width:700px){
  .abschnitt.anfrage::before{background-image:image-set(
    url("../img/terrasse-abend-720.avif") type("image/avif"),
    url("../img/terrasse-abend-720.webp") type("image/webp"))}
}

.glas{
  background:var(--glas-grund);
  border:1px solid var(--glas-linie);
  border-radius:var(--radius, 2px);
  box-shadow:var(--glas-schatten), inset 0 1px 0 var(--glas-rand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .glas{
    background:rgba(255,253,250,.55);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
}

/* ---- Kalender ---------------------------------------------------- */

.kalender{
  margin-top:1.1rem;padding:1rem 1rem 1.15rem;
  background:var(--glas-grund);
  border:1px solid var(--glas-linie);
  box-shadow:var(--glas-schatten), inset 0 1px 0 var(--glas-rand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .kalender{
    background:rgba(255,253,250,.55);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
}
.kalender-kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.7rem;
}
.kalender-titel{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);margin:0;
}
.kalender-pfeil{
  width:32px;height:32px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--linie);background:transparent;
  color:var(--text);cursor:pointer;line-height:1;
  transition:background .18s var(--ease-aus), border-color .18s var(--ease-aus);
}
.kalender-pfeil:hover{background:rgba(255,255,255,.7);border-color:var(--linie-2)}
.kalender-monate{display:flex;gap:1.6rem;align-items:flex-start}
.kalender-monat{flex:1 1 0;min-width:0}
.kalender-monatstitel{
  margin:0 0 .5rem;font-weight:600;font-size:.92rem;text-align:center;
}
.kalender-gitter{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.kalender-wochentag{
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);text-align:center;padding-bottom:.3rem;
}
.kalender-tag{
  aspect-ratio:1;min-height:34px;
  display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.85rem;font-variant-numeric:tabular-nums;
  color:var(--text);border-radius:2px;
  transition:background .14s var(--ease-aus), color .14s var(--ease-aus);
}
.kalender-tag:hover:not(:disabled){background:rgba(45,170,225,.16)}
.kalender-tag:disabled{cursor:default}
.kalender-tag.ist-vorbei{color:var(--text-3);opacity:.4}
/* Belegt: durchgestrichen statt nur blass. Blass allein liest sich wie
   "ausserhalb des Monats", und dann klickt man doch darauf. */
.kalender-tag.ist-belegt{
  color:var(--text-3);text-decoration:line-through;
  text-decoration-thickness:1px;opacity:.55;
}
.kalender-tag.ist-dazwischen{background:rgba(45,170,225,.14)}
.kalender-tag.ist-anreise,.kalender-tag.ist-abreise{
  background:var(--himmel-tief);color:#fff;font-weight:600;
}
.kalender-hinweis{
  margin:.7rem 0 0;font-size:.8rem;color:var(--text-2);min-height:1.2em;
}

/* ---- Preistafel -------------------------------------------------- */

.preistafel{
  margin-top:.9rem;padding:.9rem 1rem;
  background:var(--glas-grund);
  border:1px solid var(--glas-linie);
  box-shadow:var(--glas-schatten), inset 0 1px 0 var(--glas-rand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .preistafel{
    background:rgba(255,253,250,.55);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
}
.preis-satz{margin:0;font-size:1.05rem}
.preis-satz span{color:var(--text-2);font-size:.86rem}
.preis-liste{
  display:grid;grid-template-columns:1fr auto;gap:.34rem 1rem;margin:0;
}
.preis-liste dt{color:var(--text-2);font-size:.9rem}
.preis-liste dd{
  margin:0;text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem;
}
.preis-liste .preis-summe{
  border-top:1px solid var(--linie);padding-top:.44rem;margin-top:.24rem;
  font-weight:600;font-size:1rem;color:var(--text);
}

/* ---- Zustimmung und Buchungsknopf -------------------------------- */

.buchen-block{
  margin-top:1.2rem;padding:1rem 1.1rem;
  display:grid;gap:.6rem;
  background:var(--glas-grund);
  border:1px solid var(--glas-linie);
  box-shadow:inset 0 1px 0 var(--glas-rand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .buchen-block{
    background:rgba(255,253,250,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
  }
}
.buchen-block .klein{margin:0}
.knopf--buchen{background:var(--himmel-tief);border-color:var(--himmel-tief)}

/* Kleingedrucktes im Formular: Schrittzaehler, Feldbeschriftungen, der
   Kicker ueber der Zusammenfassung. Sie standen auf --text-3 und waren auf
   der Glasflaeche kaum zu lesen. */
.abschnitt.anfrage .strecke label,
.abschnitt.anfrage .strecke .feld > label,
.abschnitt.anfrage .uebersicht-titel,
.abschnitt.anfrage .strecke-kopf{color:var(--text-2)}
.abschnitt.anfrage .uebersicht dt{color:var(--text-2)}
.abschnitt.anfrage .uebersicht dd{color:var(--text)}

/* Der Hinweis steht INNERHALB des Formulars, also auf der hellen Flaeche.
   Er braucht dort dunkle Schrift - helle war unsichtbar. */
.abschnitt.anfrage .anfrage-hinweis{color:var(--text-2)}
.abschnitt.anfrage .anfrage-hinweis a{color:var(--himmel-tief)}
.knopf--buchen:hover{background:var(--tinte);border-color:var(--tinte)}

@media (max-width:700px){
  .kalender-monate{gap:0}
  .kalender{padding:.8rem .7rem 1rem}
  .kalender-tag{min-height:38px;font-size:.9rem}
}
/* Wer Transparenz abbestellt hat, bekommt deckende Flaechen. */
@media (prefers-reduced-transparency: reduce){
  .glas,.kalender,.preistafel,.buchen-block{
    background:#FFFDFA;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}


/* ---- Bestaetigung nach einer Anfrage ------------------------------ */

.anfrage-danke{
  display:grid;gap:.7rem;
  padding:clamp(1.4rem,4vw,2.4rem) 0;
  text-align:center;
}
.anfrage-danke-titel{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.15;margin:0;
}
.anfrage-danke p{margin:0;max-width:48ch;margin-inline:auto}


/* ---- Dankeseite nach der Buchung --------------------------------- */

.abschnitt.danke{padding-block:clamp(4rem,10vw,8rem);position:relative;isolation:isolate}
.abschnitt.danke::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 22% 16%, rgba(45,170,225,.15), transparent 70%),
    radial-gradient(52% 48% at 84% 80%, rgba(139,123,113,.14), transparent 72%);
}
.danke-flaeche{
  padding:clamp(1.6rem,4vw,2.8rem);
  background:var(--glas-grund);
  border:1px solid var(--glas-linie);
  box-shadow:var(--glas-schatten), inset 0 1px 0 var(--glas-rand);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .danke-flaeche{
    background:rgba(255,253,250,.55);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
}
.danke-nummer{
  margin:1.2rem 0 .4rem;padding:.7rem .9rem;
  border:1px dashed var(--linie-2);
  font-variant-numeric:tabular-nums;
}
.danke-nummer span{color:var(--text-2);font-size:.82rem;display:block}
.danke-nummer b{font-size:1.05rem;letter-spacing:.04em;word-break:break-all}
.danke-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
@media (prefers-reduced-transparency: reduce){
  .danke-flaeche{background:#FFFDFA;-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* ── 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 ist der einzige Abschnitt mit eigenem Hintergrund. Fuer sie
   darf die Regel "aufeinanderfolgende Abschnitte bekommen keinen doppelten
   Abstand" nicht gelten: ohne Innenabstand beginnt die Farbflaeche exakt an
   der ersten Textzeile, und das sieht aus wie ein Fehler.

   Der Abstand muss INNEN liegen, nicht als Aussenabstand davor - sonst
   schwebt ein heller Streifen zwischen zwei Abschnitten und das Band wirkt
   angeschnitten. Deshalb margin-top 0 und dafuer padding-top.

   Wichtig ist der Selektor: ".sozialwand" allein verliert gegen
   ".abschnitt + .abschnitt{padding-top:0}", weil der zwei Klassen hat.
   Deshalb steht hier derselbe Selektortyp. */
.sozialwand{padding-block:clamp(4.5rem,10vw,9rem)}
.abschnitt + .sozialwand{
  margin-top:0;
  padding-top:clamp(4.5rem,10vw,9rem);
}

/* Dasselbe fuer die Buchungsstrecke, und zwar in beide Richtungen: Sie hat
   einen eigenen Hintergrund, also darf "aufeinanderfolgende Abschnitte
   bekommen keinen doppelten Abstand" hier nicht greifen. Ohne das steht die
   Ueberschrift des naechsten Abschnitts 26 px nach der Kante und klebt am
   dunklen Band. */
.abschnitt.anfrage + .abschnitt{padding-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}
}