@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(fonts/BigShouldersDisplay-700-latin.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(fonts/BigShouldersDisplay-800-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/Barlow-400-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/Barlow-500-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/Barlow-600-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/JetBrainsMono-400-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(fonts/JetBrainsMono-700-latin.woff2) format("woff2")}

.unterstuetzung-intro{max-width:720px;font-size:18px;color:var(--sand-dim)}
.unterstuetzung-inhalt{display:grid;gap:16px;align-content:start}
.unterstuetzung-inhalt p{margin:0}
.paypal-knopf{justify-self:start;padding:14px 22px;font-size:18px}
.paypal-email{font:600 clamp(16px,3vw,22px) var(--mono);overflow-wrap:anywhere;margin-top:6px!important}
.unterstuetzung-zustimmung{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5}
.unterstuetzung-zustimmung input{flex:none;margin-top:4px}
.spenderliste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.spenderliste li{border:1px solid var(--gold-dk);background:var(--panel-2);padding:12px 18px;font:600 18px var(--cond);color:var(--gold);overflow-wrap:anywhere;max-width:100%}
.geldtopf{border-color:var(--gold-dk)}
.geldtopf-zahlen{display:flex;align-items:flex-start;flex-wrap:wrap;gap:24px 48px}
.geldtopf-zahlen>div{display:grid;gap:6px}
.geldtopf-zahlen b{font:700 24px var(--cond)}
.geldtopf-zahlen small{color:var(--sand-dim)}
.geldtopf-betrag{font:800 clamp(24px,4vw,42px) var(--disp);color:var(--gold);line-height:1.2}
.geldtopf-fortschritt{display:block;width:100%;height:12px;border:0;background:var(--panel-3);accent-color:var(--gold)}
.geldtopf-fortschritt::-webkit-progress-bar{background:var(--panel-3)}
.geldtopf-fortschritt::-webkit-progress-value{background:var(--gold)}
.geldtopf-fortschritt::-moz-progress-bar{background:var(--gold)}
/* Siegel "Foerderer" im Aktenkopf (Spende mit Vermerk in der Akte) */
.foerder-siegel{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border:2px solid;border-radius:999px;
  font:700 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.foerder-siegel::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
.foerder-siegel.bronze{color:#c98a4b;border-color:#8a5a2b}
.foerder-siegel.silber{color:#d6d9de;border-color:#8c9096}
.foerder-siegel.gold{color:var(--gold);border-color:var(--gold-dk)}
.foerder-siegel:hover{text-decoration:none;filter:brightness(1.15)}
/* Unterstuetzen: Kopf "gesichert bis", Betragsknoepfe, Danke-Liste, Fragen */
.sp-kopf .innen{display:grid;gap:18px}
.sp-gesichert{display:grid;gap:4px}
.sp-gesichert strong{font:800 clamp(30px,5.5vw,54px) var(--disp);color:var(--gold);line-height:1;text-transform:uppercase}
.sp-gesichert small{color:var(--sand-dim);font-size:14px}
.sp-betraege,.sp-anzeige{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sp-anzeige{flex-direction:column;align-items:stretch}
.formular .sp-anzeige label.unterstuetzung-zustimmung{flex-direction:row;align-items:center;font-size:15px;color:var(--sand);letter-spacing:0}
.formular .sp-anzeige label input{margin:0}
.sp-betraege legend,.sp-anzeige legend{margin-bottom:8px;padding:0}
.sp-betrag{position:relative;cursor:pointer}
.sp-betrag input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.sp-betrag>span{display:inline-block;min-width:74px;text-align:center;padding:12px 16px;border:1px solid var(--line-2);background:var(--panel-2);
  font:700 20px var(--cond);color:var(--sand)}
.sp-betrag input:checked+span{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.sp-betrag input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.sp-frei{display:flex;align-items:center;gap:8px}
.sp-frei>span{min-width:0;border:0;background:none;padding:0;font-size:15px;color:var(--sand-dim)}
.sp-frei .feld{width:110px}
.sp-frei .feld:focus{outline:none}
.sp-frei.aktiv .feld,.sp-frei .feld:focus{border-color:var(--gold);box-shadow:none;color:var(--gold)}
.sp-frei.aktiv>span{color:var(--gold)}
/* auch ohne Skript: solange im Feld getippt wird, ist kein fester Betrag markiert */
.sp-betraege:has(.sp-frei input:focus) .sp-betrag input:checked+span{border-color:var(--line-2);color:var(--sand);box-shadow:none}
.sp-danke{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sp-danke li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;border:1px solid var(--gold-dk);background:var(--panel-2);padding:12px 16px}
.sp-danke b{font:600 18px var(--cond);color:var(--gold);overflow-wrap:anywhere}
.sp-danke span{font:700 18px var(--cond);color:var(--sand)}
.sp-danke small{grid-column:1/-1;color:var(--sand-dim);font-size:12px}
.sp-fragen{display:grid;gap:10px}
.sp-fragen details{border-bottom:1px solid var(--line);padding-bottom:10px}
.sp-fragen summary{cursor:pointer;font:600 16px var(--cond);color:var(--sand)}
.sp-fragen p{margin:8px 0 0;color:var(--sand-dim);font-size:14.5px;line-height:1.55}
:root{
  color-scheme:dark;
  --ink:#0b0c09; --ink-2:#101208; --panel:#14170f; --panel-2:#1b1f15; --panel-3:#23281b;
  --sand:#d8d1bc; --sand-dim:#9a9682; --sand-far:#5f5d51;
  --gold:#dcae30; --gold-dk:#8a6c1c; --rot:#c8102e; --live:#93b03f; --loss:#b0402e;
  --bronze:#b87a45; --silber:#c4c7bf;
  --line:rgba(216,209,188,.13); --line-2:rgba(216,209,188,.28);
  --disp:"Big Shoulders Display","Barlow Condensed","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --pad:clamp(16px,3.5vw,40px);
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink) radial-gradient(1200px 500px at 50% -120px,#1d2216,transparent) no-repeat;
  color:var(--sand);font-family:var(--body);font-size:16px;line-height:1.55;min-height:100vh}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img,svg{max-width:100%}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim)}
.schale{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* Kopf: static/kopf.css */
main{padding:28px 0 60px}
h1,h2,h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0}
h1{font-size:clamp(34px,6vw,64px)}
h2{font-size:15px;font-family:var(--cond);font-weight:700;letter-spacing:.14em}
.einleitung{color:var(--sand-dim);max-width:62ch;margin:10px 0 0}

/* Tafeln */
.raster{display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr))}
.tafel{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;
  box-shadow:0 18px 40px -26px #000}
.tafel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.tafel>header .label{font-size:10px}
.tafel>.innen{padding:14px;flex:1}
.b12{grid-column:span 12}.b8{grid-column:span 8}.b7{grid-column:span 7}.b6{grid-column:span 6}.b5{grid-column:span 5}.b4{grid-column:span 4}.b3{grid-column:span 3}
@media (max-width:1000px){.b8,.b7,.b6,.b5,.b4{grid-column:span 12}.b3{grid-column:span 6}}
@media (max-width:560px){.b3{grid-column:span 12}}
.mehr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* Kennzahlen */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.kennzahlen>div{background:var(--panel);padding:12px 14px}
.kennzahlen b{display:block;font-family:var(--mono);font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--sand);line-height:1.15}
.kennzahlen small{display:block;font-size:11.5px;color:var(--sand-far)}
@media (max-width:640px){.kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-far);
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:rgba(220,174,48,.04)}
td.r,th.r{text-align:right}
.tabwrap{overflow-x:auto}
.spieler{display:flex;align-items:center;gap:10px;color:var(--sand);font-weight:600;min-width:0}
.spieler:hover{color:var(--gold);text-decoration:none}
.spieler svg{flex:none}
.spieler span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platz{font-family:var(--mono);color:var(--sand-far);width:3ch}
.platz.p1{color:var(--gold)}.platz.p2{color:var(--silber)}.platz.p3{color:var(--bronze)}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sand-far);margin-right:6px}
.punkt.an{background:var(--live);box-shadow:0 0 0 3px rgba(147,176,63,.2)}

