:root {
  --bg: #f4f4f6; --flaeche: #ffffff; --flaeche-2: #f7f7f9; --rand: #e4e4ea; --text: #16181d; --leise: #6b7280;
  --akzent: #4f46e5; --akzent-text: #ffffff; --akzent-weich: #eef0ff;
  --ok: #15803d; --warn: #b45309; --fehl: #dc2626;
  --schatten: 0 12px 32px rgba(15, 18, 30, .14), 0 2px 6px rgba(15, 18, 30, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f12; --flaeche: #17181c; --flaeche-2: #1e2026; --rand: #2b2d35; --text: #ececf1; --leise: #9aa0aa;
    --akzent: #818cf8; --akzent-text: #0e0f12; --akzent-weich: #23264a;
    --ok: #4ade80; --warn: #fbbf24; --fehl: #f87171;
    --schatten: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 14px/1.4 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.platz { flex: 1; }
.klein { color: var(--leise); font-size: 12px; margin: 0; }

/* Knöpfe */
button, a.leicht, select, input, textarea { font: inherit; color: inherit; }
button, a.leicht {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; }
.leicht:hover:not(:disabled) { background: var(--flaeche-2); border-color: var(--rand); }
.haupt { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.haupt:hover { filter: brightness(1.08); }
input, select {
  height: 36px; padding: 0 12px; border: 1px solid var(--rand); border-radius: 9px; background: var(--flaeche);
}

/* Kopfzeile */
#leiste {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 54px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand); position: relative; z-index: 5;
}
#links { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
#rechts { display: flex; align-items: center; gap: 6px; flex: 1 1 0; justify-content: flex-end; }
#mitte { display: flex; align-items: center; gap: 8px; flex: none; }
#marke {
  width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff;
}
#titel { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 90px; line-height: 1.25; }
#name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stand { color: var(--leise); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#demo-wahl { height: 30px; font-size: 12px; flex: 0 1 180px; min-width: 60px; }

#modus { display: flex; padding: 3px; gap: 2px; background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 11px; }
#modus button { height: 28px; padding: 0 12px; border-radius: 8px; color: var(--leise); font-weight: 500; }
#modus button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(15, 18, 30, .14); }
#werkzeuge { display: flex; gap: 2px; }

#e-stand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--leise); padding: 0 6px; white-space: nowrap; }
#e-stand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#e-stand[data-art="ok"] { color: var(--ok); }
#e-stand[data-art="offen"] { color: var(--warn); }
#e-stand[data-art="offen"]::before { animation: puls 1s ease-in-out infinite; }
#e-stand[data-art="fehl"] { color: var(--fehl); }
@keyframes puls { 50% { opacity: .25; } }

.menue { position: relative; }
#mehr {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px; display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--schatten);
}
#mehr button, #mehr a {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 8px; color: var(--text); text-decoration: none; border: 0;
}
#mehr button:hover, #mehr a:hover { background: var(--flaeche-2); }

/* Seite */
main { flex: 1; min-height: 0; display: flex; position: relative; }
#rahmen { flex: 1; border: 0; background: #fff; }
#meldung { margin: auto; padding: 24px 16px; max-width: 520px; text-align: center; color: var(--leise); white-space: pre-line; }

