/* =========================================================================
   Australien 1:1, Landingpage
   Art Direction "Die Strecke", Editorial Roadtrip
   Der Hintergrund wandert über die Seite von Nacht zu Tag.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Farbwelt, entnommen aus dem eigenen Bildmaterial */
  --asphalt:      #0F1012;   /* Nachtstraße */
  --dusk:         #17191C;
  --dust:         #241F1B;   /* warme, staubige Dunkelheit */
  --bone:         #EDE7DD;   /* trockenes Gras, Schotter */
  --bone-lit:     #F6F1E8;
  --laterite:     #B04527;   /* roter Sandstreifen am Straßenrand */
  --laterite-dk:  #7A2E19;
  --hivis:        #FF6B14;   /* Warnkleidung, nur für Aktionen */
  --eucalypt:     #59654F;
  --sky:          #A6BAC4;
  --ink:          #121212;

  /* Rollen, werden pro Kapitel überschrieben */
  --bg:      var(--asphalt);
  --fg:      #F2EEE7;
  --muted:   #A5A099;
  --rule:    rgba(242,238,231,.14);
  --accent:  var(--hivis);
  --card:    rgba(255,255,255,.04);

  /* Typo */
  --display: "Archivo Variable", "Helvetica Neue Condensed", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Maße */
  --pad:      clamp(1.25rem, 5vw, 2.5rem);
  --gutter:   clamp(2.5rem, 6vw, 5rem);
  --maxw:     1280px;
  --route-w:  34px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 900px){
  :root{ --route-w: 92px; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--asphalt);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .28vw, 1.125rem);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
summary::-webkit-details-marker{ display:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--hivis); color:#000; padding:.75rem 1.25rem; font-weight:600;
}
.skip:focus{ left:0; }

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

/* =========================================================================
   Kapitel, der Tageslauf der Seite
   ========================================================================= */
