:root {
  --bg: #141414; --flaeche: #1e1e1e; --flaeche2: #262626; --linie: #333; --text: #e8e6e3; --leise: #9a9690;
  --akzent: #e0a040; --gruen: #5cb85c; --rot: #d9534f; --blau: #5b9bd5; --lila: #a98bd8;
  --radius: 8px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, system-ui, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; }
button:hover { border-color: #555; }
button.haupt { background: var(--akzent); color: #111; border-color: var(--akzent); font-weight: 600; }
button.klein { padding: 3px 8px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 10px; }
textarea { width: 100%; resize: vertical; min-height: 64px; }
a { color: var(--akzent); }
.leer { color: var(--leise); padding: 24px; }
.fehler { color: var(--rot); }
.leise { color: var(--leise); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }

/* Anmeldung */
.karte { max-width: 380px; margin: 12vh auto; background: var(--flaeche); padding: 28px; border-radius: 14px; }
.karte h1 { margin: 0 0 6px; font-size: 1.3em; }
.karte input { width: 100%; margin: 10px 0; }
.karte button { width: 100%; }

/* Kopf */
header.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
header.kopf h1 { font-size: 1.1em; margin: 0; }
header.kopf .runde { background: var(--flaeche2); border-radius: 99px; padding: 3px 10px; font-size: 13px; }
header.kopf .abgenommen { background: #234a23; color: #b7e4b7; border-radius: 99px; padding: 3px 10px; font-size: 13px; }
header.kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Projektliste */
main.liste { max-width: 900px; margin: 0 auto; padding: 16px; }
.projekt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--flaeche); border-radius: var(--radius); margin-bottom: 8px; text-decoration: none; color: inherit; }
.projekt:hover { background: var(--flaeche2); }
.projekt .name { font-weight: 600; }
.projekt .zahlen { margin-left: auto; color: var(--leise); font-size: 13px; text-align: right; }
.neu { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.neu input { flex: 1 1 180px; }

/* Arbeitsfläche */
.flaeche { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; height: calc(100vh - 58px); }
.links { display: flex; flex-direction: column; min-width: 0; padding: 12px 16px; gap: 10px; overflow: auto; }
.rechts-spalte { border-left: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; min-height: 0; }
.videobox { background: #000; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; min-height: 200px; }
.videobox video { width: 100%; max-height: 62vh; display: block; }
.steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.steuerung .tc { font-size: 18px; padding: 0 8px; }
.steuerung .abstand { flex: 1; }
.zeitleiste { position: relative; height: 26px; background: var(--flaeche2); border-radius: 6px; cursor: pointer; touch-action: none; }
.zeitleiste .kopfpos { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--akzent); pointer-events: none; }
.zeitleiste .bereich { position: absolute; top: 0; bottom: 0; background: rgba(224, 160, 64, .18); pointer-events: none; }
.zeitleiste .marke { position: absolute; top: 4px; width: 8px; height: 18px; margin-left: -4px; border-radius: 3px; background: var(--blau); }
.zeitleiste .marke.kunde { background: var(--akzent); }
.zeitleiste .marke.ki { background: var(--lila); }
.zeitleiste .marke.erledigt { opacity: .35; }
.zeitleiste .marke.spanne { height: 6px; top: 16px; margin-left: 0; border-radius: 2px; }
.eingabe { background: var(--flaeche); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.eingabe .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eingabe .zeile input { flex: 1 1 140px; }
.hilfe { font-size: 12px; color: var(--leise); }

/* Kommentare */
.kommentare-kopf { padding: 10px 14px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 8px; }
.kommentare { overflow: auto; flex: 1; padding: 6px; }
.kommentar { padding: 10px; border-radius: var(--radius); margin-bottom: 6px; background: var(--flaeche2); cursor: pointer; border-left: 3px solid var(--blau); }
.kommentar.kunde { border-left-color: var(--akzent); }
.kommentar.ki { border-left-color: var(--lila); }
.kommentar.aktiv { outline: 1px solid var(--akzent); }
.kommentar.erledigt .text { opacity: .55; }
.kommentar .meta { display: flex; gap: 8px; font-size: 12px; color: var(--leise); align-items: center; flex-wrap: wrap; }
.kommentar .meta .tc { color: var(--akzent); }
.kommentar .text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kommentar .deutung, .kommentar .antwort { font-size: 13px; color: var(--leise); margin-top: 4px; white-space: pre-wrap; }
.marke-status { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #333; }
.marke-status.eingearbeitet { background: #234a23; color: #b7e4b7; }
.marke-status.nicht_umgesetzt { background: #4a2323; color: #e4b7b7; }
.marke-status.rueckfrage { background: #4a3d23; color: #e4d3b7; }
.kommentar .admin { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kommentar .admin select, .kommentar .admin input { padding: 4px 6px; font-size: 13px; }
.kommentar .admin input { flex: 1 1 120px; }

/* Admin-Bereich */
details.verwaltung { background: var(--flaeche); border-radius: var(--radius); padding: 8px 12px; }
details.verwaltung summary { cursor: pointer; color: var(--leise); }
details.verwaltung .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
details.verwaltung input[type=text], details.verwaltung input[type=password] { flex: 1 1 200px; }
progress { width: 100%; height: 8px; }

@media (max-width: 900px) {
  .flaeche { grid-template-columns: 1fr; height: auto; }
  .rechts-spalte { border-left: 0; border-top: 1px solid var(--linie); }
  .kommentare { max-height: none; }
  .links { padding: 10px 16px; }
}
.schmal { width: 5em; }