/* Olymp – Gestaltung nach der Vorlage „Alpenglut“: dunkel, warmes Gold-Dämmerlicht.
   Farbregeln (der Nutzer ist farbenblind):
   Cyan = Daten, plus, ok · Gelb = Achtung, minus · Weiß = Zahlen (Alarm = weiße Fläche,
   schwarzer Text) · Grau = Titel, Vergleich · Gold nur als Schmuck.
   Kein Grün, Rot, Orange; nie Farbe allein – immer ✓ ! ✕ bzw. ▲/▼. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(schriften/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(schriften/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(schriften/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(schriften/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(schriften/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url(schriften/ibm-plex-serif-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(schriften/ibm-plex-serif-latin-600-normal.woff2) format('woff2'); }

:root {
  --grund: #0A0B10;
  --kopf: #08090D;
  --karte: #0B0D13;
  --karte-2: #0F1117;
  --feld: #0A0C11;
  --rand: #1E2430;
  --rand-hell: #2C3240;
  --rand-stark: #3A3F4B;
  --trenner: #171B24;
  --text: #E9ECF1;
  --weiss: #FFFFFF;
  --grau: #A0A6AF;
  --grau-dunkel: #6B717C;
  --cyan: #33C3FF;
  --cyan-flaeche: #0E1822;
  --gelb: #FFD43B;
  --gold: #D8B160;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'IBM Plex Serif', 'Palatino Linotype', Palatino, Georgia, serif;
  --rand-x: clamp(16px, 2.5vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); font: 400 16px/1.5 var(--sans); }
a { color: var(--cyan); }
a:hover { color: #8AD9FF; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input::placeholder { color: #7D848F; }
h1, h2, h3 { margin: 0; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.t-cyan { color: var(--cyan); }
.t-gelb { color: var(--gelb); }
.f-cyan { fill: var(--cyan); }
.f-gelb { fill: var(--gelb); }
.ring-weiss { fill: none; stroke: var(--weiss); stroke-width: 1.5; }
.zeichen { display: inline-block; flex: 0 0 auto; font-weight: 600; margin-right: .45em; }

/* ---- Kopf ---- */
.kopf { background: var(--kopf); border-bottom: 1px solid #1A1F29; }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 18px var(--rand-x) 16px; }
.kopf-marke { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; text-decoration: none; }
.marke { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.6vw, 56px); line-height: 1; letter-spacing: .24em; margin-right: -.24em; color: var(--gold); }
.bereich { font-size: 15px; letter-spacing: .02em; color: var(--grau); }
.kopf-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #23303D; background: var(--cyan-flaeche); font-size: 14px; white-space: nowrap; }
.chip .zeichen { margin-right: 0; }
.chip--ok { gap: 6px; border-color: var(--cyan); background: transparent; }
.chip--mono { border-color: var(--rand-stark); background: transparent; font-family: var(--mono); font-size: 13px; }
.lebt { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--cyan); animation: lebt 1.6s ease-in-out infinite; }
@keyframes lebt { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.uhr { font-family: var(--mono); font-size: 14px; color: var(--grau); white-space: nowrap; }
.kopf-nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.kopf-nav form { margin: 0; }
.knopf-text { padding: 0; border: 0; background: none; color: var(--cyan); text-decoration: underline; font-size: 14px; }
.knopf-text:hover { color: #8AD9FF; }

/* ---- Beispiel-Kennzeichnung ---- */
.beispiel-hinweis { display: flex; align-items: flex-start; margin: 16px var(--rand-x) 0; padding: 10px 14px; border: 1px solid var(--gelb); border-radius: 12px; background: #15130A; font-size: 15px; }
.beispiel-hinweis strong { color: var(--weiss); }
.marke-beispiel, .marke-spaeter { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border: 1px solid var(--gelb); border-radius: 999px; color: var(--gelb); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 18px; text-transform: none; white-space: nowrap; }
.marke-spaeter { border-color: var(--grau); color: var(--grau); }

/* ---- Raster ---- */
.inhalt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 20px var(--rand-x) 32px; }
.inhalt--schmal { display: block; max-width: 760px; margin: 0 auto; }
.spalte-haupt { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.spalte-seite { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ---- Karten ---- */
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 20px; overflow: hidden; }
.karte--innen { background: var(--karte-2); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow: visible; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 14px 20px; border-bottom: 1px solid var(--trenner); }
.karte-kopf--ohne-linie { padding: 0; border: 0; align-items: baseline; }
.karte-kopf h2, .seite-kopf h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--weiss); }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--grau); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.notiz { margin: 0; font-size: 13px; color: var(--grau); }
.notiz--rand { padding: 0 4px; }