.chapter{
  background:var(--bg);
  color:var(--fg);
  position:relative;
  transition:background-color .6s linear;
}
.chapter--night{ --bg:var(--asphalt); --fg:#F2EEE7; --muted:#8F8B85; --rule:rgba(242,238,231,.14); --card:rgba(255,255,255,.045); }
.chapter--dusk { --bg:var(--dusk);    --fg:#EFEAE2; --muted:#918C85; --rule:rgba(239,234,226,.15); --card:rgba(255,255,255,.05); }
.chapter--dust { --bg:var(--dust);    --fg:#F1E9E0; --muted:#A79A8E; --rule:rgba(241,233,224,.16); --card:rgba(255,255,255,.05); }
.chapter--day  { --bg:var(--bone);    --fg:var(--ink); --muted:#5E584F; --rule:rgba(18,18,18,.14); --card:rgba(18,18,18,.035); }
.chapter--noon { --bg:var(--bone-lit);--fg:var(--ink); --muted:#5E584F; --rule:rgba(18,18,18,.14); --card:rgba(18,18,18,.04); }

/* =========================================================================
   Layout
   ========================================================================= */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-left:calc(var(--pad) + var(--route-w) * .55);
}
/* Alles hängt an derselben linken Achse wie die Route.
   Nur die Wende-Sektion bricht das bewusst. */
.wrap--narrow{ max-width:calc(720px + var(--route-w) * .55); margin-inline:0; }
.wrap--mid{ max-width:calc(940px + var(--route-w) * .55); margin-inline:0; }
.wrap--center{ margin-inline:auto; }

.sec{ padding-block:clamp(3.9rem, 10vw, 9rem); }
.sec--wende{ padding-block:clamp(3.5rem, 9vw, 7rem); }
.sec--gedanke{ padding-bottom:clamp(2.5rem, 6vw, 5rem); }

/* =========================================================================
   Typografie
   ========================================================================= */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.35rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:1px; background:currentColor; flex:none; opacity:.7;
}

.h2{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(2rem, 1.15rem + 4.1vw, 4.2rem);
  line-height:.98;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin-bottom:1.5rem;
}
.h2--wide{ font-stretch:122%; }
.h2--full{ max-width:none; }
.h2--bare{ margin-top:0; }
.h2--center{ text-align:center; max-width:17ch; margin-inline:auto; }
.h2--cta{ font-size:clamp(2.2rem, 1.2rem + 4.6vw, 4.6rem); }

.h3{ font-family:var(--display); font-weight:700; font-stretch:108%; }

.lead{
  font-size:clamp(1.06rem, 1rem + .5vw, 1.32rem);
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
  text-wrap:pretty;
}
.lead--wide{ max-width:58ch; }
.lead--center{ margin-inline:auto; text-align:center; }

.label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:2rem 0 .85rem;
}

.cutline{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.3rem, 1rem + 1.4vw, 2rem);
  line-height:1.15; letter-spacing:-.015em;
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:1.6rem; border-top:1px solid var(--rule);
  max-width:24ch;
}
.cutline--soft{ color:var(--accent); border-top-color:var(--rule); }
.cutline--wide{ max-width:34ch; font-stretch:104%; }
.cutline__src{
  margin-top:.9rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1rem; letter-spacing:.005em; text-decoration:none;
  padding:1.05rem 1.75rem; min-height:56px;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary{
  background:var(--hivis); color:#12100E;
  box-shadow:0 0 0 0 rgba(255,107,20,.45);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(255,107,20,.8); }
.btn--primary:active{ transform:translateY(0); }
.btn--ghost{
  background:transparent; color:var(--fg);
  border-color:var(--rule); padding:.65rem 1.15rem; min-height:44px; font-size:.9rem;
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--block{ width:100%; }

/* =========================================================================
   Route, das Signature-Element
   ========================================================================= */
/* Die Route zeigt Scroll-Fortschritt. Ohne JavaScript oder bei reduzierter
   Bewegung hätte sie keine Funktion. Dann bleibt sie aus. */
.route{ display:none; }
.js .route{
  position:fixed; z-index:60;
  left:calc(var(--pad) * .55); top:0; bottom:0;
  width:var(--route-w);
  pointer-events:none;
  display:flex; justify-content:flex-start;
}
.route__track{
  position:absolute; left:5px; top:0; bottom:0; width:1px;
  background-image:repeating-linear-gradient(to bottom, rgba(148,148,148,.45) 0 7px, transparent 7px 16px);
  transition:background-image .5s ease;
}
.route.is-solid .route__track{
  background-image:linear-gradient(to bottom, rgba(148,148,148,.45), rgba(148,148,148,.45));
}
.route__fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:var(--hivis);
  box-shadow:0 0 8px rgba(255,107,20,.6);
}
.route__dot{
  position:absolute; left:1px; width:9px; height:9px; border-radius:50%;
  background:var(--hivis); top:0; transform:translateY(-50%);
  box-shadow:0 0 0 3px rgba(15,16,18,.55), 0 0 0 6px rgba(255,107,20,.18);
}
.route__label{
  position:absolute; left:20px; top:0;
  transform:translateY(-50%);
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--hivis);
  writing-mode:vertical-rl;
  display:none;
}
@media (min-width: 900px){ .route__label{ display:block; } }
@media (max-width: 480px){ .route{ opacity:.55; } }

/* =========================================================================
   Topbar
   ========================================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad);
  padding-left:calc(var(--pad) + var(--route-w) * .55);
  background:rgba(15,16,18,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-102%);
  transition:transform .4s var(--ease);
  --fg:#F2EEE7; --rule:rgba(255,255,255,.2); --accent:var(--hivis);
  color:#F2EEE7;
}
.topbar.is-visible{ transform:translateY(0); }
.topbar__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; min-height:44px; }
.topbar__mark{ width:9px; height:9px; border-radius:50%; background:var(--hivis); flex:none; }
.topbar__name{ font-family:var(--display); font-weight:700; font-stretch:110%; font-size:.95rem; letter-spacing:-.01em; }
.topbar__cta{ flex:none; }
.topbar__rechts{ display:flex; align-items:center; gap:clamp(.6rem,2vw,1.1rem); flex:none; }
/* Sprachauswahl: zwei Kuerzel, das aktive gedimmt, das andere anklickbar */
.sprache{
  display:flex; align-items:center; gap:.15rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
}
.sprache span,
.sprache a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; min-height:36px; padding:.25rem .5rem;
  text-decoration:none; border-radius:2px; font-weight:500;
}
/* Die aktive Sprache ist nur die Beschriftung, die andere ist der Knopf.
   Deshalb bekommt sie den Rahmen und den Kontrast, nicht umgekehrt. */
.sprache__aktiv{ color:var(--muted); background:none; }
.sprache a{
  color:var(--fg); border:1px solid var(--rule); background:var(--card);
}
.sprache a:hover,.sprache a:focus-visible{ border-color:var(--accent); color:var(--accent); }

