/* ============================================================
   Unknown Beauty — Unterseite „Die Symbolik“
   Scroll-Szenen: jede .sc-Szene bekommt von symbolik.js ihren
   Fortschritt als --p (0 … 1); die Effekte rechnen in CSS damit.
   ============================================================ */
:root{
  --bg:#070503; --bg2:#0d0a07;
  --gold:#e7b45c; --gold-hi:#ffe0a6; --amber:#b9772a;
  --ink:#f4ebdc; --muted:rgba(244,235,220,.66); --faint:rgba(244,235,220,.34);
  --line:rgba(231,180,92,.24);
  --display:'Cormorant Garamond',Georgia,serif;
  --caps:'Cinzel',serif;
  --ui:'Space Grotesk',ui-sans-serif,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,6vw,96px);
  --vh:100svh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--display);font-size:clamp(18px,1.35vw,21px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;touch-action:pan-x pan-y}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* ---------- Kopfzeile ---------- */
.sy-top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(16px,4vw,44px);background:linear-gradient(180deg,rgba(7,5,3,.86),rgba(7,5,3,0));transition:background .4s}
.sy-top.is-solid{background:rgba(7,5,3,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sy-brand{font-family:var(--caps);font-weight:700;letter-spacing:.24em;font-size:13px;color:var(--gold);white-space:nowrap}
.sy-nav{display:flex;align-items:center;gap:clamp(10px,2vw,22px);font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.sy-back{color:var(--muted);white-space:nowrap}
.sy-back:hover{color:var(--gold)}
.sy-lang{display:flex;gap:2px}
.sy-lang button{background:none;border:0;color:var(--faint);font:inherit;letter-spacing:.12em;padding:6px 6px;cursor:pointer}
.sy-lang button.is-active,.sy-lang button:hover{color:var(--gold)}
.btn{display:inline-block;font-family:var(--ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;border:1px solid var(--line);transition:color .3s,background .3s,border-color .3s,box-shadow .3s,filter .3s;white-space:nowrap}
.btn--gold{background:linear-gradient(120deg,var(--amber),var(--gold));color:#160f06;border-color:transparent}
.btn--gold:hover{filter:brightness(1.12);box-shadow:0 0 34px rgba(231,180,92,.4)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--mini{padding:9px 16px;font-size:10.5px;letter-spacing:.16em}
@media (max-width:640px){.sy-back span{display:none}.sy-top .btn--mini{display:none}}

/* ---------- Typografie ---------- */
.kicker{display:block;font-family:var(--ui);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.h-xl{font-family:var(--caps);font-weight:700;font-size:clamp(34px,6.4vw,92px);line-height:1.04;letter-spacing:.03em;color:var(--ink)}
.h-l{font-family:var(--caps);font-weight:700;font-size:clamp(28px,4.2vw,58px);line-height:1.1;letter-spacing:.02em}
.h-m{font-family:var(--caps);font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1.18;letter-spacing:.02em}
.gold{color:var(--gold)}
.lead{font-size:clamp(20px,1.9vw,27px);line-height:1.5;color:var(--muted)}
.sy p+p{margin-top:1em}
.quote{font-style:italic;font-size:clamp(24px,2.9vw,40px);line-height:1.32;color:var(--gold-hi)}
.quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--ui);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#160f06;background:linear-gradient(120deg,var(--amber),var(--gold));padding:6px 12px 6px 10px;margin-bottom:20px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#160f06}
.badge--lese{background:none;color:var(--gold);border:1px solid var(--line)}
.badge--lese::before{background:var(--gold)}
.ref{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:18px;display:block}

/* ---------- Szenen-Grundgerüst ---------- */
.sc{position:relative}
.sc-stick{position:sticky;top:0;height:var(--vh);overflow:hidden}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}
pic,picture{display:block}
.fill,.fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 1 · Eröffnung ---------- */
.hero{height:calc(var(--vh) * 2.3)}
.hero .fill{transform:scale(calc(1.2 - .2 * var(--p,0)));transform-origin:50% 35%;filter:brightness(calc(.62 - .3 * var(--p,0)))}
.hero-shade{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 60%,rgba(7,5,3,.15),rgba(7,5,3,.88) 78%),linear-gradient(180deg,rgba(7,5,3,.3),rgba(7,5,3,0) 30%,rgba(7,5,3,.95))}
.hero-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad)}
.hero-in .kicker{opacity:calc(1 - var(--p,0) * 2.4)}
.hero-t{transform:translateY(calc(var(--p,0) * -12vh));opacity:calc(1.6 - var(--p,0) * 2.2)}
.hero-t .h-xl span{display:block}
.hero-t .h-xl .gold{font-size:.62em;letter-spacing:.18em;margin-top:.35em}
.hero-lead{max-width:760px;margin:0 auto;position:absolute;left:0;right:0;bottom:16vh;padding:0 var(--pad);opacity:calc(var(--p,0) * 3 - .9);transform:translateY(calc((1 - var(--p,0)) * 8vh))}
.spoiler{display:inline-block;margin-top:26px;font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:10px 16px;background:rgba(7,5,3,.55)}
.spoiler b{color:var(--gold);font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-right:8px;font-size:11px}
.cue{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);font-family:var(--ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);opacity:calc(1 - var(--p,0) * 5)}
.cue::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 2 · Wort für Wort ---------- */
.words{height:calc(var(--vh) * 2.2)}
.words .sc-stick{display:flex;align-items:center;justify-content:center}
.words-t{max-width:1020px;padding:0 var(--pad);font-size:clamp(28px,4.1vw,60px);line-height:1.22;text-align:center;font-weight:500}
.words-t .w{opacity:.13;transition:opacity .45s,color .45s,text-shadow .45s}
.words-t .w.on{opacity:1}
.words-t .w.hl.on{color:var(--gold);text-shadow:0 0 28px rgba(231,180,92,.35)}

/* ---------- 3 · Landkarte der Seele ---------- */
.karte{padding:16vh 0 12vh}
.karte-head{text-align:center;max-width:760px;margin:0 auto 9vh}
.weg{position:relative;max-width:980px;margin:0 auto;padding:0 var(--pad)}
.weg-linie{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(231,180,92,.12)}
.weg-linie i{position:absolute;inset:0 0 auto 0;height:calc(var(--p,0) * 100%);background:linear-gradient(var(--gold-hi),var(--gold),var(--amber));box-shadow:0 0 14px rgba(231,180,92,.6)}
.halt{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 80px;margin-bottom:9vh}
.halt:last-child{margin-bottom:0}
.halt-pkt{position:absolute;left:50%;top:10px;width:15px;height:15px;border-radius:50%;transform:translateX(-50%);background:var(--bg);border:2px solid rgba(231,180,92,.35);transition:background .6s,border-color .6s,box-shadow .6s}
.halt.in .halt-pkt{background:var(--gold);border-color:var(--gold-hi);box-shadow:0 0 0 6px rgba(231,180,92,.14),0 0 22px rgba(231,180,92,.7)}
.halt-txt{grid-column:2}
.halt:nth-child(even) .halt-txt{grid-column:1;text-align:right}
.halt-txt .no{font-family:var(--ui);font-size:11px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.halt-txt h3{font-family:var(--caps);font-size:clamp(20px,2.1vw,27px);letter-spacing:.04em;margin:6px 0 8px}
.halt-txt p{color:var(--muted);font-size:clamp(17px,1.25vw,19.5px)}
.halt-txt .tief{color:var(--gold-hi)}
@media (max-width:760px){
  .weg-linie{left:28px}
  .halt{grid-template-columns:1fr;padding-left:58px}
  .halt-pkt{left:28px}
  .halt-txt,.halt:nth-child(even) .halt-txt{grid-column:1;text-align:left}
}

/* ---------- Kapiteltrenner ---------- */
.trenner{padding:20vh var(--pad) 10vh;text-align:center}
.trenner .h-l{max-width:900px;margin:0 auto}
.trenner p{max-width:720px;margin:22px auto 0}
.trenner-zahl{font-family:var(--caps);font-size:clamp(70px,13vw,190px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(231,180,92,.35);margin-bottom:-.3em}

/* ---------- 4 · Bild-Szene mit laufendem Text (Schwert, Oase, Berg …) ---------- */
.split{height:auto}
.split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.split--rechts .split-bild{order:2}
.split-bild{position:sticky;top:0;height:var(--vh);overflow:hidden}
.split-bild .fill{transform:scale(calc(1.16 - .16 * var(--p,0))) translateY(calc((var(--p,0) - .5) * -4%))}
.split-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,3,0) 55%,var(--bg));pointer-events:none}
.split--rechts .split-bild::after{background:linear-gradient(270deg,rgba(7,5,3,0) 55%,var(--bg))}
.split-bild .glow{position:absolute;inset:0;background:radial-gradient(40% 50% at 50% 42%,rgba(255,224,166,.35),transparent 70%);mix-blend-mode:screen;opacity:calc(var(--p,0) * 1.4 - .2);pointer-events:none}
.split-bild .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.split-bild .layer.on{opacity:1}
.split-text{padding:30vh clamp(22px,5vw,80px) 30vh}
.blk{min-height:52vh;display:flex;flex-direction:column;justify-content:center;max-width:560px}
.blk+.blk{margin-top:4vh}
.blk .h-l{margin-bottom:26px}
.blk p{color:var(--muted)}
.blk p strong{color:var(--ink);font-weight:600}
.autor{border-left:2px solid var(--gold);padding-left:22px;color:var(--ink)!important;font-size:1.08em}
@media (max-width:860px){
  .split-grid{display:block}
  .split-bild{height:var(--vh);position:sticky;top:0;z-index:0}
  .split-bild::after{background:linear-gradient(180deg,rgba(7,5,3,.15),rgba(7,5,3,.55) 60%,rgba(7,5,3,.85))!important}
  .split-text{position:relative;z-index:1;margin-top:calc(var(--vh) * -1);padding:60vh 20px 30vh}
  .blk{background:rgba(7,5,3,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:28px 22px;border:1px solid rgba(231,180,92,.12);min-height:0;margin-bottom:46vh}
}

/* ---------- 5 · Der Graben: das Bild reißt auf ---------- */
.graben{height:calc(var(--vh) * 3.4)}
.gr-half{position:absolute;inset:0}
.gr-half .fill{filter:brightness(.72)}
.gr-l{clip-path:inset(0 50% 0 0);transform:translateX(calc(var(--g,0) * -14vw))}
.gr-r{clip-path:inset(0 0 0 50%);transform:translateX(calc(var(--g,0) * 14vw))}
.gr-tiefe{position:absolute;top:0;bottom:0;left:50%;width:calc(var(--g,0) * 28vw);transform:translateX(-50%);background:radial-gradient(60% 50% at 50% 50%,#000,#050302 70%)}
.gr-licht{position:absolute;left:50%;top:50%;height:2px;width:calc(var(--b,0) * 30vw);transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);box-shadow:0 0 24px 4px rgba(255,224,166,.7),0 0 80px 20px rgba(231,180,92,.35)}
.gr-kreuz{position:absolute;left:50%;top:50%;width:2px;height:calc(var(--b,0) * 22vh);transform:translate(-50%,-62%);background:linear-gradient(transparent,var(--gold-hi),transparent);box-shadow:0 0 20px 3px rgba(255,224,166,.6);opacity:var(--b,0)}
.gr-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,3,.55),rgba(7,5,3,.1) 30%,rgba(7,5,3,.1) 60%,rgba(7,5,3,.9))}
.gr-txt{position:absolute;left:0;right:0;bottom:9vh;padding:0 var(--pad);text-align:center}
.gr-txt>div{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:820px;padding:0 var(--pad);opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gr-txt>div.on{opacity:1;transform:none}
.gr-txt p{color:var(--ink);font-size:clamp(20px,1.9vw,27px);line-height:1.45;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.gr-txt .h-l{margin-bottom:16px;text-shadow:0 2px 24px rgba(0,0,0,.9)}
.gr-txt .badge{margin-bottom:16px}

/* ---------- 6 · Die Gestalten des Widersachers (seitlich) ---------- */
.gestalten{height:calc(var(--vh) * 4)}
.ge-head{position:absolute;top:13vh;left:var(--pad);right:var(--pad);z-index:2;max-width:640px}
.ge-head p{color:var(--muted);margin-top:12px}
.ge-track{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:flex-end;gap:clamp(18px,3vw,44px);padding:0 var(--pad) 8vh calc(var(--pad) + min(40vw,560px));transform:translateX(calc(var(--hx,0px) * var(--p,0) * -1));will-change:transform}
.ge-k{position:relative;flex:0 0 auto;width:clamp(250px,27vw,380px);aspect-ratio:2/3;max-height:68vh;overflow:hidden;border:1px solid rgba(231,180,92,.18);background:#000}
.ge-k .fill{transition:transform 1.4s var(--ease)}
.ge-k:hover .fill{transform:scale(1.05)}
.ge-k::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(7,5,3,.94))}
.ge-k .ge-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px}
.ge-k .no{font-family:var(--ui);font-size:11px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.ge-k h3{font-family:var(--caps);font-size:clamp(19px,1.7vw,24px);margin:6px 0 8px;line-height:1.2}
.ge-k p{font-size:16px;line-height:1.45;color:var(--muted)}
.ge-ende{flex:0 0 auto;width:min(80vw,520px);align-self:center;padding-left:2vw}
.ge-ende .quote{font-size:clamp(26px,3vw,42px)}
@media (max-width:760px){
  .ge-head{top:10vh}
  .ge-track{padding-left:var(--pad);padding-bottom:6vh}
  .ge-k{width:72vw;max-height:56vh}
}

/* ---------- 7 · Der Begleiter in drei Gestalten ---------- */
.begleiter{height:calc(var(--vh) * 4)}
.be-bild{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.3s var(--ease),transform 2.4s var(--ease)}
.be-bild.on{opacity:1;transform:scale(1)}
.be-bild .fill{filter:brightness(.66)}
.be-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,3,.92),rgba(7,5,3,.55) 45%,rgba(7,5,3,.1)),linear-gradient(0deg,rgba(7,5,3,.7),transparent 40%)}
.be-txt{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(560px,86vw)}
.be-stufen{display:flex;gap:10px;margin-bottom:26px}
.be-stufen i{width:44px;height:2px;background:rgba(231,180,92,.22);transition:background .6s}
.be-stufen i.on{background:var(--gold)}
.be-namen{position:relative;min-height:9.5em}
.be-name{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.be-name.on{opacity:1;transform:none}
.be-name .h-l{margin-bottom:14px}
.be-name p{color:var(--ink);text-shadow:0 2px 14px rgba(0,0,0,.8)}
@media (max-width:760px){.be-shade{background:linear-gradient(0deg,rgba(7,5,3,.95),rgba(7,5,3,.6) 55%,rgba(7,5,3,.15))}.be-txt{top:auto;bottom:7vh;transform:none}.be-namen{min-height:13em}}

/* ---------- 8 · Das Herz: vier Schichten brechen ---------- */
.herz{height:calc(var(--vh) * 4)}
.herz .sc-stick{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:0 var(--pad)}
.hz-bild{position:relative;width:min(40vw,62vh);aspect-ratio:1;justify-self:center}
.hz-kern{position:absolute;inset:16%;border-radius:50%;overflow:hidden;opacity:calc(.25 + var(--k,0) * .75);filter:saturate(calc(.4 + var(--k,0) * .8));box-shadow:0 0 calc(var(--k,0) * 120px) rgba(150,170,255,.45)}
.hz-kern img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)}
.hz-ring{position:absolute;border-radius:50%;border:clamp(6px,1.1vw,12px) solid var(--c);box-shadow:0 0 24px var(--c),inset 0 0 24px var(--c);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s;opacity:.9}
.hz-ring.weg{opacity:0;transform:scale(1.35) rotate(14deg);filter:blur(6px)}
.hz-ring:nth-child(1){inset:0;--c:rgba(201,214,104,.55)}
.hz-ring:nth-child(2){inset:4%;--c:rgba(70,110,220,.6)}
.hz-ring:nth-child(3){inset:8%;--c:rgba(200,40,60,.6)}
.hz-ring:nth-child(4){inset:12%;--c:rgba(40,170,110,.6)}
.hz-liste{list-style:none;max-width:520px}
.hz-liste li{padding:16px 0;border-bottom:1px solid rgba(231,180,92,.12);transition:opacity .6s;opacity:.55}
.hz-liste li.jetzt{opacity:1}
.hz-liste li.vorbei{opacity:.4}
.hz-liste li.vorbei h4{text-decoration:line-through;text-decoration-color:rgba(231,180,92,.5)}
.hz-liste h4{font-family:var(--caps);font-size:clamp(17px,1.5vw,21px);letter-spacing:.06em;display:flex;align-items:center;gap:12px}
.hz-liste h4 i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);flex:0 0 auto}
.hz-liste p{font-size:16.5px;color:var(--muted);margin-top:4px;padding-left:24px}
.hz-liste li.kern{border-bottom:0}
.hz-liste li.kern h4{color:var(--gold-hi)}
@media (max-width:860px){
  .herz .sc-stick{grid-template-columns:1fr;align-content:center;gap:3vh}
  .hz-bild{width:min(62vw,36vh)}
  .hz-liste li{padding:8px 0}.hz-liste p{display:none}.hz-liste li.jetzt p{display:block}
}

