:root{--bg:#050711;--text:#fff4de;--muted:#d6c4a1;--gold:#f2c96f;--gold2:#fff1aa;--violet:#a463ff;--pink:#ff7acf;--green:#63d69c;--panel:rgba(9,14,28,.76);--panel2:rgba(14,22,42,.92);--line:rgba(255,222,145,.22);--shadow:0 28px 90px rgba(0,0,0,.45);--radius:28px;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-5;background:radial-gradient(circle at 20% 0%,rgba(164,99,255,.28),transparent 32rem),radial-gradient(circle at 80% 12%,rgba(242,201,111,.18),transparent 28rem),linear-gradient(180deg,#04050d,#081327 45%,#050711)}a{color:inherit;text-decoration:none}.topbar{position:fixed;inset:0 0 auto 0;height:68px;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);background:linear-gradient(180deg,rgba(3,5,12,.86),rgba(3,5,12,.48));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.logo{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:1.25rem;font-weight:900}.logo span{color:var(--gold2);filter:drop-shadow(0 0 10px var(--gold))}.nav{display:flex;gap:22px;color:var(--muted);font-weight:800}.nav a{transition:.25s}.nav a:hover{color:var(--gold2);text-shadow:0 0 18px rgba(242,201,111,.45)}.nav-toggle{display:none;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:14px;padding:8px;width:44px}.nav-toggle i{display:block;height:2px;margin:6px;background:var(--text);border-radius:99px}.particles{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,rgba(255,241,170,.8) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,122,207,.55) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(99,214,156,.5) 0 1px,transparent 1.4px);background-size:160px 160px,220px 220px,310px 310px;background-position:0 0,80px 110px,30px 40px;opacity:.18;animation:stars 26s linear infinite}@keyframes stars{to{background-position:160px 320px,300px 410px,340px 350px}}.hero{min-height:100svh;position:relative;display:grid;place-items:center;padding:110px 22px 70px;overflow:hidden}.hero-bg{position:absolute;inset:-8%;z-index:-4;background-image:linear-gradient(90deg,rgba(3,5,12,.86),rgba(3,5,12,.25),rgba(3,5,12,.82)),var(--hero-image);background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.04);animation:kenburns 24s ease-in-out infinite alternate}.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(242,201,111,.16),transparent 30rem)}@keyframes kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,1%,0)}}.hero-mist{position:absolute;inset:auto -20% -12% -20%;height:45%;z-index:-3;background:radial-gradient(ellipse,rgba(255,255,255,.28),transparent 60%);filter:blur(35px);opacity:.42;animation:mist 13s ease-in-out infinite alternate}@keyframes mist{to{transform:translateX(7%);opacity:.28}}.hero-content{max-width:940px;text-align:center}.kicker{margin:0 0 14px;color:var(--gold2);text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:.82rem}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(5rem,14vw,11rem);line-height:.78;margin:0;color:var(--gold2);text-shadow:0 0 18px rgba(242,201,111,.55),0 18px 60px rgba(0,0,0,.65)}.subtitle{font-family:Georgia,serif;font-size:clamp(1.5rem,4vw,3.7rem);font-weight:800;margin:8px 0 18px;text-shadow:0 10px 30px rgba(0,0,0,.7)}.claim{max-width:820px;margin:0 auto 32px;color:#ffe8bd;font-size:clamp(1.04rem,2vw,1.25rem)}.actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.btn{padding:13px 22px;border-radius:999px;border:1px solid var(--line);font-weight:900;box-shadow:0 16px 44px rgba(0,0,0,.28);transition:.25s}.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#2a1700}.btn.ghost{background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}.btn:hover{transform:translateY(-3px)}.scroll-hint{position:absolute;bottom:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold2);font-size:2rem;animation:bounce 1.8s infinite}@keyframes bounce{50%{transform:translateY(8px)}}.portal-section{padding:clamp(58px,8vw,105px) clamp(18px,5vw,70px);max-width:var(--max);margin:auto}.section-text{max-width:780px}.section-text.center{text-align:center;margin:auto}.section-text h2{font-family:Georgia,serif;font-size:clamp(2.1rem,5vw,4.3rem);line-height:1.02;margin:.1em 0 .28em}.section-text p{color:var(--muted);font-size:1.08rem}.intro{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.timeline{display:grid;gap:14px}.time-item{padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow);position:relative;overflow:hidden}.time-item:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--gold),var(--violet))}.time-item strong{color:var(--gold2)}.book-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:34px}.book{position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);cursor:pointer;transition:.35s;transform-style:preserve-3d}.book:hover{transform:translateY(-10px) rotateX(2deg);border-color:rgba(255,241,170,.5)}.cover{aspect-ratio:2/3;background:linear-gradient(135deg,rgba(164,99,255,.25),rgba(242,201,111,.16));background-size:cover;background-position:center;position:relative}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.28) 45%,transparent 52%);transform:translateX(-140%);transition:.8s}.book:hover .cover:after{transform:translateX(140%)}.book-info{padding:18px}.book-info small{color:var(--gold2);font-weight:900;text-transform:uppercase;letter-spacing:.11em}.book-info h3{margin:.45em 0 .1em;font-family:Georgia,serif}.book-info p{color:var(--muted);font-size:.95rem}.world-journey{padding:0}.world-panel{min-height:82svh;display:grid;place-items:center;padding:90px 20px;position:relative;overflow:hidden}.world-bg{position:absolute;inset:-8%;z-index:-2;background-image:linear-gradient(90deg,rgba(3,5,12,.9),rgba(3,5,12,.36)),var(--world-image);background-size:cover;background-position:center;transform:scale(1.05);transition:transform .2s linear}.world-panel:nth-child(even) .world-bg{background-image:linear-gradient(270deg,rgba(3,5,12,.9),rgba(3,5,12,.36)),var(--world-image)}.world-card{width:min(760px,92vw);margin:auto;padding:clamp(26px,5vw,48px);border:1px solid var(--line);border-radius:var(--radius);background:rgba(7,10,21,.7);backdrop-filter:blur(14px);box-shadow:var(--shadow)}.world-card h2{font-family:Georgia,serif;font-size:clamp(2rem,5vw,4rem);margin:0 0 12px}.world-card p{color:#ffe8bd;font-size:1.12rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:34px}.card{border:1px solid var(--line);border-radius:26px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;transition:.3s}.card:hover{transform:translateY(-8px)}.card-img{height:235px;background:linear-gradient(135deg,rgba(164,99,255,.25),rgba(99,214,156,.15));background-size:cover;background-position:center;position:relative}.card-img:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,transparent,rgba(0,0,0,.35))}.card-body{padding:20px}.card-body h3{margin:0;font-family:Georgia,serif;font-size:1.45rem}.card-body small{color:var(--gold2);font-weight:900}.card-body p{color:var(--muted)}.quote-band{margin:50px auto;padding:clamp(48px,8vw,95px) 20px;text-align:center;max-width:1050px}.quote-band p{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3.8rem);line-height:1.15;margin:0 auto 20px}.quote-band strong{color:var(--gold2);font-size:clamp(1.6rem,4vw,3.3rem);font-family:Georgia,serif;text-shadow:0 0 25px rgba(242,201,111,.45)}.gallery{columns:3 260px;column-gap:18px;margin-top:34px}.gallery figure{break-inside:avoid;margin:0 0 18px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transition:.3s}.gallery figure:hover{transform:translateY(-6px)}.gallery img{display:block;width:100%;min-height:170px;object-fit:cover}.gallery figcaption{padding:13px;color:var(--muted)}.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:30px}.link-grid a{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);text-align:center;font-weight:900;transition:.25s}.link-grid a:hover{background:rgba(242,201,111,.14);color:var(--gold2);transform:translateY(-3px)}.legal{text-align:center;color:var(--muted);font-size:.9rem;margin-top:26px}footer{padding:35px 20px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);display:none;place-items:center;padding:18px}.modal.open{display:grid}.modal-close{position:fixed;right:24px;top:22px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.12);color:var(--text);font-size:2rem;cursor:pointer}.modal-inner{max-width:880px;max-height:86svh;overflow:auto;border:1px solid var(--line);border-radius:28px;background:var(--panel2);box-shadow:var(--shadow);padding:30px}.modal-grid{display:grid;grid-template-columns:220px 1fr;gap:26px}.modal-cover{aspect-ratio:2/3;border-radius:18px;background-size:cover;background-position:center}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:820px){.nav-toggle{display:block}.nav{position:absolute;right:14px;top:76px;display:none;flex-direction:column;background:rgba(5,7,17,.96);border:1px solid var(--line);border-radius:20px;padding:18px;min-width:210px}.nav.open{display:flex}.intro{grid-template-columns:1fr}.hero{padding-top:90px}.claim{font-size:1rem}.modal-grid{grid-template-columns:1fr}.modal-cover{max-width:230px;margin:auto}.book-rail,.cards{grid-template-columns:1fr 1fr}}@media(max-width:540px){.topbar{height:62px}.book-rail,.cards{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%;text-align:center}.world-panel{min-height:70svh}.section-text h2{font-size:2.2rem}.hero h1{font-size:5rem}.subtitle{font-size:1.65rem}.portal-section{padding:54px 16px}.quote-band p{font-size:1.65rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   STARTSEITE – optimierte Hero-Darstellung
   Das breite Startbild bleibt sichtbar, die Bewegung bleibt
   erhalten und es gibt keine zweite Bildkopie im Hintergrund.
   ========================================================= */
.hero{
  min-height:0;
  height:clamp(560px,40vw,800px);
  padding:100px 22px 58px;
  isolation:isolate;
  background:#050711;
}

.hero-bg{
  inset:0;
  z-index:-4;
  background-image:
    linear-gradient(90deg,rgba(3,5,12,.72) 0%,rgba(3,5,12,.16) 38%,rgba(3,5,12,.12) 62%,rgba(3,5,12,.64) 100%),
    linear-gradient(180deg,rgba(3,5,12,.08) 0%,rgba(3,5,12,.05) 58%,rgba(3,5,12,.72) 100%),
    var(--hero-image);
  background-size:cover;
  background-position:center center;
  filter:saturate(1.08) contrast(1.03);
  transform-origin:center center;
  animation:heroFloat 22s ease-in-out infinite alternate;
  will-change:transform;
}

.hero-bg:after{
  background:
    radial-gradient(circle at 51% 42%,rgba(255,226,147,.15),transparent 27rem),
    linear-gradient(180deg,transparent 55%,rgba(5,7,17,.52) 100%);
}

@keyframes heroFloat{
  0%{transform:scale(1.015) translate3d(calc(var(--hero-x,0px)),calc(var(--hero-y,0px)),0)}
  100%{transform:scale(1.055) translate3d(calc(-.7% + var(--hero-x,0px)),calc(.35% + var(--hero-y,0px)),0)}
}

.hero-mist{
  bottom:-16%;
  height:42%;
  opacity:.3;
  filter:blur(42px);
}

.hero-content{
  max-width:900px;
  padding:24px 34px 28px;
  border-radius:32px;
  background:radial-gradient(ellipse at center,rgba(4,7,16,.24),transparent 72%);
}

.hero h1{
  font-size:clamp(4.8rem,11vw,9.2rem);
  text-shadow:0 0 20px rgba(242,201,111,.5),0 18px 55px rgba(0,0,0,.72);
}

.btn{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,231,173,.3);
}
.btn:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.24) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .7s ease;
  pointer-events:none;
}
.btn:hover:after{transform:translateX(130%)}

