/* design.css — Design-System «Computer Inventar», Campus Sursee.

   Wird von allen Seiten als ERSTE Stilvorlage geladen. styles.css,
   geraet.css und benutzer.css enthalten danach nur noch Seitenlayout.

   HALTUNG: Google Material Design 3, so wie Google es in seinen eigenen
   Konsolen einsetzt (Admin-Konsole, Search Console, Cloud Console):

     - reiner weisser Grund, keine getönte Seite
     - Trennung durch 1 px feine Linien (#dadce0), keine Schatten auf Karten
     - Schatten nur für Schwebendes: Menüs, Dialoge, Snackbars
     - Google-Blau (#0b57d0) als einzige Akzentfarbe; Status als Text-
       und Chipfarbe (grün, orange, rot) in den Google-Tönen
     - Roboto (Google Fonts) für Text, «Google Sans» für Titel, falls
       vorhanden — sonst ebenfalls Roboto
     - Knöpfe als Pillen (36 px hoch), Eingabefelder mit Rahmen (4 px),
       Karten und Tabellen mit 8 px Radius
     - viel Weissraum: 24 px Innenabstand, 8er-Raster

   Quellen: m3.material.io/styles (Farbrollen, Typografie, Form) sowie die
   Baseline-Töne der Google-Oberflächen (Primary #0b57d0, On-Surface
   #1f1f1f, On-Surface-Variant #444746, Outline #747775, Outline-Variant
   #c4c7c5, Hairline #dadce0).

   ------------------------------------------------------------------
   ÜBERSICHT DER KLASSEN (für die Seiten, die darauf aufbauen)
   ------------------------------------------------------------------

   Grundgerüst
     .seite                 Flex-Spalte über die ganze Fensterhöhe.
     .rumpf                 Reihe unter der Kopfzeile: Navigation links,
                            Bühne rechts.
     .buehne                Flex-Spalte für die Ansichten und Zustände.
     .inhalt                Scrollender Inhaltsbereich (flex:1, min-height:0).
     .inhalt-fest           Wie .inhalt, aber das Kind rollt selbst.
     .bahn                  Maximale Breite für Textbereiche.

   Kopfzeile und Navigation
     .kopf                  Obere App-Leiste, 64 px, Hairline unten.
     .kopf-marke .wortmarke .wortmarke-punkt
     .logo-link .marke-logo Die Wortmarke als Verweis zur Übersicht.
     .kopf-rechts .stand .konto
     .reiter > .reiter-knopf[.aktiv]        Linke Navigation (Hauptseite).
     .band .band-warnung .band-info         Volle Breite, Hinweisband oben.
     .seitenkopf            Titelzeile eines Detailfensters: Titel,
                            Untertitel, Statuschips.

   Flächen
     .karte                 Weisse Karte mit 1-px-Rahmen, 8 px Radius.
     .karte-kopf .karte-inhalt .karte-titel .karte-unter .karte-kopf-zeile
     .bereich .bereich-titel .bereich-unter Abschnitt mit Überschrift.
     .gitter .gitter-2 .gitter-3 .karten .karte-breit .stapel

   Datenzeilen (Name links, Wert rechts)
     .datenzeilen .datenzeile[.geaendert] .datenzeile-name
     .datenzeile-wert[.leer] .datenzeile-neben .datenzeile-hinweis
     .datenzeile-zeile .datenzeile-breit

   Kennzahlen
     .kacheln .kachel .kachel-wert[.klein] .kachel-text .kachel-unter
     .kachel.ton-erfolg|.ton-warnung|.ton-gefahr|.ton-info (färbt die Zahl)

   Text- und Statusfarben
     .t-erfolg .t-warnung .t-gefahr .t-info .t-leise .t-still .t-stark .zahl

   Chips
     .chips .chip .chip-erfolg .chip-warnung .chip-gefahr .chip-info
     .chip-marke .chip-leise; button.chip = Filterchip mit Rahmen und
     optionalem <span class="x">×</span>.

   Tabellen
     .tabelle-rahmen .tabelle th.sortiert>.pfeil .dicht .tabelle-leer
     .tabelle-schlicht(-rahmen) tr.zeile-frei .zeile-frei-wert

   Schalter
     .schalter[.an|.gesperrt] .schalter-zeile

   Zustände
     .lade .spinner .fehler .leerzustand .skelett .zustand-bereich

   Detailfenster
     .fenster .fenster-rumpf .fenster-nav .fenster-nav-menue
     .fenster-nav-knopf[.aktiv] .fenster-nav-zahl .fenster-inhalt
     .fenster-bahn .speicherleiste .toast[.toast-fehler]
     .dialog-hintergrund .dialog .dialog-knoepfe .knopf-gefahr

   Zeitstrahl
     .zeitstrahl .zeitstrahl-achse .zeitstrahl-tick[.aktuell|.vergangen|
     .klickbar] .zeitstrahl-saeulen .saeule(-a|-b) .zeitstrahl-label
     .zeitstrahl-marke .zeitstrahl-legende

   Toolbar und Formulare
     .toolbar .toolbar-teil .suchfeld .suche .kuerzel .anzahl
     .knopf .knopf-primaer .knopf-leise .knopf-still .knopf-sinnbild
     .knopf.aktiv .zaehler
     .feld .feld-label .feld-eingabe .feld-hinweis .schloss
     .panel .panel-kopf .panel-koerper .mehrfach

   Sinnbilder
     .icon                  SVG, stroke = currentColor.
   ------------------------------------------------------------------ */


/* ==================================================================
   1. Tokens
   ================================================================== */

