:root{--ink:#0f0f11;--coal:#17171a;--panel:#1d1d21;--line:#33332f;--gold:#c9a227;--gold2:#e6c968;--ivory:#f6f3ea;--mu:#a9a598;--ok:#5cbf8a;--err:#e5645a;
--serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;--sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ivory);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:.01em}h1{font-size:2.1rem;margin:.2em 0 .6em}h2{font-size:1.5rem;margin:1.8em 0 .6em}h3{font-size:1.15rem;margin:.2em 0 .4em}
a{color:var(--gold2)}p{max-width:72ch}.mu{color:var(--mu);font-size:.9rem}
i.bx{font-size:1.15em;vertical-align:-.15em;margin-right:.35em}
.nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;padding:.7rem clamp(1rem,3vw,2.5rem);background:rgba(15,15,17,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;gap:.7rem;align-items:center;font:600 1.25rem var(--serif);color:var(--gold2);text-decoration:none;letter-spacing:.04em}
.nav nav{display:flex;flex-wrap:wrap;gap:.1rem .3rem;margin-left:auto;font-size:.93rem;align-items:center}
.nav nav a{color:var(--ivory);text-decoration:none;padding:.45rem .7rem;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav nav a:hover{color:var(--gold2)}.nav nav a[aria-current=page]{border-color:var(--gold);color:var(--gold2)}
.wrap{max-width:1120px;margin:0 auto;padding:2.2rem 1.3rem}
.hero{text-align:center;padding:5.5rem 1.2rem 4.5rem;background:radial-gradient(ellipse at 50% 0,rgba(201,162,39,.2),transparent 60%),var(--ink);border-bottom:1px solid var(--line);position:relative}
.hero::after{content:"";display:block;width:140px;height:5px;margin:2.4rem auto 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.hero img{width:150px;filter:drop-shadow(0 8px 30px rgba(201,162,39,.35));animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero h1{font-size:clamp(2.4rem,7vw,4.4rem);margin:1.1rem 0 .4rem;letter-spacing:.06em;font-weight:500}.hero p{color:var(--mu);font:italic 1.2rem var(--serif);margin:0 auto}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:3px;padding:1.1rem 1.3rem;margin:0 0 1.1rem;transition:border-color .2s,transform .2s}
.card:hover{border-left-color:var(--gold)}.card img{max-width:100%;border-radius:2px;display:block}figure.card{margin:0}figcaption{margin-top:.5rem;color:var(--mu);font-size:.9rem}
.card>i.bx:first-child{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--gold);border-radius:50%;color:var(--gold2);font-size:1.4rem;margin:0 0 .7rem}
.stat{font:500 2.6rem/1 var(--serif);color:var(--gold2);margin-bottom:.2rem}
article.card h2{margin:0 0 .2em}
label{display:block;margin:.8rem 0;font-size:.88rem;color:var(--mu)}input,select,textarea{display:block;width:100%;margin-top:.25rem;padding:.6rem .7rem;background:var(--ink);color:var(--ivory);border:1px solid #4a4a44;border-radius:3px;font:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}input[type=checkbox]{display:inline-block;width:auto}
.btn{display:inline-flex;align-items:center;background:linear-gradient(var(--gold2),var(--gold));color:#141416;border:0;padding:.65rem 1.3rem;border-radius:3px;cursor:pointer;font:600 .92rem var(--sans);transition:filter .2s}.btn:hover{filter:brightness(1.1)}
.btn.sm{padding:.3rem .75rem;font-size:.85rem}.btn.ghost{background:none;color:var(--err);border:1px solid var(--err)}.nav .btn i{margin-right:.3rem}
:focus-visible{outline:3px solid var(--ivory);outline-offset:2px}
.msg{padding:.8rem clamp(1rem,3vw,2.5rem);font-size:.95rem}.msg.ok{background:#1b3327;color:var(--ok)}.msg.err{background:#3a2120;color:var(--err)}
.board{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start}
.col{background:var(--coal);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:3px;padding:.7rem;min-height:220px;transition:background .2s}
.col[data-status=doing]{border-top-color:#5a9bd8}.col[data-status=review]{border-top-color:#e0914f}.col[data-status=done]{border-top-color:var(--ok)}
.col h3{display:flex;align-items:center;font-family:var(--sans);font-size:.95rem;margin:.1rem 0 .5rem}.cnt{margin-left:auto;background:var(--panel);border-radius:10px;padding:0 .55rem;font-size:.8rem;color:var(--mu)}
.col.over{background:#242428;outline:1px dashed var(--gold)}
.task{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.65rem .75rem;margin:.55rem 0;cursor:grab;transition:border-color .2s}.task:hover{border-color:var(--gold)}.task.drag{opacity:.35}.task a{text-decoration:none;color:var(--ivory);font-weight:600}
.p-high{border-left:4px solid var(--err)}.p-medium{border-left:4px solid var(--gold)}.p-low{border-left:4px solid #666}
.bar{height:6px;background:#33332f;border-radius:3px;overflow:hidden;margin:.6rem 0 .3rem}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}.tabs a{padding:.35rem .9rem;border:1px solid #4a4a44;border-radius:3px;text-decoration:none;color:var(--ivory);font-size:.9rem}.tabs a.on{background:var(--gold);border-color:var(--gold);color:#141416}
footer.wrap{border-top:1px solid var(--line);margin-top:3rem;text-align:center}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.96)}}
@media(max-width:700px){.nav nav{margin-left:0;width:100%}.hero{padding:3.5rem 1rem 3rem}h1{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* --- Emblem, Mobile --- */
.brand img,.logo{height:40px;width:auto;max-width:60px;object-fit:contain}.hero img{width:auto;max-width:60vw;max-height:170px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--gold2);border-radius:3px;font-size:1.5rem;min-width:44px;min-height:44px;cursor:pointer}.burger i{margin:0}
.task .mv{margin-top:.5rem;padding:.35rem .5rem;font-size:.85rem}
.nav{padding-left:max(clamp(1rem,3vw,2.5rem),env(safe-area-inset-left));padding-right:max(clamp(1rem,3vw,2.5rem),env(safe-area-inset-right))}
input,select,textarea{font-size:16px}
@media(pointer:coarse){.btn,.tabs a{min-height:44px;display:inline-flex;align-items:center}.nav nav a{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:820px){
 .burger{display:inline-flex;align-items:center;justify-content:center}
 .nav nav{display:none;width:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;padding-bottom:.6rem}
 body.menu-open .nav nav{display:flex}
 .nav nav a{padding:.8rem .4rem;border-bottom:1px solid var(--line)}.nav nav a[aria-current=page]{border-bottom-color:var(--gold)}
 .nav nav form{padding:.7rem 0}.nav nav .btn{width:100%;justify-content:center}
 .wrap{padding:1.4rem 1rem}h1{font-size:1.7rem}h2{font-size:1.3rem}
 .hero{padding:3rem 1rem 2.6rem}.hero h1{font-size:2.1rem;letter-spacing:.03em}.hero p{font-size:1.05rem}
 .grid{grid-template-columns:1fr 1fr}.stat{font-size:2rem}
 .board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}.col{scroll-snap-align:start}
 .task{cursor:default}
 table,tbody,tr,td{display:block;width:100%}tr{border-bottom:1px solid var(--line);padding:.5rem 0}td{border:0;padding:.2rem .1rem}tr:nth-child(even) td{background:none}
 .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem}.tabs a{white-space:nowrap}
}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
/* --- Diplomatie --- */
.badge{display:inline-block;padding:.1rem .6rem;border:1px solid #55554d;border-radius:10px;font-size:.78rem;color:var(--ivory)}
.badge.ok{border-color:var(--ok);color:var(--ok)}.badge.gold{border-color:var(--gold);color:var(--gold2)}.badge.warn{border-color:var(--err);color:var(--err)}.badge.off{color:var(--mu)}
img.org{height:56px;width:auto;max-width:90px;object-fit:contain;float:right;margin-left:.8rem}
details.card summary{cursor:pointer;color:var(--gold2)}details.card[open] summary{margin-bottom:.8rem}select[multiple]{height:auto}

/* --- Mitgliederbereich (eigene Seite portal.php) --- */
.who{margin-left:auto;font-size:.9rem}.portal .burger{margin-left:.6rem}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 64px)}
.side{background:var(--coal);border-right:1px solid var(--line);padding:1rem .6rem;position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow:auto}
.side nav{display:flex;flex-direction:column;gap:.15rem}.side a{display:flex;align-items:center;padding:.65rem .8rem;border-radius:3px;color:var(--ivory);text-decoration:none;border-left:3px solid transparent}
.side a:hover{background:#222226;color:var(--gold2)}.side a[aria-current=page]{background:#26261f;color:var(--gold2);border-left-color:var(--gold)}
.side hr{border:0;border-top:1px solid var(--line);margin:.8rem 0}.side form{padding:.4rem .8rem}.side .btn{width:100%;justify-content:center}
@media(max-width:820px){.who{display:none}.portal .burger{margin-left:auto}.shell{display:block}.side{display:none;position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}body.menu-open .side{display:block}}
/* ===== Animationen (respektieren prefers-reduced-motion, s. unten) ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
@keyframes pagein{from{opacity:0}}@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}}@keyframes float{50%{transform:translateY(-9px)}}
@keyframes glow{50%{filter:drop-shadow(0 8px 46px rgba(230,201,104,.65))}}@keyframes slide{from{opacity:0;transform:translateY(-100%)}}
@keyframes fill{from{width:0}}@keyframes pop{40%{transform:scale(1.05)}}@keyframes ruleIn{from{width:0;opacity:0}}@keyframes orb{to{transform:translate(60px,20px) scale(1.15)}}
@keyframes shimmer{to{background-position:200% center}}@keyframes pulseB{50%{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18)}}
body{animation:pagein .45s ease both}body.leaving{opacity:0;transition:opacity .18s ease}
/* Scroll-Einblendung (nur wenn JS aktiv) */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}.js .rv.in{opacity:1;transform:none}
/* Navigation */
.nav{transition:box-shadow .3s,padding .3s}.nav.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.5)}
.nav .logo{transition:transform .5s var(--ease),height .3s}.brand:hover .logo{transform:rotate(-6deg) scale(1.1)}.nav.scrolled .logo{height:34px}
.nav nav>*,.side nav>*{animation:fadeIn .5s var(--ease) calc(var(--i,0)*45ms + .1s) both}
.nav nav a{position:relative}.nav nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}.nav nav a:hover::after{transform:scaleX(1)}
i.bx{transition:transform .3s var(--ease)}a:hover>i.bx,.btn:hover>i.bx{transform:translateY(-2px) scale(1.15)}
.side a{transition:background .2s,color .2s,padding-left .3s var(--ease)}.side a:hover{padding-left:1.15rem}
/* Hero */
.hero>*{position:relative;z-index:1}.hero::before{content:"";position:absolute;top:-80px;left:50%;width:520px;height:260px;margin-left:-260px;background:radial-gradient(ellipse,rgba(201,162,39,.22),transparent 70%);filter:blur(30px);animation:orb 9s ease-in-out infinite alternate}
.hero img{animation:rise 1s var(--ease) both,float 7s ease-in-out 1s infinite,glow 5s ease-in-out infinite}
.hero h1{animation:rise 1s var(--ease) .15s both}.hero p{animation:rise 1s var(--ease) .3s both}.hero::after{animation:ruleIn 1.2s var(--ease) .6s both}
@supports(background-clip:text){.hero h1{background:linear-gradient(100deg,var(--ivory) 30%,var(--gold2) 50%,var(--ivory) 70%) 0 0/200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rise 1s var(--ease) .15s both,shimmer 7s linear 1.5s infinite}}
/* Karten */
.card{position:relative;overflow:hidden;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,39,.25)}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.14),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}.card:hover::before{opacity:1}
.card>i.bx:first-child{transition:transform .4s var(--ease),background .3s,color .3s}.card:hover>i.bx:first-child{transform:rotate(-8deg) scale(1.12);background:var(--gold);color:#141416}
form.card:hover,details.card:hover,.col .card:hover{transform:none}
.card img{transition:transform .6s var(--ease)}figure.card:hover img{transform:scale(1.06)}img.org{transition:transform .4s var(--ease)}.card:hover img.org{transform:scale(1.1) rotate(3deg)}
.stat{transition:text-shadow .3s}.card:hover .stat{text-shadow:0 0 18px rgba(230,201,104,.5)}
/* Buttons, Tabs, Badges */
.btn{position:relative;overflow:hidden;transition:transform .2s var(--ease),filter .2s,box-shadow .3s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,162,39,.3)}.btn:active{transform:scale(.97)}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--ease)}.btn:hover::after{transform:translateX(130%)}
.btn.ghost:hover{background:rgba(229,100,90,.12);box-shadow:none}
.tabs a{transition:transform .2s var(--ease),border-color .2s,background .2s}.tabs a:hover{transform:translateY(-2px);border-color:var(--gold)}
.badge{transition:transform .2s var(--ease)}.badge:hover{transform:scale(1.08)}
input,select,textarea{transition:border-color .2s,box-shadow .25s}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(201,162,39,.22)}
tr td{transition:background .2s}tr:hover td{background:rgba(201,162,39,.07)}
.bar i{animation:fill 1.3s var(--ease) both}
.msg{animation:slide .5s var(--ease) both}
details.card[open]>*:not(summary){animation:fadeIn .35s var(--ease) both}
/* Kanban */
.task{transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}.task:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.4)}.task:active{cursor:grabbing}
.task.drag{transform:rotate(2deg) scale(1.03);box-shadow:0 14px 30px rgba(0,0,0,.6)}.task.pop{animation:pop .45s var(--ease)}.col.over{animation:pulseB 1.2s ease-in-out infinite}
@media(hover:none){.card:hover,.task:hover,.btn:hover,.tabs a:hover{transform:none;box-shadow:none}.card::before{display:none}}
@media(prefers-reduced-motion:reduce){body{animation:none!important}.js .rv{opacity:1!important;transform:none!important}.hero h1{-webkit-text-fill-color:currentColor!important}}