/* Reiter */
.reiter{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin:22px 0 16px;overflow-x:auto}
.reiter a{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-dim);
  padding:9px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.reiter a:hover{color:var(--sand);text-decoration:none}
.reiter a[aria-current=page]{color:var(--gold);border-bottom-color:var(--gold)}
.reiter a small{font-family:var(--mono);font-size:11px;color:var(--sand-far);margin-left:6px}

/* Akte */
.aktenkopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:end;padding-bottom:6px}
.bild{position:relative;width:132px;height:132px}
.bild img,.bild .ersatz{width:132px;height:132px;object-fit:cover;background:var(--panel-2);border:1px solid var(--line-2);display:block}
.bild .ersatz{display:grid;place-items:center;font-family:var(--disp);font-size:64px;font-weight:800;color:var(--sand-far)}
.bild .rang{position:absolute;right:-18px;bottom:-14px;width:62px;height:62px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.stempel{display:inline-block;font-family:var(--cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid currentColor;padding:2px 10px;transform:rotate(-2deg);color:var(--gold);font-size:15px}
.zeile{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:12px;color:var(--sand-dim);font-size:14px}
.statusleiste{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;border:1px solid var(--line);
  background:var(--panel);margin-top:22px}
.statusleiste>div{padding:9px 16px;border-right:1px solid var(--line);font-size:14px;display:flex;gap:10px;align-items:center}
.statusleiste>div:last-child{border-right:0}
@media (max-width:700px){.aktenkopf{grid-template-columns:1fr;gap:18px}.statusleiste{grid-template-columns:1fr 1fr}
  .statusleiste>div{border-bottom:1px solid var(--line)}}

.uniform{position:relative;max-width:560px;margin:0 auto;background:#000}
.uniform svg{width:100%;height:auto;display:block}
.knopfzeile{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.knopf{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sand);border:1px solid var(--line-2);padding:6px 12px;background:rgba(0,0,0,.25)}
.knopf:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

.balken{height:6px;background:var(--panel-3);position:relative;overflow:hidden}
.balken>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--gold-dk),var(--gold))}
.balken.ok>i{background:var(--live)}
.fortschritt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;margin:8px 0;font-size:14px}
.fortschritt .balken{grid-column:1/-1}

