/* UNIKAT Voice — Farbwelt des Logos (Schwarz · Rot · Weiß), Systemschrift des iPhones.
   Signatur: der Sprachknopf sitzt in einer Drehzahlmesser-Skala, die den Pegel zeigt. */

@font-face { font-family: "Roboto"; src: url(fonts/roboto-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(fonts/roboto-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(fonts/roboto-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --grund: #000000;
  --flaeche: #0e0e0f;
  --flaeche-2: #19191b;
  --linie: #232325;
  --text: #ffffff;
  --text-2: #8e8e93;
  --text-3: #5a5a5f;
  --rot: #ed2124;
  --rot-leise: rgba(237, 33, 36, 0.14);
  --gelb: #e8b71a;
  --gruen: #3ecf6d;
  --strich-aus: #2c2c2f;

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", system-ui, sans-serif;
  --schrift-anzeige: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Roboto", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --rand: max(16px, env(safe-area-inset-left));
  --radius: 18px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #f2f2f4;
    --flaeche: #ffffff;
    --flaeche-2: #e9e9ed;
    --linie: #dadadf;
    --text: #0a0a0a;
    --text-2: #6b6b70;
    --text-3: #a1a1a6;
    --rot-leise: rgba(237, 33, 36, 0.09);
    --strich-aus: #d4d4d9;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.4 var(--schrift);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

/* --- Knöpfe ------------------------------------------------------------------ */
.knopf {
  appearance: none; border: 0; border-radius: 14px;
  padding: 14px 18px; min-height: 50px; width: 100%;
  background: var(--flaeche-2); font-weight: 600; cursor: pointer;
}
.knopf:active { transform: scale(0.98); }
.knopf-rot { background: var(--rot); color: #fff; }
.knopf-leise { background: transparent; color: var(--text-2); }
.knopf-klein { width: auto; min-height: 44px; padding: 10px 16px; }
.icon-knopf { appearance: none; border: 0; background: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--text-2); }
.icon-knopf svg { width: 22px; height: 22px; fill: currentColor; }

/* --- Anmeldung --------------------------------------------------------------- */
.anmeldung {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 32px var(--rand); max-width: 420px; margin: 0 auto;
}
.anmeldung-logo { width: 190px; height: auto; margin-bottom: 8px; }
@media (prefers-color-scheme: light) { .anmeldung-logo { filter: invert(1) hue-rotate(180deg); } }
.anmeldung-titel { font: 700 44px/1 var(--schrift-anzeige); letter-spacing: -0.03em; margin: 0 0 40px; }
.anmeldung-form { display: grid; gap: 12px; }
.anmeldung-form label { color: var(--text-2); font-size: 15px; }
.anmeldung-form input {
  border: 1px solid var(--linie); background: var(--flaeche); border-radius: 14px;
  padding: 15px 16px; font-family: var(--mono); font-size: 17px;
}
.fehlertext { color: var(--rot); min-height: 1.4em; margin: 4px 0 0; font-size: 15px; }

/* --- Kopf -------------------------------------------------------------------- */
.app { max-width: 560px; margin: 0 auto; padding: 0 var(--rand) calc(24px + env(safe-area-inset-bottom)); }
.kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 0 8px;
  background: linear-gradient(var(--grund) 75%, transparent);
}
.status { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.status-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 18%, transparent); }
body[data-ampel="gelb"] .status-punkt { background: var(--gelb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gelb) 18%, transparent); animation: pulsieren 1.6s ease-in-out infinite; }
body[data-ampel="rot"] .status-punkt { background: var(--rot); box-shadow: 0 0 0 4px var(--rot-leise); }
body[data-ampel="grau"] .status-punkt { background: var(--text-3); box-shadow: none; }
.projekt-chip {
  margin-left: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--text-2); border: 1px solid var(--linie); border-radius: 999px; padding: 5px 11px;
}
.projekt-chip + .icon-knopf, .status + .icon-knopf { margin-left: auto; }
.projekt-chip:not([hidden]) + .icon-knopf { margin-left: 0; }

