/* Betriebs-Konsole (LENA-92) – ergänzt portal.css (Schriften, Formulare, Karten, Tabellen kommen von dort).
   Eigener, dunkler Kopf „Terminanruf · Betrieb“ mit oranger Kante, damit die Konsole nie mit dem Portal
   verwechselt wird; rechts die Umgebung (Staging, Produktion, Lokal). Nur Klassen, keine Inline-Stile (CSP
   style-src 'self'), keine Schriften oder Bilder von fremden Servern. */

:root {
  --betrieb-kopf: #16191D;
  --betrieb-kante: #C2410C;
  --staging-grund: #FDE7C3;
  --staging: #7A4100;
  --produktion-grund: #F6D5D5;
  --produktion: #7E1F1F;
  --lokal-grund: #DDE3E9;
  --lokal: #2E3B49;
}

.kopf--betrieb {
  background: var(--betrieb-kopf);
  border-bottom: 3px solid var(--betrieb-kante);
}
.kopf--betrieb .marke__zeichen { background: var(--betrieb-kante); }
.kopf--betrieb .marke__name { font-size: 18px; }

.umgebung {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: var(--radius-rund);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.umgebung--staging { background: var(--staging-grund); color: var(--staging); }
.umgebung--produktion { background: var(--produktion-grund); color: var(--produktion); }
.umgebung--lokal { background: var(--lokal-grund); color: var(--lokal); }

.betrieb-anmeldung {
  display: flex;
  justify-content: center;
  padding: var(--abstand-7) var(--abstand-5);
}

@media (max-width: 960px) {
  .betrieb-anmeldung { padding: var(--abstand-5) var(--abstand-4); }
}


/* --- Überblick und Detailseite (Ampel, inaktive Mandanten, Legende, IDs) ------------------------------ */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.ampel::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grau);
  flex-shrink: 0;
}
.ampel--rot { color: var(--rot); }
.ampel--rot::before { background: #C62828; }
.ampel--gelb { color: var(--gelb); }
.ampel--gelb::before { background: #E0A100; }
.ampel--gruen { color: var(--gruen); }
.ampel--gruen::before { background: #2E7D4F; }
.ampel--inaktiv { color: var(--text-4); font-weight: 500; }
.ampel--inaktiv::before { background: var(--rand); }

/* Übersicht: fünf Spalten, Wörter nicht mitten im Wort umbrechen (portal.css erlaubt das für schmale
   Tabellen); zwischen 720 und 900 px scrollt die Tabelle waagerecht in ihrem Rahmen (`contain: layout` aus
   portal.css hält die Seite auf Bildschirmbreite), darunter bleibt nur die erste Spalte (Handy, unten). */
.tabelle--betrieb { min-width: 900px; }
.tabelle--betrieb td { vertical-align: top; overflow-wrap: normal; }
.tabelle--betrieb .spalte-mandant { min-width: 240px; }
.mandant-kopf { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.gruende { margin: var(--abstand-1) 0 0; padding-left: 18px; font-size: 12px; color: var(--text-3); }
.kennzahl-zeile { display: block; }
/* LENA-193: „Amalia-Inhalte fehlen: …“ – in der Übersicht unter den Gründen (Link auf die Stammdaten), auf der
   Detailseite als gelber Kasten im Abschnitt Stammdaten; färbt die Ampel nicht. */
.amalia-hinweis { display: block; margin-top: var(--abstand-1); font-size: 12px; color: var(--gelb); }
.amalia-inhalte { margin: 0 0 var(--abstand-4); }
.amalia-inhalte__titel { margin: 0 0 var(--abstand-1); font-weight: 600; }
.amalia-inhalte__liste { margin: 0; padding-left: 18px; }
.amalia-inhalte__fuss { margin: var(--abstand-1) 0 0; }
/* LENA-194: Widersprüche rot; `hinweis--rot` setzt alles fett – die Liste bleibt normal lesbar */
.amalia-widersprueche .amalia-inhalte__liste, .amalia-widerspruch { font-weight: 400; }
.amalia-widersprueche .amalia-inhalte__liste li + li { margin-top: var(--abstand-1); }
/* Häkchen „bewusst leer“ (LENA-193, Entscheidung Mike 20.10.2026) */
.amalia-inhalte__leise { margin: var(--abstand-1) 0 0; color: var(--text-3); }
.amalia-inhalte__formular { margin-top: var(--abstand-2); display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--abstand-2) var(--abstand-4); }
.amalia-inhalte__haekchen { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4); }
.amalia-inhalte__haekchen legend { padding: 0; margin-bottom: var(--abstand-1); font-weight: 600; width: 100%; }
.amalia-inhalte__wahl { display: inline-flex; align-items: center; gap: var(--abstand-1); }
.kennzahl-zeile--warnung { color: var(--rot); font-weight: 600; }
.zeile--inaktiv td, .zeile--inaktiv .tabelle__name { color: var(--text-4); }
.zeile--inaktiv td { background: var(--flaeche-leise); }

.legende__liste {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--abstand-2) var(--abstand-4);
  font-size: 14px;
}
.legende__liste dd { margin: 0; color: var(--text-2); }

.kennung {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--text-2);
}

