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

/* Layout: Wiki-Unterseite Baupläne. Kopf, Wiki-Leiste und Footer wie wiki.html,
   Inhalt ist der Bauplan-Kodex mit Glutfluss: Kategorien, Liste, Bauplan mit Herstellungsbaum.
   Jeder Bauplan ist direkt verlinkbar: wiki-bauplaene.html#turm. 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}}

/* Grundteile des Kodex */
:root{--panel:rgba(12,15,21,.78)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
mark{background:rgba(227,139,61,.3);color:inherit;padding:0 .06em}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
[data-res="holz"]{--res:#c4935a}[data-res="stein"]{--res:#a9a6a0}[data-res="erz"]{--res:#b07a63}[data-res="leder"]{--res:#c27b4a}
[data-res="faser"]{--res:#b9b37a}[data-res="kohle"]{--res:#8d8f96}[data-res="bretter"]{--res:#d6a76c}[data-res="seil"]{--res:#cdbf8f}[data-res="eisenbarren"]{--res:#a6dcd3}[data-res="naegel"]{--res:#9fb3bd}
/* Kategorie-Farben */
[data-cat="Gebäude"]{--cc:#e38b3d}[data-cat="Waffen"]{--cc:#d96a52}[data-cat="Rüstung"]{--cc:#c9a24a}[data-cat="Werkzeug"]{--cc:#a9a6a0}[data-cat="Material"]{--cc:#a6dcd3}

/* ==================================================================
   KODEX (Eichenholz-Leiste, Liste, Detailansicht)
   ================================================================== */
.cx{display:grid;grid-template-columns:220px minmax(0,270px) 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)}
.side{display:grid;align-content:start;border-right:1px solid rgba(227,139,61,.25);padding-block:14px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--oak-top),var(--oak-bot))}
.side h4{font-family:var(--f-display);font-size:1.6rem;padding:4px 20px 10px}
.search{position:relative;margin:0 14px 12px;display:block}
.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}
.search input::placeholder{color:var(--stone)}
.search input:focus{outline:none;border-color:var(--ember)}
.search svg{position:absolute;left:.6rem;top:50%;width:14px;height:14px;margin-top:-7px;stroke:var(--stone);fill:none;stroke-width:2}
.tabs{display:grid}
.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}
.tab b{font-family:var(--f-body);letter-spacing:0;font-variant-numeric:tabular-nums}
.tab:hover{color:var(--parchment)}
.tab[aria-selected="true"]{color:var(--parchment);border-color:var(--ember);background:rgba(227,139,61,.12)}
.tab[disabled]{opacity:.35;cursor:default}
.side-note{margin:16px 20px 0;padding-top:14px;border-top:1px solid rgba(227,139,61,.2);font-size:.82rem;color:var(--stone);font-style:italic}
.list{border-right:1px solid rgba(227,139,61,.18);padding:12px 0;display:grid;align-content:start;max-height:860px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(227,139,61,.4) transparent}
.lh{padding:.8rem 20px .3rem;font-family:var(--f-label);letter-spacing:.2em;text-transform:uppercase;font-size:.62rem;color:var(--cc,var(--stone))}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:.5rem 14px .5rem 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) * 35ms)}
.row b{display:block;font-size:.98rem;line-height:1.2;font-weight:500}
.row small{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;color:var(--stone)}
.row:hover{background:rgba(235,225,203,.04)}
.row[aria-selected="true"]{border-color:var(--ember);background:linear-gradient(90deg,rgba(227,139,61,.14),transparent)}
.empty{padding:2rem 1rem;text-align:center;color:var(--stone);font-style:italic}
/* Raute mit Symbol */
.dia{position:relative;flex:none;width:var(--s,34px);height:var(--s,34px);transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--cc,var(--res,var(--ember))) 70%,transparent);background:radial-gradient(circle,rgba(227,139,61,.08),#0d1016 70%);display:grid;place-items:center;box-shadow:0 0 0 3px rgba(12,15,21,.6)}
.dia .ico{transform:rotate(-45deg);width:calc(var(--s,34px) * .58);height:calc(var(--s,34px) * .58);color:var(--res,var(--cc,var(--parchment)))}
@keyframes qIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}}

