/* ===========================================================================
   BlackStats — Gestaltung
   Haltung: Spielerkarte. Vorbild sind Sportstatistik und Sammelkarte, nicht
   das Verwaltungs-Dashboard. Regeln im Wiki unter "Gestaltung".

   Eine Regel traegt alles: DER AKZENT GEHOERT DEM BETRACHTETEN SPIELER,
   alles Vergleichende ist blau. Damit ist jedes Diagramm ohne Legende lesbar.
   =========================================================================== */

:root {
  --grund:#101319; --flaeche:#171b23; --flaeche2:#1d2230; --linie:#262c38;
  --text:#e8eaf0; --leise:#98a0b3;
  --akzent:#ffb02e; --akzent-weich:#2a2013;
  --zweit:#4aa8ff; --zweit-weich:#132330;
  --gut:#4ad991; --schlecht:#ff6b6b;
  --gold:#ffc861; --silber:#c9d1de; --bronze:#d08c5a;
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rund:3px;
}
:root[data-theme="hell"] {
  --grund:#f7f7f5; --flaeche:#ffffff; --flaeche2:#f0f0ec; --linie:#e3e3de;
  --text:#16181d; --leise:#5f6472;
  --akzent:#b06f00; --akzent-weich:#fdf3e0;
  --zweit:#0a6ebd; --zweit-weich:#e6f1fb;
  --gut:#0f8a52; --schlecht:#c0392b;
}

* { box-sizing:border-box }
html,body { margin:0; padding:0 }
body {
  background:var(--grund); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
.huelle { max-width:1220px; margin:0 auto; padding:0 22px }

/* --- Kopf --- */
.kopf { border-bottom:1px solid var(--linie); background:var(--flaeche); position:sticky; top:0; z-index:20 }
.kopf-inhalt { display:flex; align-items:center; gap:26px; height:56px }
.marke { font-family:var(--mono); font-weight:700; letter-spacing:.04em; font-size:15px }
.marke::before { content:"▮"; color:var(--akzent); margin-right:7px }
#nav { display:flex; gap:2px; flex:1; flex-wrap:wrap }
#nav a {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--leise); padding:7px 11px; border:1px solid transparent; border-radius:var(--rund);
}
#nav a:hover { color:var(--text); background:var(--flaeche2) }
#nav a.aktiv { color:var(--akzent); border-color:var(--linie); background:var(--grund) }
.kopf-rechts { display:flex; align-items:center; gap:8px }
.knopf-klein {
  font-family:var(--mono); font-size:13px; background:var(--flaeche2); color:var(--leise);
  border:1px solid var(--linie); border-radius:var(--rund); padding:5px 9px; cursor:pointer;
}
.knopf-klein:hover { color:var(--text) }
.puls { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px;
        color:var(--leise); letter-spacing:.08em; text-transform:uppercase }
.puls i { width:7px; height:7px; border-radius:50%; background:var(--leise); display:block }
.puls.an i { background:var(--gut) }
.puls.weg i { background:var(--schlecht) }

/* --- Grundbausteine --- */
main { padding-top:26px; padding-bottom:60px; min-height:60vh }
.laden { color:var(--leise); font-family:var(--mono); font-size:13px; padding:40px 0 }
h1 { font-family:var(--mono); font-size:23px; margin:0 0 4px; letter-spacing:-.01em }
h2 { font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
     color:var(--leise); margin:0 0 12px; font-weight:600 }
.unterzeile { color:var(--leise); font-size:13.5px; margin:0 0 22px }

.raster { display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:16px 18px }
.karte.b3 { grid-column:span 3 } .karte.b4 { grid-column:span 4 }
.karte.b6 { grid-column:span 6 } .karte.b8 { grid-column:span 8 }
.karte.b12 { grid-column:span 12 }
@media (max-width:900px){ .karte.b3,.karte.b4,.karte.b6,.karte.b8 { grid-column:span 12 } }

/* --- Spielerkarte: der Kopf des Profils --- */
.spielerkarte {
  display:flex; gap:22px; align-items:flex-start; padding:22px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund);
  border-left:3px solid var(--akzent);
}
.portrait { width:72px; height:72px; flex:0 0 72px; image-rendering:pixelated;
            border:1px solid var(--linie); background:var(--flaeche2) }
