/* ══════════════════════════════════════════════════════════════════
   QSS HUB · BAUSTEINE
   Zwoelf Bausteine, aus denen jede Seite gebaut wird. Was sich nicht
   daraus bauen laesst, wird zum dreizehnten — nicht zu einer
   Sonderloesung auf einer Seite. (Dokument 11.6)
   ══════════════════════════════════════════════════════════════════ */

/* ── Grundgeruest ────────────────────────────────────────────────── */
.huelle { display: flex; min-height: 100vh; }

.inhalt {
  flex: 1;
  min-width: 0;
  padding: var(--s-6);
  max-width: 1180px;
}

.seitenkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap;
}

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  width: var(--nav-breite); flex-shrink: 0;
  background: var(--bg-flaeche);
  border-right: 1px solid var(--rand);
  display: flex; flex-direction: column;
}

.nav__marke {
  padding: var(--s-6) var(--s-4) var(--s-4);
  font-size: var(--t-l); font-weight: 650; color: var(--text-stark);
  letter-spacing: -0.01em;
}
.nav__marke span { color: var(--viol-500); }

.nav__gruppe {
  padding: var(--s-4) var(--s-4) var(--s-1);
  font-size: var(--t-xs); line-height: var(--t-xs-lh);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-schwach); font-weight: 600;
}

.nav__eintrag {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--beruehrflaeche);
  padding: 0 var(--s-4); margin: 0 var(--s-2);
  border-radius: var(--radius);
  color: var(--text-normal); font-size: var(--t-s);
  transition: background var(--dauer-schnell) var(--kurve);
}
.nav__eintrag:hover { background: var(--bg-vertieft); text-decoration: none; }
.nav__eintrag[aria-current="page"] {
  background: var(--viol-50); color: var(--viol-700); font-weight: 600;
}

.nav__fuss { margin-top: auto; padding: var(--s-4); border-top: 1px solid var(--rand); }