:root {
  /* Akzent: Google-Blau (Material 3 Primary) */
  --primaer:           #0b57d0;
  --primaer-dunkel:    #0842a0;
  --primaer-hell:      #e8f0fe;   /* Auswahl, Tonal-Flächen */
  --primaer-container: #d3e3fd;
  --primaer-schwach:   #a8c7fa;   /* zweite Datenreihe */

  /* Kompatibilität: ältere Regeln sprechen von der «Marke». Sie ist
     jetzt der Akzent. Das Campus-Grün lebt nur noch im Punkt der
     Wortmarke «ICT.INVENTAR»; der Wert ist der des Logos von Campus Sursee. */
  --campus-gruen: #84b819;
  --marke:        var(--primaer);
  --marke-dunkel: var(--primaer-dunkel);
  --marke-hell:   var(--primaer-hell);

  /* Status in den Google-Tönen: Text dunkel genug für Weiss, Fläche hell. */
  --erfolg:       #137333;
  --erfolg-hell:  #e6f4ea;
  --warnung:      #b06000;
  --warnung-hell: #fef7e0;
  --gefahr:       #b3261e;
  --gefahr-hell:  #fce8e6;
  --info:         #0b57d0;
  --info-hell:    #e8f0fe;

  /* Neutrale Töne (On-Surface, On-Surface-Variant, Outline) */
  --text:         #1f1f1f;
  --text-leise:   #444746;
  --text-still:   #747775;
  --weiss:        #ffffff;
  --flaeche:      #f8f9fa;   /* Hover auf Zeilen, leichte Flächen */
  --flaeche-2:    #f1f3f4;   /* Suchfeld, Spuren, Skelett */
  --flaeche-3:    #e8eaed;   /* stärkere Fläche */
  --linie:        #dadce0;   /* die Hairline: Karten, Tabellen, Kopf */
  --linie-leicht: #e8eaed;   /* Zeilen innerhalb von Listen */
  --umriss:       #747775;   /* Rahmen von Knöpfen und Feldern */
  --umriss-leicht:#c4c7c5;   /* Rahmen von Chips */

  /* Abstände (8er-Raster, 4 als Halbschritt) */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;

  /* Radien */
  --r-klein: 4px;    /* Eingabefelder */
  --r:       8px;    /* Karten, Tabellen, Chips, Menüs */
  --r-gross: 12px;
  --r-rund:  999px;  /* Knöpfe, Navigation */

  /* Schatten nur für Schwebendes (Material Elevation 1–3) */
  --schatten:        0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --schatten-hoch:   0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --schatten-dialog: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);

  /* Typografie */
  --schrift: Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Google Sans", "Google Sans Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Wortmarke: Das Logo von Campus Sursee ist in «Trade Gothic Next» gesetzt
     (Adobe-Lizenz, nur auf campus-sursee.ch ladbar). Archivo (Google Fonts) in
     112 % Breite und Gewicht 650 kommt dem Schriftzug am nächsten. */
  --schrift-marke: Archivo, "Trade Gothic Next", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 12px;
  --t-s:  13px;
  --t-m:  14px;
  --t-l:  16px;
  --t-xl: 22px;
  --t-xxl:28px;

  /* Senkrechter Innenabstand der Tabellenzellen; .dicht überschreibt ihn. */
  --zellen-hoch: 13px;

  /* Kleinste Berührungsfläche */
  --tippziel: 40px;

  /* Breite der linken Navigation, Höhe der App-Leiste */
  --nav-breit: 240px;
  --kopf-hoch: 64px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { height: 100%; background: var(--weiss); }

body {
  margin: 0;
  min-height: 100%;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--t-m);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--schrift-titel); font-weight: 500; letter-spacing: 0; }
h1 { font-size: var(--t-xl); font-weight: 400; line-height: 28px; }
h2 { font-size: var(--t-l); line-height: 24px; }
h3 { font-size: var(--t-m); line-height: 20px; }
p  { margin: 0; }

a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--primaer);
  outline-offset: 2px;
}

.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.t-erfolg  { color: var(--erfolg); }
.t-warnung { color: var(--warnung); }
.t-gefahr  { color: var(--gefahr); }
.t-info    { color: var(--info); }
.t-leise   { color: var(--text-leise); }
.t-still   { color: var(--text-still); }
.t-stark   { font-weight: 500; }
.zahl      { font-variant-numeric: tabular-nums; }


/* ==================================================================
   2. Grundgerüst
   ================================================================== */

.seite {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Reihe unter der Kopfzeile: Navigation links, Bühne rechts. */
.rumpf {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.buehne {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--a5) var(--a6) var(--a7);
}

.inhalt-fest {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--a4);
  padding: var(--a5) var(--a6) var(--a5);
}

.bahn { max-width: 1400px; margin: 0 auto; }


/* ==================================================================
   3. Kopfzeile (App-Leiste), Navigation, Bänder
   ================================================================== */

.kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--a4);
  min-height: var(--kopf-hoch);
  padding: 0 var(--a5) 0 var(--a4);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: relative;
  z-index: 30;
}

.kopf-marke { display: flex; align-items: center; gap: var(--a3); min-width: 0; }

/* Wortmarke «ICT.INVENTAR» statt Logo und Produktname: Versalien wie im
   Logo von Campus Sursee, der Punkt im Campus-Grün. */
.wortmarke {
  font-family: var(--schrift-marke);
  font-stretch: 112%;
  font-weight: 650;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
/* Der Punkt ist wie im Logo ein satter Kreis, der auf der Grundlinie sitzt
   und deutlich schwerer ist als die Buchstaben. Er wird als Fläche gezeichnet
   und nicht als Schriftzeichen, damit Grösse und Lage nicht von der Schrift
   abhängen. Das «.» bleibt im Text (Vorlesen, Kopieren), ist aber unsichtbar. */
.wortmarke-punkt {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.08em 0 -0.04em;
  border-radius: 50%;
  background: var(--campus-gruen);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
}

.logo-link, .marke-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippziel);
  padding: var(--a1) var(--a2);
  margin-left: calc(var(--a2) * -1);
  border-radius: var(--r);
  flex: none;
}
.logo-link:hover, .marke-logo:hover { background: var(--flaeche-2); text-decoration: none; }
.logo-link:active, .marke-logo:active { background: var(--flaeche-3); }

