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

/* Layout: Wiki-Übersicht. Derselbe Kopf wie die index.html (Menüpunkt „Wiki“ aktiv), darunter eine feste Wiki-Leiste,
   dann der Wegweiser zu den Unterseiten wiki-*.html. Bewusst nur dunkles Theme, Tokens identisch mit der index.html. */
: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="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 ===================== */

/* ==================================================================
   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="page"]{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="page"]{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}

/* ===== WEGWEISER (wie Musterbuch XXIII, Variante 3) =====
   Je Schild: a.arm (Glow) > .swing (Einschwingen) > .board (Holz, Form, Bewegung) */
.sign-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center}
.post{position:relative;display:grid;gap:16px;padding:40px 0 30px;justify-items:center}
.post::before{content:"";position:absolute;left:50%;top:0;bottom:-30px;width:22px;margin-left:-11px;background:repeating-linear-gradient(180deg,transparent 0 18px,rgba(0,0,0,.18) 18px 20px),linear-gradient(90deg,#2a1c11,#4a3320 45%,#2a1c11);border-radius:3px 3px 0 0;box-shadow:0 10px 20px rgba(0,0,0,.5)}
.post::after{content:"";position:absolute;left:50%;top:-12px;width:34px;height:16px;margin-left:-17px;background:#3b2717;clip-path:polygon(50% 0,100% 100%,0 100%)}
.lantern{position:absolute;left:50%;top:var(--ly,40%);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(227,139,61,.28),rgba(227,139,61,.08) 45%,transparent 70%);opacity:0;transition:opacity .6s var(--soft),top .7s var(--soft)}
.post.lit .lantern{opacity:1}
.arm{position:relative;z-index:1;display:block;width:min(320px,86%);height:58px;text-decoration:none;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(227,139,61,0));transition:filter .6s var(--soft);will-change:filter}
.arm.r{margin-left:calc(min(320px,86%) - 30px)}
.arm.l{margin-right:calc(min(320px,86%) - 30px)}
.swing{display:block;height:100%}
.arm.r .swing{transform-origin:0 50%}.arm.l .swing{transform-origin:100% 50%}
.board{position:relative;display:flex;align-items:center;gap:12px;height:100%;padding:0 30px;overflow:hidden;color:#f6e6c6;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 2px,transparent 2px 7px),linear-gradient(180deg,#6a4a2e,#4a321e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,210,156,0);
  transform:rotate(var(--rot,0deg));transform-origin:var(--o) 50%;transition:transform .8s var(--soft),box-shadow .6s var(--soft);will-change:transform}
.arm.r .board{--o:0%;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)}
.arm.l .board{--o:100%;clip-path:polygon(26px 0,100% 0,100% 100%,26px 100%,0 50%);flex-direction:row-reverse;text-align:right}
.board::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 130px at var(--px,50%) var(--py,50%),rgba(255,196,120,.38),transparent 70%);opacity:0;transition:opacity .5s var(--soft)}
.board::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,232,196,.3),transparent);transform:translateX(-170%) skewX(-18deg)}
.board > *{position:relative;z-index:1}
.board b{font-family:var(--f-display);font-size:1.45rem;line-height:1;flex:1;transition:color .5s var(--soft),text-shadow .5s var(--soft)}
.board small{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:#e9c98a;white-space:nowrap;transition:color .5s var(--soft)}
.board .ico{width:22px;height:22px;color:#ffd29c;transition:color .5s var(--soft),filter .5s var(--soft),transform .6s var(--soft)}
.nail{position:absolute!important;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8c09a,#4a3826);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.arm.r .nail{left:11px}.arm.l .nail{right:11px}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible){filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(227,139,61,.55))}
.arm.r:not([aria-disabled="true"]):is(:hover,:focus-visible) .board{transform:rotate(0deg) translateX(10px)}
.arm.l:not([aria-disabled="true"]):is(:hover,:focus-visible) .board{transform:rotate(0deg) translateX(-10px)}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) .board{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,210,156,.35)}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) .board::before{opacity:1}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) .board::after{transform:translateX(360%) skewX(-18deg);transition:transform 1.2s var(--soft)}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) b{color:#fff3dc;text-shadow:0 0 14px rgba(255,180,100,.65)}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) small{color:#ffd29c}
.arm:not([aria-disabled="true"]):is(:hover,:focus-visible) .ico{color:#fff0d6;filter:drop-shadow(0 0 6px rgba(255,170,90,.9));transform:scale(1.12)}
.arm:focus-visible{outline:none}
.arm:focus-visible .board{box-shadow:inset 0 0 0 2px var(--ember-hot)}
.arm[aria-disabled="true"]{cursor:default}
.arm[aria-disabled="true"] .board{filter:grayscale(.75) brightness(.62)}
.arm[aria-disabled="true"] small{color:var(--rune)}
.post.pre .swing{opacity:0}
.post.post-in .swing{animation:swingIn 1.2s var(--soft) both;animation-delay:calc(var(--i) * 120ms)}
@keyframes swingIn{0%{opacity:0;transform:translateY(-14px) rotate(calc(var(--rot) * 5))}60%{opacity:1;transform:rotate(calc(var(--rot) * -.6))}100%{opacity:1;transform:none}}
@media (max-width:860px){
  .sign-wrap{grid-template-columns:minmax(0,1fr)}
  .post{justify-items:start;gap:20px}
  .post::before,.post::after,.lantern{left:30px}
  .arm.l,.arm.r{margin:0 0 0 30px;width:min(340px,calc(100% - 30px))}
  .arm.l .swing{transform-origin:0 50%}
  .arm.l .board{--o:0%;flex-direction:row;text-align:left;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)}
  .arm.l .nail{right:auto;left:11px}
  .board{transform:rotate(calc(var(--rot,0deg) * .35))}
  .arm.l:not([aria-disabled="true"]):is(:hover,:focus-visible) .board,.arm.r:not([aria-disabled="true"]):is(:hover,:focus-visible) .board{transform:rotate(0deg) translateX(8px)}
}
/* ===== Ende WEGWEISER ===== */

/* 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}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}