/* ── Karte ───────────────────────────────────────────────────────── */
.karte {
  background: var(--bg-flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: var(--s-6);
  box-shadow: var(--schatten-auf);
}
.karte + .karte { margin-top: var(--s-4); }
.karte__titel { margin-bottom: var(--s-2); }

/* ── Knopf ───────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--beruehrflaeche);
  padding: 0 var(--s-6);
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: var(--t-s); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background var(--dauer-schnell) var(--kurve);
}
.knopf:hover { text-decoration: none; }

.knopf--primaer { background: var(--viol-500); color: var(--text-invers); }
.knopf--primaer:hover { background: var(--viol-600); }

.knopf--still {
  background: var(--bg-flaeche); color: var(--text-normal);
  border-color: var(--rand-stark);
}
.knopf--still:hover { background: var(--bg-vertieft); }

.knopf--text { background: none; color: var(--text-aktion); padding: 0 var(--s-2); }

.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed;
}

/* ── Formular ────────────────────────────────────────────────────── */
.feld { margin-bottom: var(--s-4); }

.feld__beschriftung {
  display: block; margin-bottom: var(--s-1);
  font-size: var(--t-s); font-weight: 600; color: var(--text-stark);
}

.feld__hinweis {
  display: block; margin-top: var(--s-1);
  font-size: var(--t-xs); line-height: var(--t-xs-lh); color: var(--text-leise);
}

.feld__eingabe {
  width: 100%; min-height: var(--beruehrflaeche);
  padding: 0 var(--s-3);
  font: inherit; font-size: var(--t-m); color: var(--text-normal);
  background: var(--bg-flaeche);
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
  transition: border-color var(--dauer-schnell) var(--kurve);
}
.feld__eingabe:focus { border-color: var(--rand-fokus); }
.feld__eingabe[aria-invalid="true"] { border-color: var(--rot); }

.feld__fehler {
  display: block; margin-top: var(--s-1);
  font-size: var(--t-xs); line-height: var(--t-xs-lh); color: var(--rot);
}

.feldreihe { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.feldreihe > * { flex: 1; min-width: 180px; }

/* ── Meldungsstreifen ────────────────────────────────────────────── */
.streifen {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid; border-radius: var(--radius);
  font-size: var(--t-s); line-height: var(--t-s-lh);
  margin-bottom: var(--s-4);
}
.streifen--fehler  { background: var(--rot-bg);   border-color: var(--rot-rand);   color: var(--navy-900); }
.streifen--erfolg  { background: var(--gruen-bg); border-color: var(--gruen-rand); color: var(--navy-900); }
.streifen--hinweis { background: var(--blau-bg);  border-color: var(--blau-rand);  color: var(--navy-900); }
.streifen--warnung { background: var(--gelb-bg);  border-color: var(--gelb-rand);  color: var(--navy-900); }

/* Nie Farbe allein: jeder Streifen traegt ein Zeichen. */
.streifen__zeichen { font-weight: 700; flex-shrink: 0; }

/* ── Statusabzeichen ─────────────────────────────────────────────── */
.abzeichen {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid; border-radius: 999px;
  font-size: var(--t-xs); line-height: 1.4; font-weight: 600;
}
.abzeichen--gruen  { background: var(--gruen-bg);  border-color: var(--gruen-rand);  color: #0B6E32; }
.abzeichen--gelb   { background: var(--gelb-bg);   border-color: var(--gelb-rand);   color: #7A5C02; }
.abzeichen--orange { background: var(--orange-bg); border-color: var(--orange-rand); color: #8F3F06; }
.abzeichen--rot    { background: var(--rot-bg);    border-color: var(--rot-rand);    color: #8C1717; }
.abzeichen--blau   { background: var(--blau-bg);   border-color: var(--blau-rand);   color: #1447B2; }

/* ── Leerzustand ─────────────────────────────────────────────────── */
/* Einer der sieben Pflichtzustaende. Nie "Keine Daten vorhanden",
   sondern immer ein naechster Schritt. (Dokument 03.9) */
.leerzustand {
  text-align: center; padding: var(--s-16) var(--s-6);
  border: 1px dashed var(--rand-stark); border-radius: var(--radius-karte);
  background: var(--bg-flaeche);
}
.leerzustand__titel { margin-bottom: var(--s-2); }
.leerzustand__text  { color: var(--text-leise); margin-bottom: var(--s-6); }

/* ── Pruefliste (Einrichtungsassistent) ──────────────────────────── */
.pruefliste { list-style: none; margin: 0; padding: 0; }
.pruefliste li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rand);
}
.pruefliste li:last-child { border-bottom: none; }
.pruefliste__zeichen { flex-shrink: 0; font-weight: 700; width: 1.5em; }
.pruefliste__ok   { color: var(--gruen); }
.pruefliste__fehl { color: var(--rot); }
.pruefliste__name { flex: 1; }

/* ── Schritte des Assistenten ────────────────────────────────────── */
.schritte {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-8); padding: 0; list-style: none;
  font-size: var(--t-xs); color: var(--text-schwach);
}
.schritte li { display: flex; align-items: center; gap: var(--s-2); }
.schritte li + li::before { content: "›"; color: var(--text-schwach); }
.schritte__aktiv { color: var(--viol-600); font-weight: 700; }
.schritte__erledigt { color: var(--gruen); }

/* ── Schlichter Rahmen (Anmeldung, Einrichtung) ──────────────────── */
.schlicht {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: var(--s-6);
}
.schlicht__kasten { width: 100%; max-width: 460px; }
.schlicht__marke {
  text-align: center; margin-bottom: var(--s-6);
  font-size: var(--t-xl); font-weight: 650; color: var(--text-stark);
  letter-spacing: -0.01em;
}
.schlicht__marke span { color: var(--viol-500); }
.schlicht__weit { max-width: 720px; }

/* ── Mobil ───────────────────────────────────────────────────────── */
/* Bedienbar ab 360px, nicht nur lesbar. */
@media (max-width: 860px) {
  .huelle { flex-direction: column; }
  .nav {
    width: 100%; border-right: none; border-bottom: 1px solid var(--rand);
    flex-direction: row; overflow-x: auto; align-items: center;
  }
  .nav__marke { padding: var(--s-4); white-space: nowrap; }
  .nav__gruppe { display: none; }
  .nav__eintrag { white-space: nowrap; }
  .nav__fuss { margin-top: 0; border-top: none; padding: var(--s-2) var(--s-4); }
  .inhalt { padding: var(--s-4); }
}

/* ── Datenliste ──────────────────────────────────────────────────── */
/* Hier ist eine Tabelle richtig: man sucht einen bestimmten Datensatz.
   Hoechstens sechs Spalten, alles Weitere ins Detail. (Dokument 03.4) */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabelle th {
  text-align: left; padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-schwach); border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.tabelle td { padding: var(--s-3); border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: none; }

/* ── Auswahl (Rollen- und Rechtemaske) ───────────────────────────── */
.auswahlgitter {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.auswahl {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3); border: 1px solid var(--rand);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}
.auswahl:hover { background: var(--bg-vertieft); }
.auswahl:has(input:checked) { border-color: var(--viol-300); background: var(--viol-50); }
.auswahl input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--viol-500); }
.auswahl span { display: flex; flex-direction: column; gap: 2px; }
.auswahl strong { font-weight: 600; font-size: var(--t-s); }

.schalter { display: flex; gap: var(--s-3); align-items: center; cursor: pointer; }
.schalter input { width: 18px; height: 18px; accent-color: var(--viol-500); }

.knopfreihe { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }

/* Tabellen brechen auf schmalen Geraeten aus. Waagerecht rollen ist
   besser als abgeschnittene Spalten. */
@media (max-width: 860px) {
  .karte:has(.tabelle) { overflow-x: auto; }
}

/* ── Bereichsbaum ────────────────────────────────────────────────── */
/* Die Einrueckung kommt aus der Tiefe im materialisierten Pfad —
   keine verschachtelten Listen, eine flache Abfrage. */
.baum { list-style: none; margin: 0; padding: 0; }
.baum__ast {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rand);
}
.baum__ast:last-child { border-bottom: none; }
.baum__ast--1 { padding-left: calc(var(--s-3) + var(--s-6)); }
.baum__ast--2 { padding-left: calc(var(--s-3) + var(--s-6) * 2); }
.baum__ast--3 { padding-left: calc(var(--s-3) + var(--s-6) * 3); }
.baum__ast--4 { padding-left: calc(var(--s-3) + var(--s-6) * 4); }
.baum__ast--5 { padding-left: calc(var(--s-3) + var(--s-6) * 5); }
.baum__name { font-weight: 600; font-size: var(--t-s); }
.baum__aktion { margin-left: auto; }

/* ── Filterband ──────────────────────────────────────────────────── */
.filterband {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.filterband .feld__eingabe { flex: 1; min-width: 200px; max-width: 420px; }

/* ── Mehrzeilige Eingaben und Listen ─────────────────────────────── */
.feld__eingabe--mehrzeilig {
  min-height: auto; padding: var(--s-3);
  font-family: var(--schrift); line-height: var(--t-m-lh); resize: vertical;
}
.feld__eingabe--liste { min-height: auto; padding: var(--s-2); height: auto; }

/* ── Seitenumbruch der Listen ────────────────────────────────────── */
nav[role="navigation"] { margin-top: var(--s-4); font-size: var(--t-s); }

/* ── Druck ───────────────────────────────────────────────────────── */
/* Kennungslisten und spaeter Pruefberichte werden ausgedruckt und dem
   Hausmeister in die Hand gegeben. */
@media print {
  .nav, .knopfreihe, .filterband, form { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .karte { border: none; box-shadow: none; padding: 0; margin-bottom: 1cm; }
  .tabelle { font-size: 10pt; }
  a { text-decoration: none; color: inherit; }
}

/* ── Kennzahlenfeld ──────────────────────────────────────────────── */
.kennzahlen { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.kennzahl {
  font-size: var(--t-2xl); line-height: var(--t-2xl-lh);
  font-weight: 650; color: var(--text-stark);
  font-variant-numeric: tabular-nums;
}

/* ── Codeliste (Wiederherstellungscodes) ─────────────────────────── */
.codeliste {
  list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4);
  background: var(--bg-vertieft); border-radius: var(--radius);
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  font-size: var(--t-m); letter-spacing: 0.04em;
}

/* ── Dateiliste ──────────────────────────────────────────────────── */
.dateien { list-style: none; margin: 0; padding: 0; }
.dateien li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--rand);
}
.dateien li:last-child { border-bottom: none; }
.dateien__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dateien__meta { color: var(--text-schwach); font-size: var(--t-xs); white-space: nowrap; }

.streifen--rot { background: var(--rot-bg); border-color: var(--rot-rand); color: var(--navy-900); }

/* ── Fokusliste: Aufgaben ────────────────────────────────────────── */
/* Karten mit einer Handlung, keine Tabelle. Dokument 03.3. */
.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgabe {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rand);
}
.aufgabe:first-child { padding-top: 0; }
.aufgabe:last-child { border-bottom: none; padding-bottom: 0; }
.aufgabe__kopf { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.aufgabe__titel { font-weight: 600; color: var(--text-stark); margin-bottom: var(--s-1); }
.aufgabe__text { max-width: 62ch; }
.aufgabe__aktion { margin-top: var(--s-3); }

/* ── Trefferliste ────────────────────────────────────────────────── */
.trefferliste { list-style: none; margin: 0; padding: 0; }
.trefferliste li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--rand);
}
.trefferliste li:last-child { border-bottom: none; }