.marke-unter {
  font-size: var(--t-xs); color: var(--text-still);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.kopf-rechts {
  display: flex; align-items: center; gap: var(--a2);
  flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}

.stand { font-size: var(--t-xs); color: var(--text-leise); margin-right: var(--a2); }

.konto {
  font-size: var(--t-m); color: var(--text);
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 var(--a3);
  border: 1px solid var(--linie); border-radius: var(--r-rund);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto:empty { display: none; }

/* ---------- Linke Navigation der Hauptseite ---------- */

.reiter {
  flex: none;
  width: var(--nav-breit);
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  padding: var(--a3);
  border-right: 1px solid var(--linie);
  background: var(--weiss);
  overflow-y: auto;
}

.reiter-knopf {
  font: inherit; font-family: var(--schrift-titel);
  font-size: var(--t-m); font-weight: 500;
  display: flex; align-items: center; gap: var(--a3);
  width: 100%; min-height: 40px;
  padding: 0 var(--a4);
  background: none; border: none;
  border-radius: var(--r-rund);
  color: var(--text); text-align: left;
  cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.reiter-knopf .icon { width: 20px; height: 20px; color: var(--text-leise); }
.reiter-knopf:hover { background: var(--flaeche-2); }
.reiter-knopf:active { background: var(--flaeche-3); }
.reiter-knopf.aktiv { background: var(--primaer-hell); color: var(--primaer); }
.reiter-knopf.aktiv .icon { color: var(--primaer); }

/* Band über die volle Breite (Vorführmodus, Warnungen). */
.band {
  flex: none;
  display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap;
  padding: var(--a2) var(--a5);
  font-size: var(--t-s);
  background: var(--flaeche-2);
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}
.band-warnung { background: var(--warnung-hell); color: var(--warnung); }
.band-info    { background: var(--info-hell);    color: var(--info); }
.band .knopf  { margin-left: var(--a2); height: 32px; }

/* ---------- Titelzeile eines Detailfensters ---------- */

.seitenkopf {
  display: flex; flex-direction: column; gap: var(--a1);
  padding-bottom: var(--a5);
  margin-bottom: var(--a5);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf h1 {
  font-size: 28px; line-height: 36px; font-weight: 400;
  color: var(--text); overflow-wrap: anywhere;
}
.seitenkopf-unter {
  font-size: var(--t-m); color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seitenkopf .chips { margin-top: var(--a2); }

/* Der Pfad über dem Titel («Geräte»): zeigt, wo man ist, und führt
   zurück in die Liste. */
.seitenkopf-pfad {
  display: inline-flex; align-items: center; gap: var(--a1);
  align-self: flex-start;
  font-size: var(--t-s); font-weight: 500; color: var(--text-leise);
  margin-bottom: var(--a1);
}
.seitenkopf-pfad::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); margin-right: 2px;
}
.seitenkopf-pfad:hover { color: var(--primaer); text-decoration: none; }


/* ==================================================================
   4. Karten und Abschnitte
   ================================================================== */

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}
.karte-kopf { padding: var(--a4) var(--a5) var(--a2); }
.karte-titel { font-size: var(--t-l); font-weight: 500; color: var(--text); }
.karte-unter { font-size: var(--t-s); color: var(--text-leise); margin-top: 2px; }
.karte-inhalt { padding: var(--a2) var(--a5) var(--a5); }

.karte-kopf-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a3); flex-wrap: wrap;
}

/* Blöcke im Karteninhalt (Feldliste, Tabelle, Chips, Kacheln, Hinweise)
   stehen mit gleichem Abstand untereinander. Zeilen derselben Liste, die
   direkt in der Karte liegen, bleiben ohne Abstand. */
.karte-inhalt > * + * { margin-top: var(--a4); }
.karte-inhalt > .g-hinweis + .g-hinweis,
.karte-inhalt > .g-person + .g-person,
.karte-inhalt > .g-roh-zeile + .g-roh-zeile,
.karte-inhalt > .g-vergleich + .g-vergleich,
.karte-inhalt > .liste-zeile + .liste-zeile,
.karte-inhalt > .datenzeile + .datenzeile { margin-top: 0; }

/* Fusszeile einer Karte mit den Aktionen (Material: Card actions). */
.karte-aktionen {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie-leicht);
}
.karte-inhalt > .karte-aktionen:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Zeilenlisten (.g-person, .g-hinweis, .datenzeile …) nehmen der letzten
   Zeile die Linie über :last-child. Folgt eine Fusszeile, ist die letzte
   Zeile aber nicht mehr das letzte Kind — dann stünden ihre Linie und die
   der Fusszeile dicht nebeneinander. Wer vor der Fusszeile steht, gibt
   seine Linie ab; es bleibt genau eine. */
.karte-inhalt > *:has(+ .karte-aktionen) { border-bottom: none; }

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--a4);
  align-items: start;
}
.karte-breit { grid-column: 1 / -1; }

.stapel { display: grid; gap: var(--a4); }

.bereich { margin-bottom: var(--a6); }
.bereich-titel {
  font-family: var(--schrift-titel);
  font-size: var(--t-l); font-weight: 500; line-height: 24px;
  color: var(--text);
}
.bereich-unter { font-size: var(--t-s); color: var(--text-leise); margin: 2px 0 var(--a4); }

.gitter   { display: grid; gap: var(--a4); align-items: start; }
.gitter-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.gitter-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }


/* ==================================================================
   5. Kennzahl-Kacheln — Beschriftung oben, Zahl darunter (wie in der
      Search Console). Farbe ausschliesslich auf der Zahl.
   ================================================================== */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: var(--a4);
}

.kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  font: inherit; color: var(--text); text-align: left;
  padding: var(--a4) var(--a5);
  display: flex; flex-direction: column; width: 100%;
  transition: background .12s, border-color .12s;
}
button.kachel { cursor: pointer; }
button.kachel:hover { background: var(--flaeche); border-color: var(--umriss-leicht); }
button.kachel:active { background: var(--flaeche-2); }
.kachel[data-klickbar="nein"] { cursor: default; }

