/* [NEUE-VERSION] (Auftrag 271, Fenster LV1) Live-Anzeige: Schalter in der Kopfzeile, Leiste am Fussrand, Kachelwand, Streifen der Personen-Vorschau.
 * Ruhig: keine Bewegung, kein Blinken. Die Leiste liegt am Fussrand und unter jedem Dialog; die Seite bekommt unten genau ihre Höhe als Polster, darum rückt nichts. */
:root {
  --live-dunkelgruen: #0b6b2e;
  --live-gruen: #2fb457;
  --live-orange: #e8890c;
  --live-rot: #d3222a;
  --live-grau: #9aa5b1;
  --live-schwarz: #1f2933;
  --live-grund: #ffffff;
  --live-linie: #c7d0d9;
  --live-text: #1f2933;
  --live-leise: #52606d;
}

/* ---------- Ampelpunkt ---------- */
.live-punkt { display: inline-block; flex: 0 0 auto; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--live-grau); border: 1px solid rgba(0, 0, 0, .25); }
.live-punkt--dunkelgruen { background: var(--live-dunkelgruen); }
.live-punkt--gruen { background: var(--live-gruen); }
.live-punkt--orange { background: var(--live-orange); }
.live-punkt--rot { background: var(--live-rot); }
.live-punkt--grau { background: var(--live-grau); }
.live-punkt--schwarz { background: transparent; border: 2px solid var(--live-schwarz); }

/* ---------- Schalter ---------- */
.live-schalter { display: inline-flex; align-items: center; gap: 2px; font-size: .8rem; white-space: nowrap; }
.live-schalter__wort { display: inline-flex; align-items: center; margin-right: 2px; }
.live-schalter__zahl { font-weight: 700; color: var(--live-rot); }
.live-schalter__knopf { padding: 1px 6px; min-height: 24px; font: inherit; color: var(--live-text); background: var(--live-grund); border: 1px solid var(--live-linie); border-radius: 4px; cursor: pointer; }
.live-schalter__knopf--an { color: #fff; background: var(--live-schwarz); border-color: var(--live-schwarz); }
@media (max-width: 640px) {
  .live-schalter__live { display: none; }
  .live-schalter__knopf { padding: 1px 4px; }
}

/* ---------- Leiste am Fussrand: nie über dem Inhalt ---------- */
/* Der Platz für den Rollbalken bleibt immer frei, sobald es den Schalter gibt: sonst würde die Seite beim Öffnen der Leiste um seine Breite schmaler. */
html.live-schalter-da { scrollbar-gutter: stable; }
html.live-leiste-an { scroll-padding-bottom: calc(var(--live-leiste-hoehe, 44px) + 24px); }
html.live-leiste-an body { padding-bottom: calc(var(--live-leiste-hoehe, 44px) + 24px); }
.live-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; box-sizing: border-box; max-height: 42vh; display: flex; flex-direction: column; color: var(--live-text); background: var(--live-grund); border-top: 2px solid var(--live-schwarz); }
.live-leiste__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 10px; font-size: .9rem; }
.live-leiste__titel { white-space: nowrap; }
.live-leiste__summe { flex: 1 1 auto; min-width: 0; color: var(--live-leise); }
.live-leiste__knoepfe { display: inline-flex; gap: 4px; margin-left: auto; }
.live-leiste__knopf { min-width: 32px; min-height: 32px; padding: 0 6px; font: inherit; color: var(--live-text); background: var(--live-grund); border: 1px solid var(--live-linie); border-radius: 4px; cursor: pointer; }
.live-leiste__sort { min-height: 32px; font: inherit; }
.live-leiste__sort--zu { display: none; }
.live-leiste__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 6px; }
.live-leiste [hidden] { display: none !important; }

@media (max-width: 640px) {
  .live-leiste__summe { order: 5; flex-basis: 100%; }
  .live-leiste__titel { font-size: .85rem; }
}

/* ---------- Kachelwand ---------- */
.live-wand { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.live-kachel { display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 44px; padding: 5px 8px; font: inherit; text-align: left; color: var(--live-text); background: var(--live-grund); border: 1px solid var(--live-linie); border-radius: 6px; cursor: pointer; }
.live-kachel[data-ampel="orange"] { border-color: var(--live-orange); }
.live-kachel[data-ampel="rot"] { border-color: var(--live-rot); }
.live-kachel__oben { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.live-kachel__name, .live-kachel__ort { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-kachel__ort { font-size: .9em; }
.live-kachel__seit { font-size: .8em; color: var(--live-leise); min-height: 1em; }
.live-kachel__marke { display: inline-block; flex: 0 0 auto; width: 1.2em; height: 1.2em; line-height: 1.2em; text-align: center; font-size: .8em; font-weight: 700; color: #fff; background: var(--live-rot); border-radius: 50%; }

/* ---------- Ein Kind ---------- */
.live-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .95rem; }
.live-person__wahl { min-height: 32px; max-width: 14em; font: inherit; }
.live-person__ort { min-width: 0; font-weight: 600; }
.live-person__seit { color: var(--live-leise); }

/* ---------- Einstellung ---------- */
.live-einstellung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 10px; font-size: .85rem; border-top: 1px solid var(--live-linie); }
.live-einstellung__satz { color: var(--live-leise); }

/* ---------- Vollbild: gut lesbar auf Beamer und Display ---------- */
.live-leiste:fullscreen { max-height: none; font-size: 1.35rem; border-top: 0; }
.live-leiste:fullscreen .live-wand { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.live-leiste:fullscreen .live-kachel { padding: 12px 14px; }
.live-leiste:fullscreen .live-leiste__kopf { font-size: 1.2rem; padding: 10px 14px; }
.live-leiste:fullscreen .live-leiste__inhalt { padding: 0 14px 14px; }

/* ---------- Streifen in der Personen-Vorschau ---------- */
.live-streifen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; padding: 4px 8px; font-size: .9rem; color: var(--live-text); background: var(--live-grund); border: 1px solid var(--live-linie); border-radius: 6px; }
.live-streifen[hidden], .live-streifen [hidden] { display: none; }
.live-streifen__ort { min-width: 0; font-weight: 600; }
.live-streifen__seit { color: var(--live-leise); }
.live-streifen__folgen { margin-left: auto; white-space: nowrap; cursor: pointer; }

/* ---------- Kind: ein leiser Satz in «Aktuelles» ---------- */
.live-kind-hinweis { margin: 1em 0 .5em; font-size: .8rem; color: var(--live-leise); }

/* ---------- Drucken: nichts davon ---------- */
@media print {
  .live-leiste, .live-schalter, .live-streifen, .live-kind-hinweis { display: none !important; }
  html.live-leiste-an body { padding-bottom: 0 !important; }
}