/* STODA · Seiten-Stil: figuren (aus wiki-figurenbuch.html übernommen) */

/* Layout: Wiki-Unterseite Figurenbuch. Kopf, Wiki-Leiste und Footer wie wiki.html,
   Inhalt ist der Kodex (Fassung 2 aus dem Figuren-Questbuch): Rubriken, Namensliste, Steckbrief.
   Jede Figur ist direkt verlinkbar: wiki-figurenbuch.html#wendel. 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)}


/* ==================================================================
   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]{color:#fff}
.nav-links a[aria-current]::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]::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]{color:var(--parchment)}
.mnav a[aria-current]{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 ===================== */
/* ==================================================================
   WIKI-SEITE
   ================================================================== */
:root{--ember-hot:#ffd29c;--soft:cubic-bezier(.22,1,.36,1)}
.ph{font-style:italic;color:var(--ember);border:1px dashed rgba(227,139,61,.55);padding:0 .3em;background:rgba(227,139,61,.08)}
/* Wiki-Leiste unter dem Hauptmenü: bleibt beim Scrollen stehen */
.wbar{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:150;background:rgba(18,13,9,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid rgba(227,139,61,.25)}
.wbar .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:none;padding-left:max(24px,var(--gutter-l));padding-right:max(24px,var(--gutter-r))}
.wbar .wrap::-webkit-scrollbar{display:none}
.wbar a,.wbar .off{flex:none;display:inline-flex;align-items:center;gap:11px;padding:.65rem .85rem;border-bottom:2px solid transparent;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--dim);text-decoration:none;white-space:nowrap;transition:color .25s,border-color .25s}
.wbar a:hover{color:var(--parchment)}
.wbar a:hover .dia{box-shadow:0 0 12px var(--ember-glow)}
.wbar a[aria-current]{color:var(--parchment);border-bottom-color:var(--ember)}
.wbar .off{opacity:.45}
.wbar .wb-title{font-family:var(--f-display);font-size:1.2rem;letter-spacing:0;text-transform:none;color:var(--ember);padding-left:0;margin-right:8px;border-right:1px solid var(--line);border-bottom:0;padding-right:16px}
/* Kopf und Brotkrumen */
.w-hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,70px) clamp(70px,10vw,120px);
  background:radial-gradient(ellipse 50% 60% at 78% 40%,rgba(227,139,61,.12),transparent 70%),radial-gradient(ellipse 40% 50% at 10% 20%,rgba(80,90,120,.18),transparent 70%)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 clamp(26px,4vw,44px);padding:0;list-style:none;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--stone)}
.crumbs li + li::before{content:"›";margin-right:8px;color:var(--ember)}
.crumbs a{color:var(--stone);text-decoration:none}
.crumbs a:hover{color:var(--parchment)}
.crumbs [aria-current]{color:var(--parchment)}
.w-hero h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:.98;margin-top:14px}
.w-hero .lead{margin-top:18px;color:var(--dim);max-width:42ch;font-size:var(--t-md)}
.w-hero .note{margin-top:22px;display:flex;gap:10px;align-items:center;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--stone)}
.w-hero .note .dia{--s:16px}

/* Kleiner Wunschlisten-Aufruf am Ende */
.w-cta{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,90px);text-align:center;background:radial-gradient(ellipse 50% 80% at 50% 100%,rgba(227,139,61,.14),transparent 70%)}
.w-cta .wrap{display:grid;justify-items:center;gap:16px}
.w-cta h2{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.05;max-width:20ch}
.w-cta h2 span{color:var(--ember)}
.w-cta p{color:var(--dim);max-width:46ch}
.w-cta .nbtn{padding:.75rem 1.6rem;font-size:.85rem}

@media (max-width:1180px){.nav-links{display:none}}
@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}}