/* Im Hero sichtbar, bevor die Kopfzeile beim Scrollen einfaehrt */
.sprache--hero{
  position:absolute; z-index:3;
  top:clamp(3.1rem,7vw,4.4rem); right:var(--pad);
}
.sprache--hero .sprache__aktiv{
  color:rgba(30,16,6,.6); text-shadow:0 1px 6px rgba(255,240,225,.6);
}
.sprache--hero a{
  color:#12100E; background:rgba(255,247,238,.9);
  border-color:rgba(30,16,6,.35);
  box-shadow:0 2px 10px rgba(40,22,12,.18);
}
.sprache--hero a:hover,.sprache--hero a:focus-visible{
  background:var(--hivis); border-color:var(--hivis); color:#12100E;
}
.sprache a{ color:var(--muted); }
.sprache a:hover,.sprache a:focus-visible{ color:var(--accent); }
@media (max-width:520px){
  .topbar__cta{ font-size:.82rem; padding:.55rem .9rem; }
  .sprache{ font-size:.66rem; }
  .sprache span,.sprache a{ min-width:28px; padding:.2rem .2rem; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(3.5rem, 9vw, 6rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }

/* Der Himmel bleibt hell. Nur der Fuß wird abgedunkelt, damit die Schrift trägt. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(24,12,6,.10) 0%,
    rgba(24,12,6,0)   18%,
    rgba(18,14,12,.20) 42%,
    rgba(15,16,18,.80) 72%,
    rgba(15,16,18,.985) 100%);
}

/* Abfahrtstafel quer über den Himmel */
.hero__band{
  position:absolute; top:clamp(1.4rem,4vw,2.4rem); z-index:2;
  left:calc(var(--pad) + var(--route-w) * .55); right:var(--pad);
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(40,22,12,.78);
}
/* Nur ein Strich zwischen Start und Ziel, ohne Pfeilspitze. */
.hero__band-line{
  position:relative; flex:1; height:1px; background:rgba(40,22,12,.34); transform-origin:0 50%;
}
.hero__band-ziel{ color:rgba(40,22,12,.95); font-weight:500; }
.js .hero__band{ opacity:0; }
@media (max-width:420px){ .hero__band{ font-size:.55rem; letter-spacing:.14em; gap:.6rem; } }

.hero__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  padding-left:calc(var(--pad) + var(--route-w) * .55);
}
.hero__inner{ display:flex; flex-direction:column; align-items:flex-start; }
.herotag{
  display:inline-flex; align-self:flex-start; align-items:center;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:#FFE0C2;
  background:rgba(14,10,7,.66);
  border-left:2px solid var(--hivis);
  padding:.55rem .9rem;
  margin-bottom:1.35rem;
  line-height:1.4;
  backdrop-filter:blur(4px);
}
@media (max-width:430px){ .herotag{ font-size:.6rem; letter-spacing:.1em; } }

/* Die Breitenachse der Schrift trägt die Hierarchie:
   weit + fett = die Ansage, schmal + leicht = der Einwurf. */
.hero__title{
  font-family:var(--display);
  font-weight:800;
  font-stretch:106%;
  font-size:clamp(2.05rem, .95rem + 5.1vw, 4.7rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 1.35rem;
}
@media (min-width:760px){ .hero__title{ font-stretch:118%; } }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title .line--alt{
  font-weight:400;
  font-stretch:78%;
  /* Groesse so gewaehlt, dass die Zeile exakt so breit laeuft wie "Australien." darueber.
     Zwei Werte, weil die Hauptzeile ab 760px breiter gesetzt wird (118% statt 106%). */
  font-size:.693em;
  letter-spacing:0;
  color:#E4D9C9;
  line-height:1.3;
  padding-block:.12em .06em;
}
@media (min-width:760px){ .hero__title .line--alt{ font-size:.764em; } }
/* Anlauf auf die grosse Zeile. Gehoert sichtbar zur Headline, laesst
   "Australien." aber die Ansage bleiben: schmaler und halb so gross. */
.hero__title .line--vor{
  font-weight:800;
  font-stretch:76%;
  font-size:.52em;
  letter-spacing:-.02em;
  color:#F4EADC;
  line-height:1.06;
  padding-block:.06em .04em;
}
@media (min-width:760px){ .hero__title .line--vor{ font-size:.5em; } }
.hero__lead{
  font-size:clamp(1rem, .95rem + .45vw, 1.2rem);
  line-height:1.55; color:#C9C1B6; max-width:42ch; margin-bottom:1.75rem;
}
.hero__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.hero__micro{ font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:#968E85; line-height:1.6; }

.crew{
  position:absolute; z-index:2;
  right:var(--pad); bottom:clamp(1.5rem,4vw,2.75rem);
  display:none; align-items:center; gap:.75rem;
}
@media (min-width:960px){ .crew{ display:flex; } }
.crew__faces{ display:flex; flex:none; }
.crew__faces img{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px rgba(14,10,8,.85), 0 4px 14px rgba(0,0,0,.5);
}
.crew__faces img + img{ margin-left:-13px; }
.crew__text{
  font-family:var(--mono); font-size:.7rem; line-height:1.5; letter-spacing:.04em;
  color:#D6CCC0; text-shadow:0 1px 10px rgba(12,8,4,.95);
}
.crew__text strong{ font-family:var(--display); font-weight:700; font-stretch:106%; font-size:.86rem; letter-spacing:.01em; color:#F4F0E9; }

.hero__cue{
  position:absolute; left:calc(var(--pad) * .55 + 5px); bottom:0;
  width:1px; height:clamp(3rem,7vw,5rem);
  background:linear-gradient(to bottom, transparent, var(--hivis));
}

/* =========================================================================
   Filmstrip, der Blick nach draußen
   ========================================================================= */
.filmstrip{
  margin-top:clamp(2.5rem, 7vw, 4.5rem);
  margin-left:calc(var(--pad) + var(--route-w) * .55);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filmstrip::-webkit-scrollbar{ display:none; }
.filmstrip__rail{
  display:flex; gap:clamp(.75rem,2vw,1.25rem);
  padding-right:var(--pad);
  width:max-content;
  align-items:flex-start;
}
.frame{ flex:none; scroll-snap-align:center; position:relative; width:clamp(210px, 60vw, 330px); }
/* Alle Bilder und Videos der Strecke laufen im gleichen Format, damit die Zeile ruhig bleibt. */
.frame img,
.frame video{ border-radius:1px; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; background:#1A1512; }
.frame figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; line-height:1.5;
  color:var(--muted); margin-top:.7rem; min-height:3.1em;
}

/* =========================================================================
   Die Liste, der Stapel
   ========================================================================= */
.pile{
  margin-top:clamp(2.5rem,7vw,4rem);
  display:flex; flex-wrap:wrap; gap:.45rem;
  max-width:1000px;
}
@media (min-width:760px){ .pile{ gap:.6rem; } .pile li{ padding:.72rem 1.05rem; font-stretch:100%; } }
.pile li{
  font-family:var(--display); font-weight:500; font-stretch:96%;
  font-size:clamp(.78rem,.72rem + .35vw,1.05rem);
  line-height:1.25;
  padding:.55rem .8rem;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  color:#D8D2CA;
  will-change:transform;
}
.pile li:nth-child(3n)  { transform:rotate(-.6deg); opacity:.82; }
.pile li:nth-child(4n+2){ opacity:.7; }
.pile li:nth-child(5n+3){ transform:rotate(.5deg); }
.pile li:last-child{
  border-color:var(--hivis); color:#12100E; background:var(--hivis);
  font-weight:700; opacity:1; transform:none;
}

/* =========================================================================
   Vollbild-Zitat, bricht den Rhythmus einmal bewusst
   ========================================================================= */
.statement{
  position:relative; isolation:isolate;
  min-height:clamp(24rem, 62vh, 34rem);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,9vw,6rem) var(--pad) clamp(3rem,9vw,6rem);
  padding-left:calc(var(--pad) + var(--route-w) * .55);
  background:var(--dust); color:#F6F0E7;
  overflow:hidden;
}
.statement__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
}
@media (max-width:759px){ .statement__bg{ object-position:62% 58%; } }
.statement::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(18,12,8,.94) 0%, rgba(18,12,8,.76) 46%, rgba(18,12,8,.34) 100%),
    linear-gradient(to bottom, rgba(18,12,8,.45), rgba(18,12,8,.15) 40%, rgba(18,12,8,.55));
}
.statement__text{
  font-family:var(--display); font-weight:800; font-stretch:104%;
  font-size:clamp(1.55rem, 1rem + 2.5vw, 3.1rem);
  line-height:1.06; letter-spacing:-.028em;
  max-width:19ch;
}
.statement__text em{ font-style:normal; font-weight:400; font-stretch:76%; color:#FFB27A; }
.statement__src{
  margin-top:1.4rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:#C0B2A4;
}

/* =========================================================================
   Personen
   ========================================================================= */
.person{ display:grid; gap:clamp(2rem,6vw,4rem); }
@media (min-width: 960px){
  .person{ grid-template-columns:1fr 1fr; align-items:start; gap:clamp(3rem,6vw,6rem); }
  .person--flip .person__media{ order:2; }
}

.person__media{ position:relative; }
.person__shot--main img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.person__shot--sub{
  position:absolute; right:-.5rem; bottom:-1.75rem; width:44%;
  border:6px solid var(--bg);
}
.person__shot--sub img,
.person__shot--sub video{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; background:#1A1512; }
.sec--person-flip .person__shot--sub{ left:-.5rem; right:auto; }
.person__shot--chip{
  position:absolute; left:-.5rem; top:-1.25rem; width:88px;
  border:5px solid var(--bg); border-radius:50%; overflow:hidden;
}
.sec--person-flip .person__shot--chip{ right:-.5rem; left:auto; }
.person__shot--chip img{ width:100%; aspect-ratio:1; object-fit:cover; }
@media (max-width:520px){
  .person__shot--sub{ width:50%; bottom:-1.25rem; }
  .person__shot--chip{ width:66px; }
}

/* Die Bildunterschrift haengt an der Aussenkante des kleinen Bildes.
   Steht das Bild rechts (normale Reihenfolge), laeuft die Zeile nach links weg. */
.shotcap{
  position:absolute; right:0; left:auto; top:calc(100% + .5rem);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em;
  color:var(--muted); white-space:nowrap; text-align:right;
}
.sec--person-flip .shotcap{ left:0; right:auto; text-align:left; }
.person__body{ padding-top:clamp(2.25rem,6vw,0rem); }
.pullquote{
  font-family:var(--display); font-weight:800; font-stretch:104%;
  font-size:clamp(1.55rem, 1.05rem + 2.1vw, 2.7rem);
  line-height:1.03; letter-spacing:-.025em;
  margin-bottom:1.5rem;
}
.person__intro{ color:var(--muted); max-width:48ch; margin-bottom:.9rem; }
.person__role{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem); letter-spacing:-.015em;
  color:var(--accent); margin-bottom:.9rem;
}
.person__close{
  margin-top:1.75rem; padding-left:1.1rem;
  border-left:2px solid var(--accent);
  font-style:italic; color:var(--fg); max-width:46ch;
}

.run{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.run li{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.01em; line-height:1.3;
  padding:.42rem .7rem; border:1px solid var(--rule); border-radius:2px;
  color:var(--muted);
}
.run li:last-child{ border-color:var(--accent); color:var(--accent); }

.iglink{
  display:inline-flex; align-items:center; gap:.15rem;
  min-height:44px; margin-top:1.4rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em;
  text-decoration:none; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .2s ease;
}
.iglink:hover{ opacity:.68; }
.iglink__at{ opacity:.55; }

/* =========================================================================
   Die Scheine als Beleg-Liste, nicht als Produktkarten
   ========================================================================= */
.tickets{
  margin-top:clamp(2rem,5vw,3rem);
  display:grid; gap:clamp(2rem,5vw,3.5rem);
}
@media (min-width: 940px){
  .tickets{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); align-items:start; }
}
.ticketlist{ margin-top:clamp(1.75rem,4vw,2.5rem); border-top:1px solid var(--rule); }
.ticketlist li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.tl__name{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:clamp(1.02rem,.95rem + .5vw,1.3rem); letter-spacing:-.012em; line-height:1.2;
}
.tl__meta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-left:auto; white-space:nowrap;
}
.tickets__shot img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.tickets__shot figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; line-height:1.5;
  color:var(--muted); margin-top:.7rem;
}