.book,.card,.world-card,.time-item,.gallery figure,.link-grid a{
  backdrop-filter:blur(12px);
}

.book:hover,.card:hover,.gallery figure:hover{
  box-shadow:0 32px 95px rgba(0,0,0,.54),0 0 34px rgba(242,201,111,.09);
}

@media(max-width:1100px){
  .hero{height:clamp(560px,55vw,720px)}
  .hero-bg{background-position:center center}
}

@media(max-width:820px){
  .hero{height:72svh;min-height:620px;padding-top:88px}
  .hero-bg{
    background-position:56% center;
    animation:heroFloatMobile 20s ease-in-out infinite alternate;
  }
  .hero-content{padding:20px 18px 24px}
  @keyframes heroFloatMobile{
    0%{transform:scale(1.02) translate3d(0,0,0)}
    100%{transform:scale(1.07) translate3d(-1%,.3%,0)}
  }
}

@media(max-width:540px){
  .hero{height:78svh;min-height:600px;padding:82px 16px 52px}
  .hero-bg{background-position:58% center}
  .hero h1{font-size:4.7rem}
  .hero-content{background:radial-gradient(ellipse at center,rgba(4,7,16,.38),transparent 76%)}
}

/* =========================================================
   PHASE 2 – lebendiges Titelbild
   Animierter Bodennebel, Lichtstrahlen, Feenstaub,
   filmische Schrift und gläserne Schaltflächen.
   ========================================================= */
.hero{
  isolation:isolate;
}

.hero-bg{
  z-index:0;
}

.hero-bg:after{
  z-index:1;
}

.hero-light-rays,
.hero-fog,
.hero-sparks,
.hero-mist{
  position:absolute;
  pointer-events:none;
}

/* Sehr dezente, langsam wandernde Sonnenstrahlen */
.hero-light-rays{
  z-index:1;
  inset:-14% -10% 0 18%;
  background:
    linear-gradient(111deg,transparent 0 32%,rgba(255,232,169,.12) 38%,transparent 45%),
    linear-gradient(106deg,transparent 0 47%,rgba(255,238,190,.09) 52%,transparent 59%),
    linear-gradient(116deg,transparent 0 58%,rgba(255,224,145,.07) 63%,transparent 69%);
  filter:blur(8px);
  mix-blend-mode:screen;
  opacity:.52;
  transform-origin:55% 0;
  animation:heroRays 18s ease-in-out infinite alternate;
}

@keyframes heroRays{
  0%{transform:translate3d(-1.2%,0,0) rotate(-.7deg);opacity:.35}
  55%{opacity:.58}
  100%{transform:translate3d(1.3%,1%,0) rotate(.8deg);opacity:.44}
}

/* Zwei voneinander unabhängige Nebelbänke – ohne Bilddatei */
.hero-fog{
  z-index:2;
  left:-38%;
  width:176%;
  background-repeat:repeat-x;
  will-change:transform,opacity;
}

.hero-fog-back{
  bottom:-4%;
  height:39%;
  opacity:.34;
  filter:blur(26px);
  background-image:
    radial-gradient(ellipse at 8% 70%,rgba(230,240,246,.28) 0 8%,transparent 28%),
    radial-gradient(ellipse at 28% 56%,rgba(220,235,240,.32) 0 10%,transparent 30%),
    radial-gradient(ellipse at 51% 69%,rgba(238,244,245,.25) 0 9%,transparent 29%),
    radial-gradient(ellipse at 72% 52%,rgba(214,231,236,.30) 0 11%,transparent 31%),
    radial-gradient(ellipse at 94% 67%,rgba(239,244,244,.24) 0 9%,transparent 28%);
  background-size:100% 100%;
  animation:fogDriftBack 58s ease-in-out infinite alternate;
}

.hero-fog-front{
  bottom:-15%;
  height:46%;
  opacity:.3;
  filter:blur(38px);
  background-image:
    radial-gradient(ellipse at 4% 72%,rgba(247,249,247,.32) 0 9%,transparent 27%),
    radial-gradient(ellipse at 23% 60%,rgba(227,239,241,.34) 0 12%,transparent 31%),
    radial-gradient(ellipse at 44% 76%,rgba(246,247,242,.28) 0 10%,transparent 29%),
    radial-gradient(ellipse at 66% 58%,rgba(224,236,238,.34) 0 12%,transparent 31%),
    radial-gradient(ellipse at 86% 73%,rgba(246,248,244,.28) 0 10%,transparent 29%);
  background-size:100% 100%;
  animation:fogDriftFront 42s ease-in-out infinite alternate;
}

@keyframes fogDriftBack{
  0%{transform:translate3d(-5%,0,0) scaleY(.92);opacity:.25}
  45%{opacity:.38}
  100%{transform:translate3d(7%,-2%,0) scaleY(1.04);opacity:.29}
}

@keyframes fogDriftFront{
  0%{transform:translate3d(7%,1%,0) scale(1.02,.9);opacity:.24}
  50%{opacity:.36}
  100%{transform:translate3d(-6%,-3%,0) scale(1.06,1.02);opacity:.27}
}

/* Ruhiger Feenstaub im Bereich des Waldes */
.hero-sparks{
  z-index:3;
  inset:8% 7% 7%;
  overflow:hidden;
}