.kachel-text  { order: 1; font-size: var(--t-m); color: var(--text-leise); line-height: 20px; }
.kachel-wert {
  order: 2;
  font-family: var(--schrift-titel);
  font-size: 32px; font-weight: 400; line-height: 40px;
  margin-top: var(--a1);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.kachel-wert.klein { font-size: var(--t-xl); line-height: 32px; }
.kachel-unter { order: 3; font-size: var(--t-xs); color: var(--text-still); margin-top: 2px; }

.kachel.ton-erfolg  .kachel-wert { color: var(--erfolg); }
.kachel.ton-warnung .kachel-wert { color: var(--warnung); }
.kachel.ton-gefahr  .kachel-wert { color: var(--gefahr); }
.kachel.ton-info    .kachel-wert { color: var(--info); }


/* ==================================================================
   6. Chips
      span/a .chip  = kleine Statusmarke (24 px, gefärbte Fläche)
      button.chip   = Filterchip nach Material 3 (32 px, Rahmen)
   ================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.chips:empty { display: none; }

.chip {
  font: inherit; font-size: var(--t-xs); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--a1);
  height: 24px; padding: 0 var(--a2);
  background: var(--flaeche-2); color: var(--text-leise);
  border: none; border-radius: var(--r);
  white-space: nowrap; line-height: 1;
}
a.chip:hover { text-decoration: none; background: var(--flaeche-3); }

.chip-erfolg  { background: var(--erfolg-hell);  color: var(--erfolg); }
.chip-warnung { background: var(--warnung-hell); color: var(--warnung); }
.chip-gefahr  { background: var(--gefahr-hell);  color: var(--gefahr); }
.chip-info    { background: var(--info-hell);    color: var(--info); }
.chip-marke   { background: var(--primaer-hell); color: var(--primaer); }
.chip-leise   { background: none; color: var(--text-still); padding-left: 0; padding-right: 0; }

/* Filterchips (interaktiv). Ein langer Suchbegriff bricht innerhalb des
   Chips um, statt die Seite waagrecht rollen zu lassen. */
button.chip {
  height: auto; min-height: 32px; padding: 5px var(--a3);
  max-width: 100%;
  font-size: var(--t-m); font-weight: 500; line-height: 20px;
  color: var(--text-leise);
  background: var(--weiss);
  border: 1px solid var(--umriss-leicht);
  cursor: pointer;
  white-space: normal; text-align: left; overflow-wrap: anywhere;
  transition: background .12s;
}
.chip { max-width: 100%; }
span.chip, a.chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
button.chip:hover { background: var(--flaeche); }
button.chip.chip-marke,
button.chip.chip-info {
  background: var(--primaer-hell); color: var(--primaer); border-color: transparent;
}
button.chip.chip-marke:hover, button.chip.chip-info:hover { background: var(--primaer-container); }

.chip .x { color: currentColor; font-size: var(--t-l); line-height: 1; margin: 0 -2px 0 2px; opacity: .7; }
.chip:hover .x { opacity: 1; }


/* ==================================================================
   7. Knöpfe (Material 3: Outlined, Filled, Text, Tonal)
   ================================================================== */

.knopf {
  font: inherit; font-family: var(--schrift-titel);
  font-size: var(--t-m); font-weight: 500; line-height: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  height: 36px; padding: 0 var(--a4);
  background: var(--weiss); color: var(--primaer);
  border: 1px solid var(--umriss); border-radius: var(--r-rund);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, box-shadow .12s;
}
.knopf:hover  { background: rgba(11,87,208,.08); }
.knopf:active { background: rgba(11,87,208,.12); }
.knopf[disabled] {
  background: rgba(31,31,31,.06); color: rgba(31,31,31,.38);
  border-color: transparent; cursor: default;
}
.knopf .icon { color: currentColor; width: 18px; height: 18px; }
.knopf:has(> .icon:first-child):not(.knopf-sinnbild) { padding-left: var(--a3); }

.knopf-primaer {
  background: var(--primaer); color: var(--weiss); border-color: transparent;
}
.knopf-primaer:hover { background: var(--primaer-dunkel); box-shadow: var(--schatten); }
.knopf-primaer:active { background: var(--primaer-dunkel); box-shadow: none; }

.knopf-leise { background: none; border-color: transparent; color: var(--primaer); }
.knopf-leise:hover { background: rgba(11,87,208,.08); }

/* Neutral (grau): Nebensächliches, das keine Aktion in Markenfarbe
   verdient — etwa «Abmelden» in der Kopfzeile. */
.knopf-still { background: none; border-color: transparent; color: var(--text-leise); }
.knopf-still:hover  { background: var(--flaeche-2); }
.knopf-still:active { background: var(--flaeche-3); }

/* Nur Sinnbild, kein Text: quadratisch. Der Zweck gehört zwingend in
   title und aria-label, sonst ist der Knopf nicht benennbar. */
.knopf-sinnbild { width: 36px; padding: 0; gap: 0; flex: none; }
.knopf-sinnbild .icon { width: 20px; height: 20px; }

/* Gedrückter Zustand (Filter offen, Kompakt an, Archiv an): tonal. */
.knopf.aktiv { background: var(--primaer-hell); border-color: transparent; color: var(--primaer); }
.knopf.aktiv:hover { background: var(--primaer-container); }

.knopf-gefahr { background: var(--gefahr); color: var(--weiss); border-color: transparent; }
.knopf-gefahr:hover { background: #8c1d18; }

.zaehler {
  background: var(--primaer); color: var(--weiss);
  font-size: 11px; font-weight: 500; line-height: 16px;
  border-radius: var(--r-rund); padding: 0 6px;
  min-width: 16px; text-align: center;
}
.zaehler-still { background: var(--flaeche-3); color: var(--text-leise); }


/* ==================================================================
   8. Toolbar, Suche, Panels, Formularfelder
   ================================================================== */

.toolbar {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
}
.toolbar-teil { display: flex; align-items: center; gap: var(--a2); }

.suchfeld {
  position: relative; display: flex; align-items: center;
  flex: 1 1 280px; max-width: 480px; min-width: 200px;
}
.suchfeld .icon {
  position: absolute; left: 14px; width: 20px; height: 20px;
  color: var(--text-leise); pointer-events: none;
}

.suche {
  font: inherit; font-size: var(--t-m);
  height: 40px; padding: 0 44px; width: 100%;
  border: none; border-radius: var(--r-rund);
  background: var(--flaeche-2); color: var(--text);
  transition: background .12s, box-shadow .12s;
}
.suche::placeholder { color: var(--text-leise); }
/* Ohne Lupe (Suchfelder, die ein Skript baut) kein Platz dafür. */
.suchfeld:not(:has(> .icon)) .suche { padding-left: var(--a4); }
.suche:hover { background: var(--flaeche-3); }
.suche:focus {
  outline: none;
  background: var(--weiss);
  box-shadow: 0 1px 1px 0 rgba(65,69,73,.30), 0 1px 3px 1px rgba(65,69,73,.15);
}
.suche::-webkit-search-cancel-button { cursor: pointer; }

.kuerzel {
  position: absolute; right: 14px;
  font-family: var(--schrift); font-size: 11px; color: var(--text-still);
  border: 1px solid var(--linie); border-radius: 4px; padding: 0 5px; line-height: 16px;
  background: var(--weiss);
  pointer-events: none;
}

.anzahl { color: var(--text-leise); font-size: var(--t-s); font-variant-numeric: tabular-nums; }

.panel {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: var(--a1); z-index: 20;
  background: var(--weiss);
  border-radius: var(--r); box-shadow: var(--schatten-hoch);
  max-height: min(64vh, 580px); overflow-y: auto;
}
.panel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a3); padding: var(--a3) var(--a5);
  position: sticky; top: 0; background: var(--weiss); z-index: 1;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel); font-weight: 500;
}
.panel-koerper { padding: var(--a4) var(--a5) var(--a5); }