/* =========================================================================
   Etappen, die Route wird hier zur Zeitachse
   ========================================================================= */
.etappen{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:0;
  position:relative;
}
.etappe{
  position:relative;
  display:grid; gap:.55rem;
  padding:clamp(1.9rem,4vw,2.9rem) 0 clamp(1.9rem,4vw,2.9rem) 2.1rem;
  border-top:1px solid var(--rule);
}
.etappe:last-child{ border-bottom:1px solid var(--rule); }
/* Achse + Haltepunkt */
.etappe::before{
  content:""; position:absolute; left:5px; top:0; bottom:0; width:1px;
  background:var(--rule);
}
.etappe:first-child::before{ top:calc(clamp(1.9rem,4vw,2.9rem) + .55em + 5px); }
.etappe:last-child::before{ bottom:50%; }
.etappe::after{
  content:""; position:absolute; left:0; top:calc(clamp(1.9rem,4vw,2.9rem) + .55em);
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent);
}
.etappe--small::after{ width:9px; height:9px; border-color:var(--muted); }

@media (min-width: 880px){
  .etappe{
    grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
    column-gap:clamp(1.5rem,4vw,3rem);
    padding-left:2.6rem;
  }
}
.etappe__kicker{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); padding-top:.35rem;
}
.etappe--small .etappe__kicker{ color:var(--muted); }
.etappe__title{
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:clamp(1.45rem,1.1rem + 1.8vw,2.4rem); line-height:1.04; letter-spacing:-.022em;
  margin-bottom:.5rem;
}
.etappe--small .etappe__title{
  font-size:clamp(1.15rem,1rem + .95vw,1.55rem); font-stretch:104%;
}
.etappe__body p{ color:var(--muted); max-width:56ch; }
.etappe--small .etappe__body p{ font-size:.94rem; }