/* Daten-Panel */
#daten-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(880px, 100%); display: flex; flex-direction: column;
  background: var(--flaeche); border-left: 1px solid var(--rand); box-shadow: var(--schatten);
  animation: rein .18s ease-out;
}
@keyframes rein { from { transform: translateX(24px); opacity: 0; } }
#daten-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px 18px; }
#daten-kopf h2 { margin: 0; font-size: 16px; }
#daten-suche { flex: 1; min-width: 0; height: 34px; background: var(--flaeche-2); }
#daten-reiter { display: flex; gap: 6px; padding: 4px 18px 12px; overflow-x: auto; border-bottom: 1px solid var(--rand); }
#daten-reiter button {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rand); color: var(--leise); font-size: 13px;
}
#daten-reiter button[aria-selected="true"] { background: var(--akzent-weich); border-color: transparent; color: var(--akzent); font-weight: 600; }
#daten-reiter button small { font-weight: 400; opacity: .75; }
#daten-gitter { flex: 1; min-height: 0; overflow: auto; }
#daten-gitter table { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
#daten-gitter th {
  position: sticky; top: 0; z-index: 1; background: var(--flaeche); text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--rand); white-space: nowrap; font-weight: 600; font-size: 12px; color: var(--leise);
}
#daten-gitter td { padding: 0; border-bottom: 1px solid var(--rand); }
#daten-gitter tbody tr:hover td { background: var(--flaeche-2); }
#daten-gitter td.nr { padding: 0 10px 0 18px; color: var(--leise); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#daten-gitter td.akt { white-space: nowrap; padding: 0 8px; }
#daten-gitter td.akt button { height: 28px; width: 28px; padding: 0; color: var(--leise); opacity: 0; }
#daten-gitter tr:hover td.akt button, #daten-gitter td.akt button:focus-visible { opacity: 1; }
#daten-gitter td.akt button:hover { background: var(--rand); color: var(--text); }
#daten-gitter td input {
  width: 100%; min-width: 130px; height: 36px; border: 0; border-radius: 0; background: transparent; padding: 0 10px;
}
#daten-gitter td input.zahl { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
#daten-gitter td input:focus { outline: 2px solid var(--akzent); outline-offset: -2px; background: var(--flaeche); border-radius: 6px; }
#daten-gitter td input.falsch { outline: 2px solid var(--fehl); outline-offset: -2px; border-radius: 6px; }
#daten-gitter p { padding: 28px 18px; color: var(--leise); margin: 0; }
#daten-fuss { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--rand); font-size: 12px; color: var(--leise); }
#daten-fuss button { height: 30px; padding: 0 9px; color: var(--text); }

/* Toasts */
#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 50; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px; border-radius: 12px; background: #1c1e26; color: #f4f4f6; box-shadow: var(--schatten);
  animation: hoch .18s ease-out; font-size: 13.5px;
}
.toast.fehl { background: #7f1d1d; }
.toast button { height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.toast button:hover { background: rgba(255, 255, 255, .24); }
@keyframes hoch { from { transform: translateY(10px); opacity: 0; } }

/* Dialoge */
dialog {
  width: min(540px, calc(100vw - 32px)); border: 1px solid var(--rand); border-radius: 18px; padding: 20px 22px;
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten);
}
dialog::backdrop { background: rgba(10, 12, 20, .45); backdrop-filter: blur(3px); }
dialog[open] { animation: hoch .16s ease-out; }
.d-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
h2 { margin: 0; font-size: 18px; font-weight: 650; }
h3 { margin: 18px 0 6px; font-size: 12px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
#einladen { display: flex; gap: 8px; flex-wrap: wrap; }
#person { flex: 1 1 220px; min-width: 0; }
#teilen-meldung { min-height: 1.4em; margin-top: 8px; }
#freigaben { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; }
#freigaben li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: hsl(var(--h, 240) 55% 52%);
}
#freigaben .wer { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
#freigaben .wer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#freigaben .wer small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#freigaben select { height: 30px; padding: 0 8px; font-size: 13px; }
#freigaben .rolle { color: var(--leise); font-size: 13px; padding-right: 8px; }
#freigaben li > button { height: 30px; width: 30px; padding: 0; color: var(--leise); }
#freigaben li > button:hover { background: var(--flaeche-2); color: var(--fehl); }
#teilen-fuss { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand); }

#quelltext { width: min(1000px, calc(100vw - 32px)); }
#quelltext-feld {
  width: 100%; height: 60vh; margin: 10px 0; padding: 12px; resize: vertical; white-space: pre; tab-size: 2;
  font: 12px/1.5 "Cascadia Code", Consolas, ui-monospace, monospace;
  background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 12px;
}
#quelltext-fuss { display: flex; }

@media (max-width: 860px) {
  #leiste { flex-wrap: wrap; }
  #rechts span, #werkzeuge span, #stand { display: none; }
  #rechts #e-stand { display: inline-flex; }
}