/* --- Bühne: Instrument + aktueller Wortwechsel -------------------------------- */
.buehne { display: flex; flex-direction: column; align-items: center; padding: 12px 0 8px; }
.instrument { position: relative; width: min(78vw, 330px); aspect-ratio: 1; max-width: 100%; }
.skala { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.skala line { stroke: var(--strich-aus); stroke-width: 2.4; stroke-linecap: round; transition: stroke 90ms linear; }
.skala line.an { stroke: var(--rot); }
.skala line.nadel { stroke: var(--text); }
.skala line.lang { stroke-width: 3.2; }

.sprech-knopf {
  position: absolute; inset: 22%; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 25%, #262628 0%, #0c0c0d 55%, #000 100%);
  box-shadow: inset 0 0 0 1.5px #2e2e31, 0 12px 40px rgba(0, 0, 0, 0.55);
  display: grid; place-items: center; color: #fff;
  transition: transform 160ms ease, box-shadow 200ms ease;
}
@media (prefers-color-scheme: light) {
  .sprech-knopf { background: radial-gradient(120% 120% at 30% 25%, #2a2a2c 0%, #111 60%, #000 100%); box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 14px 34px rgba(0, 0, 0, 0.22); }
}
.sprech-knopf:active { transform: scale(0.965); }
.sprech-knopf svg { width: 30%; height: 30%; }
.mikro rect { fill: #fff; }
.mikro path { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.stopp { display: none; fill: #fff; }
body[data-modus="hoert"] .sprech-knopf { box-shadow: inset 0 0 0 2px var(--rot), 0 0 0 10px var(--rot-leise), 0 12px 40px rgba(0, 0, 0, 0.55); }
body[data-modus="oeffnet"] .sprech-knopf { box-shadow: inset 0 0 0 2px var(--text-3), 0 0 0 10px var(--flaeche-2), 0 12px 40px rgba(0, 0, 0, 0.55); animation: pulsieren 1.2s ease-in-out infinite; }
body[data-modus="hoert"] .mikro, body[data-modus="spricht"] .mikro { display: none; }
body[data-modus="hoert"] .stopp, body[data-modus="spricht"] .stopp { display: block; }

/* Der 270°-Bogen ist unten offen — der Satz sitzt in dieser Öffnung wie die Anzeige im Tacho. */
.zustand-text {
  position: relative; margin: calc(-0.13 * min(78vw, 330px)) 0 0; text-align: center;
  font: 600 22px/1.2 var(--schrift-anzeige); letter-spacing: -0.02em;
}
body[data-modus="hoert"] .zustand-text { color: var(--rot); }

.wechsel { width: 100%; margin-top: 18px; min-height: 2em; }
.du-sagtest { margin: 0 0 6px; color: var(--text-2); font-size: 15px; text-align: center; }
.du-sagtest:not(:empty)::before { content: "Du: "; color: var(--text-3); }
.antwort { margin: 0; font-size: 19px; line-height: 1.45; text-align: center; white-space: pre-wrap; }
.antwort.lang { text-align: left; font-size: 17px; }

/* --- Karten ------------------------------------------------------------------ */
.stapel { display: grid; gap: 10px; margin-top: 14px; }
.stapel:empty { display: none; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px 16px; animation: auftauchen 220ms ease-out;
}
.karte-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.karte-nr { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.karte-titel { margin: 6px 0 2px; font-weight: 600; font-size: 17px; }
.karte-text { margin: 2px 0 0; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.karte-zeit { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.karte-aktionen { display: flex; gap: 8px; margin-top: 12px; }
.karte-aktionen .knopf { min-height: 44px; padding: 10px 14px; }
.karte-ergebnis { margin: 10px 0 0; white-space: pre-wrap; font-size: 15px; color: var(--text); }

.chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--flaeche-2); color: var(--text-2); }
.chip-laeuft { color: #1a1300; background: var(--gelb); }
.chip-wartet, .chip-fehler { color: #fff; background: var(--rot); }
.chip-abgeschlossen { color: #04210f; background: var(--gruen); }

.karte-bestaetigung { border-color: var(--rot); background: linear-gradient(var(--rot-leise), var(--rot-leise)), var(--flaeche); }
.karte-bestaetigung .karte-kopf { color: var(--rot); font-weight: 600; }
.befehl {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--grund);
  font: 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}

/* --- Verlauf ----------------------------------------------------------------- */
.verlauf-bereich { margin-top: 28px; }
.abschnitt { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.verlauf li { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.verlauf .wer { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.verlauf .nutzer { color: var(--text-2); }
.verlauf .system { font-size: 13px; color: var(--text-3); border-left: 2px solid var(--linie); padding-left: 10px; }
.verlauf .unterbrochen::after { content: " — unterbrochen"; color: var(--text-3); }
.leer { color: var(--text-2); font-size: 15px; margin: 28px 0 0; }

/* --- Tippen ------------------------------------------------------------------ */
.tippen { display: flex; gap: 8px; margin-top: 24px; }
.tippen input {
  flex: 1; min-width: 0; border: 1px solid var(--linie); background: var(--flaeche);
  border-radius: 14px; padding: 12px 14px; font-size: 17px;
}

/* --- Einstellungen ----------------------------------------------------------- */
.blatt {
  border: 0; border-radius: 22px 22px 0 0; margin: auto 0 0; width: 100%; max-width: 560px;
  margin-inline: auto; padding: 20px var(--rand) calc(20px + env(safe-area-inset-bottom));
  background: var(--flaeche); color: var(--text); display: grid; gap: 10px;
}
.blatt:not([open]) { display: none; }
.blatt::backdrop { background: rgba(0, 0, 0, 0.5); }
.blatt h2 { margin: 0 0 6px; font-size: 20px; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.schalter input { width: 24px; height: 24px; accent-color: var(--rot); }
.klein { color: var(--text-3); font-size: 13px; margin: 4px 0; font-family: var(--mono); }

@keyframes pulsieren { 50% { opacity: 0.45; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}