.monogramm { width:72px; height:72px; flex:0 0 72px; display:grid; place-items:center;
             font-family:var(--mono); font-size:30px; font-weight:700; color:var(--akzent);
             background:var(--akzent-weich); border:1px solid var(--linie) }
.spielerkarte .wer { flex:1; min-width:0 }
.spielerkarte h1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.marker { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
          padding:3px 7px; border:1px solid var(--linie); color:var(--leise); border-radius:var(--rund) }
.marker.java { color:var(--zweit); border-color:var(--zweit) }
.marker.bedrock { color:var(--gut); border-color:var(--gut) }
.marker.online { color:var(--gut); border-color:var(--gut) }
.leitzahlen { display:flex; gap:34px; margin-top:16px; flex-wrap:wrap }
.leitzahl .wert { font-family:var(--mono); font-size:32px; font-weight:700; line-height:1;
                  font-variant-numeric:tabular-nums; color:var(--akzent) }
.leitzahl .titel { font-family:var(--mono); font-size:10px; letter-spacing:.13em;
                   text-transform:uppercase; color:var(--leise); margin-top:7px }
.leitzahl .rang { font-family:var(--mono); font-size:11px; color:var(--leise); margin-top:2px }

/* --- Vergleichsbalken --- */
.vgl { margin:10px 0 }
.vgl-zeile { display:flex; align-items:center; gap:10px; margin:5px 0 }
.vgl-name { font-family:var(--mono); font-size:11px; color:var(--leise); width:52px; flex:0 0 52px }
.vgl-bahn { flex:1; height:9px; background:var(--flaeche2); border-radius:2px; overflow:hidden }
.vgl-fuell { height:100%; background:var(--akzent); transition:width .45s ease }
.vgl-fuell.schnitt { background:var(--zweit) }
.vgl-wert { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
            width:96px; text-align:right; flex:0 0 96px }

/* --- Tabellen --- */
table { border-collapse:collapse; width:100%; font-size:13.5px }
th { text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.11em;
     text-transform:uppercase; color:var(--leise); padding:9px 10px;
     border-bottom:1px solid var(--linie); white-space:nowrap; cursor:pointer; user-select:none }
th:hover { color:var(--text) }
th.sortiert::after { content:" ↓"; color:var(--akzent) }
td { padding:8px 10px; border-bottom:1px solid var(--linie); vertical-align:middle }
tbody tr:hover td { background:var(--flaeche2) }
tbody tr.ich td { background:var(--akzent-weich) }
.zahl { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }
.name-zelle { display:flex; align-items:center; gap:9px }
.name-zelle img, .name-zelle .mini { width:22px; height:22px; flex:0 0 22px; image-rendering:pixelated;
                                     border:1px solid var(--linie) }
.name-zelle .mini { display:grid; place-items:center; font-family:var(--mono); font-size:11px;
                    color:var(--akzent); background:var(--akzent-weich) }
.leise { color:var(--leise) }
.mono { font-family:var(--mono) }

/* --- Kalender --- */
.kalender { display:flex; gap:3px; overflow-x:auto; padding-bottom:6px }
.kal-woche { display:flex; flex-direction:column; gap:3px }
.kal-tag { width:11px; height:11px; border-radius:2px; background:var(--flaeche2) }
.kal-tag[data-stufe="1"] { background:color-mix(in srgb, var(--akzent) 25%, var(--flaeche2)) }
.kal-tag[data-stufe="2"] { background:color-mix(in srgb, var(--akzent) 50%, var(--flaeche2)) }
.kal-tag[data-stufe="3"] { background:color-mix(in srgb, var(--akzent) 75%, var(--flaeche2)) }
.kal-tag[data-stufe="4"] { background:var(--akzent) }
.kal-legende { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px;
               color:var(--leise); margin-top:8px }
.kal-monate { display:flex; gap:3px; font-family:var(--mono); font-size:9.5px; color:var(--leise);
              margin-bottom:4px }

/* --- Chatverlauf --- */
.chat-zeile { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--linie); font-size:13px }
.chat-zeile:last-child { border-bottom:0 }
.chat-zeit { font-family:var(--mono); font-size:11px; color:var(--leise); flex:0 0 108px }
.chat-art { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
            color:var(--leise); flex:0 0 54px }
