:root {
  --grund: #0b0d12;
  --flaeche: #12151d;
  --rand: #1f2430;
  --text: #e8ecf3;
  --text-leise: #8d96a8;
  --akzent: #5fd3c3;      /* bereit, spricht */
  --hoert: #63a4ff;       /* Mikrofon offen */
  --denkt: #e0b863;       /* Ochre aus WorkWith: Gehirn arbeitet */
  --fehler: #d97550;      /* Terrakotta aus WorkWith */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 40%, #121722 0%, var(--grund) 60%);
  color: var(--text);
  font-family: var(--schrift);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; font-size: 13px; color: var(--text-leise);
  letter-spacing: .04em; text-transform: uppercase;
}
.kopf-links { display: flex; align-items: center; gap: 10px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--fehler); box-shadow: 0 0 8px var(--fehler); transition: background .3s, box-shadow .3s; }
.punkt.an { background: var(--akzent); box-shadow: 0 0 8px var(--akzent); }
#uhr { font-variant-numeric: tabular-nums; }

/* DIE BUEHNE HAT NUR NOCH EINE SPALTE.
   Bis zum 18.09.2026 stand hier `1fr minmax(0, 380px)` und darunter zwei
   `:has()`-Regeln, die Buehne und Fuss wieder gerade ruecken mussten, wenn die
   Widget-Spalte leer war (gemessen bei 1440 px: Kugel bei x=522, Eingabefeld
   bei x=720 — 198 px Versatz zwischen oberer und unterer Haelfte).
   Die Fenster schweben jetzt ueber der Buehne statt neben ihr, also gibt es
   keine Spalte mehr, die eine Achse verschieben koennte. Beide Regeln sind
   ersatzlos entfallen. */
.buehne { display: grid; padding: 0 20px; min-height: 0; }

.mitte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
/* DIE KUGEL IST DAS ELEMENT, DAS PLATZ ABGIBT.
   Bis zum 18.09.2026 stand hier nichts weiter als `height: auto` — und weil
   `flex-shrink` in `.mitte` auf dem Standardwert 1 steht, hat der Flex-Algorithmus
   Kugel UND Dialogblock gemeinsam zusammengedrückt. Der Dialog hatte aber nur ein
   `min-height` als Boden, keinen reservierten Platz: gemessen bei 1280×720 wurde er
   auf 88 px gestaucht, obwohl sein Inhalt 115 px brauchte, und der Überstand wurde
   bei `overflow: visible` quer über das Eingabefeld im Fuß gemalt.
   Jetzt schrumpft nur noch die Kugel. Sie verliert dabei nichts außer Durchmesser;
   der Text verliert Worte.
   Bemessen wird sie dabei über die HÖHE, nicht mehr über die Breite: in einer
   Flex-Spalte greift das Schrumpfen an der Höhe an: bliebe die Breite gesetzt, würde
   die Kugel beim Schrumpfen zur Ellipse. So folgt die Breite über `aspect-ratio`
   der Höhe, und sie bleibt in jeder Größe rund. */
#kern { height: min(56vh, 80vw, 560px); width: auto; aspect-ratio: 1; display: block; flex: 0 1 auto; min-height: 0; }

/* `flex: none` ist der eigentliche Fix: der Dialogblock nimmt sich die Höhe, die
   sein Inhalt braucht, statt sie sich zuteilen zu lassen. `min-height` bleibt — es
   hält die Zeilen ruhig, solange noch nichts gesagt wurde, damit die Kugel nicht bei
   jedem Satz springt. */
.gespraech { width: min(720px, 100%); text-align: center; margin: 8px 0 6px; min-height: 5.5em; flex: none; }

/* DIE ZWEI SPRECHER.
   Was Marco gesagt hat, steht leise und in Anführungszeichen oben, Herold darunter
   in voller Schriftfarbe. Getrennt werden die beiden allein durch Abstand, Farbe und
   die Anführungszeichen — hier stand bis zum 18.09.2026 eine Haarlinie dazwischen,
   Marco braucht sie nicht. Der Abstand trägt die Trennung jetzt allein und ist
   deshalb größer als die 13 px, die er neben der Linie hatte.
   Begrenzt sind BEIDE Zeilen, und zwar aus demselben Grund: solange der Block
   unbegrenzt wachsen kann, kann er den Fuss erreichen. Die Nutzer-Zeile waechst
   beim Sprechen live mit dem Zwischenergebnis mit — das war der Fall, in dem die
   Ueberlappung auftrat. Drei Zeilen reichen, um zu erkennen, was verstanden wurde. */