/* Die letzte Etappe ist das Argument, das sonst keiner hat */
.etappe--hero{
  background:var(--dust); color:#F3ECE3;
  --muted:#B0A296; --rule:rgba(243,236,227,.18);
  margin-top:.9rem; padding-inline:1.6rem 1.6rem;
  border:none; border-radius:2px;
}
.etappe--hero::before{ display:none; }
.etappe--hero::after{ left:1.6rem; background:var(--dust); }
@media (min-width: 880px){
  .etappe--hero{ padding-left:2.9rem; padding-right:2.4rem; }
  .etappe--hero::after{ left:1.6rem; }
}
.etappe--hero .etappe__title{ color:#FFF3E8; }

/* Inline-CTA im Textfluss statt Button-Wüste */
.inlinecta{
  margin-top:clamp(2rem,5vw,3rem);
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.05rem,.98rem + .55vw,1.35rem); letter-spacing:-.012em;
  color:var(--muted);
}
.inlinecta a{
  color:var(--accent); text-decoration:none;
  border-bottom:2px solid currentColor;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding-bottom:.2rem;
  transition:gap .2s var(--ease), opacity .2s ease;
}
.inlinecta a:hover{ gap:.75rem; opacity:.8; }

/* =========================================================================
   Leistungen
   ========================================================================= */
.cols{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  display:grid; gap:clamp(2rem,4vw,3rem);
}
@media (min-width: 900px){ .cols{ grid-template-columns:repeat(3,1fr); } }
.col__head{
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:1.05rem; letter-spacing:.01em; text-transform:uppercase;
  padding-bottom:.75rem; margin-bottom:1.1rem; border-bottom:2px solid var(--fg);
}
.checks li{
  padding:.75rem 0; border-bottom:1px solid var(--rule);
  font-size:.96rem; line-height:1.5; color:var(--muted);
}
.checks li strong{ color:var(--fg); font-weight:600; }