.chat-art.befehl { color:var(--zweit) }
.chat-text { word-break:break-word }

/* --- Live-Streifen --- */
.strom { max-height:280px; overflow-y:auto }
.strom-zeile { display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--linie);
               font-size:12.5px; animation:auftauchen .35s ease }
@keyframes auftauchen { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
.strom-zeit { font-family:var(--mono); font-size:11px; color:var(--leise); flex:0 0 62px }

.hinweis { color:var(--leise); font-size:13px; padding:14px 0 }
.fuss { color:var(--leise); font-family:var(--mono); font-size:11px; padding:18px 22px 40px;
        border-top:1px solid var(--linie); margin-top:30px }
.blaettern { display:flex; gap:8px; align-items:center; margin-top:14px }
.blaettern button { font-family:var(--mono); font-size:12px; background:var(--flaeche2);
                    color:var(--text); border:1px solid var(--linie); border-radius:var(--rund);
                    padding:6px 12px; cursor:pointer }
.blaettern button[disabled] { opacity:.4; cursor:default }

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important }
}

/* ===========================================================================
   Zweite Ausbaustufe: Leben und Tiefe
   =========================================================================== */

/* --- Ladeskelette statt "wird geladen" --- */
.skelett { position:relative; overflow:hidden; background:var(--flaeche2); border-radius:var(--rund) }
.skelett::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation:schimmer 1.4s infinite;
}
@keyframes schimmer { from { transform:translateX(-100%) } to { transform:translateX(100%) } }
.skelett-zeile { height:14px; margin:10px 0 }
.skelett-block { height:120px; margin:10px 0 }

/* --- Karten tauchen beim Laden nacheinander auf --- */
.karte, .spielerkarte { animation:karte-auf .4s ease backwards }
.raster > :nth-child(1) { animation-delay:.02s } .raster > :nth-child(2) { animation-delay:.06s }
.raster > :nth-child(3) { animation-delay:.10s } .raster > :nth-child(4) { animation-delay:.14s }
.raster > :nth-child(5) { animation-delay:.18s } .raster > :nth-child(6) { animation-delay:.22s }
.raster > :nth-child(7) { animation-delay:.26s } .raster > :nth-child(8) { animation-delay:.30s }
@keyframes karte-auf { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:none } }

/* --- Der lebendige Puls im Kopf --- */
.puls.an i { animation:pulsschlag 2s infinite }
@keyframes pulsschlag {
  0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--gut) 45%, transparent) }
  50% { box-shadow:0 0 0 5px transparent }
}
.kopf-puls { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px;
             color:var(--leise) }
.kopf-puls .tps { color:var(--gut); font-weight:700 }
.kopf-puls .tps.mittel { color:var(--akzent) }
.kopf-puls .tps.schlecht { color:var(--schlecht) }
.kopf-puls svg { display:block }

/* --- Online-Zeile mit tickender Uhr --- */
.online-zeile { display:flex; align-items:center; gap:9px; padding:7px 0;
                border-bottom:1px solid var(--linie) }
.online-zeile:last-child { border-bottom:0 }
.online-punkt { width:7px; height:7px; border-radius:50%; background:var(--gut); flex:0 0 7px;
                animation:pulsschlag 2.4s infinite }
.online-uhr { margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--leise);
              font-variant-numeric:tabular-nums }

/* --- Rekorde: Podest --- */
.rekord { display:flex; flex-direction:column; gap:5px; padding:12px 0;
          border-bottom:1px solid var(--linie) }
.rekord:last-child { border-bottom:0 }
.rekord-titel { font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
                text-transform:uppercase; color:var(--leise) }
.rekord-zeile { display:flex; align-items:center; gap:8px; font-size:13px }
.rekord-zeile .platz { font-family:var(--mono); font-weight:700; width:20px; flex:0 0 20px }
.rekord-zeile:nth-child(2) .platz { color:var(--gold) }
.rekord-zeile:nth-child(3) .platz { color:var(--silber) }
.rekord-zeile:nth-child(4) .platz { color:var(--bronze) }
.rekord-zeile .wert { margin-left:auto; font-family:var(--mono); font-size:12.5px;
                      font-variant-numeric:tabular-nums }

