/* Leitstand: Beamer, dunkler Modus. Ergaenzt aphiro-basis.css, ersetzt es nie.
   Ausschliesslich semantische Tokens — Rohfarben brechen den Modus. */

body { margin: 0; background: var(--ap-bg); color: var(--ap-text); }

.ls-seite {
  display: grid;
  /* Vier Zeilen: Kopf, Bedienzeile, Mitte, Protokoll. Das `1fr` gehoert der
     MITTE — mit drei Angaben rutschte es auf die Bedienzeile, und die dehnte
     sich ueber den halben Bildschirm, waehrend die Tafel darunter zusammensank. */
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  gap: var(--ap-space-4);
  padding: var(--ap-space-5) var(--ap-space-6);
  box-sizing: border-box;
}

.ls-kopf { display: flex; align-items: baseline; gap: var(--ap-space-5); }
.ls-kopf .ap-title { flex: 1; }
.ls-uhr {
  font-family: var(--ap-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ap-size-section);
  color: var(--ap-text-muted);
}
.ls-live { display: flex; align-items: center; gap: var(--ap-space-2);
           font-size: var(--ap-size-small); color: var(--ap-text-muted); }

/* --- Bedienzeile ---------------------------------------------------------- */
/* Die Ausfallebene fuer Telegram. Sie steht bewusst schmal ueber der Tafel —
   sie ist Werkzeug, nicht Inhalt, und der Blick des Bankers gehoert der Tafel. */
.ls-bedienen { display: flex; align-items: flex-end; gap: var(--ap-space-5); flex-wrap: wrap; }
/* `:not([hidden])` ist hier keine Zierde, sondern der Grund, warum der
   Freigabe-Knopf ueberhaupt verschwindet: Das `hidden`-Attribut wirkt nur ueber
   das Browser-Stylesheet, und jede eigene `display`-Regel schlaegt es. Ohne
   diesen Zusatz stand der Knopf nach der Freigabe weiter auf dem Beamer —
   sichtbar, klickbar, ohne Wirkung. Gefunden im Bild, nicht im Test: Der Test
   liest das Attribut, der Beamer zeigt die berechnete Darstellung. */
.ls-bedienen form:not([hidden]) { display: flex; align-items: flex-end;
                                  gap: var(--ap-space-3); }
.ls-bedienen .ap-input { min-width: 320px; }
.ls-hinweis { font-size: var(--ap-size-small); color: var(--ap-text-muted);
              line-height: 40px; }
/* Farbe nie allein als Bedeutungstraeger: Die Meldung IST Text, die Farbe
   unterstreicht ihn nur. */
.ls-hinweis--fehler { color: var(--ap-danger); }

/* Zwei Spalten: Tafel so breit wie moeglich, Chat mit fester Breite. Der Chat
   darf nicht mitwachsen — Zeilenlaenge hoechstens 65 Zeichen (DESIGN.md). */
.ls-mitte { display: grid; grid-template-columns: 1fr 520px; gap: var(--ap-space-4);
            min-height: 0; }
.ls-tafel, .ls-chat { border: 1px solid var(--ap-border); background: var(--ap-surface);
                      min-height: 0; display: flex; flex-direction: column; }
.ls-tafel > h2, .ls-chat > h2 {
  font-size: var(--ap-size-section); padding: var(--ap-space-3) var(--ap-space-4);
  border-bottom: 1px solid var(--ap-border); flex: none;
}

/* Die rechte Spalte traegt zwei Karten uebereinander: oben der
   Begruendungs-Chat, unten das Fragefenster (Paket N). Der Chat behaelt den
   groesseren Anteil — er ist das Schaustueck, das Fragefenster die Antwort
   darauf. Keine zweite Kartenkomponente: Beide sind `.ls-chat`. */