/* Rubrik-Farben */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
mark{background:rgba(227,139,61,.3);color:inherit;padding:0 .06em}
.ava{display:block;width:100%;height:100%}
[data-rub="bauern"]{--rc:#b8a46a}[data-rub="handwerk"]{--rc:#c4864a}[data-rub="soeldner"]{--rc:#b5513a}[data-rub="haendler"]{--rc:#c9a24a}
[data-rub="kirche"]{--rc:#d8d2c0}[data-rub="jaeger"]{--rc:#7f9a6a}[data-rub="ausgestossen"]{--rc:#a6dcd3}
.ava{display:block;width:100%;height:100%}

/* ==================================================================
   QUESTBUCH-GRUNDTEILE (aus der Roadmap übernommen und erweitert)
   ================================================================== */
.qb{display:grid;grid-template-columns:230px minmax(0,1fr);border:1px solid rgba(227,139,61,.35);background:linear-gradient(180deg,rgba(28,22,17,.9),rgba(14,12,10,.92));box-shadow:0 30px 60px rgba(0,0,0,.45)}
.qb-side{display:grid;align-content:start;border-right:1px solid rgba(227,139,61,.25);padding-block:14px;background:linear-gradient(180deg,var(--oak-top),var(--oak-bot));
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--oak-top),var(--oak-bot))}
.qb-side h4{font-family:var(--f-display);font-size:1.6rem;padding:4px 20px 10px;color:var(--parchment)}
.qb-search{position:relative;margin:0 14px 12px}
.qb-search input{width:100%;background:rgba(12,15,21,.5);border:1px solid rgba(235,225,203,.2);padding:.45rem .7rem .45rem 2rem;font-size:.9rem}
.qb-search input::placeholder{color:var(--stone)}
.qb-search input:focus{outline:none;border-color:var(--ember)}
.qb-search svg{position:absolute;left:.6rem;top:50%;width:14px;height:14px;margin-top:-7px;stroke:var(--stone);fill:none;stroke-width:2}
.qb-tabs{display:grid}
.qb-tab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.6rem 20px;background:none;border:0;border-left:2px solid transparent;cursor:pointer;text-align:left;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;color:var(--stone);transition:color .2s,background .2s,border-color .2s;white-space:nowrap}
.qb-tab b{font-family:var(--f-body);letter-spacing:0;font-weight:700;font-variant-numeric:tabular-nums}
.qb-tab:hover{color:var(--parchment)}
.qb-tab[aria-selected="true"]{color:var(--parchment);border-color:var(--ember);background:rgba(227,139,61,.12)}
.qb-tab[disabled]{opacity:.35;cursor:default}
.qb-list{padding:clamp(14px,2.5vw,26px);display:grid;gap:10px;align-content:start;min-height:520px}
.qb-empty{padding:2rem 1rem;text-align:center;color:var(--stone);font-style:italic;border:1px dashed var(--line)}
/* Bildnis in der Raute */
.dia{position:relative;flex:none;width:var(--s,44px);height:var(--s,44px);transform:rotate(45deg);overflow:hidden;border:1px solid color-mix(in srgb,var(--rc,var(--ember)) 70%,transparent);background:#0d1016;box-shadow:0 0 0 3px rgba(12,15,21,.6)}
.dia > span{position:absolute;inset:-21%;transform:rotate(-45deg)}
.dia .ava{width:100%;height:100%}
.dia.lock{border-color:var(--rune);border-style:dashed;display:grid;place-items:center}
.dia.lock > span{display:grid;place-items:center;font-family:var(--f-display);font-size:calc(var(--s,44px) * .5);color:var(--rune);background:radial-gradient(circle,rgba(166,220,211,.15),transparent 70%)}
.bar{height:4px;background:var(--line);width:min(240px,100%);position:relative;display:block}
.bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v,0%);background:linear-gradient(90deg,var(--ember-deep),var(--ember))}
@keyframes grow{from{width:0}}
@keyframes qIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* Eintrag (wie Quest) */
.ent{border:1px solid var(--line);background:rgba(12,15,21,.55);animation:qIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms);scroll-margin-top:20px}
.ent.hit{animation:qIn .5s var(--ease) both,flash 1.4s ease .4s}
@keyframes flash{30%{border-color:var(--ember);box-shadow:0 0 24px rgba(227,139,61,.35)}}
.e-head{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:.8rem 1rem .8rem 1.1rem;background:none;border:0;cursor:pointer;text-align:left}
.e-title{display:grid;gap:1px;min-width:0}
.e-title small{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;color:var(--rc,var(--stone))}
.e-title b{font-size:var(--t-md);line-height:1.25}
.e-title i{font-size:.85rem;color:var(--stone)}
.e-prog{display:grid;justify-items:end;gap:4px;font-family:var(--f-label);letter-spacing:.1em;font-size:var(--t-xs);color:var(--stone);font-variant-numeric:tabular-nums;text-transform:uppercase}
.e-prog .bar{width:90px}
.e-prog .bar i{animation:grow 1.1s var(--ease) both;animation-delay:calc(.3s + var(--i,0) * 55ms)}
.ent.lock .e-title b{font-style:italic;color:var(--rune)}
.e-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ent.open .e-body{grid-template-rows:1fr}
.e-body > div{overflow:hidden;min-height:0}
.e-inner{padding:.2rem 1.1rem 1.2rem calc(1.1rem + 44px + 18px);display:grid;gap:16px}
.e-inner > blockquote{color:var(--dim);font-style:italic}
.e-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 28px}
.blk h5{margin:0 0 6px;font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--ember);font-weight:700}
.blk p{color:var(--dim);font-size:var(--t-sm)}
/* Eigenschaften wie Teilziele */
.objs{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.objs li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:var(--t-sm);color:var(--dim)}
.objs li::before{content:"";width:11px;height:11px;border:1px solid var(--stone);transform:rotate(45deg);justify-self:center}
.objs li.pos::before{background:var(--ember);border-color:var(--ember)}
.objs li.neg::before{border-color:var(--err);border-style:dashed}
.objs li small{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:var(--stone)}
.objs li.neg small{color:var(--err)}
/* Gaben-Balken */
.gaben{display:grid;gap:5px}
.gb{display:grid;grid-template-columns:72px minmax(0,1fr) 22px;gap:10px;align-items:center;font-size:.88rem;color:var(--dim)}
.gb .bar{width:100%;height:5px}
.gb b{text-align:right;font-variant-numeric:tabular-nums;color:var(--parchment)}
.ent.open .gb .bar i,.cx-detail .gb .bar i{animation:grow .9s var(--ease) both;animation-delay:calc(.15s + var(--k,0) * 70ms)}
.reward{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--stone)}
.reward > span{font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:var(--t-sm);color:var(--ember)}
.rels{display:flex;flex-wrap:wrap;gap:6px}
.rel{display:inline-flex;align-items:center;gap:10px;padding:.25rem .7rem .25rem .35rem;background:rgba(12,15,21,.6);border:1px solid var(--line);cursor:pointer;font-size:.88rem;color:var(--dim);transition:border-color .2s,color .2s}
.rel:hover{border-color:var(--ember);color:var(--parchment)}
.rel .dia{--s:24px;box-shadow:none;margin:4px}
.rel em{font-style:normal;font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.6rem}
.rt-ehe,.rt-familie{color:var(--ember)}.rt-freund,.rt-orden{color:var(--rune)}.rt-rivale{color:var(--err)}.rt-misstrauen{color:var(--stone)}
@media (max-width:760px){
  .qb{grid-template-columns:minmax(0,1fr)}
  .qb-side{border-right:0;border-bottom:1px solid rgba(227,139,61,.25);padding:12px 0 0}
  .qb-side h4{display:none}
  .qb-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .qb-tabs::-webkit-scrollbar{display:none}
  .qb-tab{border-left:0;border-bottom:2px solid transparent;padding:.7rem .8rem;font-size:.72rem;letter-spacing:.08em;flex:none}
  .qb-tab[aria-selected="true"]{border-color:var(--ember)}
  .e-head{gap:14px;padding-inline:.8rem}
  .e-prog .bar{width:56px}
  .e-inner{padding-left:1rem}
  .e-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.e-prog{display:none}.e-head{grid-template-columns:auto minmax(0,1fr)}}
