/* ============================================================
   Unknown Beauty — "Reise"-Fassung (Scroll-Reise mit Tuer nach Eden)
   Baut auf style.css auf (Buttons, Formular, Persisch, Einwilligung)
   und ueberschreibt nur, was die Reise anders braucht.
   Alle Scroll-Effekte haengen an html.motion (JS + keine reduzierte
   Bewegung). Ohne .motion ist alles eine ruhige, statische Seite.
   ============================================================ */
:root{
  --gold:#ECC878; --gold-hi:#fff0c8; --amber:#b98a3e;
  --bg:#050302; --bg2:#0b0806;
  --line:rgba(236,200,120,.22);
}

/* Kein eigener Cursor mehr: nativer Zeiger */
@media (pointer:fine){body,a,button,.magnetic{cursor:auto}}
a,button,label.fb-check{cursor:pointer}
body{background:var(--bg)}
.kicker{display:inline-block;font-family:var(--ui);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}

/* ============ Kopfzeile ============ */
.topbar{transition:background .4s,opacity .5s}
.topbar.solid{background:linear-gradient(to bottom,rgba(5,3,2,.9),rgba(5,3,2,0));backdrop-filter:none;-webkit-backdrop-filter:none}

/* ============ INTRO: Lichttor -> Eden ============ */
.intro{position:relative;background:#020304}
.intro-stage{position:relative;height:100vh;overflow:hidden;background:#020304}
.motion .intro{height:560vh}
.motion .intro-stage{position:sticky;top:0;background:linear-gradient(to bottom,#060b12,#0b1520 45%,#05080c)}
/* Szenenkasten im Bildformat 16:9, deckt den Bildschirm ab (wie object-fit:cover) */
.box{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%)}
.box>div{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.box picture,.box picture img{display:block;width:100%;height:100%}

/* --- Eden (liegt unter dem Tor) --- */
.eden2{position:absolute;inset:0}
.eden-kb{animation:kb 38s ease-in-out infinite alternate}
@keyframes kb{0%{transform:scale(1)}100%{transform:scale(1.07) translate(-.6%,-.8%)}}
.eden-box .eden-img{object-fit:cover}
.bach{position:absolute;inset:0;-webkit-mask:url("../assets/reise/eden-bach-maske.png") 0 0/100% 100% no-repeat;mask:url("../assets/reise/eden-bach-maske.png") 0 0/100% 100% no-repeat;
  background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(255,255,250,.55) 26px,transparent 31px,transparent 58px,rgba(255,244,214,.35) 61px,transparent 66px);
  background-size:220px 100%;mix-blend-mode:screen;opacity:.55;animation:bach 5s linear infinite}
@keyframes bach{to{background-position:220px 0}}
.rays{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.rays i{position:absolute;top:-30%;right:-8%;width:16vw;height:170%;transform-origin:50% 0;background:linear-gradient(to bottom,rgba(255,244,210,.55),rgba(255,236,190,.16) 45%,transparent 80%);filter:blur(14px);opacity:.5;animation:ray 14s ease-in-out infinite alternate}
.rays i:nth-child(1){transform:rotate(38deg);right:2%}
.rays i:nth-child(2){transform:rotate(46deg);width:9vw;animation-duration:19s;animation-delay:-6s;opacity:.35}
.rays i:nth-child(3){transform:rotate(30deg);right:12%;width:6vw;animation-duration:23s;animation-delay:-11s;opacity:.3}
.rays i:nth-child(4){transform:rotate(54deg);right:-4%;width:12vw;animation-duration:17s;animation-delay:-3s;opacity:.25}
@keyframes ray{0%{opacity:.18;margin-right:-2vw}100%{opacity:.6;margin-right:2vw}}
.eden-back,.eden-front{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.eden-front{filter:blur(2.5px);opacity:.88}
@media (max-width:899px){.eden-front{filter:none}}
.bfs{position:absolute;inset:0;pointer-events:none}
.bf{position:absolute;left:-24px;top:-20px;width:48px;height:40px;will-change:transform}
.bf svg{width:100%;height:100%;overflow:visible}
.bf .wing{transform-origin:0 0;animation:flap .32s ease-in-out infinite alternate}
.bf .wr{animation-name:flapR}
.bf .bd{fill:#3a2a18}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
@keyframes flapR{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
.eden-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(5,3,2,.35),rgba(5,3,2,0) 22%,rgba(5,3,2,0) 45%,rgba(5,3,2,.55) 72%,rgba(5,3,2,.9) 92%,#050302)}
.motion .eden-shade{opacity:0}

/* --- Das Tor --- */
.gate{position:absolute;inset:0;display:none}
.motion .gate{display:block}
.motion .eden2{visibility:hidden}
.arch-box{position:absolute;left:44.141%;top:18.194%;width:11.719%;height:57.222%}
.curtain{position:absolute;inset:0;overflow:hidden}
.ci{position:absolute;inset:0;background:url("../assets/reise/tor-innen.webp") 0 0/100% 100% no-repeat;will-change:transform,opacity}
.ci::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 55%,rgba(255,252,240,.55),transparent 70%);mix-blend-mode:screen;animation:knistern 2.2s steps(1) infinite}
.cl .ci::after,.cr .ci::after{content:"";position:absolute;top:0;bottom:0;width:22%;pointer-events:none}
.cl .ci::after{right:0;background:linear-gradient(to left,rgba(255,252,236,.95),rgba(255,236,190,.4) 40%,transparent)}
.cr .ci::after{left:0;background:linear-gradient(to right,rgba(255,252,236,.95),rgba(255,236,190,.4) 40%,transparent)}
.burst{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.gate-back .tor-img{object-fit:cover}
.box .tor-licht-p{display:contents}
.box .tor-licht-p img.tor-licht{position:absolute;left:34.375%;top:0;width:31.25%;height:77.78%;opacity:.7;animation:knistern 2.6s steps(1) infinite}
@keyframes knistern{0%{opacity:.55}11%{opacity:.85}19%{opacity:.62}33%{opacity:1}41%{opacity:.7}58%{opacity:.9}66%{opacity:.6}79%{opacity:.95}90%{opacity:.68}}
.gate-mid{--g:0}
.tor-pulse{position:absolute;left:50%;top:47%;width:calc(30% * (1 + var(--g) * .8));height:calc(78% * (1 + var(--g) * .25));transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,250,235,.55),rgba(255,226,160,.25) 45%,transparent 100%);mix-blend-mode:screen;animation:torpuls 4.2s ease-in-out infinite}
@keyframes torpuls{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.gate-front{transform-origin:50% 100% !important}
.gate-front picture{position:absolute;left:0;top:56.944%;width:100%;height:43.056%}
.gate-front .vorn-img{object-fit:fill}
.fire{position:absolute;top:83%;width:7%;height:16%;transform:translate(-50%,-62%);opacity:0;animation:feuerAn 1.6s ease 1s forwards}
.fire-l{left:26.6%}.fire-r{left:73.4%}
.fire::before{content:"";position:absolute;inset:-60% -120%;background:radial-gradient(closest-side,rgba(255,170,70,.5),rgba(255,120,40,.18) 50%,transparent 100%);mix-blend-mode:screen;animation:flackern 1.7s ease-in-out infinite}
.fire i{position:absolute;left:30%;right:30%;top:22%;bottom:30%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;background:radial-gradient(ellipse at 50% 80%,rgba(255,250,220,.95),rgba(255,190,80,.7) 40%,rgba(255,110,30,0) 75%);filter:blur(3px);mix-blend-mode:screen;transform-origin:50% 100%;animation:flamme .45s ease-in-out infinite alternate}
@keyframes feuerAn{to{opacity:1}}
@keyframes flackern{0%,100%{opacity:.75;transform:scale(1)}23%{opacity:1;transform:scale(1.08)}47%{opacity:.7;transform:scale(.96)}71%{opacity:.95;transform:scale(1.04)}}
@keyframes flamme{0%{transform:scaleY(.9) skewX(-3deg)}50%{transform:scaleY(1.12) skewX(2deg)}100%{transform:scaleY(.97) skewX(4deg)}}
.sparks{position:absolute;left:0;top:0;width:100%;height:100%}
.beam{position:absolute;left:50%;top:0;width:6vw;height:60%;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(255,240,205,.0),rgba(255,236,190,.35));filter:blur(10px);display:none}
.fog{position:absolute;left:0;width:300%;pointer-events:none;opacity:0;animation:nebelAn 2.5s ease .4s forwards}
.fog::before{content:"";position:absolute;inset:0;
  background:radial-gradient(18% 50% at 8% 50%,rgba(150,170,195,.22),transparent 70%),radial-gradient(14% 40% at 24% 60%,rgba(170,185,205,.16),transparent 70%),
  radial-gradient(20% 55% at 41% 45%,rgba(140,160,185,.2),transparent 70%),radial-gradient(16% 45% at 58% 55%,rgba(160,178,200,.18),transparent 70%),
  radial-gradient(18% 50% at 75% 50%,rgba(150,170,195,.22),transparent 70%),radial-gradient(14% 40% at 91% 60%,rgba(170,185,205,.16),transparent 70%);
  filter:blur(8px);animation:nebel 70s linear infinite}
.fog1{top:38%;height:34%}
.fog2{top:52%;height:30%}.fog2::before{animation-duration:48s;animation-direction:reverse}
.fog3{top:70%;height:40%}.fog3::before{animation-duration:34s;opacity:.9}
@keyframes nebel{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
@keyframes nebelAn{to{opacity:1}}
.bloom{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(70% 70% at 50% 46%,#fffdf6 0%,#fff3d6 45%,#ffe2a6 80%,#f4cf86 100%);display:none}
.motion .bloom{display:block}
.blackout{position:absolute;inset:0;background:#000;pointer-events:none;display:none}
.motion .blackout{display:block;animation:schwarzWeg 2.4s ease .15s forwards}
@keyframes schwarzWeg{to{opacity:0;visibility:hidden}}

.intro-pre{position:absolute;left:0;right:0;top:calc(14px + 9vh);text-align:center;padding:0 24px;display:none;z-index:3}
.motion .intro-pre{display:block;animation:einblenden 2s ease 1.4s backwards}
@keyframes einblenden{from{opacity:0}}
.intro-pre .kicker{font-family:var(--caps);font-weight:700;letter-spacing:.24em;font-size:clamp(10px,1.1vw,13px);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.intro-hint{margin:14px auto 0;max-width:34ch;font-style:italic;font-size:clamp(16px,1.9vw,22px);color:rgba(244,235,220,.82);text-shadow:0 1px 10px rgba(0,0,0,.95)}
.intro-cue{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:9px;z-index:3}
.motion .intro-cue{display:flex}
.intro-cue span{white-space:nowrap;font-family:var(--ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,235,220,.9);text-shadow:0 1px 6px #000}
.intro-cue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 1.9s ease-in-out infinite}

.intro-title{position:absolute;left:0;right:0;bottom:0;padding:0 7vw calc(env(safe-area-inset-bottom,0px) + clamp(40px,9vh,110px));text-align:center;z-index:3}
.intro-title>*{will-change:opacity,transform}
.intro-title .hero-title{margin:0 0 6px}
.intro-title .hero-hook{font-size:clamp(16px,2vw,23px);margin-top:16px}
.intro-title .hero-cta{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.intro-title .hero-formats{display:block;margin-top:18px}
.motion .intro-title>*{opacity:0}

/* Hochformat: Szene am unteren Rand, breiter Ausschnitt, damit beide Feuerschalen sichtbar bleiben */
@media (max-aspect-ratio:3/4){
  .gate-box{width:184vw;height:103.5vw;top:auto;bottom:7vh;transform:translateX(-50%)}
  .gate-back{-webkit-mask:linear-gradient(to bottom,transparent 0,#000 22%);mask:linear-gradient(to bottom,transparent 0,#000 22%)}
  .beam{display:block;height:calc(100% - 7vh - 103.5vw + 26vw)}
  .fog1{top:46%}.fog2{top:58%}.fog3{top:72%}
  .fog{width:600%}
  .intro-pre{top:calc(70px + 4vh)}
}

/* ============ Wort-fuer-Wort-Texte ============ */
.w{display:inline;transition:opacity .45s ease,color .45s ease}
.motion [data-words] .w{opacity:.2}
.motion [data-words] .w.on{opacity:1}
.words{position:relative;background:var(--bg)}
.words-stage{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14vh var(--pad);max-width:1200px;margin:0 auto}
.motion .words{height:230vh}
.motion .words-stage{position:sticky;top:0;height:100vh;min-height:0;max-width:none}
.words-lead{font-family:var(--display);font-size:clamp(28px,4.8vw,64px);line-height:1.2;max-width:22ch;margin-top:28px}
.words-lead em{font-style:italic;color:var(--gold)}
.words-sub{margin-top:36px;font-style:italic;color:var(--muted);font-size:clamp(16px,1.9vw,22px);line-height:1.6;max-width:62ch;transition:opacity .8s ease,transform .8s ease}
.motion .words-sub{opacity:0;transform:translateY(20px)}
.motion .words-sub.on{opacity:1;transform:none}
.words--quote{background:radial-gradient(80% 60% at 50% 50%,#120c06,var(--bg) 75%)}
.words--quote .words-lead{font-size:clamp(24px,3.8vw,50px);max-width:30ch;margin-top:0}
.words-cite{display:block;margin-top:30px;font-family:var(--ui);font-style:normal;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.motion .words--quote{height:200vh}

/* ============ Stationen ============ */
.station{position:relative;background:var(--bg)}
.st-stage{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center}
.motion .station{height:250vh}
.motion .st-stage{position:sticky;top:0}
.st-ambient{position:absolute;inset:0;opacity:.5}
.st-ambient img{width:100%;height:100%;object-fit:cover;filter:blur(38px) saturate(1.1) brightness(.55);transform:scale(1.25)}
.st-frame{position:absolute;top:0;bottom:0;width:min(50vw,66.67vh);margin:0;overflow:hidden;will-change:clip-path}
.st-right .st-frame{right:max(0px,calc(50vw - 66.67vh*1.1))}
.st-left .st-frame{left:max(0px,calc(50vw - 66.67vh*1.1))}
.st-frame picture,.st-frame img{display:block;width:100%;height:100%}
.st-frame img{object-fit:cover;will-change:transform}
.st-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(236,200,120,.18);pointer-events:none}
.st-text{position:relative;z-index:2;width:50%;padding:0 clamp(28px,5vw,90px)}
.st-right .st-text{margin-right:auto;text-align:left}
.st-left .st-text{margin-left:auto;text-align:left}
.st-right .st-text{padding-left:max(clamp(28px,5vw,90px),calc(50vw - 66.67vh*1.1))}
.st-left .st-text{padding-right:max(clamp(28px,5vw,90px),calc(50vw - 66.67vh*1.1))}
.st-kicker{margin-bottom:20px;display:block}
.st-title{font-family:var(--caps);font-weight:700;font-size:clamp(30px,3.9vw,58px);line-height:1.08;background:none;color:var(--ink);letter-spacing:.01em}
.st-line{margin-top:24px;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.9vw,27px);line-height:1.5;color:rgba(244,235,220,.86);max-width:30ch}
.motion .st-kicker{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.motion .st-kicker.on{opacity:1;transform:none}

/* ============ Sieben Staedte (horizontal) ============ */
.cities{position:relative;background:linear-gradient(180deg,var(--bg),#0c0705 30%,#0c0705 70%,var(--bg))}
.cities-stage{position:relative;padding:12vh 0}
.cities-track{display:flex;gap:clamp(18px,2.4vw,40px);padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:center}
.motion .cities-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0;display:flex;align-items:center}
.motion .cities-track{overflow:visible;scroll-snap-type:none;will-change:transform;direction:ltr}
.cities-head{flex:0 0 min(440px,80vw);padding-right:clamp(10px,3vw,50px);scroll-snap-align:start}
.cities-head .section-title{font-size:clamp(32px,4.4vw,62px)}
.cities-line{margin-top:22px;font-style:italic;color:var(--muted);font-size:clamp(18px,1.9vw,24px);line-height:1.5}
.cities-arrow{display:block;margin-top:34px;width:90px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);position:relative}
.cities-arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);opacity:.5}
.city{flex:0 0 auto;width:calc(min(72vh,128vw)*.6667);scroll-snap-align:center;position:relative}
.city-img{position:relative;height:min(72vh,128vw);overflow:hidden;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.city-img picture,.city-img img{display:block;width:100%;height:100%}
.city-img img{object-fit:cover;transform:scale(1.14);will-change:transform}
.city-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,2,.88),rgba(5,3,2,0) 45%);pointer-events:none}
.city-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;z-index:2}
.city-no{font-family:var(--ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.city-name{font-family:var(--caps);font-weight:900;font-size:clamp(30px,3.4vw,46px);line-height:1;margin-top:8px;background:linear-gradient(180deg,#fff7ea,var(--gold) 65%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.city-sin{margin-top:6px;font-style:italic;color:rgba(244,235,220,.82);font-size:clamp(17px,1.6vw,21px)}
.cities-bar{display:none}
.motion .cities-bar{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:7vh;height:1px;background:rgba(236,200,120,.16)}
.cities-bar i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}

/* ============ Karte ============ */
.karte{position:relative;background:#0a0705}
.karte-stage{position:relative;padding:12vh var(--pad)}
.karte-world{position:relative;width:100%;max-width:1400px;margin:0 auto}
.karte-world picture,.karte-img{display:block;width:100%;height:auto}
.karte-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route{stroke:#f1d18a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.route-glow{stroke:rgba(255,214,130,.55);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:blur(3px)}
.route-head{fill:#fff6dc;stroke:rgba(236,200,120,.6);stroke-width:6}
.karte-text{text-align:center;margin-top:5vh}
.karte-title{font-family:var(--caps);font-weight:700;font-size:clamp(28px,3.6vw,52px);margin-top:12px;background:linear-gradient(180deg,#fff6e6,var(--gold) 62%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.karte-line{margin:16px auto 0;max-width:46ch;font-style:italic;color:rgba(244,235,220,.85);font-size:clamp(17px,1.8vw,23px);line-height:1.5}
.motion .karte{height:420vh}
.motion .karte-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0}
.motion .karte-world{position:absolute;left:0;top:0;margin:0;max-width:none;transform-origin:0 0;will-change:transform}
.motion .karte-text{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18vh var(--pad) calc(env(safe-area-inset-bottom,0px) + 7vh);background:linear-gradient(to top,rgba(5,3,2,.92),rgba(5,3,2,.6) 55%,transparent);pointer-events:none}
.motion .karte-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 18vmin rgba(5,3,2,.9)}
.motion .karte-text{z-index:2}

/* ============ Finale ============ */
.finale2{position:relative;background:var(--bg)}
.finale2-stage{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;text-align:center}
.motion .finale2{height:200vh}
.motion .finale2-stage{position:sticky;top:0;height:100vh}
.finale2-img{position:absolute;inset:0}
.finale2-img picture,.finale2-img img{display:block;width:100%;height:100%}
.finale2-img img{object-fit:cover;object-position:50% 35%;will-change:transform}
.motion .finale2-img{clip-path:circle(12% at 50% 50%);will-change:clip-path}
.finale2-shade{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 55%,rgba(5,3,2,.72),rgba(5,3,2,.35) 60%,rgba(5,3,2,.55)),linear-gradient(to bottom,rgba(5,3,2,.5),transparent 30%,transparent 70%,rgba(5,3,2,.9))}
.finale2-inner{position:relative;z-index:2;padding:12vh 7vw;max-width:980px}
.finale2-inner .kicker{letter-spacing:.4em}
.finale2-inner .finale-title{text-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.finale2-inner .finale-lead{color:rgba(244,235,220,.9)}
.motion .finale2-inner>*{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.motion .finale2-inner.on>*{opacity:1;transform:none}
.motion .finale2-inner.on>*:nth-child(2){transition-delay:.12s}
.motion .finale2-inner.on>*:nth-child(3){transition-delay:.24s}
.motion .finale2-inner.on>*:nth-child(4){transition-delay:.36s}
.motion .finale2-inner.on>*:nth-child(5){transition-delay:.48s}

/* ============ Ausgaben ============ */
.editions{padding:clamp(110px,18vh,200px) var(--pad);max-width:1240px;margin:0 auto}
.ed-lead{margin:22px auto 0;max-width:52ch;font-style:italic;color:var(--muted);font-size:clamp(17px,1.9vw,23px);line-height:1.5}
.ed-feature{display:grid;grid-template-columns:minmax(240px,5fr) 7fr;gap:clamp(36px,6vw,90px);align-items:center}
.ed-book{display:flex;justify-content:center}
/* --- Das Buch in 3D: Umschlag aus den KDP-Dateien, Deckel oeffnet sich (js/buch3d.js) --- */
.b3-buehne{position:relative;perspective:1500px;padding:6% 0 14%;touch-action:pan-y;cursor:grab}
.b3{--w:min(300px,56vw);--h:calc(var(--w)*1.5);--d:calc(var(--w)*.225);--rx:-4deg;--ry:-26deg;--auf:0deg;--hb:0px;--gl:.5;
  position:relative;width:var(--w);height:var(--h);margin:0 auto;transform-style:preserve-3d;
  transform:translateY(var(--hb)) rotateX(var(--rx)) rotateY(var(--ry))}
.b3-f{position:absolute;left:50%;top:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b3-img{display:block;width:100%;height:100%;object-fit:cover}
.b3-f picture{display:block;width:100%;height:100%}
.b3-hinten{visibility:hidden;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform:rotateY(180deg) translateZ(calc(var(--d)/2));border-radius:3px 1px 1px 3px;overflow:hidden;background:#111}
.b3-ruecken{visibility:hidden;width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:#0d0b09}
.b3-ruecken::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.07) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.4))}
.b3-schnitt{background:repeating-linear-gradient(90deg,#f3e9d3 0 1px,#dccfb3 1px 2px)}
.b3-schnitt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(60,40,15,.25),rgba(60,40,15,0) 20%,rgba(60,40,15,0) 80%,rgba(60,40,15,.3))}
.b3-schnitt-r{width:var(--d);height:calc(var(--h) - 6px);margin:calc(var(--h)/-2 + 3px) 0 0 calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 3px))}
.b3-schnitt-o,.b3-schnitt-u{width:calc(var(--w) - 4px);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2 + 1px);background:repeating-linear-gradient(0deg,#f3e9d3 0 1px,#dccfb3 1px 2px)}
.b3-schnitt-o{transform:rotateX(90deg) translateZ(calc(var(--h)/2 - 3px))}
.b3-schnitt-u{visibility:hidden;transform:rotateX(-90deg) translateZ(calc(var(--h)/2 - 3px))}
.b3-schnitt-o::after,.b3-schnitt-u::after{background:linear-gradient(0deg,rgba(60,40,15,.25),rgba(60,40,15,0) 25%,rgba(60,40,15,0) 75%,rgba(60,40,15,.25))}
.b3-tafel{width:calc(var(--w) - 6px);height:calc(var(--h) - 6px);margin:calc(var(--h)/-2 + 3px) 0 0 calc(var(--w)/-2);transform:translateZ(calc(var(--d)/2 - 2px));background:#f3e9d3;padding:7%}
.b3-tafel picture{box-shadow:0 0 0 1px rgba(120,90,40,.25)}
.b3-tafel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 12%);pointer-events:none}
.b3-deckel{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;transform-origin:0 50%;transform:translateZ(calc(var(--d)/2 + .5px)) rotateY(calc(var(--auf) * -1))}
.b3-deckel .b3-f{left:0;top:0;width:100%;height:100%;margin:0}
.b3-vorn{border-radius:1px 3px 3px 1px;overflow:hidden;box-shadow:0 0 40px rgba(236,200,120,.10)}
.b3-vorn::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.12) 2.2%,rgba(0,0,0,.18) 3.6%,transparent 7%);pointer-events:none}
.b3-glanz{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,215,.16) 47%,rgba(255,255,255,.28) 50%,rgba(255,244,215,.12) 53%,transparent 65%) no-repeat;
  background-size:300% 100%;background-position:calc(var(--gl) * 100%) 0}
.b3-innen{visibility:hidden;transform:rotateY(180deg);background:linear-gradient(90deg,#14100b,#1d1710 60%,#0f0c08);border-radius:3px 1px 1px 3px}
.b3-innen::after{content:"";position:absolute;inset:6%;border:1px solid rgba(236,200,120,.22)}
.b3-schatten{position:absolute;left:50%;bottom:4%;width:calc(min(300px,56vw) * 1.25);height:34px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0));filter:blur(6px);pointer-events:none}
@media (max-width:760px){.b3{--w:min(230px,58vw)}.b3-schatten{width:calc(min(230px,58vw)*1.25)}}
.ed-badge{display:inline-block;font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#160f06;background:linear-gradient(120deg,var(--amber),var(--gold));padding:7px 12px}
.ed-title{font-family:var(--caps);font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1.1;margin-top:18px;color:var(--ink)}
.ed-text{margin-top:16px;color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.ed-stats{display:flex;gap:clamp(20px,4vw,48px);margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.ed-stats b{display:block;font-family:var(--caps);font-weight:900;font-size:clamp(28px,3vw,40px);color:var(--gold);line-height:1}
.ed-stats span{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ed-formats{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:14px}
.ed-formats li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--line);background:rgba(244,235,220,.025)}
.ed-formats h4{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,23px)}
.ed-formats p{font-family:var(--display);color:var(--muted);font-size:16px;line-height:1.4;margin-top:3px}
.ed-formats .btn{flex:none;padding:13px 20px;font-size:11px}
/* Ausgabe noch nicht bei Amazon: Hinweis statt Kauf-Knopf */
a.ed-bald{pointer-events:none;cursor:default;opacity:.55;background:transparent !important;color:var(--gold, #ECC878) !important;border-color:rgba(236,200,120,.35) !important;box-shadow:none !important}
.ed-textedition{display:grid;grid-template-columns:140px 1fr;gap:clamp(22px,4vw,48px);align-items:center;margin-top:clamp(60px,10vh,110px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.ed-txtcover img{display:block;width:100%;height:auto;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.ed-txtinfo .ed-title{margin-top:0;font-size:clamp(22px,2.4vw,32px)}
.buy-row--left{justify-content:flex-start;margin-top:22px}
.buy-row--left .btn{padding:12px 20px;font-size:11px}
.ed-note{margin:clamp(40px,6vh,64px) auto 0;max-width:64ch;text-align:center;font-style:italic;color:var(--faint);font-size:clamp(16px,1.6vw,19px);line-height:1.6}

/* ============ Bestehende Bloecke etwas ruhiger ============ */
.themes,.forwhom,.author{position:relative}
.site-footer{background:var(--bg)}

/* ============ Mobil ============ */
@media (max-width:899px){
  .st-stage{align-items:flex-end}
  .st-frame{left:0 !important;right:0 !important;width:100%}
  .st-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,3,2,.94) 0%,rgba(5,3,2,.6) 34%,rgba(5,3,2,0) 62%);pointer-events:none}
  .st-ambient{display:none}
  .st-text{width:100%;padding:0 24px calc(env(safe-area-inset-bottom,0px) + 11vh) !important}
  .st-title{font-size:clamp(28px,8.4vw,40px)}
  .st-line{font-size:clamp(18px,4.8vw,22px)}
  .ed-feature{grid-template-columns:1fr}
  .ed-formats li{flex-direction:column;align-items:flex-start}
  .ed-formats .btn{align-self:stretch;text-align:center}
  .ed-textedition{grid-template-columns:96px 1fr}
  .intro-title .hero-hook br{display:none}
  .intro-title .hero-hook{display:none}
  .cities-head{flex-basis:78vw}
  .motion .karte-text{padding-top:14vh}
}
@media (max-width:560px){
  .intro-title .hero-cta .btn{flex:1 1 100%;text-align:center}
  .ed-textedition{grid-template-columns:1fr}
  .ed-txtcover{width:130px}
}

/* ============ Ohne Bewegung: ruhige statische Fassung ============ */
html:not(.motion) .station .st-stage{height:auto;min-height:100vh}
html:not(.motion) .intro-cue i,html:not(.motion) .eden-kb,html:not(.motion) .bach,html:not(.motion) .rays i{animation:none}
html:not(.motion) .eden-back,html:not(.motion) .eden-front,html:not(.motion) .bfs,html:not(.motion) .rays,html:not(.motion) .bach{display:none}
@media (prefers-reduced-motion:reduce){
  .w,.words-sub,.st-kicker{transition:none}
}

/* ============ Persisch (RTL) ============ */
html:is([lang="fa"],[lang="ar"]) .st-title,html:is([lang="fa"],[lang="ar"]) .karte-title,html:is([lang="fa"],[lang="ar"]) .ed-title,html:is([lang="fa"],[lang="ar"]) .city-name{font-family:'Vazirmatn','Cinzel',serif;letter-spacing:0;line-height:1.5}
html:is([lang="fa"],[lang="ar"]) .st-text,html:is([lang="fa"],[lang="ar"]) .st-right .st-text,html:is([lang="fa"],[lang="ar"]) .st-left .st-text{text-align:right}
html:is([lang="fa"],[lang="ar"]) .ed-badge,html:is([lang="fa"],[lang="ar"]) .ed-stats span,html:is([lang="fa"],[lang="ar"]) .city-no{letter-spacing:0;text-transform:none;font-family:'Vazirmatn',ui-sans-serif,sans-serif}
html:is([lang="fa"],[lang="ar"]) .words-lead,html:is([lang="fa"],[lang="ar"]) .st-line,html:is([lang="fa"],[lang="ar"]) .intro-hint{font-family:'Vazirmatn',Georgia,serif;line-height:1.8}
html:is([lang="fa"],[lang="ar"]) .cities-stage,html:is([lang="fa"],[lang="ar"]) .cities-track{direction:ltr}
html:is([lang="fa"],[lang="ar"]) .i18n-fb{font-family:inherit}
html:is([lang="fa"],[lang="ar"]) .st-text .i18n-fb,html:is([lang="fa"],[lang="ar"]) .karte-text .i18n-fb{display:block}
html:is([lang="fa"],[lang="ar"]) .cities-head,html:is([lang="fa"],[lang="ar"]) .city-cap{direction:rtl;text-align:right}
html:is([lang="fa"],[lang="ar"]) .buy-row--left{justify-content:flex-end}

/* Kopfzeile auf schmalen Telefonen: alle vier Sprachknoepfe muessen passen */
@media (max-width:480px){
  .topbar{padding:14px 14px}
  .wordmark{font-size:11px;letter-spacing:.2em}
  .topnav .nav-kontakt{display:none}
  .lang-btn{padding:7px 9px}
  .intro-pre{top:calc(10px + 8vh)}
  .intro-hint{font-size:15px;max-width:28ch}
}

/* Nichts darf seitlich ueberstehen (wichtig fuer RTL/Persisch). clip statt hidden:
   erzeugt keinen Scroll-Container, position:sticky bleibt intakt. */
main{overflow-x:clip}

/* Autorenfoto (04.10.2026) */
.author-inner{max-width:1080px}
.author-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(32px,5vw,72px);align-items:center;text-align:left;margin-top:clamp(28px,4vh,48px)}
.author-foto{margin:0;position:relative}
.author-foto img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(236,200,120,.28)}
.author-foto::after{content:"";position:absolute;inset:-10px;border:1px solid rgba(236,200,120,.18);border-radius:6px;pointer-events:none}
[dir="rtl"] .author-grid{text-align:right}
@media (max-width:760px){.author-grid{grid-template-columns:1fr;text-align:center}.author-foto{max-width:70vw;margin:0 auto}[dir="rtl"] .author-grid{text-align:center}}

/* ============================================================
   TEXTAUSGABE — vier Cover faechern auf wie ein Blatt Karten
   ============================================================ */
.txted{position:relative;background:radial-gradient(90% 60% at 50% 30%,#120c07,var(--bg) 70%)}
.tx-stage{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12vh var(--pad) 10vh;perspective:1600px}
.motion .txted{height:320vh}
.motion .tx-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding-top:9vh;padding-bottom:5vh}
.tx-table{position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;background:radial-gradient(55% 60% at 50% 20%,rgba(236,200,120,.14),rgba(236,200,120,.03) 55%,transparent 75%),linear-gradient(to bottom,rgba(24,16,9,0),#120b06 35%,#090604);transform:perspective(900px) rotateX(58deg);transform-origin:50% 100%;pointer-events:none}
.tx-head{position:relative;text-align:center;z-index:2}
.tx-title{font-family:var(--caps);font-weight:700;font-size:clamp(28px,3.6vw,50px);margin-top:12px;background:linear-gradient(180deg,#fff6e6,var(--gold) 62%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.tx-sub{margin:10px auto 0;max-width:46ch;font-style:italic;color:var(--muted);font-size:clamp(16px,1.6vw,20px)}
.tx-row{position:relative;display:grid;grid-template-columns:repeat(5,auto);justify-content:center;gap:clamp(16px,2.4vw,40px);margin-top:clamp(28px,5vh,56px);z-index:3;direction:ltr}
.tx-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(30px,5vh,52px)}
.tx-card{position:relative;height:min(33vh,300px);aspect-ratio:520/832;transform-style:preserve-3d;will-change:transform}
.tx-card picture,.tx-card img{display:block;width:100%;height:100%}
.tx-card>picture img,.tx-ill img{object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 1px rgba(236,200,120,.18)}
.tx-ill{position:absolute;inset:0;opacity:0}
.motion .tx-ill{opacity:1}
.tx-refl{position:absolute;left:0;right:0;top:100%;height:13%;margin-top:6px;overflow:hidden;opacity:.22;pointer-events:none;
  -webkit-mask:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 85%);mask:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 85%)}
.tx-refl picture{height:770%}
.tx-refl img{transform:scaleY(-1);transform-origin:50% 20%;object-fit:cover;filter:blur(1px)}
.tx-btn{position:relative;padding:12px 22px;font-size:11px;transition:color .35s,border-color .35s,box-shadow .45s,background .35s}
.tx-btn:hover,.tx-btn:focus-visible{color:#160f06;background:linear-gradient(120deg,var(--amber),var(--gold));border-color:transparent;box-shadow:0 0 28px rgba(236,200,120,.55),0 0 70px rgba(236,200,120,.25)}
.tx-note{position:relative;z-index:3;margin:clamp(26px,5vh,48px) auto 0;max-width:62ch;text-align:center;font-style:italic;color:rgba(244,235,220,.82);font-size:clamp(16px,1.6vw,20px);line-height:1.6}
@media (max-width:760px){
  .tx-row{grid-template-columns:repeat(3,auto);gap:16px 22px}
  .tx-col{gap:14px}
  .tx-card{height:min(20vh,190px)}
  .tx-refl{display:none}
  .motion .tx-stage{padding-top:11vh}
  .tx-note{font-size:15px;margin-top:18px}
  .tx-sub{font-size:15px}
}

/* ============================================================
   EINE REISE NACH INNEN — gestapelte Bildkarten (sticky)
   ============================================================ */
.themes2{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
.th-stack{max-width:1180px;margin:0 auto}
.th-card{position:relative;height:min(74vh,720px);border-radius:20px;overflow:hidden;margin-bottom:6vh;background:#0b0806;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(236,200,120,.16);transform-origin:50% 0}
.motion .th-card{position:sticky;top:calc(11vh + var(--i) * 16px);margin-bottom:22vh;will-change:transform}
.motion .th-card:last-child{margin-bottom:8vh}
.th-media{position:absolute;top:0;bottom:0;right:0;width:58%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0,#000 22%);mask:linear-gradient(90deg,transparent 0,#000 22%)}
.th-media img{object-position:50% 30%}
.th-media picture,.th-media img{display:block;width:100%;height:100%}
.th-media img{object-fit:cover;will-change:transform}
.th-shade{position:absolute;inset:0;background:radial-gradient(70% 90% at 20% 50%,rgba(40,28,14,.5),transparent 70%),linear-gradient(to top,rgba(5,3,2,.35),transparent 30%);pointer-events:none}
.th-dim{position:absolute;inset:0;background:#050302;opacity:0;pointer-events:none}
.th-body{position:absolute;left:0;bottom:0;top:0;width:min(560px,90%);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(26px,5vw,72px)}
.th-no{font-family:var(--caps);font-weight:900;font-size:clamp(64px,10vw,150px);line-height:.9;background:linear-gradient(180deg,#fff4d6,var(--gold) 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;transform-origin:0 100%;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.th-h{font-family:var(--caps);font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1.1;margin-top:14px;color:var(--ink)}
.th-p{margin-top:16px;font-family:var(--display);font-style:italic;font-size:clamp(18px,1.8vw,24px);line-height:1.5;color:rgba(244,235,220,.88);max-width:34ch}
@media (max-width:760px){
  .th-card{height:72vh}
  .motion .th-card{top:calc(9vh + var(--i) * 10px)}
  .th-media{width:100%;-webkit-mask:none;mask:none}
  .th-shade{background:linear-gradient(to top,rgba(5,3,2,.94) 0%,rgba(5,3,2,.6) 36%,rgba(5,3,2,0) 62%)}
  .th-card--oben .th-shade{background:linear-gradient(to bottom,rgba(5,3,2,.94) 0%,rgba(5,3,2,.6) 30%,rgba(5,3,2,0) 52%)}
  .th-card--oben .th-body{top:0;bottom:auto;justify-content:flex-start;padding:26px 24px 0}
  .th-body{top:auto;width:100%;justify-content:flex-end;padding:0 24px 30px}
  .th-no{font-size:72px}
}
html:is([lang="fa"],[lang="ar"]) .th-body{left:auto;right:0;text-align:right}
html:is([lang="fa"],[lang="ar"]) .th-shade{transform:scaleX(-1)}
html:is([lang="fa"],[lang="ar"]) .th-media{right:auto;left:0;-webkit-mask:linear-gradient(270deg,transparent 0,#000 22%);mask:linear-gradient(270deg,transparent 0,#000 22%)}
@media (max-width:760px){html:is([lang="fa"],[lang="ar"]) .th-media{-webkit-mask:none;mask:none}}
html:is([lang="fa"],[lang="ar"]) .th-h{font-family:'Vazirmatn','Cinzel',serif;letter-spacing:0;line-height:1.5}

/* ============================================================
   FUER WEN — eine Aussage pro Bildschirm
   ============================================================ */
.wen{position:relative;background:var(--bg)}
.wen-stage{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14vh var(--pad);text-align:center;overflow:hidden}
.motion .wen{height:420vh}
.motion .wen-stage{position:sticky;top:0;height:100vh;padding:0 var(--pad)}
.wen-bg{position:absolute;inset:0;pointer-events:none}
.wb{position:absolute;inset:-4%;opacity:0}
.wb img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.motion) .wb:first-child{opacity:.35}
.wen-sky{position:absolute;inset:0;opacity:0;background:radial-gradient(90% 70% at 50% 0%,rgba(255,236,190,.5),rgba(236,200,120,.18) 40%,transparent 70%),linear-gradient(to bottom,rgba(60,42,18,.6),var(--bg) 92%)}
.wen-kicker{position:relative;z-index:2;margin-bottom:28px}
.motion .wen-kicker{position:absolute;top:13vh;left:0;right:0;margin:0;text-align:center}
.wen-list{list-style:none;position:relative;z-index:2;width:100%;max-width:1000px;display:flex;flex-direction:column;gap:6vh}
.motion .wen-list{display:block;height:60vh}
.wen-line{font-family:var(--display);font-size:clamp(30px,4.6vw,64px);line-height:1.3;color:rgba(244,235,220,.86);--sw:1}
.motion .wen-line{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);opacity:0;--sw:0}
.wen-line strong{font-weight:600;background:linear-gradient(100deg,#f4ebdc 0%,#f4ebdc 35%,#fff6da 45%,var(--gold) 52%,#b98a3e 62%,var(--gold) 72%,var(--gold) 100%);background-size:300% 100%;background-position:calc(var(--sw) * 100%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(var(--sw) * 16px) rgba(236,200,120,calc(var(--sw) * .55)))}
@media (max-width:760px){.wen-line{font-size:clamp(27px,7.6vw,38px)}}
html:is([lang="fa"],[lang="ar"]) .wen-line{font-family:'Vazirmatn',Georgia,serif;line-height:1.9}

/* ============================================================
   AUSKLANG — das Herz aus Diamant, ruhig im Dunkel, ein Lichtreflex auf den Facetten
   ============================================================ */
.glanz{position:relative;background:#030202}
.gl-stage{position:relative;min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:12vh var(--pad)}
.motion .glanz{height:300vh}
.motion .gl-stage{position:sticky;top:0;height:100vh;padding:0 var(--pad)}
.gl-heart{position:relative;height:min(44vh,calc(62vw * 1407 / 1177));aspect-ratio:1177/1407;margin-top:-8vh;will-change:transform,opacity}
.gl-heart picture,.gl-img{display:block;width:100%;height:100%}
.gl-img{filter:brightness(.74) saturate(.92)}
.gl-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;--sx:0;
  background:linear-gradient(112deg,transparent calc(var(--sx) * 100% - 16%),rgba(255,236,196,.12) calc(var(--sx) * 100% - 13%),rgba(255,240,214,.42) calc(var(--sx) * 100% - 5%),rgba(255,246,228,.6) calc(var(--sx) * 100%),rgba(255,236,196,.3) calc(var(--sx) * 100% + 6%),transparent calc(var(--sx) * 100% + 10%));
  mix-blend-mode:screen;filter:blur(5px)}
.glanz.nah .gl-sweep{-webkit-mask:url("../assets/reise/herz-560.webp") 0 0/100% 100% no-repeat;mask:url("../assets/reise/herz-560.webp") 0 0/100% 100% no-repeat}
.gl-facet{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.gl-facet::before,.gl-facet::after{content:"";position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.gl-facet::before{width:9vmin;height:9vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,222,.7),rgba(255,226,170,.15) 55%,transparent 80%)}
.gl-facet::after{width:9vmin;height:1px;background:linear-gradient(90deg,transparent,rgba(255,248,232,.95) 50%,transparent)}
.gl-line{position:relative;z-index:2;text-align:center;text-wrap:balance;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,2.3vw,32px);line-height:1.4;color:rgba(244,235,220,.82);max-width:26ch;margin-top:5vh}
.motion .gl-line{position:absolute;left:0;right:0;bottom:12vh;margin:0 auto}
html:is([lang="fa"],[lang="ar"]) .gl-line{font-family:'Vazirmatn',Georgia,serif;font-style:normal;line-height:1.9}
.gl-flare{position:absolute;width:0;height:0;pointer-events:none;z-index:3;opacity:0}
.gf-in{position:absolute;left:0;top:0;animation:gfTwinkle 3.2s ease-in-out infinite}
.gf-in i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%}
.gf-halo{width:9vmin;height:9vmin;background:radial-gradient(closest-side,rgba(255,232,190,.42),rgba(255,206,140,.1) 50%,transparent 75%)}
.gf-ana{width:24vmin;height:1px;border-radius:2px!important;background:linear-gradient(90deg,transparent,rgba(255,214,150,.4) 35%,rgba(255,246,228,.9) 50%,rgba(255,214,150,.4) 65%,transparent)}
.gf-x{width:8vmin;height:1.5px;background:linear-gradient(90deg,transparent,#fff1d8 50%,transparent)}
.gf-y{width:1.5px;height:8vmin;background:linear-gradient(180deg,transparent,#fff1d8 50%,transparent)}
.gf-core{width:.9vmin;height:.9vmin;background:radial-gradient(circle,#fffaf0 0,#ffe9c2 40%,transparent 72%)}
@keyframes gfTwinkle{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.86);opacity:.8}60%{transform:scale(1.06);opacity:1}}
html:not(.motion) .gl-flare{opacity:.35}
html:not(.motion) .gf-in{animation:none}
@media (max-width:760px){.gl-line{font-size:clamp(19px,5.4vw,26px)}}

html:is([lang="fa"],[lang="ar"]) .th-p,html:is([lang="fa"],[lang="ar"]) .tx-sub,html:is([lang="fa"],[lang="ar"]) .tx-note{font-family:'Vazirmatn',Georgia,serif;font-style:normal;line-height:1.9}

/* ============================================================
   KOPFZEILE: Ton-Schalter + dauerhafter Kauf-Knopf
   ============================================================ */
.ton-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);color:rgba(244,235,220,.8);font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:2px;transition:color .3s,border-color .3s,box-shadow .3s}
.ton-btn:hover{color:var(--gold);border-color:var(--gold)}
.ton-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ton-spk{fill:currentColor;stroke:none}
.ton-btn .ton-w1,.ton-btn .ton-w2{opacity:0}
.ton-btn.is-on .ton-w1,.ton-btn.is-on .ton-w2{opacity:1}
.ton-btn.is-on .ton-x{opacity:0}
.ton-btn.is-on{color:var(--gold);border-color:rgba(236,200,120,.6);box-shadow:0 0 18px rgba(236,200,120,.18)}
.topbar-right .buy-book{display:inline-block!important;color:#160f06;border-color:transparent;white-space:nowrap}
.topbar-right .buy-book:hover{color:#160f06;filter:brightness(1.1);box-shadow:0 0 22px rgba(236,200,120,.45)}
html:is([lang="fa"],[lang="ar"]) .ton-btn{text-transform:none;letter-spacing:0;font-family:'Vazirmatn',ui-sans-serif,sans-serif}
@media (max-width:760px){.ton-label{display:none}.ton-btn{padding:7px 8px}}
@media (max-width:480px){
  .wordmark{display:none}
  .topbar{justify-content:flex-end}
  .topbar-right{gap:8px;width:100%;justify-content:space-between}
  .topbar-right .buy-book{padding:8px 10px;font-size:10px;letter-spacing:.1em}
}

/* Einladung zum Ton am Tor */
.ton-invite{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px}
.ton-invite[hidden]{display:none}
.ton-invite-btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;background:rgba(5,3,2,.45);border:1px solid rgba(236,200,120,.4);color:rgba(244,235,220,.9);font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;border-radius:40px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:border-color .3s,color .3s,box-shadow .3s}
.ton-invite-btn:hover{color:var(--gold);border-color:var(--gold);box-shadow:0 0 22px rgba(236,200,120,.3)}
.ton-invite-btn svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ton-invite-btn svg path+path{fill:none}
.ton-invite-x{width:30px;height:30px;border-radius:50%;background:rgba(5,3,2,.45);border:1px solid rgba(236,200,120,.25);color:rgba(244,235,220,.7);font-size:16px;line-height:1}
.ton-invite-x:hover{color:var(--gold);border-color:var(--gold)}
html:not(.motion) .ton-invite{display:none}
html:is([lang="fa"],[lang="ar"]) .ton-invite-btn{text-transform:none;letter-spacing:0;font-family:'Vazirmatn',ui-sans-serif,sans-serif}

/* ============================================================
   LIES DIE ERSTE SEITE — aufgeschlagenes Buch
   ============================================================ */
.lesen{position:relative;background:radial-gradient(80% 60% at 50% 45%,#120c07,var(--bg) 72%)}
.ls-stage{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12vh var(--pad);gap:3vh}
.motion .lesen{height:340vh}
.motion .ls-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0 var(--pad)}
.ls-table{display:none;position:absolute;left:-10%;right:-10%;bottom:-8%;height:44%;background:radial-gradient(55% 60% at 50% 15%,rgba(236,200,120,.1),transparent 70%),linear-gradient(to bottom,transparent,#0d0805 40%,#070403);transform:perspective(900px) rotateX(58deg);transform-origin:50% 100%;pointer-events:none}
.ls-head{position:relative;text-align:center;z-index:2}
.ls-hint{margin-top:10px;font-style:italic;color:rgba(244,235,220,.62);font-size:clamp(14px,1.4vw,17px)}
.ls-book{--ph:min(64vh,620px);--pw:calc(var(--ph) * .68);position:relative;z-index:2;perspective:2200px;cursor:pointer;outline:none}
.ls-book:focus-visible{box-shadow:0 0 0 2px rgba(236,200,120,.5)}
.ls-book.spread{width:calc(var(--pw) * 2);height:var(--ph)}
.ls-book.single{--ph:min(60vh,540px);--pw:min(calc(var(--ph) * .68),86vw);width:var(--pw);height:var(--ph)}
.ls-book::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-34px;height:60px;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.25) 60%,transparent);z-index:-1}
.pg,.face{position:absolute;top:0;width:var(--pw);height:var(--ph);background:#efe6d2;color:#2b2116;
  background-image:linear-gradient(90deg,rgba(0,0,0,.08),transparent 6%,transparent 94%,rgba(0,0,0,.05)),radial-gradient(120% 90% at 50% 50%,#f4ecda,#e3d6ba)}
.pg-in{position:absolute;inset:0;overflow:hidden;padding:calc(var(--ph) * .085) calc(var(--pw) * .1)}
.pg-cast{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(40,25,10,.38),rgba(40,25,10,.08) 45%,transparent 75%)}
.spread .pg-a .pg-cast{background:linear-gradient(270deg,rgba(40,25,10,.38),rgba(40,25,10,.08) 45%,transparent 75%)}
.spread .pg-a::before,.spread .pg-b::before{content:"";position:absolute;top:2px;bottom:2px;width:6px;background:repeating-linear-gradient(90deg,#d8ccb0 0 1px,#efe5cf 1px 2px);z-index:-1}
.spread .pg-a::before{left:-5px;border-radius:2px 0 0 2px}
.spread .pg-b::before{right:-5px;border-radius:0 2px 2px 0}
.spread .pg-a{left:0;border-radius:3px 0 0 3px;box-shadow:inset -18px 0 30px -18px rgba(0,0,0,.45)}
.spread .pg-b{left:var(--pw);border-radius:0 3px 3px 0;box-shadow:inset 18px 0 30px -18px rgba(0,0,0,.45)}
.spread .leaf{position:absolute;left:var(--pw);top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.spread.rtl .pg-a{left:var(--pw);border-radius:0 3px 3px 0;box-shadow:inset 18px 0 30px -18px rgba(0,0,0,.45)}
.spread.rtl .pg-b{left:0;border-radius:3px 0 0 3px;box-shadow:inset -18px 0 30px -18px rgba(0,0,0,.45)}
.spread.rtl .leaf{left:0;transform-origin:100% 50%}
.single .pg-b{left:0;border-radius:3px}
.single .leaf{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.single.rtl .leaf{transform-origin:100% 50%}
.leaf .face{left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .back{transform:rotateY(180deg)}
.leaf.gewendet{pointer-events:none}
.pg-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 40%,rgba(255,255,255,.25) 70%,rgba(0,0,0,.1))}
.single .leaf .back{background:#e8dcc2}
.pg-tafel{position:absolute;inset:calc(var(--ph) * .05) calc(var(--pw) * .07);box-shadow:0 0 0 1px rgba(80,60,30,.25)}
.pg-tafel picture,.pg-tafel img{display:block;width:100%;height:100%;object-fit:cover}
.pg-titel{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pg-kap{font-family:var(--caps);font-weight:700;letter-spacing:.3em;font-size:calc(var(--ph) * .024);color:#8a6a32}
.pg-h{font-family:var(--caps);font-weight:700;font-size:calc(var(--ph) * .06);margin-top:calc(var(--ph) * .025);color:#2b2116;line-height:1.1}
.pg-orn{margin:calc(var(--ph) * .035) 0;color:#a8843f;font-size:calc(var(--ph) * .03)}
.pg-sub{font-family:var(--display);font-style:italic;font-size:calc(var(--ph) * .032);color:#5b4a35}
.pg-text{height:100%;overflow:hidden;font-family:var(--display);font-size:calc(var(--ph) * .0265);line-height:1.52;color:#2b2116;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pg-text p{margin:0;text-indent:1.4em}
.pg-text p.pg-first,.pg-text p.pg-fort{text-indent:0}
.pg-text p.pg-first::first-letter{font-family:var(--caps);font-weight:700;float:left;font-size:3.1em;line-height:.9;padding:.06em .08em 0 0;color:#8a6a32}
.pg-weiter{color:#8a6a32}
.ls-book[dir="rtl"] .pg-text{font-family:'Vazirmatn',Georgia,serif;line-height:1.9;text-align:right}
.ls-book[dir="rtl"] .pg-text p.pg-first::first-letter{float:none;font-size:1em;padding:0;font-family:inherit}
.ls-book[dir="rtl"] .pg-h,.ls-book[dir="rtl"] .pg-kap,.ls-book[dir="rtl"] .pg-sub{font-family:'Vazirmatn',Georgia,serif;letter-spacing:0}
.ls-side{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.ls-voice{cursor:pointer;background:transparent}
.ls-voice i{font-style:normal;margin-left:4px}
.motion .ls-stage{padding-top:9vh;gap:2.4vh}
.motion .ls-book.spread{--ph:min(60vh,600px)}
/* ruhige Fassung: alle Seiten untereinander */
.ls-book.statisch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,86vw),1fr));gap:22px;width:min(1240px,100%);cursor:default;--ph:520px;--pw:100%}
.ls-book.statisch .pg{position:relative;width:100%;height:520px}
.ls-book.statisch .pg>.pg-text,.ls-book.statisch .pg>.pg-titel{position:absolute;inset:0;padding:44px 34px;height:auto}
@media (max-width:760px){.ls-hint{font-size:13px}}

/* ============================================================
   MESCHARET AHAWA — Begleiter
   ============================================================ */
.ed-book{position:relative}
.funken{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:950}

/* ============================================================
   UNTERSCHRIFT
   ============================================================ */
.signatur{display:flex;justify-content:center;padding:6vh var(--pad) 2vh;background:var(--bg)}
.sig-svg{width:min(560px,82vw);height:auto;overflow:visible}
.sig-l{fill:var(--gold);fill-opacity:0;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(236,200,120,.25))}
html:not(.motion) .sig-l{fill-opacity:1;stroke-dashoffset:0!important}
.ls-voice[hidden]{display:none!important}

/* ============ Runde 9: Fehler aus den Pruefungen ============ */
/* 3) Kopfzeile beim Scrollen */
.topbar{padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
.topbar.solid{background:linear-gradient(to bottom,rgba(5,3,2,.86),rgba(5,3,2,.62) 70%,rgba(5,3,2,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* 4) Hero: Kicker + Hinweis im unteren Drittel mit weichem Abdunkler; Ton-Chip darunter, nicht am Scroll-Hinweis */
.motion .intro-pre{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);padding:22px 24px;max-width:640px;margin:0 auto;left:0;right:0}
.motion .intro-pre::before{content:"";position:absolute;inset:-30px -60px;z-index:-1;background:radial-gradient(closest-side,rgba(3,4,8,.78),rgba(3,4,8,.45) 60%,transparent);pointer-events:none}
.ton-invite{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
@media (max-width:760px){.motion .intro-pre{bottom:calc(env(safe-area-inset-bottom,0px) + 140px)}}
/* 14) Hook ausgeglichen */
.hero-hook,.intro-title .hero-hook{text-wrap:balance}
/* 5) FA: Textausgabe in den Ausgaben kaufen */
.ed-fa-row{display:none!important}
html[lang="fa"] .ed-fa-row{display:flex!important}
/* 8) Menue unter 920 px */
.menu-btn{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);color:rgba(244,235,220,.85);font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:2px}
.menu-ico{display:inline-flex;flex-direction:column;gap:4px}
.menu-ico i{display:block;width:14px;height:1.5px;background:currentColor}
@media (max-width:919px){.topnav{display:none!important}.menu-btn{display:inline-flex}}
@media (max-width:480px){.menu-l{display:none}.menu-btn{padding:8px 8px}}
.menu-sheet{position:fixed;left:0;right:0;top:0;z-index:1200;padding:calc(env(safe-area-inset-top,0px) + 70px) 28px 34px;background:rgba(7,5,3,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.menu-sheet[hidden]{display:none}
.menu-links{display:flex;flex-direction:column;gap:6px}
.menu-links a{font-family:var(--caps);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--ink);padding:10px 0;border-bottom:1px solid rgba(236,200,120,.12)}
.menu-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.menu-lang .lang-btn{border:1px solid var(--line);padding:9px 14px;font-size:12px;letter-spacing:.06em;text-transform:none}
.menu-close{position:absolute;right:18px;top:calc(env(safe-area-inset-top,0px) + 16px);width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:22px;line-height:1}
html:is([lang="fa"],[lang="ar"]) .menu-links a{font-family:'Vazirmatn',serif;letter-spacing:0}
/* 9) Sprunglink */
.skip-link{position:fixed;left:12px;top:-60px;z-index:2000;background:var(--gold);color:#160f06;padding:10px 16px;font-family:var(--ui);font-size:13px;transition:top .2s}
.skip-link:focus{top:12px}
/* 10) Autorenfoto: Platz reservieren; Bio heller */
.author-foto{aspect-ratio:4/5}
.author-foto picture,.author-foto img{width:100%;height:100%;object-fit:cover}
.author-bio p,.author p{color:rgba(244,235,220,.76)}
/* 11) Kontrast */
.fb-legal{color:rgba(244,235,220,.6)}
.foot-legal a,.foot-meta{color:rgba(244,235,220,.58)}
/* 15) Tempo: kuerzere gepinnte Strecken */
.motion .intro{height:450vh}
.motion .words--quote{height:160vh}
.motion .wen{height:330vh}
.motion .th-card{margin-bottom:12vh}
.motion .words{height:190vh}

.motion .glanz{height:250vh}
/* 18) Wortmarke im Hero etwas ruhiger (weniger Spiel-Logo) */
.hero-title{background-image:linear-gradient(180deg,#f6e2b0,#ECC878 58%,#c9a15a)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.signatur{padding:4vh var(--pad) 8vh;background:#030202}

/* ============ Runde 10: Feinschliff ============ */
/* 1) Staedte-Leiste: links weicher Rand, damit die angeschnittene Karte gewollt wirkt */
.motion .cities-stage{-webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 7%,#000 100%)}
/* 5) Hero-Formate heller; Navigation im ersten Bild mit Schatten */
.intro-title .hero-formats{color:rgba(244,235,220,.72);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.topbar:not(.solid){background:linear-gradient(to bottom,rgba(3,3,6,.55),rgba(3,3,6,0))}
.topbar:not(.solid) .topnav a,.topbar:not(.solid) .wordmark{text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8)}
/* 6) Menue-Blatt deckend */
.menu-sheet{background:#070503}
/* 8) Zitat ausgeglichen (auch WebKit) */
.gl-line{max-width:none}
/* 9) Telefon: Kicker ausgeglichen, Hero-Block etwas hoeher */
.intro-pre .kicker{text-wrap:balance}
@media (max-width:760px){.motion .intro-pre{bottom:calc(env(safe-area-inset-bottom,0px) + 170px)}}
/* 10) Rueckseite der Blaetter: Papier wie die Vorderseiten */
.single .leaf .back{background:#efe6d2;background-image:linear-gradient(270deg,rgba(0,0,0,.1),transparent 8%,transparent 92%,rgba(0,0,0,.05)),radial-gradient(120% 90% at 50% 50%,#f1e8d6,#dfd1b4)}

/* ============================================================
   DER BERG DER TAEUSCHUNGEN (06.10.2026) — js/berg.js
   Gepinnte Buehne in Dunkelheit; jede Tafel erscheint im Schein einer Fackel
   (Maske auf dem Bild), Bildunterschriften bleiben lesbar.
   ============================================================ */
.berg{position:relative;background:#000;color:var(--ink)}
.berg-stage{position:relative;padding:clamp(90px,14vh,160px) var(--pad)}
.berg-intro{text-align:center;max-width:980px;margin:0 auto}
.berg-titel{font-family:var(--caps);font-weight:900;font-size:clamp(34px,6vw,86px);line-height:1.04;margin-top:14px;
  background:linear-gradient(180deg,#f6e2b0,#ECC878 58%,#a87f3c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(236,200,120,.18))}
.berg-zitat{font-family:var(--display);font-style:italic;font-size:clamp(23px,3vw,40px);line-height:1.35;max-width:27ch;margin:28px auto 0;color:var(--ink)}
.berg-sub{font-family:var(--display);color:var(--muted);font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:46ch;margin:22px auto 0}
.berg-bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px 28px;max-width:1200px;margin:70px auto 0}
.berg-bild{margin:0}
.berg-bild picture,.berg-bild img{display:block;width:100%;height:auto}
.berg-bild img{aspect-ratio:2/3;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.berg-bild figcaption{margin-top:16px}
.berg-kap{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.berg-cap{display:block;margin-top:8px;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.9vw,27px);line-height:1.35;color:var(--ink)}
.berg-dunkel{display:none}
.berg-ende{font-family:var(--display);font-style:italic;text-align:center;color:#f3dfae;font-size:clamp(22px,2.8vw,36px);line-height:1.35;max-width:26ch;margin:70px auto 0}

.motion .berg{height:820vh}
.motion .berg-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.motion .berg-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad);z-index:4;max-width:none}
.motion .berg-zitat .w{opacity:.13;transition:opacity .35s ease,text-shadow .5s ease}
.motion .berg-zitat .w.an{opacity:1;text-shadow:0 0 22px rgba(236,200,120,.38)}
.motion .berg-sub{opacity:0}
.motion .berg-bilder{position:absolute;inset:0;display:block;margin:0;max-width:none;z-index:2}
.motion .berg-bild{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,30ch);align-items:center;justify-content:center;gap:clamp(30px,5vw,90px);padding:0 var(--pad);opacity:0;visibility:hidden}
.motion .berg-bild:nth-child(even){grid-template-columns:minmax(0,30ch) auto}
.motion .berg-bild:nth-child(even) figcaption{order:-1;text-align:end}
.motion .berg-bild picture{height:min(80svh,78vh);aspect-ratio:2/3;will-change:transform}
.motion .berg-bild img{width:100%;height:100%;box-shadow:none;background:#000}
.motion .berg-bild figcaption{margin:0}
.motion .berg-ende{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(90vw,26ch);opacity:0;z-index:4}
.motion .berg-ende .w{opacity:.12;transition:opacity .4s ease,text-shadow .5s}
.motion .berg-ende .w.an{opacity:1;text-shadow:0 0 24px rgba(255,214,140,.55)}
.motion .berg-dunkel{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.65) 100%)}
@media (max-width:820px){
  .motion .berg{height:900vh}
  .motion .berg-bild,.motion .berg-bild:nth-child(even){grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:center;gap:22px;text-align:center}
  .motion .berg-bild:nth-child(even) figcaption{order:0;text-align:center}
  .motion .berg-bild picture{height:min(60svh,128vw)}
  .motion .berg-bild figcaption{max-width:30ch}
}
html:is([lang="fa"],[lang="ar"]) .berg-titel,html:is([lang="fa"],[lang="ar"]) .berg-kap{font-family:'Vazirmatn','Cinzel',serif;letter-spacing:0;text-transform:none}
html:is([lang="fa"],[lang="ar"]) .berg-zitat,html:is([lang="fa"],[lang="ar"]) .berg-cap,html:is([lang="fa"],[lang="ar"]) .berg-ende,html:is([lang="fa"],[lang="ar"]) .berg-sub{font-family:'Vazirmatn',serif;font-style:normal}

/* 3D-Schwert und -Feder (js/artifacts.js) */
.artifact{min-height:115svh}
.artifact-stage canvas{opacity:0;transition:opacity 1.2s ease}
.artifact-stage canvas.bereit{opacity:1}
.artifact--feder{background:radial-gradient(60% 55% at 50% 42%,rgba(40,26,8,.6) 0%,#000 78%)}
.artifact--feder .artifact-glow{background:radial-gradient(circle,rgba(255,200,110,.34) 0%,rgba(231,180,92,.1) 42%,transparent 66%)}
.artifact-content .section-title{text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7)}
html:is([lang="fa"],[lang="ar"]) .artifact-content .kicker{letter-spacing:0;text-transform:none;font-family:'Vazirmatn',ui-sans-serif,sans-serif}

/* Schwert vor der Felswand mit der leuchtenden Inschrift (Kap. XV) — js/inschrift.js */
.artifact--schwert{display:block;background:#050403;overflow:visible}
.artifact--schwert .artifact-pin{position:relative;min-height:115svh;display:flex;align-items:flex-end;overflow:hidden}
.motion .artifact--schwert{height:230vh}
.motion .artifact--schwert .artifact-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.fels{position:absolute;inset:0;z-index:0}
.fels-bild,.fels-bild img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fels::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 62% at 50% 40%,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.92) 100%)}
.fels-moos{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(14,22,8,.9),rgba(20,32,10,.35) 45%,transparent);mix-blend-mode:multiply}
.fels-strahl{position:absolute;left:50%;top:-10%;width:34vw;height:120%;transform:translateX(-50%) rotate(-8deg);background:linear-gradient(to bottom,rgba(255,244,215,.16),rgba(255,236,190,.05) 60%,transparent);filter:blur(18px);mix-blend-mode:screen;pointer-events:none}
.inschrift{position:absolute;left:50%;top:clamp(84px,13vh,150px);transform:translateX(-50%) perspective(900px) rotateX(6deg);width:min(1100px,90vw);text-align:center;z-index:1;pointer-events:none}
.inschrift-text{font-family:var(--caps);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(17px,2.15vw,31px);line-height:1.55;color:rgba(255,226,160,.16);
  text-shadow:0 1px 0 rgba(0,0,0,.65),0 -1px 0 rgba(255,255,255,.04)}
.inschrift-text .w,.motion .inschrift-text .w{opacity:1;transition:color 1.1s ease,text-shadow 1.4s ease}
.inschrift-text .w.an{color:#fff3d2;text-shadow:0 0 4px rgba(255,236,190,1),0 0 12px rgba(255,200,110,.95),0 0 28px rgba(255,160,60,.8),0 0 60px rgba(255,130,30,.5)}
.inschrift-ref{display:block;margin-top:14px;text-align:right;padding-right:4%;font-family:var(--ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,214,140,.0);transition:color 1.2s ease}
.inschrift.fertig .inschrift-ref{color:rgba(255,214,140,.7)}
html:not(.motion) .inschrift-text .w{color:#ffe3a6;text-shadow:0 0 14px rgba(255,170,70,.6)}
html:not(.motion) .inschrift-ref{color:rgba(255,214,140,.7)}
html:is([lang="fa"],[lang="ar"]) .inschrift-text{font-family:'Vazirmatn',serif;text-transform:none;letter-spacing:0;font-size:clamp(18px,2.2vw,30px)}
html:is([lang="fa"],[lang="ar"]) .inschrift-ref{letter-spacing:0}
.artifact--schwert .artifact-stage{z-index:2}
.artifact--schwert .artifact-glow{z-index:1;top:52%;opacity:.8}
@media (max-width:760px){.inschrift{top:clamp(70px,11vh,110px)}.inschrift-text{font-size:15px;letter-spacing:.04em}}

/* iOS: Zwei-Finger-Zoom vervielfacht den Speicher der grossen Ebenen und laesst Safari den Tab
   beenden ("wiederholt ein Problem aufgetreten"). Die Seite ist eine Scroll-Reise: nur Wischen
   erlauben. Der Systemzoom der Bedienungshilfen bleibt davon unberuehrt. */
html,body{touch-action:pan-x pan-y}

/* ---------- Tiefer eintauchen: Teaser fuer symbolik.html ---------- */
.tiefer{padding:14vh clamp(16px,5vw,80px)}
.tf-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);max-width:1180px;margin:0 auto;min-height:62vh;overflow:hidden;border:1px solid rgba(231,180,92,.22);background:#0b0805;transition:border-color .5s,box-shadow .5s}
.tf-box:hover{border-color:rgba(231,180,92,.6);box-shadow:0 0 60px rgba(231,180,92,.12)}
.tf-bild{position:relative;overflow:hidden}
.tf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
.tf-box:hover .tf-bild img,.tf-box.is-shown .tf-bild img{transform:scale(1)}
.tf-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#0b0805)}
.tf-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,72px)}
.tf-h{display:block;font-family:var(--caps);font-weight:700;font-size:clamp(26px,3.4vw,48px);line-height:1.12;letter-spacing:.02em;color:var(--ink)}
.tf-p{display:block;margin-top:22px;font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--muted)}
.tf-btn{align-self:flex-start;margin-top:34px}
.tiefer .kicker{display:block;font-family:var(--ui);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
[dir=rtl] .tf-bild::after{background:linear-gradient(270deg,transparent 60%,#0b0805)}
@media (max-width:760px){.tf-box{grid-template-columns:1fr}.tf-bild{height:46vh}.tf-bild::after{background:linear-gradient(180deg,transparent 55%,#0b0805)}}


/* ---------- Chinesisch (繁體) und Georgisch: Schrift statt Cinzel, keine Versalien (13.10.2026) ---------- */
/* ============ Persisch (RTL) ============ */
html[lang="zh"] .st-title,html[lang="zh"] .karte-title,html[lang="zh"] .ed-title,html[lang="zh"] .city-name{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;letter-spacing:.04em;line-height:1.7}
html[lang="zh"] .ed-badge,html[lang="zh"] .ed-stats span,html[lang="zh"] .city-no{letter-spacing:.04em;text-transform:none;font-family:'PingFang TC','Noto Serif TC','Songti TC',serif}
html[lang="zh"] .words-lead,html[lang="zh"] .st-line,html[lang="zh"] .intro-hint{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;line-height:1.7}
html[lang="zh"] .i18n-fb{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif}
html[lang="zh"] .th-h{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;letter-spacing:.04em;line-height:1.7}
html[lang="zh"] .wen-line{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;line-height:1.7}
html[lang="zh"] .gl-line{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;font-style:normal;line-height:1.7}
html[lang="zh"] .th-p,html[lang="zh"] .tx-sub,html[lang="zh"] .tx-note{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;font-style:normal;line-height:1.7}
html[lang="zh"] .ton-btn{text-transform:none;letter-spacing:.04em;font-family:'PingFang TC','Noto Serif TC','Songti TC',serif}
html[lang="zh"] .ton-invite-btn{text-transform:none;letter-spacing:.04em;font-family:'PingFang TC','Noto Serif TC','Songti TC',serif}
html[lang="zh"] .menu-links a{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;letter-spacing:.04em}
html[lang="zh"] .berg-titel,html[lang="zh"] .berg-kap{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;letter-spacing:.04em;text-transform:none}
html[lang="zh"] .berg-zitat,html[lang="zh"] .berg-cap,html[lang="zh"] .berg-ende,html[lang="zh"] .berg-sub{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;font-style:normal}
html[lang="zh"] .artifact-content .kicker{letter-spacing:.04em;text-transform:none;font-family:'PingFang TC','Noto Serif TC','Songti TC',serif}
html[lang="zh"] .inschrift-text{font-family:'PingFang TC','Noto Serif TC','Songti TC',serif;text-transform:none;letter-spacing:.04em;font-size:clamp(18px,2.2vw,30px)}
html[lang="zh"] .inschrift-ref{letter-spacing:.04em}
/* ============ Persisch (RTL) ============ */
html[lang="ka"] .st-title,html[lang="ka"] .karte-title,html[lang="ka"] .ed-title,html[lang="ka"] .city-name{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;letter-spacing:0;line-height:1.5}
html[lang="ka"] .ed-badge,html[lang="ka"] .ed-stats span,html[lang="ka"] .city-no{letter-spacing:0;text-transform:none;font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif}
html[lang="ka"] .words-lead,html[lang="ka"] .st-line,html[lang="ka"] .intro-hint{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;line-height:1.8}
html[lang="ka"] .i18n-fb{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif}
html[lang="ka"] .th-h{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;letter-spacing:0;line-height:1.5}
html[lang="ka"] .wen-line{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;line-height:1.9}
html[lang="ka"] .gl-line{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;font-style:normal;line-height:1.9}
html[lang="ka"] .th-p,html[lang="ka"] .tx-sub,html[lang="ka"] .tx-note{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;font-style:normal;line-height:1.9}
html[lang="ka"] .ton-btn{text-transform:none;letter-spacing:0;font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif}
html[lang="ka"] .ton-invite-btn{text-transform:none;letter-spacing:0;font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif}
html[lang="ka"] .menu-links a{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;letter-spacing:0}
html[lang="ka"] .berg-titel,html[lang="ka"] .berg-kap{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;letter-spacing:0;text-transform:none}
html[lang="ka"] .berg-zitat,html[lang="ka"] .berg-cap,html[lang="ka"] .berg-ende,html[lang="ka"] .berg-sub{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;font-style:normal}
html[lang="ka"] .artifact-content .kicker{letter-spacing:0;text-transform:none;font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif}
html[lang="ka"] .inschrift-text{font-family:'Noto Serif Georgian','Noto Sans Georgian','Helvetica Neue',serif;text-transform:none;letter-spacing:0;font-size:clamp(18px,2.2vw,30px)}
html[lang="ka"] .inschrift-ref{letter-spacing:0}
html[lang="ka"] .kicker,html[lang="ka"] .btn,html[lang="ka"] .lang-btn,html[lang="ka"] .st-title,html[lang="ka"] .section-title,html[lang="ka"] .ed-badge,html[lang="ka"] .city-no,html[lang="ka"] .th-h,html[lang="ka"] .berg-titel,html[lang="ka"] .menu-links a{text-transform:none}
html[lang="zh"] .kicker,html[lang="zh"] .btn{text-transform:none}
/* Neue Sprachen in der Kopfzeile nur auf breiten Bildschirmen, sonst im Menue */
@media (max-width:1279px){.lang .lang-neu{display:none}}
html[lang="zh"] .city-no::after{content:" 章"}