/* ====================================================================
   motion.css — Step 37, Motion-Konzept „Ein Auto, vier Welten“
   Bühne (angeheftete Szene), Auto-Ebene, Sprechblasen, Textebenen.
   Bewegung selbst steuert assets/motion/buehne-start.js (GSAP).

   Grundsatz: Ohne JavaScript oder bei reduzierter Bewegung steht jede
   Szene als ruhiges Bild da. Nichts ist nur per Animation sichtbar.
   ==================================================================== */

.welt-26{position:relative;background:var(--m-paper)}
.welt-26__buehne{
  position:relative;overflow:hidden;isolation:isolate;
  height:100vh;height:100svh;min-height:560px;
}
.welt-26__svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Das Auto ist echtes Bild (Firefly-Original, unverändert) über der SVG-Bühne.
   Position setzt das Skript aus dem SVG-Anker. Als HTML-Element kann es beim
   Seitenwechsel als gemeinsames Element mitfahren (view-transition-name). */
.welt-26__auto{
  position:absolute;left:0;top:0;width:0;z-index:2;
  transform-origin:50% 92%;
  view-transition-name:auto-26;
}
.welt-26__auto img{display:block;width:100%;height:auto}
/* Fahrertür (NEO): Teile liegen im 900x477-Bildraum des Autos, Lage in Prozent; über den Felgen */
.tuer-26{position:absolute;inset:0;z-index:1;visibility:hidden;pointer-events:none}
.welt-26__auto .tuer-26 img{position:absolute;height:auto;opacity:0}
/* Tür als Körper mit Dicke (Ilker: nicht dünn wie Papier): dreht per rotateY ums Scharnier, die Kante steht 90° dahinter */
.tuer-26__aussen{position:absolute;aspect-ratio:167/333;opacity:0;transform-origin:2.4% 50%;transform-style:preserve-3d}
.welt-26__auto .tuer-26 .tuer-26__aussen img{inset:0;width:100%;height:100%;opacity:1}
.tuer-26__kante{position:absolute;width:9.6%;transform-origin:0 50%;transform:rotateY(90deg);border-radius:1px;
  background:linear-gradient(90deg,#39406E 0,#232A55 18%,#1A1F42 70%,#11152F 100%)}
.tuer-26__kante--rahmen{width:5%;background:linear-gradient(90deg,#343B68,#1A1F42)}
/* Schatten der Tür in der Öffnung (Licht von links oben) */
.tuer-26__schatten{position:absolute;top:10.5%;height:67.5%;width:7%;opacity:0;
  background:linear-gradient(90deg,rgba(8,11,32,.5),rgba(8,11,32,0))}
/* Pool-Flotte (Welt Gewerbe): zwei weitere Autos parken dahinter. Kein gemeinsamer
   Name für den Seitenwechsel, der gehört nur dem Hauptdarsteller. */
.welt-26__auto--flotte{z-index:1;view-transition-name:none;opacity:0}
/* Drehbare Felgen: aus dem Originalbild herausgerechnet (scripts/fahrzeug-raeder.py),
   liegen deckungsgleich über den Rädern und federn mit der Karosserie mit. */
.welt-26__raeder{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Menschen vor den Autos: eigene SVG-Ebene über den Auto-Bildern, unter Text und Blasen */
.welt-26__vorne{z-index:2;pointer-events:none}
/* Sprechblasen eines Akts: die Gruppe blendet das Scrollen, die Blase selbst der Auftritt */
.blasen-26{position:absolute;inset:0;z-index:4;pointer-events:none}
.welt-26__licht{
  position:absolute;width:13%;aspect-ratio:1.25;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,#FFFBEA 0%,rgba(255,246,206,.85) 35%,rgba(255,246,206,0) 100%);
}

/* Textebenen: echte Überschriften und Absätze, über der Szene */
.welt-26__text{
  position:absolute;z-index:3;left:max(var(--container-pad),calc((100vw - 1200px) / 2 + var(--container-pad)));
  top:clamp(84px,11vh,130px);max-width:min(34rem,42vw);   /* höher (Ilker 03.10.2026): Platz für den Link unter dem Text */
  display:grid;gap:18px;justify-items:start;
}
#text-start,#text-ende{top:clamp(96px,17vh,180px)}   /* Anfang und Ende ohne Welt-Link: Position wie bisher */
.welt-26__text--rechts{left:auto;right:max(var(--container-pad),calc((100vw - 1200px) / 2 + var(--container-pad)))}
.welt-26__text--hell h2{color:#fff}
.welt-26__text.welt-26__text--hell p{color:rgba(255,255,255,.86)}   /* Ilker (NEO): war grau überschrieben, kaum lesbar */
.welt-26__text--hell .link{color:var(--m-cyan-400)}
.welt-26__text h1{font-size:var(--fs-display);max-width:13ch}
.welt-26__text h2{font-size:clamp(34px,min(4vw,7.2vh),56px);letter-spacing:-.035em;line-height:1.02;max-width:12ch}
.welt-26__text p{margin:0;font-size:var(--fs-lede);line-height:1.55;color:var(--text-2);max-width:38ch}
.welt-26__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.welt-26__text .link--arrow{font-weight:600}
/* Links der Welten (Ilker 03.10.2026): stehen als helle Kapsel direkt unter dem Text – klar als Link erkennbar und
   auf Zaun oder Dächern gut lesbar (eigene Fläche). Unten neben „Weiterscrollen“ biss es sich mit dem Hinweis.
   Damit die Kapsel keine Figur verdeckt, beginnen die Texte etwas höher und Blasen weichen dem Text aus (textVorrang). */
.welt-26__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:-6px}
.welt-26__links a.link{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;text-decoration:none;
  background:rgba(250,250,248,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(31,37,71,.14),inset 0 0 0 1px rgba(31,37,71,.08);color:var(--m-navy-800);font-size:15px;
  transition:background-color .2s ease,box-shadow .2s ease}
.welt-26__links a.link:hover{background:#fff;color:var(--m-navy-900);box-shadow:0 6px 20px rgba(31,37,71,.2),inset 0 0 0 1px rgba(31,37,71,.12)}
.welt-26__links a.link .arrow{transition:transform .2s var(--ease-out)}
.welt-26__links a.link:hover .arrow{transform:translateX(3px)}
.welt-26__links a.link:active{transform:scale(.97)}
.welt-26__text--hell .welt-26__links a.link{background:rgba(31,37,71,.78);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.14)}
.welt-26__text--hell .welt-26__links a.link:hover{background:rgba(31,37,71,.92);color:#fff}
/* Niedrige Fenster (z. B. 1366 × 625): etwas kompakter, damit der Link nicht auf den Kopf des Kollegen stößt */
@media (min-width:760px) and (max-height:680px){.welt-26__text{gap:14px}.welt-26__text p{font-size:17px}.welt-26__links{margin-top:-4px}}
/* Absätze bekommen einen feinen Schein in Papierfarbe */
.welt-26__text:not(.welt-26__text--hell) p{text-shadow:0 0 14px rgba(250,250,248,.95),0 0 4px rgba(250,250,248,.9)}
/* Startseite: Sprung-Link „Direkt zu den Tarifen“ unter den Buttons im Start-Text */
.welt-26__sprung{display:inline-flex;margin-top:18px;font-size:15px}

/* Sprechblasen — zwei Arten (Plan: App-Mitteilung und Gedanke).
   Echtes HTML, am SVG-Anker ausgerichtet (left/top setzt das Skript). */
.blase-26{
  position:absolute;left:0;top:0;z-index:4;
  font-family:var(--font-display);color:var(--m-navy-800);
  transform-origin:18px 100%;
  box-shadow:0 18px 40px -18px rgba(20,25,58,.45),0 2px 6px rgba(20,25,58,.08);
  white-space:nowrap;
}
.blase-26--app{
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:16px;padding:9px 16px 9px 9px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}
.blase-26--app img{width:30px;height:30px;border-radius:9px;background:var(--m-cyan-200);padding:5px;display:block}
.blase-26--gedanke{
  background:#fff;border-radius:22px;padding:11px 18px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
}
/* Gedanken-Schweif: zwei kleiner werdende Kreise unten links */
.blase-26--gedanke::before,.blase-26--gedanke::after{
  content:"";position:absolute;background:#fff;border-radius:50%;
  box-shadow:0 6px 14px -6px rgba(20,25,58,.35);
}
.blase-26--gedanke::before{width:14px;height:14px;left:20px;bottom:-12px}
.blase-26--gedanke::after{width:8px;height:8px;left:12px;bottom:-24px}

/* Handy: Szene oben, Texte darunter lesbar; Blasen etwas kleiner */
@media (max-width:759.98px){
  .welt-26__text{left:var(--container-pad);right:var(--container-pad);top:84px;max-width:none}
  .welt-26__text h1{font-size:clamp(34px,9vw,44px)}
  .welt-26__text h2{font-size:clamp(30px,8vw,40px)}
  .blase-26--app{font-size:13px}
  .blase-26--gedanke{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .welt-26__auto{view-transition-name:none}
}

/* Führung durch die Geschichte (Ilker, Variante 3) ------------------------------------------------------------- */
.hinweis-26{position:absolute;left:50%;bottom:24px;z-index:5;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 16px;border-radius:999px;background:rgba(250,250,248,.9);box-shadow:0 4px 16px rgba(31,37,71,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:600 14px/1.2 var(--font-display);letter-spacing:.01em;color:var(--m-navy-500);opacity:0;transition:opacity .45s ease;pointer-events:none}
.hinweis-26.ist-sichtbar{opacity:1}
.hinweis-26 svg{animation:hinweis-26-wippen 1.6s ease-in-out infinite}
.hinweis-26--hell{background:rgba(31,37,71,.72);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25)}
@keyframes hinweis-26-wippen{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
.kapitel-punkte-26{position:absolute;right:20px;top:50%;z-index:5;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.kapitel-punkte-26 button{position:relative;width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--m-navy-500);background:transparent;
  cursor:pointer;opacity:.5;transition:opacity .25s ease,transform .25s ease,background-color .25s ease}
.kapitel-punkte-26 button::before{content:"";position:absolute;inset:-9px}   /* größere Trefferfläche */
.kapitel-punkte-26 button::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font:600 12px var(--font-display);color:var(--m-navy-500);opacity:0;transition:opacity .2s ease;pointer-events:none}
.kapitel-punkte-26 button:hover,.kapitel-punkte-26 button:focus-visible{opacity:1}
.kapitel-punkte-26 button:hover::after,.kapitel-punkte-26 button:focus-visible::after{opacity:1}
.kapitel-punkte-26 button.ist-aktiv{background:var(--m-navy-500);opacity:1;transform:scale(1.2)}
.kapitel-punkte-26--hell button{border-color:#fff}
.kapitel-punkte-26--hell button.ist-aktiv{background:#fff}
.kapitel-punkte-26--hell button::after{color:#fff}
@media (prefers-reduced-motion:reduce){.hinweis-26 svg{animation:none}}
@media (max-width:760px){.kapitel-punkte-26{right:10px;gap:12px}}

/* Ruhige Fassung (Handy, reduzierte Bewegung) ------------------------------------------------------------------ */
.welt-statisch-26{display:none;background:var(--m-paper)}
.motion-statisch .welt-26{display:none}
.motion-statisch .welt-statisch-26{display:block}
.welt-statisch-26__welt{display:grid;gap:20px;max-width:1200px;margin:0 auto;padding:36px var(--container-pad) 20px;align-items:center}
.welt-statisch-26__welt--start{padding-top:calc(64px + 24px)}
.welt-statisch-26__bild{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#E9EEF3}
.welt-statisch-26__welt--neo .welt-statisch-26__bild{background:#23264F}
.welt-statisch-26__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50%) 50%}
/* lebende Standbilder (assets/motion/statisch-leben.js): Kulisse als SVG + freigestellter Vordergrund über dem Standbild */
.welt-statisch-26__bild{position:relative}
.welt-statisch-26__leben{position:absolute;left:0;top:0;pointer-events:none}
.welt-statisch-26__leben>svg{display:block;width:100%;height:100%}
.welt-statisch-26__bild img.welt-statisch-26__vorn{position:absolute;inset:0;pointer-events:none}
.welt-statisch-26__text h1{font-size:clamp(34px,9vw,60px);line-height:1.05;margin:0}
.welt-statisch-26__text h2{font-size:clamp(28px,7vw,44px);line-height:1.08;margin:0}
.welt-statisch-26__text p{margin:12px 0 16px;color:var(--text-2);max-width:48ch}
.welt-statisch-26__text .link{display:flex;align-items:center;gap:6px;width:fit-content;margin-top:8px;font-weight:600}
.welt-statisch-26__text .welt-26__ctas{margin-top:4px}
.welt-statisch-26__sprung{margin-top:16px}
/* Schlussbild: Logo und die vier Menschen stehen rechts unten im Bild – Ausschnitt vergrößert, ohne leere Fläche */
.welt-statisch-26__welt--ende .welt-statisch-26__bild{aspect-ratio:16/9}
.welt-statisch-26__welt--ende .welt-statisch-26__bild img{transform:scale(1.6);transform-origin:70% 75%}
/* Startbild: das Auto auf dem Band näher heran */
.welt-statisch-26__welt--start .welt-statisch-26__bild img{transform:scale(1.45);transform-origin:66% 72%}
@media (min-width:900px){
  .welt-statisch-26__welt{grid-template-columns:5fr 6fr;gap:56px;padding:56px var(--container-pad)}
  .welt-statisch-26__welt:not(.welt-statisch-26__welt--start) .welt-statisch-26__bild{order:2}
  .welt-statisch-26__welt:nth-child(odd):not(.welt-statisch-26__welt--start) .welt-statisch-26__bild{order:0}
  .welt-statisch-26__bild{aspect-ratio:16/10}
}
/* Standbild-Modus: nur die Illustration, für die Fotos der ruhigen Fassung */
.standbild-26 .welt-26__text,.standbild-26 .blase-26,.standbild-26 .hinweis-26,.standbild-26 .kapitel-punkte-26,
.standbild-26 .probe-kopf,.standbild-26 .probe-weiter,.standbild-26 .welt-statisch-26{display:none!important}
/* Standbild ohne Auto und Menschen (Hintergründe der Unterseiten-Auftritte). display statt visibility: die Figuren
   setzen visibility an ihren Teilen selbst wieder auf sichtbar. */
.standbild-26--leer #auto,.standbild-26--leer #schatten,.standbild-26--leer .welt-26__vorne,.standbild-26--leer #signal,
.standbild-26--leer #person-buehne,.standbild-26--leer #arbeiter-buehne,.standbild-26--leer #bewohner-buehne,.standbild-26--leer #nachbarin-buehne{display:none!important}
/* Vordergrund der lebenden Standbilder (scripts/motion-standbilder.py vorn): Szene unsichtbar, Auto + Person bleiben */
.standbild-26--vorn,.standbild-26--vorn body,.standbild-26--vorn .welt-26{background:transparent!important}
.standbild-26--vorn .welt-26__svg:not(.welt-26__vorne){visibility:hidden}
.standbild-26--vorn #schatten,.standbild-26--vorn #signal{visibility:visible}

/* Barrierefreiheit (Step 40): Welt-Texte bleiben für Bildschirmleser vorhanden, auch wenn GSAP sie per autoAlpha
   ausblendet (dann nur Deckkraft 0, Klicks sperrt buehne-start.js). Inline-visibility von GSAP wird hier überstimmt. */
html.buehne-bereit .welt-26 .welt-26__text{visibility:visible!important}   /* erst ab Bühne bereit, sonst lagen vor dem Start alle Texte übereinander */

/* Startzustand vor dem Intro (Ilker 03.10.2026: beim Öffnen lagen kurz alle Welten übereinander – Texte, Halle,
   Häuser, Blasen –, dann „sammelte sich das Bild“). Der Browser zeichnet die Seite, bevor GSAP geladen ist, und erst
   buehne-start.js blendet die übrigen Welten aus. Deshalb bleibt die ganze Bühne unsichtbar, bis buehne-start.js
   .buehne-bereit setzt (≈ 0,4 s nach dem ersten Bild). Notbremse: nach 4 s sichtbar, falls das Skript nicht lädt. */
html:not(.motion-statisch):not(.buehne-bereit) .welt-26{visibility:hidden;animation:buehne-notfall-26 0s 4s forwards}
@keyframes buehne-notfall-26{to{visibility:visible}}