/* ===================== Ende QUESTBUCH-GRUNDTEILE ===================== */

/* ===== Fassung 2: Kodex ===== */
.cx{grid-template-columns:230px minmax(0,300px) minmax(0,1fr)}
.cx-list{border-right:1px solid rgba(227,139,61,.18);padding:12px 0;display:grid;align-content:start;max-height:680px;overflow-y:auto;scrollbar-width:thin}
.cx-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:.55rem 16px .55rem 20px;background:none;border:0;border-left:2px solid transparent;cursor:pointer;text-align:left;transition:background .2s,border-color .2s;animation:qIn .45s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.cx-row .dia{--s:34px}
.cx-row b{display:block;font-size:.98rem;line-height:1.2;font-weight:500}
.cx-row small{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.62rem;color:var(--rc,var(--stone))}
.cx-row:hover{background:rgba(235,225,203,.04)}
.cx-row[aria-selected="true"]{border-color:var(--ember);background:linear-gradient(90deg,rgba(227,139,61,.14),transparent)}
.cx-row.lock b{font-style:italic;color:var(--rune)}
.cx-detail{padding:clamp(18px,3vw,32px);display:grid;gap:18px;align-content:start;min-height:620px}
.cx-detail.swap{animation:qIn .5s var(--ease)}
.cx-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.cx-top .dia{--s:104px;box-shadow:0 0 0 5px rgba(12,15,21,.7),0 0 0 6px color-mix(in srgb,var(--rc,var(--ember)) 40%,transparent),0 0 30px color-mix(in srgb,var(--rc,var(--ember)) 25%,transparent);margin:14px}
.cx-top small{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--rc,var(--stone))}
.cx-top h3{font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.8rem);line-height:1}
.cx-top p{color:var(--stone);font-size:var(--t-sm);margin-top:4px}
.cx-quote{border-left:2px solid var(--ember);padding:.3rem 0 .3rem 1rem;font-style:italic;font-size:var(--t-md)}
.cx-detail .e-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cx-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;color:var(--stone)}
.cx-foot .pager{display:flex;gap:6px}
.ctrl{background:rgba(12,15,21,.6);border:1px solid rgba(235,225,203,.3);width:38px;height:38px;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.ctrl:hover{border-color:var(--ember);color:var(--ember)}
@media (max-width:1060px){.cx{grid-template-columns:200px minmax(0,250px) minmax(0,1fr)}.cx-detail .e-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .cx{grid-template-columns:minmax(0,1fr)}
  .cx .qb-side{border-right:0;border-bottom:1px solid rgba(227,139,61,.25);padding:12px 0 0}
  .cx .qb-side h4{display:none}
  .cx .qb-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .cx .qb-tab{border-left:0;border-bottom:2px solid transparent;padding:.7rem .8rem;font-size:.72rem;letter-spacing:.08em;flex:none}
  .cx .qb-tab[aria-selected="true"]{border-color:var(--ember)}
  .cx-list{display:flex;overflow-x:auto;max-height:none;border-right:0;border-bottom:1px solid rgba(227,139,61,.18);padding:10px 8px;gap:4px;scrollbar-width:none}
  .cx-row{flex:none;width:auto;grid-template-columns:auto;justify-items:center;text-align:center;gap:8px;padding:.6rem .7rem;border-left:0;border-bottom:2px solid transparent}
  .cx-row[aria-selected="true"]{border-color:var(--ember);background:linear-gradient(0deg,rgba(227,139,61,.14),transparent)}
  .cx-row small{display:none}
  .cx-row b{font-size:.8rem;max-width:9ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cx-detail{min-height:0}
  .cx-top{gap:20px}.cx-top .dia{--s:76px;margin:10px}
}


/* ==================================================================
   FIGURENBUCH-SEITE
   ================================================================== */
.f-head{padding-block:clamp(36px,5vw,60px) clamp(26px,4vw,40px);background:radial-gradient(ellipse 50% 90% at 85% 0%,rgba(227,139,61,.12),transparent 70%)}
.f-head .crumbs{margin-bottom:clamp(20px,3vw,32px)}
.f-head .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end}
.f-head h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;margin-top:12px}
.f-head .lead{margin-top:14px;color:var(--dim);max-width:52ch;font-size:var(--t-md)}
.f-head .hint{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;color:var(--stone);max-width:32ch;text-align:right}
.f-body{padding-bottom:clamp(56px,8vw,90px)}
.kodex-wrap{scroll-margin-top:calc(var(--nav-h) + 66px)}
@media (max-width:760px){.f-head .row{grid-template-columns:minmax(0,1fr)}.f-head .hint{text-align:left}}
.cx-detail{scroll-margin-top:calc(var(--nav-h) + 64px)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}