/* Detailansicht */
.detail{padding:clamp(18px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start;min-height:860px;min-width:0}
.detail.swap{animation:qIn .5s var(--ease)}
.d-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.d-top .dia{--s:92px;margin:12px;box-shadow:0 0 0 5px rgba(12,15,21,.7),0 0 0 6px color-mix(in srgb,var(--cc) 40%,transparent),0 0 34px color-mix(in srgb,var(--cc) 25%,transparent)}
.d-top small{font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--cc)}
.d-top h3{font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.8rem);line-height:1}
.d-top p{color:var(--stone);font-size:var(--t-sm);margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.d-top p span{display:inline-flex;align-items:center;gap:6px}
.d-top p .ico{width:16px;height:16px;color:var(--ember)}
.d-text{border-left:2px solid var(--ember);padding:.3rem 0 .3rem 1rem;font-style:italic;font-size:var(--t-md)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 28px}
.blk h5{margin:0 0 8px;font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--ember)}
.need{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.need li > *{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:.32rem .5rem;border:1px solid transparent;background:none;text-align:left;font-size:var(--t-sm);color:var(--dim)}
.need li .ico{width:20px;height:20px;color:var(--res,var(--parchment))}
.need li b{font-variant-numeric:tabular-nums;color:var(--parchment)}
.need li small{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.58rem;color:var(--stone);margin-left:6px}
.need li button{cursor:pointer;border-color:rgba(227,139,61,.25);border-style:dashed}
.need li button:hover{border-color:var(--ember);color:var(--parchment)}
.tot{display:grid;gap:6px}
.tot div{display:grid;grid-template-columns:22px 104px minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:.9rem;color:var(--dim)}
.tot .ico{width:18px;height:18px;color:var(--res)}
.tot .bar{height:5px;background:var(--line);position:relative}
.tot .bar i{position:absolute;inset:0 auto 0 0;width:var(--v);background:color-mix(in srgb,var(--res) 85%,#000);animation:grow .9s var(--ease) both;animation-delay:calc(.15s + var(--k,0) * 70ms)}
.tot b{text-align:right;font-variant-numeric:tabular-nums;color:var(--parchment)}
.tot-sum{margin-top:6px;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--stone)}
.tot-sum b{color:var(--ember);font-family:var(--f-body);letter-spacing:0;font-size:.95rem}
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid rgba(235,225,203,.25)}
.qty button{width:34px;height:32px;background:none;border:0;cursor:pointer;font-size:1.1rem;color:var(--dim)}
.qty button:hover{color:var(--ember);background:rgba(227,139,61,.1)}
.qty output{min-width:38px;text-align:center;font-family:var(--f-display);font-size:1.3rem;color:var(--ember)}
.qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;color:var(--stone)}
.uses{display:flex;flex-wrap:wrap;gap:6px}
.use{display:inline-flex;align-items:center;gap:8px;padding:.25rem .7rem .25rem .3rem;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}
.use:hover{border-color:var(--ember);color:var(--parchment)}
.use .dia{--s:22px;margin:4px;box-shadow:none}
.d-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)}
.d-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)}
.flow-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.replay{background:none;border:0;border-bottom:1px solid var(--stone);padding:0 0 2px;cursor:pointer;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xs);color:var(--dim)}
.replay:hover{color:var(--ember);border-color:var(--ember)}

/* ==================================================================
   GLUTFLUSS (aus Musterbuch XIV, für die Detailansicht angepasst)
   ================================================================== */