/* =========================================================================
   Arbeit / Geld
   ========================================================================= */
.workgrid{
  margin-top:clamp(2.5rem,6vw,4rem);
  margin-bottom:clamp(2.5rem,6vw,4rem);
  display:grid; gap:2px;
  grid-template-columns:repeat(2,1fr);
  padding-left:calc(var(--pad) * .55 + 24px);
}
@media (min-width: 900px){ .workgrid{ padding-left:calc(var(--route-w) * .55 + 24px); } }
@media (min-width: 900px){ .workgrid{ grid-template-columns:repeat(4,1fr); align-items:stretch; } }
.workshot{ position:relative; }
.workshot img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width: 899px){ .workshot img{ aspect-ratio:1; } }
.workshot figcaption{
  position:absolute; left:.85rem; bottom:.7rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.05em;
  color:#F2ECE3; text-shadow:0 1px 8px rgba(0,0,0,.95);
}

.facts{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
/* passt sich der Anzahl der Kacheln an, damit keine leere Spalte stehen bleibt */
@media (min-width: 860px){ .facts{ grid-auto-flow:column; grid-auto-columns:1fr; } }
.fact{
  padding:1.5rem 0; border-bottom:1px solid var(--rule);
}
@media (min-width: 860px){
  .fact{ padding:1.75rem clamp(1rem,2vw,1.75rem) 1.75rem 0; border-bottom:none; border-right:1px solid var(--rule); }
  .fact:last-child{ border-right:none; }
}
.fact__num{
  font-family:var(--display); font-weight:800; font-stretch:114%;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem); line-height:1.05; letter-spacing:-.02em;
  color:var(--accent); margin-bottom:.5rem;
}
.fact__txt{ font-size:.92rem; line-height:1.55; color:var(--muted); }

/* =========================================================================
   Versus
   ========================================================================= */
.versus{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  display:grid; gap:0;
  border:1px solid var(--rule);
}
@media (min-width: 820px){ .versus{ grid-template-columns:1fr 1fr; } }
.versus__side{ padding:clamp(1.5rem,4vw,2.5rem); }
.versus__side + .versus__side{ border-top:1px solid var(--rule); }
@media (min-width: 820px){
  .versus__side + .versus__side{ border-top:none; border-left:1px solid var(--rule); }
}
.versus__side--us{ background:var(--card); }
.versus__head{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.25rem;
}
.versus__side--us .versus__head{ color:var(--accent); }
.versus__list li{
  padding:.7rem 0; border-bottom:1px solid var(--rule);
  font-size:.98rem; line-height:1.45;
}
.versus__list li:last-child{ border-bottom:none; }
.versus__side:not(.versus__side--us) .versus__list li{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--rule); text-decoration-thickness:1px; }
.versus__list em{ font-style:normal; color:var(--accent); }

/* =========================================================================
   Was es nicht ist
   ========================================================================= */
.nots{ margin-top:clamp(2rem,5vw,3rem); display:grid; gap:0; max-width:64ch; }
.nots li{
  padding:1.15rem 0; border-bottom:1px solid var(--rule);
  color:var(--muted); font-size:1rem; line-height:1.55;
}
.nots li:first-child{ border-top:1px solid var(--rule); }
.nots strong{
  color:var(--fg); font-family:var(--display); font-weight:700; font-stretch:108%;
  letter-spacing:-.005em;
}

.honest{
  margin-top:clamp(2rem,5vw,2.75rem);
  padding-left:1.1rem; border-left:1px solid var(--rule);
  font-size:.95rem; line-height:1.65; color:var(--muted); max-width:56ch;
}


/* =========================================================================
   Preis: drei Pakete nebeneinander, darunter die Gegenrechnung
   ========================================================================= */