.hero-sparks i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,238,164,.88);
  box-shadow:0 0 8px rgba(255,220,118,.95),0 0 18px rgba(255,204,91,.45);
  opacity:0;
  animation:sparkFloat 12s ease-in-out infinite;
}
.hero-sparks i:nth-child(1){left:10%;top:74%;animation-delay:-1s;animation-duration:13s}
.hero-sparks i:nth-child(2){left:18%;top:56%;animation-delay:-8s;animation-duration:15s;transform:scale(.65)}
.hero-sparks i:nth-child(3){left:27%;top:83%;animation-delay:-4s;animation-duration:11s;transform:scale(.8)}
.hero-sparks i:nth-child(4){left:36%;top:63%;animation-delay:-10s;animation-duration:17s;transform:scale(.55)}
.hero-sparks i:nth-child(5){left:47%;top:77%;animation-delay:-6s;animation-duration:14s}
.hero-sparks i:nth-child(6){left:55%;top:48%;animation-delay:-2s;animation-duration:16s;transform:scale(.7)}
.hero-sparks i:nth-child(7){left:63%;top:70%;animation-delay:-12s;animation-duration:18s;transform:scale(.55)}
.hero-sparks i:nth-child(8){left:71%;top:58%;animation-delay:-5s;animation-duration:13s;transform:scale(.85)}
.hero-sparks i:nth-child(9){left:79%;top:81%;animation-delay:-9s;animation-duration:15s;transform:scale(.65)}
.hero-sparks i:nth-child(10){left:87%;top:52%;animation-delay:-3s;animation-duration:17s;transform:scale(.55)}
.hero-sparks i:nth-child(11){left:32%;top:43%;animation-delay:-14s;animation-duration:19s;transform:scale(.5)}
.hero-sparks i:nth-child(12){left:68%;top:39%;animation-delay:-7s;animation-duration:18s;transform:scale(.55)}

@keyframes sparkFloat{
  0%,100%{opacity:0;translate:0 18px}
  18%{opacity:.72}
  52%{opacity:.35;translate:10px -34px}
  82%{opacity:.7}
  96%{opacity:0;translate:-5px -72px}
}

/* Der alte weiche Nebelschimmer bleibt nur als Lichtsaum */
.hero-mist{
  z-index:2;
  inset:auto -12% -20%;
  height:36%;
  opacity:.2;
  filter:blur(52px);
  animation:mistGlow 16s ease-in-out infinite alternate;
}
@keyframes mistGlow{
  to{transform:translateX(3%) scaleX(1.04);opacity:.27}
}

.hero-content{
  position:relative;
  z-index:5;
}

.scroll-hint{
  z-index:6;
}

/* Titel erscheint weich und erhält gelegentlich einen Lichtlauf */
.hero-content.visible .kicker{
  animation:titleRise .9s .05s both;
}
.hero-content.visible h1{
  animation:titleRise 1.15s .18s both,titleGlow 12s 2s ease-in-out infinite;
}
.hero-content.visible .subtitle{
  animation:titleRise 1s .42s both;
}
.hero-content.visible .claim{
  animation:titleRise .95s .62s both;
}
.hero-content.visible .actions{
  animation:titleRise .9s .78s both;
}

@keyframes titleRise{
  from{opacity:0;transform:translateY(22px);filter:blur(7px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

@keyframes titleGlow{
  0%,72%,100%{text-shadow:0 0 20px rgba(242,201,111,.5),0 18px 55px rgba(0,0,0,.72)}
  80%{text-shadow:0 0 24px rgba(255,239,175,.82),0 0 46px rgba(242,201,111,.35),0 18px 55px rgba(0,0,0,.72)}
  88%{text-shadow:0 0 20px rgba(242,201,111,.5),0 18px 55px rgba(0,0,0,.72)}
}

/* Gläserne Buttons mit goldenem Rand */
.hero .btn{
  border:1px solid rgba(255,225,154,.48);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.18);
}
.hero .btn.primary{
  background:linear-gradient(135deg,rgba(255,241,170,.92),rgba(222,169,67,.87));
}
.hero .btn.ghost{
  background:linear-gradient(135deg,rgba(13,20,35,.42),rgba(28,22,35,.25));
}
.hero .btn:hover{
  border-color:rgba(255,242,188,.88);
  box-shadow:0 16px 42px rgba(0,0,0,.4),0 0 22px rgba(242,201,111,.18),inset 0 1px 0 rgba(255,255,255,.25);
}

@media(max-width:820px){
  .hero-light-rays{inset:-10% -28% 0 0;opacity:.38}
  .hero-fog-back{height:34%;opacity:.28}
  .hero-fog-front{height:40%;opacity:.25}
  .hero-sparks{inset:10% 4% 9%}
  .hero-sparks i:nth-child(n+9){display:none}
}

@media(max-width:540px){
  .hero-light-rays{opacity:.28}
  .hero-fog-back{filter:blur(22px)}
  .hero-fog-front{filter:blur(30px)}
  .hero-sparks i:nth-child(n+7){display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-light-rays,.hero-fog,.hero-sparks i,.hero-mist,
  .hero-content.visible .kicker,.hero-content.visible h1,
  .hero-content.visible .subtitle,.hero-content.visible .claim,
  .hero-content.visible .actions{
    animation:none!important;
  }
}


/* =========================================================
   PHASE 3 – Wind und räumliche Tiefe im Titelbild
   Wenige Blätter treiben durch die Szene; auf Desktop reagiert
   das Bild ganz leicht auf die Maus. Kein zusätzlicher Bildlayer.
   ========================================================= */
.hero-bg{
  --hero-x:0px;
  --hero-y:0px;
}

.hero-wind{
  position:absolute;
  z-index:4;
  inset:6% -12% 8%;
  overflow:hidden;
  pointer-events:none;
}

.hero-wind i{
  position:absolute;
  left:-8%;
  top:var(--leaf-top,50%);
  width:var(--leaf-size,13px);
  height:calc(var(--leaf-size,13px) * .58);
  border-radius:90% 12% 90% 12%;
  background:linear-gradient(135deg,rgba(255,222,128,.9),rgba(126,81,33,.68));
  box-shadow:0 0 12px rgba(255,213,109,.18);
  opacity:0;
  transform-origin:65% 50%;
  animation:leafWind var(--leaf-time,19s) linear infinite;
  animation-delay:var(--leaf-delay,0s);
  filter:blur(var(--leaf-blur,0px));
}
.hero-wind i:after{
  content:"";
  position:absolute;
  left:8%;top:48%;width:78%;height:1px;
  background:rgba(255,244,192,.4);
  transform:rotate(-15deg);
}
.hero-wind i:nth-child(1){--leaf-top:18%;--leaf-size:10px;--leaf-time:24s;--leaf-delay:-4s;--leaf-blur:.2px}
.hero-wind i:nth-child(2){--leaf-top:31%;--leaf-size:15px;--leaf-time:20s;--leaf-delay:-15s;--leaf-blur:.5px}
.hero-wind i:nth-child(3){--leaf-top:47%;--leaf-size:9px;--leaf-time:27s;--leaf-delay:-9s;--leaf-blur:1px}
.hero-wind i:nth-child(4){--leaf-top:61%;--leaf-size:17px;--leaf-time:22s;--leaf-delay:-2s;--leaf-blur:.3px}
.hero-wind i:nth-child(5){--leaf-top:72%;--leaf-size:11px;--leaf-time:25s;--leaf-delay:-18s;--leaf-blur:.8px}
.hero-wind i:nth-child(6){--leaf-top:39%;--leaf-size:8px;--leaf-time:29s;--leaf-delay:-22s;--leaf-blur:1.2px}
.hero-wind i:nth-child(7){--leaf-top:82%;--leaf-size:14px;--leaf-time:23s;--leaf-delay:-11s;--leaf-blur:.4px}
.hero-wind i:nth-child(8){--leaf-top:25%;--leaf-size:7px;--leaf-time:31s;--leaf-delay:-26s;--leaf-blur:1.4px}

@keyframes leafWind{
  0%{opacity:0;transform:translate3d(0,20px,0) rotate(0deg) scale(.75)}
  8%{opacity:.55}
  35%{transform:translate3d(38vw,-18px,0) rotate(210deg) scale(1)}
  62%{opacity:.72;transform:translate3d(72vw,26px,0) rotate(430deg) scale(.9)}
  92%{opacity:.3}
  100%{opacity:0;transform:translate3d(122vw,-12px,0) rotate(720deg) scale(.7)}
}

/* Ein hauchdünner Windschleier verbindet Licht und Nebel. */
.hero:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(255,238,188,.035) 45%,transparent 62%);
  transform:translateX(-55%);
  animation:windVeil 18s ease-in-out infinite;
}
@keyframes windVeil{
  0%,22%{transform:translateX(-58%);opacity:0}
  35%{opacity:.6}
  62%{transform:translateX(58%);opacity:.28}
  100%{transform:translateX(58%);opacity:0}
}

@media(max-width:820px){
  .hero-wind i:nth-child(even){display:none}
  .hero-wind{opacity:.62}
}

@media(prefers-reduced-motion:reduce){
  .hero-wind,.hero:after{display:none!important}
}

/* =========================================================
   PHASE 4 – Lebendiges Wasser und sanfter Vordergrund
   Sehr feine Lichtreflexe auf dem See und Gräser, die nur
   gelegentlich auf einen Windhauch reagieren.
   ========================================================= */
.hero-water{
  position:absolute;
  z-index:2;
  left:27%;
  right:4%;
  bottom:9%;
  height:28%;
  overflow:hidden;
  pointer-events:none;
  opacity:.38;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 72%,transparent 100%);
}
.hero-water:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(176deg,transparent 0 13px,rgba(255,232,168,.07) 14px 15px,transparent 16px 27px),
    linear-gradient(100deg,transparent 3%,rgba(255,235,177,.12) 38%,transparent 73%);
  filter:blur(.4px);
  animation:waterBreath 8s ease-in-out infinite alternate;
}
.hero-water i{
  position:absolute;
  left:var(--water-left,10%);
  top:var(--water-top,45%);
  width:var(--water-width,18%);
  height:1px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,244,203,.72),transparent);
  box-shadow:0 0 8px rgba(255,225,153,.25);
  opacity:0;
  animation:waterGlint var(--water-time,9s) ease-in-out infinite;
  animation-delay:var(--water-delay,0s);
}
.hero-water i:nth-child(1){--water-left:8%;--water-top:31%;--water-width:26%;--water-time:10s;--water-delay:-2s}
.hero-water i:nth-child(2){--water-left:41%;--water-top:48%;--water-width:20%;--water-time:12s;--water-delay:-8s}
.hero-water i:nth-child(3){--water-left:65%;--water-top:66%;--water-width:27%;--water-time:11s;--water-delay:-5s}
.hero-water i:nth-child(4){--water-left:24%;--water-top:78%;--water-width:14%;--water-time:13s;--water-delay:-10s}
@keyframes waterBreath{
  from{transform:translate3d(-1%,0,0) scaleY(.98);opacity:.55}
  to{transform:translate3d(1.3%,-1px,0) scaleY(1.03);opacity:.85}
}
@keyframes waterGlint{
  0%,18%,100%{opacity:0;transform:translateX(-14px) scaleX(.72)}
  38%{opacity:.2}
  52%{opacity:.72;transform:translateX(12px) scaleX(1.08)}
  68%{opacity:.18}
}