/* ---------- 9 · Zwei Ordnungen ---------- */
.ordnungen{padding:18vh 0}
.or-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);margin-top:7vh}
.or-k{position:relative;min-height:74vh;overflow:hidden;border:1px solid rgba(231,180,92,.16);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,44px)}
.or-k .fill{opacity:.42;transition:transform 2s var(--ease)}
.or-k.in .fill{transform:scale(1.04)}
.or-k::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,5,3,.25),rgba(7,5,3,.92) 70%)}
.or-k>*:not(.fill):not(.funken){position:relative;z-index:3}
.or-k .h-m{margin-bottom:12px}
.or-k p{color:var(--muted)}
.or-k .quote{font-size:clamp(22px,2.2vw,30px);margin-bottom:18px}
.funken{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.funken i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px 2px rgba(255,224,166,.7);opacity:0}
.or-k--himmel .funken i{animation:fallen 6s linear infinite}
.or-k--nacht .funken i{background:#9fd8ff;box-shadow:0 0 8px 2px rgba(120,200,255,.6);animation:steigen 6s linear infinite}
@keyframes fallen{0%{transform:translateY(-10vh);opacity:0}15%{opacity:.9}100%{transform:translateY(80vh);opacity:0}}
@keyframes steigen{0%{transform:translateY(80vh);opacity:0}15%{opacity:.8}100%{transform:translateY(-10vh) scale(.4);opacity:0}}
@media (max-width:760px){.or-grid{grid-template-columns:1fr}.or-k{min-height:64vh}}

/* ---------- 10 · Weitere Symbole (Karten) ---------- */
.symbole{padding:14vh 0 16vh}
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:rgba(231,180,92,.14);border:1px solid rgba(231,180,92,.14);margin-top:7vh}
.sym{background:var(--bg);padding:clamp(24px,2.6vw,38px);transition:background .5s}
.sym:hover{background:#110c07}
.sym .ico{width:42px;height:42px;color:var(--gold);margin-bottom:18px}
.sym h3{font-family:var(--caps);font-size:clamp(18px,1.5vw,21px);letter-spacing:.05em;margin-bottom:10px}
.sym p{font-size:17px;color:var(--muted);line-height:1.55}
.sym .ref{margin-top:14px}

/* ---------- 11 · Weitere Deutungsspuren ---------- */
.spuren{padding:6vh 0 16vh}
.sp-liste{margin-top:6vh;border-top:1px solid rgba(231,180,92,.16)}
.sp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:12px 5vw;padding:clamp(26px,4vh,42px) 0;border-bottom:1px solid rgba(231,180,92,.16)}
.sp h3{font-family:var(--caps);font-size:clamp(19px,1.7vw,24px);letter-spacing:.04em;line-height:1.25}
.sp h3 small{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sp p{color:var(--muted)}
.sp .ref{margin-top:10px}
@media (max-width:760px){.sp{grid-template-columns:1fr}}

/* ---------- 12 · Christus vor der Zeit ---------- */
.christus{height:calc(var(--vh) * 2.6)}
.christus .fill{transform:scale(calc(1.25 - .25 * var(--p,0)));filter:brightness(calc(.35 + .45 * var(--p,0)))}
.ch-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,5,3,.95),rgba(7,5,3,.25) 50%,rgba(7,5,3,.6))}
.ch-txt{position:absolute;left:0;right:0;bottom:10vh;text-align:center;padding:0 var(--pad)}
.ch-txt .quote{max-width:900px;margin:0 auto;opacity:calc(var(--p,0) * 2.6 - .5);transform:translateY(calc((1 - var(--p,0)) * 6vh))}
.ch-txt .kicker{opacity:calc(var(--p,0) * 3 - .2)}
.ch-txt .ch-p{max-width:720px;margin:22px auto 0;color:var(--ink);opacity:calc(var(--p,0) * 2.6 - 1.2);text-shadow:0 2px 14px rgba(0,0,0,.85)}