/* Zahlen der Detailseite: Beschriftungen wie „fonio-Start fehlgeschlagen (7 Tage)“ ohne Umbruch (die
   Spalte aus portal.css ist 120 px breit); auf dem Handy steht die Beschriftung über dem Wert. */
.angaben--zahlen { grid-template-columns: 260px minmax(0, 1fr); }
/* LENA-179: In der schmalen Nebenspalte (320 px) ließen 260 px Beschriftung dem Wert fast keinen Platz – er brach
   Zeichen für Zeichen um. Dort steht die Beschriftung deshalb immer über dem Wert, wie auf dem Handy. */
.spalte .angaben--zahlen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.spalte .angaben--zahlen dd { margin-bottom: var(--abstand-2); }

/* Handy (Browser-Durchsicht 27.09., wie das Portal seit PR #41): Nebenspalten (`tabelle__nur-breit`)
   verschwinden, Aktionen bleiben rechts angeheftet (`tabelle__klebt`); die Übersicht braucht dann keine
   Mindestbreite mehr. Die Seite wird nie breiter als der Bildschirm. */
@media (max-width: 720px) {
  .legende__liste { grid-template-columns: minmax(0, 1fr); }
  .tabelle--betrieb { min-width: 0; }
  .angaben--zahlen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .angaben--zahlen dd { margin-bottom: var(--abstand-2); }
  .betrieb .karte__kopf { flex-wrap: wrap; }
}


/* --- Portal-Zugänge (Aktionen, neuer Zugang, Einmal-Link) ---------------------------------------------- */

.zugang-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  align-items: center;
}
.zugang-aktionen__formular { margin: 0; }
.zugang-aktionen .knopf { white-space: nowrap; }  /* „Zurücksetzen“ nie mitten im Wort (portal.css: anywhere) */
.knopf--gefahr { color: var(--rot); border-color: var(--rot-grund); }
.knopf--gefahr:hover { color: var(--rot); border-color: var(--rot); }
.knopf--primaer.knopf--gefahr { background: var(--rot); color: #FFFFFF; }
.knopf--primaer.knopf--gefahr:hover { background: #5F1A1A; color: #FFFFFF; }

.zugang-neu {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto;
  gap: var(--abstand-3);
  align-items: end;
  padding: var(--abstand-4) var(--abstand-5);
  border-top: 1px solid var(--rand-3);
  margin: 0;
}

.formular--zeile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); }

.einmal-link { max-width: 760px; }
.einmal-link__link {
  display: block;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--grund);
  border: 1px dashed var(--feldrand);
  border-radius: var(--radius-klein);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 720px) {
  .zugang-neu { grid-template-columns: minmax(0, 1fr); }
  .zugang-aktionen { flex-direction: column; align-items: stretch; }
}


/* --- Planer (LENA-96): Not-Aus-Balken, Kasten auf dem Überblick, Planer-Zeile ---------------------------------- */

.notaus-balken {
  background: #C62828;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 10px var(--abstand-4);
}
/* Der Kasten ist eine .karte (Spalten-Flex) – deshalb ein eigenes Raster: Stand und Planer-Zeile links,
   der Knopf rechts über beide Zeilen. */