/* ---- Szene ---- */
.szene-rahmen { background: radial-gradient(ellipse at 50% 16%, #241C10 0%, #181108 30%, #0D0A07 62%, #08090D 100%); }
.szene { display: block; width: 100%; height: auto; }
.szene--schmal { display: none; }
.sz-sterne { fill: var(--grau); }
.sz-funkeln { fill: var(--text); }
.funkeln { opacity: .15; animation: funkeln 3.4s ease-in-out infinite; }
.funkeln-1 { animation-delay: -.6s; }
.funkeln-2 { animation-delay: -2.4s; }
.funkeln-3 { animation-delay: -3s; }
@keyframes funkeln { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.sz-ring { fill: none; stroke: var(--gold); stroke-opacity: .4; stroke-width: 1; }
.sz-ringtext { font-family: var(--serif); font-size: 12px; letter-spacing: .3em; fill: var(--gold); }
.sz-berg { fill: #070502; }
.sz-wolken { fill: #F0DCB8; opacity: .12; }
.sz-linie { fill: none; stroke: var(--gold); stroke-opacity: .4; stroke-width: 1.3; stroke-linecap: round; }
.sz-linie--wartet { stroke: var(--grau-dunkel); stroke-opacity: .55; stroke-dasharray: 2 6; }
.sz-stufen { fill: #5B4A2A; }
.sz-hinweise { fill: var(--grau); font-family: var(--sans); font-size: 12px; paint-order: stroke; stroke: #0A0806; stroke-width: 4px; stroke-linejoin: round; }
.halo { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s; }
.halo.an { opacity: .9; animation: atmen 1.2s ease-in-out infinite; }
.halo--du { stroke: var(--gelb); stroke-width: 2.5; }
@keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.du-ping { fill: none; stroke: var(--gelb); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.kronos-sockel { fill: #0C0A06; stroke: var(--gold); stroke-opacity: .35; stroke-width: 1; }
.kronos-bahn { fill: none; stroke: var(--gold); stroke-opacity: .3; stroke-dasharray: 2 5; }
.kronos-bots { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: drehen 40s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.kronos-stein { fill: #13110B; stroke: var(--gold); stroke-width: 1.8; }
.kronos-k { font-family: var(--serif); font-size: 18px; font-weight: 600; fill: var(--gold); }
.agent-fels { fill: #13110B; stroke: var(--gold); stroke-width: 1.4; }
.agent-ring { fill: #0B0F16; stroke: var(--cyan); stroke-width: 2; }
.agent-kern { fill: var(--cyan); }
.sz-agent--wartet .agent-ring { stroke: var(--grau-dunkel); }
.sz-agent--wartet .agent-kern { fill: var(--grau-dunkel); }
.lorbeer { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1.4; }
.koordinator-pille { fill: #0E141C; stroke: var(--weiss); stroke-width: 1.6; }
.koordinator-name { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--weiss); }
.koordinator-modell { font-family: var(--mono); font-size: 11px; fill: var(--grau); }
.du-kreis { fill: #1A1608; stroke: var(--gelb); stroke-width: 2; }
.du-text { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--weiss); }
.sz-namen text { font-family: var(--sans); paint-order: stroke; stroke: #0A0806; stroke-width: 4px; stroke-linejoin: round; }
.sz-namen .sz-name { font-size: 13px; font-weight: 600; fill: var(--text); }
.sz-namen .sz-unter { font-family: var(--mono); font-size: 11px; fill: var(--grau); }
.sz-namen .sz-kronos-name { font-size: 14px; font-weight: 600; fill: var(--gold); }
.sz-namen .sz-kronos-unter { font-size: 11px; fill: var(--grau); }
.blase { opacity: 0; transition: opacity .2s; }
.blase.an { opacity: 1; }
.blase rect { fill: var(--cyan-flaeche); stroke: var(--cyan); stroke-opacity: .7; }
.blase-punkt { fill: var(--cyan); animation: punkt 1s ease-in-out infinite; }
.blase-punkt--2 { animation-delay: .15s; }
.blase-punkt--3 { animation-delay: .3s; }
@keyframes punkt { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Punkte auf den Linien (olymp.js setzt Lage und Deckkraft) */
.paket { opacity: 0; }
.paket-cyan { fill: var(--cyan); }
.paket-gelb { fill: var(--gelb); }
.paket-hof { opacity: .2; }
.paket-weiss-hof { fill: var(--weiss); opacity: .16; }
.paket-weiss { fill: var(--karte); stroke: var(--weiss); stroke-width: 2; }

/* Untertitel unter der Szene: ohne Skript nur die letzte Nachricht */
.untertitel-leiste { display: grid; align-items: center; min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--trenner); }
.untertitel { grid-area: 1 / 1; margin: 0; font-size: 15px; line-height: 22px; opacity: 0; transition: opacity .25s; }
.untertitel:last-child { opacity: 1; }
.js .untertitel:last-child { opacity: 0; }
.js .untertitel.an { opacity: 1; }
.untertitel-wer { margin-right: 10px; font-family: var(--mono); font-size: 13px; }

/* ---- Kronos-Kacheln ---- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kachel { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); }
.kachel-titel { font-size: 13px; color: var(--grau); }
.kachel-wert { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--weiss); }
.kachel-wert .zeichen { margin-right: .3em; }
.kachel-wert--text { font-size: 18px; }
.kachel-von { font-size: 14px; font-weight: 400; color: var(--grau); }
.kachel-unter { font-size: 13px; color: var(--grau); }
.meter { display: block; width: 100%; height: 6px; margin: 6px 0 2px; border-radius: 3px; overflow: hidden; }
.meter-spur { fill: #12394B; }
.meter-wert { fill: var(--cyan); }
.meter-wert--knapp { fill: var(--gelb); }

/* ---- Eingabe (Koordinator, kommt später) ---- */
.eingabe { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; border: 1px solid var(--rand-hell); background: var(--feld); }
.eingabe input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--weiss); font-size: 16px; }

/* ---- Knöpfe ---- */
.knopf { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rand-stark); background: transparent; color: var(--text); font-size: 15px; font-weight: 500; }
.knopf--haupt { border-color: var(--cyan); background: var(--cyan); color: #0A0B0E; font-weight: 600; }
.knopf:disabled { opacity: .45; }

/* ---- Wartet auf dich ---- */
.seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px; }
.zahl-rund { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--rand-stark); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--weiss); }
.vorlage { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 16px; background: var(--karte-2); }
.vorlage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chip-eilig { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--gelb); color: #111217; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.chip-neutral { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--grau); font-size: 13px; line-height: 18px; white-space: nowrap; }
.vorlage-bereich { font-size: 13px; color: var(--grau); }
.vorlage h3 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--weiss); }
.vorlage p { margin: 0; font-size: 14px; line-height: 20px; color: var(--grau); }
.vorlage-knoepfe { display: flex; gap: 10px; margin-top: 4px; }
.vorlage-knoepfe .knopf { flex: 1 1 0; }
.vorlage-knoepfe .knopf--haupt { flex: 1.6 1 0; }
.termin { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 16px; }
.termin-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.termin-wann { font-family: var(--mono); font-size: 14px; line-height: 21px; }
.termin-was { font-size: 15px; line-height: 21px; }

/* ---- Meldungen ---- */
.meldung { display: flex; align-items: flex-start; width: 100%; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 15px; text-align: left; }
.meldung--fehler { border: 1px solid var(--gelb); }
.meldung--fehler .zeichen { color: var(--gelb); }
.meldung--ok { border: 1px solid var(--cyan); }
.meldung--ok .zeichen { color: var(--cyan); }
.meldung--sperre { background: var(--weiss); color: #000000; font-weight: 500; }

/* ---- Anmelden ---- */
.seite-anmelden { display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(ellipse at 50% 0%, #241C10 0%, #181108 28%, #0D0A07 58%, var(--grund) 100%); }
.anmelden { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 400px; text-align: center; }
.marke--anmelden { font-size: clamp(46px, 13vw, 68px); }
.anmelden-unter { margin: 0 0 6px; color: var(--grau); font-size: 15px; letter-spacing: .06em; }
.formular { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 4px 0 0; text-align: left; }
.formular label { font-size: 14px; color: var(--grau); }
.formular input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rand-hell); background: var(--feld); color: var(--weiss); font-size: 17px; }
.formular .knopf { margin-top: 8px; min-height: 50px; font-size: 16px; }
.formular--zeile { flex-direction: row; flex-wrap: wrap; align-items: center; }
.formular--zeile input { flex: 1 1 160px; font-family: var(--mono); letter-spacing: .2em; }
.formular--zeile .knopf { margin-top: 0; }

/* ---- Sicherheit ---- */
.seite-titel { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--weiss); }
.karte--innen h2 { font-size: 17px; font-weight: 600; color: var(--weiss); }
.status { display: flex; align-items: flex-start; margin: 0; }
.schritte { margin: 0; padding-left: 22px; }
.qr-rahmen { align-self: flex-start; padding: 12px; border-radius: 12px; background: var(--weiss); }
.qr { display: block; width: 220px; height: 220px; }
.schluessel { padding: 2px 6px; border-radius: 6px; background: var(--feld); font-family: var(--mono); font-size: 15px; color: var(--weiss); word-break: break-all; }
.zurueck { margin: 4px 0 0; font-size: 14px; }

/* ---- Handy ---- */
@media (max-width: 640px) {
  .szene--breit { display: none; }
  .szene--schmal { display: block; }
  .kopf-innen { padding-top: 14px; }
  .karte-kopf, .untertitel-leiste { padding-left: 16px; padding-right: 16px; }
  .karte--innen { padding: 16px; }
  .beispiel-hinweis { font-size: 14px; }
  .eingabe { flex-wrap: wrap; }
  .eingabe .knopf { flex: 1 1 100%; }
}

/* ---- Weniger Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  .lebt, .funkeln, .kronos-bots, .du-ping, .blase-punkt, .halo.an { animation: none !important; }
  .sz-pakete { display: none; }
}

/* ---- Bereiche im Kopf ---- */
.marke-link { text-decoration: none; }
.bereiche { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.bereiche a { padding: 2px 0; color: var(--grau); text-decoration: none; border-bottom: 2px solid transparent; }
.bereiche a:hover { color: var(--weiss); }
.bereiche a[aria-current="page"] { color: var(--weiss); border-bottom-color: var(--weiss); }

/* ---- Hinweise aus dem Betrieb (echt, keine Beispiele) ---- */
.hinweise { display: flex; flex-direction: column; gap: 10px; }
.hinweise--start { margin: 16px var(--rand-x) 0; }
.hinweise--start .notiz { padding: 0 4px; }
.hinweis { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gelb); background: #15130A; }
.hinweis-text { display: flex; align-items: flex-start; margin: 0; font-size: 15px; }
.hinweis--achtung .zeichen { color: var(--gelb); }
.hinweis--alarm { border-color: var(--weiss); background: var(--weiss); color: #000000; font-weight: 500; }
.hinweis--alarm .zeichen { color: #000000; }
.hinweis--ok { border-color: var(--cyan); background: transparent; }
.hinweis--ok .zeichen { color: var(--cyan); }
.hinweis-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hinweis-aktionen form { margin: 0; }
.verschieben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.verschieben label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--grau); }
.verschieben input, .grenze input { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--rand-hell); background: var(--feld); color: var(--weiss); font-size: 16px; }
.hinweis--alarm .verschieben label { color: #000000; }

/* ---- Seite Betrieb ---- */
.inhalt--betrieb { display: block; }
.betrieb { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; margin: 0 auto; }
.betrieb .seite-titel { margin-top: 4px; }
.karte--innen h3 { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--weiss); }
.veraltet { color: var(--gelb); font-weight: 600; white-space: nowrap; }
.kachel-stand { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--grau); }
.kachel-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--grau); }
.kachel-zahl { color: var(--weiss); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Verbrauch: Kacheln mit Zeilen (Bezeichnung + Zahl) brauchen mehr Breite – auf dem Handy untereinander. */
.verbrauch-server .kacheln { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gruende { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--grau); }
.grenzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.grenze { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); }
.grenze-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.grenze-zeile input { flex: 1 1 140px; min-width: 0; font-variant-numeric: tabular-nums; }
.frischstart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.aufklapp summary { cursor: pointer; font-size: 14px; color: var(--grau); }
.aufklapp summary:hover { color: var(--weiss); }
.schrittliste { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.schrittliste li { display: flex; align-items: flex-start; }
.schrittliste--eng { margin: 2px 0 0; }
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: 12px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { padding: 8px 12px; text-align: left; font-weight: 600; color: var(--grau); border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 7px 12px; border-bottom: 1px solid var(--trenner); white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; color: var(--weiss); font-variant-numeric: tabular-nums; }
.verbrauch-server { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--trenner); }
code { font-family: var(--mono); font-size: .92em; padding: 1px 5px; border-radius: 5px; background: var(--feld); color: var(--weiss); }