.flow-stage{position:relative;border:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(227,139,61,.4) transparent;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(227,139,61,.18),transparent 70%),radial-gradient(ellipse 80% 40% at 50% 100%,rgba(80,90,120,.15),transparent 70%),linear-gradient(180deg,#120f0c,#0b0e14)}
.flow{position:relative;margin-inline:auto}
.flow > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow .edge{fill:none;stroke:rgba(227,139,61,.25);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.flow.go .edge{animation:draw .9s var(--ease) forwards;animation-delay:var(--d)}
.flow .stream{fill:none;stroke:url(#flowG);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 14;opacity:0;filter:drop-shadow(0 0 4px rgba(227,139,61,.8))}
.flow.go .stream{animation:fadeIn .6s forwards,stream 1.2s linear infinite;animation-delay:var(--d2),0s}
@keyframes stream{to{stroke-dashoffset:-20}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.flow .spark{fill:#ffe2b8;opacity:0}
.flow.go .spark{animation:fadeIn .4s forwards;animation-delay:var(--d2)}
.fnode{position:absolute;transform:translate(-50%,-50%);width:96px;display:grid;justify-items:center;gap:3px;padding:9px 6px 8px;text-align:center;border:1px solid var(--line);background:var(--panel);opacity:0;font:inherit;color:inherit}
.flow.go .fnode{animation:rise .7s var(--ease) forwards;animation-delay:var(--d)}
@keyframes rise{from{opacity:0;transform:translate(-50%,-30%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fnode .ico{width:28px;height:28px;color:var(--res,var(--parchment))}
.fnode b{font-family:var(--f-label);letter-spacing:.04em;font-size:.74rem;line-height:1.15}
.fnode small{font-family:var(--f-label);letter-spacing:.08em;text-transform:uppercase;font-size:.56rem;color:var(--stone)}
.fnode .q{position:absolute;top:-11px;right:-10px;min-width:30px;padding:0 6px;height:22px;display:grid;place-items:center;background:var(--ember);color:#1a1009;font-family:var(--f-label);font-weight:700;font-size:.7rem;letter-spacing:.04em;border-radius:11px}
.fnode.raw{border-color:color-mix(in srgb,var(--res) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--res) 18%,transparent)}
.fnode.mat{border-style:dashed;border-color:rgba(227,139,61,.5);cursor:pointer}
button.fnode.mat:hover{border-style:solid;border-color:var(--ember)}
.fnode.root{width:140px;padding:14px 10px;border-color:var(--ember);background:linear-gradient(180deg,rgba(227,139,61,.2),rgba(12,15,21,.92))}
.fnode.root .ico{width:46px;height:46px;color:var(--ember-hot)}
.fnode.root b{font-family:var(--f-display);font-size:1.45rem;letter-spacing:0}
.flow.go .fnode.root{animation:rise .7s var(--ease) forwards,forged 2.6s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .7s)}
@keyframes forged{0%,100%{box-shadow:0 0 0 rgba(227,139,61,0)}50%{box-shadow:0 0 40px rgba(227,139,61,.55),0 0 0 6px rgba(227,139,61,.12)}}
.row-lbl{position:absolute;left:10px;font-family:var(--f-label);letter-spacing:.2em;text-transform:uppercase;font-size:.58rem;color:var(--stone);transform:translateY(-50%)}
.flow-hint{font-size:.82rem;color:var(--stone);font-style:italic}
/* ===================== Ende GLUTFLUSS ===================== */

@media (max-width:1080px){.cx{grid-template-columns:190px minmax(0,230px) minmax(0,1fr)}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .cx{grid-template-columns:minmax(0,1fr)}
  .side{border-right:0;border-bottom:1px solid rgba(227,139,61,.25);padding:12px 0 0}
  .side h4,.side-note{display:none}
  .tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{border-left:0;border-bottom:2px solid transparent;padding:.7rem .8rem;font-size:.72rem;letter-spacing:.08em;flex:none}
  .tab[aria-selected="true"]{border-color:var(--ember)}
  .list{display:flex;overflow-x:auto;max-height:none;border-right:0;border-bottom:1px solid rgba(227,139,61,.18);padding:12px 8px;gap:2px;scrollbar-width:none}
  .lh{display:none}
  .row{flex:none;width:auto;grid-template-columns:auto;justify-items:center;text-align:center;gap:10px;padding:.7rem .6rem;border-left:0;border-bottom:2px solid transparent}
  .row[aria-selected="true"]{border-color:var(--ember);background:linear-gradient(0deg,rgba(227,139,61,.14),transparent)}
  .row small{display:none}
  .row b{font-size:.78rem;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .detail{min-height:0}
  .d-top{gap:20px}.d-top .dia{--s:70px;margin:10px}
  .fnode{width:84px;padding:7px 4px}.fnode .ico{width:22px;height:22px}.fnode b{font-size:.66rem}.fnode.root{width:112px}.fnode.root b{font-size:1.15rem}.row-lbl{display:none}
}

/* ==================================================================
   BAUPLAN-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}}
.detail{scroll-margin-top:calc(var(--nav-h) + 64px)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}html{scroll-behavior:auto}}