/* --- Spielstil: Netz --- */
.stil-netz { display:block; margin:0 auto }

/* --- Serien --- */
.serie { display:flex; gap:26px; flex-wrap:wrap }
.serie .block { text-align:center }
.serie .gross { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--akzent);
                font-variant-numeric:tabular-nums }
.serie .klein { font-family:var(--mono); font-size:10px; letter-spacing:.11em;
                text-transform:uppercase; color:var(--leise); margin-top:4px }
.serie .flamme { color:var(--akzent) }

/* --- Stundenraster --- */
.stunden { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px }
.stunden .zelle { aspect-ratio:1; border-radius:2px; background:var(--flaeche2); min-width:0 }
.stunden .zelle[data-stufe="1"] { background:color-mix(in srgb, var(--akzent) 25%, var(--flaeche2)) }
.stunden .zelle[data-stufe="2"] { background:color-mix(in srgb, var(--akzent) 50%, var(--flaeche2)) }
.stunden .zelle[data-stufe="3"] { background:color-mix(in srgb, var(--akzent) 75%, var(--flaeche2)) }
.stunden .zelle[data-stufe="4"] { background:var(--akzent) }
.stunden-beschriftung { display:flex; justify-content:space-between; font-family:var(--mono);
                        font-size:9.5px; color:var(--leise); margin-top:4px }
.stunden-tage { display:grid; grid-template-rows:repeat(7,1fr); gap:2px; font-family:var(--mono);
                font-size:9.5px; color:var(--leise); margin-right:6px; text-align:right }
.stunden-rahmen { display:flex }
.stunden-rahmen > div:last-child { flex:1 }

/* --- Reiter fuer die Aufschluesselungen --- */
.reiter { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap }
.reiter button { font-family:var(--mono); font-size:11px; letter-spacing:.07em;
                 padding:5px 10px; background:var(--flaeche2); color:var(--leise);
                 border:1px solid var(--linie); border-radius:var(--rund); cursor:pointer }
.reiter button[aria-pressed="true"] { color:var(--akzent); border-color:var(--akzent);
                                      background:var(--akzent-weich) }

/* --- Ticker auf der Uebersicht --- */
.ticker-zeile { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--linie);
                font-size:13px; animation:auftauchen .4s ease }
.ticker-zeile .art { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
                     text-transform:uppercase; flex:0 0 74px; padding-top:2px }
.ticker-zeile .art.beitritt { color:var(--gut) }
.ticker-zeile .art.abschied { color:var(--leise) }
.ticker-zeile .art.chat { color:var(--zweit) }
.ticker-zeile .art.erfolg { color:var(--gold) }

/* --- Balkendiagramm-Fuellungen wachsen --- */
.vgl-fuell { transition:width .6s cubic-bezier(.22,.8,.36,1) }

/* ===========================================================================
   Dritte Ausbaustufe: Farbe und Bewegung
   =========================================================================== */

:root {
  /* Sechs Serienfarben fuer Diagramme - kraeftig, aber aufeinander abgestimmt */
  --s1:#ffb02e; --s2:#4aa8ff; --s3:#4ad991; --s4:#c792ea; --s5:#ff7eb6; --s6:#33d6c8;
  --glut:0 0 18px;
}
:root[data-theme="hell"] {
  --s1:#b06f00; --s2:#0a6ebd; --s3:#0f8a52; --s4:#8a3ffc; --s5:#d02670; --s6:#007d79;
}

/* --- Der Grund lebt: ein sehr leiser Farbschimmer, kaum sichtbar, nie still --- */
body::before {
  content:""; position:fixed; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 22%, color-mix(in srgb, var(--s1) 7%, transparent), transparent 70%),
    radial-gradient(38% 30% at 82% 16%, color-mix(in srgb, var(--s2) 6%, transparent), transparent 70%),
    radial-gradient(44% 38% at 70% 85%, color-mix(in srgb, var(--s4) 5%, transparent), transparent 70%);
  animation:treiben 40s linear infinite;
}
@keyframes treiben {
  0%   { transform:rotate(0deg) scale(1) }
  50%  { transform:rotate(180deg) scale(1.12) }
  100% { transform:rotate(360deg) scale(1) }
}
@media (prefers-reduced-motion:reduce) { body::before { animation:none } }

