/* STODA · Seiten-Stil: home (aus index.html übernommen) */

/* Layout: Feste Menüleiste in dunklem Eichenholz (mit Menüpunkt „Wiki“ und Handy-Menü), darunter der Feature-Block „Liste mit Vorschau“
   und der Bereich „Solo-Entwickler“ (Entrollen + Zähler). Bewusst nur dunkles Theme. */
:root{
  color-scheme: dark;
  /* Farben */
  --night:    #0c0f15;
  --stone:    #8c8778;
  --parchment:#ebe1cb;
  --dim:      rgba(235,225,203,.8);
  --ember:    #e38b3d;
  --ember-deep:#a8461f;
  --ember-glow: rgba(227,139,61,.45);
  --rune:     #a6dcd3;
  --oak-top:  #3b2b1f;
  --oak-bot:  #22180f;
  --line:     rgba(235,225,203,.12);

  /* Schrift */
  --f-display: "Grenze Gotisch", Georgia, serif;
  --f-body:    "Alegreya", Georgia, "Times New Roman", serif;
  --f-label:   "Alegreya Sans SC", "Trebuchet MS", system-ui, sans-serif;

  /* Typo-Skala */
  --t-xs: .8rem; --t-sm: .95rem; --t-md: 1.15rem; --t-lg: 1.5rem;
  --t-xl: clamp(2rem, 4.5vw, 3.4rem);

  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 62px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 10px)}
body{
  margin:0;
  background: var(--night);
  color: var(--parchment);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.label{font-family:var(--f-label);font-size:var(--t-sm);letter-spacing:.3em;text-transform:uppercase;color:var(--ember);display:flex;align-items:center;gap:14px}
.label::before{content:"";width:28px;height:1px;background:currentColor}
.sec-h{font-family:var(--f-display);font-size:var(--t-xl);line-height:1.05;margin-top:12px}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ================= NAVIGATION =================
   Feste Leiste mit Verlauf, gleitet von oben herein, Logo gleitet danach von links herein. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,var(--oak-top) 0%,var(--oak-bot) 100%);
  border-bottom:1px solid rgba(227,139,61,.38);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 24px rgba(0,0,0,.55);
  animation:navSlideIn .7s cubic-bezier(.22,.8,.32,1) both;
}
.nav::before{
  content:"";position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,200,140,.4) 30%,rgba(255,200,140,.4) 70%,transparent);
}
.nav .wrap{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none;padding-left:max(24px,var(--gutter-l));padding-right:max(24px,var(--gutter-r))}
@keyframes navSlideIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

.nav-logo{display:flex;align-items:center;text-decoration:none;animation:logoSlideIn .6s cubic-bezier(.22,.8,.32,1) .55s both}
@keyframes logoSlideIn{from{transform:translateX(-60px);opacity:0}to{transform:none;opacity:1}}
.nav-logo img{height:30px;width:auto;display:block}
.nav-logo img[hidden]{display:none}
.nav-logo .txt{font-family:var(--f-display);font-weight:900;font-size:1.8rem;line-height:30px;height:30px;letter-spacing:.04em}
.nav-logo .txt span{color:var(--ember)}

.nav-links{display:flex;gap:clamp(1.1rem,2vw,2.2rem);list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--f-label);font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(235,225,203,.72);text-decoration:none;position:relative;padding-bottom:2px;transition:color .2s;white-space:nowrap;
}
.nav-links a::after{content:"";position:absolute;bottom:-2px;left:0;right:100%;height:1px;background:var(--parchment);transition:right .3s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}