.hero-grass{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:-2px;
  height:15%;
  pointer-events:none;
  overflow:hidden;
  opacity:.48;
  filter:drop-shadow(0 -2px 5px rgba(0,0,0,.18));
}
.hero-grass i{
  position:absolute;
  left:var(--grass-left,5%);
  bottom:-8%;
  width:2px;
  height:var(--grass-height,76%);
  border-radius:80% 80% 12% 12%;
  background:linear-gradient(to top,rgba(18,25,10,.88),rgba(74,84,36,.56) 55%,rgba(160,143,73,.16));
  transform-origin:50% 100%;
  transform:rotate(var(--grass-angle,-5deg));
  animation:grassSway var(--grass-time,9s) ease-in-out infinite;
  animation-delay:var(--grass-delay,0s);
}
.hero-grass i:after{
  content:"";
  position:absolute;
  right:-6px;
  top:28%;
  width:8px;
  height:2px;
  border-radius:100% 0;
  background:rgba(121,117,53,.38);
  transform:rotate(-28deg);
}
.hero-grass i:nth-child(1){--grass-left:2%;--grass-height:74%;--grass-angle:-9deg;--grass-time:10s;--grass-delay:-2s}
.hero-grass i:nth-child(2){--grass-left:7%;--grass-height:92%;--grass-angle:5deg;--grass-time:12s;--grass-delay:-9s}
.hero-grass i:nth-child(3){--grass-left:14%;--grass-height:63%;--grass-angle:-3deg;--grass-time:8s;--grass-delay:-5s}
.hero-grass i:nth-child(4){--grass-left:21%;--grass-height:82%;--grass-angle:7deg;--grass-time:11s;--grass-delay:-1s}
.hero-grass i:nth-child(5){--grass-left:73%;--grass-height:68%;--grass-angle:-6deg;--grass-time:9s;--grass-delay:-6s}
.hero-grass i:nth-child(6){--grass-left:79%;--grass-height:88%;--grass-angle:4deg;--grass-time:12s;--grass-delay:-3s}
.hero-grass i:nth-child(7){--grass-left:85%;--grass-height:62%;--grass-angle:-8deg;--grass-time:10s;--grass-delay:-7s}
.hero-grass i:nth-child(8){--grass-left:90%;--grass-height:95%;--grass-angle:5deg;--grass-time:13s;--grass-delay:-10s}
.hero-grass i:nth-child(9){--grass-left:95%;--grass-height:72%;--grass-angle:-4deg;--grass-time:9s;--grass-delay:-4s}
.hero-grass i:nth-child(10){--grass-left:98%;--grass-height:84%;--grass-angle:8deg;--grass-time:11s;--grass-delay:-8s}
@keyframes grassSway{
  0%,20%,100%{transform:rotate(var(--grass-angle,-5deg)) translateX(0)}
  46%{transform:rotate(calc(var(--grass-angle,-5deg) + 4deg)) translateX(1px)}
  66%{transform:rotate(calc(var(--grass-angle,-5deg) - 2deg)) translateX(-1px)}
}

@media(max-width:820px){
  .hero-water{left:18%;right:-8%;bottom:8%;opacity:.28}
  .hero-grass{height:11%;opacity:.36}
  .hero-grass i:nth-child(odd){display:none}
}
@media(max-width:540px){
  .hero-water{opacity:.2}
  .hero-grass{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-water,.hero-grass{display:none!important}
}

/* =========================================================
   PHASE 5 – Drachenaura und seltene Sternschnuppe
   ========================================================= */
.hero-dragon-aura,
.hero-shooting-star{
  position:absolute;
  pointer-events:none;
}

/* Ein sehr zurückhaltender Lichtpuls hinter dem Drachen.
   Er wirkt eher wie warme Magie in der Luft als wie ein Effekt. */
.hero-dragon-aura{
  z-index:1;
  width:clamp(260px,34vw,620px);
  aspect-ratio:1;
  right:-2%;
  top:8%;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,226,149,.20) 0,
      rgba(242,172,82,.10) 23%,
      rgba(124,80,184,.055) 43%,
      transparent 70%);
  filter:blur(18px);
  mix-blend-mode:screen;
  opacity:.38;
  animation:dragonAura 11s ease-in-out infinite;
}

@keyframes dragonAura{
  0%,100%{transform:scale(.92);opacity:.24}
  48%{transform:scale(1.08);opacity:.48}
  62%{transform:scale(1.03);opacity:.36}
}

/* Nur gelegentlich zieht eine einzelne Sternschnuppe durch den Himmel. */
.hero-shooting-star{
  z-index:4;
  inset:0;
  overflow:hidden;
  opacity:.88;
}
.hero-shooting-star i{
  position:absolute;
  left:14%;
  top:14%;
  width:clamp(80px,10vw,170px);
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,244,201,.35),rgba(255,255,255,.95));
  box-shadow:0 0 8px rgba(255,242,184,.65);
  transform:translate3d(-45vw,-18vh,0) rotate(-18deg);
  transform-origin:right center;
  opacity:0;
  animation:shootingStar 19s ease-in-out infinite;
}
.hero-shooting-star i:after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fffde8;
  box-shadow:0 0 10px #fff8c9,0 0 22px rgba(255,220,119,.8);
  transform:translateY(-50%);
}

@keyframes shootingStar{
  0%,72%{opacity:0;transform:translate3d(-45vw,-18vh,0) rotate(-18deg)}
  73%{opacity:0}
  74%{opacity:.95}
  79%{opacity:.18;transform:translate3d(88vw,31vh,0) rotate(-18deg)}
  80%,100%{opacity:0;transform:translate3d(88vw,31vh,0) rotate(-18deg)}
}

/* Der Titel reagiert beim Lichtpuls kaum merklich mit. */
.hero-content.visible h1{
  position:relative;
}
.hero-content.visible h1:after{
  content:"";
  position:absolute;
  inset:7% -8% -12%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,229,151,.14),transparent 68%);
  filter:blur(20px);
  opacity:.18;
  animation:titleAura 11s ease-in-out infinite;
}
@keyframes titleAura{
  0%,100%{opacity:.12;transform:scale(.94)}
  48%{opacity:.28;transform:scale(1.04)}
}

@media(max-width:820px){
  .hero-dragon-aura{right:-22%;top:15%;opacity:.28}
  .hero-shooting-star i{animation-duration:24s}
}