/* --- Karten: farbige Oberkanten je Bereich, Anheben beim Beruehren --- */
.karte { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
         border-top:2px solid transparent }
.karte:hover { transform:translateY(-2px);
               box-shadow:0 8px 22px color-mix(in srgb, #000 28%, transparent);
               border-color:var(--linie) }
.karte[data-farbe="1"] { border-top-color:var(--s1) }
.karte[data-farbe="2"] { border-top-color:var(--s2) }
.karte[data-farbe="3"] { border-top-color:var(--s3) }
.karte[data-farbe="4"] { border-top-color:var(--s4) }
.karte[data-farbe="5"] { border-top-color:var(--s5) }
.karte[data-farbe="6"] { border-top-color:var(--s6) }

/* --- Leitzahlen gluehen leicht --- */
.leitzahl .wert, #online-zahl { text-shadow:var(--glut) color-mix(in srgb, var(--akzent) 40%, transparent) }
.spielerkarte { border-left-width:3px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--akzent) 6%, var(--flaeche)) 0%, var(--flaeche) 45%) }

/* --- Kennzahl-Karten bekommen einen farbigen Zahlenkreis --- */
.kennzahl-farbig .wert-gross { font-family:var(--mono); font-size:29px; font-weight:700;
  line-height:1; font-variant-numeric:tabular-nums }
.kf-1 .wert-gross { color:var(--s1); text-shadow:var(--glut) color-mix(in srgb, var(--s1) 35%, transparent) }
.kf-2 .wert-gross { color:var(--s2); text-shadow:var(--glut) color-mix(in srgb, var(--s2) 35%, transparent) }
.kf-3 .wert-gross { color:var(--s3); text-shadow:var(--glut) color-mix(in srgb, var(--s3) 35%, transparent) }
.kf-4 .wert-gross { color:var(--s4); text-shadow:var(--glut) color-mix(in srgb, var(--s4) 35%, transparent) }

/* --- Ring-Legende --- */
.ring-rahmen { display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.ring-legende { display:flex; flex-direction:column; gap:6px }
.ring-legende .eintrag { display:flex; align-items:center; gap:8px; font-size:13px }
.ring-legende .tupfer { width:10px; height:10px; border-radius:2px; flex:0 0 10px }
.ring-legende .anteil { font-family:var(--mono); font-size:12px; color:var(--leise); margin-left:auto }

/* --- Gezeichnete Linien --- */
@keyframes zeichnen { to { stroke-dashoffset:0 } }
.zeichne-linie { animation:zeichnen 1.1s cubic-bezier(.4,0,.2,1) forwards }
@keyframes einblenden { from { opacity:0 } to { opacity:1 } }
.zeichne-flaeche { animation:einblenden .8s ease .5s backwards }

/* --- Kalenderzellen rieseln herein --- */
.kal-tag { animation:zelle-auf .3s ease backwards }
@keyframes zelle-auf { from { opacity:0; transform:scale(.4) } to { opacity:1; transform:none } }

/* --- Balken faerben nach Serie statt nur Akzent/Blau --- */
.vgl-fuell.s1 { background:var(--s1) } .vgl-fuell.s2 { background:var(--s2) }
.vgl-fuell.s3 { background:var(--s3) } .vgl-fuell.s4 { background:var(--s4) }
.vgl-fuell.s5 { background:var(--s5) } .vgl-fuell.s6 { background:var(--s6) }

/* --- Rekord-Podest schimmert golden beim Auftauchen --- */
.rekord-zeile:nth-child(2) { animation:gold-schimmer 2.4s ease 1 }
@keyframes gold-schimmer {
  0%,100% { background:transparent }
  40% { background:color-mix(in srgb, var(--gold) 10%, transparent) }
}

/* --- TPS-Ampel pulsiert bei Problemen --- */
.kopf-puls .tps.schlecht { animation:alarm 1s infinite }
@keyframes alarm { 50% { opacity:.4 } }

/* --- Navigations-Unterstrich gleitet --- */
#nav a { position:relative }
#nav a::after { content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px;
  background:var(--akzent); transform:scaleX(0); transform-origin:left; transition:transform .22s ease }