.notaus-kasten { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--abstand-4); }
.notaus-kasten__stand { font-weight: 600; }
.notaus-kasten--aktiv { border-color: #C62828; }
.notaus-kasten--aktiv .notaus-kasten__stand { color: var(--rot); }
.notaus-kasten .knopf { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.notaus-kasten .planer-zeile { grid-column: 1; }
.planer-zeile { margin: 0; font-size: 14px; color: var(--text-2); }
.planer-zeile--warnung { color: var(--rot); font-weight: 600; }
/* LENA-84 §6: ein roter Wert in einer Angabenliste („Löschfristen zuletzt angewendet“ im Kasten „Anrufe“) –
   dieselbe Farbe wie die Planer-Zeile, nur für ein dd. */
.angaben dd.angaben__warnung { color: var(--rot); font-weight: 600; }
.planer-stand .knopf { margin-top: var(--abstand-3); }
@media (max-width: 720px) {
  .notaus-kasten { grid-template-columns: minmax(0, 1fr); }
  .notaus-kasten .knopf { grid-column: 1; grid-row: auto; justify-self: stretch; }
}


/* --- Onboarding (LENA-93): Checkliste, Formulare der Abschnitte, Kästchen ----------------------------------- */

.checkliste__liste { margin: 0; padding: 0 var(--abstand-5) var(--abstand-3); list-style: none; }
.checkliste__liste--knapp { padding: 0; }
.checkliste__punkt {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--abstand-2) var(--abstand-3);
  padding: 8px 0;
  border-top: 1px solid var(--rand-3);
}
.checkliste__nr {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--grau-grund);
  color: var(--grau);
}
.punkt--erledigt .checkliste__nr, .punkt--bestaetigt .checkliste__nr { background: var(--gruen-grund); color: var(--gruen); }
.punkt--fehlt .checkliste__nr { background: var(--rot-grund); color: var(--rot); }
.punkt--entfaellt .checkliste__nr { background: var(--lila-grund); color: var(--lila); }
.checkliste__text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--abstand-3); }
.checkliste__titel { color: var(--text); font-weight: 500; }
.checkliste__status { font-size: 13px; color: var(--text-3); }
.punkt--fehlt .checkliste__status { color: var(--rot); font-weight: 600; }
.checkliste__formular { display: flex; gap: var(--abstand-2); align-items: center; margin: 0; flex-wrap: wrap; }
.knopf--klein { min-height: 34px; padding: 0 12px; font-size: 13px; }
.karte .checkliste__formular .feld__eingabe--klein { width: auto; }
.formular--abschnitt { padding-top: var(--abstand-3); border-top: 1px solid var(--rand-3); }
.karte--liste .formular--abschnitt, .karte--liste .karte__fuss { padding: var(--abstand-4) var(--abstand-5); }
.karte--liste .karte__fuss { border-top: 1px solid var(--rand-3); display: flex; flex-direction: column; gap: var(--abstand-3); }
.feld--kaestchen { flex-direction: row; align-items: center; gap: var(--abstand-2); font-size: 14px; color: var(--text-2); }
.feld__eingabe--text { height: auto; padding: 10px 14px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.betrieb .angaben code.kennung { overflow-wrap: anywhere; }
.titel-zeile .plakette { margin-left: var(--abstand-2); }

/* LENA-182: Sprungleiste der Mandanten-Seite – Anker zu den Karten, klebt beim Scrollen oben; die Überschriften
   halten Abstand (`scroll-margin-top`), damit die Leiste sie nach dem Sprung nicht verdeckt. */
.sprungleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-2) 0;
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
}
.sprungleiste__link {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: var(--radius-rund);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.sprungleiste__link:hover { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
/* Abstand nach jedem Sprung und für den Tastaturfokus (WCAG 2.4.11) am Dokument statt an den Überschriften: Anker
   zeigen auch auf Abschnitte und Formulare (#berater-formular, #onboarding, #loeschfristen). Unter 900 px wird
   die Leiste dreizeilig. */
html { scroll-padding-top: 96px; }
@media (max-width: 900px) { html { scroll-padding-top: 128px; } }
@media (max-width: 720px) {
  /* auf dem Handy wird die Leiste mehrzeilig und hoch – dort klebt sie nicht */
  .sprungleiste { position: static; }
  html { scroll-padding-top: var(--abstand-3); }
}
.karte__kopf .knopf { margin-left: auto; }
/* LENA-181: zwei Knöpfe im Kopf (Auswertung öffnen, Jetzt auswerten) stehen rechts nebeneinander */
.karte__kopf .knopf + .knopf { margin-left: var(--abstand-2); }
@media (max-width: 720px) {
  .checkliste__punkt { grid-template-columns: 28px minmax(0, 1fr); }
  .checkliste__formular .feld__eingabe--klein { width: 100%; min-width: 0; }
  .karte__kopf .knopf { margin-left: 0; }
}
/* LENA-127: pseudonymisierte Gesprächsprotokolle – Text wie in der Markdown-Datei, umbrechend, ohne Skript */
.protokoll-text { margin: 0; padding: var(--abstand-4); background: var(--flaeche-2, transparent); border: 1px solid var(--rand-3); border-radius: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.auswertung-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.auswertung-knoepfe .formular { margin: 0; }
/* LENA-124 §6: Löschwünsche mit überschrittener Frist – gelb, keine rote Ampel (kein technischer Fehler) */
.angaben dd.zahl--gelb { color: var(--gelb); font-weight: 600; }