/* ---------- Formularfelder: Material Outlined ---------- */

.feld { margin-bottom: var(--a3); }
.feld-label {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 500; color: var(--text-leise);
  margin-bottom: var(--a1);
}
.feld-eingabe, .feld input, .feld select, .feld textarea {
  font: inherit; font-size: var(--t-m); width: 100%;
  min-height: 40px; padding: var(--a2) var(--a3);
  border: 1px solid var(--umriss); border-radius: var(--r-klein);
  background: var(--weiss); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.feld input:hover, .feld select:hover, .feld textarea:hover, .feld-eingabe:hover { border-color: var(--text); }
.feld-eingabe:focus, .feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--primaer);
  box-shadow: inset 0 0 0 1px var(--primaer);
}
.feld-eingabe[readonly], .feld input[readonly], .feld textarea[readonly] {
  color: var(--text-leise); background: var(--flaeche);
  border-color: var(--linie);
}
.feld-hinweis { font-size: var(--t-xs); color: var(--text-still); margin-top: 2px; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primaer); width: auto; min-height: 0;
}

.schloss { color: var(--text-still); font-size: var(--t-xs); }
.schloss::before { content: "\1F512"; }

/* ---------- Datenzeilen: Name links, Wert rechts ---------- */

.datenzeilen { display: grid; gap: 0; }

.datenzeile {
  display: grid;
  grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
  gap: var(--a4);
  padding: 10px 0;
  align-items: start;
  border-bottom: 1px solid var(--linie-leicht);
}
.datenzeile:first-child { padding-top: 2px; }
.datenzeile:last-child { border-bottom: none; padding-bottom: 2px; }

/* Bearbeitbares Feld: Beschriftung oben, Eingabe in voller Breite darunter,
   Hinweis unter dem Feld — wie ein Material-Textfeld mit Label. */
.datenzeile-form {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a1);
  padding: var(--a3) 0;
}
.datenzeile-form .datenzeile-name { font-size: var(--t-xs); font-weight: 500; line-height: 16px; }
.datenzeile-form .datenzeile-wert { white-space: normal; }
.datenzeile-form input:not([type="checkbox"]):not(.g-eingabe-schmal),
.datenzeile-form select:not(.g-eingabe-schmal),
.datenzeile-form textarea { max-width: 560px; }
.datenzeile-form .datenzeile-hinweis { margin-top: var(--a1); line-height: 16px; }

.datenzeile-name {
  display: flex; align-items: baseline; gap: 5px;
  font-size: var(--t-s); font-weight: 400; color: var(--text-leise);
  line-height: 20px;
}
.datenzeile-wert {
  font-size: var(--t-m); line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.datenzeile-wert.leer { color: var(--text-still); }
.datenzeile-neben { color: var(--text-still); font-size: var(--t-xs); margin-left: 6px; }
.datenzeile-hinweis { font-size: var(--t-xs); color: var(--text-still); margin-top: 3px; }
.datenzeile-zeile { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }

.datenzeile.geaendert .datenzeile-name::after {
  content: "\2022";
  color: var(--primaer);
  font-weight: 700;
}

.datenzeile-breit { display: block; padding: 10px 0; }
.datenzeile-breit .datenzeile-name { margin-bottom: var(--a2); }
.datenzeile-breit textarea {
  font: inherit; font-size: var(--t-m); width: 100%;
  min-height: 140px; resize: vertical;
  padding: var(--a2) var(--a3);
  border: 1px solid var(--umriss); border-radius: var(--r-klein);
  background: var(--weiss); color: var(--text);
}
.datenzeile-breit textarea:hover { border-color: var(--text); }
.datenzeile-breit textarea:focus {
  outline: none; border-color: var(--primaer); box-shadow: inset 0 0 0 1px var(--primaer);
}

/* Mehrfachauswahl in Filtern */
.mehrfach {
  max-height: 160px; overflow-y: auto;
  padding: var(--a1) var(--a2);
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--weiss);
}
.mehrfach label {
  display: block; font-size: var(--t-m); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 0;
}
.mehrfach input { margin-right: var(--a2); }
.mehrfach .zahl { color: var(--text-still); font-size: var(--t-xs); }


/* ==================================================================
   9. Tabellen (Material Data Table)
   ================================================================== */