.nutzer-zeile {
  color: var(--text-leise); font-size: 15px; line-height: 1.4; margin: 0 0 20px; min-height: 1.4em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
.nutzer-zeile:not(:empty)::before { content: "„"; }
.nutzer-zeile:not(:empty)::after { content: "“"; }
.nutzer-zeile.vorlaeufig { font-style: italic; opacity: .7; }

/* KLEINERE SCHRIFT, UND EIN SICHTBARES ENDE.
   Vorher: `clamp(17px, 2.2vh, 22px)` — 19,8 px gegen 15 px in der Nutzer-Zeile, ein
   Sprung um ein Drittel. Vorher stand hier auch `max-height` + `overflow: hidden`:
   das schnitt auf dem Telefon 133 von 215 px Text ab, ohne ein einziges Zeichen, das
   davon erzählt hätte. Die Zeilenbegrenzung kürzt an derselben Stelle, setzt aber
   ein „…“ — man sieht, dass noch etwas kommt (gehört hat man es ohnehin). */
.herold-zeile {
  font-size: clamp(15px, 1.7vh, 18px); line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden; text-wrap: balance;
}
.herold-zeile.fehler { color: var(--fehler); }
/* ABGEWUERGT: der Text bleibt LESBAR stehen — was Marco nicht hoeren wollte,
   will er vielleicht ueberfliegen. Gesagt wird es mit einem Wort statt mit
   einem Strich: die Zeile ist zentriert und vierzeilig geklammert, eine
   Kante links stuende weit weg vom Text, und Polsterung unter einer
   geklammerten `-webkit-box` legt die naechste Zeile frei (siehe oben). Ein
   angehaengtes Wort teilt sich den Fluss mit dem Text und kann beides
   nicht. */
.herold-zeile.abgebrochen { opacity: .75; }
.herold-zeile.abgebrochen::after {
  content: " · abgebrochen"; font-size: 12px; color: var(--text-leise); white-space: nowrap;
}

/* DIE FENSTERFLAECHE.
   Eine Ebene ueber allem, die selbst nichts abfaengt (`pointer-events: none`) —
   nur die Fenster darin tun es. Weil sie `fixed` liegt, ist sie kein Grid-Kind
   der Buehne mehr und reserviert auch keine Breite; die Kugel bekommt den
   ganzen Platz zurueck. Unter dem Token-Dialog (z-index 10), ueber allem
   anderen. */
.widgets {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
}

/* EIN FENSTER.
   `left`/`top` setzt das HUD als Inline-Stil; `transform` bleibt deshalb frei
   fuer das Ein- und Ausblenden und geraet dem Ziehen nicht in die Quere.
   Schatten und staerkeres Blur trennen es von der Kugel darunter — ohne sie
   schwimmt der Text im Verlauf. */
.widget {
  position: absolute;
  display: flex; flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  max-height: min(60vh, 520px);
  pointer-events: auto;
  background: rgba(18, 21, 29, .92); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}
.widget.sichtbar { opacity: 1; transform: none; }
.widget.geht { opacity: 0; transform: translateY(-6px) scale(.98); }
/* Waehrend des Ziehens keine Uebergaenge: sonst laeuft das Fenster dem Zeiger
   hinterher statt an ihm zu haengen. */
.widget.zieht { transition: none; box-shadow: 0 24px 56px rgba(0, 0, 0, .55); }
/* Der Inhalt scrollt, der Kopf bleibt stehen — ein Fenster, dessen Anfasser
   wegscrollt, laesst sich nicht mehr verschieben. */
.widget-inhalt { overflow-y: auto; min-height: 0; }

/* Eine einzelne Aufgabe: der Titel traegt, alles andere ordnet ein. */
.aufgabe-titel { font-size: 15px; line-height: 1.35; color: var(--text); }
.aufgabe-merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.merkmal {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(232, 236, 243, .06); border: 1px solid var(--rand);
  font-size: 12px; color: var(--text);
}
.merkmal-label { color: var(--text-leise); font-size: 11px; }
/* Der fertige Satz aus `bedeutet` — er traegt die Aussage, nicht die Merkmale
   darunter. Deshalb steht er direkt unter dem Titel und in Schriftfarbe. */
.qs-bedeutet { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text); }
.qs-punkte { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand); }
.qs-punkte-titel {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-leise); margin-bottom: 5px;
}
.qs-punkte ul { margin: 0; padding-left: 16px; }
.qs-punkte li { font-size: 12px; line-height: 1.5; color: var(--text-leise); }