@media(max-width:560px){
  .hero-shooting-star{display:none}
  .hero-dragon-aura{opacity:.2;filter:blur(24px)}
}

@media(prefers-reduced-motion:reduce){
  .hero-dragon-aura,
  .hero-shooting-star i,
  .hero-content.visible h1:after{animation:none!important}
  .hero-shooting-star{display:none!important}
}


/* =========================================================
   PHASE 6 – ruhiger Himmelsglanz, Sternschnuppe entfernt
   Der Effekt bleibt ausschließlich im oberen Himmelsbereich
   und verändert das Originalmotiv nicht.
   ========================================================= */
.hero-shooting-star{display:none!important}

.hero-sky-glow{
  position:absolute;
  z-index:2;
  pointer-events:none;
  left:-8%;
  right:-8%;
  top:0;
  height:46%;
  overflow:hidden;
  opacity:.28;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 23% 28%,rgba(255,223,159,.14),transparent 31%),
    radial-gradient(ellipse at 70% 18%,rgba(255,241,205,.10),transparent 29%),
    linear-gradient(110deg,transparent 14%,rgba(255,226,166,.055) 39%,transparent 64%);
  filter:blur(14px);
  transform:translate3d(-1.5%,0,0) scale(1.03);
  animation:skyGlowDrift 24s ease-in-out infinite alternate;
}

.hero-sky-glow:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,238,198,.045),transparent 72%);
  opacity:.6;
  animation:skyGlowBreath 11s ease-in-out infinite alternate;
}

@keyframes skyGlowDrift{
  0%{transform:translate3d(-1.8%,0,0) scale(1.025);opacity:.19}
  55%{opacity:.31}
  100%{transform:translate3d(1.6%,.7%,0) scale(1.055);opacity:.24}
}

@keyframes skyGlowBreath{
  from{opacity:.34}
  to{opacity:.72}
}

@media(max-width:820px){
  .hero-sky-glow{height:39%;opacity:.18;filter:blur(18px)}
}

@media(max-width:540px){
  .hero-sky-glow{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-sky-glow{animation:none!important;opacity:.16}
  .hero-sky-glow:after{animation:none!important}
}


/* =========================================================
   PHASE 7 – lebendige Fantasywelt
   Sehr subtile Tiefe, seltene Magie, Sonnenatmen und eine
   sanfte Reaktion des Nebels auf die Maus. Kein neuer Bildlayer.
   ========================================================= */
.hero-depth-wind,
.hero-dragon-presence,
.hero-rare-magic{
  position:absolute;
  pointer-events:none;
}

/* Ein kaum wahrnehmbarer Licht- und Windhauch an den Waldrändern. */
.hero-depth-wind{
  z-index:2;
  inset:24% -3% 5%;
  opacity:.16;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 6% 58%,rgba(198,215,176,.12),transparent 26%),
    radial-gradient(ellipse at 94% 54%,rgba(184,206,167,.10),transparent 25%),
    linear-gradient(96deg,transparent 10%,rgba(255,236,184,.025) 34%,transparent 60%);
  filter:blur(16px);
  transform:translate3d(-.5%,0,0) scale(1.01);
  animation:depthWind 19s ease-in-out infinite alternate;
}
@keyframes depthWind{
  0%{transform:translate3d(-.7%,.25%,0) scale(1.01);opacity:.10}
  52%{opacity:.19}
  100%{transform:translate3d(.8%,-.35%,0) scale(1.025);opacity:.13}
}

/* Der Drache erhält nach dem Laden kurz etwas mehr Präsenz,
   ohne sich selbst sichtbar zu bewegen. */
.hero-dragon-presence{
  z-index:2;
  right:1%;
  top:7%;
  width:clamp(300px,39vw,690px);
  height:clamp(260px,48vh,560px);
  border-radius:48%;
  background:
    radial-gradient(ellipse at 55% 43%,rgba(255,232,174,.08),transparent 43%),
    radial-gradient(ellipse at 60% 48%,rgba(31,22,14,.14),transparent 66%);
  mix-blend-mode:soft-light;
  filter:blur(11px);
  opacity:.05;
  animation:dragonPresence 18s ease-in-out infinite;
}
@keyframes dragonPresence{
  0%,9%,100%{opacity:.04;transform:scale(.985)}
  24%{opacity:.22;transform:scale(1.015)}
  43%{opacity:.09;transform:scale(1)}
}

/* Nur fünf Funken – sie erscheinen gemeinsam sehr selten am See. */
.hero-rare-magic{
  z-index:4;
  left:47%;
  bottom:17%;
  width:34%;
  height:30%;
  opacity:.9;
  overflow:hidden;
}
.hero-rare-magic i{
  position:absolute;
  left:var(--rare-left,50%);
  bottom:var(--rare-bottom,8%);
  width:var(--rare-size,4px);
  height:var(--rare-size,4px);
  border-radius:50%;
  background:rgba(255,240,171,.95);
  box-shadow:0 0 7px rgba(255,224,126,.92),0 0 18px rgba(255,197,76,.5);
  opacity:0;
  animation:rareMagic 24s ease-in-out infinite;
  animation-delay:var(--rare-delay,0s);
}
.hero-rare-magic i:nth-child(1){--rare-left:13%;--rare-bottom:10%;--rare-size:3px;--rare-delay:-2.4s}
.hero-rare-magic i:nth-child(2){--rare-left:31%;--rare-bottom:2%;--rare-size:4px;--rare-delay:-1.8s}
.hero-rare-magic i:nth-child(3){--rare-left:49%;--rare-bottom:15%;--rare-size:3px;--rare-delay:-1.2s}
.hero-rare-magic i:nth-child(4){--rare-left:68%;--rare-bottom:5%;--rare-size:5px;--rare-delay:-.6s}
.hero-rare-magic i:nth-child(5){--rare-left:84%;--rare-bottom:12%;--rare-size:3px;--rare-delay:0s}
@keyframes rareMagic{
  0%,70%,100%{opacity:0;transform:translate3d(0,12px,0) scale(.7)}
  74%{opacity:.12}
  78%{opacity:.86;transform:translate3d(4px,-10px,0) scale(1)}
  84%{opacity:.42;transform:translate3d(-5px,-34px,0) scale(.85)}
  89%{opacity:0;transform:translate3d(7px,-62px,0) scale(.55)}
}

/* Sonnenlicht wirkt, als zögen sehr langsam Wolken davor. */
.hero-light-rays{
  animation:heroRays 18s ease-in-out infinite alternate,sunCloudBreath 43s ease-in-out infinite;
}
@keyframes sunCloudBreath{
  0%,100%{filter:blur(8px) brightness(.92)}
  32%{filter:blur(8px) brightness(1.08)}
  61%{filter:blur(9px) brightness(.84)}
  79%{filter:blur(8px) brightness(1.02)}
}

/* Maussteuerung setzt diese Variablen nur auf Desktop. */
.hero-fog-back{
  translate:var(--fog-back-x,0px) var(--fog-back-y,0px);
}
.hero-fog-front{
  translate:var(--fog-front-x,0px) var(--fog-front-y,0px);
}

@media(max-width:820px){
  .hero-depth-wind{opacity:.1}
  .hero-dragon-presence{right:-18%;opacity:.04}
  .hero-rare-magic{left:40%;width:54%;bottom:15%}
}
@media(max-width:540px){
  .hero-depth-wind,.hero-dragon-presence,.hero-rare-magic{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-depth-wind,.hero-dragon-presence,.hero-rare-magic i,.hero-light-rays{
    animation:none!important;
  }
  .hero-rare-magic{display:none!important}
}

/* =========================================================
   PHASE 8 – die verborgene Fee
   Ein einziges, kleines Lichtwesen fliegt selten durch den
   rechten Waldteil. Es bleibt bewusst fern von Titel, Paar
   und Drache und ist eher zu erahnen als sofort zu erkennen.
   ========================================================= */
.hero-fairy{
  position:absolute;
  z-index:4;
  left:68%;
  top:54%;
  width:150px;
  height:110px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0);
  filter:drop-shadow(0 0 5px rgba(255,229,138,.55));
}
.hero-fairy.flying{
  animation:fairyPath 8.4s cubic-bezier(.33,.08,.42,.96) both;
}
.hero-fairy-core{
  position:absolute;
  left:12px;
  top:66px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff8c9;
  box-shadow:
    0 0 7px rgba(255,248,199,.98),
    0 0 15px rgba(255,219,110,.9),
    0 0 28px rgba(255,197,65,.42);
}
.hero-fairy-core:before,
.hero-fairy-core:after{
  content:"";
  position:absolute;
  width:7px;
  height:3px;
  top:1px;
  border-radius:80% 15% 80% 15%;
  background:linear-gradient(90deg,rgba(255,255,236,.08),rgba(255,244,193,.78));
  transform-origin:0 50%;
  opacity:.66;
  animation:fairyWing .16s ease-in-out infinite alternate;
}
.hero-fairy-core:before{left:2px;transform:rotate(-36deg)}
.hero-fairy-core:after{left:2px;transform:rotate(31deg);animation-delay:-.08s}
.hero-fairy i{
  position:absolute;
  left:13px;
  top:68px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,231,150,.88);
  box-shadow:0 0 5px rgba(255,215,92,.7);
  opacity:0;
}
.hero-fairy.flying i{animation:fairyDust 2.2s ease-out infinite}
.hero-fairy i:nth-of-type(1){animation-delay:-.2s}
.hero-fairy i:nth-of-type(2){animation-delay:-.65s}
.hero-fairy i:nth-of-type(3){animation-delay:-1.05s}
.hero-fairy i:nth-of-type(4){animation-delay:-1.45s}
.hero-fairy i:nth-of-type(5){animation-delay:-1.85s}