.tabelle-rahmen {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.tabelle {
  border-collapse: separate; border-spacing: 0;
  width: max-content; min-width: 100%;
  font-size: var(--t-s);
}

.tabelle th {
  text-align: left; font-weight: 500;
  color: var(--text-leise); font-size: var(--t-xs); line-height: 16px;
  padding: 14px var(--a4); white-space: nowrap; cursor: pointer;
  position: sticky; top: 0; z-index: 3;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  user-select: none;
}
.tabelle th:hover { color: var(--text); background: var(--flaeche); }
.tabelle th.sortiert { color: var(--text); }
.tabelle th .pfeil { color: var(--primaer); margin-left: 4px; }

.tabelle td {
  padding: var(--zellen-hoch) var(--a4);
  white-space: nowrap; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie-leicht);
  color: var(--text);
}
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover td { background: var(--flaeche); }

.tabelle th:first-child, .tabelle td:first-child {
  position: sticky; left: 0; z-index: 2; min-width: 180px;
}
.tabelle th:first-child { z-index: 4; }

.name-link { font-weight: 500; color: var(--text); }
.tabelle tbody tr:hover .name-link { color: var(--primaer); }

/* Auffällige Zeile (Telefonliste: nicht zugewiesene Nummer). Status wird
   über Farbe gezeigt, nie über Form oder Fläche: kein getönter Grund,
   sondern Name und markierte Werte in --warnung; dazu ein Chip in der
   Zeile. Die Hover-Fläche bleibt --flaeche. */
.tabelle tbody tr.zeile-frei .name-link,
.tabelle tbody tr.zeile-frei .zeile-frei-wert { color: var(--warnung); }

.punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--erfolg); margin-right: var(--a2); vertical-align: middle;
}
.punkt-aus { background: var(--umriss-leicht); }

.tabelle-leer { padding: var(--a7) var(--a5); text-align: center; color: var(--text-leise); }

/* Kurze Aufstellung in einer Karte */
.tabelle-schlicht-rahmen { overflow-x: auto; }
.tabelle-schlicht { width: 100%; }
.tabelle-schlicht th { position: static; cursor: default; padding-top: var(--a2); padding-bottom: var(--a2); }
.tabelle-schlicht th:first-child, .tabelle-schlicht td:first-child {
  position: static; min-width: 0;
}
.tabelle-schlicht th, .tabelle-schlicht td { padding-left: 0; }
.tabelle-schlicht th:not(:first-child),
.tabelle-schlicht td:not(:first-child) { padding-left: var(--a3); }
.tabelle-schlicht td { padding-top: var(--a2); padding-bottom: var(--a2); white-space: normal; max-width: 420px; }
.tabelle-schlicht tbody tr { cursor: default; }
.tabelle-schlicht tbody tr:hover td { background: transparent; }
.tabelle-schlicht th:hover { background: transparent; color: var(--text-leise); }

/* Dichte «kompakt» */
.dicht { --zellen-hoch: 7px; }
.dicht .tabelle { font-size: var(--t-xs); }
.dicht .tabelle th { padding-top: var(--a2); padding-bottom: var(--a2); }


/* ==================================================================
   10. Tri-State-Schalter (Material 3 Switch)
        0 = aus (umschaltbar), 1 = an (umschaltbar),
        2 = an und gesperrt (aus AD-Gruppe), mit Schloss und title.
   ================================================================== */

.schalter {
  position: relative;
  width: 44px; height: 24px; flex: none;
  border: 2px solid var(--umriss); border-radius: var(--r-rund);
  background: var(--weiss);
  cursor: pointer; padding: 0;
  transition: background .14s, border-color .14s;
}
.schalter::after {
  content: "";
  position: absolute; top: 50%; left: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--umriss);
  transform: translateY(-50%);
  transition: transform .14s, width .14s, height .14s, left .14s, background .14s;
}
.schalter:hover::after { background: var(--text-leise); }
.schalter.an { background: var(--primaer); border-color: var(--primaer); }
.schalter.an::after {
  left: 2px; width: 18px; height: 18px;
  background: var(--weiss);
  transform: translate(18px, -50%);
}

.schalter.gesperrt { background: var(--primaer-dunkel); border-color: var(--primaer-dunkel); cursor: not-allowed; }
.schalter.gesperrt::after {
  left: 2px; width: 18px; height: 18px;
  background: var(--weiss);
  transform: translate(18px, -50%);
}
.schalter.gesperrt::before {
  content: "\1F512";
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  font-size: 10px; line-height: 1; color: var(--weiss);
}
.schalter[disabled] { opacity: 1; }

.schalter-zeile {
  display: flex; align-items: center; gap: var(--a3);
  min-height: 44px; padding: var(--a1) var(--a2);
  border-radius: var(--r);
}
.schalter-zeile:hover { background: var(--flaeche); }
/* Der Name darf umbrechen: lieber zwei Zeilen als ein abgeschnittener
   Programmname. Die Chips rechts nehmen nur so viel Platz wie nötig. */
.schalter-zeile .name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.schalter-zeile > .b-programm-zusatz, .schalter-zeile > .chips {
  flex: 0 1 auto; justify-content: flex-end; max-width: 50%;
}
.schalter-zeile .zusatz { font-size: var(--t-xs); color: var(--text-still); }


/* ==================================================================
   11. Zustände: Laden, Fehler, Leer, Skelett
   ================================================================== */

.lade, .fehler, .leerzustand {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: var(--a2);
  padding: var(--a5);
  min-height: 200px;
  width: 100%;
  margin: auto;
}

.zustand-bereich {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.karte .lade, .karte .fehler, .karte .leerzustand,
.karten .lade, .karten .fehler {
  min-height: 0;
  padding: var(--a5) var(--a3);
}
.karte-inhalt > .leerzustand { min-height: 0; padding: var(--a5) var(--a3); }

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--flaeche-3);
  border-top-color: var(--primaer);
  border-radius: 50%;
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.lade-text { font-size: var(--t-m); color: var(--text); margin-top: var(--a2); }
.lade-fortschritt { font-size: var(--t-xs); color: var(--text-leise);
                    font-variant-numeric: tabular-nums; }

