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

/* Layout: Mitgliederseite. Kopf, Handy-Menü und Footer wie alle anderen Seiten.
   Gemeinsame Teile: stoda.css (Ecken, Kontoleiste, Wappen) und mitglieder.css (Formulare, Bausteine). */
: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 ===================== */
/* 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}}

.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)}