@keyframes fairyPath{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.72) rotate(-4deg)}
  7%{opacity:.22}
  15%{opacity:.78;transform:translate3d(18px,1px,0) scale(.88) rotate(2deg)}
  34%{opacity:.92;transform:translate3d(52px,-19px,0) scale(1) rotate(-3deg)}
  54%{opacity:.72;transform:translate3d(89px,-6px,0) scale(.94) rotate(3deg)}
  73%{opacity:.54;transform:translate3d(118px,-31px,0) scale(.82) rotate(-2deg)}
  91%{opacity:.12;transform:translate3d(145px,-21px,0) scale(.62) rotate(2deg)}
  100%{opacity:0;transform:translate3d(158px,-38px,0) scale(.48) rotate(0)}
}
@keyframes fairyWing{
  from{scale:1 .35;opacity:.35}
  to{scale:1 1;opacity:.8}
}
@keyframes fairyDust{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}
  20%{opacity:.7}
  100%{opacity:0;transform:translate3d(-26px,12px,0) scale(.15)}
}

@media(max-width:900px){
  .hero-fairy{left:61%;top:51%;transform:scale(.86)}
}
@media(max-width:620px){
  .hero-fairy{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-fairy{display:none!important}
}

/* =========================================================
   PHASE 9 – Spiegellicht auf dem See
   Keine zweite sichtbare Bildkopie: Der Himmel wird nur als
   weicher Farb- und Lichtschein im Wasser angedeutet. Feine
   Wellen brechen die Spiegelung, damit sie natürlich bleibt.
   ========================================================= */
.hero-water-reflection{
  position:absolute;
  z-index:2;
  left:28%;
  right:3%;
  bottom:7.5%;
  height:28%;
  overflow:hidden;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 70%,transparent 100%);
  transform:skewX(-2deg);
}

/* Weiche Farben des Himmels – bewusst abstrakt, damit das
   Originalbild weder verdoppelt noch verfremdet erscheint. */
.hero-water-reflection span{
  position:absolute;
  inset:-10% -8%;
  background:
    radial-gradient(ellipse at 28% 18%,rgba(255,221,150,.18),transparent 26%),
    radial-gradient(ellipse at 67% 12%,rgba(199,174,221,.12),transparent 31%),
    linear-gradient(180deg,rgba(255,231,177,.08),rgba(194,207,214,.055) 47%,transparent 86%);
  filter:blur(9px);
  transform:translate3d(-1.2%,0,0) scaleY(.88);
  animation:lakeReflectionDrift 17s ease-in-out infinite alternate;
}

/* Drei sehr flache Wellenbänder teilen die Spiegelung auf. */
.hero-water-reflection i{
  position:absolute;
  left:var(--reflect-left,8%);
  top:var(--reflect-top,30%);
  width:var(--reflect-width,65%);
  height:clamp(6px,1.2vh,12px);
  border-top:1px solid rgba(255,240,199,.18);
  border-bottom:1px solid rgba(204,222,222,.08);
  border-radius:50%;
  filter:blur(.35px);
  opacity:.15;
  transform:translateX(-3%) scaleX(.9);
  animation:lakeRipple var(--reflect-time,9s) ease-in-out infinite;
  animation-delay:var(--reflect-delay,0s);
}
.hero-water-reflection i:nth-of-type(1){--reflect-left:3%;--reflect-top:28%;--reflect-width:72%;--reflect-time:10s;--reflect-delay:-3s}
.hero-water-reflection i:nth-of-type(2){--reflect-left:24%;--reflect-top:51%;--reflect-width:68%;--reflect-time:12s;--reflect-delay:-8s}
.hero-water-reflection i:nth-of-type(3){--reflect-left:10%;--reflect-top:72%;--reflect-width:48%;--reflect-time:11s;--reflect-delay:-5s}

@keyframes lakeReflectionDrift{
  0%{transform:translate3d(-1.4%,0,0) scaleY(.86);opacity:.62}
  48%{opacity:.92}
  100%{transform:translate3d(1.2%,1px,0) scaleY(.94);opacity:.70}
}
@keyframes lakeRipple{
  0%,100%{opacity:.07;transform:translateX(-4%) scaleX(.84) scaleY(.7)}
  45%{opacity:.23;transform:translateX(2%) scaleX(1.04) scaleY(1)}
  68%{opacity:.12;transform:translateX(4%) scaleX(.94) scaleY(.8)}
}

/* Die bereits vorhandenen Glanzlinien bleiben vorne und werden
   nur minimal feiner abgestimmt. */
.hero-water{z-index:3;opacity:.33}

@media(max-width:820px){
  .hero-water-reflection{left:18%;right:-8%;bottom:7%;opacity:.22}
  .hero-water-reflection i:nth-of-type(3){display:none}
}
@media(max-width:540px){
  .hero-water-reflection{opacity:.14}
}
@media(prefers-reduced-motion:reduce){
  .hero-water-reflection{display:none!important}
}

/* =========================================================
   PHASE 10 – Die Bücher werden zu kleinen 3D-Objekten
   Der Einband öffnet sich beim Darüberfahren nur minimal.
   Ein Klick zeigt Klappentext, Leseprobe und Buchlink in
   einer ruhigen, hochwertigen Buchansicht.
   ========================================================= */

.book-rail{
  perspective:1400px;
}

.book{
  cursor:pointer;
  isolation:isolate;
  overflow:visible;
  outline:none;
}

.book:focus-visible{
  box-shadow:0 0 0 3px rgba(255,241,170,.72),var(--shadow);
}

.book-stage{
  position:relative;
  width:min(78%,230px);
  margin:6px auto 20px;
  aspect-ratio:2/3;
  perspective:1100px;
  transform-style:preserve-3d;
}

.book-object{
  position:absolute;
  inset:2% 4% 4% 7%;
  transform-style:preserve-3d;
  transform:rotateY(-8deg) rotateX(1.5deg);
  transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .55s ease;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.48));
}

.book:hover .book-object,
.book:focus-visible .book-object{
  transform:rotateY(-13deg) rotateX(1deg) translateY(-7px);
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.55));
}

.book-pages,
.book-back,
.book-front,
.book-spine{
  position:absolute;
  inset:0;
  border-radius:4px 13px 13px 4px;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

.book-pages{
  inset:2.1% -2.5% 1.7% 2.6%;
  transform:translateZ(-4px);
  background:
    repeating-linear-gradient(90deg,rgba(103,76,39,.18) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#c6ad79,#fff6d5 8%,#efe1bd 92%,#b99962);
  box-shadow:inset -7px 0 8px rgba(70,44,16,.28),inset 0 1px 0 rgba(255,255,255,.72);
}

.book-back{
  transform:translateZ(-7px);
  background:linear-gradient(135deg,#241738,#49306c);
  box-shadow:inset 0 0 0 1px rgba(255,233,164,.18);
}

.book-front{
  z-index:4;
  transform-origin:0 50%;
  transform:translateZ(5px) rotateY(0deg);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),inset -12px 0 20px rgba(0,0,0,.12);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease;
  overflow:hidden;
}

.book:hover .book-front,
.book:focus-visible .book-front{
  transform:translateZ(5px) rotateY(-11deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset -16px 0 24px rgba(0,0,0,.18),8px 8px 18px rgba(0,0,0,.28);
}

.book-spine{
  z-index:5;
  width:7%;
  right:auto;
  transform:translateZ(7px);
  border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,rgba(0,0,0,.52),rgba(255,255,255,.1),rgba(0,0,0,.25));
  mix-blend-mode:multiply;
  pointer-events:none;
}

.book-cover-glint{
  position:absolute;
  inset:-35% auto -35% -65%;
  width:34%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,248,211,.5),transparent);
  opacity:0;
  pointer-events:none;
}

