/* Exitus Manager - Oberflaeche. Dunkel wie Exi Desk, Rot als Exitus-Akzent; jeder Bereich hat seine Farbe
   (Live gruen, Moderation rot, Auswertung gold, Verwaltung blau). Schrift: IBM Plex (SIL OFL, liegt bei). */
@font-face { font-family: "Plex"; src: url(plex-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(plex-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url(plex-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "PlexC"; src: url(plexc-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PlexC"; src: url(plexc-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PlexC"; src: url(plexc-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(plexmono-500.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
:root {
  --hg: #0c0e12;
  --flaeche: #14171d;
  --flaeche-2: #1b1f27;
  --flaeche-3: #232833;
  --flaeche-4: #2c323e;
  --rand: #242a34;
  --rand-2: #303744;
  --text: #eceef1;
  --text-2: #a7adb8;
  --text-3: #6b727f;
  --akzent: #d32f2f;
  --akzent-hell: #f0605d;
  --gruen: #3ec27e;
  --gelb: #f0923b;
  --gold: #e6b450;
  --rot: #f0605d;
  --blau: #5ea2f5;
  --violett: #a487f5;
  --tuerkis: #34c1b0;
  --live: #3ec27e; --mod: #f0605d; --ausw: #e6b450; --verw: #6aa6f8;
  --radius: 10px;
  --sans: "Plex", "Segoe UI", system-ui, sans-serif;
  --cond: "PlexC", "Plex", "Segoe UI", sans-serif;
  --mono: "PlexMono", Consolas, "Cascadia Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--hg); color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blau); }
h1, h2, h3 { font-weight: 600; margin: 0 0 12px; }
h1 { font: 600 28px/1.15 var(--cond); margin-bottom: 4px; letter-spacing: -.005em; }
h2 { font: 600 18px var(--cond); margin-top: 24px; letter-spacing: .01em; }
h3 { font: 600 15px var(--cond); margin-top: 18px; letter-spacing: .02em; }
p { margin: 6px 0; max-width: 76ch; }
.leise { color: var(--text-2); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
svg.sy { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Rahmen: Seitenleiste mit Bereichen + Inhalt ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.leiste {
  background: linear-gradient(180deg, #121520, #0f1218 60%); box-shadow: inset -1px 0 0 var(--rand);
  display: flex; flex-direction: column; gap: 8px; padding: 18px 12px 12px;
  position: sticky; top: 0; height: 100vh; min-width: 0;
}
.marke { display: flex; align-items: center; gap: 11px; padding: 0 8px 14px; flex-wrap: wrap; }
.marke .zeichen { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(145deg, #e53935, #a61f1f); display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 18px rgba(211,47,47,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.marke .zeichen svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 2.2; fill: none; }
.marke .wortmarke { font: 700 16px var(--cond); letter-spacing: .06em; }
.marke .exitus { color: var(--text); font-weight: 700; }
.marke .manager { color: var(--text-3); font-weight: 500; letter-spacing: .02em; }
.marke .knoten { display: block; width: 100%; letter-spacing: 0; font: 12px var(--sans); color: var(--text-3); margin-top: 2px; padding-left: 41px; }
.navigation { list-style: none; margin: 0; padding: 0 0 6px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.navigation .bereich-titel { display: flex; align-items: center; gap: 8px; padding: 12px 10px 5px; font: 600 12.5px var(--cond); letter-spacing: .04em; color: var(--c); }
.navigation li:first-child .bereich-titel { padding-top: 2px; }
.navigation .bereich-titel::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.navigation a {
  display: flex; align-items: center; gap: 11px; position: relative;
  padding: 6px 10px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 13.5px;
}
.navigation a svg.sy { color: var(--text-3); }
.navigation a:hover { background: var(--flaeche-2); color: var(--text); }
.navigation a[aria-current="page"] { color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
.navigation a[aria-current="page"] svg.sy { color: var(--c); }
.navigation a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); box-shadow: 0 0 10px var(--c); }
.navigation .zaehler { margin-left: auto; background: var(--akzent); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600; min-width: 20px; text-align: center; padding: 0 6px; line-height: 18px; font-variant-numeric: tabular-nums; }
.navigation .zaehler.leise { background: var(--flaeche-3); color: var(--text-2); }
.navigation .zaehler.stoss { animation: stoss .6s ease-out; }
@keyframes stoss { 30% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(211,47,47,.25); } }
.konto { box-shadow: 0 -1px 0 var(--rand); padding: 12px 6px 0; font-size: 13px; }
.konto .wer { display: flex; align-items: center; gap: 10px; }
.konto .wer small { display: block; color: var(--text-3); font-size: 12px; }
.konto .knoepfe { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }

.haupt { min-width: 0; }
.inhalt { padding: 22px 30px 40px; max-width: 1480px; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.kopf select { width: auto; min-width: 240px; max-width: 100%; }
.bereich-pfad { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--cond); letter-spacing: .04em; color: var(--c, var(--text-2)); margin-bottom: 2px; }
.bereich-pfad::before { content: ""; width: 14px; height: 2px; background: var(--c, var(--text-2)); box-shadow: 0 0 8px var(--c, transparent); border-radius: 1px; }

/* ---------- Server-Kacheln ---------- */
.kanaele { display: none; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0 4px; }
.kachel { position: relative; padding: 12px 14px; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  background: linear-gradient(180deg, rgba(27,31,39,.95), rgba(20,23,29,.95)); box-shadow: inset 0 0 0 1px var(--rand-2), 0 8px 24px rgba(0,0,0,.22);
  color: inherit; text-decoration: none; transition: box-shadow .25s, transform .2s; cursor: grab; user-select: none; -webkit-user-drag: none; }
.kachel:hover { box-shadow: inset 0 0 0 1px rgba(62,194,126,.45), 0 10px 30px rgba(0,0,0,.32); }
.kachel .bild { width: 46px; height: 46px; border-radius: 9px; position: relative; background: linear-gradient(135deg, #2b3a2e, #1a2420); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.kachel .bild::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 3px #181c23; }
.kachel.an .bild::after { background: var(--gruen); box-shadow: 0 0 0 3px #181c23, 0 0 10px rgba(62,194,126,.8); }
.kachel.warte .bild::after { background: var(--gelb); animation: blinken 1s infinite; }
.kachel.aus .bild::after { background: var(--rot); }
.kachel.ruht { background: rgba(20,23,29,.6); box-shadow: inset 0 0 0 1px var(--rand); }
.kachel.ruht .bild, .kachel.aus .bild { filter: grayscale(1) brightness(.6); }
.kachel .kn { min-width: 0; position: relative; z-index: 1; }
.kachel .name { font: 600 16px var(--cond); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kachel .zustand { font-size: 12px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 0 10px; white-space: nowrap; overflow: hidden; }
.kachel .z2:empty { display: none; }
.kachel.an .zustand .z1 { color: var(--gruen); }
.kachel.warte .zustand .z1 { color: var(--gelb); }
.kachel.aus .zustand .z1 { color: var(--rot); }
.kachel .zahl { text-align: right; position: relative; z-index: 1; }
.kachel .zahl b { font: 600 32px/1 var(--cond); font-variant-numeric: tabular-nums; display: block; }
.kachel .zahl small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }
.kachel.ruht .name, .kachel.ruht .zahl b { color: var(--text-3); }
.kachel svg.kurve { position: absolute; left: 40%; right: 118px; bottom: 0; height: 44px; width: auto; pointer-events: none; }
.kachel svg.kurve polygon { fill: url(#kurve-gruen); } .kachel svg.kurve polyline { fill: none; stroke: rgba(62,194,126,.55); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.kachel .ring { position: absolute; left: 51px; top: 50%; margin-top: 11px; width: 18px; height: 18px; transform: rotate(-90deg); display: none; z-index: 3; }
.kachel .ring circle { fill: #181c23; stroke-width: 2.4; } .kachel .ring .bahn { stroke: rgba(240,146,59,.25); }
.kachel .ring .wert { stroke: var(--gelb); fill: none; stroke-dasharray: 50.3; transition: stroke-dashoffset 1s linear; }
.kachel.countdown .ring { display: block; } .kachel.countdown .bild::after { opacity: 0; }
.kachel.countdown { box-shadow: inset 0 0 0 1px rgba(240,146,59,.55), 0 0 24px rgba(240,146,59,.12); }
.kachel.countdown .zustand .z1 { color: var(--gelb); }
.kachel.startet .bild::after { background: var(--blau); animation: blinken .8s infinite; }
.kachel.startet .zustand .z1 { color: var(--blau); }
.kachel.startet .zahl, .kachel.startet svg.kurve, .kachel.stoppt .zahl, .kachel.stoppt svg.kurve { opacity: .25; transition: opacity .6s; }
.kachel .lade { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--blau), #9cc7ff); box-shadow: 0 0 10px var(--blau); z-index: 2; }
.kachel.startet .lade { animation: laden 60s cubic-bezier(.1,.6,.3,1) forwards; }
@keyframes laden { from { width: 4%; } to { width: 92%; } }
.kachel.zurueck { animation: zurueck 1.4s ease-out; }
@keyframes zurueck { 0% { box-shadow: inset 0 0 0 1px rgba(62,194,126,.95), 0 0 0 0 rgba(62,194,126,.5); } 60% { box-shadow: inset 0 0 0 1px rgba(62,194,126,.5), 0 0 0 12px rgba(62,194,126,0); } }
@keyframes blinken { 50% { opacity: .35; } }
.kachel.platzhalter { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12) !important; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px) !important; }
.kachel.platzhalter > * { opacity: .25; }
.kachel.geist { position: fixed; z-index: 90; pointer-events: none; transform: rotate(-2deg) scale(1.02); opacity: .96; margin: 0;
  box-shadow: inset 0 0 0 1px rgba(62,194,126,.6), 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(62,194,126,.18) !important; }
.ablage { position: fixed; inset: 0; z-index: 85; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ablage.da { opacity: 1; }
.ablage::before { content: ""; position: absolute; inset: 14px; border-radius: 18px; border: 2px dashed rgba(62,194,126,.45); background: rgba(62,194,126,.035); }
.ablage .ab-hinweis { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); background: rgba(20,24,31,.96); border-radius: 12px; padding: 12px 18px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 0 0 1px rgba(62,194,126,.35), 0 18px 48px rgba(0,0,0,.55); font-size: 13.5px; white-space: nowrap; }
.ablage .ab-hinweis .sym { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(62,194,126,.16); color: var(--live); }
.ablage .ab-hinweis small { color: var(--text-3); font-size: 12px; display: block; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; }
.status.laeuft { color: var(--text); }
.status.laeuft::before { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); }
.status.fehler::before { background: var(--rot); }
.kanal-leer { grid-column: 1 / -1; padding: 14px 16px; color: var(--text-2); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }

/* ---------- Bausteine ---------- */
.hinweis-block { border-color: var(--akzent); margin-bottom: 14px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.block { background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche)); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rand-2), 0 10px 30px rgba(0,0,0,.18); padding: 18px; }
.block > h2:first-child, .block > h3:first-child { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
th, td { border-bottom: 1px solid var(--rand); padding: 7px 10px; vertical-align: top; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--flaeche-2); }
td.zahl, th.zahl { text-align: right; }
td.nowrap { white-space: nowrap; }
.tabelle-huelle { overflow-x: auto; }
.leer { color: var(--text-2); padding: 10px 0; }

.marke-klein { display: inline-block; white-space: nowrap; border-radius: 5px; padding: 1px 8px; font: 600 11.5px var(--cond); letter-spacing: .03em; color: var(--text-2); background: var(--flaeche-3); }
.marke-klein.rot { color: var(--rot); background: rgba(240,96,93,.14); }
.marke-klein.gruen { color: var(--gruen); background: rgba(62,194,126,.14); }
.marke-klein.bernstein { color: var(--gelb); background: rgba(240,146,59,.14); }

button, .knopf {
  font: 500 13.5px var(--sans); color: var(--text); background: var(--flaeche-3); cursor: pointer;
  border: 0; border-radius: 8px; padding: 7px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  display: inline-flex; align-items: center; gap: 7px; justify-content: center; transition: background .15s, box-shadow .15s;
}
button:hover:not(:disabled), .knopf:hover { background: var(--flaeche-4); }
button.haupt-knopf, .knopf.haupt-knopf { background: linear-gradient(180deg, #e0413e, #c62a28); color: #fff; box-shadow: 0 4px 14px rgba(211,47,47,.28), inset 0 1px 0 rgba(255,255,255,.18); }
button.haupt-knopf:hover:not(:disabled) { background: linear-gradient(180deg, #ea5250, #d03432); }
button.geist-knopf, .knopf.geist-knopf { background: transparent; box-shadow: inset 0 0 0 1px var(--rand-2); color: var(--text-2); }
button.geist-knopf:hover:not(:disabled), .knopf.geist-knopf:hover { color: var(--text); background: var(--flaeche-2); }
button.gefahr { color: var(--rot); }
button.haupt-knopf.gefahr { color: #fff; }
button.klein, .knopf.klein { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
a.knopf { text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

label { display: block; color: var(--text-2); font-size: 13px; margin: 10px 0 4px; }
input, select, textarea {
  font: inherit; color: var(--text); background: rgba(12,14,18,.7);
  border: 1px solid var(--rand-2); border-radius: 8px; padding: 7px 10px; width: 100%;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--akzent-hell); outline: none; box-shadow: 0 0 0 3px rgba(240,96,93,.15); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--akzent); }
.schalter { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 8px 0; font-size: 14px; }
.zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.hilfe { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.suche { max-width: 420px; }

/* ---------- Spielerprofil ---------- */
.profil-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.reiter { display: flex; border-bottom: 1px solid var(--rand); margin: 16px 0 14px; flex-wrap: wrap; }
.reiter button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 9px 16px; color: var(--text-2); }
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 14px 0; }
.kennzahlen div { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; color: var(--text-2); font-size: 13px; }
.kennzahlen div strong { display: block; font-size: 18px; font-weight: 600; color: var(--text); margin-top: 2px; }

/* ---------- Chat und Konsole ---------- */
.verlauf { background: var(--hg); border: 1px solid var(--rand); border-radius: var(--radius); height: 60vh; overflow-y: auto; padding: 8px 12px; }
.verlauf .z { padding: 2px 0; display: grid; grid-template-columns: 4.2rem auto 1fr; gap: 10px; }
.verlauf .z time { color: var(--text-2); }
.verlauf .kanal-name { color: var(--blau); }
.verlauf.konsole { font-family: var(--mono); font-size: 12.5px; }
.verlauf.konsole .z { grid-template-columns: 4.2rem 1fr; }

/* ---------- Meldungen ---------- */
.meldung { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--rand); }
.meldung:last-child { border-bottom: 0; }
.meldung time { color: var(--text-2); font-size: 13px; white-space: nowrap; }

/* ---------- Dialog, Hinweise (wie die Meldungen im Desk), Anmeldung ---------- */
.dialog { background: linear-gradient(180deg, #1e232c, #171a21); color: var(--text); border: 0; border-radius: 14px; padding: 20px 22px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.6); }
.dialog::backdrop { background: rgba(5, 6, 8, .65); backdrop-filter: blur(2px); }
.dialog h2 { margin-top: 0; }
.dialog .knopfreihe { justify-content: flex-end; margin-top: 18px; }
.hinweise { position: fixed; right: 22px; bottom: calc(18px + var(--sl-h, 0px)); display: grid; gap: 8px; z-index: 60; justify-items: end; }
.hinweis { --tk: var(--gruen); position: relative; overflow: hidden; display: flex; gap: 12px; align-items: center; background: linear-gradient(180deg, #1f242e, #191d25);
  border-radius: 12px; padding: 11px 18px 11px 12px; min-width: 280px; max-width: 440px; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 18px 48px rgba(0,0,0,.55);
  animation: hinein .35s cubic-bezier(.2,.8,.2,1); }
.hinweis::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tk); transform-origin: left; animation: ablauf var(--dauer, 3.5s) linear forwards; }
.hinweis .sym { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--tk) 16%, transparent); color: var(--tk); }
.hinweis .t1 { font-weight: 600; font-size: 13.5px; } .hinweis .t2 { font-size: 12px; color: var(--text-3); }
.hinweis.fehler { --tk: var(--rot); }
.hinweis.klickbar { cursor: pointer; }
@keyframes hinein { from { transform: translateY(16px); opacity: 0; } }
@keyframes ablauf { to { transform: scaleX(0); } }

.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.anmeldung { background: radial-gradient(900px 500px at 50% 40%, #17131a 0%, #0a0b0e 70%); }
.anmeldung form { width: min(400px, 100%); background: linear-gradient(180deg, #1b1f27, #14171d); border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.6); padding: 26px; }
.anmeldung .marke { padding: 0 0 14px; margin-bottom: 10px; font-size: 20px; }
.anmeldung .fehler { color: var(--rot); min-height: 1.3em; font-size: 13px; }
.anmeldung button { width: 100%; margin-top: 14px; padding: 9px; }

.job { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; background: var(--hg); }
.job-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

/* ---------- Live-Karte ---------- */
.karte-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 10px; }
.karte-flaeche { position: relative; background: var(--hg); border: 1px solid var(--rand); border-radius: var(--radius); aspect-ratio: 1 / 1; width: min(100%, 78vh); justify-self: center; overflow: hidden; }
.karte-flaeche svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }

.karte-grund { fill: #12151b; }
#karte-gitter line { stroke: var(--rand); }
#karte-gitter text { fill: var(--text-2); font-family: "Segoe UI", system-ui, sans-serif; }
.kp-spieler circle { fill: var(--gruen); stroke: #0f1115; stroke-width: .2%; }
.kp-spieler.bewusstlos circle { fill: var(--gelb); }
.kp-spieler.gewaehlt circle { fill: var(--akzent-hell); }
.kp-spieler text { fill: var(--text); paint-order: stroke; stroke: #0f1115; stroke-width: .35%; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 600; }
.kp-fahrzeug, .kp-ereignis, .kp-spieler { cursor: pointer; }
.kp-fahrzeug circle { stroke: #0f1115; stroke-width: .18%; }
.kp-fahrzeug use { pointer-events: none; }
.kp-fahrzeug:hover circle, .kp-ereignis:hover circle, .kp-spieler:hover circle { stroke: #fff; }
.kp-fahrzeug.gewaehlt circle, .kp-ereignis.gewaehlt circle, .kp-spieler.gewaehlt circle { stroke: #fff; stroke-width: .45%; }
.kp-ziel { pointer-events: none; }
#karte-geist { pointer-events: none; }
.kg-linie { stroke: #fff; stroke-width: .25%; stroke-dasharray: 1% .6%; }
.kg-punkt { fill: var(--gruen); fill-opacity: .6; stroke: #fff; stroke-width: .3%; }
.kp-ziel circle { fill: none; stroke: #fff; stroke-width: .3%; }
.kp-ziel path { stroke: #fff; stroke-width: .3%; }
.karte-flaeche svg.zieht { cursor: grabbing; }
.karte-tipp { font-size: 13px; margin-bottom: 14px; }
.karte-wahl { margin: 0 0 14px; padding: 12px; }
.kw-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.kw-kopf b { font-size: 15px; }
.kw-aktionen { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kw-knopf { text-align: left; }
.kw-knopf.warnung { border-color: var(--gelb); }
.karte-verlauf { margin-bottom: 14px; font-size: 13px; }
.karte-verlauf ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kp-ereignis circle { stroke: #0f1115; stroke-width: .2%; }
.kp-zeichen { fill: #fff; font-weight: 700; font-family: "Segoe UI", system-ui, sans-serif; pointer-events: none; }
.kp-name { fill: var(--text); paint-order: stroke; stroke: #0f1115; stroke-width: .3%; font-family: "Segoe UI", system-ui, sans-serif; pointer-events: none; }
.kp-zone { fill: #c0ca33; fill-opacity: .18; stroke: #c0ca33; stroke-width: .25%; stroke-dasharray: 1% .6%; }
.kp-zone.dynamisch { fill-opacity: .25; }
.karte-ebenen .schalter { margin: 4px 0; font-size: 13px; }
.karte-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.karte-objekte { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.karte-objekte li { padding: 5px 0; border-bottom: 1px solid var(--rand); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.karte-hin { font-size: 11.5px; padding: 1px 6px; }
.karte-objekte details { width: 100%; }
.karte-objekte summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style-position: outside; }
.karte-hin-liste { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px 16px; }
.karte-knoepfe { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.karte-knoepfe button { background: var(--flaeche); min-width: 32px; }
.karte-koord { position: absolute; left: 10px; bottom: 8px; color: var(--text-2); font-size: 12px; background: #0f1115cc; padding: 2px 6px; border-radius: 4px; }
.karte-koord:empty { display: none; }
.karte-liste { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; max-height: 78vh; overflow-y: auto; }
.karte-spielerliste { list-style: none; margin: 0; padding: 0; }
.karte-spielerliste li { padding: 7px 0; border-bottom: 1px solid var(--rand); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.karte-spielerliste li > span { grid-column: 2; font-size: 12.5px; }
.karte-spielerliste button { grid-row: 1 / 4; align-self: start; }
.karte-spielerliste button.an { border-color: var(--akzent); color: var(--akzent-hell); }
ol.schritte { margin: 6px 0 12px; padding-left: 20px; }
ol.schritte li { margin: 4px 0; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1100px) { .karte-rahmen { grid-template-columns: minmax(0, 1fr); } .karte-liste { max-height: none; } }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rand); padding: 12px; gap: 6px; }
  .marke { padding-bottom: 8px; margin-bottom: 0; }
  .marke .knoten { display: none; }
  .navigation .bereich-titel { display: none; }
  .navigation a[aria-current="page"]::before { display: none; }
  .navigation { flex-direction: row; overflow-x: auto; }
  .navigation a { white-space: nowrap; }
  .navigation .trenner { display: none; }
  .konto { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
  .konto .knoepfe { margin: 0; }
  .kanaele { padding: 16px 16px 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .inhalt { padding: 16px 16px 32px; }
  .verlauf .z { grid-template-columns: 3.6rem 1fr; }
  .verlauf .z .kanal-name { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Spielerakte */
.steckbrief { display: flex; flex-wrap: wrap; gap: 6px; }
.notizen { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.notizen li { border-left: 3px solid var(--rand); padding-left: 10px; white-space: pre-wrap; }

/* Spur, PvP-Linien */
#karte-heat, #karte-spur { pointer-events: none; }
.kp-spur { fill: none; stroke: #fff; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.kp-spur.fahrzeug { stroke: #42a5f5; }
.kp-spur-start { fill: #fff; stroke: #0f1115; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.kp-spur-jetzt circle { fill: var(--akzent-hell); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.kp-pvp line { stroke: #ff9100; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; }
.kp-pvp.kill line { stroke: #ff1744; stroke-dasharray: none; }
.kp-pvp circle { fill: #ff1744; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.kp-pvp path { stroke: #fff; stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.kp-pvp:hover line { stroke-width: 4px; }
.karte-pvp-liste { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#spur-regler { width: 100%; margin: 6px 0 8px; }

/* Steam-Links */
.steam-link { font-size: 12px; color: var(--text-2); text-decoration: underline dotted; }
.steam-link:hover { color: #66c0f4; }
.profil-steam { margin-top: 6px; font-size: 14px; }

.extras { border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px; margin: 12px 0; }
.extras legend { padding: 0 6px; color: var(--text-2); }
.extras textarea { width: 100%; }

.kanal.warte .licht { background: var(--gelb); }
.kanal.ruht .licht { background: var(--text-2); }
.kanal.ruht .name, .kanal.ruht .zahl { color: var(--text-2); }

/* Tickets */
.faden { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.faden li { border-left: 3px solid var(--rand); padding: 2px 0 2px 10px; }
.faden li.admin { border-color: var(--blau); }
.faden li.spieler { border-color: var(--gelb); }

/* Ranglisten */
.rangraster { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rang td.platz { width: 1.8rem; color: var(--text-2); font-weight: 600; }
.rang td.platz.p1 { color: #e0b341; } .rang td.platz.p2 { color: #c0c6cf; } .rang td.platz.p3 { color: #c98a5a; }
/* Statistik */
.heat-raster { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: 8px; }
.hz { aspect-ratio: 1.6 / 1; border-radius: 3px; min-height: 14px; }
.hz:hover { outline: 2px solid var(--text); }
.hz-kopf { font-size: 11px; color: var(--text-2); text-align: left; }
.hz-tag { font-size: 12px; color: var(--text-2); align-self: center; }
.saeulen { width: 100%; height: auto; display: block; max-height: 260px; }
.saeulen .raster-linie { stroke: var(--rand); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.saeulen .achse { fill: var(--text-2); font-size: 11px; }
.saeulen .treffer { fill: transparent; }
.saeulen .saeule:hover .treffer { fill: rgba(255,255,255,.05); }
.legende { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--flaeche-2); border: 1px solid var(--rand); color: var(--text);
  padding: 5px 9px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.rang td.zahl { white-space: nowrap; }
.stufe { display: grid; grid-template-columns: 2.5rem 10rem 14rem minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.stufe strong { display: block; padding: 8px 0; }
@media (max-width: 800px) { .stufe { grid-template-columns: 2rem 1fr 1fr; } }

.anleitung { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.anleitung code { background: var(--flaeche-2); padding: 1px 6px; border-radius: 4px; }

/* Planer: eingestellte Zeitplaene */
.zeitplaene tr.aus td { opacity: .55; }
.zeitplaene .zeiten { display: flex; flex-wrap: wrap; gap: 4px; }
.job.hervor { outline: 2px solid var(--akzent); outline-offset: 4px; transition: outline-color .3s; }
.geheim { font-size: 16px; letter-spacing: .08em; user-select: all; display: inline-block; margin-top: 4px; }
pre.code { background: var(--flaeche-2); border-radius: 6px; padding: 8px 10px; font-size: 12px; overflow-x: auto; white-space: pre; }

/* ---------- Statusleiste unten (Muster A) ---------- */
:root { --sl-h: 28px; }
.app { padding-bottom: var(--sl-h); min-height: 100vh; }
.leiste { height: calc(100vh - var(--sl-h)); }
.statusleiste { position: fixed; left: 0; right: 0; bottom: 0; height: var(--sl-h); z-index: 40; display: flex; align-items: center;
  background: #0f1217; border-top: 1px solid var(--rand); color: var(--text-2); font-size: 12px; padding: 0 12px;
  white-space: nowrap; overflow: visible; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
.statusleiste .sl-links, .statusleiste .sl-rechts { display: flex; height: 100%; min-width: 0; }
.statusleiste .sl-links { overflow: hidden; }
.statusleiste .sl-rechts { margin-left: auto; flex: none; }
.statusleiste .sl-teil { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; color: inherit; text-decoration: none; }
.statusleiste .sl-teil + .sl-teil { border-left: 1px solid var(--rand); }
.statusleiste .sl-rechts .sl-teil:first-child { border-left: 1px solid var(--rand); }
.statusleiste a.sl-teil:hover { background: var(--flaeche-2); color: var(--text); }
.statusleiste b { color: var(--text); font-weight: 500; }
.statusleiste .mono { font-size: 12px; }
.sl-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 6px var(--gruen); flex: none; }
.sl-punkt.gelb { background: var(--gelb); box-shadow: 0 0 6px var(--gelb); } .sl-punkt.rot { background: var(--rot); box-shadow: 0 0 6px var(--rot); } .sl-punkt.grau { background: #4a505b; box-shadow: none; } .sl-punkt.blau { background: var(--blau); box-shadow: 0 0 6px var(--blau); }
.statusleiste .warn, .statusleiste .warn b { color: var(--gelb); }
.statusleiste .sl-fort { position: absolute; left: 0; top: -1px; height: 2px; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); transition: width 1s linear; }
.statusleiste a.sl-teil[data-server] { cursor: grab; }
@media (max-width: 860px) {
  .leiste { height: auto; }
  .statusleiste { padding-left: 4px; padding-right: 4px; font-size: 11.5px; }
  .statusleiste .sl-teil { padding: 0 7px; gap: 5px; }
  .statusleiste .sl-lang, .statusleiste .sl-name { display: none; }
  .statusleiste .sl-rechts .sl-teil + .sl-teil { border-left: 0; padding-left: 0; }
  .statusleiste .sl-rechts .sl-teil:last-child, .statusleiste .sl-links a[href="#/planer"] .mono:last-child { display: none; }
}

/* ---------- Avatare ---------- */
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 14px var(--cond); color: #fff; flex: none; text-decoration: none; position: relative; }
.av.klein { width: 22px; height: 22px; font-size: 11px; }
.av.gross { width: 46px; height: 46px; font-size: 19px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.av.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 2.5px #1d222b; }
.av.tk-sym { background: var(--flaeche-3); color: var(--blau); }
.konto .av { width: 30px; height: 30px; font-size: 13px; }

/* ---------- Zentrale ---------- */
.z-kopf { position: relative; margin: -22px -30px 0; padding: 22px 30px 18px; overflow: hidden;
  background: radial-gradient(900px 260px at 75% -40%, rgba(62,194,126,.10), transparent 70%); box-shadow: inset 0 -1px 0 var(--rand); }
.z-kopf > *:not(svg) { position: relative; }
svg.topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
svg.topo path { fill: none; stroke: rgba(160,190,170,.07); stroke-width: 1; }
.z-kennz { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; color: var(--text-2); font-size: 13px; }
.z-kennz b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.z-kennz .warn b { color: var(--gelb); }
.z-suche { display: flex; align-items: center; gap: 8px; background: rgba(20,23,29,.85); border-radius: 9px; padding: 0 12px; color: var(--text-3); width: 250px; box-shadow: inset 0 0 0 1px var(--rand-2); }
.z-suche input { border: 0; background: transparent; padding: 7px 0; box-shadow: none !important; }
.z-raster { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; margin-top: 20px; align-items: start; }
.z-seite { display: flex; flex-direction: column; gap: 14px; }
.z-abschnitt { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.z-abschnitt h2, .z-abschnitt h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
.z-farbe { width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); display: inline-block; }
.z-mehr { margin-left: auto; font-size: 12px; color: var(--text-3); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.z-mehr:hover { color: var(--text); } .z-mehr svg.sy { width: 13px; height: 13px; }
.z-box { background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche)); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rand-2), 0 10px 30px rgba(0,0,0,.2); padding: 14px 16px 12px; }
.z-box .z-abschnitt { margin-bottom: 4px; }
.z-mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin-top: 10px; background-color: #1a2420; background-size: 100% auto; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.z-mini .gitter { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px; }
.z-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,14,18,0) 50%, rgba(12,14,18,.85)); }
.z-mini .pk { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 2px rgba(0,0,0,.65); z-index: 1; transition: left 2.5s linear, top 2.5s linear; }
.z-mini .pk.gemeldet { background: var(--gelb); box-shadow: 0 0 0 2px rgba(0,0,0,.65), 0 0 0 7px rgba(240,146,59,.25); animation: puls 1.8s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 2px rgba(0,0,0,.65), 0 0 0 0 rgba(240,146,59,.5); } 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.65), 0 0 0 14px rgba(240,146,59,0); } }
.z-mini .unter { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 2; font-size: 12px; color: var(--text-2); display: flex; justify-content: space-between; gap: 8px; }
.z-mini .unter b { color: var(--text); }
.z-zeitstrahl { position: relative; margin-top: 8px; }
.z-zeitstrahl::before { content: ""; position: absolute; left: 61px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--rand-2), transparent); }
.z-zeitstrahl .r { display: grid; grid-template-columns: 46px 16px minmax(0,1fr) auto; align-items: center; gap: 0 8px; padding: 5px 0; font-size: 13px; }
.z-zeitstrahl .u { text-align: right; } .z-zeitstrahl i { width: 9px; height: 9px; border-radius: 50%; background: var(--flaeche); box-shadow: inset 0 0 0 2px var(--verw); justify-self: center; position: relative; }
.z-zeitstrahl .alle i { background: var(--verw); box-shadow: 0 0 8px rgba(106,166,248,.6); }
.z-zeitstrahl .event i { box-shadow: inset 0 0 0 2px var(--gold); }
.z-zeitstrahl .n { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .z-zeitstrahl .n b { color: var(--text); font-weight: 500; }
.z-zeitstrahl .in { color: var(--text-3); font-size: 12px; }
.z-zeitstrahl .jetzt .u { color: var(--text); } .z-zeitstrahl .jetzt i { background: var(--text); box-shadow: 0 0 0 4px rgba(236,238,241,.1); width: 7px; height: 7px; }
.z-kill { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.z-kill + .z-kill { box-shadow: 0 -1px 0 var(--rand); }
.z-kill .t { color: var(--text-3); font-size: 12px; } .z-kill .w { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.z-kill .w a, .z-kill .w b { color: var(--text); font-weight: 500; text-decoration: none; } .z-kill .w a:hover { text-decoration: underline; }
.z-kill.pvp .w a:first-child, .z-kill.pvp .w b:first-child { color: var(--gelb); }
.z-kill .u { font-size: 12px; color: var(--text-3); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.weite { display: inline-block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(240,146,59,.3), var(--gelb)); }

/* ---------- Tickets ---------- */
.tk-filter { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.tk-filter.gross { margin: 8px 0 6px; }
.tk-reiter { font-size: 12.5px; padding: 4px 9px; border-radius: 7px; color: var(--text-2); background: transparent; box-shadow: none; gap: 6px; }
.tk-reiter i { width: 7px; height: 7px; border-radius: 50%; }
.tk-reiter span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tk-reiter.an { background: var(--flaeche-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--rand-2); }
.tk-gruppe { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; padding: 12px 4px 6px; }
.tk-gruppe::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.tk { --k: var(--text-3); display: grid; grid-template-columns: 4px 34px minmax(0,1fr) auto auto; align-items: center; gap: 0 14px; padding: 9px 14px 9px 0; border-radius: 10px; position: relative; overflow: hidden; }
.tk + .tk { margin-top: 2px; }
.tk:hover, .tk:focus-within { background: linear-gradient(90deg, var(--flaeche-2), var(--flaeche)); box-shadow: inset 0 0 0 1px var(--rand-2); }
.tk-farbe { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--k); }
.tk-av { text-decoration: none; display: inline-grid; }
.tk-mitte { min-width: 0; }
.tk-z1 { display: flex; align-items: baseline; gap: 9px; min-width: 0; white-space: nowrap; }
.tk-wer { font-weight: 600; color: var(--text); text-decoration: none; } a.tk-wer:hover { text-decoration: underline; }
.tk-text { overflow: hidden; text-overflow: ellipsis; }
.tk:not([style*="--mod"]) .tk-text { color: var(--text-2); }
.tk-liste.lang .tk-z1 { white-space: normal; } .tk-liste.lang .tk-text { overflow: visible; }
.tk-z2 { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 12px; color: var(--text-3); white-space: nowrap; flex-wrap: wrap; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px var(--cond); letter-spacing: .03em; color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); padding: 1px 8px 1px 6px; border-radius: 5px; }
.tk-chip svg.sy { width: 12px; height: 12px; stroke-width: 2; }
.tk-alter { font: 12px var(--mono); color: var(--text-3); text-align: right; min-width: 70px; white-space: nowrap; }
.tk-alter.warn { color: var(--gelb); }
.tk-zust { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); min-width: 108px; justify-content: flex-end; white-space: nowrap; }
.tk-frei { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.tk-ok { color: var(--gruen); display: inline-flex; align-items: center; gap: 5px; } .tk-ok svg.sy { width: 13px; height: 13px; }
.tk-akt { display: none; gap: 6px; grid-column: 4 / 6; grid-row: 1; justify-content: flex-end; align-items: center; }
.tk.mit-akt:hover .tk-akt, .tk.mit-akt:focus-within .tk-akt { display: flex; }
.tk.mit-akt:hover .tk-alter, .tk.mit-akt:hover .tk-zust, .tk.mit-akt:focus-within .tk-alter, .tk.mit-akt:focus-within .tk-zust { visibility: hidden; }
.tk.erledigt { opacity: .6; }
.tk .faden { grid-column: 3 / -1; }
.tk.neu { animation: tk-herein .9s cubic-bezier(.2,.8,.2,1); }
.tk.neu::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, rgba(240,96,93,.28), rgba(240,96,93,0) 75%); animation: glimmen 3.5s ease-out forwards; pointer-events: none; }
@keyframes tk-herein { from { transform: translateY(-14px); opacity: 0; } }
@keyframes glimmen { to { opacity: 0; } }
.tk-leer { display: flex; align-items: center; gap: 8px; padding: 18px 4px; } .tk-leer svg.sy { color: var(--gruen); }
.tk-mehr { margin: 10px 4px 0; } .tk-mehr a { font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
@media (hover: none) { .tk-akt { display: flex; grid-column: 3 / -1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; } .tk.mit-akt .tk-alter, .tk.mit-akt .tk-zust { visibility: visible !important; } }

/* ---------- Mini-Fenster beim Drüberfahren ---------- */
.vs { position: fixed; z-index: 70; width: 384px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,35,45,.985), rgba(22,26,33,.985)); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(6px) scale(.985); transition: opacity .16s ease-out, transform .16s ease-out; pointer-events: none; }
.vs.zeigen { opacity: 1; transform: none; pointer-events: auto; }
.vs.oben { transform-origin: bottom; }
.vs-band { position: absolute; left: 0; right: 0; top: 0; height: 66px; background: linear-gradient(120deg, color-mix(in srgb, var(--b) 26%, transparent), transparent 62%); pointer-events: none; }
.vs-kopf { display: flex; gap: 12px; align-items: center; position: relative; }
.vs-titel { min-width: 0; } .vs-name { font: 600 18px var(--cond); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-unter { font-size: 12px; color: var(--text-3); white-space: nowrap; } .vs-unter .steam-link { font-size: 11.5px; color: var(--blau); text-decoration: none; }
.vs-marken { margin-left: auto; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vs-marke { --k: var(--rot); font: 600 11px var(--cond); letter-spacing: .03em; padding: 2px 8px; border-radius: 5px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); white-space: nowrap; }
.vs-wert { margin-top: 14px; } .vs-wert .l { font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; } .vs-wert .l span:last-child { color: var(--text); }
.balk { height: 4px; border-radius: 2px; background: var(--flaeche-4); margin-top: 5px; overflow: hidden; } .balk i { display: block; height: 100%; border-radius: 2px; }
.vs-ort { display: grid; grid-template-columns: 116px 1fr; gap: 14px; margin-top: 14px; align-items: center; }
.vs-bild { height: 78px; border-radius: 9px; position: relative; overflow: hidden; background-color: #1a2420; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vs-bild::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 26px 26px; }
.vs-bild i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 2px #000, 0 0 0 8px rgba(240,146,59,.3); }
.vs-zeilen { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; } .vs-zeilen span:nth-child(odd) { color: var(--text-3); }
.vs-trenn { height: 1px; background: rgba(255,255,255,.06); margin: 14px -16px; }
.vs-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 11.5px; color: var(--text-3); }
.vs-zahlen b { display: block; font: 600 20px var(--cond); color: var(--text); font-variant-numeric: tabular-nums; } .vs-zahlen .rot b { color: var(--gelb); }
.vs-stufe { display: flex; align-items: center; gap: 12px; } .vs-st-text { font-size: 12.5px; }
.vs-stufen { display: flex; gap: 4px; margin-top: 6px; } .vs-stufen i { width: 22px; height: 4px; border-radius: 2px; background: var(--flaeche-4); } .vs-stufen i.an { background: var(--gelb); box-shadow: 0 0 8px rgba(240,146,59,.6); }
.vs-knoepfe { display: flex; gap: 6px; margin-left: auto; } .vs-knoepfe.breit { margin: 0; flex-wrap: wrap; }
.vs-fuss { font-size: 11.5px; color: var(--text-3); margin-top: 12px; }
.vs-kurve { width: 100%; height: 70px; margin-top: 12px; display: block; } .vs-kurve polygon { fill: url(#kurve-gruen-2); } .vs-kurve polyline { fill: none; stroke: var(--gruen); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.vs-achse { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.vs-liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; margin-top: 12px; } .vs-liste > span:nth-child(odd) { color: var(--text-3); }
.vs-verbs { display: flex; gap: 10px; flex-wrap: wrap; } .vs-verb { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.vs-verb i { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); } .vs-verb.an { color: var(--text); } .vs-verb.an i { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); }

/* ---------- Startbild ---------- */
.startbild { position: fixed; inset: 0; z-index: 200; background: radial-gradient(900px 500px at 50% 42%, #17131a 0%, #0a0b0e 70%); display: grid; place-items: center; overflow: hidden; transition: opacity .7s ease, visibility .7s; }
.startbild.weg { opacity: 0; visibility: hidden; }
.startbild svg.topo { opacity: 1; } .startbild svg.topo path { stroke: rgba(211,47,47,.08); }
.sb-mitte { width: min(400px, calc(100vw - 48px)); position: relative; }
.sb-logo { display: flex; align-items: center; gap: 16px; }
.sb-logo .zeichen { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(145deg, #e53935, #9e1c1c); display: grid; place-items: center; box-shadow: 0 0 60px rgba(211,47,47,.45), inset 0 1px 0 rgba(255,255,255,.2); animation: aufgehen .8s cubic-bezier(.2,.8,.2,1) both; }
.sb-logo .zeichen svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 2.2; fill: none; }
.sb-wort { font: 700 30px var(--cond); letter-spacing: .06em; overflow: hidden; } .sb-wort span { color: var(--text-3); font-weight: 500; letter-spacing: .02em; }
.sb-wort > div { animation: hoch .8s .15s cubic-bezier(.2,.8,.2,1) both; }
.sb-claim { color: var(--text-3); font-size: 13px; margin: 6px 0 0 68px; animation: auftauchen .6s .5s both; }
.sb-linie { height: 2px; background: var(--flaeche-3); border-radius: 1px; margin: 28px 0 18px; overflow: hidden; }
.sb-linie i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a61f1f, var(--mod)); box-shadow: 0 0 12px var(--mod); transition: width .35s ease-out; }
.sb-schritte { display: grid; gap: 8px; font-size: 13px; min-height: 22px; }
.sb-s { display: flex; align-items: center; gap: 10px; color: var(--text-3); opacity: 0; transform: translateY(4px); transition: all .3s; }
.sb-s.da { opacity: 1; transform: none; } .sb-s.ok { color: var(--text-2); } .sb-s.warn { color: var(--gelb); }
.sb-s .h { width: 14px; height: 14px; display: grid; place-items: center; }
.sb-s .dreh { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rand-2); border-top-color: var(--text-2); animation: drehen .7s linear infinite; }
.sb-s.ok .dreh, .sb-s.warn .dreh { display: none; } .sb-s .h svg { display: none; width: 14px; height: 14px; color: var(--gruen); } .sb-s.ok .h svg { display: block; }
.sb-s.warn .h::before { content: "!"; font-weight: 700; }
.sb-s .w { margin-left: auto; font-size: 12px; color: var(--text-3); }
.sb-fuss { margin-top: 28px; font-size: 12px; color: var(--text-3); }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes aufgehen { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes hoch { from { transform: translateY(100%); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } }
.einblenden .kachel { animation: auftauchen .6s cubic-bezier(.2,.8,.2,1) both; } .einblenden .kachel:nth-child(2) { animation-delay: .08s; } .einblenden .kachel:nth-child(3) { animation-delay: .16s; }
.einblenden .z-raster, .einblenden .leiste { animation: auftauchen .7s .2s cubic-bezier(.2,.8,.2,1) both; }

@media (max-width: 1180px) { .z-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .z-kopf { margin: -16px -16px 0; padding: 16px; }
  .z-suche { width: 100%; }
  .tk { grid-template-columns: 4px 30px minmax(0,1fr) auto; gap: 0 10px; } .tk .av { width: 30px; height: 30px; }
  .tk-zust { display: none; }
  .kachel svg.kurve { right: 96px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Begrüßung ---------- */
.sb-schritte.weg { opacity: 0; transform: translateY(-6px); transition: all .25s; }
.sb-gruss { font: 600 26px/1.25 var(--cond); letter-spacing: .01em; min-height: 66px; margin-top: 4px; }
.sb-gruss .cursor { display: inline-block; width: 2px; height: 26px; margin-left: 3px; vertical-align: -4px; background: var(--mod); box-shadow: 0 0 8px var(--mod); animation: blinken 1s steps(1) infinite; }
.briefing { position: fixed; left: 252px; bottom: calc(var(--sl-h, 28px) + 18px); z-index: 65; width: min(460px, calc(100vw - 32px)); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 16px 16px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(36,29,35,.99), rgba(20,23,29,.99)); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(211,47,47,.08); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1); }
.briefing.da { opacity: 1; transform: none; } .briefing.weg { opacity: 0; transform: translateY(10px); }
.br-orb { position: relative; width: 52px; height: 52px; }
.br-orb b { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f 55%, #7a1414); box-shadow: 0 0 18px rgba(240,96,93,.7); }
.br-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(240,96,93,.45); opacity: .5; }
.br-orb i:nth-child(2) { inset: 5px; border-color: rgba(240,96,93,.35); } .br-orb i:nth-child(3) { inset: -5px; border-color: rgba(240,96,93,.2); }
.briefing.sprechend .br-orb b { animation: orb 1.1s ease-in-out infinite; }
.briefing.sprechend .br-orb i { animation: welle 1.6s ease-out infinite; } .briefing.sprechend .br-orb i:nth-child(2) { animation-delay: .35s; } .briefing.sprechend .br-orb i:nth-child(3) { animation-delay: .7s; }
@keyframes orb { 50% { transform: scale(1.12); box-shadow: 0 0 28px rgba(240,96,93,.9); } }
@keyframes welle { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.br-gruss { font: 600 20px/1.2 var(--cond); letter-spacing: .01em; margin: 2px 0 8px; }
.br-text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }
.br-text li { display: flex; gap: 9px; align-items: baseline; opacity: 0; animation: br-zeile .45s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes br-zeile { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.br-text li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; transform: translateY(-1px); }
.br-text li.ok::before { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); } .br-text li.warn::before { background: var(--gelb); box-shadow: 0 0 6px var(--gelb); }
.br-text li.rot::before { background: var(--rot); box-shadow: 0 0 6px var(--rot); } .br-text li.rot { color: var(--text); }
.br-zu { width: 26px; height: 26px; padding: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--text-3); }
.br-zu:hover { color: var(--text); }
@media (max-width: 860px) { .briefing { left: 16px; } }
@media (prefers-reduced-motion: reduce) { .br-text li { opacity: 1; } }

/* ---------- Spieler (0.15): Gruppen je Server, Karten mit Gesundheit und Schnell-Aktionen ---------- */
.sp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 6px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--rand-2);
  background: var(--flaeche); color: var(--text-2); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sp-chip b { font: 600 12px var(--mono); color: var(--text-3); }
.sp-chip:hover { color: var(--text); border-color: var(--flaeche-4); }
.sp-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--live) 14%, var(--flaeche)); border-color: color-mix(in srgb, var(--live) 55%, transparent); color: var(--text); }
.sp-chip[aria-pressed="true"] b { color: var(--live); }
.sp-filter { margin-left: auto; width: min(260px, 100%); height: 34px; }
.sp-gruppe { margin-top: 22px; }
.sp-kopf { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--rand); margin-bottom: 12px; }
.sp-kbild { width: 40px; height: 40px; border-radius: 9px; flex: none; background: var(--flaeche-3) center/cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sp-ktext { display: flex; flex-direction: column; min-width: 0; }
.sp-ktext b { font: 600 18px/1.15 var(--cond); color: var(--live); }
.sp-ktext small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.sp-kzahl { margin-left: auto; font: 600 20px var(--cond); white-space: nowrap; }
.sp-kzahl small { color: var(--text-3); font: 500 13px var(--sans); margin-left: 3px; }
.sp-kchip { font: 500 11.5px var(--sans); padding: 3px 9px; border-radius: 10px; background: var(--flaeche-3); color: var(--text-3); white-space: nowrap; }
.sp-kchip.an { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
.sp-tipp { margin: -4px 0 10px; }
.sp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 10px; }
.sp-karte { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px; padding: 12px 14px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); transition: border-color .15s, background .15s; }
.sp-karte:hover { border-color: var(--rand-2); background: var(--flaeche-2); }
.sp-karte.bewusstlos { border-color: color-mix(in srgb, var(--rot) 45%, var(--rand)); }
.sp-karte.lobby { opacity: .72; }
.sp-av { text-decoration: none; align-self: start; }
.sp-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-zeile1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sp-name { font: 600 16px var(--cond); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
a.sp-name:hover { color: var(--live); }
.sp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-3); font-size: 12.5px; }
.sp-meta a { color: var(--text-2); }
.sp-zustand { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12.5px; min-width: 0; }
.sp-hp { width: 92px; height: 6px; border-radius: 3px; background: var(--flaeche-4); overflow: hidden; flex: none; }
.sp-hp i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }
.sp-hp-zahl { font: 600 12.5px var(--mono); min-width: 2.2em; }
.sp-item { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-item .sy { width: 14px; height: 14px; flex: none; }
.sp-aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--rand); }
.sp-knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--rand-2);
  background: var(--flaeche-2); color: var(--text-2); font: 500 12.5px var(--sans); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sp-knopf .sy { width: 15px; height: 15px; flex: none; }
.sp-knopf:hover { color: var(--text); background: var(--flaeche-3); border-color: var(--flaeche-4); }
.sp-knopf[data-code="CFCloud_HealPlayer"] .sy { color: var(--gruen); }
.sp-knopf[data-code="CFCloud_SpawnPlayerItem"] .sy { color: var(--gold); }
.sp-knopf[data-code="CFCloud_TeleportPlayer"] .sy { color: var(--blau); }
.sp-knopf.rund { width: 30px; padding: 0; justify-content: center; }
.sp-knopf.gefahr { margin-left: auto; }
.sp-knopf.gefahr:hover { color: #fff; background: color-mix(in srgb, var(--rot) 30%, var(--flaeche-2)); border-color: color-mix(in srgb, var(--rot) 60%, transparent); }
.sp-knopf.warnung:hover { color: var(--gelb); }
.sp-knopf.gefahr + .sp-knopf { margin-left: 0; }
.sp-alle { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.sp-alle .sp-knopf { height: 38px; justify-content: flex-start; }
.sp-alle .sp-knopf.gefahr { margin-left: 0; color: var(--rot); }
@media (max-width: 640px) {
  .sp-filter { margin-left: 0; width: 100%; }
  .sp-ktext small { max-width: 60vw; }
  .sp-knopf span { display: none; }
  .sp-knopf { width: 34px; height: 34px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sp-hp i { transition: none; } }

/* ---------- Serverinformationen (0.16) ---------- */
.si-wechsel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.si-wechsel .sp-chip { text-decoration: none; }
.si-held { position: relative; border-radius: 14px; overflow: hidden; min-height: 168px; display: flex; align-items: flex-end; padding: 22px 24px;
  background: linear-gradient(100deg, rgba(12,14,18,.96) 0%, rgba(12,14,18,.82) 45%, rgba(12,14,18,.35) 100%), var(--bild, none) center 40%/cover, var(--flaeche-2);
  border: 1px solid var(--rand); }
.si-held h1 { font-size: 40px; margin: 0; color: var(--text); }
.si-voll { color: var(--text-2); margin: 4px 0 12px; font-size: 13.5px; }
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.si-chips .marke-klein { display: inline-flex; align-items: center; gap: 5px; }
.si-chips .sy { width: 13px; height: 13px; }
.si-status { font: 600 12px var(--sans); padding: 3px 10px 3px 20px; border-radius: 10px; position: relative; background: var(--flaeche-3); color: var(--text-2); }
.si-status::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--text-3); }
.si-status.an { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 14%, transparent); }
.si-status.an::before { background: var(--gruen); box-shadow: 0 0 8px var(--gruen); }
.si-status.warte { color: var(--gelb); } .si-status.warte::before { background: var(--gelb); }
.si-zahlen strong small { font: 500 13px var(--sans); color: var(--text-3); }
.si-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.si-raster .block { margin: 0 0 16px; }
.si-raster h2 { margin-top: 0; }
.si-raster h2 .leise { font: 500 13px var(--sans); margin-left: 6px; }
.si-bkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.si-quelle { font-size: 12px; }
.si-modliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.si-mod { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; background: var(--flaeche-2); border: 1px solid var(--rand); min-width: 0; }
.si-mod.servermod { border-style: dashed; }
.si-mod.aus { opacity: .6; }
.si-mbild { width: 52px; height: 52px; border-radius: 7px; overflow: hidden; flex: none; background: var(--flaeche-4); display: grid; place-items: center;
  font: 600 20px var(--cond); color: var(--text-3); }
.si-mbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-mtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.si-mtitel { font: 600 14.5px var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-mtitel a { color: var(--text); text-decoration: none; }
.si-mtitel a:hover { color: var(--live); text-decoration: underline; }
.si-mmeta { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-aus { margin-top: 12px; } .si-aus summary { cursor: pointer; color: var(--text-2); margin-bottom: 8px; }
.si-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.si-dl dt { color: var(--text-3); }
.si-dl dd { margin: 0; color: var(--text); text-align: right; min-width: 0; }
.si-dl .si-voll-zeile { grid-column: 1 / -1; margin-top: 4px; }
.si-dl .si-pfad { grid-column: 1 / -1; text-align: left; overflow-wrap: anywhere; font-size: 11.5px; color: var(--text-2); background: var(--flaeche-2); padding: 5px 8px; border-radius: 6px; }
.si-anb { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.si-anb li { display: flex; flex-direction: column; padding: 8px 10px 8px 14px; border-left: 3px solid var(--flaeche-4); background: var(--flaeche-2); border-radius: 0 8px 8px 0; font-size: 13px; }
.si-anb li.ok { border-left-color: var(--gruen); } .si-anb li.rot { border-left-color: var(--rot); }
.si-anb li span { color: var(--text-2); font-size: 12.5px; }
.si-online { display: flex; flex-wrap: wrap; gap: 6px; }
.si-sp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 14px; background: var(--flaeche-2); color: var(--text); text-decoration: none; font-size: 13px; }
.si-sp:hover { background: var(--flaeche-3); }
@media (max-width: 980px) { .si-raster { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .si-held { min-height: 140px; padding: 16px; } .si-held h1 { font-size: 30px; } }