/* =========================================================================
   Deine mPower Reise — Seitenstil
   Grammatik: durchgehende Welt (worldflight). Die Engine bleibt unberührt.
   ========================================================================= */

@font-face{
  font-family:"Cervo Neue";
  src:url("assets/fonts/CervoNeue-ExtraBold.otf") format("opentype");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cervo Neue";
  src:url("assets/fonts/CervoNeue-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("assets/fonts/Archivo-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --sc-canvas:#070B0E;
  --sc-surface:#101A22;
  --sc-ink:#F1F5F8;
  --sc-ink-soft:#93A3AE;
  --sc-accent:#55A0D8;
  --sc-accent-ink:#061018;
  --sc-font-display:"Cervo Neue","Archivo",system-ui,sans-serif;
  --sc-font-text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Markenblau aus dem Logo. Traegt die Architektur, nie den Text. */
  --brand:#1A466B;
  --brand-lift:#2A6592;
  --hair:rgba(140,180,210,.20);
  --plate:rgba(8,13,18,.80);
  --ph-grey:#272D33;

  --gutter:clamp(20px,5vw,72px);
  --rail:clamp(84px,9vw,160px);

  --t-lg:clamp(2.2rem,4.4vw,4rem);
  --t-md:clamp(1.9rem,3.4vw,2.8rem);
  --t-lede:clamp(1.02rem,1.4vw,1.2rem);
  --t-body:clamp(.95rem,1.15vw,1.04rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--sc-canvas)}
body{
  margin:0;
  background:var(--sc-canvas);
  color:var(--sc-ink);
  font-family:var(--sc-font-text);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.defs{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--sc-accent);color:var(--sc-accent-ink)}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px;border-radius:2px}

/* ---------------------------------------------------------------- Typo -- */
.ttl{
  font-family:var(--sc-font-display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
.ttl--lg{font-size:var(--t-lg)}
.ttl--md{font-size:var(--t-md)}
.lede{
  font-size:var(--t-lede);line-height:1.55;color:#D5DEE5;
  max-width:42ch;margin:0;text-wrap:pretty;
}
.note{font-size:.85rem;line-height:1.5;color:var(--sc-ink-soft);margin:0;max-width:44ch}
.note--center{text-align:center;margin-inline:auto}
.eyebrow{
  font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.26em;color:var(--sc-accent);margin:0;
}

/* ------------------------------------------------------------- Buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sc-font-text);font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;
  padding:.9em 1.6em;border-radius:3px;border:1px solid transparent;
  transition:background 140ms cubic-bezier(.23,1,.32,1), transform 110ms ease-out;
}
.btn--go{background:var(--sc-accent);color:var(--sc-accent-ink);width:100%}
.btn--go:hover{background:#6FB2E4}
.btn:active{transform:translateY(1px)}

/* ----------------------------------------------------------- Kopfleiste -- */
.bar{
  position:fixed;z-index:60;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2vw,22px) var(--gutter);
  pointer-events:none;
}
.bar__mark{pointer-events:auto;display:block;line-height:0}
.bar__mark img{width:clamp(104px,10vw,150px);height:auto;display:block}

/* Schalter fuer die Bildflaechen. Nur waehrend der Abstimmung mit dem Kunden
   gedacht, vor dem Livegang entfernen (siehe README). */
.ph-toggle{
  pointer-events:auto;cursor:pointer;font:inherit;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sc-ink-soft);background:rgba(8,13,18,.6);
  border:1px solid var(--hair);border-radius:2px;padding:7px 12px;
  transition:color 140ms ease-out,border-color 140ms ease-out;
}
.ph-toggle:hover{color:var(--sc-ink)}
.ph-toggle[aria-pressed="true"]{color:var(--sc-accent);border-color:rgba(85,160,216,.5)}

/* ------------------------------------------------------- Route als Nav -- */
.route{
  position:fixed;z-index:58;left:var(--gutter);top:50%;transform:translateY(-50%);
  pointer-events:none;
}
.route__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,1vh,14px);position:relative;z-index:2}
.route__step{
  pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:38px;
  background:none;border:0;padding:6px 8px 6px 0;margin:0;cursor:pointer;
  color:var(--sc-ink-soft);font:inherit;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;
  transition:color 160ms ease-out;
}
.route__dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid currentColor;background:transparent;
  transition:background 180ms ease-out,transform 180ms ease-out,border-color 180ms ease-out;
}
.route__name{opacity:0;transform:translateX(-6px);transition:opacity 200ms ease-out,transform 200ms ease-out;white-space:nowrap}
.route:hover .route__name,.route__step:focus-visible .route__name{opacity:1;transform:none}
.route__step[aria-current="true"]{color:var(--sc-ink)}
.route__step[aria-current="true"] .route__dot{background:var(--sc-accent);border-color:var(--sc-accent);transform:scale(1.25)}
.route__step[aria-current="true"] .route__name{opacity:1;transform:none}
.route__step:hover{color:var(--sc-ink)}
.route__step--cta{color:var(--sc-accent)}
.route__line{
  position:absolute;left:3.7px;top:6px;bottom:6px;width:1.5px;
  background:rgba(147,163,174,.2);z-index:1;
}
.route__fill{
  position:absolute;left:0;top:0;width:100%;height:calc(var(--prog,0) * 100%);
  background:var(--sc-accent);display:block;
}

/* --------------------------------------------- Bordkarte (Signatur-Move) -- */
/* Erscheint erst, wenn ein Ziel gewaehlt ist, und bleibt eine Zeile. */
.pass{
  position:fixed;z-index:59;right:var(--gutter);bottom:clamp(18px,3vh,32px);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  max-width:min(340px,42vw);
  padding:9px 14px;
  background:var(--plate);border:1px solid var(--hair);border-radius:3px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity 280ms ease-out;
}
.pass::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,200,230,.4),transparent);
}
.pass__gate,.pass__dest{font-family:var(--sc-font-display);font-weight:800;letter-spacing:.06em;font-size:.86rem}
.pass__gate{color:var(--sc-accent)}
.pass__dest{color:var(--sc-ink)}
.pass__count{color:var(--sc-ink-soft);font-variant-numeric:tabular-nums;margin-left:auto}
.pass__name{flex:1 0 100%;color:var(--sc-ink-soft);letter-spacing:.1em}
.pass__name:empty{display:none}
.pass.is-tucked{opacity:0;pointer-events:none}

/* ============================== DIE WELT ================================= */
.plate{position:absolute;inset:0;overflow:hidden;background:var(--sc-canvas)}
.plane{position:absolute;inset:-6%;will-change:transform}
.plane svg{width:100%;height:100%;display:block}

.plane--far { transform:translate3d(0,calc(var(--lp,0) * -1.6%),0) scale(calc(1.01 + var(--lp,0) * .03)); }
.plane--mid { transform:translate3d(0,calc(var(--lp,0) * -4.2%),0) scale(calc(1.02 + var(--lp,0) * .08)); }
.plane--near{ transform:translate3d(0,calc(var(--lp,0) * -9.5%),0) scale(calc(1.05 + var(--lp,0) * .19)); }
.plane--atmo{
  transform:translate3d(0,calc(var(--lp,0) * -2.4%),0);
  background:
    radial-gradient(130% 70% at 50% 108%, rgba(26,70,107,.34), transparent 62%),
    radial-gradient(90% 50% at 50% -8%, rgba(10,18,26,.9), transparent 70%);
  opacity:calc(.5 + var(--lp,0) * .35);
}
.plane--atmo-warm{
  background:
    radial-gradient(56% 42% at 50% 50%, rgba(143,208,255,.16), transparent 70%),
    radial-gradient(130% 80% at 50% 112%, rgba(12,20,28,.95), transparent 66%);
}

/* Echte Fotos aus den Studios. Leicht entsaettigt und abgedunkelt, damit
   sieben Aufnahmen aus zwei Shootings wie eine Serie wirken und die
   Markenfarbe traegt. Der Bildausschnitt steht je Szene in --pos. */
.plane--photo{background:#070B0E}
.photo{
  width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--pos,50% 50%);
  filter:saturate(.78) contrast(1.06) brightness(.82);
}
.plate--abflug{--pos:50% 55%}
.plate--flugplan {--pos:40% 50%}
.plate--koffer{--pos:50% 50%}
.plate--hinweise  {--pos:50% 35%}
.plate--monitor   {--pos:30% 35%}
.plate--landung {--pos:50% 40%}
.plate--landung .photo{filter:saturate(.72) contrast(1.02) brightness(.78)}