.book:hover .book-cover-glint,
.book:focus-visible .book-cover-glint{
  animation:bookGlint 1.25s .12s ease-out both;
}

@keyframes bookGlint{
  0%{left:-65%;opacity:0}
  18%{opacity:.55}
  70%{opacity:.2}
  100%{left:128%;opacity:0}
}

.book-shadow{
  position:absolute;
  left:11%;right:2%;bottom:-3%;height:12%;
  border-radius:50%;
  background:rgba(0,0,0,.48);
  filter:blur(13px);
  transform:scaleX(.88);
  transition:transform .65s ease,opacity .65s ease;
  z-index:-1;
}

.book:hover .book-shadow,
.book:focus-visible .book-shadow{
  transform:scaleX(1) translateY(5px);
  opacity:.82;
}

.book-info{
  position:relative;
  z-index:2;
}

.book-more{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:5px;
  color:var(--gold2);
  font-weight:850;
  letter-spacing:.02em;
}

.book-more i{
  font-style:normal;
  transition:transform .3s ease;
}

.book:hover .book-more i,
.book:focus-visible .book-more i{
  transform:translateX(5px);
}

body.modal-open{overflow:hidden}

.book-modal-grid{
  grid-template-columns:minmax(220px,300px) minmax(320px,1fr);
  align-items:center;
  gap:clamp(28px,5vw,58px);
}

.modal-book-stage{
  position:relative;
  width:min(100%,290px);
  aspect-ratio:2/3;
  margin:auto;
  perspective:1300px;
}

.modal-book-object{
  position:absolute;
  inset:0 4% 0 7%;
  transform-style:preserve-3d;
  transform:rotateY(-12deg) rotateX(2deg);
  animation:modalBookArrive .9s cubic-bezier(.16,.82,.24,1) both;
  filter:drop-shadow(0 35px 30px rgba(0,0,0,.58));
}

@keyframes modalBookArrive{
  from{opacity:0;transform:rotateY(-28deg) rotateX(5deg) translateY(18px) scale(.92)}
  to{opacity:1;transform:rotateY(-12deg) rotateX(2deg) translateY(0) scale(1)}
}

.modal-book-pages{
  position:absolute;
  inset:2% -3% 1.5% 3%;
  border-radius:5px 14px 14px 5px;
  background:repeating-linear-gradient(90deg,rgba(90,61,26,.18) 0 1px,transparent 1px 3px),linear-gradient(90deg,#c6ad79,#fff8dc 8%,#ead9b0 92%,#ad8851);
  transform:translateZ(-5px);
  box-shadow:inset -9px 0 10px rgba(50,31,10,.26);
}

.modal-cover{
  position:absolute;
  inset:0;
  width:auto;
  max-width:none;
  margin:0;
  aspect-ratio:auto;
  border-radius:5px 14px 14px 5px;
  transform:translateZ(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset -14px 0 24px rgba(0,0,0,.15);
}

.modal-book-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:7%;
  border-radius:5px 0 0 5px;
  transform:translateZ(8px);
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.12),rgba(0,0,0,.25));
  mix-blend-mode:multiply;
}

.book-modal-copy h2{margin-bottom:0}
.book-modal-copy h3{margin-top:4px;color:var(--gold2);font-family:Georgia,serif;font-size:clamp(1.15rem,2vw,1.5rem)}