/* 1.15fr, nicht 1.4fr: Bei genau einer Frage und einer Antwort rollte der
   Verlauf um eine Zeile, und die Sprecherzeile „Frage" stand oben ausserhalb
   des Kastens. Auf dem Beamer sah die erste Frage dadurch aus wie eine Zeile
   ohne Absender. Im Bild gefunden, nicht im Test — der Test liest den Text,
   der Beamer zeigt den Ausschnitt. */
.ls-rechts { display: grid; grid-template-rows: 1.15fr 1fr; gap: var(--ap-space-4);
             min-height: 0; }
.ls-fragen > h2 { font-size: var(--ap-size-section); }
/* Die Antwort ruecken statt faerben: Farbe ist auf dieser Seite dem Waechter
   vorbehalten (ein Akzent je Ansicht), und die Sprecherzeile sagt ohnehin,
   wer spricht. */
.ls-satz--antwort { margin-left: var(--ap-space-5); }
.ls-fragen-form { display: flex; align-items: flex-end; gap: var(--ap-space-3);
                  flex: none; padding: var(--ap-space-3) var(--ap-space-4);
                  border-top: 1px solid var(--ap-border); flex-wrap: wrap; }
.ls-fragen-form .ap-field { flex: 1; min-width: 240px; }
/* 44 px: Die Regel verlangt sie fuer alles Antippbare, und auf dem Beamer wird
   dieses Feld von Hand bedient, waehrend jemand zusieht. */
.ls-fragen-form .ap-input, .ls-fragen-form .ap-button { min-height: 44px; }

/* --- Plantafel ------------------------------------------------------------ */
.ls-raster { overflow: auto; padding: 0 var(--ap-space-4) var(--ap-space-4); }
/* Eine Rasterzeile: Namensspalte plus 40 gleich breite Tagesspalten. Die
   Spaltenzahl steht in --ls-tage, damit CSS und Daten nicht auseinanderlaufen. */
.ls-zeile, .ls-kw, .ls-tage {
  display: grid;
  grid-template-columns: 190px repeat(var(--ls-tage), minmax(0, 1fr));
  align-items: stretch;
}
.ls-kw, .ls-tage { position: sticky; background: var(--ap-surface); z-index: 2; }
.ls-kw { top: 0; }
.ls-tage { top: 26px; border-bottom: 1px solid var(--ap-border-strong); }
.ls-kw span, .ls-tage span {
  font-family: var(--ap-font-mono); font-size: var(--ap-size-small);
  font-variant-numeric: tabular-nums; color: var(--ap-text-muted);
  padding: var(--ap-space-1) 0; text-align: center; overflow: hidden;
}
.ls-kw span { border-left: 1px solid var(--ap-border); font-weight: 560;
              color: var(--ap-text); }
.ls-kw span:first-child, .ls-tage span:first-child { border-left: 0; text-align: left; }
/* Der Wochentag ueber der Tagesnummer, beides klein: Eine Spalte ist rund
   28 px breit, „17.08." braucht 47. Das vollstaendige Datum steht im title. */
.ls-tage b { display: block; font-weight: 560; color: var(--ap-text); }
.ls-tage span { line-height: 1.25; font-size: var(--ap-size-small); }
/* Der Montag traegt eine staerkere Linie — sonst sind vierzig gleiche
   Spalten nicht zu zaehlen. Nur in der Kopfzeile: Im Balkenbereich waere
   ein Fuenf-Spalten-Rhythmus in einer Feiertagswoche verschoben, und eine
   falsche Linie ist schlechter als keine. */
.ls-tage span.ls-wochenanfang { border-left: 1px solid var(--ap-border-strong); }

.ls-zeile { border-bottom: 1px solid var(--ap-border); min-height: 34px; }
.ls-name {
  font-size: var(--ap-size-ui); font-weight: var(--ap-weight-ui);
  padding: var(--ap-space-2) var(--ap-space-3) var(--ap-space-2) 0;
  display: flex; align-items: baseline; gap: var(--ap-space-2);
  overflow: hidden; white-space: nowrap;
}
.ls-name small { color: var(--ap-text-muted); font-weight: 400; font-size: var(--ap-size-small);
                 flex: none; }