.rangbox{display:flex;gap:16px;align-items:center}
.rangbox svg{width:84px;height:84px;flex:none}
.rangbox .name{font-family:var(--disp);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1}

.baender{display:flex;flex-wrap:wrap;gap:6px}
.baender svg{width:72px;height:20px;box-shadow:0 2px 4px #0008}
.bandzeile{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.bandzeile:last-child{border-bottom:0}
.bandzeile svg{width:86px;height:24px;box-shadow:0 2px 4px #0008}
.bandzeile .titel{font-weight:600}
.bandzeile .text{font-size:13px;color:var(--sand-dim)}
.sterne{font-family:var(--mono);letter-spacing:2px;color:var(--sand-far);white-space:nowrap}
.sterne .s1{color:var(--bronze)}.sterne .s2{color:var(--silber)}.sterne .s3{color:var(--gold)}
.stufen{display:flex;gap:10px;font-size:12px;color:var(--sand-far);margin-top:3px}
.stufen .ok{color:var(--sand)}

.abzeichenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.abzeichen{text-align:center;padding:12px 8px;border:1px solid var(--line);background:var(--panel-2)}
.abzeichen svg{width:64px;height:64px}
.abzeichen .titel{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;margin-top:6px}
.abzeichen .text{font-size:12.5px;color:var(--sand-dim)}
.abzeichen.nein .titel{color:var(--sand-far)}

.leiter{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.leiter>div{text-align:center;font-size:12px;hyphens:auto;overflow-wrap:anywhere;line-height:1.25;color:var(--sand-far);padding:8px 4px;border:1px solid transparent}
.leiter svg{width:64px;height:64px}
.leiter .erreicht{color:var(--sand)}
.leiter .jetzt{border-color:var(--gold);background:rgba(220,174,48,.06);color:var(--gold)}
.leiter .gesperrt svg{opacity:.35;filter:grayscale(.6)}

.waffe{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.waffe:last-child{border-bottom:0}
.waffe .bildchen{width:96px;height:44px;background:linear-gradient(180deg,#cfc9b6,#9a9482);display:grid;place-items:center;overflow:hidden}
.waffe .bildchen img{max-width:92px;max-height:42px;object-fit:contain}
.waffe .bildchen.leer{background:var(--panel-3)}
.waffe b{font-weight:600}
.waffe small{display:block;color:var(--sand-dim);font-size:12.5px}
.waffe .zahl{font-family:var(--mono);font-size:20px;font-weight:700;text-align:right}
td .bildchen{width:84px;height:36px}
td .bildchen img{max-width:80px;max-height:34px}

.uhr{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:90px}
.uhr i{background:linear-gradient(0deg,var(--gold-dk),var(--gold));min-height:2px;display:block}
.uhr i.nacht{background:linear-gradient(0deg,#2c3a5c,#5d6f8f)}
.uhrachse{display:grid;grid-template-columns:repeat(24,1fr);font-family:var(--mono);font-size:9.5px;color:var(--sand-far);margin-top:4px}
.uhrachse span:nth-child(odd){visibility:hidden}

.hinweis{border:1px dashed var(--line-2);padding:12px 14px;color:var(--sand-dim);font-size:14px;background:rgba(0,0,0,.2)}
.hinweis b{color:var(--sand)}
.paar{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.paar:last-child{border-bottom:0}
.paar span:first-child{color:var(--sand-dim)}
.ergebnis{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ergebnis.sieg{color:var(--live)}.ergebnis.niederlage{color:var(--loss)}
.team{display:inline-flex;align-items:center;gap:6px}
.team i{width:10px;height:10px;display:inline-block}
.fuss{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--sand-far);font-size:13px}
.fuss .schale{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blaettern{display:flex;gap:6px;justify-content:center;margin-top:16px}
.blaettern a,.blaettern span{font-family:var(--mono);font-size:13px;padding:5px 10px;border:1px solid var(--line-2);color:var(--sand)}
.blaettern span{border-color:var(--gold);color:var(--gold)}
.sortierung{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 12px}
.sortierung a{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;
  border:1px solid var(--line-2);color:var(--sand-dim)}
.sortierung a[aria-current=page]{border-color:var(--gold);color:var(--gold)}
.serverkarte{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center}
.punkte{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:13px}
.flagge{width:20px;height:15px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.5);vertical-align:-2px}
.erfolge{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.erfolg{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--line);background:var(--panel-2)}
.erfolg img{width:64px;height:64px;display:block;box-shadow:0 2px 6px #0008}
.erfolg .titel{font-family:var(--cond);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:15px}
.erfolg .text{font-size:13px;color:var(--sand-dim)}
.erfolg.nein .titel{color:var(--sand-far)}
.erfolg.nein img{opacity:.6}
.uniform .tip{cursor:help;outline:none}
.uniform .tip:hover,.uniform .tip:focus-visible{filter:brightness(1.18) drop-shadow(0 0 4px rgba(220,174,48,.7))}
.tipbox{position:fixed;z-index:50;max-width:300px;background:#0f110b;border:1px solid var(--gold-dk);box-shadow:0 10px 30px -8px #000;
  padding:8px 11px;font-size:13.5px;line-height:1.4;color:var(--sand-dim);pointer-events:none}
.tipbox .gross{margin-top:8px;background:radial-gradient(circle at 50% 40%,#2a2e22,#14170f 75%);border:1px solid var(--line);
  padding:10px;display:flex;justify-content:center}
.tipbox .gross svg{display:block;width:240px;max-width:100%;height:auto;max-height:240px}
/* nicht display:none: sonst zeichnen Kopien, die auf ihre Verlaeufe verweisen, nicht */
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.spind{max-width:520px;margin:0 auto;padding:7% 9% 5%;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#8c8870 0%,#615f4f 35%,#33322a 65%,#0c0c0a 100%)}
.spind>svg{display:block;width:100%;height:auto;overflow:visible}
/* jede Uniform ist ein Knopf; beim Darueberfahren schwingt sie am Haken (oben, etwas links der Mitte) aus */
.spind .spind-uniform{cursor:zoom-in;outline:none;transform-box:fill-box;transform-origin:41% 1.5%}
.spind .spind-uniform:hover,.spind .spind-uniform:focus-visible{animation:spind-schwingen 1.6s ease-out;filter:brightness(1.12)}
@keyframes spind-schwingen{0%{transform:rotate(0)}18%{transform:rotate(-3.2deg)}38%{transform:rotate(2.2deg)}
  58%{transform:rotate(-1.3deg)}78%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.spind .spind-uniform:hover,.spind .spind-uniform:focus-visible{animation:none}}
/* Spind mit eingeblendetem Dienstzettel: was fuer die naechste Uniform fehlt und welche Aufgaben offen sind */
.spindraum{display:grid;grid-template-columns:minmax(0,520px) minmax(260px,380px);gap:24px;justify-content:center;align-items:start}
@media (max-width:860px){.spindraum{grid-template-columns:minmax(0,1fr)}}
.dienstzettel{background:linear-gradient(#e9e2c8,#d9d0b0);color:#2a2a20;border-radius:2px;padding:16px 16px 10px;
  box-shadow:0 14px 30px -10px #000c,inset 0 0 0 1px #0002;transform:rotate(.6deg);animation:zettel-ein .6s ease-out both;
  font-size:14px;line-height:1.4;position:relative}
.zettelplatz{padding-top:6px}
.zettelplatz .dienstzettel{transform:none;animation:none}
.dienstzettel::before{content:"";position:absolute;top:-9px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 35% 35%,#e05a4a,#8a1d14);box-shadow:0 2px 3px #0008}
@keyframes zettel-ein{from{opacity:0;transform:translateY(14px) rotate(-1.5deg)}to{opacity:1;transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.dienstzettel{animation:none}}
.dienstzettel .kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#2f3a1c;color:#f3ecd2;margin:-16px -16px 10px;padding:9px 16px;border-bottom:3px solid #1c2410}
.dienstzettel .kopf .label{color:#e3c66a;font-size:12px;letter-spacing:.18em}
.dienstzettel .kopf b{font-family:var(--cond);font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:#fffaf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dienstzettel .abschnitt{padding:8px 0;border-bottom:1px dashed #2a2a2055}
.dienstzettel .abschnitt:last-child{border-bottom:0}
.dienstzettel .titel{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  color:#3d4a1e;display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.dienstzettel .text{color:#4d493a;font-size:13px;margin:0}
.dienstzettel .gesamt{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:6px}
.dienstzettel .balken{background:#2a2a2022}
.dienstzettel .balken i{background:#5d6b2a}
.dienstzettel .balken.ok i{background:#3f7d2a}
.dienstzettel .fortschritt span{color:#3a372b !important}
.dienstzettel .auftraege{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:8px;max-height:460px;overflow:auto}
.dienstzettel .zeile{display:flex;justify-content:space-between;gap:8px;align-items:center}
.dienstzettel .zeile.klein{display:grid;grid-template-columns:1fr auto;margin-top:4px;font-size:12px}
.dienstzettel .xp{color:#7a5a12;font-weight:700}
.aufgabe .stand{font-size:11.5px;color:var(--sand-far);font-weight:400;white-space:nowrap}
.aufgabe .stand.ok{color:var(--live)}
.dienstzettel .erledigt-titel{margin-top:10px;color:#3f6b22}
.dienstzettel .erledigt{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px}
.dienstzettel .erledigt li{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;gap:6px;align-items:baseline}
.dienstzettel .erledigt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dienstzettel .erledigt .haken{color:#3f7d2a;font-weight:700}
.dienstzettel .erledigt .num{font-size:12px;color:#5b5640;white-space:nowrap}
.gattungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.gattung{border:1px solid var(--line);border-left:5px solid var(--gfarbe);background:var(--panel-2);padding:10px 12px;display:grid;gap:6px}
.gattung.haupt{border-color:var(--gold-dk);border-left-color:var(--gfarbe);box-shadow:inset 0 0 0 1px rgba(220,174,48,.25)}
.gattung.leer{opacity:.6}
.gattung .kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gattung .kopf b{font-family:var(--cond);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.gattung .kopf .label{color:var(--gold)}
.gattung .rang{display:flex;justify-content:space-between;gap:8px;color:var(--sand);font-size:14px}
.gattung .rang .num{color:var(--sand-dim);font-size:13px}
.gattung small{color:var(--sand-far);font-size:12px}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.wahlspalte{display:grid;gap:8px;align-content:start}
.wahlspalte h3{margin:0;font-family:var(--cond);font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}
.wahlknopf{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;text-align:left;padding:12px 14px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--sand);font:inherit;cursor:pointer}
.wahlknopf:hover:not([disabled]){border-color:var(--gold-dk)}
.wahlknopf[disabled]{cursor:default}
.wahlknopf .balken{grid-column:1/-1}
.wahlknopf small{grid-column:1/-1;color:var(--gold);font-size:12px}
.wahlknopf.meine{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(220,174,48,.35)}
.wahlknopf.sieger{border-color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}
.uniformgross{position:fixed;inset:0;z-index:45;background:rgba(6,7,5,.94);display:flex;align-items:center;justify-content:center;padding:48px 16px 16px}
.uniformgross .uniform{height:100%;max-width:100%;display:flex;justify-content:center}
.uniformgross .uniform svg{height:100%;width:auto;max-width:100%;display:block}
.uniformgross .zu{position:absolute;top:10px;right:16px}
.tipbox b{display:block;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}

/* Ausbildungsaufgaben */
.aufgaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.aufgabe{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px}
.aufgabe .titel{font:600 16px var(--cond);letter-spacing:.02em;color:var(--sand)}
.aufgabe .text{font-size:13px;color:var(--sand-dim);line-height:1.4}
.aufgabe .haken{width:20px;height:20px;border:1px solid var(--line-2);border-radius:3px;display:grid;place-items:center;font-size:13px;color:#17140a;margin-top:2px}
.aufgabe.ja .haken{background:var(--gold);border-color:var(--gold)}
.aufgabe .xp{font-size:12px;color:var(--gold);white-space:nowrap;margin-top:3px}
.aufgabe:not(.ja) .titel{color:var(--sand-dim)}
.aufgabe.regel{grid-template-columns:1fr auto}.aufgabe.regel .haken{display:none}.aufgabe.regel .titel{color:var(--sand)}
/* Rundenzustand laut Feed */
.zustand{display:inline-block;margin-top:6px;font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sand-dim);border:1px solid var(--line-2);border-radius:3px;padding:2px 8px}
.zustand.an{color:var(--live);border-color:var(--live)}
.sortierung.seasons{margin-bottom:0}

/* Neuigkeiten und Admin */
.beitraege{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.beitrag-karte{overflow:hidden}
.beitrag-karte .beitrag-bild{display:block;width:100%;height:190px;object-fit:cover;border-bottom:1px solid var(--line)}
.beitrag-titel{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;margin:6px 0 8px}
.beitrag-titel a{color:var(--sand)}
.beitrag-karte .beitrag-titel{font-size:24px}
.beitrag-anriss{color:var(--sand-dim);font-size:15px;margin:0 0 10px}
.beitrag .beitrag-bild{display:block;width:100%;max-height:420px;object-fit:cover;border:1px solid var(--line);margin:8px 0 18px}
.beitrag-text{font-size:17px;line-height:1.65;color:var(--sand)}
.beitrag-text p{margin:0 0 14px}
.beitrag-text h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;margin:26px 0 10px}
.beitrag-text h3{font-family:var(--cond);font-weight:700;font-size:19px;margin:20px 0 8px}
.beitrag-text ul{margin:0 0 14px;padding-left:22px}
.beitrag-text li{margin:3px 0}
.beitrag-text blockquote{margin:0 0 14px;padding:8px 14px;border-left:3px solid var(--gold);color:var(--sand-dim);background:rgba(0,0,0,.2)}
.neuigkeit-zeile{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.neuigkeit-zeile:last-child{border-bottom:0}
.neuigkeit-zeile .beitrag-anriss{margin:2px 0 0;font-size:14px}
.formular form,.formular .innen{display:flex;flex-direction:column;gap:12px}
.formular label{display:flex;flex-direction:column;gap:5px;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--sand-dim)}
.feld{background:var(--ink-2);color:var(--sand);border:1px solid var(--line-2);border-radius:3px;padding:8px 10px;font:15px var(--body);width:100%;box-sizing:border-box}
.feld:focus{outline:2px solid var(--gold);outline-offset:1px}
textarea.feld{resize:vertical;min-height:120px;line-height:1.5}
.knopf.haupt{background:var(--gold);color:#17140a;border-color:var(--gold)}
.knopf.haupt:hover{color:#17140a;filter:brightness(1.08)}
.knopf.warn:hover{border-color:var(--loss);color:var(--loss)}
.knopf.klein{font-size:12px;padding:4px 9px}
button.knopf{cursor:pointer;background:transparent}
button.knopf.haupt{background:var(--gold)}
.reihe-knoepfe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.klein{font-size:13px;color:var(--sand-dim);margin:0}
.klein.gut{color:var(--live)}
.fehlermeldung{color:var(--loss)!important;margin:0}
.klein code,.formular code{font-family:var(--mono);font-size:12px;color:var(--sand)}
@media (max-width:600px){.neuigkeit-zeile{grid-template-columns:1fr;gap:2px}}

.saeulen{display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:6px}
.saeulen div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;position:relative}
.saeulen i{display:block;background:var(--gold);opacity:.85;min-height:1px}
.saeulen b{display:block;background:var(--live);min-height:0}
.saeulen div:hover i{opacity:1}
.achse{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--sand-far);margin-top:4px}
.kennzahl-reihe{display:flex;gap:26px;flex-wrap:wrap}
.kennzahl-reihe div b{display:block;font:700 28px var(--mono)}
.kennzahl-reihe div small{color:var(--sand-dim);font-size:13px}
.balkenliste .zeile{display:grid;grid-template-columns:1fr 54px;gap:8px;align-items:center;margin:5px 0;font-size:14px}
.balkenliste .zeile span{position:relative;z-index:0;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balkenliste .zeile span i{position:absolute;inset:0 auto 0 0;z-index:-1;background:rgba(220,174,48,.18)}
.balkenliste .zeile em{font:12px var(--mono);font-style:normal;text-align:right;color:var(--sand-dim)}

/* Stand der Zahlen (templates/_stand.html) */
.stand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0}
.stand .label{letter-spacing:.08em}
.stand time{color:var(--sand)}

/* aufklappbarer Kasten (Besucher: Verlauf) */
details.tafel>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;list-style:none}
details.tafel>summary::-webkit-details-marker{display:none}
details.tafel>summary h2{font-size:15px;letter-spacing:.1em}
details.tafel>summary h2::before{content:"▸ ";color:var(--gold)}
details.tafel[open]>summary h2::before{content:"▾ "}
details.tafel[open]>summary{border-bottom:1px solid var(--line)}

/* Spielersuche unter der Ueberschrift (templates/_suche.html) */
.aktensuche{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px}
.aktensuche label{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.aktensuche div{display:flex;flex:1;max-width:460px;min-width:240px}
.aktensuche input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-2);border-right:0;color:var(--sand);font:inherit;font-size:15px;padding:8px 12px}
.aktensuche input::placeholder{color:var(--sand-far)}
.aktensuche button{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold);color:#14170f;border:0;padding:0 16px;cursor:pointer}
.aktensuche button:hover{filter:brightness(1.1)}
/* Fokus: ein Rahmen um Feld und Knopf zusammen statt nur ums Feld (ragte in den Knopf) */
.aktensuche input:focus-visible{outline:none;border-color:var(--gold)}
.aktensuche div:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.aktensuche button:focus-visible{outline:none}

/* Waffengattung: ? mit Infobox (was zaehlt, mit welchen Waffen) */
.gattung .kopf{position:relative;padding-right:26px}
.g-info{position:absolute;top:0;right:0;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);color:var(--sand-dim);
  font:700 11px/16px var(--mono);text-align:center;cursor:help;background:var(--panel-2)}
.g-info:hover,.g-info:focus{color:var(--gold);border-color:var(--gold);outline:none}
.g-box{display:none;position:absolute;z-index:30;top:24px;right:-4px;width:260px;padding:10px 12px;background:#0f110b;
  border:1px solid var(--gold-dk);box-shadow:0 8px 24px rgba(0,0,0,.6);text-align:left;cursor:default;
  font:400 13px/1.45 var(--body);color:var(--sand);letter-spacing:0;text-transform:none}
.g-box b{display:block;font-family:var(--cond);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.g-box span{display:block}
.g-box .g-wer{margin-top:6px;color:var(--sand-dim)}
.g-info:hover .g-box,.g-info:focus .g-box,.g-info:focus-within .g-box{display:block}
/* Gattungs-Kaesten: nie ueber den Nachbarn laufen; Kopf und Rang umbrechen statt ueberlappen */
.gattungen{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gattung{min-width:0;overflow:visible}
.gattung .kopf{flex-wrap:wrap;align-items:center;row-gap:2px;min-height:20px}
.gattung .kopf b{min-width:0;overflow-wrap:anywhere}
.gattung .kopf .label{order:3;flex-basis:100%}
.gattung .rang{flex-wrap:wrap;row-gap:2px}
.gattung .rang .num{white-space:nowrap;margin-left:auto}
.gattung .balken{min-width:0}

/* Stempel "Unehrenhaft entlassen" (gebannt oder vom 2-Jahres-Filter erfasst), schraeg ueber dem Aktenkopf */
.aktenkopf.entlassen{position:relative}
.entlassen-stempel{position:absolute;z-index:5;top:14px;right:4%;transform:rotate(-11deg);pointer-events:none;
  border:4px double #b0201e;color:#c8241e;padding:8px 18px 9px;text-align:center;background:rgba(20,8,6,.55);
  box-shadow:0 0 0 2px rgba(176,32,30,.35);mix-blend-mode:normal;opacity:.92}
.entlassen-stempel b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.4vw,38px);
  letter-spacing:.08em;text-transform:uppercase;line-height:1}
.entlassen-stempel span{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* "In die Elite entlassen" (Liste in der Verwaltung, kein Bann): gleicher Stempel in Gold */
.entlassen-stempel.elite{border-color:var(--gold);color:var(--gold);background:rgba(20,16,6,.6);box-shadow:0 0 0 2px rgba(220,174,48,.3)}
/* "Musterung nicht bestanden" (zu viele Steam-Bans, beim Verbinden gekickt): Amtsstempel in Blau */
.entlassen-stempel.musterung{border-color:#4f78b3;color:#7fa4dc;background:rgba(8,12,22,.6);box-shadow:0 0 0 2px rgba(79,120,179,.35)}
@media (max-width:700px){.entlassen-stempel{position:relative;top:auto;right:auto;transform:rotate(-4deg);margin:0 auto 6px;
  justify-self:center}}

/* Freiwillige Steam-Discord-Verknuepfung */
.discord-karte{margin-top:10px}
.discord-karte>.innen{display:grid;gap:12px}
.discord-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.discord-kopf>b{font-family:var(--cond);font-size:20px;letter-spacing:.04em}
.discord-zustand{font-size:13px;color:var(--sand-dim)}
.discord-zustand.an{color:var(--live)}
.discord-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.discord-werte>div{display:grid;gap:3px;padding:9px 11px;background:var(--panel-2);border:1px solid var(--line)}
.discord-werte b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.discord-werte small{font-size:12px;color:var(--sand-dim)}
.discord-werte .live{color:var(--live)}
.discord-sprachzeit{margin-top:4px;font:700 24px var(--mono);line-height:1;color:var(--gold)}
.discord-aktion{margin:0}
.discord-code{max-width:720px}
.discord-code>.innen{display:grid;gap:14px}
.discord-schritte{display:grid;gap:8px;margin:0;padding-left:24px;color:var(--sand)}
.discord-schritte code,.discord-code .hinweis code{font-family:var(--mono);color:var(--gold)}
.discord-befehl{padding:18px;text-align:center;background:var(--ink-2);border:1px solid var(--gold-dk)}
.discord-befehl code{font:700 clamp(20px,5vw,34px) var(--mono);color:var(--gold);letter-spacing:.04em;user-select:all}
.discord-warten{margin:0;color:var(--live);font-weight:600}
.discord-erfolg{border-color:var(--live);color:var(--live)}
@media (max-width:700px){.discord-werte{grid-template-columns:1fr}}

/* Besucher: Kasten Heute */
.heute .saeulen.stunden{height:90px}
.heute .saeulen.stunden div.spaeter i{opacity:.25}
.heute .achse{display:flex;justify-content:space-between}
.heute-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:16px}
.heute-raster .label{margin-bottom:8px}

.kennzahl-link{color:inherit;text-decoration:none;display:block}
.kennzahl-link:hover b{color:var(--gold)}
.spieler-zeitraum{margin:4px 0 14px}
.spieler-zeitraum summary{cursor:pointer;color:var(--sand-dim);font-size:14px;margin-bottom:6px}

/* Rangliste: breiter, jede Zeile einzeilig (bei schmalen Bildschirmen seitlich schieben) */
.schale.breit{max-width:1480px}
.rangliste-tabelle th,.rangliste-tabelle td{white-space:nowrap}
.rangliste-tabelle td .spieler span{white-space:nowrap}
/* Halle der Schande: kleiner Stempel je Eintrag, Farben wie die Stempel in der Akte */
.mini-stempel{display:inline-block;font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border:2px solid;white-space:nowrap;transform:rotate(-2deg)}
.mini-stempel.bann{border-color:#b0201e;color:#e0473f}
.mini-stempel.musterung{border-color:#4f78b3;color:#7fa4dc}
.mini-stempel.elite{border-color:var(--gold);color:var(--gold)}
.hallensuche{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;max-width:520px}
.hallensuche input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;background:var(--panel,#14170f);color:var(--sand);border:1px solid rgba(216,209,188,.25)}
.hallensuche button{font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;background:var(--gold);color:#14170f;border:0;cursor:pointer}

/* Umfragen auf /abstimmung */
.umfragen{display:grid;gap:16px;margin-top:20px}
.umfrage-wahl{display:grid;gap:8px}
.umfrage-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:12px 14px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--sand);text-align:left;
  font:600 16px var(--cond);cursor:pointer;overflow:hidden}
.umfrage-option:hover:not(:disabled){border-color:var(--gold)}
.umfrage-option:disabled{cursor:default}
.umfrage-balken{position:absolute;inset:0 auto 0 0;background:rgba(220,174,48,.14);pointer-events:none}
.umfrage-text,.umfrage-zahl{position:relative}
.umfrage-text small{color:var(--gold);font-weight:600}
.umfrage-zahl{color:var(--sand-dim);font-size:14px;white-space:nowrap}
.umfrage-option.meine{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.umfrage-option.sieger .umfrage-balken{background:rgba(220,174,48,.28)}
.umfrage.beendet{opacity:.85}