:root {
  --tief: #0d1117;
  --flaeche: #161b22;
  --rand: #262d36;
  --text: #e6edf3;
  --leise: #9aa7b4;
  --haupt: #2f81f7;
  --gruen: #3fb950;
  --rot: #f85149;
  --gelb: #d29922;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Das hidden-Attribut muss jede Layoutregel schlagen.
 *
 * Ohne diese Zeile bleibt eine ausgeblendete Ebene sichtbar: `[hidden]` aus dem
 * Browser-Stylesheet hat die Spezifitaet 0,1,0 und verliert gegen eine
 * Klassenregel wie `.schicht { display: flex }` (0,1,0 mit spaeterer Position).
 * Gemessen am 2026-10-30 auf dem iPhone: nach erfolgreicher Anmeldung lief
 * alles mit HTTP 200, die Anmeldemaske blieb aber als bildschirmfuellende
 * Ebene liegen (position: fixed, inset: 0, z-index: 50) und verdeckte die
 * Hauptansicht. Derselbe Fehler traf `main { display: flex }` gegen
 * <main hidden> beim Start.
 */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--tief); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
button { font: inherit; cursor: pointer; border-radius: 12px; border: 1px solid var(--rand); }
main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* Anmeldung ------------------------------------------------------------- */
.schicht {
  position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--tief); z-index: 50;
}
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px;
  padding: 24px; width: 100%; max-width: 420px; display: grid; gap: 12px;
}
.karte h1 { margin: 0 0 4px; font-size: 22px; }
.karte label { font-size: 14px; color: var(--leise); }
.karte input {
  font: inherit; padding: 14px; border-radius: 12px; border: 1px solid var(--rand);
  background: #0b0f14; color: var(--text); width: 100%;
}
.karte button { padding: 14px; background: var(--haupt); color: #fff; font-weight: 600; border: none; }
.fehler { color: var(--rot); font-size: 14px; margin: 0; }

/* Kopf und Reiter ------------------------------------------------------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rand);
  background: var(--flaeche);
}
.kopf-links { display: flex; align-items: center; gap: 8px; min-width: 0; }
.titel { font-weight: 600; }
#statuszeile { color: var(--leise); font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--leise); flex: none; }
.punkt.hoert { background: var(--gruen); box-shadow: 0 0 0 4px rgba(63,185,80,.18); }
.punkt.denkt { background: var(--gelb); }
.punkt.spricht { background: var(--haupt); }
.punkt.fehler { background: var(--rot); }
.punkt.freigabe { background: var(--gelb); box-shadow: 0 0 0 4px rgba(210,153,34,.2); }
.punkt.beendet, .punkt.bereit { background: var(--leise); }

#reiter { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--rand); }
#reiter button {
  flex: 1; padding: 10px; background: transparent; color: var(--leise);
  border: 1px solid var(--rand);
}
#reiter button.aktiv { background: var(--flaeche); color: var(--text); border-color: var(--haupt); }

.ansicht { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.ansicht.sichtbar { display: flex; flex-direction: column; }
h2 { font-size: 15px; color: var(--leise); margin: 16px 0 6px; font-weight: 600; }

/* Gespraech ------------------------------------------------------------- */
.gespraech { flex: 1; min-height: 90px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; padding-bottom: 8px; }
.zeile { padding: 10px 12px; border-radius: 14px; max-width: 92%; word-wrap: break-word; }
.zeile.nutzer { align-self: flex-end; background: #1f3a63; }
.zeile.assistent { align-self: flex-start; background: var(--flaeche); border: 1px solid var(--rand); }
.zeile.system, .zeile.werkzeug { align-self: center; background: transparent;
  color: var(--leise); font-size: 13px; border: 1px dashed var(--rand); }

.eingabe { display: flex; gap: 8px; padding: 8px 0; align-items: flex-end; }
.eingabe textarea {
  flex: 1; font: inherit; padding: 12px; border-radius: 12px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
  resize: none; max-height: 120px;
}
.eingabe button { padding: 12px 16px; background: var(--flaeche); color: var(--text); }

.steuerung { display: flex; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
.steuerung button { flex: 1; padding: 16px; font-weight: 600; border: none; }
button.haupt { background: var(--haupt); color: #fff; }
button.gefahr { background: var(--rot); color: #fff; }
button.leise { background: var(--flaeche); color: var(--text); }
button.klein { padding: 6px 10px; font-size: 13px; margin-top: 6px; }

.hinweis { color: var(--leise); font-size: 13px; margin: 6px 0; }
.hinweis.klein { font-size: 12px; }
.warnung { color: var(--gelb); font-size: 13px; }

/* Freigabe -------------------------------------------------------------- */
.freigabe {
  background: var(--flaeche); border: 1px solid var(--gelb); border-radius: 14px;
  padding: 14px; margin: 10px 0;
}
.freigabe h2 { color: var(--gelb); margin-top: 0; }
.freigabe dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px;
  margin: 0 0 10px; font-size: 14px; }
.freigabe dt { color: var(--leise); }
.freigabe dd { margin: 0; }
.knopfreihe { display: flex; gap: 8px; }
.knopfreihe button { flex: 1; padding: 14px; font-weight: 600; }

.liste { display: flex; flex-direction: column; gap: 6px; }
.liste .zeile { align-self: stretch; max-width: none; background: var(--flaeche);
  border: 1px solid var(--rand); font-size: 14px; }
.liste.klein .zeile { font-size: 12px; color: var(--leise); }