.ls-name b { font-weight: var(--ap-weight-ui); overflow: hidden; text-overflow: ellipsis; }
/* Alle Balken einer Zeile liegen im selben Rasterbereich, aber in zwei Reihen:
   Buchungen oben (24px), Abwesenheiten als Streifen darunter (8px). Sonst
   verdeckt der Urlaub die Buchung, mit der er kollidiert — und die Kollision
   ist genau das, was man sehen soll. */
.ls-spuren { grid-column: 2 / -1; display: grid;
             grid-template-columns: repeat(var(--ls-tage), minmax(0, 1fr));
             grid-template-rows: 24px 8px; gap: 2px 0; align-content: center; }
.ls-balken {
  grid-row: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--ap-font-mono); font-size: var(--ap-size-small);
  font-variant-numeric: tabular-nums; line-height: 24px;
  /* `--ap-border` und nicht `--ap-border-strong`: Seit Paket O ist der starke
     Rand der Rand der GEWAEHLTEN Karte. Hier trug ihn jeder Balken — also sah
     jeder aus, als waere er ausgewaehlt, und das Signal darueber verlor seine
     Wirkung. Dieselbe Nachbesserung wie an den fuenf Stellen aus Paket O,
     Aufgabe 1; die Plantafel war die sechste und ist damals durchgerutscht. */
  padding: 0 var(--ap-space-2); border: 1px solid var(--ap-border);
  background: var(--ap-surface-3); color: var(--ap-text);
}

/* Die senkrechten Linien in der Balkenflaeche. Sie liegen ueber beide Reihen
   der Spur (Buchung und Abwesenheitsstreifen) und nehmen keine Klicks an —
   sonst laege eine unsichtbare Flaeche ueber dem Weg zur Projektseite. */
.ls-woche, .ls-heute { grid-row: 1 / -1; pointer-events: none; }
.ls-woche { border-left: 1px solid var(--ap-border); }
/* Der Bezugspunkt der Tafel. Ein Strich, keine Flaeche — der Akzent bleibt
   Signal. Im Kopf traegt der Tag zusaetzlich mehr Gewicht, damit die Bedeutung
   nicht allein an der Farbe haengt (Regel 7). */
.ls-heute { border-left: 1px solid var(--ap-accent); }
.ls-tage span.ls-heute-kopf { color: var(--ap-accent); }
.ls-tage span.ls-heute-kopf b { color: var(--ap-accent); font-weight: 600; }
/* Das einzige Signal der Ansicht: das Projekt, ueber das gerade gesprochen
   wird (Entscheidung 4).

   **Geaendert am 20.08.** Bis dahin war der Balken mit `--ap-gradient-btn`
   gefuellt, also mit dem Gruen-Cyan-Verlauf der Knoepfe. Die Absicht war
   richtig — nur EIN Projekt traegt das Signal —, die Ausfuehrung widersprach
   zwei Regeln aus `oberflaeche.md`: „Akzent ist Signal, nie Flaeche" und „nie
   Gruen und Cyan als zwei Signale nebeneinander". Ein 900 px breiter Verlauf
   ist beides, und er war das Erste, was auf der Tafel ins Auge fiel. In Paket O
   wurde die Projektstand-Grafik aus demselben Grund umgestellt; auf die
   Plantafel hat damals niemand geschaut (Befund von Alexander, 20.08.).

   Jetzt spricht die Sprache des Portals: dunkelgruene Flaeche wie die
   gewaehlte Karte, dazu ihr Rand und der Akzent im Text. Und das Gewicht
   traegt mit, damit die Bedeutung nicht allein an der Farbe haengt (Regel 7). */
.ls-balken--jetzt { background: var(--ap-ink-3); border-color: var(--ap-border-strong);
                    color: var(--ap-accent); font-weight: 600; }