#nav a.aktiv::after, #nav a:hover::after { transform:scaleX(1) }

/* ===========================================================================
   Vierte Ausbaustufe: Netz-Ansicht, Besucher, Dauerleben
   =========================================================================== */

/* --- Die Glut der Leitzahlen atmet, dauerhaft --- */
.leitzahl .wert, .kennzahl-farbig .wert-gross { animation:atmen 5s ease-in-out infinite }
@keyframes atmen {
  0%,100% { filter:brightness(1) }
  50% { filter:brightness(1.18) }
}

/* --- Serverkarten auf der Serverseite --- */
.serverkarte { display:flex; flex-direction:column; gap:10px; cursor:pointer }
.serverkarte .kopfzeile { display:flex; align-items:baseline; gap:10px }
.serverkarte .servername { font-family:var(--mono); font-weight:700; font-size:16px }
.serverkarte .zustand { margin-left:auto; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase }
.serverkarte .zustand.frisch { color:var(--gut) }
.serverkarte .zustand.alt { color:var(--leise) }
.serverkarte .zeilen { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:13px }
.serverkarte .zeilen .l { color:var(--leise) }
.serverkarte .zeilen .w { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right }
.serverkarte .funke { height:26px }

/* --- Verbinden-Knopf im Kopf --- */
.verbinden-knopf { font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  background:var(--akzent-weich); color:var(--akzent); border:1px solid var(--akzent);
  border-radius:var(--rund); padding:5px 11px; cursor:pointer }
.verbinden-knopf.verbunden { background:transparent; color:var(--gut); border-color:var(--gut) }

/* --- Wechsel-Pfeil im Ticker --- */
.ticker-zeile .art.wechsel { color:var(--s4) }

/* --- Besucherliste --- */
.os-marke { font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:2px 7px;
  border:1px solid var(--linie); border-radius:var(--rund); color:var(--leise) }

/* ===========================================================================
   Fünfte Ausbaustufe: Modal, Kennzahl-Gitter, Dauerschleifen in Diagrammen
   =========================================================================== */

/* --- Eigenes Popup statt Browser-Prompt --- */
.schleier { position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:color-mix(in srgb, #000 55%, transparent);
  backdrop-filter:blur(3px); animation:einblenden .18s ease }
.modal { width:min(430px, calc(100vw - 40px)); background:var(--flaeche);
  border:1px solid var(--linie); border-top:2px solid var(--akzent);
  border-radius:var(--rund); padding:24px; animation:modal-auf .22s cubic-bezier(.22,.8,.36,1) }
@keyframes modal-auf { from { opacity:0; transform:translateY(14px) scale(.97) } to { opacity:1; transform:none } }
.modal h3 { font-family:var(--mono); font-size:15px; margin:0 0 6px }
.modal p { color:var(--leise); font-size:13.5px; margin:0 0 16px; line-height:1.55 }
.modal code { background:var(--flaeche2); padding:1px 6px; border-radius:2px;
  font-family:var(--mono); font-size:12.5px; color:var(--akzent) }
.modal input { width:100%; box-sizing:border-box; font-family:var(--mono); font-size:19px;
  letter-spacing:.35em; text-align:center; text-transform:uppercase; padding:11px;
  background:var(--grund); color:var(--text); border:1px solid var(--linie);
  border-radius:var(--rund); outline:none }
.modal input:focus { border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 20%, transparent) }
.modal .fehler { color:var(--schlecht); font-size:13px; min-height:18px; margin:8px 0 0 }
.modal .knoepfe { display:flex; gap:10px; justify-content:flex-end; margin-top:16px }
.modal button { font-family:var(--mono); font-size:12.5px; padding:8px 16px; cursor:pointer;
  border-radius:var(--rund); border:1px solid var(--linie); background:var(--flaeche2); color:var(--text) }