/* ---------- 13 · Schluss ---------- */
.schluss{padding:22vh 0 14vh;text-align:center;position:relative;overflow:hidden}
.schluss::before{content:"";position:absolute;left:50%;top:40%;width:80vmax;height:80vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(231,180,92,.13),transparent);pointer-events:none}
.schluss .h-l{max-width:960px;margin:0 auto}
.schluss .lead{max-width:760px;margin:26px auto 0}
.schluss-cta{margin-top:7vh;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.quelle{margin-top:9vh;font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--faint);max-width:760px;margin-left:auto;margin-right:auto;line-height:1.7}

/* ---------- Fuß ---------- */
.sy-fuss{border-top:1px solid rgba(231,180,92,.12);padding:34px var(--pad) 46px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--faint)}
.sy-fuss nav{display:flex;gap:18px}
.sy-fuss a:hover{color:var(--gold)}

/* ---------- Ruhige Fassung: keine Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .hero,.words,.graben,.gestalten,.begleiter,.herz,.christus{height:auto}
  .sc-stick{position:relative;height:auto;min-height:var(--vh)}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .fill,.split-bild .fill,.christus .fill{transform:none}
  .hero-in .kicker,.hero-t,.hero-lead,.ch-txt .quote,.ch-txt .kicker,.ch-txt .ch-p{opacity:1;transform:none}
  .hero-lead{position:relative;bottom:auto;margin-top:30px}
  .words-t .w{opacity:1}
  .gr-txt>div,.be-name{position:relative;opacity:1;transform:none;margin-bottom:28px}
  .gr-txt{position:relative;background:rgba(7,5,3,.8);padding:40px var(--pad)}
  .ge-track{position:relative;transform:none;flex-wrap:wrap;padding:30vh var(--pad) 8vh}
  .be-bild{opacity:1}.be-bild~.be-bild{display:none}
  .be-namen{min-height:0}.be-txt{position:relative;top:auto;transform:none;padding:20vh 0 8vh}
  .hz-ring{display:none}.hz-liste li{opacity:1}
  .funken{display:none}
}

/* ---------- Hilfen + rechts-nach-links (Persisch, Arabisch) ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sy-lang select{background:transparent;color:var(--gold);border:1px solid var(--line);font-family:var(--ui);font-size:11.5px;letter-spacing:.1em;padding:7px 8px;cursor:pointer}
.sy-lang select option{background:var(--bg);color:var(--ink)}
[dir=rtl] .ge-track{left:auto;right:0;padding:0 calc(var(--pad) + min(40vw,560px)) 8vh var(--pad);transform:translateX(calc(var(--hx,0px) * var(--p,0)))}
[dir=rtl] .halt-txt{text-align:right}
[dir=rtl] .halt:nth-child(even) .halt-txt{text-align:left}
[dir=rtl] .autor{border-left:0;border-right:2px solid var(--gold);padding-left:0;padding-right:22px}
[dir=rtl] .be-shade{background:linear-gradient(270deg,rgba(7,5,3,.92),rgba(7,5,3,.55) 45%,rgba(7,5,3,.1)),linear-gradient(0deg,rgba(7,5,3,.7),transparent 40%)}
[dir=rtl] .be-txt{left:auto;right:var(--pad)}
[dir=rtl] .ge-head{text-align:right}
[dir=rtl] .kicker,[dir=rtl] .ref,[dir=rtl] .badge,[dir=rtl] .quote cite{letter-spacing:0}
[dir=rtl] .h-xl,[dir=rtl] .h-l,[dir=rtl] .h-m,[dir=rtl] .halt-txt h3,[dir=rtl] .sym h3,[dir=rtl] .sp h3,[dir=rtl] .ge-k h3,[dir=rtl] .hz-liste h4{font-family:'Noto Naskh Arabic','Geeza Pro',var(--display);letter-spacing:0;line-height:1.5}
[dir=rtl] body{font-family:'Noto Naskh Arabic','Geeza Pro',var(--display)}
:lang(zh-Hant) .h-xl,:lang(zh-Hant) .h-l,:lang(zh-Hant) .h-m,:lang(zh-Hant) h3,:lang(zh-Hant) h4{font-family:'Noto Serif TC','PingFang TC','Songti TC',serif;letter-spacing:.06em}
:lang(zh-Hant) body{font-family:'Noto Serif TC','PingFang TC','Songti TC',serif}
:lang(ka) .h-xl,:lang(ka) .h-l,:lang(ka) .h-m,:lang(ka) h3,:lang(ka) h4{font-family:'Noto Serif Georgian','Noto Sans Georgian',serif;letter-spacing:.01em}
:lang(ka) body{font-family:'Noto Serif Georgian','Noto Sans Georgian',var(--display)}
@media (max-width:760px){[dir=rtl] .ge-track{padding-right:var(--pad)}[dir=rtl] .halt{padding-left:0;padding-right:58px}[dir=rtl] .weg-linie,[dir=rtl] .halt-pkt{left:auto;right:28px;transform:translateX(50%)}[dir=rtl] .be-txt{right:var(--pad);left:var(--pad)}}

/* ---------- Korrekturen nach Sichtprüfung ---------- */
.be-txt{width:min(560px,86vw)}
.ge-head{top:12vh}
.ge-k{max-height:52vh}
.ge-k img{object-position:var(--op,50% 50%)}
.sym-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.sym-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.sym-grid{grid-template-columns:1fr}}
@media (max-width:760px){.ge-k{max-height:50vh}.ge-head{top:9vh}}
.sp-gruppe{font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);padding:7vh 0 2vh;border-bottom:1px solid rgba(231,180,92,.16)}
.sp-lese{display:inline-block;margin-inline-start:10px;font-family:var(--ui);font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:2px 7px;vertical-align:middle}
.graben{height:calc(var(--vh) * 4.2)}
.gr-txt .quote{text-shadow:0 2px 20px rgba(0,0,0,.95)}
@media (min-width:1100px){.sym-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1400px){.sym-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
:lang(ka) .hero-t .h-xl .gold,:lang(zh-Hant) .hero-t .h-xl .gold{letter-spacing:.04em}