/* Ein Termin dauert einen Tag und hat damit eine Spalte: 28 px. Der Balken
   ist deshalb nur eine Marke; die Titel stehen als Zeile unter der Tafel.
   Ein Ueberlauf nach rechts sah bei einem Termin gut aus und bei zwei wie
   ein Fehldruck — die Texte ueberschrieben sich. */
.ls-balken--termin { background: none; border-style: dashed; min-width: 12px; }
/* Ein Buchungsbalken ist zugleich der Weg zur Projektseite (Paket J,
   Aufgabe 7). Er sieht deshalb NICHT wie ein Link aus: Ein Unterstrich in
   einem 24 px hohen Balken auf einer Projektionsflaeche waere Unruhe ohne
   Nutzen, und wer vor dem Beamer sitzt, klickt ohnehin nicht. Erkennbar wird
   der Weg beim Zeigen und beim Tabben — dort, wo jemand ihn sucht. */
a.ls-balken { text-decoration: none; }
a.ls-balken:hover { border-color: var(--ap-accent); }
a.ls-balken:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 1px; }
.ls-termine { display: flex; flex-wrap: wrap; gap: var(--ap-space-2) var(--ap-space-5);
              margin: var(--ap-space-3) 0 0; font-size: var(--ap-size-small);
              color: var(--ap-text-muted); }
.ls-termine b { font-family: var(--ap-font-mono); font-variant-numeric: tabular-nums;
                font-weight: 540; color: var(--ap-text); margin-right: var(--ap-space-2); }
/* Abwesenheit: Streifen ohne eigene Farbe. Farbe nie allein als
   Bedeutungstraeger — der Grund steht als Text darin und im title. */
.ls-abwesend {
  grid-row: 2; overflow: hidden; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ap-text-muted); line-height: 8px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--ap-border-strong) 0 3px,
                                        transparent 3px 7px);
  border-top: 1px solid var(--ap-border-strong);
}

/* --- Begruendungs-Chat ---------------------------------------------------- */
.ls-verlauf { overflow: auto; padding: var(--ap-space-4); display: grid;
              gap: var(--ap-space-3); align-content: start; }
.ls-satz { border-left: 2px solid var(--ap-border-strong); padding-left: var(--ap-space-3); }
.ls-satz--waechter { border-left-color: var(--ap-accent); }
.ls-wer {
  font-size: var(--ap-size-kicker); font-weight: var(--ap-weight-kicker);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ap-text-muted);
  display: block; margin-bottom: var(--ap-space-1);
}
.ls-satz p { font-size: var(--ap-size-body); line-height: 1.55; max-width: 60ch; margin: 0; }
.ls-leer { color: var(--ap-text-muted); padding: var(--ap-space-4); margin: 0; }

/* --- Live-Protokoll ------------------------------------------------------- */
/* 98 px, nicht 122: Die Bedienzeile aus Aufgabe 7 kostet Hoehe, und die
   fehlenden 24 px gingen der Tafel ab — ausgerechnet an der Termine-Zeile, die
   in Aufgabe 5 erst gebaut wurde, weil die Termine in einer Tagesspalte nicht
   lesbar sind. Das Protokoll ist von den dreien am ehesten zu kuerzen: Es
   rollt mit und zeigt immer die juengsten Zeilen. Abgestimmt auf 1920x1080,
   die Groesse der Projektionsflaeche. */
.ls-fuss { border-top: 1px solid var(--ap-border-strong); padding-top: var(--ap-space-3);
           max-height: 98px; overflow: auto; }
.ls-fuss ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ap-space-1); }
.ls-fuss li { font-family: var(--ap-font-mono); font-size: var(--ap-size-small);
              font-variant-numeric: tabular-nums; color: var(--ap-text-muted); }
.ls-fuss li b { color: var(--ap-text); font-weight: 540; margin-right: var(--ap-space-3); }