/* Bogen-Motiv, abgeleitet vom m der Wortmarke */
.mid-arches{color:var(--brand-lift);opacity:.55}
.tunnel{color:#5EA2D2;opacity:.75}
.tunnel--near{color:#0C1926;opacity:.98}
.cones{fill:rgba(120,180,225,.075)}
.lamps{fill:rgba(190,225,250,.6)}
.ports{fill:#050A0E;stroke:rgba(130,180,215,.45);stroke-width:2}
.ports__lit{fill:rgba(110,178,228,.45);stroke:rgba(190,225,250,.75)}
.sign{fill:rgba(110,178,228,.3)}
.sign__ring{fill:none;stroke:rgba(190,225,250,.72);stroke-width:2}
.sign__bar{fill:rgba(214,238,255,.82)}
.sign__off{fill:rgba(10,20,28,.85);stroke:rgba(130,180,215,.28);stroke-width:2}
.arrival-wall{fill:#05080B}
.arrival-rim{stroke:#9CD4FF;stroke-width:2;opacity:.45}

/* Szenenbezogene Abdunklung. Teil der Welt, nicht Kind des Textes. */
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(4,7,10,.5) 100%);
}
.plate--abflug::after{
  background:
    linear-gradient(180deg, rgba(4,7,10,.86) 0%, rgba(4,7,10,.5) 30%, transparent 50%),
    radial-gradient(70% 62% at 50% 58%, rgba(4,7,10,.78) 0%, rgba(4,7,10,.5) 55%, transparent 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 44%, rgba(4,7,10,.55) 100%);
}
.plate--flugplan::after{
  background:
    linear-gradient(260deg, rgba(4,7,10,.94) 0%, rgba(4,7,10,.88) 48%, rgba(4,7,10,.5) 64%, transparent 84%),
    radial-gradient(120% 100% at 50% 50%, transparent 44%, rgba(4,7,10,.5) 100%);
}
.plate--koffer::after{
  background:
    radial-gradient(60% 58% at 50% 50%, rgba(4,7,10,.92) 0%, rgba(4,7,10,.62) 70%, rgba(4,7,10,.2) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 48%, rgba(4,7,10,.55) 100%);
}
.plate--hinweise::after{
  background:
    linear-gradient(100deg, rgba(4,7,10,.95) 0%, rgba(4,7,10,.9) 42%, rgba(4,7,10,.5) 60%, transparent 80%),
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(4,7,10,.5) 100%);
}
.plate--monitor::after{
  background:
    linear-gradient(260deg, rgba(4,7,10,.94) 0%, rgba(4,7,10,.88) 48%, rgba(4,7,10,.5) 64%, transparent 84%),
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(4,7,10,.5) 100%);
}
.plate--landung::after{
  background:radial-gradient(95% 80% at 50% 46%, rgba(4,7,10,.3) 0%, rgba(4,7,10,.6) 58%, rgba(4,7,10,.86) 100%);
}

/* ------------------------------------------- Graue Bildflaechen (Modus) -- */
/* z-index 1: über den Ebenen, aber UNTER der Szenen-Abdunklung. Die graue
   Fläche liegt damit genau dort, wo später das Foto liegt, und wird genauso
   abgedunkelt. Sonst zeigt der Platzhaltermodus einen Kontrast, den die
   fertige Seite nie hat. */
.ph{
  position:absolute;inset:0;z-index:1;display:none;
  align-items:start;justify-items:center;
  padding:clamp(76px,10vh,104px) var(--gutter) var(--gutter);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 14px, transparent 14px 28px),
    var(--ph-grey);
  box-shadow:inset 0 0 0 2px rgba(190,205,215,.28);
}
.show-ph .ph{display:grid}
/* Der Hinweis steht immer in der Haelfte, die der Text frei laesst. */
.plate--abflug .ph,.plate--hinweise .ph{justify-items:end}
.plate--flugplan .ph,.plate--monitor .ph{justify-items:start}
.ph__label{
  font-family:var(--sc-font-text);font-size:.84rem;line-height:1.65;
  color:#DCE4EA;text-align:center;max-width:44ch;
  padding:16px 20px;border-radius:3px;
  background:rgba(10,14,18,.66);
  border:1px solid rgba(190,205,215,.2);
}
.ph__label b{
  display:block;font-family:var(--sc-font-display);font-weight:800;
  text-transform:uppercase;font-size:1.1rem;letter-spacing:.05em;
  margin-bottom:8px;color:#FFFFFF;
}

/* =============================== TEXTEBENE =============================== */
.copy{position:absolute;inset:0;display:flex}
.copy__inner{
  width:100%;
  /* Der Rand gehoert nicht zur Textspalte: sonst bleiben von 600px nur 456px
     uebrig und jede zweite Ueberschrift bricht eine Zeile zu frueh. */
  max-width:min(calc(600px + var(--gutter) * 2), 58vw);
  padding:clamp(84px,11vh,132px) var(--gutter) clamp(92px,12vh,140px);
  margin-inline-start:var(--rail);
  align-self:center;
  display:grid;
  gap:clamp(16px,2.2vh,26px);
}
/* Rechts verankert, aber linksbuendig gesetzt. */
.copy--hour .copy__inner,
.copy--offer .copy__inner{
  margin-inline:auto var(--gutter);justify-items:end;
  padding-bottom:clamp(140px,22vh,260px);
}
.copy--hour .copy__inner > *,
.copy--offer .copy__inner > *{text-align:left}

.copy__inner--center{max-width:min(620px,86vw);margin-inline:auto;text-align:center;justify-items:center}
.copy__inner--wide{max-width:min(820px,92vw);margin-inline:auto;justify-items:center;text-align:center}
.copy__inner--form{max-width:min(640px,94vw);margin-inline:auto}
/* Die Wahl ist das Einzige auf dem ersten Bildschirm: mittig, breit, gross. */
.copy__inner--gates{
  max-width:min(1180px,calc(100vw - var(--rail) * 2));
  margin-inline:auto;
  justify-items:center;text-align:center;
  gap:clamp(12px,1.8vh,20px);
}

/* ------------------------------------------ 1 · Die drei Tore am Anfang -- */
.gates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);
  width:100%;margin-top:clamp(14px,3vh,34px);
}
.gate{
  position:relative;cursor:pointer;font:inherit;color:var(--sc-ink);
  display:grid;gap:5px;justify-items:center;align-content:end;text-align:center;
  min-height:clamp(260px,44vh,440px);
  padding:24px 20px clamp(26px,4vh,40px);
  border:1.5px solid rgba(140,180,210,.34);
  border-top-left-radius:50% 30%;
  border-top-right-radius:50% 30%;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  background:linear-gradient(180deg, rgba(26,70,107,.10) 0%, rgba(9,16,22,.72) 62%);
  transition:background 180ms cubic-bezier(.23,1,.32,1),
             border-color 180ms ease-out, transform 140ms ease-out;
}
.gate::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--sc-accent);opacity:0;
  transition:opacity 180ms ease-out;
}
.gate:hover{
  background:linear-gradient(180deg, rgba(42,101,146,.26) 0%, rgba(11,22,31,.84) 62%);
  border-color:rgba(85,160,216,.55);
}
.gate:hover::after{opacity:1}
.gate:active{transform:translateY(1px)}
.gate[aria-pressed="true"]{
  border-color:var(--sc-accent);
  background:linear-gradient(180deg, rgba(85,160,216,.24) 0%, rgba(11,22,31,.86) 62%);
}
.gate[aria-pressed="true"]::after{opacity:1}
.gate__code{
  font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.26em;color:var(--sc-accent);
}
.gate__name{
  font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2.5rem);line-height:.94;white-space:nowrap;
}
.gate__sub{font-size:.9rem;line-height:1.35;color:var(--sc-ink-soft);max-width:24ch}
@media (hover:hover) and (pointer:fine){
  .gate:hover{transform:translateY(-3px)}
  .gate:active{transform:translateY(0)}
}

.gates--inline{max-width:720px;margin-top:0}
.gates--inline .gate{min-height:112px;padding:14px 12px 16px;border-top-left-radius:999px 70px;border-top-right-radius:999px 70px}
.gates--inline .gate__name{font-size:1.05rem}
.gates--inline .gate__code{font-size:.72rem}

