/* Project Zeus – Teaser-Landingpage
   Vollbild ohne Scrollen, Scherenschnitt-Slideshow, statische Endseite.
   Farbwelt: Schwarz #0b0a08, Sepia #2a1f14, Bernstein #d9a441, Pergament #e8d9b5 (Annahme, siehe README). */

:root {
  --black: #0b0a08;
  --sepia: #2a1f14;
  --amber: #d9a441;
  --parchment: #e8d9b5;
  --paper-soft: #1b1510;   /* ferne Ebenen weicher */
  --paper-mid: #110d09;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;

  --pan: 0;            /* -1 Figur links, 0 Mitte, 1 Figur rechts (von JS gesetzt) */
  --pan-unit: 360px;   /* Schwenkweite der nahen Ebene in viewBox-Einheiten (von JS je Seitenverhältnis gesetzt) */
  --pan-px: 0px;       /* dieselbe Schwenkweite in CSS-Pixeln, für die Nebel-Ebenen */
  --t-cam: 1.9s;       /* Kamerafahrt */
  --t-scene: 2.6s;     /* Licht- und Figurenwechsel */
  --ease: cubic-bezier(.45, 0, .18, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--parchment);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { position: fixed; inset: 0; }   /* iOS: kein Mitscrollen der Adressleiste */

.app {
  position: relative;
  width: 100vw; width: 100dvw;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.app[data-mode="end"] { cursor: default; }

/* ---------- Bühne ---------- */
.stage-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.world { transition: transform var(--t-cam) var(--ease); }

.layer { transition: transform var(--t-cam) var(--ease); will-change: transform; }
.layer-far  { transform: translateX(calc(var(--pan) * var(--pan-unit) * 0.3)); }
.layer-mid  { transform: translateX(calc(var(--pan) * var(--pan-unit) * 0.6)); }
.layer-near { transform: translateX(calc(var(--pan) * var(--pan-unit) * 1)); }
.layer-fore { transform: translateX(calc(var(--pan) * var(--pan-unit) * 1.3)); }

.mountains { fill: var(--paper-soft); }
.hills { fill: var(--paper-mid); }
.ground, .rocks, .pillar, .beam, .atlas path, .zeus path, .ground-detail path, .fore-tree path, .flock-near path { fill: var(--black); }
.mid-trees path, .posts path { fill: var(--paper-mid); }
.flock-far path { fill: #221a12; }
.mountains { filter: url(#soft); }
.sun circle { fill: var(--parchment); opacity: .55; }
.sun { transition: transform var(--t-scene) var(--ease), opacity var(--t-scene) var(--ease); transform: translateY(-30px); opacity: .35; }
.dome-wisps path { fill: var(--black); opacity: .45; }
.flock { animation: flock 38s linear infinite alternate; }
.flock-near { animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes flock { from { transform: translate(-60px, 8px); } to { transform: translate(60px, -14px); } }
.stars circle { fill: var(--parchment); opacity: .85; }
.stars circle:nth-child(3n) { animation: twinkle 4.2s ease-in-out infinite; }
.stars circle:nth-child(3n+1) { animation: twinkle 5.6s ease-in-out infinite 1.3s; }
@keyframes twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .25; } }

/* Lichtquelle: wandert und wächst je Szene */
.light { transition: transform var(--t-scene) var(--ease), opacity var(--t-scene) var(--ease); opacity: .7; transform: translateY(0) scale(1.1, .5); }
.rift { transition: opacity var(--t-scene) var(--ease); opacity: 0; }
.crack { transition: opacity var(--t-scene) var(--ease); opacity: 0; }
.lightning { opacity: 0; }
.sky-bolt { opacity: 0; transition: opacity var(--t-scene) var(--ease); }

/* Gewölbe */
.dome { transition: transform var(--t-scene) var(--ease); }
.dome-half { transition: transform var(--t-scene) var(--ease), opacity var(--t-scene) var(--ease); }
.dome-paper { fill: var(--black); }

/* Atlas: Gelenkpuppe */
.atlas { transition: transform var(--t-scene) var(--ease), opacity var(--t-scene) var(--ease); transform-origin: 0 0; }
.atlas-torso { transition: transform var(--t-scene) var(--ease); }
.breath { animation: breath 4.6s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Zeus */
.zeus { transition: transform 2.6s var(--ease), opacity 2s var(--ease); opacity: 0; transform: translateX(300px) scale(.68); }
.zeus-arm { transition: transform 1.1s var(--ease); transform: rotate(-70deg); }
.cloak { animation: cloak 4.8s ease-in-out infinite; }
@keyframes cloak { 0%, 100% { transform: rotate(0deg) scaleX(1); } 50% { transform: rotate(2.4deg) scaleX(1.06); } }
.zeus .bolt path { fill: #fff3d0; }
.zeus .bolt-glow { filter: url(#glow); }
.zeus .bolt-glow path { fill: var(--amber); }
.zeus .grips path { fill: var(--black); }
.zeus .rock-cracks path { fill: var(--parchment); opacity: .3; }
.zeus .cloak path:nth-child(3) { opacity: .75; }
.bolt { opacity: 0; transition: opacity .6s; }
.bolt-glow { animation: boltGlow 2.6s ease-in-out infinite; }
@keyframes boltGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Säulen und Balken */
.pillars { transition: opacity var(--t-scene) var(--ease); opacity: 0; }
.pillar { transform: scaleY(0); transition: transform 1.6s var(--ease); }
.beam { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.pillar-pos { transition: transform var(--t-scene) var(--ease); }

/* Funken */
.embers { opacity: 0; transition: opacity 1.5s; }
.embers circle { fill: var(--amber); animation: ember 6s linear infinite; opacity: 0; }
.embers circle:nth-child(2n) { animation-duration: 7.5s; animation-delay: 1.1s; }
.embers circle:nth-child(3n) { animation-duration: 5.2s; animation-delay: 2.4s; }
.embers circle:nth-child(5n) { animation-delay: 3.6s; }
.embers circle:nth-child(7n) { animation-duration: 8.6s; animation-delay: .6s; }
@keyframes ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  60% { opacity: .5; }
  100% { transform: translate(40px, -420px); opacity: 0; }
}

/* Nebel: HTML-Ebenen, eigener Compositing-Layer; Filter nur auf kleinen Ellipsen */
.fog { position: absolute; inset: 0; pointer-events: none; transition: transform var(--t-cam) var(--ease), opacity var(--t-scene) var(--ease); will-change: transform, opacity; }
.fog svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.fog ellipse { fill: #c7a874; }
.fog-back { transform: translateX(calc(var(--pan) * var(--pan-px) * 0.6)); opacity: .42; }
.fog-front { transform: translateX(calc(var(--pan) * var(--pan-px) * 1.3)); opacity: .38; }
.fog-rift { transform: translateX(calc(var(--pan) * var(--pan-px) * 1)); opacity: 0; }
.fog-drift { animation: drift 26s ease-in-out infinite alternate; will-change: transform; }
.fog-drift-2 { animation-duration: 34s; animation-direction: alternate-reverse; }
.fog-drift-3 { animation: rise 9s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-2.5%) scaleX(1); } to { transform: translateX(2.5%) scaleX(1.06); } }
@keyframes rise { from { transform: translateY(1.5%) scaleY(1); } to { transform: translateY(-1.5%) scaleY(1.12); } }

/* Film-Schichten */
.dim { position: absolute; inset: 0; background: var(--black); opacity: .42; transition: opacity var(--t-scene) var(--ease); pointer-events: none; }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 55%, rgba(11,10,8,0) 40%, rgba(11,10,8,.55) 80%, rgba(11,10,8,.9) 100%); }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; pointer-events: none; }
.flash { position: absolute; inset: 0; background: #fff3d0; opacity: 0; pointer-events: none; }

/* ---------- Szenen-Zustände ---------- */
/* 1 Atlas: Licht tief, dichter Bodennebel */
[data-scene="1"] .light { transform: translateY(0) scale(1.15, .5); opacity: .75; }
[data-scene="1"] .sun { transform: translateY(0px); opacity: .3; }
[data-scene="1"] .dim { opacity: .42; }

/* 2 Herkunft: Figur beugt sich tiefer, Gewölbe senkt sich */
[data-scene="2"] .light { transform: translateY(10px) scale(1.05, .45); opacity: .6; }
[data-scene="2"] .sun { transform: translateY(10px); opacity: .25; }
[data-scene="2"] .dim { opacity: .5; }
[data-scene="2"] .dome { transform: translateY(58px); }
[data-scene="2"] .atlas { transform: scale(1, .93); }
[data-scene="2"] .atlas-torso { transform: rotate(-9deg); }
[data-scene="2"] .atlas-torso, [data-scene="2"] .atlas, [data-scene="2"] .dome { transition-duration: 5.5s; }
[data-scene="2"] .fog-back { opacity: .45; }

/* 3 Wendepunkt: Licht hebt sich, erster Lichtriss */
[data-scene="3"] .light { transform: translateY(-220px) scale(1.3, .95); opacity: .85; }
[data-scene="3"] .sun { transform: translateY(-230px); opacity: .5; }
[data-scene="3"] .dim { opacity: .3; }
[data-scene="3"] .dome { transform: translateY(40px); }
[data-scene="3"] .atlas { transform: scale(1, .97); }
[data-scene="3"] .atlas-torso { transform: rotate(-5deg); }
[data-scene="3"] .crack { opacity: .9; animation: flicker 2.8s ease-in-out infinite; }
[data-scene="3"] .rift { opacity: .25; }
[data-scene="3"] .fog-back { opacity: .45; }
[data-scene="3"] .fog-front { opacity: .35; }
@keyframes flicker { 0%, 100% { opacity: .9; } 40% { opacity: .55; } 55% { opacity: 1; } 75% { opacity: .7; } }

/* 4 Anspruch: Säulen wachsen, Nebel weicht */
[data-scene="4"] .light { transform: translateY(-260px) scale(1.35, 1); opacity: .9; }
[data-scene="4"] .sun { transform: translateY(-280px); opacity: .55; }
[data-scene="4"] .dim { opacity: .26; }
[data-scene="4"] .dome { transform: translateY(30px); }
[data-scene="4"] .atlas-torso { transform: rotate(-5deg); }
[data-scene="4"] .crack { opacity: .6; }
[data-scene="4"] .rift { opacity: .3; }
[data-scene="4"] .pillars { opacity: 1; }
[data-scene="4"] .pillar { transform: scaleY(1); }
[data-scene="4"] .pillars > g:nth-child(1) .pillar { transform: scaleY(.78); transition-delay: .2s; }
[data-scene="4"] .pillars > g:nth-child(2) .pillar { transform: scaleY(1); transition-delay: .6s; }
[data-scene="4"] .pillars > g:nth-child(3) .pillar { transform: scaleY(.86); transition-delay: .4s; }
[data-scene="4"] .pillars > g:nth-child(4) .pillar { transform: scaleY(1.08); transition-delay: .9s; }
[data-scene="4"] .pillars > g:nth-child(5) .pillar { transform: scaleY(.9); transition-delay: 1.2s; }
[data-scene="4"] .beam-b { transform: scaleX(1); transition-delay: 1.8s; }
[data-scene="4"] .fog-back { opacity: .2; }
[data-scene="4"] .fog-front { opacity: .15; }

/* 5 Zeus: Blitz, Himmel reißt auf, Zeus tritt vor, Atlas zurück */
[data-scene="5"] .light { transform: translateY(-470px) scale(1.5, 1.3); opacity: 1; }
[data-scene="5"] .sun { transform: translateY(-480px); opacity: .7; }
[data-scene="5"] .dim { opacity: .2; }
[data-scene="5"] .dome-l { transform: translate(-320px, -340px) rotate(-5deg); }
[data-scene="5"] .dome-r { transform: translate(320px, -340px) rotate(5deg); }
[data-scene="5"] .crack { opacity: 0; }
[data-scene="5"] .rift { opacity: 1; }
[data-scene="5"] .atlas { transform: translate(-250px, -8px) scale(.8); opacity: .45; }
[data-scene="5"] .atlas-torso { transform: rotate(-7deg); }
[data-scene="5"] .zeus { opacity: 1; transform: translateX(170px) scale(.68); }
[data-scene="5"] .zeus-arm { transform: rotate(0deg); transition-delay: 1.3s; }
[data-scene="5"] .bolt { opacity: 1; transition-delay: 2.2s; }
[data-scene="5"] .lightning { animation: strike 1.4s ease-out 2.1s 1 both; }
[data-scene="5"] .flash { animation: flash 1.3s ease-out 2.15s 1 both; }
[data-scene="5"] .sky-bolt-a { animation: strike 1.6s ease-out 1.5s 1 both; }
[data-scene="5"] .sky-bolt-b { animation: strike 1.5s ease-out 2.9s 1 both; }
[data-scene="5"] .pillars { opacity: .9; }
[data-scene="5"] .pillar { transform: scaleY(1); }
[data-scene="5"] .pillars > g:nth-child(1) .pillar { transform: scaleY(.78); }
[data-scene="5"] .pillars > g:nth-child(3) .pillar { transform: scaleY(.86); }
[data-scene="5"] .pillars > g:nth-child(4) .pillar { transform: scaleY(1.08); }
[data-scene="5"] .pillars > g:nth-child(5) .pillar { transform: scaleY(.9); }
[data-scene="5"] .beam-b { transform: scaleX(1); }
[data-scene="5"] .embers { opacity: 1; transition-delay: 2.4s; }
[data-scene="5"] .fog-rift { opacity: .6; }
[data-scene="5"] .fog-back { opacity: .35; }
[data-scene="5"] .fog-front { opacity: .3; }
@keyframes strike {
  0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .2; } 20% { opacity: 1; }
  45% { opacity: .9; } 100% { opacity: 0; }
}
@keyframes flash {
  0% { opacity: 0; } 5% { opacity: .85; } 12% { opacity: .15; } 18% { opacity: .7; } 100% { opacity: 0; }
}

/* 6 Ordnung: Säulen und Balken fügen sich zum Raster */
[data-scene="6"] .light { transform: translateY(-500px) scale(1.5, 1.3); opacity: .95; }
[data-scene="6"] .sun { transform: translateY(-520px); opacity: .7; }
[data-scene="6"] .dim { opacity: .22; }
[data-scene="6"] .dome-l { transform: translate(-440px, -460px) rotate(-7deg); opacity: .85; }
[data-scene="6"] .dome-r { transform: translate(440px, -460px) rotate(7deg); opacity: .85; }
[data-scene="6"] .crack { opacity: 0; }
[data-scene="6"] .rift { opacity: .9; }
[data-scene="6"] .atlas { transform: translate(-330px, -8px) scale(.76); opacity: .25; }
[data-scene="6"] .zeus { opacity: 1; transform: translateX(90px) scale(.68); }
[data-scene="6"] .zeus-arm { transform: rotate(0deg); }
[data-scene="6"] .bolt { opacity: 1; }
[data-scene="6"] .pillars { opacity: 1; }
[data-scene="6"] .pillar { transform: scaleY(1); }
[data-scene="6"] .pillars > g:nth-child(1) .pillar-pos { transform: translateX(-20px); }
[data-scene="6"] .pillars > g:nth-child(2) .pillar-pos { transform: translateX(-10px); }
[data-scene="6"] .pillars > g:nth-child(4) .pillar-pos { transform: translateX(10px); }
[data-scene="6"] .pillars > g:nth-child(5) .pillar-pos { transform: translateX(20px); }
[data-scene="6"] .beam-a, [data-scene="6"] .beam-b { transform: scaleX(1); }
[data-scene="6"] .beam-c { transform: scaleX(1); transition-delay: 1.2s; }
[data-scene="6"] .beam-d { transform: scaleX(1); transition-delay: 2s; }
[data-scene="6"] .embers { opacity: .7; }
[data-scene="6"] .sky-bolt { opacity: .35; animation: flicker 3.6s ease-in-out infinite; }
[data-scene="6"] .fog-rift { opacity: .35; }
[data-scene="6"] .fog-back { opacity: .25; }
[data-scene="6"] .fog-front { opacity: .2; }

/* Ende: ruhiges Standbild, aufrechte Silhouette klein im unteren Drittel, Licht hoch */
[data-scene="end"] .light { transform: translateY(-560px) scale(1.7, 1.4); opacity: 1; }
[data-scene="end"] .sun { transform: translateY(-560px); opacity: .75; }
[data-scene="end"] .dim { opacity: .14; }
[data-scene="end"] .dome-l { transform: translate(-560px, -520px) rotate(-8deg); opacity: 0; }
[data-scene="end"] .dome-r { transform: translate(560px, -520px) rotate(8deg); opacity: 0; }
[data-scene="end"] .crack { opacity: 0; }
[data-scene="end"] .rift { opacity: .5; }
[data-scene="end"] .atlas { transform: translate(-360px, -8px) scale(.7); opacity: 0; }
/* Weiter rechts und tiefer, damit der Blitz nicht in den Titel ragt (Opus-Korrektur 2026-10-27) */
[data-scene="end"] .zeus { opacity: 1; transform: translate(600px, 130px) scale(.44); }
[data-scene="end"] .zeus-arm { transform: rotate(0deg); }
[data-scene="end"] .bolt { opacity: 1; }
[data-scene="end"] .pillars { opacity: .2; }
[data-scene="end"] .pillar { transform: scaleY(1); }
[data-scene="end"] .pillars > g:nth-child(1) .pillar-pos { transform: translateX(-20px); }
[data-scene="end"] .pillars > g:nth-child(2) .pillar-pos { transform: translateX(-10px); }
[data-scene="end"] .pillars > g:nth-child(4) .pillar-pos { transform: translateX(10px); }
[data-scene="end"] .pillars > g:nth-child(5) .pillar-pos { transform: translateX(20px); }
[data-scene="end"] .beam-a, [data-scene="end"] .beam-b, [data-scene="end"] .beam-c, [data-scene="end"] .beam-d { transform: scaleX(1); }
[data-scene="end"] .embers { opacity: .5; }
[data-scene="end"] .sky-bolt { opacity: .22; }
[data-scene="end"] .fog-rift { opacity: 0; }
[data-scene="end"] .fog-back { opacity: .3; }
[data-scene="end"] .fog-front { opacity: .25; }
[data-scene="end"] .world { transform: translateY(0); }

/* ---------- Slideshow-Text ---------- */
.slide-text {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6vw, 96px);
  min-width: 0;
  opacity: 1;
  transition: opacity .4s ease, transform 1.4s var(--ease);
  pointer-events: none;
}
.slide-text[data-side="right"] { grid-column: 2; background: linear-gradient(to right, rgba(11,10,8,0) 0%, rgba(11,10,8,.5) 30%, rgba(11,10,8,.72) 100%); }
.slide-text[data-side="left"]  { grid-column: 1; background: linear-gradient(to left,  rgba(11,10,8,0) 0%, rgba(11,10,8,.5) 30%, rgba(11,10,8,.72) 100%); }
.slide-text.out { opacity: 0; }
.slide-text.center { opacity: 0; transform: translateX(calc(var(--to-center) * 1px)) scale(.98); transition: opacity 1.1s ease, transform 1.4s var(--ease); }

.line {
  margin: 0 0 .55em;
  font-size: clamp(1.15rem, 1.45vw + .55rem, 2.15rem);
  line-height: 1.38;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(10px);
  animation: lineIn 1s ease-out forwards;
  animation-delay: calc(var(--i) * .6s + .45s);
}
.line:last-child { margin-bottom: 0; }
.slide-text.single .line {
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw + .7rem, 3.4rem);
  line-height: 1.25;
}
@keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Endseite ---------- */
.end {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 80px) 34vh;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity 2.2s var(--ease), transform 2.2s var(--ease);
  pointer-events: none;
  visibility: hidden;
}
.end.visible { opacity: 1; transform: none; visibility: visible; }
/* Textfeld der Endseite: dunkles Sepia-Glas, damit der Text vor Himmel, Säulen und Vögeln lesbar bleibt (Peter, 2026-10-27) */
.end-panel {
  display: flex; flex-direction: column; align-items: center;
  max-width: min(92vw, 1180px);
  padding: clamp(22px, 3.2vw, 46px) clamp(24px, 4.6vw, 72px) clamp(20px, 2.8vw, 40px);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(217,164,65,.10), rgba(217,164,65,0) 60%),
    linear-gradient(180deg, rgba(24,18,11,.70) 0%, rgba(11,10,8,.80) 100%);
  border: 1px solid rgba(217,164,65,.32);
  border-radius: 3px;
  outline: 1px solid rgba(217,164,65,.14);
  outline-offset: 7px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,217,181,.08);
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
}
.end-panel .end-claim { color: var(--parchment); }
.end-panel .end-soon { margin-top: .2em; }
.end-title {
  margin: 0 0 .45em;
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw + .6rem, 5.4rem);
  letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 28px rgba(217,164,65,.35);
}
.end-claim {
  margin: 0 0 1.4em;
  font-style: italic;
  font-size: clamp(1.1rem, 1.3vw + .6rem, 1.95rem);
  line-height: 1.4;
  max-width: 34ch;
  text-wrap: balance;
}
.end-soon {
  margin: 0;
  font-size: clamp(1rem, 1vw + .5rem, 1.5rem);
  letter-spacing: .4em; text-indent: .4em;
  text-transform: uppercase;
  color: var(--amber);
  animation: pulse 4.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Bedienung ---------- */
.ctl {
  position: absolute; z-index: 5;
  top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  min-height: 44px; padding: 10px 14px;
  background: rgba(11,10,8,.35);
  border: 1px solid rgba(232,217,181,.35);
  border-radius: 2px;
  color: var(--parchment);
  font: inherit; font-size: .9rem; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .25s, border-color .25s, color .25s;
}
.ctl:hover, .ctl:focus-visible { background: rgba(217,164,65,.18); border-color: var(--amber); color: #fff3d0; outline: none; }
/* Anmelden links oben (Peter, 2026-10-27), Gegenstück zu "Überspringen" rechts */
.ctl.signin {
  left: max(16px, env(safe-area-inset-left)); right: auto;
  display: inline-flex; align-items: center; text-decoration: none;
}
.ctl:focus-visible { box-shadow: 0 0 0 3px rgba(217,164,65,.45); }

.dots {
  position: absolute; z-index: 5;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; gap: 10px; padding: 8px 10px;
  transition: opacity .8s;
}
.dots button {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.dots button::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(232,217,181,.35); transition: background .4s, transform .4s;
}
.dots button[aria-current="true"]::before { background: var(--amber); transform: scale(1.35); }
.dots button:hover::before, .dots button:focus-visible::before { background: var(--parchment); }
.dots button:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.app[data-mode="end"] .dots { opacity: 0; pointer-events: none; }

.hint {
  position: absolute; z-index: 4; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 44px);
  transform: translateX(-50%);
  margin: 0; font-size: .78rem; letter-spacing: .08em; color: rgba(232,217,181,.55);
  white-space: nowrap; opacity: 0; transition: opacity 1s; pointer-events: none;
}
.hint.show { opacity: 1; }

/* ---------- Hochformat / schmal: Teilung oben (Animation) / unten (Text) ---------- */
@media (orientation: portrait), (max-width: 640px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .slide-text[data-side="right"], .slide-text[data-side="left"] {
    grid-column: 1; grid-row: 2;
    justify-content: flex-start;
    padding-top: 6vh;
    background: linear-gradient(to bottom, rgba(11,10,8,0) 0%, rgba(11,10,8,.55) 22%, rgba(11,10,8,.8) 100%);
  }
  .world { transform: translateY(-150px) scale(.62); transform-origin: 1000px 760px; }
  [data-scene="end"] .world { transform: translateY(-20px) scale(.75); }
  [data-scene="5"] .zeus { transform: translateX(60px) scale(.68); }
  [data-scene="6"] .zeus { transform: translateX(20px) scale(.68); }
  [data-scene="end"] .zeus { transform: translate(0, 60px) scale(.34); }
  .line { font-size: clamp(1.05rem, 4.6vw, 1.6rem); }
  .slide-text.single .line { font-size: clamp(1.4rem, 6.4vw, 2.3rem); }
  .end-title { letter-spacing: .22em; text-indent: .22em; }
  .end-panel { padding: 20px 18px 18px; outline-offset: 4px; }
  .ctl { font-size: .78rem; padding: 9px 12px; }
  .hint { display: none; }
}
/* Querformat auf Handy: wenig Höhe */
@media (orientation: landscape) and (max-height: 480px) {
  .slide-text { padding: 16px 28px; }
  .line { font-size: clamp(.95rem, 2.4vh + .4rem, 1.3rem); margin-bottom: .4em; }
  .slide-text.single .line { font-size: clamp(1.2rem, 4vh + .4rem, 1.8rem); }
  .end-title { font-size: clamp(1.6rem, 8vh, 3rem); margin-bottom: .3em; }
  .end-claim { font-size: clamp(.95rem, 3.2vh, 1.3rem); margin-bottom: .9em; }
  .dots { bottom: 6px; }
  .ctl { top: 8px; min-height: 36px; padding: 6px 10px; font-size: .72rem; }
}

/* ---------- Reduzierte Bewegung: keine Kamerafahrten, keine Schleifen ---------- */
@media (prefers-reduced-motion: reduce) {
  .world, .layer, .light, .rift, .crack, .dome, .dome-half, .atlas, .atlas-torso, .zeus, .zeus-arm, .bolt,
  .pillars, .pillar, .beam, .pillar-pos, .embers, .fog, .dim, .sun, .slide-text, .end {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
  .breath, .cloak, .fog-drift, .stars circle, .embers circle, .end-soon, .crack, .lightning, .flash, .sky-bolt, .flock, .bolt-glow { animation: none !important; }
  .line { animation-duration: .01s; animation-delay: 0s; }
  [data-scene="5"] .lightning { opacity: 0; }
.sky-bolt { opacity: 0; transition: opacity var(--t-scene) var(--ease); }
}
/* Schneller Übergang beim Überspringen */
.app.fast .world, .app.fast .layer, .app.fast .light, .app.fast .rift, .app.fast .crack, .app.fast .dome-half,
.app.fast .atlas, .app.fast .atlas-torso, .app.fast .zeus, .app.fast .zeus-arm, .app.fast .pillars, .app.fast .pillar,
.app.fast .beam, .app.fast .pillar-pos, .app.fast .embers, .app.fast .fog, .app.fast .dim, .app.fast .sun {
  transition-duration: 1.2s; transition-delay: 0s;
}
.app.instant .world, .app.instant .layer, .app.instant .light, .app.instant .rift, .app.instant .crack, .app.instant .dome-half,
.app.instant .atlas, .app.instant .atlas-torso, .app.instant .zeus, .app.instant .zeus-arm, .app.instant .pillars, .app.instant .pillar,
.app.instant .beam, .app.instant .pillar-pos, .app.instant .embers, .app.instant .fog, .app.instant .dim, .app.instant .sun, .app.instant .end, .app.instant .slide-text {
  transition-duration: .01s; transition-delay: 0s;
}