.modal button.haupt { background:var(--akzent); border-color:var(--akzent); color:#1a1408; font-weight:700 }
.modal button.haupt:hover { filter:brightness(1.1) }
.modal button[disabled] { opacity:.5; cursor:wait }

/* --- Kennzahl-Gitter mit Kategorien und Suche --- */
.kz-suche { width:100%; box-sizing:border-box; font-family:var(--mono); font-size:13px;
  padding:9px 12px; background:var(--grund); color:var(--text);
  border:1px solid var(--linie); border-radius:var(--rund); outline:none; margin-bottom:14px }
.kz-suche:focus { border-color:var(--akzent) }
.kz-gruppe { margin-bottom:18px }
.kz-gruppe h3 { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--leise); margin:0 0 8px; display:flex; gap:8px; align-items:center }
.kz-gruppe h3::after { content:""; flex:1; height:1px; background:var(--linie) }
.kz-gitter { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:8px }
.kz-zelle { background:var(--grund); border:1px solid var(--linie); border-radius:var(--rund);
  padding:9px 11px; transition:border-color .15s ease, transform .15s ease }
.kz-zelle:hover { border-color:var(--akzent); transform:translateY(-1px) }
.kz-zelle .w { font-family:var(--mono); font-size:16.5px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.15 }
.kz-zelle .n { font-size:11px; color:var(--leise); margin-top:3px; line-height:1.3 }

/* --- Dauerschleifen in den Diagrammen --- */

/* Der Läufer: ein Glühpunkt, der die Kurve entlangfährt — endlos */
.laeufer { animation:laeuferlauf var(--laufzeit, 7s) linear infinite }
@keyframes laeuferlauf {
  0%   { offset-distance:0% }
  100% { offset-distance:100% }
}

/* Der Endpunkt einer Kurve pulsiert */
.endpunkt { transform-box:fill-box; transform-origin:center; animation:endpuls 2.2s ease-in-out infinite }
@keyframes endpuls {
  0%,100% { transform:scale(1); opacity:1 }
  50% { transform:scale(1.8); opacity:.55 }
}

/* Diagrammflächen atmen leise */
.zeichne-flaeche { animation:einblenden .8s ease .5s backwards, flaechen-atmen 7s ease-in-out 2s infinite }
@keyframes flaechen-atmen {
  0%,100% { opacity:1 }
  50% { opacity:.75 }
}

/* Glanzsegment, das langsam um jeden Ring wandert */
.ring-glanz { transform-box:view-box; transform-origin:center; animation:ringlauf 9s linear infinite }
@keyframes ringlauf { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }

/* Balken schimmern: ein Lichtband wandert in Dauerschleife */
.vgl-fuell { position:relative; overflow:hidden }
.vgl-fuell::after { content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-100%); animation:balkenschimmer 3.8s ease-in-out infinite }
@keyframes balkenschimmer {
  0% { transform:translateX(-100%) }
  55%,100% { transform:translateX(100%) }
}

/* Volle Zellen in Kalender und Stundenraster glimmen */
.kal-tag[data-stufe="4"], .stunden .zelle[data-stufe="4"] { animation:zellglimmen 3.2s ease-in-out infinite }
@keyframes zellglimmen {
  0%,100% { filter:brightness(1) }
  50% { filter:brightness(1.45) }
}

/* Das Spielstil-Netz atmet */
.stil-atmung { transform-box:fill-box; transform-origin:center; animation:netzatmen 6s ease-in-out infinite }
@keyframes netzatmen {
  0%,100% { transform:scale(1) }
  50% { transform:scale(1.04) }
}

/* Sparkline-Endpunkte ticken mit */
.spark-punkt { transform-box:fill-box; transform-origin:center; animation:endpuls 2.6s ease-in-out infinite }

@media (prefers-reduced-motion:reduce) {
  .laeufer, .endpunkt, .zeichne-flaeche, .ring-glanz, .vgl-fuell::after,
  .kal-tag[data-stufe="4"], .stunden .zelle[data-stufe="4"], .stil-atmung, .spark-punkt
  { animation:none !important }
}

/* ===========================================================================
   Sechste Ausbaustufe: Führung, Klickbarkeit, neue Formen
   =========================================================================== */

/* --- Abschnittsköpfe gliedern jede Seite --- */
.abschnitt { grid-column:1 / -1; display:flex; align-items:baseline; gap:12px;
  margin:14px 0 -4px; padding-top:8px }
.abschnitt:first-child { margin-top:0 }
.abschnitt .titel { font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase }
.abschnitt .titel::before { content:"▮ "; color:var(--akzent) }
.abschnitt .erklaerung { color:var(--leise); font-size:12.5px }
.abschnitt .linie { flex:1; height:1px; background:var(--linie); align-self:center }