/* ── Suchknopf in der Navigation ─────────────────────────────────── */
.nav__suche {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  min-height: 40px; margin: 0 var(--s-2) var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--bg-vertieft);
  color: var(--text-leise); font-size: var(--t-s);
  cursor: pointer;
}
.nav__suche:hover { background: var(--bg-flaeche); text-decoration: none; }

kbd {
  font-family: var(--schrift-daten); font-size: var(--t-xs);
  padding: 1px 5px; border: 1px solid var(--rand-stark);
  border-radius: 4px; background: var(--bg-flaeche); color: var(--text-schwach);
}

/* ── Kommandopalette ─────────────────────────────────────────────── */
.palette { position: fixed; inset: 0; z-index: 100; }
.palette[hidden] { display: none; }

.palette__hintergrund {
  position: absolute; inset: 0;
  background: rgba(10, 27, 46, 0.45);
}

.palette__kasten {
  position: relative; margin: 10vh auto 0; max-width: 620px;
  background: var(--bg-flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-schwebe);
  overflow: hidden;
}

.palette__feld {
  width: 100%; min-height: 56px; padding: 0 var(--s-4);
  border: none; border-bottom: 1px solid var(--rand);
  font: inherit; font-size: var(--t-l); color: var(--text-stark);
  background: transparent;
}
.palette__feld:focus { outline: none; }

.palette__status {
  margin: 0; padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs); color: var(--text-schwach);
  border-bottom: 1px solid var(--rand);
}

.palette__liste {
  list-style: none; margin: 0; padding: var(--s-2);
  max-height: 48vh; overflow-y: auto;
}

.palette__eintrag {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--radius);
  cursor: pointer;
}
.palette__eintrag--aktiv { background: var(--viol-50); }

.palette__art {
  flex-shrink: 0; min-width: 78px;
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-schwach);
}
.palette__titel { flex: 1; font-weight: 600; font-size: var(--t-s); color: var(--text-stark); }
.palette__unterzeile { font-size: var(--t-xs); color: var(--text-leise); }

.palette__fuss {
  display: flex; gap: var(--s-4); margin: 0;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--rand);
  font-size: var(--t-xs); color: var(--text-schwach);
}

@media (max-width: 860px) {
  .palette__kasten { margin-top: 0; border-radius: 0; height: 100%; }
  .palette__liste { max-height: calc(100vh - 160px); }
  .palette__fuss { display: none; }   /* keine Tastatur, keine Tastenhinweise */
}