/* ------------------------------------ 2 · Die Stunde als Ablaufplan ----- */
.hour{list-style:none;margin:0;padding:0;display:grid;max-width:470px;counter-reset:h}
.hour li{
  display:grid;grid-template-columns:3.9rem 1fr;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(147,163,174,.14);
}
.hour li:last-child{border-bottom:0}
.hour__t{
  font-family:var(--sc-font-display);font-weight:800;font-size:.94rem;
  color:var(--sc-accent);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.hour__x{font-size:.94rem;line-height:1.45;color:#D5DEE5}
.hour__k{font:800 .82rem/1 var(--sc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink);margin-right:.25em}
.hour li:last-child .hour__x{color:var(--sc-ink)}

/* ------------------------------- Platzhalter fuer fehlende Inhalte ------ */
.ph-inline{display:none}
.show-ph .ph-inline{
  display:block;max-width:440px;
  font-size:.8rem;line-height:1.55;color:#DCE4EA;
  padding:13px 16px;border-radius:3px;
  background:rgba(39,45,51,.9);
  box-shadow:inset 0 0 0 1px rgba(190,205,215,.3);
}
.ph-inline b{
  display:block;font-family:var(--sc-font-display);font-weight:800;
  text-transform:uppercase;font-size:.9rem;letter-spacing:.05em;
  margin-bottom:5px;color:#FFFFFF;
}

.bag-empty{display:grid;gap:20px;justify-items:center}

/* --------------------------------------------- 5 · Das Angebot als Beleg -- */
.ledger{margin:0;width:100%;max-width:400px;display:grid}
.ledger > div{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(147,163,174,.14)}
.ledger > div:last-child{border-bottom:0}
.ledger dt{
  order:1;font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:1rem;color:#DCE5EB;
}
.ledger > div::after{
  content:"";order:2;flex:1 1 auto;height:1px;
  background:repeating-linear-gradient(90deg,rgba(147,163,174,.35) 0 2px,transparent 2px 6px);
  transform:translateY(-3px);
}
.ledger dd{
  order:3;margin:0;font-family:var(--sc-font-display);font-weight:800;font-size:1.08rem;
  color:var(--sc-accent);font-variant-numeric:tabular-nums;text-transform:uppercase;
}

/* Stimme eines Mitglieds, echtes Zitat, Wortlaut nicht glätten. */
.voice{margin:6px 0 0;max-width:440px;padding-left:16px;border-left:2px solid var(--sc-accent)}
.voice blockquote{margin:0}
.voice p{margin:0;font-size:.94rem;line-height:1.5;color:#E3EAEF;font-style:italic}
.voice figcaption{
  margin-top:8px;font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.08em;color:var(--sc-accent);
}

/* ------------------------------------------------------- 5 · Standorte -- */
.places{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
}
.copy--places .places{justify-content:flex-end}
.places li{font-size:.98rem;letter-spacing:.06em;border:1px solid var(--hair);border-radius:2px;padding:6px 12px;color:#CFDAE2}

/* ---------------------------------------------------------- 6 · Form ---- */
.form,.done{
  background:var(--plate);border:1px solid var(--hair);border-radius:5px;
  padding:clamp(20px,3vw,32px);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 34px 70px -36px rgba(0,0,0,.9);
  display:grid;gap:16px;
}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:grid;gap:5px;margin:0}
.field label,.consent label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-ink-soft)}
.consent label{text-transform:none;letter-spacing:0;font-size:.8rem;line-height:1.45;color:#B6C3CC;cursor:pointer;padding:3px 0}
.consent label a{color:var(--sc-accent)}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;font:inherit;font-size:1rem;color:var(--sc-ink);
  background:rgba(6,11,15,.72);border:1px solid var(--hair);border-radius:3px;
  padding:11px 13px;
  transition:border-color 140ms ease-out,box-shadow 140ms ease-out;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sc-ink-soft) 50%),linear-gradient(135deg,var(--sc-ink-soft) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
input:focus,select:focus{outline:none;border-color:var(--sc-accent);box-shadow:0 0 0 3px rgba(85,160,216,.22)}
input:user-invalid,select:user-invalid{border-color:#E08A7A}
.consent{display:flex;gap:12px;align-items:flex-start;margin:0}
.consent input{width:24px;height:24px;flex:0 0 auto;margin-top:1px;accent-color:var(--sc-accent);cursor:pointer}
.form__error{margin:0;font-size:.85rem;color:#F0A392}
.field--wide{grid-column:1 / -1}

/* Standortwahl: vier Felder zum Anklicken statt einer Liste. */
.pick{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.pick legend{padding:0;margin-bottom:5px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-ink-soft)}
.pick__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pick__opt{position:relative;display:block;cursor:pointer}
.pick__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick__opt span{
  display:block;text-align:center;padding:12px 6px;
  font-family:var(--sc-font-display);font-weight:800;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.04em;color:#CFDAE2;
  background:rgba(6,11,15,.72);border:1px solid var(--hair);border-radius:3px;
  transition:border-color 140ms ease-out,background 140ms ease-out,color 140ms ease-out,box-shadow 140ms ease-out;
}
@media (hover:hover){ .pick__opt:hover span{border-color:rgba(85,160,216,.6)} }
.pick__opt input:checked + span{
  color:#FFFFFF;background:rgba(85,160,216,.18);border-color:var(--sc-accent);
  box-shadow:inset 0 0 0 1px var(--sc-accent);
}
.pick__opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(85,160,216,.35)}
.pick__opt input:user-invalid + span{border-color:#E08A7A}
.pick__hint{margin:0;font-size:.78rem;line-height:1.45;color:#A9B8C3}

/* Falle fuer Spam-Programme, fuer Menschen unsichtbar. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{text-align:center;justify-items:center}
.done canvas{width:100%;max-width:500px;height:auto;border-radius:4px;border:1px solid var(--hair);display:block}
.legal{margin:12px 0 0;display:flex;justify-content:center;gap:10px;font-size:.78rem;color:var(--sc-ink-soft)}
.legal a{color:#B6C3CC;text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
.legal a:hover{color:var(--sc-ink)}
.done__actions{margin:0;width:100%;max-width:320px}
.done__pdfs{list-style:none;margin:0;padding:0;width:100%;max-width:420px;display:grid;gap:6px;text-align:left}
.done__pdfs a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--hair);border-radius:6px;color:var(--sc-ink);text-decoration:none;font-size:.86rem;line-height:1.3;background:rgba(16,26,34,.6)}
.done__pdfs a:hover{border-color:var(--sc-accent)}
.done__k{font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--sc-accent);flex:none}
.done__t{flex:1}
.done__go{color:var(--sc-accent);font-weight:700}

/* ============================ Ohne JavaScript ============================ */
.nojs{display:none}
.no-js #world,.no-js .route,.no-js .pass,.no-js .ph-toggle,.no-js .next{display:none}
.no-js .nojs{display:block}
.nojs__wrap{max-width:620px;margin:0 auto;padding:120px var(--gutter) 80px;display:grid;gap:24px}

/* ================================ Mobil ================================== */
@media (max-width:900px){
  :root{--rail:0px}
  .copy__inner{
    max-width:none;
    padding:clamp(92px,13vh,126px) var(--gutter) clamp(112px,16vh,156px);
    align-self:end;gap:15px;
  }
  .copy--hour .copy__inner,.copy--offer .copy__inner{
    text-align:left;justify-items:start;margin-inline:0;
    padding-bottom:clamp(112px,16vh,156px);
  }
  .copy__inner--gates{max-width:none}
  /* Die Anrede über der Headline steht auf dem Handy über dem helleren Meer. */
  .copy--terminal .eyebrow{color:#9DCBF0}

  /* Auf dem Handy läuft jeder Text über die volle Breite. Eine seitliche
     Abdunklung greift dort nicht, deshalb wird aus jedem Szenen-Scrim ein
     Band, das von oben nach unten dichter wird. */
  [data-sc-segment] .plate::after{
    background:linear-gradient(180deg,
      rgba(4,7,10,.6) 0%,
      rgba(4,7,10,.64) 26%,
      rgba(4,7,10,.84) 58%,
      rgba(4,7,10,.94) 100%);
  }
  /* Auf dem Handy stehen Zielwahl und Tasche mitten im Foto. */
  [data-sc-segment] .plate--abflug::after{
    background:linear-gradient(180deg,
      rgba(4,7,10,.82) 0%,
      rgba(4,7,10,.8) 50%,
      rgba(4,7,10,.92) 100%);
  }
  /* Hochkant-Ausschnitt: die Person muss im schmalen Bild bleiben. */
  .plate--flugplan {--pos:30% 50%}
  .plate--koffer{--pos:48% 45%}
  .plate--hinweise  {--pos:64% 40%}
  .plate--monitor   {--pos:36% 35%}
  .plate--landung {--pos:56% 40%}
  .hour li{grid-template-columns:3.2rem 1fr;gap:8px;padding:4px 0}
  .hour__x,.hour__t{font-size:.82rem}
  .hour__k{font-size:.7rem}
  .copy--hour .copy__inner{gap:10px}
  .ph-inline{font-size:.74rem;padding:10px 13px}

  .ttl--lg{font-size:clamp(2rem,8.6vw,2.9rem)}
  .lede{max-width:none}

  /* Die drei Tore bleiben auch hier Tore: gestapelt, mittig, gross */
  .copy__inner--gates{align-self:center;padding-top:clamp(74px,10vh,96px);padding-bottom:clamp(76px,10vh,96px)}
  .gates{grid-template-columns:1fr;gap:10px;margin-top:6px}
  .gate{
    min-height:clamp(112px,16.5vh,150px);padding:14px 18px 16px;
    gap:3px;align-content:end;
    border-top-left-radius:50% 42%;border-top-right-radius:50% 42%;
  }
  .gate__name{font-size:clamp(1.55rem,7vw,2rem)}
  .gate__sub{max-width:none;font-size:.8rem}
  .gates--inline .gate{min-height:0}

  /* Route wandert an den unteren Rand */
  .route{left:0;right:0;top:auto;bottom:0;transform:none;
    padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(5,8,11,.94),rgba(5,8,11,0));
  }
  .route__list{grid-auto-flow:column;grid-auto-columns:1fr;gap:0;justify-items:center}
  .route__step{flex-direction:column;gap:0;padding:0;justify-content:center;min-height:46px;min-width:46px}
  .route__name{display:none}
  .route__line{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;height:1.5px}
  .route__fill{width:calc(var(--prog,0) * 100%);height:100%}

  /* Bordkarte als schmaler Streifen unter der Kopfleiste */
  .pass{
    left:var(--gutter);right:var(--gutter);max-width:none;
    bottom:auto;top:calc(clamp(14px,2vw,22px) + 44px);
  }
  .pass__name{display:none}

  .ph{padding:clamp(96px,14vh,140px) var(--gutter) clamp(112px,16vh,150px)}
  .ph__label{font-size:.76rem}
  .ph__label b{font-size:.95rem}


  /* Das Formular ist auf kleinen Geraeten hoeher als der Bildschirm. Die
     Textebene liegt fest, also bekommt der Ankunfts-Block einen eigenen
     Scrollbereich. */
  .copy--arrival .copy__inner{
    align-self:stretch;height:100%;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-top:calc(clamp(14px,2vw,22px) + 50px);
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
    /* safe: ist das Formular hoeher als der Bildschirm, beginnt es oben
       statt oben abgeschnitten zu werden. */
    align-content:safe center;
  }
  .copy--arrival .form,.copy--arrival .done{gap:11px;padding:16px}
  .form__grid{gap:9px}
  .form__grid .field:nth-child(n+3){grid-column:1 / -1}
  .pick__opts{grid-template-columns:1fr 1fr;gap:7px}
  .pick__opt span{padding:10px 6px}
  .pick__hint{font-size:.74rem}
  input[type=text],input[type=email],input[type=tel],select{padding:10px 12px}
}

@media (max-width:380px){
  .ttl--lg{font-size:2.1rem}
}

/* ========================== Reduzierte Bewegung ========================== */
@media (prefers-reduced-motion:reduce){
  .plane{transform:none !important}
  .plane--atmo{opacity:.7}
  .btn,.gate,.route__step,.route__dot,.route__name{transition:none}
}

/* Der Ablaufplan hat sechs Zeilen. Auf niedrigen Bildschirmen rückt er
   näher an den unteren Rand, auf kleinen Handys entfällt der Vorspann. */
@media (min-width:900px) and (max-height:780px){
  .copy--hour .copy__inner,.copy--offer .copy__inner{padding-bottom:clamp(64px,10vh,90px)}
  /* Formular mit Standortwahl passt so auch auf 1280 x 720. */
  .copy--arrival .form{gap:10px;padding:18px 26px}
  .copy--arrival .ttl--md{font-size:clamp(1.7rem,4.4vh,2.2rem)}
  .copy--arrival .ttl--md br{display:none}
  .copy--arrival .form__grid{gap:8px 13px}
  .copy--arrival input[type=text],.copy--arrival input[type=email],.copy--arrival input[type=tel],.copy--arrival select{padding:8px 12px}
  .copy--arrival .pick__opt span{padding:9px 6px}
  .ledger > div{padding:6px 0}
  .voice p{font-size:.88rem;line-height:1.45}
}
@media (max-width:899px) and (max-height:700px){
  .copy--hour .lede,.copy--offer .lede,.copy--offer .offer__note{display:none}
  .copy--hour .copy__inner,.copy--offer .copy__inner{padding-bottom:96px}
  .ledger > div{padding:5px 0}
  .voice p{font-size:.84rem;line-height:1.45}
}

/* ============================ REISE-WELT ================================= */
/* Station 1 · Abflug: Insel, Flugzeug als eigene Ebene, Abflugtafel */
.plane--photo picture{display:contents}
.plane--jet{inset:0;pointer-events:none;z-index:3}
.jet{
  position:absolute;width:min(32vw,560px);right:3%;top:8%;
  transform:translate3d(calc(var(--lp,0) * -10vw),calc(var(--lp,0) * -34vh),0) scale(calc(1 - var(--lp,0) * .2));
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
}
@media (max-width:899px){ .jet{width:44vw;right:-4%;top:7%} }
@media (max-width:899px) and (max-height:700px){ .jet{width:27vw;right:auto;left:1%;top:7.4%} }
@media (prefers-reduced-motion:reduce){ .jet{transform:none} }
.plate--abflug{--pos:50% 60%}


/* Station 2 · Flugplan: Flugzeugfenster mit Kursfoto */
.porthole{
  position:absolute;left:clamp(200px,17%,320px);top:50%;width:min(30vw,440px);aspect-ratio:3/4;
  transform:translateY(-50%);border-radius:46% / 38%;overflow:hidden;
  box-shadow:0 0 0 14px #C9CDD1,0 0 0 16px #9EA4AA,0 0 0 30px #E3E6E8,inset 0 0 40px rgba(0,0,0,.55),0 40px 80px rgba(0,0,0,.6);
}
.porthole img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;filter:saturate(.85) brightness(.9)}
.porthole::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 40%)}
@media (max-width:899px){ .porthole{left:50%;top:12%;width:24vw;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #C9CDD1,0 0 0 9px #9EA4AA,0 0 0 17px #E3E6E8,inset 0 0 30px rgba(0,0,0,.55),0 30px 60px rgba(0,0,0,.6)} }

/* Station 3 · Koffer: Gepaeckstuecke fallen hinein, Anhaenger mit Packliste */
.bag{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:clamp(20px,3vw,48px);align-items:center;width:min(1100px,92vw)}
.case{position:relative;aspect-ratio:16/10}
.item{
  position:absolute;display:grid;align-content:end;gap:4px;padding:12px 14px;border-radius:6px;text-align:left;
  opacity:0;transform:translate3d(0,-60vh,0) rotate(var(--r,0deg));
  transition:opacity 260ms ease-out,transform 520ms cubic-bezier(.2,1.2,.35,1);
  box-shadow:0 18px 30px rgba(0,0,0,.45);
}
.item.is-in{opacity:1;transform:translate3d(0,0,0) rotate(var(--r,0deg))}
.item__k{font:800 .56rem/1 var(--sc-font-display);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.item__t{font:800 .95rem/1.05 var(--sc-font-display);text-transform:uppercase}
.item--ticket{left:8%;top:12%;width:44%;height:30%;background:#F2EEE4;color:#0D181C;--r:-4deg;
  background-image:radial-gradient(circle at 0 50%,transparent 9px,#F2EEE4 10px)}
.item--scan{left:56%;top:10%;width:34%;height:40%;background:#0E2436;color:#DCEBF5;--r:5deg;
  border:1px solid #2A6592;background-image:repeating-linear-gradient(0deg,rgba(85,160,216,.18) 0 1px,transparent 1px 9px)}
.item--book{width:25%;height:36%;color:#F4F7FA;background:#1A466B;border-left:6px solid #0D181C}
.item--2{left:9%;top:52%;--r:3deg}
.item--3{left:37%;top:55%;--r:-2deg;background:#2A6592}
.item--4{left:64%;top:54%;--r:4deg;background:#123049}
.tag{
  position:relative;background:#F2EEE4;color:#0D181C;border-radius:10px;padding:26px 22px 20px;
  clip-path:polygon(14% 0,86% 0,100% 12%,100% 100%,0 100%,0 12%);box-shadow:0 30px 50px rgba(0,0,0,.5);text-align:left
}
.tag__hole{position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#0D181C}
.tag__head{margin:10px 0 12px;font:800 .8rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase}
.tag__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tag__list li{display:grid;grid-template-columns:22px 1fr;column-gap:10px;opacity:.45;transition:opacity 200ms}
.tag__list li.is-in{opacity:1}
.tag__box{grid-row:1 / 3;width:18px;height:18px;border:2px solid #0D181C;border-radius:3px;margin-top:1px;position:relative}
.tag__list li.is-in .tag__box::after{content:"";position:absolute;left:4px;top:0;width:6px;height:11px;border:solid #1A466B;border-width:0 3px 3px 0;transform:rotate(45deg)}
.tag__t{font:800 .92rem/1.1 var(--sc-font-display);text-transform:uppercase}
.tag__d{font-size:.78rem;line-height:1.35;color:#3B4750}
@media (max-width:899px){
  .bag{grid-template-columns:1fr;gap:14px}
  .case{aspect-ratio:16/11}
  .item__t{font-size:.7rem}
  .tag{padding:22px 16px 14px}
  .tag__d{display:none}
}
@media (prefers-reduced-motion:reduce){ .item{transition:opacity 200ms;transform:rotate(var(--r,0deg))} }

/* Station 4 · Sicherheitskarte mit den vier Einwaenden */
.safety{background:#F2EEE4;color:#0D181C;border-radius:8px;padding:clamp(16px,2vw,24px);max-width:620px;box-shadow:0 40px 70px rgba(0,0,0,.55);transform:rotate(-1.2deg)}
.safety__head{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px;padding-bottom:10px;border-bottom:3px solid #0D181C;font:800 .72rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase}
.safety__head span:last-child{color:#1A466B}
.safety__grid{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#C9C3B4}
.safety__cell{background:#F2EEE4;padding:14px 14px 16px;display:grid;align-content:start;gap:6px}
.safety__ico{width:40px;height:40px;color:#1A466B}
.safety__label{margin:0;font:800 .66rem/1 var(--sc-font-display);letter-spacing:.16em;text-transform:uppercase;color:#1A466B}
.safety dt{font-size:.86rem;font-style:italic;color:#3B4750}
.safety dd{margin:0;font:800 .98rem/1.15 var(--sc-font-display);text-transform:uppercase}
@media (max-width:899px){
  .safety{transform:none;padding:12px}
  .safety__cell{padding:9px 9px 11px;gap:4px}
  .safety__ico{width:26px;height:26px}
  .safety dt{font-size:.72rem}
  .safety dd{font-size:.78rem}
}

/* Station 5 · Bordmonitor mit anonymem Scan-Bericht */
.copy--offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px);padding-inline:calc(var(--rail) + 110px) var(--gutter)}
.copy--offer .copy__inner{margin:0;padding-bottom:0}
.offer__left{display:grid;gap:clamp(12px,1.6vh,18px);min-width:0;max-width:720px;justify-items:stretch}
.offer__left .monitor{width:100%}
.offer__left .voice{max-width:none}
@media (max-width:899px){ .offer__left{justify-items:center} .offer__left .voice{display:none} }
.monitor{background:#05080B;border-radius:18px;padding:14px;box-shadow:0 0 0 2px #1B2229,0 40px 80px rgba(0,0,0,.7);max-width:720px}
.monitor__screen{position:relative;aspect-ratio:16/10;background:radial-gradient(120% 90% at 30% 20%,#0E2436,#05080B);border-radius:8px;overflow:hidden;color:#DCEBF5;padding:14px 16px}
.monitor__bar{display:flex;justify-content:space-between;margin:0;font:800 .66rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase}
.monitor__bar span:last-child{color:#55A0D8}
.monitor__tabs{list-style:none;display:flex;gap:6px;margin:10px 0 0;padding:0;font:800 .6rem/1 var(--sc-font-display);letter-spacing:.12em;text-transform:uppercase}
.monitor__tabs li{padding:5px 9px;border:1px solid rgba(85,160,216,.35);border-radius:20px;opacity:.55}
.monitor[data-view="0"] .monitor__tabs li:nth-child(1),.monitor[data-view="1"] .monitor__tabs li:nth-child(2),
.monitor[data-view="2"] .monitor__tabs li:nth-child(3),.monitor[data-view="3"] .monitor__tabs li:nth-child(4){opacity:1;background:#1A466B;border-color:#55A0D8}
.view{position:absolute;inset:64px 16px 14px;display:grid;opacity:0;transition:opacity 300ms ease-out}
.monitor[data-view="0"] .view--0,.monitor[data-view="1"] .view--1,.monitor[data-view="2"] .view--2,.monitor[data-view="3"] .view--3{opacity:1}
.view__cap{margin:0;align-self:end;font-size:.78rem;color:#9FB3C2}
.view--0{grid-template-rows:1fr auto;justify-items:center}
.scanbody{position:relative;height:100%;overflow:hidden}
.scanbody img{height:100%;width:auto;display:block;mix-blend-mode:screen;filter:contrast(1.12) brightness(.96)}
.scanline{position:absolute;left:-10%;right:-10%;height:2px;background:#55A0D8;box-shadow:0 0 16px 4px rgba(85,160,216,.6);top:0;animation:scan 2.6s ease-in-out infinite alternate}
@keyframes scan{to{top:100%}}
.view--1{grid-template-columns:auto 1fr;gap:16px;align-items:center}
.scanbody--sm{height:92%}
.mtable{border-collapse:collapse;font-size:.74rem;width:100%}
.mtable th{text-align:left;font-weight:400;color:#9FB3C2;padding:3px 0}
.mtable td{text-align:right;font-variant-numeric:tabular-nums;padding:3px 0}
.mtable tr+tr{border-top:1px solid rgba(85,160,216,.15)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:9px;align-content:start}
.bars li{display:grid;grid-template-columns:8.5em 5em 1fr;align-items:center;gap:10px;font-size:.76rem}
.bars b{font-weight:400;color:#9FB3C2}
.bars span{font-variant-numeric:tabular-nums}
.bars i{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,#3E8E7E,#C9B458 55%,#C9774A)}
.bars i::after{content:"";position:absolute;top:-4px;left:calc(var(--v) * 100%);width:3px;height:16px;background:#F4F7FA;border-radius:2px}
.view--3{grid-template-rows:auto 1fr auto;gap:10px}
.balance{display:flex;gap:4px;font:800 .72rem/1 var(--sc-font-display);text-transform:uppercase}
.balance span{flex:0 0 var(--w);background:#1A466B;padding:8px 10px;border-radius:4px}
.balance span+span{background:#2A6592;text-align:right}
.posture{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:0;background-image:linear-gradient(rgba(85,160,216,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(85,160,216,.18) 1px,transparent 1px);background-size:20px 20px}
.posture img{height:100%;width:100%;object-fit:contain;min-height:0;mix-blend-mode:screen}
@media (max-width:899px){
  .copy--offer{grid-template-columns:1fr;align-content:start;padding:calc(var(--gutter) + 110px) var(--gutter) 90px;gap:14px}
  .monitor{padding:8px;border-radius:12px}
  .monitor__screen{padding:10px}
  .view{inset:52px 10px 10px}
  .mtable{font-size:.62rem}
  .bars li{grid-template-columns:7em 4.2em 1fr;font-size:.64rem;gap:6px}
  .view__cap{font-size:.64rem}
}
@media (prefers-reduced-motion:reduce){ .scanline{animation:none;top:50%} .view{transition:none} }

/* Station 6 · Landung */
.plate--landung{--pos:50% 55%}
.plate--landung .photo{filter:saturate(.9) brightness(.8)}

/* ------------------------------------------------ Abstimmung nach Sichtung */
/* Insel und Flugzeug sollen sichtbar bleiben: oben dunkel fuer die Frage,
   unten nur leicht, die Tore tragen eine eigene Flaeche. */
.plate--abflug::after{
  background:
    linear-gradient(180deg, rgba(4,7,10,.84) 0%, rgba(4,7,10,.6) 30%, rgba(4,7,10,.14) 70%, rgba(4,7,10,.3) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 50%, rgba(4,7,10,.45) 100%);
}
.plate--abflug .photo{filter:saturate(.9) contrast(1.04) brightness(.9)}

/* Koffer kleiner und nach links, rechts daneben der Anhaenger. Die
   Kanten des Fotos laufen in den Boden aus. */
@media (min-width:900px){
  .plate--koffer .plane--photo{background:#0D1519}
  .plate--koffer .photo{
    transform:translateX(-10%) scale(.78);
    -webkit-mask-image:radial-gradient(62% 64% at 50% 50%,#000 70%,transparent 100%);
            mask-image:radial-gradient(62% 64% at 50% 50%,#000 70%,transparent 100%);
  }
  .copy--boarding .copy__inner--wide{max-width:none;padding-inline:0;margin:0}
  .copy--boarding .eyebrow{position:absolute;left:0;right:0;top:clamp(84px,11vh,132px)}
  .bag{width:100%;grid-template-columns:38vw minmax(280px,340px);gap:6vw;padding-left:19.8vw;justify-content:start}
  .case{aspect-ratio:16/11}
}
.plate--koffer::after{
  background:radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(4,7,10,.6) 100%);
}
@media (max-width:900px){
  [data-sc-segment] .plate--abflug::after{
    background:linear-gradient(180deg,
      rgba(4,7,10,.86) 0%, rgba(4,7,10,.8) 22%, rgba(4,7,10,.62) 40%, rgba(4,7,10,.5) 78%, rgba(4,7,10,.2) 100%);
  }
}

/* Monitor: Umfaenge-Tabelle passt neben das Modell. */
.view--1{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.scanbody--sm{height:100%;display:grid;place-items:center}
.scanbody--sm img{width:100%;height:100%;object-fit:contain}
.mtable{align-self:center}
.mtable th,.mtable td{padding:2px 0;white-space:nowrap}
.mtable td{padding-left:10px}

@media (max-width:899px){
  .copy--offer .copy__inner{padding:0;gap:12px}
  .copy--offer .lede,.copy--offer .voice{display:none}
  .copy--offer .offer__note{max-width:none}
  .monitor__bar{font-size:.54rem;letter-spacing:.1em}
  .monitor__tabs{margin-top:7px;font-size:.5rem;gap:4px}
  .monitor__tabs li{padding:4px 7px}
  .view{inset:46px 10px 8px}
  .mtable{font-size:.58rem}
  .mtable th,.mtable td{padding:1px 0}
  .bars{gap:5px}
  .view__cap{display:none}
  /* Umfaenge zweispaltig, das Modell zeigen die anderen Ansichten. */
  .view--1{grid-template-columns:1fr}
  .scanbody--sm{display:none}
  .mtable tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .mtable tr{display:flex;justify-content:space-between;gap:6px;border-top:1px solid rgba(85,160,216,.15)}
  .mtable td{padding-left:0}
}
@media (max-width:899px) and (max-height:700px){
  .copy--offer{padding-top:calc(var(--gutter) + 84px);padding-bottom:66px;gap:10px}
  .monitor{max-width:300px;width:100%;justify-self:center}
  .copy--offer .ttl--lg{font-size:1.8rem}
  .safety dt{display:none}
  .safety__head span:last-child{display:none}
  .safety__ico{width:22px;height:22px}
  .plate--flugplan .porthole{display:none}
  .monitor__screen{aspect-ratio:16/11}
  .bars{gap:3px}
}

/* Kontrastpruefung nach dem Umbau */
@media (min-width:900px){
  .copy--boarding .eyebrow{top:clamp(66px,8vh,96px)}
  .copy--offer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .copy--offer .copy__inner{padding-inline:0;padding-bottom:clamp(60px,9vh,100px)}
}
.plate--koffer::after{
  background:
    linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.55) 11%, transparent 20%),
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(4,7,10,.6) 100%);
}
/* Mit gewaehltem Ziel sagt der Anhaenger schon "Packliste". Ohne Ziel
   steht die Wahl auf einer eigenen dunklen Flaeche ueber dem Koffer. */
.copy--boarding .copy__inner:has(.bag:not([hidden])) > .eyebrow{display:none}
.bag-empty{background:rgba(8,13,18,.84);border:1px solid var(--hair);border-radius:4px;padding:clamp(18px,3vw,32px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (min-width:900px){ .copy--boarding .bag-empty{max-width:760px;margin-inline:auto} }
@media (max-width:900px){
  /* Koffer bleibt sichtbar: Anhaenger und Leerzustand haben eigene Flaechen. */
  [data-sc-segment] .plate--koffer::after{
    background:linear-gradient(180deg, rgba(4,7,10,.7) 0%, rgba(4,7,10,.3) 22%, rgba(4,7,10,.25) 70%, rgba(4,7,10,.6) 100%);
  }
}

/* ------------------------------------ 1 · Abflugtafel (Zielwahl, neu) ---- */
/* Eine echte Anzeigetafel: gelbe Kopfzeile, Spalten, Klappbuchstaben in
   festen Zellen. Jede Zeile ist ein Knopf. */
.fids{
  --fids-bg:rgba(6,9,12,.9);--fids-yellow:#FFC94A;--fids-ink:#F4EFE2;
  display:block;width:min(980px,100%);margin-top:clamp(10px,2.4vh,26px);
  background:var(--fids-bg);border:1px solid rgba(255,255,255,.09);border-radius:10px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;text-align:left;
}
.fids__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;
  padding:14px 22px;background:#0B1014;border-bottom:1px solid rgba(255,201,74,.22);
  font:800 .9rem/1 var(--sc-font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--fids-yellow);
}
.fids__title{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.fids__plane{width:22px;height:22px}
.fids__hint{color:#C9C2AE;font-size:.74rem}
.fids__cols,.fids__row{
  display:grid;grid-template-columns:5.2rem minmax(0,1fr) 4.2rem 9.4rem;align-items:center;column-gap:18px;
  padding-inline:22px;
}
.fids__cols{
  margin:0;padding-block:9px;font:800 .66rem/1 var(--sc-font-display);letter-spacing:.2em;
  text-transform:uppercase;color:#8C8676;border-bottom:1px solid rgba(255,255,255,.06);
}
.fids .fids__row{
  position:relative;width:100%;min-height:0;margin:0;cursor:pointer;
  padding-block:clamp(12px,1.9vh,18px);text-align:left;justify-items:start;align-content:center;gap:0 18px;
  color:var(--fids-ink);background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background 160ms ease-out;
}
.fids .fids__row:last-child{border-bottom:0}
.fids .fids__row::after{
  content:"";position:absolute;left:0;top:10px;bottom:10px;right:auto;width:3px;height:auto;
  background:var(--fids-yellow);opacity:0;transition:opacity 160ms ease-out;
}
.fids .fids__row:hover{background:rgba(255,201,74,.07);transform:none}
.fids .fids__row:hover::after,.fids .fids__row[aria-pressed="true"]::after{opacity:1}
.fids .fids__row[aria-pressed="true"]{background:rgba(255,201,74,.1)}
.fids__flight{font:800 1rem/1 var(--sc-font-display);letter-spacing:.08em;color:var(--fids-yellow);font-variant-numeric:tabular-nums}
.fids__dest{display:grid;gap:6px;min-width:0}
.fids .gate__name{font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1;white-space:nowrap;letter-spacing:0}
.fids .gate__sub{font-size:.86rem;line-height:1.3;color:#B9B4A6;max-width:none}
.fids__gate{font:800 clamp(1.5rem,2.3vw,2.2rem)/1 var(--sc-font-display);color:var(--fids-yellow)}
.fids__status{
  justify-self:end;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1.5px solid var(--fids-yellow);border-radius:3px;
  font:800 .82rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fids-yellow);
  transition:background 160ms ease-out,color 160ms ease-out;
}
.fids__status::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-left:2px}
.fids__dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:fids-blink 1.4s steps(2,end) infinite}
@keyframes fids-blink{50%{opacity:.15}}
.fids__done{display:none}
.fids .fids__row:hover .fids__status,.fids .fids__row:focus-visible .fids__status,
.fids .fids__row[aria-pressed="true"] .fids__status{background:var(--fids-yellow);color:#0D181C}
.fids .fids__row[aria-pressed="true"] .fids__go{display:none}
.fids .fids__row[aria-pressed="true"] .fids__done{display:inline}
.fids .fids__row[aria-pressed="true"] .fids__dot{animation:none}

/* Klappzellen: feste Breite, Trennfuge in der Mitte, kein Umriss. */
.flap{
  display:inline-block;width:.66em;margin-right:.06em;text-align:center;
  background:linear-gradient(180deg,#2A3138 0 50%,#222930 50% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 2px 0 rgba(0,0,0,.5);
  border-radius:.07em;position:relative;padding:.12em 0 .08em;
}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,0,.75)}
.flap--space{width:.34em;background:none}
.flap--space::after{display:none}
.flap.is-flip{animation:flap 110ms ease-out}
@keyframes flap{from{transform:perspective(200px) rotateX(-80deg);filter:brightness(.6)}to{transform:none;filter:none}}
.fids__gate .flap{width:.9em}

@media (max-width:900px){
  .fids{margin-top:4px;border-radius:8px}
  .fids__top{padding:11px 14px;font-size:.72rem}
  .fids__title{font-size:.86rem;gap:8px}
  .fids__plane{width:18px;height:18px}
  .fids__cols{display:none}
  .fids .fids__row{
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dest status" "meta status";
    padding:13px 14px;row-gap:6px;column-gap:10px;
  }
  .fids__dest{grid-area:dest}
  .fids__status{grid-area:status;align-self:center;padding:8px 9px;font-size:.66rem;letter-spacing:.1em;gap:6px}
  .fids__status .fids__go,.fids__status .fids__done{display:none !important}
  .fids__flight{grid-area:meta;font-size:.72rem;display:flex;gap:10px}
  .fids__flight::after{content:attr(data-gate);color:#C9C2AE}
  .fids__gate{display:none}
  .fids .gate__name{font-size:clamp(1.05rem,5.1vw,1.45rem)}
  .fids .gate__sub{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){ .fids__dot{animation:none} .flap.is-flip{animation:none} }

/* Leerzustand im Koffer: dieselben Ziele als schlichte Zeilen */
.gates--inline .gate{border-radius:4px;min-height:0}

/* 2 · Flugplan: Rumpf von aussen, das Fenster sitzt in der Aussenhaut. */
.plate--flugplan{--pos:0% 50%}
.plate--flugplan .photo{filter:saturate(.95) contrast(1.04) brightness(.9)}
.plate--flugplan::after{
  background:
    linear-gradient(270deg, rgba(4,7,10,.82) 0%, rgba(4,7,10,.6) 34%, rgba(4,7,10,.12) 56%, transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 50%, rgba(4,7,10,.45) 100%);
}
@media (max-width:900px){
  .plate--flugplan{--pos:0% 50%}
  [data-sc-segment] .plate--flugplan::after{
    background:linear-gradient(180deg, rgba(4,7,10,.35) 0%, rgba(4,7,10,.2) 22%, rgba(4,7,10,.82) 40%, rgba(4,7,10,.94) 100%);
  }
}

/* 4 · Sicherheitskarte groesser (Runde 2) */
.copy--safety .copy__inner{max-width:min(1040px,calc(100vw - var(--rail) - var(--gutter)));gap:clamp(16px,2.4vh,28px)}
.copy--safety .safety{max-width:900px;padding:clamp(18px,2.2vw,30px);transform:rotate(-.8deg)}
.safety__head{font-size:.86rem;margin-bottom:16px;padding-bottom:12px}
.safety__cell{padding:clamp(16px,2vh,24px) clamp(16px,1.8vw,26px);gap:8px}
.safety__row{display:flex;align-items:center;gap:12px;margin:0}
.safety__row .safety__ico{width:40px;height:40px;flex:0 0 auto}
.safety__row .safety__label{font-size:.82rem;letter-spacing:.14em}
.safety dt{font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.35}
.safety dd{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.12}
@media (min-width:900px) and (max-height:780px){
  .copy--safety .copy__inner{padding-top:72px;padding-bottom:64px}
  .safety__row .safety__ico{width:30px;height:30px}
  .safety__cell{padding:12px 18px;gap:5px}
  .safety dd{font-size:clamp(1.05rem,1.45vw,1.3rem)}
}
@media (max-width:899px){
  .copy--safety .copy__inner{max-width:none;gap:12px;padding-bottom:72px}
  .copy--safety .ttl--lg{font-size:clamp(1.5rem,6.4vw,1.9rem)}
  .copy--safety .safety{padding:14px 16px;transform:none}
  .safety__head{font-size:.72rem;margin-bottom:6px;padding-bottom:9px}
  .safety__grid{grid-template-columns:1fr}
  .safety__cell{padding:11px 2px 12px;gap:4px}
  .safety__row{gap:9px}
  .safety__row .safety__ico{width:24px;height:24px}
  .safety__row .safety__label{font-size:.7rem}
  .safety dt{font-size:.84rem}
  .safety dd{font-size:1rem;line-height:1.15}
}
@media (max-width:899px) and (max-height:700px){
  .copy--safety .copy__inner{padding-top:70px;padding-bottom:64px;gap:10px}
  .copy--safety .ttl--lg{font-size:1.4rem}
  .safety__cell{padding:7px 2px 8px}
  .safety dd{font-size:.92rem}
}

@media (max-width:899px){ .safety__head span:last-child{display:none} }

/* 5 · Schon alles gepackt? Bordrechnung, Gesamt 0 € gross (Runde 2) */
.receipt{
  position:relative;width:100%;max-width:470px;background:#F2EEE4;color:#0D181C;
  padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,28px) clamp(14px,2vh,22px);border-radius:6px;
  box-shadow:0 40px 70px rgba(0,0,0,.55);
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 6.5px,#000 7px) 0 0/18px 100% repeat-x;
          mask:radial-gradient(circle 7px at 50% 100%,transparent 6.5px,#000 7px) 0 0/18px 100% repeat-x;
}
.receipt__head{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;padding-bottom:9px;border-bottom:3px solid #0D181C;
  font:800 .74rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase}
.receipt__head span:last-child{color:#1A466B}
.receipt__list{list-style:none;margin:0;padding:0;display:grid}
.receipt__list li{display:flex;align-items:baseline;gap:10px;padding:clamp(4px,.8vh,7px) 0}
.receipt__list li::after{content:"";order:2;flex:1 1 auto;border-bottom:2px dotted rgba(13,24,28,.35);transform:translateY(-4px)}
.receipt__t{order:1;font:800 clamp(.92rem,1.1vw,1.05rem)/1.15 var(--sc-font-display);text-transform:uppercase}
.receipt__v{order:3;font:800 clamp(.92rem,1.1vw,1.05rem)/1 var(--sc-font-display);color:#1A466B;white-space:nowrap}
.receipt__total{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:10px 0 0;padding-top:8px;
  border-top:2px solid #0D181C;
}
.receipt__label{font:800 1rem/1 var(--sc-font-display);letter-spacing:.14em;text-transform:uppercase;padding-bottom:.9em}
.receipt__sum{font:800 clamp(4.6rem,8vw,7.6rem)/.8 var(--sc-font-display);letter-spacing:-.01em;color:#0D181C}
.receipt__stamp{
  position:absolute;left:clamp(84px,24%,124px);bottom:clamp(18px,3vh,30px);margin:0;
  display:grid;justify-items:center;gap:3px;padding:8px 14px 7px;
  border:3px solid #1A66A8;outline:1.5px solid #1A66A8;outline-offset:3px;border-radius:4px;
  color:#1A66A8;transform:rotate(-11deg);
  font:800 1.5rem/1 var(--sc-font-display);letter-spacing:.06em;text-transform:uppercase;
  mix-blend-mode:multiply;
}
.receipt__stamp span:last-child{font-size:.62rem;letter-spacing:.2em}
.copy--offer .voice{margin-top:4px}
@media (min-width:900px){ .copy--offer .ttl--lg{font-size:clamp(2.2rem,3.3vw,3.3rem)} }
@media (min-width:900px) and (max-height:780px){
  .copy--offer .voice{display:none}
  .copy--offer .offer__note{display:none}
  .view__cap{display:none}
  .receipt__sum{font-size:clamp(4rem,7vw,6rem)}
}
@media (max-width:899px){
  .receipt{max-width:none;padding:12px 16px 12px}
  .receipt__head{font-size:.64rem;margin-bottom:4px;padding-bottom:7px}
  .receipt__list li{padding:3px 0}
  .receipt__t,.receipt__v{font-size:.84rem}
  .receipt__sum{font-size:4.2rem}
  .receipt__label{font-size:.8rem}
  .receipt__stamp{font-size:1.1rem;left:34%;bottom:14px;padding:6px 10px 5px}
  .receipt__stamp span:last-child{font-size:.5rem}
}
@media (max-width:899px) and (max-height:700px){
  .copy--offer .monitor{display:none}
  .copy--offer{padding-top:calc(var(--gutter) + 90px)}
}

/* ===================== Handy-Feinschliff (28.09.2026) ===================== */
/* Geprueft auf echten Sichtflaechen mit Browserleisten: 390x664 (iPhone mit
   Safari), 375x548 (iPhone SE), 430x740, 360x640. Vorher wurde auf 390x844
   geprueft, das ist der ganze Bildschirm ohne Leisten und kommt so nie vor. */

/* Gestaffeltes Einblenden: Zeilen, Zellen und Posten kommen nacheinander,
   sobald ihre Station einblendet (.is-live setzt page.js). */
@media (prefers-reduced-motion:no-preference){
  .js-stagger :is(.fids__row,.hour li,.safety__cell,.receipt__list li,.receipt__total){
    opacity:0;transform:translate3d(0,14px,0);
  }
  .js-stagger .is-live :is(.fids__row,.hour li,.safety__cell,.receipt__list li,.receipt__total){
    opacity:1;transform:none;
    transition:opacity 480ms cubic-bezier(.2,.8,.2,1),transform 620ms cubic-bezier(.2,.8,.2,1),background 160ms ease-out;
    transition-delay:calc(var(--i,0) * 75ms);
  }
  .js-stagger .is-live .safety__cell{transform:none}
  .js-stagger .safety__cell{transform:translate3d(0,10px,0) scale(.985)}
  :is(.hour li,.safety__cell,.receipt__list li):nth-child(2),.fids__row:nth-of-type(2){--i:1}
  :is(.hour li,.safety__cell,.receipt__list li):nth-child(3),.fids__row:nth-of-type(3){--i:2}
  :is(.hour li,.safety__cell,.receipt__list li):nth-child(4){--i:3}
  :is(.hour li,.receipt__list li):nth-child(5){--i:4}
  .hour li:nth-child(6),.receipt__total{--i:5}
}

@media (max-width:900px){
  /* Kopfleiste bekommt einen weichen Schatten, damit Ueberschriften, die
     darunter durchlaufen, nicht mit dem Logo kollidieren. */
  .bar::before{
    content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,7,10,.82) 0%,rgba(4,7,10,.5) 55%,rgba(4,7,10,0) 100%);
  }
  .route{transition:opacity 260ms ease-out}
  .route.is-tucked{opacity:0;pointer-events:none}
  .route.is-tucked .route__step{pointer-events:none}

  /* Koffer: Beschreibung des zuletzt eingepackten Stuecks steht offen. */
  .tag__list li.is-last .tag__d{display:block;animation:tag-open 420ms cubic-bezier(.2,.8,.2,1)}
  .item__k{font-size:.62rem}

  /* Sicherheitskarte: die Einwaende selbst gehoeren dazu, sonst stehen die
     Antworten ohne Frage da. */
  .safety dt{display:block}

  /* Bordmonitor unter der Rechnung, als Beleg fuer den Scan. */
  .copy--offer .offer__left{order:2}
  .copy--offer .monitor{max-width:320px;width:100%;justify-self:center}

  .legal a{padding:10px 4px}
}
@keyframes tag-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width:899px) and (min-height:600px){
  .copy--offer .monitor{display:block}
}
@media (max-width:899px) and (max-height:599px){
  .copy--offer .monitor{display:none}
}

/* Formular im Seitenfluss (nur Handy, page.js haengt es ein) */
.arrival-flow{
  position:relative;z-index:30;
  display:grid;gap:22px;
  padding:34vh var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,7,10,0) 0,rgba(4,7,10,.55) 24vh,rgba(4,7,10,.9) 58vh,var(--sc-canvas) 100%);
}
.arrival-flow .copy__inner--form{max-width:none;margin:0;padding:0;align-self:auto;display:grid;gap:0}
.arrival-flow .form,.arrival-flow .done{padding:20px 18px;gap:14px}
.arrival-flow .voice{margin:0 0 4px;max-width:none}
.arrival-flow .voice p{font-size:1rem;line-height:1.55}
.arrival-flow .legal{margin-top:16px}
.legal{align-items:center}
@media (max-width:899px){ .copy--offer{padding-bottom:calc(76px + env(safe-area-inset-bottom))} }
@media (max-width:899px){ .case{aspect-ratio:16/9.6} }
@media (max-width:900px){
  .bar{transition:background 240ms ease-out}
  .bar.is-solid{background:rgba(4,7,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-block:10px}
  .bar.is-solid::before{display:none}
}

/* ============ iPhone-Rückmeldung (28.09.2026, echtes Gerät) ============== */
@media (max-width:900px){
  /* Safari legt unten eine Leiste ueber die Seite. Dort steht nichts
     Wichtiges mehr, und die Routenpunkte werden oben zur Fortschrittslinie. */
  [data-sc-world-copy] .copy .copy__inner{padding-bottom:var(--safe-b)}
  [data-sc-world-copy] .copy--offer{padding-bottom:var(--safe-b)}
  [data-sc-world-copy] .copy--offer .copy__inner{padding-bottom:0}
  .route{top:0;bottom:auto;left:0;right:0;height:2px;padding:0;background:none}
  .route__list{display:none}
  .route__line{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;background:rgba(147,163,174,.16)}

  /* Sicherheitskarte und Koffer mittig statt unten */
  [data-sc-world-copy] .copy--safety .copy__inner,
  [data-sc-world-copy] .copy--boarding .copy__inner{align-self:center}

  /* Flugzeugfenster sitzt im Textblock ueber der Ueberschrift */
  .plate--flugplan .porthole{display:none}
  .porthole--m{
    display:block;position:relative;left:auto;top:auto;transform:none;
    width:min(28vw,132px);margin:0 0 14px 12px;
    box-shadow:0 0 0 7px #C9CDD1,0 0 0 8px #9EA4AA,0 0 0 15px #E3E6E8,inset 0 0 26px rgba(0,0,0,.55),0 24px 48px rgba(0,0,0,.6);
  }

  /* Leistung: auf dem iPhone kosten Koernung und Unschaerfe-Hintergruende
     bei jedem Frame. Die Flaechen werden dafuer etwas deckender. */
  .sc-grain{display:none}
  .pass,.fids,.form,.done,.bag-empty,.bar.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none}
  .fids{--fids-bg:rgba(6,9,12,.95)}
  .pass{background:rgba(8,13,18,.95)}
  .form,.done{background:rgba(8,13,18,.95)}
  .bag-empty{background:rgba(8,13,18,.94)}
  .plane--atmo{will-change:auto}
  [data-sc-copy] > *{will-change:transform}

  /* Formular kommt direkt mit dem Landungsbild */
  .arrival-flow{padding-top:14vh}
}
@media (min-width:901px){ .porthole--m{display:none} }
@media (max-width:899px) and (max-height:600px){ .porthole--m{display:none} }

/* ============ Roter Faden auf dem Handy (05.10.2026) ===================== */
/* Rueckmeldung mPower: auf dem Handy muss immer klar sein, dass es nach
   unten weitergeht. Ein fester Knopf nennt die naechste Station, tippen
   faehrt dorthin. Steht der Finger still oder liegt gerade ein dunkler
   Uebergang an, wippt der Pfeil.
   --band ist der Streifen, den Safari unten ueber die Seite legt (page.js
   setzt ihn auf 0, wenn die Leisten ausserhalb der Seite liegen). Der Knopf
   sitzt direkt darueber, der Text endet ueber dem Knopf (--safe-b). */
.next{display:none}
@media (max-width:900px){
  :root{--band:92px;--safe-b:calc(var(--band) + 62px)}
  .next{
    position:fixed;z-index:30;left:50%;
    bottom:max(calc(var(--band) + 10px), calc(12px + env(safe-area-inset-bottom)));
    display:inline-flex;align-items:center;gap:8px;
    min-height:38px;padding:8px 14px 8px 18px;border-radius:999px;
    font:600 .82rem/1 var(--sc-font-text);letter-spacing:.02em;color:var(--sc-ink);
    background:rgba(8,13,18,.9);border:1px solid rgba(85,160,216,.45);
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    transform:translateX(-50%);white-space:nowrap;cursor:pointer;
    transition:opacity 260ms ease-out,transform 260ms ease-out,border-color 260ms ease-out,background 260ms ease-out;
  }
  .next[hidden]{display:none}
  .next.is-off{opacity:0;transform:translate(-50%,12px);pointer-events:none}
  .next__chev{width:18px;height:18px;color:var(--sc-accent);flex:none}
  .next.is-gap{background:var(--sc-accent);border-color:var(--sc-accent);color:#06121C}
  .next.is-gap .next__chev{color:#06121C}
  .next:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}

  /* Niedrige Handys: unten ist kein Platz frei, der Knopf sitzt rechts neben
     dem Logo. */
  :root.next-top{--safe-b:max(22px, calc(var(--band) + 14px))}
  .next-top .next{left:auto;right:var(--gutter);bottom:auto;top:clamp(12px,2vw,20px);transform:none;
    min-height:34px;padding:7px 10px 7px 13px;gap:6px;font-size:.74rem}
  .next-top .next.is-off{transform:translateY(-10px)}
  .next-top .next__chev{width:16px;height:16px}

  /* Der Platz unter dem Logo gehoert dem Inhalt (Rueckmeldung 05.10.: Text
     groesser und weiter nach oben). Wo der Bordkarten-Streifen steht, beginnt
     der Block darunter. */
  [data-sc-world-copy] .copy--hour .copy__inner{padding-top:54px;align-self:start}
  [data-sc-world-copy] .copy--safety .copy__inner{padding-top:54px}
  [data-sc-world-copy] .copy--offer{padding-top:112px}
  .is-short [data-sc-world-copy] .copy--offer{padding-top:56px}
  /* Breite aus dem Block, nicht aus vw: vw waechst beim Grosserziehen mit. */
  .bag{width:100%}
  /* Anrede bleibt einzeilig, sonst steht „packen“ allein in Zeile zwei. */
  .copy--terminal .eyebrow{white-space:nowrap;font-size:min(.76rem,2.9vw);letter-spacing:.22em}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .next.is-idle .next__chev,.next.is-gap .next__chev{animation:next-bob 1.3s ease-in-out infinite}
}
@keyframes next-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}