.aufgabe-text {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand);
  font-size: 13px; line-height: 1.5; color: var(--text-leise);
}
/* DER KOPF IST DER ANFASSER — mit Maus, Finger und Tastatur.
   `touch-action: none` gibt uns die Fingerbewegung, statt dass die Seite
   scrollt; der Fokusring ist noetig, weil das Verschieben per Pfeiltaste sonst
   unsichtbar waere. */
.widget-kopf {
  display: flex; justify-content: space-between; align-items: center;
  flex: none; margin-bottom: 10px;
  cursor: grab; touch-action: none;
}
.widget.zieht .widget-kopf { cursor: grabbing; }
.widget-kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.widget-titel { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.widget-zu { background: none; border: 0; color: var(--text-leise); font-size: 16px; cursor: pointer; padding: 0 2px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.widget li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.eintrag-titel { font-size: 15px; }
.eintrag-untertitel { font-size: 12px; color: var(--text-leise); margin-top: 2px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(95, 211, 195, .12); color: var(--akzent); white-space: nowrap; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.kennzahl { text-align: center; }
.kennzahl .wert { font-size: 26px; font-weight: 600; color: var(--text); }
.kennzahl .label { font-size: 11px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.widget-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }

.fuss { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 20px 18px; }
.text-form { width: min(520px, 100%); }
#text-eingabe {
  width: 100%; background: var(--flaeche); border: 1px solid var(--rand); color: var(--text);
  border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 15px; outline: none;
}
#text-eingabe:focus { border-color: var(--akzent); }
.mikro {
  width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--rand);
  background: var(--flaeche); color: var(--text-leise); display: grid; place-items: center;
  cursor: pointer; touch-action: none; transition: transform .15s, border-color .2s, color .2s, box-shadow .2s;
}
.mikro.aktiv { border-color: var(--hoert); color: var(--hoert); box-shadow: 0 0 24px rgba(99, 164, 255, .45); transform: scale(1.06); }
.mikro:disabled { opacity: .4; cursor: not-allowed; }

/* Aktiv zuhören: ein Schalter, kein Knopf zum Halten — deshalb flach und
   klein neben dem Mikrofon, nicht daneben in gleicher Größe. Eingeschaltet
   trägt er dieselbe Farbe, die der Kern beim Hören zeigt. */
.dauerhoeren {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 5px 11px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: transparent; color: var(--text-leise);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.dauerhoeren:hover:not(:disabled) { color: var(--text); }
.dauerhoeren.an {
  color: var(--hoert); border-color: var(--hoert);
  background: rgba(99, 164, 255, .12);
}
.dauerhoeren:disabled { opacity: .4; cursor: not-allowed; }

.schalter { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.schalter .dauerhoeren { margin-top: 0; }

/* „Ohne Rückfrage" trägt die WARNFARBE, nicht die Hörfarbe. Ein scharfer
   Zustand, den man nicht sieht, ist eine Falle — und dieser überlebt einen
   Reload. */
.freigabe.an {
  color: var(--fehler); border-color: var(--fehler);
  background: rgba(217, 117, 80, .14);
}
.hinweis { margin: 0; font-size: 12px; color: var(--text-leise); }

.token-dialog { position: fixed; inset: 0; background: rgba(11, 13, 18, .92); display: grid; place-items: center; z-index: 10; }
.token-dialog[hidden] { display: none; }
.token-dialog form { display: flex; flex-direction: column; gap: 10px; width: min(320px, 90vw); }
.token-dialog label { font-size: 13px; color: var(--text-leise); }
.token-dialog input, .token-dialog button {
  font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--text);
}
.token-dialog button { background: var(--akzent); color: #06211d; border: 0; cursor: pointer; }

@media (max-width: 820px) {
  .buehne { grid-template-rows: auto 1fr; padding: 0 14px; }
  #kern { height: min(38vh, 70vw); width: auto; }
  .gespraech { min-height: 4.5em; }
  /* SCHMALE GERAETE BLEIBEN BEI DER GESTAPELTEN LISTE.
     Ein frei verschiebbares Fenster auf einem Telefon-HUD ist kein Gewinn: es
     verdeckt die Kugel, und zum Zurechtruecken fehlt die Flaeche. Also zurueck
     in den Fluss unter der Kugel. Die Inline-Positionen, die das HUD im
     Schwebe-Modus gesetzt hat, wirken bei `position: static` nicht — es
     braucht kein `!important`, um sie loszuwerden. */
  .widgets {
    position: static; z-index: auto; pointer-events: auto;
    display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto; padding: 0 0 8px; min-height: 0;
  }
  .widget {
    position: static; width: auto; max-height: none;
    box-shadow: none; backdrop-filter: blur(8px);
  }
  .widget-kopf { cursor: default; }
  .hinweis { display: none; }
  .text-form { order: 2; }
}