.book-tabs{
  display:flex;
  gap:8px;
  margin:24px 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.book-tab{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:9px 15px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font:inherit;
  font-weight:850;
  cursor:pointer;
  transition:.25s ease;
}

.book-tab:hover,
.book-tab.active{
  color:#201306;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 8px 22px rgba(242,201,111,.18);
}

.book-tab-panel{display:none;min-height:150px;color:var(--muted)}
.book-tab-panel.active{display:block;animation:bookPanelIn .38s ease both}
@keyframes bookPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.book-modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.btn.disabled{
  opacity:.52;
  cursor:not-allowed;
  filter:grayscale(.4);
}

@media(max-width:820px){
  .book-modal-grid{grid-template-columns:1fr}
  .modal-book-stage{width:min(54vw,240px)}
  .book-tab-panel{min-height:0}
}

@media(max-width:540px){
  .book-stage{width:min(66%,220px)}
  .book-object{transform:rotateY(-6deg)}
  .book:hover .book-object,.book:focus-visible .book-object{transform:rotateY(-8deg) translateY(-4px)}
  .book:hover .book-front,.book:focus-visible .book-front{transform:translateZ(5px) rotateY(-7deg)}
  .modal-inner{padding:22px 18px}
  .modal-book-stage{width:min(62vw,215px)}
  .book-modal-actions .btn{width:100%;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .book-object,.book-front,.book-cover-glint,.modal-book-object,.book-tab-panel{animation:none!important;transition:none!important}
}

/* =========================================================
   PHASE 11 – einheitliche Farbwelt & typografischer Feinschliff
   Wärmeres Gold, tieferes Violett, bläulicher Nebel,
   hochwertigere Glasflächen und harmonischere Schriften.
   ========================================================= */
:root{
  --bg:#060713;
  --text:#f8f1e5;
  --muted:#c9bfd0;
  --gold:#d5aa5d;
  --gold2:#f4dda1;
  --violet:#7445a0;
  --pink:#b66fa9;
  --green:#6aaf98;
  --panel:rgba(12,13,29,.74);
  --panel2:rgba(15,16,36,.94);
  --line:rgba(239,211,148,.20);
  --shadow:0 28px 80px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.018);
  --radius:26px;
}

body{
  background:#060713;
  color:var(--text);
  font-family:"Segoe UI",Aptos,Helvetica,Arial,sans-serif;
  letter-spacing:.005em;
}

body:before{
  background:
    radial-gradient(circle at 18% 0%,rgba(112,65,158,.24),transparent 34rem),
    radial-gradient(circle at 82% 12%,rgba(213,170,93,.12),transparent 31rem),
    radial-gradient(circle at 50% 82%,rgba(43,76,111,.12),transparent 34rem),
    linear-gradient(180deg,#050611,#0a1022 48%,#060713);
}

h1,h2,h3,.logo,.subtitle,.quote-band p,.quote-band strong,
.section-text h2,.world-card h2,.card-body h3,.book-info h3,
.book-modal-copy h3{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
}

.topbar{
  background:linear-gradient(180deg,rgba(5,6,15,.9),rgba(7,8,18,.57));
  border-bottom-color:rgba(239,211,148,.10);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
}
.logo{letter-spacing:.015em}
.logo span{
  color:var(--gold2);
  filter:drop-shadow(0 0 12px rgba(213,170,93,.48));
}
.nav{color:#d2c8d6;letter-spacing:.025em}
.nav a:hover{
  color:#f6dfaa;
  text-shadow:0 0 17px rgba(213,170,93,.38);
}

.particles{
  background-image:
    radial-gradient(circle,rgba(244,221,161,.72) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(132,91,171,.42) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(112,161,166,.34) 0 1px,transparent 1.4px);
  opacity:.13;
}

.hero-bg{
  filter:saturate(1.04) contrast(1.035) brightness(.98);
}
.hero h1{
  color:#f4dda1;
  letter-spacing:-.035em;
  text-shadow:
    0 0 14px rgba(213,170,93,.38),
    0 6px 26px rgba(52,26,4,.42),
    0 22px 62px rgba(0,0,0,.70);
}
.kicker{
  color:#f2d99b;
  letter-spacing:.22em;
}
.subtitle{
  color:#fff9ed;
  letter-spacing:-.018em;
}
.claim{color:#efe3ce}

/* Nebel kühler und feiner, damit das warme Gold stärker wirkt */
.hero-fog-back{
  opacity:.31;
  background-image:
    radial-gradient(ellipse at 8% 70%,rgba(190,211,226,.30) 0 8%,transparent 28%),
    radial-gradient(ellipse at 28% 56%,rgba(173,202,221,.33) 0 10%,transparent 30%),
    radial-gradient(ellipse at 51% 69%,rgba(203,220,232,.27) 0 9%,transparent 29%),
    radial-gradient(ellipse at 72% 52%,rgba(166,199,219,.31) 0 11%,transparent 31%),
    radial-gradient(ellipse at 94% 67%,rgba(204,221,232,.25) 0 9%,transparent 28%);
}
.hero-fog-front{
  opacity:.28;
  background-image:
    radial-gradient(ellipse at 4% 72%,rgba(216,228,236,.31) 0 9%,transparent 27%),
    radial-gradient(ellipse at 23% 60%,rgba(181,207,224,.34) 0 12%,transparent 31%),
    radial-gradient(ellipse at 44% 76%,rgba(217,229,236,.28) 0 10%,transparent 29%),
    radial-gradient(ellipse at 66% 58%,rgba(177,203,220,.33) 0 12%,transparent 31%),
    radial-gradient(ellipse at 86% 73%,rgba(213,226,234,.27) 0 10%,transparent 29%);
}

.btn{
  position:relative;
  overflow:hidden;
  padding:13px 24px;
  border-color:rgba(239,211,148,.30);
  letter-spacing:.018em;
  box-shadow:0 13px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;
}
.btn.primary{
  background:linear-gradient(135deg,#f6e4ad 0%,#d8ad61 56%,#c49143 100%);
  color:#291803;
  border-color:rgba(255,235,181,.56);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}
.btn.ghost{
  background:linear-gradient(135deg,rgba(36,28,54,.50),rgba(16,20,39,.44));
  color:#f6eee1;
  border-color:rgba(239,211,148,.28);
  backdrop-filter:blur(14px) saturate(1.15);
}
.btn:hover{
  transform:translateY(-3px);
  border-color:rgba(247,222,163,.58);
  box-shadow:0 19px 42px rgba(0,0,0,.38),0 0 24px rgba(213,170,93,.12),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:focus-visible,.book:focus-visible,.card:focus-visible,.link-grid a:focus-visible{
  outline:2px solid #efd38f;
  outline-offset:4px;
}

.scroll-hint{
  background:rgba(8,10,23,.24);
  border-color:rgba(239,211,148,.32);
  color:#efd797;
  backdrop-filter:blur(8px);
}

.section-text h2{
  color:#fbf5e9;
  letter-spacing:-.026em;
  text-wrap:balance;
}
.section-text p,.book-info p,.card-body p,.legal,footer{color:#c8bfcc}

.time-item,.book,.card,.world-card,.gallery figure,.link-grid a,.modal-inner{
  background:
    linear-gradient(145deg,rgba(26,23,46,.74),rgba(10,14,31,.77));
  border-color:rgba(239,211,148,.17);
  box-shadow:var(--shadow);
}
.time-item:before{
  background:linear-gradient(180deg,#dfb76d,#7445a0 80%);
  box-shadow:0 0 14px rgba(213,170,93,.22);
}
.time-item strong,.book-info small,.card-body small,.world-card .kicker{
  color:#e5c27a;
}

.book:hover,.card:hover,.gallery figure:hover{
  border-color:rgba(239,211,148,.36);
  box-shadow:0 34px 92px rgba(0,0,0,.52),0 0 38px rgba(116,69,160,.09),0 0 20px rgba(213,170,93,.07);
}
.cover,.card-img{
  background-color:#17152b;
}
.book-info h3,.card-body h3{color:#fbf5ea}
.book-more{color:#e8c77f}

.world-bg{
  filter:saturate(.96) contrast(1.04) brightness(.91);
}
.world-card{
  background:linear-gradient(145deg,rgba(13,14,32,.76),rgba(18,14,35,.69));
  border-color:rgba(239,211,148,.18);
  backdrop-filter:blur(16px) saturate(1.08);
}
.world-card p{color:#e9ddca}

.quote-band strong{
  color:#efd591;
  text-shadow:0 0 24px rgba(213,170,93,.30);
}

.link-grid a{
  color:#efe8df;
  background:linear-gradient(145deg,rgba(23,21,43,.80),rgba(11,15,31,.86));
}
.link-grid a:hover{
  background:linear-gradient(145deg,rgba(82,57,103,.42),rgba(33,31,52,.76));
  color:#f1d897;
}

.modal{
  background:rgba(4,5,13,.84);
  backdrop-filter:blur(10px);
}
.modal-close{
  background:rgba(24,20,42,.72);
  border-color:rgba(239,211,148,.28);
  color:#f5e9cf;
  backdrop-filter:blur(12px);
}
.book-tab{
  background:rgba(255,255,255,.045);
  color:#c7bdcb;
}
.book-tab:hover,.book-tab.active{
  color:#281706;
  background:linear-gradient(135deg,#f6e4ad,#d4a655);
}

@media(max-width:820px){
  .nav{
    background:linear-gradient(160deg,rgba(17,15,34,.97),rgba(8,12,26,.97));
    border-color:rgba(239,211,148,.18);
    box-shadow:0 25px 65px rgba(0,0,0,.50);
  }
}

/* =========================================================
   RECHTLICHE SEITEN & PORTAL-FOOTER
   ========================================================= */
.portal-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:84px 20px 34px;
  text-align:center;
  border-top:1px solid rgba(239,211,148,.12);
  background:
    radial-gradient(circle at 50% 10%,rgba(116,69,160,.22),transparent 34rem),
    radial-gradient(circle at 78% 38%,rgba(213,170,93,.09),transparent 28rem),
    linear-gradient(180deg,#080917 0%,#050610 70%,#03040a 100%);
}
.footer-stars{
  position:absolute;inset:0;z-index:-1;opacity:.32;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(244,221,161,.75) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(210,221,240,.55) 0 1px,transparent 1.3px);
  background-size:97px 113px,151px 137px;
  animation:footerStars 34s linear infinite;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
@keyframes footerStars{to{background-position:97px -113px,-151px -137px}}
.footer-inner{max-width:900px;margin:auto}
.footer-mark{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid rgba(244,221,161,.32);border-radius:50%;color:var(--gold2);text-decoration:none;background:rgba(255,255,255,.035);box-shadow:0 0 30px rgba(213,170,93,.12)}
.portal-footer h2{margin:18px 0 6px;font-size:clamp(2rem,4vw,3.35rem);color:var(--gold2)}
.footer-subtitle{margin:0;color:#eee2cf;font-size:1.08rem}
.footer-claim{margin:13px 0 28px;color:var(--muted);font-style:italic}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 25px;margin:0 0 30px}
.footer-nav a,.legal a{color:#efdcae;text-decoration:none;border-bottom:1px solid transparent;transition:.25s ease}
.footer-nav a:hover,.legal a:hover{color:#fff4d4;border-bottom-color:rgba(244,221,161,.55)}
.footer-copy{margin:0;color:#bdb3c4;font-size:.92rem}
.footer-ai{max-width:720px;margin:12px auto 0;color:#91899a;font-size:.78rem;line-height:1.65}

.legal-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 0%,rgba(116,69,160,.24),transparent 36rem),
    radial-gradient(circle at 82% 12%,rgba(213,170,93,.11),transparent 31rem),
    linear-gradient(180deg,#050611,#090d1d 55%,#050610);
}
.legal-main{padding:130px 20px 80px}
.legal-hero{max-width:920px;margin:0 auto 30px;text-align:center}
.legal-hero h1{margin:.15em 0;font-size:clamp(3rem,8vw,6.5rem);color:var(--gold2);text-shadow:0 0 22px rgba(213,170,93,.24)}
.legal-hero p{max-width:700px;margin:auto;color:var(--muted);line-height:1.75}
.legal-sheet{
  max-width:920px;margin:auto;padding:clamp(24px,5vw,58px);
  border:1px solid rgba(239,211,148,.18);border-radius:30px;
  background:linear-gradient(145deg,rgba(19,20,42,.88),rgba(8,10,24,.82));
  box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
}
.legal-sheet h2{margin:2.1em 0 .65em;color:var(--gold2);font-size:clamp(1.4rem,3vw,2rem)}
.legal-sheet h2:first-child{margin-top:0}
.legal-sheet h3{margin:1.6em 0 .45em;color:#ead8b3;font-size:1.12rem}
.legal-sheet p,.legal-sheet li{color:#ddd4df;line-height:1.78}
.legal-sheet ul{padding-left:1.25rem}
.legal-sheet a{color:#f1dca6}
.legal-note{padding:16px 18px;border-left:3px solid var(--gold);border-radius:0 14px 14px 0;background:rgba(213,170,93,.07)}
.legal-placeholder{padding:17px 18px;border:1px dashed rgba(244,221,161,.55);border-radius:14px;background:rgba(213,170,93,.08);color:#ffe9b7!important}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:#ead8b3;text-decoration:none}
.contact-address{font-size:clamp(1.08rem,2.5vw,1.35rem);text-align:center;padding:24px;border:1px solid rgba(239,211,148,.16);border-radius:20px;background:rgba(255,255,255,.025)}
.contact-address a{font-weight:700}
@media(max-width:600px){.legal-main{padding-top:95px}.legal-sheet{border-radius:22px}.portal-footer{padding-top:64px}}
@media(prefers-reduced-motion:reduce){.footer-stars{animation:none}}