/* ==================================================================
   STODA · gemeinsame Teile für alle Seiten
   1. Ecken: leicht abgerundete Rahmen (die obere Menüleiste bleibt kantig)
   2. Konto im Menü: Anmelden-Knopf oder Wappen mit Kontomenü
   3. Wappen
   Wird von jeder Seite mit <link rel="stylesheet" href="stoda.css"> geladen.
   ================================================================== */
:root{--r-s:6px;--r-m:10px;--r-l:14px;--soft:cubic-bezier(.22,1,.36,1);--ember-hot:#ffd29c;--err:#e07a62;--ok:#a6dcd3}

/* ===== 1 ECKEN =====
   Rauten, Wappen, Pergament, Holzschilder und die Menüleiste bleiben bewusst kantig. */
/* Startseite */
.lp-view,.sh-main,.tbl-panel,.dev-stats{border-radius:var(--r-l);overflow:clip}
.callout{border-radius:0 var(--r-m) var(--r-m) 0}
.sh-thumb,.sh-thumb::before{border-radius:var(--r-s)}
.faq-all,.ctrl{border-radius:var(--r-s)}
@media (max-width:860px){.lp-item{border-radius:var(--r-s)}}
/* Kodex, Questbuch, FAQ (Wiki-Seiten und faq.html) */
.qb,.cx{border-radius:var(--r-l);overflow:clip}
.ent,.quest,.empty,.qb-empty,.flow-stage,.fnode{border-radius:var(--r-m)}
.flow-stage{overflow-x:auto}
.qb-search input,.search input,.rel,.use,.qty,.need li > *{border-radius:var(--r-s)}
.qty{overflow:clip}
/* Wiki-Übersicht und Aufrufe */
.w-cta .nbtn{border-radius:var(--r-s)}

/* ===== 2 KONTO IM MENÜ ===== */
.acct{position:relative;display:flex;align-items:center}
.acct-in{display:inline-flex;align-items:center;gap:8px;padding:.45rem .95rem;background:none;border:1px solid rgba(227,139,61,.5);border-radius:var(--r-s);cursor:pointer;
  font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:var(--parchment);text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s}
.acct-in:hover{background:rgba(227,139,61,.12);border-color:var(--ember)}
.acct-in svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acct-me{display:inline-flex;align-items:center;gap:10px;padding:3px 10px 3px 3px;background:none;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;color:var(--parchment);transition:border-color .2s,background .2s}
.acct-me:hover,.acct-me[aria-expanded="true"]{border-color:rgba(227,139,61,.45);background:rgba(227,139,61,.08)}
.acct-me .av{--s:32px;transition:transform .4s var(--soft)}
.acct-me:hover .av{transform:scale(1.1) rotate(-4deg)}
.acct-me b{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;font-weight:500;max-width:13ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-me .car{width:8px;height:8px;border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.acct-me[aria-expanded="true"] .car{transform:rotate(225deg) translateY(-2px)}
.acct-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:220;width:270px;padding:8px 0;border:1px solid rgba(227,139,61,.4);border-radius:var(--r-m);overflow:clip;
  background:linear-gradient(180deg,#221810,#120d08);box-shadow:0 20px 40px rgba(0,0,0,.6);
  transform-origin:top right;transform:scale(.96) translateY(-6px);opacity:0;visibility:hidden;transition:transform .3s var(--soft),opacity .25s,visibility 0s .3s}
.acct-menu.open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--soft),opacity .25s}
.acct-menu.open > *{animation:acctRise .45s var(--soft) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes acctRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.acct-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:8px 16px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-head .av{--s:44px}
.acct-head b{display:block;font-family:var(--f-display);font-size:1.2rem;line-height:1.05;overflow-wrap:anywhere}
.acct-head small{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.62rem;color:var(--ember)}
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:.55rem 16px;background:none;border:0;text-align:left;cursor:pointer;color:var(--dim);font:inherit;font-size:.95rem;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a:focus-visible,.acct-menu button:focus-visible{background:rgba(227,139,61,.1);color:var(--parchment);outline:none}
.acct-menu svg{width:18px;height:18px;fill:none;stroke:var(--ember);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acct-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.acct-menu .demo{padding:.4rem 16px 2px;font-size:.72rem;color:var(--stone);font-style:italic}
.acct.swapin > *:first-child{animation:acctRise .5s var(--soft) both}
/* Konto im Handy-Menü */
.mnav-konto{display:grid;margin-bottom:6px}
.mnav-konto .ico{width:18px;height:18px;fill:none;stroke:var(--ember);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mnav-konto .who{display:flex;align-items:center;gap:12px;padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.mnav-konto .who .av{--s:36px}
.mnav-konto .who b{font-family:var(--f-display);font-size:1.15rem;line-height:1}
.mnav-konto .who small{display:block;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;color:var(--ember)}
.mnav-konto button{display:flex;align-items:center;gap:12px;width:100%;padding:.85rem .2rem;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;font-family:var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-size:.92rem;color:var(--dim);text-align:left}
.mnav-konto button:hover{color:var(--parchment)}
@media (max-width:760px){.acct-me b,.acct-me .car{display:none}.acct-me{padding:3px}}
@media (max-width:620px){.acct-in span{display:none}.acct-in{padding:.45rem .55rem}}
/* Schmale Handys: Konto steht dann ganz oben im Handy-Menü */
@media (max-width:480px){.nav .acct{display:none}}

/* ===== GLUTRAHMEN =====
   Rahmen wie die Anmeldekarte: Glutkante, Schatten und ein Lichtstreif, der langsam über die Oberkante wandert.
   Benutzung: class="glutrahmen" am Rahmen und als erstes Kind <span class="glut-kante" aria-hidden="true"></span>.
   --kd verschiebt den Lichtstreif zeitlich, damit nicht alle Rahmen im Gleichschritt leuchten. */
.glutrahmen{position:relative;border:1px solid rgba(227,139,61,.35)!important;border-radius:var(--r-l);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);transition:border-color .5s,box-shadow .5s}
.glutrahmen:hover{border-color:rgba(227,139,61,.55)!important;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 28px rgba(227,139,61,.12)}
.glut-kante{position:absolute;left:0;right:0;top:0;height:1px;z-index:6;pointer-events:none;opacity:.85;
  background:linear-gradient(90deg,transparent,var(--ember-hot),transparent) no-repeat;background-size:35% 100%;animation:glutKante 7s linear infinite;animation-delay:var(--kd,0s)}
@keyframes glutKante{from{background-position:-40% 0}to{background-position:140% 0}}
/* Startseite: Innenflächen wie die Anmeldekarte */
.tbl-panel.glutrahmen{background:linear-gradient(180deg,rgba(28,22,17,.92),rgba(14,12,10,.95))}
.dev-stats.glutrahmen{background:rgba(227,139,61,.16)}
.dev-stats.glutrahmen .ds{background:linear-gradient(180deg,rgba(28,22,17,.95),rgba(16,13,10,.97))}
/* Einrollen beim Scrollen soll den Schatten nicht abschneiden */
.glutrahmen[data-reveal="entrollen"]{clip-path:inset(-80px -80px -80px -80px)}
.js .glutrahmen[data-reveal="entrollen"]:not(.in){clip-path:inset(-80px -80px 100% -80px)}
@media (prefers-reduced-motion: reduce){.glut-kante{animation:none;background-position:50% 0}}

/* Hinweis unten (z. B. „Abgemeldet“) */
.toast{position:fixed;z-index:300;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 40px));visibility:hidden;max-width:calc(100% - 32px);padding:.7rem 1.1rem;border-radius:var(--r-m);background:rgba(26,19,13,.97);border:1px solid rgba(227,139,61,.5);box-shadow:0 14px 30px rgba(0,0,0,.6);font-size:.92rem;color:var(--parchment);transition:transform .45s var(--soft),visibility 0s .45s}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .45s var(--soft)}

/* ===== 3 WAPPEN ===== */
.av{display:inline-block;width:var(--s,40px);flex:none;line-height:0}
.crest{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.crest .rim{fill:none;stroke:#d8b46a;stroke-width:2.5}
.crest .fig{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.crest.pop{animation:crestForge .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes crestForge{0%{transform:scale(.86) rotate(-5deg);filter:brightness(1.9) drop-shadow(0 0 22px rgba(227,139,61,.95))}100%{transform:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}}

@media (prefers-reduced-motion: reduce){.acct-menu,.acct-menu.open > *,.crest.pop{animation:none!important;transition:none!important}}