.fehler-titel  { font-size: var(--t-xl); font-weight: 400; }
.fehler-text   { font-size: var(--t-m); color: var(--text); max-width: 560px; }
.fehler-hinweis{ font-size: var(--t-s); color: var(--text-leise); max-width: 560px; }
.fehler .knopf { margin-top: var(--a3); }
.fehler .icon-gross { width: 32px; height: 32px; color: var(--gefahr); }

.leer-titel { font-size: var(--t-m); font-weight: 500; color: var(--text); }
.leer-text  { font-size: var(--t-s); color: var(--text-leise); max-width: 460px; }

.skelett {
  background: linear-gradient(90deg, var(--flaeche-2) 25%, var(--flaeche) 37%, var(--flaeche-2) 63%);
  background-size: 400% 100%;
  animation: schimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-klein);
  height: 12px;
}
@keyframes schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skelett-zeile { height: 34px; margin: var(--a2) var(--a3); }


/* ==================================================================
   12. Zeitstrahl (Google-Diagrammfarben)
   ================================================================== */

.zeitstrahl { padding: var(--a4) var(--a2) var(--a2); overflow-x: auto; }

.zeitstrahl-achse {
  display: flex; align-items: flex-end;
  gap: var(--a1);
  min-width: 100%;
}

.zeitstrahl-tick {
  flex: 1 1 0; min-width: 56px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--a1);
  background: none; border: none; font: inherit; color: inherit;
  padding: var(--a2) 2px;
  border-radius: var(--r);
  position: relative;
}
.zeitstrahl-tick.klickbar { cursor: pointer; }
.zeitstrahl-tick.klickbar:hover { background: var(--flaeche); }
.zeitstrahl-tick.vergangen { opacity: .6; }
.zeitstrahl-tick.aktuell { background: var(--primaer-hell); }

.zeitstrahl-saeulen {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 96px; width: 100%;
}
.saeule {
  width: 14px; min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--flaeche-3);
  border: none; padding: 0; cursor: default;
}
button.saeule { cursor: pointer; }
button.saeule:hover { filter: brightness(.9); }
.saeule-a { background: var(--primaer); }
.saeule-b { background: var(--primaer-schwach); }
.saeule-b.gefahr { background: #d93025; }
.saeule-b.warnung { background: #f9ab00; }

.zeitstrahl-linie { height: 1px; width: 100%; background: var(--linie); }

.zeitstrahl-label {
  font-size: var(--t-xs); color: var(--text-leise); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.zeitstrahl-tick.aktuell .zeitstrahl-label { color: var(--primaer); font-weight: 500; }
.zeitstrahl-werte { font-size: 11px; color: var(--text-still);
                    font-variant-numeric: tabular-nums; }

.zeitstrahl-marke {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); color: var(--text-leise);
}
.zeitstrahl-marke::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--primaer); flex: none;
}
.zeitstrahl-marke.gefahr::before  { background: #d93025; }
.zeitstrahl-marke.warnung::before { background: #f9ab00; }
.zeitstrahl-marke.info::before    { background: var(--primaer-schwach); }
.zeitstrahl-marke.stark { color: var(--text); font-weight: 500; }
.zeitstrahl-marke.stark::before { display: none; }

.zeitstrahl-legende {
  display: flex; flex-wrap: wrap; gap: var(--a2) var(--a5);
  padding: var(--a3) var(--a5) var(--a4);
  border-top: 1px solid var(--linie-leicht);
  font-size: var(--t-xs); color: var(--text-leise);
}


/* ==================================================================
   13. Detailfenster: Rumpf, Navigation, Speicherleiste, Toast, Dialog
   ================================================================== */

.fenster-rumpf {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  align-content: stretch;
}

.fenster-nav {
  grid-column: 1;
  width: var(--nav-breit);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  padding: var(--a3) var(--a3) var(--a6);
  background: var(--weiss);
  border-right: 1px solid var(--linie);
}

.fenster-nav-menue {
  position: sticky;
  top: var(--a3);
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  max-height: calc(100dvh - var(--a6));
  overflow-y: auto;
}

.fenster-nav-knopf {
  font: inherit; font-family: var(--schrift-titel);
  font-size: var(--t-m); font-weight: 500;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-rund);
  padding: 0 var(--a4);
  min-height: 40px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a2);
  transition: background .12s;
}
.fenster-nav-knopf:hover { background: var(--flaeche-2); }
.fenster-nav-knopf:active { background: var(--flaeche-3); }
.fenster-nav-knopf.aktiv { background: var(--primaer-hell); color: var(--primaer); }
.fenster-nav-zahl {
  font-family: var(--schrift);
  font-size: var(--t-xs); font-weight: 400;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}
.fenster-nav-knopf.aktiv .fenster-nav-zahl { color: var(--primaer); }

.fenster-inhalt {
  grid-column: 2;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: var(--a5) var(--a6) 104px;
}
.fenster-bahn { max-width: 1400px; width: 100%; }

.speicherleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--a3);
  flex-wrap: wrap;
  padding: var(--a3) var(--a6);
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -2px 8px rgba(60,64,67,.08);
}
.speicher-text { font-size: var(--t-m); font-weight: 500; margin-right: auto; }
.speicher-fehler {
  font-size: var(--t-xs);
  background: var(--gefahr-hell);
  border-radius: var(--r-klein);
  padding: 4px 9px;
  max-width: 60ch;
}

/* Snackbar */
.toast, .hinweisband {
  position: fixed;
  right: var(--a5);
  bottom: 80px;
  z-index: 45;
  background: #3c4043;
  color: var(--weiss);
  font-size: var(--t-m);
  border-radius: var(--r-klein);
  padding: 14px 16px;
  box-shadow: var(--schatten-hoch);
  max-width: 60ch;
  min-width: 280px;
  animation: einblenden .18s ease-out;
}
.hinweisband { bottom: var(--a5); }
.toast-fehler { background: var(--gefahr); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }

.dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(31,31,31,.32);
  z-index: 50;
}
.dialog {
  position: fixed;
  z-index: 51;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--weiss);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-dialog);
  padding: var(--a5);
}
.dialog h2 { font-size: var(--t-xl); font-weight: 400; margin-bottom: var(--a4); }
.dialog p { font-size: var(--t-m); color: var(--text-leise); margin: 0 0 var(--a2); }
.dialog-knoepfe {
  display: flex; justify-content: flex-end; gap: var(--a2);
  margin-top: var(--a5); flex-wrap: wrap;
}