.nbtn{
  font-family:var(--f-label);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.5rem 1.4rem;color:#1a1009;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,#f2a660,var(--ember) 60%,#c8662a);
  border:1px solid rgba(255,190,120,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 2px 8px rgba(0,0,0,.4);
  transition:box-shadow .2s, filter .2s;
}
.nbtn:hover{filter:brightness(1.08);box-shadow:0 0 20px var(--ember-glow)}

/* Platz unter der festen Leiste */
main{padding-top:var(--nav-h)}

/* ================= ABSCHNITTE ================= */
.band{position:relative;overflow:hidden;padding-block:clamp(80px,11vw,144px)}
.band > .wrap{position:relative;z-index:1}
/* Hintergrund mit weichem Ein- und Ausblenden oben/unten */
.band::before{content:"";position:absolute;inset:0;background:var(--bg,none);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.band.bg-dev{--bg:linear-gradient(160deg,#171b24,#120f0d)}

.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:48px}
.sec-head .sec-h{max-width:16ch}
.sec-head p{max-width:42ch;color:rgba(235,225,203,.78)}

/* ==================================================================
   REVEAL-SYSTEM (Auszug: nebel, entrollen, Zähler)
   Verwendung:  <div data-reveal="nebel">…</div>,  optional style="--d:200ms"
   ================================================================== */
.js [data-reveal]{
  --dir:1;
  transition-property:opacity,transform,filter,clip-path;
  transition-duration:1.15s;
  transition-timing-function:var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal][data-from="top"]{--dir:-1}
.js [data-reveal]:not(.in){transition-duration:.6s;transition-delay:0s}

/* Nebel: hebt sich unscharf aus dem Dunst */
[data-reveal="nebel"]{filter:blur(0)}
.js [data-reveal="nebel"]:not(.in){opacity:0;filter:blur(12px);transform:translateY(calc(var(--dir) * 34px)) scale(.985)}

/* Entrollen: öffnet sich von oben nach unten wie Pergament */
[data-reveal="entrollen"]{clip-path:inset(0 0 0 0);transform-origin:50% 0}
.js [data-reveal="entrollen"]:not(.in){clip-path:inset(0 0 100% 0);transform:scaleY(.94);opacity:.2}
.js [data-reveal="entrollen"]{transition-duration:1.4s}

/* Zeilen: Tabellenzeilen (.rv-row) laufen nacheinander ein, eine Glutlinie fährt einmal darüber */
[data-reveal="zeilen"]{position:relative;--step:80ms}
.js [data-reveal="zeilen"] .rv-row{
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s;
  transition-delay:calc(var(--d,0ms) + var(--i,0) * var(--step,110ms));
}
.js [data-reveal="zeilen"]:not(.in) .rv-row{opacity:0;transform:translateX(-28px);filter:blur(3px);transition-duration:.45s;transition-delay:0s}
.js [data-reveal="zeilen"]::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--ember) 30%,#ffd29c 50%,var(--ember) 70%,transparent);box-shadow:0 0 16px var(--ember-glow)}
.js [data-reveal="zeilen"].in::after{animation:scan 1.3s cubic-bezier(.4,0,.2,1) var(--d,0ms) both}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
/* ===================== Ende REVEAL-SYSTEM ===================== */

/* ===== FEATURES: Liste mit Vorschau ===== */
.lp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.lp-list{list-style:none;margin:0;padding:0;display:grid;align-content:start;border-top:1px solid var(--line)}
.lp-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:1.05rem .6rem;cursor:pointer;color:var(--stone);transition:color .3s,background .3s,padding .3s}
.lp-item .ico{color:inherit}
.lp-item b{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-sm);font-weight:700}
.lp-item .arr{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;color:var(--ember)}
.lp-item::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--prog,0%);background:var(--ember)}
.lp-item:hover{color:var(--parchment)}
.lp-item.on{color:var(--parchment);background:linear-gradient(90deg,rgba(227,139,61,.12),transparent);padding-left:1.1rem}
.lp-item.on .ico{color:var(--ember)}
.lp-item.on .arr{opacity:1;transform:none}
.lp-view{position:relative;min-height:420px;border:1px solid var(--line);overflow:hidden}
.lp-pane{position:absolute;inset:0;background:var(--bg);display:grid;align-content:end;padding:clamp(22px,4vw,44px);opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.2s var(--ease);isolation:isolate}
.lp-pane::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,10,14,.95) 15%,rgba(8,10,14,.3) 65%,transparent)}
.lp-pane.on{opacity:1;transform:none}
.lp-pane .big{position:absolute;right:6%;top:10%;width:min(40%,220px);height:auto;color:rgba(235,225,203,.1);stroke-width:1;z-index:-1}
.lp-pane h3{font-family:var(--f-display);font-size:clamp(2rem,4vw,3rem);line-height:1}
.lp-pane p{margin-top:12px;color:var(--dim);max-width:44ch;font-size:var(--t-md)}
.lp-pane .slot{position:absolute;left:14px;top:12px;font-family:var(--f-label);letter-spacing:.12em;font-size:var(--t-xs);color:rgba(235,225,203,.55)}
.lp-pane.on h3,.lp-pane.on p{animation:paneIn .8s var(--ease) both}
.lp-pane.on p{animation-delay:.12s}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Gemalte Platzhalter. Eigenes Bild: style="--bg:url('bilder/datei.jpg') center/cover" am .lp-pane */
.lp-pane.bg-koop {--bg:radial-gradient(ellipse 70% 50% at 50% 85%,rgba(227,139,61,.45),transparent 70%),linear-gradient(180deg,#1a1410,#0e0b09)}
.lp-pane.bg-bau  {--bg:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 40px),linear-gradient(180deg,#2c3140,#191c24 70%,#3a1d10)}
.lp-pane.bg-gef  {--bg:radial-gradient(circle at 30% 75%,rgba(227,139,61,.45),transparent 45%),linear-gradient(200deg,#141a26,#251c16)}
.lp-pane.bg-nacht{--bg:radial-gradient(circle at 75% 20%,rgba(235,225,203,.22),transparent 12%),linear-gradient(180deg,#05070c,#141c2c 70%,#2a1a14)}
.lp-pane.bg-wint {--bg:linear-gradient(180deg,#9aa7b4 0%,#5f6b76 45%,#1b2028 100%)}
.lp-pane.bg-stein{--bg:radial-gradient(circle at 50% 60%,rgba(166,220,211,.38),transparent 45%),linear-gradient(180deg,#0a1119,#05080c)}

/* ===== SOLO-ENTWICKLER ===== */
.dev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(36px,6vw,100px);align-items:start}
.dev-stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.ds{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.85rem 1.1rem;background:rgba(12,15,21,.85)}
.ds-label{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xs);color:var(--stone)}
.ds-val{font-weight:700;font-variant-numeric:tabular-nums}
.ds-val.hot{color:var(--ember)}
.callout{border-left:2px solid var(--ember);padding:1.3rem 1.6rem;background:linear-gradient(180deg,rgba(227,139,61,.1),rgba(227,139,61,.03));font-style:italic;font-size:var(--t-md);max-width:58ch;margin-top:22px}
.callout strong{color:var(--ember);font-style:normal}
.dev-lead{font-size:clamp(1.15rem,1.8vw,1.4rem);margin-top:18px}
.dev-lead em{color:var(--ember);font-style:normal;font-weight:700}

/* ===== SYSTEMANFORDERUNGEN ===== */
.band.bg-spiel{--bg:radial-gradient(ellipse 60% 50% at 20% 80%,rgba(227,139,61,.2),transparent 70%),linear-gradient(170deg,#1a2130,#141619 60%,#1d150f)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-family:var(--f-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-xs);color:var(--stone);text-align:left;padding:.8rem 1rem;border-bottom:1px solid rgba(227,139,61,.5);white-space:nowrap}
.tbl td{padding:1rem;border-bottom:1px solid var(--line);vertical-align:baseline}
.tbl tbody tr{transition:background .3s}
.tbl tbody tr:hover{background:linear-gradient(90deg,rgba(227,139,61,.1),transparent 80%)}
.tbl .k{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xs);color:var(--stone)}
.tbl .hot{color:var(--ember)}
.tbl-panel{background:rgba(12,15,21,.6);border:1px solid var(--line)}
.req th:nth-child(n+2),.req td:nth-child(n+2){width:38%}
.req th.rec{color:var(--ember)}
.req td strong{font-weight:500}
.req .rec-cell{background:linear-gradient(90deg,rgba(227,139,61,.07),transparent)}
@media (max-width:620px){
  .req thead{display:none}
  .req,.req tbody,.req tr,.req td{display:block;width:auto!important}
  .req tr{border-bottom:1px solid var(--line);padding:.6rem 0}
  .req td{border:0;padding:.3rem 1rem;display:flex;justify-content:space-between;gap:16px;text-align:right}
  .req td:first-child{padding-top:.6rem;text-align:left}
  .req td[data-label]::before{content:attr(data-label);font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xs);color:var(--stone);text-align:left;flex:none}
  .req td.rec-cell[data-label]::before{color:var(--ember)}
}

/* ===== GALERIE: Schaukasten ===== */
img{display:block;max-width:100%}
.ctrl{background:rgba(12,15,21,.6);border:1px solid rgba(235,225,203,.3);width:46px;height:46px;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,background .2s;font-size:1.1rem;flex:none}
.ctrl:hover{border-color:var(--ember);color:var(--ember);background:rgba(227,139,61,.1)}
.show{display:grid;gap:14px}
.sh-main{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border:1px solid var(--line);background:#07090d;touch-action:pan-y}
.sh-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.sh-main img.on{opacity:1;animation:kenburns 9s linear both}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.sh-main.paused img.on{animation-play-state:paused}
.sh-cap{position:absolute;left:0;right:0;bottom:0;padding:60px clamp(16px,3vw,32px) clamp(14px,2.5vw,26px);background:linear-gradient(to top,rgba(8,10,14,.92),transparent);display:flex;justify-content:space-between;align-items:end;gap:20px;z-index:1}
.sh-cap h3{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1}
.sh-cap p{color:var(--dim);font-size:var(--t-sm);margin-top:6px}
.sh-cap .txt.swap{animation:capIn .7s var(--ease)}
@keyframes capIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sh-arrows{display:flex;gap:8px}
.sh-thumbs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.sh-thumb{position:relative;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:16/10;overflow:hidden;min-width:0}
.sh-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.7);transition:filter .4s,transform .6s var(--ease)}
.sh-thumb:hover img{filter:brightness(.85)}
.sh-thumb.on img{filter:none;transform:scale(1.04)}
.sh-thumb::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.sh-thumb.on::before{box-shadow:inset 0 0 0 2px var(--ember)}
.sh-thumb i{position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:2;background:var(--ember);transform:scaleX(0);transform-origin:left}
.sh-thumb.on i{animation:prog 6s linear forwards}
.show.paused .sh-thumb.on i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
@media (max-width:720px){.sh-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.sh-arrows{display:none}}

/* ===== WISHLIST: Lagerfeuer ===== */
.label.center{justify-content:center}
.label.center::before{display:none}
/* Großer Steam-Button mit Glutschimmer */
.wl-btn{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  font-family:var(--f-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.95rem;
  padding:1.15rem 2.8rem;color:#1a1009;text-decoration:none;cursor:pointer;border:none;
  background:linear-gradient(180deg,#f2a660,var(--ember) 55%,var(--ember-deep));
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:transform .25s var(--ease),filter .25s}
.wl-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,240,210,.65),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out 1.5s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.wl-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.wl-btn svg{width:18px;height:18px;flex:none}
.wl-glow{filter:drop-shadow(0 0 22px rgba(227,139,61,.35));transition:filter .25s}
.wl-glow:hover{filter:drop-shadow(0 0 34px rgba(227,139,61,.6))}
.wishlist{position:relative;overflow:hidden;text-align:center;padding-block:clamp(90px,13vw,170px)}
.wl-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 100%,rgba(227,139,61,.45),transparent 70%),linear-gradient(180deg,#0c0f15,#1a120c);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%);mask-image:linear-gradient(to bottom,transparent,#000 25%)}
.wl-bg::after{content:"";position:absolute;left:50%;bottom:-120px;width:700px;height:400px;margin-left:-350px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,170,90,.35),transparent 65%);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.7}}
.wishlist canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wishlist .wrap{position:relative;display:grid;justify-items:center;gap:26px}
.wishlist h2{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.95;max-width:14ch}
.wishlist h2 span{color:var(--ember)}
.wishlist .sub{max-width:46ch;color:var(--dim);font-size:var(--t-md)}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px);text-align:left;margin-top:30px;max-width:900px;width:100%}
.reason{border-top:1px solid var(--ember);padding-top:14px;display:grid;gap:6px;align-content:start}
.reason h3{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:var(--t-sm);color:var(--ember)}
.reason p{color:var(--dim);font-size:var(--t-sm)}
@media (max-width:720px){.reasons{grid-template-columns:minmax(0,1fr)}}

/* ===== FAQ: Akkordeon ===== */
.faq-all{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:.55rem 1rem;border:1px solid rgba(227,139,61,.5);font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--parchment);text-decoration:none;transition:background .3s,border-color .3s,box-shadow .3s}
.faq-all span{color:var(--ember);transition:transform .3s var(--ease)}
.faq-all:hover{background:rgba(227,139,61,.12);border-color:var(--ember);box-shadow:0 0 18px rgba(227,139,61,.2)}
.faq-all:hover span{transform:translateX(4px)}
/* Sanfte Staffel: Kinder steigen nacheinander weich aus dem Dunst */
.js [data-reveal="staffel"] > *{
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s ease;
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 110ms);
}
.js [data-reveal="staffel"]:not(.in) > *{opacity:0;transform:translateY(calc(var(--dir,1) * 22px));filter:blur(6px);transition-duration:.5s;transition-delay:0s}
/* Platzhalter für noch unbekannte Antworten: durch echten Text ersetzen */
.ph{font-style:italic;color:var(--ember);background:rgba(227,139,61,.08);border:1px dashed rgba(227,139,61,.55);padding:0 .35em}
a.inl{color:var(--ember);text-underline-offset:3px}
.band.bg-faq{--bg:radial-gradient(ellipse 45% 55% at 8% 40%,rgba(227,139,61,.14),transparent 70%),radial-gradient(ellipse 40% 50% at 95% 80%,rgba(166,220,211,.06),transparent 70%),linear-gradient(180deg,#0e1118,#120f0d)}
.acc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,5vw,80px);align-items:start}
.acc-side{position:sticky;top:calc(var(--nav-h) + 40px)}
.acc-side p.body{margin-top:16px;color:var(--dim);max-width:34ch}
.acc{border-top:1px solid rgba(227,139,61,.5)}
.acc-item{border-bottom:1px solid var(--line);position:relative}
/* Glutstreifen links */
.acc-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;background:linear-gradient(180deg,#ffd29c,var(--ember) 40%,var(--ember-deep));box-shadow:0 0 12px var(--ember-glow);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.acc-item.open::before{transform:none}
/* warmer Schein hinter der offenen Frage */
.acc-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 120% at 0% 30%,rgba(227,139,61,.12),transparent 70%);opacity:0;transition:opacity .8s ease}
.acc-item.open::after{opacity:1}
.acc-q{position:relative;overflow:hidden;z-index:1;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:1.25rem 1rem;background:none;border:0;cursor:pointer;text-align:left;transition:background .4s}
.acc-q:hover{background:linear-gradient(90deg,rgba(227,139,61,.08),transparent 80%)}
/* Lichtstreif, der beim Öffnen einmal über die Frage gleitet */
.acc-q::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,210,156,.16),transparent);transform:skewX(-18deg);opacity:0}
.acc-item.open .acc-q::after{animation:accShine 1.1s var(--ease) .05s}
@keyframes accShine{0%{left:-40%;opacity:1}100%{left:120%;opacity:0}}
.acc-q .gem{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--stone);transition:background .5s,border-color .5s,transform .6s var(--ease)}
.acc-q:hover .gem{border-color:var(--ember);transform:rotate(45deg) scale(1.2)}
.acc-item.open .gem{background:var(--ember);border-color:#ffd29c;transform:rotate(225deg);animation:gemPulse 2.6s ease-in-out .6s infinite}
@keyframes gemPulse{0%,100%{box-shadow:0 0 6px var(--ember-glow)}50%{box-shadow:0 0 16px rgba(227,139,61,.8),0 0 28px rgba(227,139,61,.3)}}
.acc-q span.t{font-size:var(--t-md);font-weight:500;line-height:1.35;transition:color .4s,transform .5s var(--ease)}
.acc-q:hover span.t{transform:translateX(3px)}
.acc-item.open span.t{color:#fff3df}
.acc-q .pm{position:relative;width:16px;height:16px}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--stone);transition:transform .5s var(--ease),background .4s}
.acc-q .pm::after{transform:rotate(90deg)}
.acc-item.open .pm::after{transform:rotate(0deg)}
.acc-item.open .pm::before{transform:rotate(180deg)}
.acc-item.open .pm::before,.acc-item.open .pm::after{background:var(--ember)}
.acc-a{position:relative;z-index:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a > div{overflow:hidden;min-height:0}
/* Antwort wird weich scharf, statt einfach aufzutauchen */
.acc-a p{padding:0 1rem 1.4rem calc(1rem + 9px + 16px);color:var(--dim);max-width:62ch;opacity:0;filter:blur(5px);transform:translateY(-8px);transition:opacity .45s,filter .45s,transform .5s var(--ease)}
.acc-item.open .acc-a p{opacity:1;filter:none;transform:none;transition-duration:.7s,.8s,.7s;transition-delay:.18s}
@media (max-width:860px){.acc-wrap{grid-template-columns:minmax(0,1fr)}.acc-side{position:static}}

/* ==================================================================
   STARTBILD: Aufprall, Aufglühen, Runenlicht
   Ebenen um das Logo:
   .x-…   = Herausgleiten beim Scrollen (--out von 0 bis 1)
   .enter = Aufprall beim ersten Erscheinen (Klasse .go am .hero)
   .float = sanftes Glühen, läuft immer
   ================================================================== */
.hero{--out:0;position:relative;min-height:clamp(620px,calc(100vh - var(--nav-h)),920px);display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(50px,7vh,90px) var(--gutter-r) 120px var(--gutter-l)}
/* Eigenes Hintergrundbild: bilder/hero.jpg (Pfad über --img im HTML änderbar). Fehlt es, ist der dunkle Verlauf zu sehen. */
.hero-bg{--img:none;position:absolute;inset:-6%;z-index:-3;pointer-events:none;
  background-image:var(--img),linear-gradient(180deg,#121722 0%,#1b2130 55%,#151517 100%);background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:translate3d(0,calc(var(--out) * 70px),0) scale(calc(1.04 + var(--out) * .08));will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(12,15,21,.15),rgba(12,15,21,.55)),linear-gradient(to bottom,rgba(12,15,21,.55) 0%,rgba(12,15,21,.15) 45%,rgba(12,15,21,.7) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;z-index:-1;background:linear-gradient(to top,var(--night),transparent);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;justify-items:center;width:100%;max-width:1000px}
.hero .x-sup,.hero .x-logo,.hero .x-low{display:block;width:100%;will-change:transform,opacity}
.hero .enter{will-change:transform,opacity}
.hero .x-low{display:grid;justify-items:center}
.hero .x-logo{position:relative}

.hero .sup{font-family:var(--f-label);font-size:.85rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(235,225,203,.7);margin-bottom:1.4rem}
.hero .sup b{color:var(--ember);font-weight:700}
.hero .logo{margin:0;line-height:.85;font-weight:900}
.hero .enter{display:inline-block;position:relative}
.hero .float{display:inline-block;position:relative;isolation:isolate}
/* Glut hinter dem Logo: eigene Ebene, die nur Deckkraft und Größe ändert.
   Früher pulsierte ein drop-shadow-Filter um das ganze Logo, das musste der Browser in jedem Bild neu berechnen. */
.hero .float::before{content:"";position:absolute;inset:-22% -12%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(227,139,61,.34),rgba(227,139,61,.12) 45%,transparent 72%);
  opacity:.6;animation:heroGlow 3.4s ease-in-out infinite;will-change:opacity,transform}
.hero.calm .float::before{animation-play-state:paused}
.hero .logo-txt{display:inline-block;font-family:var(--f-display);font-weight:900;font-size:clamp(4.6rem,18vw,13rem);line-height:.85;letter-spacing:.02em;padding:0 .05em .06em;
  background:linear-gradient(180deg,#fff6e2 10%,var(--parchment) 45%,#b79a6c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .logo-img{display:block;width:min(820px,88vw);height:auto}
@keyframes heroGlow{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}

.hero .sub{font-family:var(--f-label);font-size:clamp(1.15rem,2.3vw,1.7rem);font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:#fff;margin-top:1.6rem}
.hero .sub b{color:var(--ember);font-size:1.18em;text-shadow:0 0 14px var(--ember-glow)}
.hero .hl{width:70px;height:1px;background:linear-gradient(to right,transparent,var(--ember),transparent);margin:1.8rem auto}
.hero .desc{font-size:clamp(1.1rem,1.8vw,1.35rem);font-style:italic;color:rgba(235,225,203,.85);max-width:34ch;margin-bottom:2.4rem}
.hero .btns{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center}
.hero .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;
  padding:1rem 2.6rem;color:#1a1009;text-decoration:none;cursor:pointer;border:none;
  background:linear-gradient(180deg,#f0a35a,var(--ember) 55%,var(--ember-deep));clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .2s,filter .2s}
.hero .btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.hero .btn.ghost{background:rgba(12,15,21,.35);color:var(--parchment);box-shadow:inset 0 0 0 1px rgba(235,225,203,.35)}
.hero .btn.ghost:hover{background:rgba(227,139,61,.12);box-shadow:inset 0 0 0 1px var(--ember)}
.hero .cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:.5rem;opacity:calc(1 - var(--out) * 4);z-index:1}
.hero .cue span{font-family:var(--f-label);font-size:.8rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(227,139,61,.7)}
.hero .cue i{width:1px;height:36px;background:linear-gradient(to bottom,var(--ember),transparent);animation:heroPulse 1.6s infinite}
@keyframes heroPulse{0%,100%{opacity:.25;transform:scaleY(.7)}50%{opacity:.8;transform:scaleY(1)}}

/* Einflug: vor .go unsichtbar, danach gestaffelt */
.js .hero:not(.go) .enter,.js .hero:not(.go) .e{opacity:0}
.hero.go .e{animation:heroUp 1s var(--ease) var(--d,0s) both}
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Logo in fünf Teile geteilt (Bild: senkrechte Streifen, Schriftzug: Buchstaben), damit es Teil für Teil aufglühen kann */
.hero .slices{position:relative;display:inline-block;width:min(820px,88vw)}
.hero .slices .L{position:absolute;left:0;top:0;width:100%}
.hero .slices .L:first-child{position:relative}
.hero .slices .Lf{display:block}
.hero .slices .Lf img{display:block;width:100%;height:auto;clip-path:inset(-10% calc(100% - (var(--i) + 1) * 20%) -10% calc(var(--i) * 20%))}
.hero .logo-txt.split{background:none;color:inherit;padding:0}
.hero .split .L,.hero .split .Le{display:inline-block}
.hero .split .Lf{display:inline-block;padding:0 .02em .06em;background:linear-gradient(180deg,#fff6e2 10%,var(--parchment) 45%,#b79a6c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Aufglühen: über jedem Teil liegt eine helle, glühende Kopie (.Lg), die nur ein- und ausblendet.
   Ihr Filter ist fest und wird einmal berechnet, animiert wird nur die Deckkraft. */
.hero .Le{position:relative}
.hero .slices .Le{display:block}
.hero .Lg{position:absolute!important;left:0;top:0;width:100%;pointer-events:none;opacity:0;filter:brightness(1.9) drop-shadow(0 0 16px #ffb46a);will-change:opacity}
.hero.go .Lg{animation:heroIgnite 1.9s ease calc(1.05s + var(--i) * .13s) both}
@keyframes heroIgnite{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* kaltes Runenlicht hinter dem Logo, atmet langsam */
@keyframes heroRingIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.hero .rune-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(166,220,211,.22),rgba(120,190,200,.06) 30%,transparent 55%);opacity:0}
.hero.go .rune-glow{animation:heroRingIn 1.8s var(--ease) 1.05s both,heroBreath 5s ease-in-out 2.9s infinite}
@keyframes heroBreath{0%,100%{opacity:1}50%{opacity:.55}}

/* Aufprall: Logo stürzt ein, Druckwelle, Glutblitz, kurzes Beben */
.hero.go .enter{animation:heroSlam 1s cubic-bezier(.55,0,.2,1.35) .3s both}
@keyframes heroSlam{0%{opacity:0;transform:scale(2.8)}55%{opacity:1}100%{opacity:1;transform:none}}
.hero .shock{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;border:2px solid rgba(255,200,140,.9);box-shadow:0 0 30px var(--ember-glow),inset 0 0 30px var(--ember-glow);opacity:0;pointer-events:none;z-index:0}
.hero.go .shock{animation:heroShock 1.3s cubic-bezier(.1,.6,.3,1) .95s both}
@keyframes heroShock{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(4.2)}}
.hero .flash{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,200,140,.4),transparent 55%)}
.hero.go .flash{animation:heroFlash 1s ease-out .95s both}
@keyframes heroFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.hero.go .hero-in{animation:heroShake .45s linear .95s}
@keyframes heroShake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,2px)}}
.hero.go .hero-bg{animation:heroKick 1s ease-out .95s}
@keyframes heroKick{0%{transform:scale(1.04)}18%{transform:scale(1.1)}100%{transform:scale(1.04)}}

/* Herausgleiten: Logo fliegt auf dich zu */
.hero .x-sup{transform:translateY(calc(var(--out) * -60px));opacity:calc(1 - var(--out) * 2.4)}
.hero .x-logo{transform:scale(calc(1 + var(--out) * 1.7));opacity:calc(1 - var(--out) * 1.5)}
.hero .x-low{transform:translateY(calc(var(--out) * 80px)) scale(calc(1 - var(--out) * .1));opacity:calc(1 - var(--out) * 2)}
@media (max-width:620px){.hero .sub{letter-spacing:.14em;font-size:clamp(.82rem,4.1vw,1.05rem)}.hero .btn{padding:.95rem 1.8rem}}
/* Ist das Startbild aus dem Bild gescrollt, ruhen alle Dauer-Animationen darin */
.hero.off *,.hero.off *::before,.hero.off *::after{animation-play-state:paused!important}
/* ===================== Ende STARTBILD ===================== */

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px){
  .nav-links{display:none}
}
@media (max-width:860px){
  .lp{grid-template-columns:minmax(0,1fr)}
  .lp-list{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;border:0;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .lp-list::-webkit-scrollbar{display:none}
  .lp-item{border:1px solid var(--line);grid-template-columns:auto auto;padding:.6rem .9rem}
  .lp-item.on{padding-left:.9rem}
  .lp-item .arr{display:none}
  .lp-view{min-height:340px}
  .dev{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 620px){
  body{font-size:17px}
  .nbtn{padding:.45rem .9rem;letter-spacing:.12em}
}
@media (max-width: 400px){
  .nbtn{padding:.42rem .7rem;letter-spacing:.08em;font-size:.72rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]:not(.in){opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .hero{--out:0!important}
  .js .hero .enter,.js .hero .e,.js .hero .rune-glow{opacity:1!important}
}

/* ==================================================================
   MENÜ, HANDY-MENÜ, WIKI-LEISTE, FOOTER  (gemeinsam für index.html und wiki.html)
   ================================================================== */
.nav-right{display:flex;align-items:center;gap:12px}
.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{right:0;background:var(--ember)}
/* Der Wiki-Punkt bekommt eine kleine Raute, die beim Darüberfahren aufglüht */
.nav-links .wiki-link{display:inline-flex;align-items:center;gap:9px}
.nav-links .wiki-link::before{content:"";width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--ember);transition:background .3s,box-shadow .3s}
.nav-links .wiki-link:hover::before,.nav-links .wiki-link[aria-current="page"]::before{background:var(--ember);box-shadow:0 0 10px var(--ember-glow)}
.nav-links .wiki-link::after{left:16px}
.burger{display:none;position:relative;width:42px;height:38px;flex:none;background:none;border:1px solid rgba(227,139,61,.4);cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--parchment);transition:transform .35s var(--ease),opacity .25s}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:18px}.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:190;max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;
  padding:10px max(24px,var(--gutter-r)) 22px max(24px,var(--gutter-l));
  background:linear-gradient(180deg,var(--oak-bot),#120d08);border-bottom:1px solid rgba(227,139,61,.38);box-shadow:0 20px 40px rgba(0,0,0,.6);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--ease),visibility 0s .5s}
.mnav.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--ease)}
.mnav ul{list-style:none;margin:0;padding:0;display:grid}
.mnav a,.mnav .off{display:flex;align-items:center;gap:12px;padding:.85rem .2rem;border-bottom:1px solid var(--line);font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.92rem;color:var(--dim);text-decoration:none}
.mnav a:hover,.mnav a[aria-current="page"]{color:var(--parchment)}
.mnav a[aria-current="page"]{border-bottom-color:var(--ember)}
.mnav .off{opacity:.5}
.mnav h4{margin:18px 0 2px;font-family:var(--f-label);letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:var(--ember);font-weight:700}
.mnav .dia{--s:22px}
@media (max-width:1180px){.burger{display:block}}
@media (min-width:1181px){.mnav{display:none}}
/* Raute mit Symbol (Wiki-Bereiche) */
.dia{position:relative;flex:none;width:var(--s,26px);height:var(--s,26px);transform:rotate(45deg);border:1px solid rgba(227,139,61,.6);background:radial-gradient(circle,rgba(227,139,61,.1),#0d1016 70%);display:grid;place-items:center;transition:transform .4s var(--ease),box-shadow .4s}
.dia .ico{transform:rotate(-45deg);width:58%;height:58%;color:#ffd29c;transition:transform .4s var(--ease)}
.dia.soon-d{border-color:var(--rune);border-style:dashed}.dia.soon-d .ico{color:var(--rune)}
/* Footer mit Wiki-Leiste */
.site-foot{border-top:1px solid rgba(227,139,61,.3);background:linear-gradient(180deg,#100d0a,#0a0c10)}
.site-foot .wrap{display:grid;gap:26px;padding-block:36px calc(30px + env(safe-area-inset-bottom,0px))}
.wstrip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 40px;align-items:center}
.wstrip-h{font-family:var(--f-display);font-size:1.7rem;line-height:1}
.wstrip-h a{text-decoration:none}
.wstrip-h small{display:block;font-family:var(--f-label);letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;color:var(--ember);margin-bottom:6px}
.wstrip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:4px}
.wstrip ul a,.wstrip ul .off{position:relative;display:inline-flex;align-items:center;gap:12px;padding:.5rem .8rem .5rem .5rem;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;color:var(--dim);text-decoration:none;transition:color .25s}
.wstrip ul a::after{content:"";position:absolute;left:44px;right:12px;bottom:3px;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.wstrip ul a:hover,.wstrip ul a:focus-visible{color:var(--parchment)}
.wstrip ul a:hover::after,.wstrip ul a:focus-visible::after{transform:scaleX(1)}
.wstrip ul a:hover .dia,.wstrip ul a:focus-visible .dia{transform:rotate(135deg);box-shadow:0 0 14px var(--ember-glow)}
.wstrip ul a:hover .dia .ico,.wstrip ul a:focus-visible .dia .ico{transform:rotate(-135deg)}
.wstrip ul .off{opacity:.5}
.wstrip-h a{color:var(--parchment);transition:color .2s}.wstrip-h a:hover{color:var(--ember)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--stone)}
.foot-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-row a{color:var(--stone);text-decoration:none;transition:color .2s}
.foot-row a:hover{color:var(--parchment)}
@media (min-width:1001px){.wstrip ul{grid-template-columns:repeat(3,max-content);column-gap:clamp(20px,4vw,56px)}}
.wstrip ul a,.wstrip ul .off{white-space:nowrap}
@media (max-width:1000px){.wstrip{grid-template-columns:minmax(0,1fr)}}
/* ===================== Ende MENÜ / FOOTER ===================== */