.pakete{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  align-items:stretch;
}
@media (min-width: 900px){
  .pakete{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* Jedes Paket ist eine eigene Karte, damit man auf einen Blick sieht,
   dass hier drei Angebote stehen und nicht ein Textblock. */
.paket{
  position:relative;
  background:#F7F2EA;
  border:1px solid var(--rule);
  border-radius:3px;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.25rem,2.5vw,1.75rem) clamp(1.5rem,3vw,2rem);
  display:flex; flex-direction:column;
}
.paket--top{
  background:#12100E; border-color:#12100E;
  box-shadow:0 18px 40px rgba(28,18,10,.18);
}
/* Wer das Paket macht, steht als runde Portraits oben rechts in der Karte */
.paket__koepfe{
  position:absolute; top:clamp(1.1rem,2.5vw,1.5rem); right:clamp(1.1rem,2.5vw,1.5rem);
  display:flex;
}
.paket__koepfe img{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px #F7F2EA, 0 3px 10px rgba(28,18,10,.22);
}
.paket__koepfe img + img{ margin-left:-13px; }
.paket--top .paket__koepfe img{ box-shadow:0 0 0 2px #12100E, 0 3px 10px rgba(0,0,0,.5); }
@media (max-width:420px){ .paket__koepfe img{ width:38px; height:38px; } }

.paket__nr{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); border:1px solid currentColor; border-radius:99px;
  padding:.3rem .7rem; margin-bottom:1.1rem;
}
.paket__nr--top{ background:var(--accent); border-color:var(--accent); color:#12100E; }
.paket__name{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(1.6rem,1.3rem + 1.4vw,2.1rem); line-height:1; letter-spacing:-.03em;
  color:var(--fg); margin:0; padding-right:4.5rem;
}
.paket__mit{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.07em;
  color:var(--muted); margin-top:.5rem;
}
.paket__zahl{
  margin-top:1.15rem;
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(2.3rem, 1.7rem + 2.6vw, 3.1rem);
  line-height:.9; letter-spacing:-.035em; color:var(--fg);
}
.paket__zahl span{
  font-family:var(--mono); font-weight:400; font-stretch:100%;
  font-size:.72rem; letter-spacing:.08em; color:var(--muted);
  margin-left:.45rem; vertical-align:.35em;
}
.paket__alt{ margin-top:.6rem; font-size:.86rem; color:var(--muted); }
.paket__alt s{ opacity:.75; }
.paket__alt strong{ color:var(--accent); font-weight:600; }
.paket__fuer{
  margin-top:.9rem; font-size:.95rem; line-height:1.45; color:var(--fg);
}
.paket__liste{ margin-top:1.25rem; border-top:1px solid var(--rule); }
.paket__liste li{
  position:relative; padding:.6rem 0 .6rem 1.15rem; border-bottom:1px solid var(--rule);
  font-size:.9rem; line-height:1.45; color:var(--muted);
}
.paket__liste li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:.4rem; height:.4rem; border-radius:50%; background:var(--accent);
}
.paket__liste{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.paket__btn{ margin-top:auto; align-self:stretch; text-align:center; }
/* Die dunkle Karte dreht die Farben um */
.paket--top .paket__name,
.paket--top .paket__zahl{ color:#F7F2EA; }
.paket--top .paket__mit,
.paket--top .paket__fuer,
.paket--top .paket__liste li,
.paket--top .paket__alt{ color:#B3A99D; }
.paket--top .paket__fuer{ color:#E6DDD1; }
.paket--top .paket__liste,
.paket--top .paket__liste li{ border-color:rgba(247,242,234,.16); }

.btn--linie{
  background:transparent; color:var(--fg);
  border:1px solid var(--fg);
}
.btn--linie:hover,.btn--linie:focus-visible{ background:var(--fg); color:#F7F2EA; }

.preis__hinweis{
  margin-top:clamp(1.5rem,3vw,2rem);
  font-family:var(--mono); font-size:.72rem; line-height:1.7; letter-spacing:.02em;
  color:var(--muted); max-width:56ch;
}

/* Ein belegter Fall, bewusst klein gehalten */
.beleg{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,1.75rem);
  border:1px solid var(--rule); border-left:2px solid var(--accent);
}
.beleg__kicker{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.7rem;
}
.beleg__text{
  font-family:var(--display); font-weight:700; font-stretch:104%;
  font-size:clamp(1.02rem,.96rem + .5vw,1.28rem); line-height:1.4; letter-spacing:-.01em;
  color:var(--fg); max-width:52ch;
}
.beleg__fuss{
  margin-top:.7rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--muted);
}

.preis__gegen{ margin-top:clamp(2.25rem,5vw,3.25rem); }
.preis__head{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.1rem;
}
.preis__head--zwei{ margin-top:clamp(2rem,4vw,2.75rem); }
.gegen{ display:grid; gap:0; border-top:1px solid var(--rule); }
.gegen li{
  display:grid; gap:.2rem;
  padding:.95rem 0; border-bottom:1px solid var(--rule);
}
@media (min-width: 560px){
  .gegen li{ grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:1.25rem; align-items:baseline; }
}
.gegen__num{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(1.05rem,.98rem + .55vw,1.35rem); line-height:1.15; letter-spacing:-.018em;
  color:var(--fg);
}
.gegen__txt{ font-size:.94rem; line-height:1.5; color:var(--muted); }
.gegen--klein .gegen__num{ font-size:1rem; color:var(--accent); }
.preis__fazit{
  margin-top:1.25rem;
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.02rem,.96rem + .5vw,1.22rem); line-height:1.35; letter-spacing:-.01em;
  color:var(--fg); max-width:38ch;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ margin-top:clamp(2rem,5vw,3rem); border-top:1px solid var(--rule); }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem;
  padding:1.15rem 0;
  font-family:var(--display); font-weight:600; font-stretch:104%;
  font-size:clamp(1rem,.95rem + .35vw,1.18rem); line-height:1.3; letter-spacing:-.01em;
  transition:color .2s ease;
}
.qa summary:hover{ color:var(--accent); }
.qa summary::after{
  content:"+"; flex:none; font-family:var(--mono); font-weight:400;
  font-size:1.25rem; line-height:1.15; color:var(--accent);
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa__body{ padding:0 0 1.35rem; max-width:62ch; }
.qa__body p{ color:var(--muted); font-size:.98rem; line-height:1.6; }

/* =========================================================================
   CTA + Formular
   ========================================================================= */
.sec--cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta__bg{
  position:absolute; z-index:-2; inset:auto 0 0 0;
  width:100%; height:30%; object-fit:cover; object-position:50% 42%;
  opacity:.16;
  mask-image:linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%);
}
.form{ margin-top:clamp(2.25rem,5vw,3rem); display:grid; gap:clamp(1.4rem,3vw,1.9rem); }
.field{ display:grid; gap:.4rem; }
.field-row{ display:grid; gap:clamp(1.4rem,3vw,1.9rem); }
@media (min-width: 680px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field label,
.chips legend{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:0;
}
.opt{ text-transform:none; letter-spacing:.02em; opacity:.6; }

.field input,
.field textarea{
  width:100%; padding:.7rem 0 .65rem;
  background:transparent; border:none; border-bottom:1px solid var(--fg);
  border-radius:0; font-size:1.05rem; line-height:1.4;
  transition:border-color .2s ease;
}
.field textarea{ resize:none; min-height:5.5rem; }
.field input:focus,
.field textarea:focus{
  outline:none; border-bottom-color:var(--hivis); border-bottom-width:2px;
  padding-bottom:calc(.65rem - 1px);
}
.field input::placeholder,
.field textarea::placeholder{ color:#A29A90; }

.chips{ border:none; padding:0; margin:0; display:grid; gap:.75rem; }
.chips__row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; }
.chip input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.chip span{
  display:inline-flex; align-items:center; min-height:46px;
  padding:.5rem 1.05rem;
  border:1px solid var(--rule); border-radius:2px;
  font-family:var(--display); font-weight:600; font-stretch:102%; font-size:.94rem;
  color:var(--fg);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover span{ border-color:var(--accent); }
.chip input:checked + span{
  background:var(--hivis); border-color:var(--hivis); color:#12100E; font-weight:700;
}
.chip input:focus-visible + span{ outline:2px solid var(--hivis); outline-offset:3px; }

.zustimmung{
  display:grid; grid-template-columns:1.15rem minmax(0,1fr); gap:.7rem; align-items:start;
  font-size:.86rem; line-height:1.55; color:var(--muted); cursor:pointer;
  padding:.35rem 0;
}
.zustimmung input{ width:1.15rem; height:1.15rem; margin:.15rem 0 0; accent-color:var(--accent); }
.zustimmung a{ color:var(--accent); }
.form__note{ font-size:.84rem; line-height:1.6; color:var(--muted); }
.form__note a{ color:var(--accent); }
.direkt{
  margin-top:clamp(1.5rem,3vw,2rem); padding-top:1.25rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; line-height:1.7;
  color:var(--muted);
}
.direkt a{ color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; }
.hp{ position:absolute; left:-9999px; }

/* =========================================================================
   Footer + Sticky CTA
   ========================================================================= */
.footer{ padding-block:clamp(3rem,7vw,5rem) clamp(3rem,7vw,4rem); border-top:1px solid rgba(255,255,255,.1); }
.footer__grid{ display:grid; gap:2rem; }
@media (min-width: 760px){ .footer__grid{ grid-template-columns:1fr auto; align-items:end; } }
.footer__claim{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(1.4rem,1.1rem + 1.6vw,2.3rem); line-height:1; letter-spacing:-.025em;
}
.footer__nav{ display:flex; flex-wrap:wrap; gap:.35rem 1.5rem; }
.footer__nav a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.footer__nav a:hover{ color:var(--hivis); }

.stickycta{
  position:fixed; z-index:65; inset:auto .75rem calc(.75rem + env(safe-area-inset-bottom)) .75rem;
  transform:translateY(160%); transition:transform .4s var(--ease);
}
.stickycta .btn{
  min-height:52px; font-size:.95rem;
  box-shadow:0 10px 34px -10px rgba(0,0,0,.75);
}
.stickycta.is-visible{ transform:translateY(0); }
@media (min-width: 760px){ .stickycta{ display:none; } }
/* Damit die Leiste nie den letzten Satz verdeckt */
@media (max-width: 759px){ body{ padding-bottom:5.5rem; } }

/* =========================================================================
   Reveal-Grundzustand (JS setzt is-ready)
   ========================================================================= */
.js .reveal{ opacity:0; }
.js .hero__title .line > span{ transform:translateY(108%); will-change:transform; }
.js [data-hero="1"],
.js [data-hero="5"],
.js [data-hero="6"],
.js [data-hero="7"]{ opacity:0; will-change:transform,opacity; }
.js .hero__cue{ transform:scaleY(0); transform-origin:50% 0%; }
.js .etappe,
.js .ticket{ opacity:0; }
.js .pile li{ opacity:0; }

/* =========================================================================
   Reduced Motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .route__fill{ display:none; }
  .pile li{ transform:none !important; }
}

/* ---------- Print ---------- */
@media print{
  .route,.topbar,.stickycta{ display:none; }
  .chapter{ background:#fff; color:#000; }
}