/* --- Klickbares sieht klickbar aus: Chevron + Hover --- */
.klickbar { cursor:pointer; position:relative }
.klickbar::after { content:"→"; position:absolute; top:14px; right:16px;
  font-family:var(--mono); font-size:14px; color:var(--leise); opacity:.45;
  transition:transform .18s ease, opacity .18s ease, color .18s ease }
.klickbar:hover::after { transform:translateX(4px); opacity:1; color:var(--akzent) }
.zeilenlink { cursor:pointer }
.zeilenlink:hover a { color:var(--akzent) }
.mehr-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em; color:var(--leise); margin-top:12px }
.mehr-link:hover { color:var(--akzent) }
.mehr-link::after { content:"→"; transition:transform .18s ease }
.mehr-link:hover::after { transform:translateX(3px) }

/* --- Zurück-Führung auf Detailseiten --- */
.zurueck { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em; color:var(--leise); margin-bottom:10px }
.zurueck::before { content:"←"; transition:transform .18s ease }
.zurueck:hover { color:var(--akzent) }
.zurueck:hover::before { transform:translateX(-3px) }

/* --- Navigation mit kleinen Symbolen --- */
#nav a { display:inline-flex; align-items:center; gap:7px }
#nav a svg { width:13px; height:13px; opacity:.7 }
#nav a.aktiv svg { opacity:1 }

/* --- Trendpfeile --- */
.trend { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono);
  font-size:11px; font-variant-numeric:tabular-nums; padding:2px 7px;
  border-radius:10px; margin-left:8px; vertical-align:middle }
.trend.hoch { color:var(--gut); background:color-mix(in srgb, var(--gut) 14%, transparent) }
.trend.runter { color:var(--schlecht); background:color-mix(in srgb, var(--schlecht) 12%, transparent) }
.trend.gleich { color:var(--leise); background:var(--flaeche2) }

/* --- Podium für Bestleistungen --- */
.podium { display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:26px }
.podium .stufe { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0 }
.podium .saeule { width:100%; border-radius:var(--rund) var(--rund) 0 0; position:relative;
  display:flex; align-items:flex-start; justify-content:center; padding-top:6px;
  font-family:var(--mono); font-weight:700; font-size:15px; color:#1a1408;
  animation:saeule-wachsen .7s cubic-bezier(.22,.8,.36,1) backwards }
.podium .s1 .saeule { height:96px; background:var(--gold); animation-delay:.15s }
.podium .s2 .saeule { height:66px; background:var(--silber); animation-delay:.3s }
.podium .s3 .saeule { height:44px; background:var(--bronze); animation-delay:.45s }
@keyframes saeule-wachsen { from { height:0; opacity:0 } }
.podium .wer { display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.podium .wer img, .podium .wer .mini { width:26px; height:26px; image-rendering:pixelated;
  border:1px solid var(--linie) }
.podium .wert { font-family:var(--mono); font-size:11px; color:var(--leise) }

/* --- Fortschrittsring (nächster Meilenstein) --- */
.ziel-ring { display:flex; align-items:center; gap:16px }
.ziel-ring .text .gross { font-family:var(--mono); font-size:17px; font-weight:700 }
.ziel-ring .text .klein { font-size:12px; color:var(--leise); margin-top:2px }

/* --- Spielertyp-Abzeichen --- */
.typ-abzeichen { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:12px;
  background:var(--akzent-weich); color:var(--akzent); border:1px solid var(--akzent) }

/* --- Leere Zustände laden zum Handeln ein --- */
.leer { text-align:center; padding:34px 20px; color:var(--leise) }
.leer .symbol { font-family:var(--mono); font-size:26px; color:var(--linie); margin-bottom:8px }
.leer .haupt { color:var(--text); font-size:14px; margin-bottom:4px }
.leer .neben { font-size:12.5px }
.leer code { background:var(--flaeche2); padding:1px 6px; border-radius:2px;
  font-family:var(--mono); color:var(--akzent) }

/* Kennzahlkarten mit Untertitel-Zeile */
.kennzahl-fuss { font-size:11px; color:var(--leise); margin-top:6px; font-family:var(--mono) }