/* ==================================================================
   14. Kleine wiederkehrende Muster
   ================================================================== */

.liste-zeile {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--a3);
  border: none; background: none; font: inherit;
  color: var(--text); text-align: left;
  padding: var(--a2); margin: 0 calc(var(--a2) * -1);
  width: calc(100% + var(--a4));
  border-radius: var(--r-klein);
}
button.liste-zeile { cursor: pointer; }
button.liste-zeile:hover { background: var(--flaeche); }
.liste-zeile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); }
.liste-zeile .zusatz { font-size: var(--t-xs); color: var(--text-leise);
                       font-variant-numeric: tabular-nums; }

.spur { display: block; height: 4px; background: var(--flaeche-3);
        border-radius: 2px; margin-top: 6px; overflow: hidden; }
.fuell { display: block; height: 100%; background: var(--primaer); border-radius: 2px; }

.hinweis { color: var(--text-leise); font-size: var(--t-s); line-height: 18px; }

/* Hinweisbanner in einer Karte: Text, dazu Chips oder ein Knopf. Getönte
   Fläche nach dem Ton des Textes darin, wie ein Material-Banner. */
.b-hinweis, .g-banner {
  display: flex; align-items: center; gap: var(--a2) var(--a3); flex-wrap: wrap;
  font-size: var(--t-s); line-height: 18px;
  padding: var(--a3) var(--a4);
  border-radius: var(--r);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.b-hinweis > .t-warnung, .g-banner > .t-warnung { flex: 1 1 260px; }
.b-hinweis:has(> .t-warnung) { background: var(--warnung-hell); border-color: transparent; }
.b-hinweis:has(> .t-gefahr)  { background: var(--gefahr-hell);  border-color: transparent; }
.b-hinweis:has(> .t-info)    { background: var(--info-hell);    border-color: transparent; }
.b-hinweis .knopf { margin-left: auto; }
.b-hinweis .chips { flex-basis: 100%; }


/* ==================================================================
   15. Schmale Fenster
   ================================================================== */

@media (max-width: 1100px) {
  :root { --nav-breit: 200px; }
  .inhalt { padding: var(--a5) var(--a5) var(--a7); }
  .inhalt-fest { padding: var(--a4) var(--a5) var(--a5); }
  .fenster-inhalt { padding: var(--a5) var(--a5) 104px; }
}

@media (max-width: 760px) {
  :root { --kopf-hoch: 56px; }

  /* App-Leiste: Wortmarke etwas kleiner; die Aktionen bleiben in einer
     Zeile und rollen notfalls waagrecht. */
  .kopf { padding: 0 var(--a3); gap: var(--a2); }
  .kopf-rechts {
    gap: var(--a1); flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; min-width: 0;
  }
  .kopf-rechts::-webkit-scrollbar { display: none; }
  .kopf-rechts .knopf:not(.knopf-sinnbild) { padding-left: var(--a3); padding-right: var(--a3); }
  .wortmarke { font-size: 18px; line-height: 24px; }
  .stand { display: none; }

  /* Hauptseite: aus der linken Navigation wird eine Reiterleiste. */
  .rumpf { flex-direction: column; }
  .reiter {
    width: auto;
    flex: none;
    flex-direction: row;
    gap: 0;
    padding: 0 var(--a2);
    border-right: none;
    border-bottom: 1px solid var(--linie);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter-knopf {
    flex: 1 0 auto; width: auto; justify-content: center;
    min-height: 48px; padding: 0 var(--a3);
    border-radius: 0; color: var(--text-leise);
    border-bottom: 3px solid transparent;
  }
  .reiter-knopf .icon { display: none; }
  .reiter-knopf:hover { background: var(--flaeche); }
  .reiter-knopf.aktiv {
    background: none; color: var(--primaer);
    border-bottom-color: var(--primaer);
  }

  .knopf { min-height: var(--tippziel); }
  .knopf-sinnbild { width: var(--tippziel); }

  .inhalt { padding: var(--a4) var(--a4) var(--a6); }
  .inhalt-fest { padding: var(--a3); }

  .kacheln { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--a3); }
  .kachel { padding: var(--a3) var(--a4); }
  .kachel-wert { font-size: var(--t-xxl); line-height: 36px; }
  .gitter-2, .gitter-3, .karten { grid-template-columns: 1fr; }
  .suchfeld { max-width: none; flex-basis: 100%; }
  .kuerzel { display: none; }
  .hinweisband, .toast { left: var(--a3); right: var(--a3); max-width: none; min-width: 0; }
  .hinweisband { bottom: var(--a3); }

  .seitenkopf h1 { font-size: var(--t-xl); line-height: 28px; }
  .seitenkopf-unter { white-space: normal; }

  /* Detailfenster: Reiterleiste statt Spalte. */
  .fenster-rumpf {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .fenster-nav {
    grid-row: 1;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 var(--a2);
    border-right: none;
    border-bottom: 1px solid var(--linie);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    position: sticky;
    top: 0;
    z-index: 20;
    scrollbar-width: none;
  }
  .fenster-nav::-webkit-scrollbar { display: none; }
  .fenster-nav-menue {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0;
    max-height: none;
    overflow: visible;
  }
  .fenster-nav-knopf {
    min-height: 48px;
    padding: 0 var(--a3);
    justify-content: center;
    border-radius: 0;
    color: var(--text-leise);
    border-bottom: 3px solid transparent;
  }
  .fenster-nav-knopf.aktiv { background: none; color: var(--primaer); border-bottom-color: var(--primaer); }

  .fenster-inhalt {
    grid-column: 1;
    grid-row: 2;
    padding: var(--a4) var(--a4) 112px;
  }

  .speicherleiste { padding: var(--a2) var(--a3); gap: var(--a2); }
  .speicher-text { width: 100%; margin-right: 0; }
  .speicherleiste .knopf { flex: 1 1 auto; justify-content: center; }
}