/* LIGNA-App: Farben, Abstände und Schrift stehen nur hier oben als Variablen. Design wie im Workspace (#110): Limette #94b654,
   Plus Jakarta Sans (selbst ausgeliefert, OFL, siehe fonts/OFL.txt; nichts von Dritten, die Inhaltsrichtlinie bleibt streng).
   Zwei Töne der Primärfarbe: --primaer (#94b654) für Flächen mit dunklem Text (--on-primaer), --accent für Links, Rahmen und Text
   auf hellem Grund (dunkler, damit WCAG AA hält; im dunklen Thema ist es die Limette selbst).
   Statusfarben: Ausgangspunkt sind die Workspace-Werte; helle Töne, die als Text unter 4,5:1 bleiben, sind abgedunkelt. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eaedf2; --ink: #111111; --muted: #4a4a4a; --line: #d0d5e0;
  --primaer: #94b654; --on-primaer: #1a1a1a;
  --accent: #506826; --accent-soft: #ecf2e0;
  --ok: #4d6a22; --ok-soft: #e9efdf; --warn: #80580f; --warn-soft: #f6efe0;
  --crit: #8f3a47; --crit-soft: #f6e6e8; --info: #036e85; --info-soft: #e0f0f4;
  --fokus: #506826; --schatten: 0 2px 8px rgb(0 0 0 / 12%);
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px;
  --radius: 8px; --radius-klein: 4px; --touch: 44px;
  --schrift-anzeige: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-text: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-daten: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --nav-breite: 232px; --tab-hoehe: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #1a1a1a; --surface-2: #222222; --ink: #e8e8e8; --muted: #9a9a9a; --line: #2e2e2e;
    --primaer: #94b654; --on-primaer: #1a1a1a;
    --accent: #94b654; --accent-soft: #232b17;
    --ok: #a9c877; --ok-soft: #25301a; --warn: #fbaf3f; --warn-soft: #33270f;
    --crit: #d97086; --crit-soft: #371b21; --info: #33bedb; --info-soft: #10303a;
    --fokus: #a9c877; --schatten: 0 2px 8px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #1a1a1a; --surface-2: #222222; --ink: #e8e8e8; --muted: #9a9a9a; --line: #2e2e2e;
  --primaer: #94b654; --on-primaer: #1a1a1a;
  --accent: #94b654; --accent-soft: #232b17;
  --ok: #a9c877; --ok-soft: #25301a; --warn: #fbaf3f; --warn-soft: #33270f;
  --crit: #d97086; --crit-soft: #371b21; --info: #33bedb; --info-soft: #10303a;
  --fokus: #a9c877; --schatten: 0 2px 8px rgb(0 0 0 / 60%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--schrift-text); min-height: 100vh; }
h1, h2, h3, h4 { font-family: var(--schrift-anzeige); font-weight: 700; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: 1.9rem; line-height: 1.1; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.leise { color: var(--muted); }
.daten { font-family: var(--schrift-daten); font-size: .88rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nur-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.versteckt, [hidden] { display: none !important; }
.umbruch { overflow-wrap: anywhere; min-width: 0; }

/* Hülle: Handy = Inhalt mit Tab-Leiste unten, ab Tablet = Seitenleiste links */
.huelle { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.kopfleiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-4); min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--line); }
.marke { display: flex; align-items: center; gap: var(--abstand-2); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.marke .logo { height: 28px; width: auto; flex: none; display: block; }
.marke .marke-text { padding-left: var(--abstand-3); border-left: 2px solid var(--primaer); line-height: 1.2; }
.logo-dunkel { display: none !important; }
:root[data-theme="dark"] .logo-hell { display: none !important; }
:root[data-theme="dark"] .logo-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-hell { display: none !important; } :root:not([data-theme="light"]) .logo-dunkel { display: block !important; } }
.inhalt { padding: var(--abstand-4); padding-bottom: calc(var(--tab-hoehe) + var(--abstand-5) + env(safe-area-inset-bottom)); width: 100%; display: grid; gap: var(--abstand-4); align-content: start; }
.inhalt:focus { outline: none; }

/* Navigation (#102): Handy = untere Leiste (.navi-klein) mit höchstens fünf beschrifteten Einträgen, ab Tablet = Seitenleiste (.navi-gross) */
.navi { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.navi-gross { display: none; }
.navi-klein { display: flex; width: 100%; }
.navi-tab { flex: 1 1 0; min-width: 0; min-height: var(--tab-hoehe); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); text-decoration: none; font: inherit; font-size: .78rem; font-weight: 600; padding: 4px 2px; background: none; border: 0; cursor: pointer; }
.navi-tab .navi-ik { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .15s; }
.navi-tab svg { width: 24px; height: 24px; }
.navi-tab[aria-current="page"] { color: var(--accent); font-weight: 700; }
.navi-tab[aria-current="page"] .navi-ik { background: var(--accent-soft); }
.navi-tab:active .navi-ik { background: var(--accent-soft); }
.navi .navi-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navi .gruppe-titel { display: none; }
.mehr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.mehr-link { display: flex; align-items: center; gap: var(--abstand-3); min-height: 52px; padding: 0 var(--abstand-4); border-radius: var(--radius-klein); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); text-decoration: none; font-weight: 600; }
.mehr-link svg { width: 24px; height: 24px; color: var(--accent); flex: none; }
.mehr-link[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

@media (min-width: 768px) {
  .huelle { grid-template-columns: var(--nav-breite) minmax(0, 1fr); grid-template-rows: 1fr; }
  .kopfleiste { position: static; background: transparent; border-bottom: 0; padding: var(--abstand-4) var(--abstand-5) 0; justify-content: flex-end; min-height: 0; }
  .kopfleiste .marke { display: none; }
  .navi { position: sticky; top: 0; align-self: start; height: 100vh; grid-column: 1; grid-row: 1; flex-direction: column; justify-content: flex-start; border-top: 0; border-right: 1px solid var(--line);
    padding: var(--abstand-5) var(--abstand-3); gap: var(--abstand-1); }
  .navi-klein { display: none; }
  .navi-gross { display: flex; flex-direction: column; gap: var(--abstand-1); width: 100%; }
  .navi .seiten-marke { display: flex; margin: 0 var(--abstand-2) var(--abstand-4); }
  .navi-gross a { display: flex; align-items: center; justify-content: flex-start; gap: var(--abstand-3); min-height: var(--touch); padding: 0 var(--abstand-3); border-radius: var(--radius-klein); font-size: 1rem;
    color: var(--muted); text-decoration: none; font-weight: 600; }
  .navi-gross a svg { width: 24px; height: 24px; }
  .navi-gross a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .navi .gruppe-titel { display: block; margin: var(--abstand-4) var(--abstand-3) var(--abstand-1); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
  .rahmen { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
  .inhalt { padding: var(--abstand-5); padding-bottom: var(--abstand-6); }
}
@media (max-width: 767px) { .navi .seiten-marke { display: none; } .rahmen { display: contents; } }
@media (min-width: 1200px) { .inhalt { padding-inline: var(--abstand-6); } }

/* Bausteine */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); }
.seitenkopf p { margin-top: var(--abstand-1); }
.zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); color: var(--accent); font-weight: 600; text-decoration: none; margin-left: calc(var(--abstand-2) * -1); padding-inline: var(--abstand-2); }
.zurueck svg { width: 20px; height: 20px; }
.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--abstand-4); display: grid; gap: var(--abstand-3); box-shadow: var(--schatten); min-width: 0; align-content: start; }
.karte > h2, .karte > h3 { color: var(--ink); }
.karte-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.karte-link:hover { border-color: var(--accent); }
.karte-link:active { transform: scale(.995); }
.raster { display: grid; gap: var(--abstand-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.raster-2 { display: grid; gap: var(--abstand-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.stapel { display: grid; gap: var(--abstand-3); }
.zeile-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
.zeile-flex.getrennt { justify-content: space-between; }

.geraet-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--abstand-3); }
.geraet-kopf h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
.geraet-ikone { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.geraet-ikone svg { width: 24px; height: 24px; }
.kachel-titel { display: flex; gap: var(--abstand-3); align-items: center; min-width: 0; }
.kachel-titel > div { min-width: 0; }

/* Plaketten: Farbe nie allein, immer mit Symbol und Text */
.plakette { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 999px; font-size: .84rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.plakette svg { width: 16px; height: 16px; flex: none; }
.plakette.ok { background: var(--ok-soft); color: var(--ok); }
.plakette.warn { background: var(--warn-soft); color: var(--warn); }
.plakette.crit { background: var(--crit-soft); color: var(--crit); }
.plakette.info { background: var(--info-soft); color: var(--info); }
.plaketten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }

/* Knöpfe und Felder: mindestens 44 px */
.knopf { font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 var(--abstand-5); border-radius: var(--radius-klein); border: 1px solid var(--primaer); background: var(--primaer); color: var(--on-primaer);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); text-decoration: none; }
.knopf svg { width: 20px; height: 20px; }
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .6; cursor: progress; filter: none; }
.knopf.zweit { background: transparent; border-color: var(--accent); color: var(--accent); }
.knopf.gefahr { background: transparent; border-color: var(--crit); color: var(--crit); }
.knopf.gross { min-height: 52px; padding-inline: 32px; font-size: 1.1rem; }
.knopf.voll { width: 100%; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
label .hinweis { font-weight: 400; color: var(--muted); font-size: .88rem; }
/* Handys (#107): Hilfetext und Prüfhinweis unter der IMEI */
.stapel-eng { display: grid; gap: 2px; }
.hinweis.fehler-text { color: var(--crit); font-weight: 600; }
label .hinweis a { color: var(--accent); font-weight: 700; }
input, select, textarea { font: inherit; min-height: var(--touch); padding: 8px 12px; border: 1px solid var(--muted); border-radius: var(--radius-klein); background: var(--surface); color: var(--ink); min-width: 0; width: 100%; }
input::placeholder { color: var(--muted); opacity: .85; }
.formular { display: grid; gap: var(--abstand-4); }
.formular-2 { display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.suche { position: relative; }
.suche input { padding-left: 42px; }
.suche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }

/* Umschalter (Filter, Liste/Besitzer) */
.umschalter { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.umschalter button { font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 var(--abstand-4); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.umschalter button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.umschalter .zaehler { font-family: var(--schrift-daten); font-size: .8rem; color: var(--muted); }

/* Meldungen */
.hinweis-box { padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-klein); background: var(--accent-soft); border-left: 4px solid var(--accent); display: grid; gap: 4px; }
.hinweis-box.warn { background: var(--warn-soft); border-color: var(--warn); }
.hinweis-box.crit { background: var(--crit-soft); border-color: var(--crit); }
.hinweis-box.ok { background: var(--ok-soft); border-color: var(--ok); }
.hinweis-box.info { background: var(--info-soft); border-color: var(--info); }
.hinweis-box strong { display: block; }
.demo-band { background: var(--info-soft); color: var(--ink); border-bottom: 1px solid var(--info); padding: 6px var(--abstand-4); font-size: .88rem; text-align: center; }
.leer { text-align: center; padding: var(--abstand-6) var(--abstand-4); display: grid; gap: var(--abstand-4); justify-items: center; }
.leer > svg { width: 72px; height: 72px; color: var(--accent); }
.leer p { max-width: 36ch; }
.laedt { color: var(--muted); padding: var(--abstand-5); text-align: center; }

/* Angaben als Liste aus Bezeichnung und Wert */
.angaben { margin: 0; display: grid; gap: 0; }
.angaben > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px var(--abstand-3); padding: 9px 0; border-top: 1px solid var(--line); }
.angaben > div:first-child { border-top: 0; padding-top: 0; }
.angaben dt { color: var(--muted); font-size: .92rem; }
.angaben dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; min-width: 0; }
.angaben dd .leise { font-weight: 400; }
@media (max-width: 480px) { .angaben > div { grid-template-columns: minmax(0, 1fr); } }
.abschnitt-titel { display: flex; align-items: center; gap: var(--abstand-2); font-size: 1.05rem; text-transform: none; }
.abschnitt-titel svg { width: 22px; height: 22px; color: var(--accent); }
.liste-schlicht { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.liste-schlicht li { padding: var(--abstand-3); border-radius: var(--radius-klein); background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
progress { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--primaer); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--primaer); }
progress.knapp::-webkit-progress-value { background: var(--crit); }
progress.knapp::-moz-progress-bar { background: var(--crit); }

/* Schrittanzeige */
.schritte { display: flex; gap: var(--abstand-2); list-style: none; padding: 0; margin: 0; counter-reset: s; }
.schritte li { flex: 1 1 0; display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); min-width: 0; }
.schritte li::before { content: ""; height: 6px; border-radius: 999px; background: var(--line); }
.schritte li[aria-current="step"] { color: var(--accent); }
.schritte li[aria-current="step"]::before, .schritte li.fertig::before { background: var(--primaer); }
.schritte li.fertig { color: var(--ink); }
.schritt-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.warte { display: grid; justify-items: center; gap: var(--abstand-3); text-align: center; padding: var(--abstand-4); }
.dreher { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--accent-soft); border-top-color: var(--accent); animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.haken-gross { width: 64px; height: 64px; color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .dreher { animation-duration: 4s; } * { scroll-behavior: auto !important; } }
details.hilfe { border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 0 var(--abstand-3); background: var(--surface-2); }
details.hilfe summary { min-height: var(--touch); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
details.hilfe > div { padding-bottom: var(--abstand-3); display: grid; gap: var(--abstand-2); }
details.hilfe ul, details.hilfe ol, .karte ul.punkte, .karte ol.punkte { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }

.gelesen, .nicht { border-left: 4px solid var(--ok); background: var(--ok-soft); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-klein); }
.nicht { border-color: var(--crit); background: var(--crit-soft); }
.gelesen ul, .nicht ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 2px; }

/* Cockpit */
.kennzahlen { display: grid; gap: var(--abstand-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--abstand-3) var(--abstand-4); display: grid; gap: 2px; box-shadow: var(--schatten); text-decoration: none; color: inherit; min-width: 0; align-content: start; }
.kennzahl b { font-family: var(--schrift-anzeige); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: .9rem; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.kennzahl.crit { border-color: var(--crit); } .kennzahl.crit b { color: var(--crit); }
.kennzahl.warn { border-color: var(--warn); } .kennzahl.warn b { color: var(--warn); }
.kennzahl.info b { color: var(--info); }
@media (max-width: 380px) { .kennzahl b { font-size: 1.9rem; } .kennzahl { padding-inline: var(--abstand-3); } }
.braucht { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.braucht li { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3); align-items: start; padding: var(--abstand-3); border-radius: var(--radius-klein); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.braucht .nr { font-family: var(--schrift-daten); font-size: .85rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; }
.braucht .text { overflow-wrap: anywhere; min-width: 0; }
.ampel { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; background: var(--ok); }
.ampel.warn { background: var(--warn); } .ampel.crit { background: var(--crit); }
.bereich { display: grid; gap: var(--abstand-2); }
.bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); }
.bereich-kopf h3 { display: flex; align-items: center; gap: var(--abstand-2); overflow-wrap: anywhere; }
.bereich-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bereich-zeilen li { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-2); font-size: .94rem; }
.bereich-zeilen .detail { color: var(--muted); display: block; }
.aktualisieren-zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; }
.gruppe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3); padding-top: var(--abstand-2); }
.gruppe-kopf h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.kopf-ik { display: grid; gap: var(--abstand-2); }
.gerate-detailzeile { display: grid; gap: 6px; font-size: .94rem; }
.gerate-detailzeile > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--abstand-2); }
.gerate-detailzeile dt { color: var(--muted); }
.geraet-seite { display: grid; gap: var(--abstand-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.geraet-spalte { display: grid; gap: var(--abstand-3); align-content: start; min-width: 0; }
@media (min-width: 600px) { .geraet-spalte .gerate-detailzeile > div { grid-template-columns: 11em minmax(0, 1fr); } }
@media (min-width: 960px) { .geraet-seite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .geraet-seite > :only-child { grid-column: 1 / -1; } }
.gerate-detailzeile dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: var(--abstand-5); max-width: min(92vw, 440px); box-shadow: 0 20px 60px rgb(0 0 0 / 35%); }
dialog::backdrop { background: rgb(10 14 12 / 55%); }
dialog h2 { margin-bottom: var(--abstand-2); }
dialog .knopf-reihe { margin-top: var(--abstand-4); }
.anmelde-seite { min-height: 100vh; display: grid; place-items: center; padding: var(--abstand-4); }
.anmelde-seite .karte { max-width: 420px; text-align: center; justify-items: center; padding: var(--abstand-6) var(--abstand-5); }
.anmelde-seite .marke { font-size: 1.8rem; }
.tabelle-mobil { overflow-x: auto; }
.seite { display: grid; gap: var(--abstand-4); align-content: start; min-width: 0; }
[tabindex="-1"]:focus { outline: none; }
details.hilfe summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--accent); padding-left: var(--abstand-3); }
details.hilfe[open] summary::after { content: "–"; }
details.hilfe summary { list-style: none; }
details.hilfe summary::-webkit-details-marker { display: none; }
.geraet-kopf { flex-wrap: wrap; }
.geraet-kopf > .kachel-titel { flex: 1 1 210px; }
svg.klein { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.symbol-knopf { padding: 0; width: var(--touch); min-width: var(--touch); }
.nur-gross { display: none; }
@media (min-width: 768px) { .nur-gross { display: inline; } }
.zeilen-sym { width: 18px; height: 18px; margin-top: 3px; }
.zeilen-sym.rot { color: var(--crit); } .zeilen-sym.gelb { color: var(--warn); } .zeilen-sym.blau { color: var(--info); } .zeilen-sym.gruen { color: var(--ok); }
.demo-band a { color: var(--ink); font-weight: 700; }

/* Vorgemerkte Geräte (#100) */
dialog.breit { max-width: min(94vw, 640px); width: 100%; max-height: 92vh; overflow-y: auto; }
dialog .formular, dialog .stapel { min-width: 0; }
textarea { resize: vertical; line-height: 1.45; }
textarea.daten { font-size: .84rem; white-space: pre-wrap; }
.knopf.voll { justify-content: flex-start; text-align: left; border-radius: var(--radius-klein); }
.knopf.vorschlag { display: grid; gap: 2px; justify-items: start; padding: 8px var(--abstand-4); height: auto; font-weight: 600; }
.knopf.vorschlag .leise { font-weight: 400; font-size: .88rem; }
.zaehler-text { display: grid; gap: 2px; min-width: 0; }
dialog h3 { font-size: 1.05rem; margin-top: var(--abstand-2); }

/* Bedienung auf dem Handy (#102) --------------------------------------------------------------------------- */
body { overscroll-behavior-y: contain; }
html.blatt-offen { overflow: hidden; }
.inhalt { --pad: var(--abstand-4); padding-inline: var(--pad); }
@media (min-width: 768px) { .inhalt { --pad: var(--abstand-5); } }
@media (min-width: 1200px) { .inhalt { --pad: var(--abstand-6); } }
/* Flex statt Grid, damit "position: sticky" in Seiten und Formularen die ganze Länge nutzen kann */
.seite, .stapel, .formular { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; }
.stapel { gap: var(--abstand-3); }
span.klein { font-size: .88rem; }
.kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.besitzer-zelle { display: grid; min-width: 0; }

/* Unterblatt (Bottom Sheet) auf dem Handy, Dialog in der Mitte ab Tablet */
dialog.blatt { padding: 0; overflow: hidden; max-height: 88vh; }
dialog.blatt[open] { display: flex; flex-direction: column; }
dialog.blatt h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.blatt-kopf { flex: none; padding: var(--abstand-2) var(--abstand-4) 0; touch-action: none; background: var(--surface); }
.griff { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--muted); opacity: .55; margin: 0 auto var(--abstand-1); }
.blatt-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); min-height: var(--touch); }
.blatt-zu { flex: none; width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; margin-right: -10px; }
.blatt-zu:hover { background: var(--surface-2); }
.blatt-zu svg { width: 24px; height: 24px; }
.blatt-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--abstand-2) var(--abstand-4) var(--abstand-4); display: flex; flex-direction: column; gap: var(--abstand-3); }
dialog.blatt .knopf-reihe { margin-top: var(--abstand-2); }
@keyframes dialog-ein { from { opacity: 0; transform: translateY(8px); } }
@keyframes dialog-aus { to { opacity: 0; transform: translateY(8px); } }
@keyframes blatt-ein { from { transform: translateY(100%); } }
@keyframes blatt-aus { to { transform: translateY(100%); } }
@keyframes hintergrund-ein { from { opacity: 0; } }
@keyframes hintergrund-aus { to { opacity: 0; } }
@media (min-width: 768px) {
  dialog.blatt { max-height: min(88vh, 900px); animation: dialog-ein .18s ease-out; }
  dialog.blatt.weg { animation: dialog-aus .16s ease-in forwards; }
  .griff { display: none; }
  .blatt-kopf { padding: var(--abstand-4) var(--abstand-5) 0; }
  .blatt-inhalt { padding: var(--abstand-2) var(--abstand-5) var(--abstand-5); }
}
@media (max-width: 767px) {
  dialog.blatt, dialog.blatt.breit { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; border: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: blatt-ein .26s cubic-bezier(.2, .8, .2, 1); }
  dialog.blatt.weg { animation: blatt-aus .22s ease-in forwards; }
  dialog.blatt::backdrop { animation: hintergrund-ein .26s ease-out; }
  dialog.blatt.weg::backdrop { animation: hintergrund-aus .22s ease-in forwards; }
  .blatt-inhalt { padding-inline: max(var(--abstand-4), env(safe-area-inset-left)); }
  /* Hauptknopf im Daumenbereich: die letzte Knopfreihe bleibt unten im Blatt stehen */
  .blatt-inhalt > .knopf-reihe:last-child, .blatt-inhalt > form > .knopf-reihe:last-child { position: sticky; bottom: calc(-1 * var(--abstand-4)); z-index: 2; background: var(--surface);
    margin: var(--abstand-2) calc(-1 * var(--abstand-4)) calc(-1 * var(--abstand-4)); padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  .blatt .knopf-reihe > .knopf { flex: 0 1 auto; padding-inline: var(--abstand-4); white-space: nowrap; }
  .blatt .knopf-reihe > .knopf:first-child { flex: 1 0 auto; }
}

/* Werkzeugleiste (Suche, Filter, Zähler): bleibt beim Scrollen oben stehen */
.werkzeugleiste { position: sticky; top: var(--kopf-hoehe, 57px); z-index: 4; display: flex; flex-direction: column; gap: var(--abstand-2); background: var(--bg);
  margin-inline: calc(-1 * var(--pad)); padding: var(--abstand-2) var(--pad); box-shadow: 0 1px 0 var(--line); }
@media (min-width: 768px) { .werkzeugleiste { top: 0; } }
.werkzeug-zeile { display: flex; gap: var(--abstand-2); align-items: center; }
.werkzeug-zeile .suche { flex: 1 1 auto; min-width: 0; }
.filter-knopf { flex: none; padding-inline: var(--abstand-4); }
@media (min-width: 768px) { .filter-knopf { display: none; } }
.zahl-marke { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 11px; background: var(--primaer); color: var(--on-primaer); font-size: .8rem; font-weight: 700; }
.chip-zeile { display: flex; align-items: center; gap: var(--abstand-3); min-width: 0; }
.chips { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--abstand-2); flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 3px; margin: -3px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } .chip-zeile { align-items: flex-start; } }
.chip { flex: none; scroll-snap-align: start; font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 var(--abstand-3) 0 var(--abstand-4); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip .zaehler, .wahl-zeile .zaehler { font-family: var(--schrift-daten); font-size: .8rem; color: var(--muted); }
.chip[aria-pressed="true"] .zaehler { color: var(--accent); }
.chip-x { width: 16px; height: 16px; }
.zaehl { flex: none; white-space: nowrap; font-weight: 600; font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wahl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.wahl-zeile { display: flex; align-items: center; gap: var(--abstand-3); min-height: 48px; padding: 0 var(--abstand-3); border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--surface-2); cursor: pointer; font-weight: 600; }
.wahl-zeile input { width: 22px; min-height: 22px; height: 22px; padding: 0; flex: none; accent-color: var(--primaer); }
.wahl-text { flex: 1 1 auto; min-width: 0; }

/* Geräteliste (#105): Handy zweizeilig, ab Tablet tabellenartig */
.zeilenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.zeile-text { display: grid; min-width: 0; }
.zeile-name { font-weight: 700; }
.zeile-status { font-size: .9rem; }

/* Gruppen "Nach Besitzer": aufklappbar */
.gruppe { display: grid; gap: var(--abstand-2); }
h2.gruppe-titel { font-size: inherit; font-family: inherit; font-weight: inherit; }
.gruppe-kopf-knopf { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-3); min-height: 64px; padding: var(--abstand-2) var(--abstand-3); text-align: left;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; box-shadow: var(--schatten); }
.gruppe-kopf-knopf[aria-expanded="true"] { border-color: var(--accent); }
.ampel-ik { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.ampel-ik svg { width: 20px; height: 20px; }
.ampel-ik.warn { background: var(--warn-soft); color: var(--warn); }
.ampel-ik.crit { background: var(--crit-soft); color: var(--crit); }
.gruppe-text { display: grid; min-width: 0; }
.gruppe-name { font-weight: 700; font-size: 1.05rem; }
.gruppe-sub, .gruppe-zahlen { font-size: .9rem; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.gruppe-pfeil { width: 24px; height: 24px; color: var(--muted); transition: transform .2s; }
.gruppe-kopf-knopf[aria-expanded="true"] .gruppe-pfeil { transform: rotate(180deg); }
.gruppe-inhalt { display: grid; gap: var(--abstand-3); padding-left: var(--abstand-2); border-left: 3px solid var(--line); margin-left: var(--abstand-3); }
.gruppe-detail { font-size: .94rem; }

/* Zuordnen: Suche im Verzeichnis */
.ergebnisliste { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--surface); max-height: 260px; overflow-y: auto; display: grid; gap: 2px; }
.ergebnis { display: grid; padding: 6px 12px; min-height: var(--touch); align-content: center; border-radius: 6px; cursor: pointer; border-left: 4px solid transparent; }
.ergebnis:hover { background: var(--surface-2); }
.ergebnis.aktiv { background: var(--accent-soft); border-left-color: var(--accent); }
.ergebnis-name { font-weight: 700; }
.knopf.vorschlag { grid-template-columns: minmax(0, 1fr); justify-items: stretch; width: 100%; min-width: 0; }
.gewaehlt { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); padding: var(--abstand-3); border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-klein); }
.gewaehlt-text { display: grid; min-width: 0; }

/* Laden: Platzhalter statt leerer Fläche, Herunterziehen */
.skelett-liste { display: grid; gap: var(--abstand-2); }
.skelett { display: flex; align-items: center; gap: var(--abstand-3); min-height: 64px; padding: var(--abstand-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.skelett.karte { min-height: 120px; }
.skelett-ik { flex: none; width: 40px; height: 40px; border-radius: 12px; background-color: var(--line); }
.skelett-text { flex: 1 1 auto; display: grid; gap: 8px; min-width: 0; }
.skelett-balken { display: block; height: 12px; border-radius: 6px; background-color: var(--line); }
.skelett-balken.lang { width: 70%; } .skelett-balken.kurz { width: 40%; }
.skelett-ik, .skelett-balken { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 35%), transparent); background-size: 200% 100%; background-repeat: no-repeat; animation: schimmer 1.4s linear infinite; }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.ziehen-anzeige { position: fixed; z-index: 7; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translate(-50%, -24px); opacity: 0; pointer-events: none; transition: transform .15s, opacity .15s; }
.ziehen-punkt { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent-soft); border-top-color: var(--accent); box-shadow: var(--schatten); }
.ziehen-anzeige.stufe-1 { opacity: .5; transform: translate(-50%, 0); }
.ziehen-anzeige.stufe-2 { opacity: .8; transform: translate(-50%, 8px); }
.ziehen-anzeige.stufe-3 { opacity: 1; transform: translate(-50%, 14px); }
.ziehen-anzeige.laedt .ziehen-punkt { animation: drehen .9s linear infinite; }

/* Hauptaktionen im Daumenbereich (Handy) */
.kopf-aktion { display: none; }
.fab-mobil { position: fixed; z-index: 4; right: max(var(--abstand-4), env(safe-area-inset-right)); bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + var(--abstand-4)); min-height: 52px; padding-inline: var(--abstand-5);
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%); }
.seite:has(.leer) .fab-mobil { display: none; }
.aktionsleiste { position: sticky; bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom)); z-index: 3; background: var(--bg); padding-block: var(--abstand-3); margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .kopf-aktion { display: inline-flex; }
  .fab-mobil { display: none; }
  .aktionsleiste { position: static; background: none; margin-inline: 0; padding: 0; border-top: 0; }
}
@media (max-width: 767px) {
  .inhalt { gap: var(--abstand-3); }
  .seite { gap: var(--abstand-3); }
  .seite:has(.fab-mobil) { padding-bottom: 72px; }
  .nur-gross-block { display: none; }
  .aktionen-unten { order: 90; }
  h1 { font-size: 1.6rem; }
  .karte { padding: var(--abstand-3); gap: var(--abstand-2); }
  .geraet-kopf h3 { font-size: 1.2rem; }
  .karte .knopf-reihe .knopf { flex: 1 1 100%; }
  .karte .knopf-reihe .knopf.zweit, .karte .knopf-reihe .knopf.gefahr { flex: 1 1 140px; }
  .karte.leer { padding-block: var(--abstand-5); }
  .leer > svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.blatt, dialog.blatt.weg, dialog.blatt::backdrop, dialog.blatt.weg::backdrop { animation: none !important; }
  .skelett-ik, .skelett-balken { animation: none; background-image: none; }
  .ziehen-anzeige, .gruppe-pfeil, .navi-tab .navi-ik { transition: none; }
  .ziehen-anzeige.laedt .ziehen-punkt { animation-duration: 4s; }
}

/* Fotos (#103): Bereich "Foto", Vollbild (Fotos nur im Detail, #105) */
.foto-bereich.kompakt { display: grid; gap: var(--abstand-2); padding: var(--abstand-3); border: 1px dashed var(--line); border-radius: var(--radius-klein); min-width: 0; }
.foto-titel { font-size: .95rem; }
.foto-flaeche { min-width: 0; }
.foto-vorschau { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-klein); overflow: hidden; background: var(--surface-2); cursor: zoom-in; min-height: var(--touch); }
.foto-vorschau img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; background: var(--surface-2); }
.foto-bereich.kompakt .foto-vorschau img { max-height: 200px; }
.foto-lupe { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgb(0 0 0 / 60%); color: #fff; display: grid; place-items: center; }
.foto-lupe svg { width: 20px; height: 20px; }
.foto-leer { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 120px; border: 1px dashed var(--line); border-radius: var(--radius-klein); color: var(--muted); background: var(--surface-2); }
.foto-leer svg { width: 32px; height: 32px; }
.foto-status { min-height: 1.2em; margin: 0; font-size: .92rem; }
.foto-status.laedt::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: drehen .8s linear infinite; }
.foto-bereich .klein { font-size: .88rem; margin: 0; }
.foto-streifen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--abstand-2); }
.foto-streifen .foto-vorschau img { height: 80px; object-fit: cover; }
.foto-streifen .foto-lupe { display: none; }
dialog.foto-voll .blatt-inhalt { align-items: center; justify-content: center; }
.foto-voll-bild { display: block; max-width: 100%; max-height: 70vh; max-height: 70dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-klein); }
@media (max-width: 767px) { .foto-bereich .knopf-reihe .knopf, .foto-bereich .knopf-reihe .knopf.gefahr { flex: 1 1 100%; } }

/* Kacheln "Meine Geräte" (#105): alle gleich groß, feste Felder, lange Texte gekürzt */
.raster.gleich { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
.kachel { grid-template-rows: auto auto 2.8em auto auto; align-content: start; gap: var(--abstand-2); }
.kachel p { margin: 0; }
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); min-width: 0; }
.kachel-kopf h3 { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; }
.kachel-kopf .plakette { flex: none; }
.kachel-hinweis { font-size: .92rem; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kachel-zeit { font-size: .92rem; }

/* Geräteliste "Alle Geräte" (#105) */
.geraeteliste { display: grid; gap: var(--abstand-2); }
.g-zeile.g-kopf { display: none; }
.g-zeile { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "geraet badge" "status status"; align-items: center; gap: 2px var(--abstand-3); min-height: 60px; padding: var(--abstand-2) var(--abstand-3); text-align: left;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.g-zeile:active, .g-zeile:hover { border-color: var(--accent); }
.g-zeile .g-geraet { grid-area: geraet; display: grid; min-width: 0; }
.g-zeile .g-badge-schmal { grid-area: badge; }
.g-zeile .zeile-status { grid-area: status; }
.g-zeile .g-modell, .g-zeile .g-besitzer, .g-zeile .g-marken, .g-zeile .g-zelle { display: none; }
.g-modell { font-size: .9rem; }
.g-marken { flex-wrap: wrap; gap: var(--abstand-2); }
@media (min-width: 768px) {
  .g-zeile.g-kopf { display: grid; }
  .g-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: none; gap: var(--abstand-3); padding-block: var(--abstand-2); }
  .g-zeile .g-geraet, .g-zeile .g-badge-schmal, .g-zeile .zeile-status { grid-area: auto; }
  .g-zeile .g-badge-schmal, .g-zeile .zeile-status { display: none; }
  .g-zeile .g-modell, .g-zeile .g-besitzer, .g-zeile .g-zelle { display: block; }
  .g-zeile .g-marken { display: flex; }
  .g-zeile.g-kopf { min-height: 0; padding-block: 0 var(--abstand-1, 4px); background: none; border: 0; border-radius: 0; cursor: default; color: var(--muted); font-size: .85rem; font-weight: 700; }
  .g-zeile.g-kopf:hover { border-color: transparent; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .g-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, .9fr); }
  .g-zeile .g-windows, .g-zeile .g-kaspersky, .g-kopf span:nth-child(5), .g-kopf span:nth-child(6) { display: none; }
}

/* Lager (#106): Liste wie "Alle Geräte", Zustandsplaketten, Verlauf, Kleinteile mit großen Plus-/Minus-Knöpfen */
.reiter { margin-top: var(--abstand-3); }
.reiter a { font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 var(--abstand-4); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.reiter a svg { width: 20px; height: 20px; }
.reiter a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lagerliste { display: grid; gap: var(--abstand-2); }
.l-zeile.l-kopf { display: none; }
.l-zeile { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "geraet badge" "status status"; align-items: center; gap: 2px var(--abstand-3); min-height: 60px; padding: var(--abstand-2) var(--abstand-3); text-align: left;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.l-zeile:active, .l-zeile:hover { border-color: var(--accent); }
.l-zeile .l-geraet { grid-area: geraet; display: grid; min-width: 0; }
.l-zeile .l-badge { grid-area: badge; }
.l-zeile .l-kurz { grid-area: status; }
.l-zeile .l-ort, .l-zeile .l-sn { display: none; }
.l-sub { font-size: .9rem; display: none; }
@media (max-width: 767px) { .lager-chips { flex-direction: column; align-items: stretch; gap: var(--abstand-1); } }
.lager-filter-breit { display: none; }
@media (min-width: 768px) {
  .lager-filter-breit { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--abstand-3); }
  .l-zeile.l-kopf { display: grid; }
  .l-zeile { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr); grid-template-areas: none; gap: var(--abstand-3); padding-block: var(--abstand-2); }
  .l-zeile .l-geraet, .l-zeile .l-badge, .l-zeile .l-kurz { grid-area: auto; }
  .l-zeile .l-kurz { display: none; }
  .l-zeile .l-ort, .l-zeile .l-sn, .l-sub { display: block; }
  .l-zeile.l-kopf { min-height: 0; padding-block: 0 var(--abstand-1, 4px); background: none; border: 0; border-radius: 0; cursor: default; color: var(--muted); font-size: .85rem; font-weight: 700; }
  .l-zeile.l-kopf:hover { border-color: transparent; }
}
.plaketten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.abschnitt-unter { display: flex; align-items: center; gap: var(--abstand-2); font-size: 1rem; }
.abschnitt-unter svg { width: 20px; height: 20px; color: var(--accent); }
.lager-aktionen { display: grid; grid-template-columns: 1fr; gap: var(--abstand-2); }
.lager-aktionen .knopf { width: 100%; min-height: 52px; justify-content: center; }
@media (min-width: 768px) { .lager-aktionen { display: flex; flex-wrap: wrap; } .lager-aktionen .knopf { width: auto; } }
.eingabe-mit-knopf { display: flex; gap: var(--abstand-2); align-items: stretch; }
.eingabe-mit-knopf input { flex: 1 1 auto; min-width: 0; }
.scan-knopf { flex: none; padding-inline: var(--abstand-4); }
.scan-rahmen { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-ziel { position: absolute; inset: 22% 10%; border: 3px solid #fff; border-radius: var(--radius-klein); box-shadow: 0 0 0 100vmax rgb(0 0 0 / 35%); pointer-events: none; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); border-left: 2px solid var(--line); margin-left: 6px; }
.verlauf-eintrag { display: grid; gap: 2px; padding-left: var(--abstand-3); position: relative; }
.verlauf-eintrag::before { content: ""; position: absolute; left: -7px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--primaer); }
.verlauf-text { display: grid; gap: 2px; min-width: 0; }
.verlauf-zeit { font-size: .82rem; }
.orte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.ort-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); min-height: 52px; padding: 0 var(--abstand-3); border: 1px solid var(--line); border-radius: var(--radius-klein); background: var(--surface-2); font-weight: 600; }
.personwahl { gap: var(--abstand-2); }
.kleinteil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.kleinteil { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); min-height: 68px; padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.kleinteil.leer-bestand { border-color: var(--warn); }
.kleinteil-name { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; justify-items: start; }
.kleinteil-menge { display: flex; align-items: center; gap: var(--abstand-2); flex: none; }
.kleinteil-menge .bestand { min-width: 3ch; text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.knopf.rund { width: 52px; min-height: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
.knopf.rund svg { width: 24px; height: 24px; }
.kleinteile-ort .zaehler { margin-left: auto; font-size: .85rem; color: var(--muted); }
.fehlerhaft { color: var(--crit); font-weight: 600; }
@media (max-width: 520px) { .kleinteil { flex-wrap: wrap; } .kleinteil-name { flex: 1 1 100%; } .kleinteil-menge { flex: 1 1 100%; justify-content: space-between; } .kleinteil-menge .bestand { flex: 1 1 auto; } }
@media (max-width: 380px) { .kleinteil-menge { gap: 4px; } .knopf.rund { width: 48px; height: 48px; min-height: 48px; } }

/* Fußleiste in Formularen (#109). Handy: Die Leiste .formleiste (Abbrechen links als Textknopf, Speichern rechts als Hauptknopf) liegt in der Höhe
   des Tab-Menüs darüber und ersetzt es, solange ein Formular offen ist; das Tab-Menü wird dabei ausgeblendet und kommt mit dem Formular zurück.
   Die Reihenfolge links/rechts regelt order, damit die Seiten unverändert bleiben. --tastatur (fussleiste.js) hebt die Leiste über die Tastatur. */
.formleiste > .knopf.zweit, dialog .knopf-reihe:not(.foto-bereich .knopf-reihe) > .knopf.zweit { order: -1; }
.formleiste { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: var(--abstand-3); }
.formleiste > .knopf { flex: 0 0 auto; }
@media (max-width: 767px) {
  .formleiste { position: fixed; z-index: 8; left: 0; right: 0; bottom: var(--tastatur, 0px); box-sizing: border-box; min-height: var(--tab-hoehe); align-items: center; justify-content: space-between;
    margin: 0; padding: var(--abstand-2) max(var(--abstand-4), env(safe-area-inset-right)) calc(var(--abstand-2) + env(safe-area-inset-bottom)) max(var(--abstand-4), env(safe-area-inset-left));
    background: var(--surface); border-top: 1px solid var(--line); }
  body:has(.formleiste) .navi-klein { visibility: hidden; }
  form .formleiste.knopf-reihe > .knopf { min-height: 48px; margin: 0; }
  form .formleiste.knopf-reihe > .knopf.zweit { flex: 0 0 auto; background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); padding-inline: var(--abstand-4); }
  form .formleiste.knopf-reihe > .knopf:not(.zweit) { flex: 1 1 auto; max-width: 60%; }
}
@media (min-width: 768px) { .formleiste { position: static; padding: 0; } }
/* Unterblätter: gleiche Anordnung, Abbrechen links, der Hauptknopf rechts, nebeneinander */
@media (max-width: 767px) {
  .blatt .knopf-reihe:not(.foto-bereich .knopf-reihe) > .knopf.zweit { flex: 0 0 auto; background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
  .blatt .knopf-reihe:not(.foto-bereich .knopf-reihe) > .knopf:not(.zweit) { flex: 1 1 auto; }
}

/* Installierte Programme (#113) */
details.programme > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--abstand-2); min-height: var(--touch); }
details.programme > summary::-webkit-details-marker { display: none; }
details.programme > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--accent); padding-left: var(--abstand-3); }
details.programme[open] > summary::after { content: "–"; }
.prog-titel { margin: 0; }
.prog-anzahl { font-weight: 600; }
.prog-inhalt { display: grid; gap: var(--abstand-3); min-width: 0; }
.prog-werkzeuge { display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.prog-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prog-zeile { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.prog-zeile:first-child { border-top: 0; }
.prog-treffer { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--touch); align-content: center; }
.prog-treffer:hover strong { color: var(--accent); }
/* Zu erledigen (#112) */
.massnahmen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.massnahme { display: grid; gap: var(--abstand-2); }
.massnahme-name { font-size: 1.1rem; margin: 0; }
.massnahme-problem { margin: 0; font-weight: 600; }
.massnahme-notiz { margin: 0; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-klein); background: var(--surface-2); border: 1px solid var(--line); }
@media (min-width: 900px) { .massnahmen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Standort (#111) */
.standorte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.standort-zeile { width: 100%; display: grid; gap: 2px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.standort-name { font-weight: 700; font-size: 1.1rem; }
.nz-liste { list-style: none; margin: 0 0 var(--abstand-3); padding: 0; display: grid; gap: var(--abstand-2); }
.ort-wahl { flex: none; max-width: 11em; }
.ort-hinweis { display: inline-flex; align-items: center; gap: var(--abstand-2); }
textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* Gerät hinzufügen (#115): große Auswahlkacheln, QR-Code */
.art-kacheln { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .art-kacheln { grid-template-columns: 1fr 1fr; } }
.art-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px; min-height: 150px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.art-kachel svg { width: 40px; height: 40px; color: var(--accent); }
.art-kachel:hover, .art-kachel:focus-visible { border-color: var(--accent); }
.art-kachel.vorgewaehlt { border-color: var(--accent); background: var(--accent-soft); }
.art-titel { font-size: 1.25rem; font-weight: 700; }
.art-passt { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.qr-box { margin: 14px 0; }
.qr { width: min(100%, 260px); height: auto; border: 1px solid var(--line); border-radius: 8px; }
.hilfe-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.hilfe-schritt h3 { margin: 0 0 4px; }
.hilfe-figur { margin: 10px 0 0; max-width: 560px; }

.hilfe-bild img { max-height: none; }
.hilfe-figur figcaption { margin-top: 4px; font-size: 0.85rem; }

/* Neue App-Version (#117) */
.update-leiste { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: var(--ink); color: var(--surface); font-weight: 600; }
.update-leiste .knopf { background: var(--surface); color: var(--ink); border-color: var(--surface); min-height: 40px; }

/* Cockpit (#98): Zähler mit vier Kacheln, aufklappbare Karten, Listen */
.kennzahlen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .kennzahlen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
details.aufklapp { padding: 0; gap: 0; }
details.aufklapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); min-height: var(--touch); padding: var(--abstand-3) var(--abstand-4); }
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary h2, details.aufklapp > summary h3 { font-size: 1.05rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
details.aufklapp > summary .plakette { flex: none; }
details.aufklapp > summary .chevron { width: 20px; height: 20px; margin-left: auto; color: var(--accent); flex: none; transition: transform .15s; }
details.aufklapp[open] > summary .chevron { transform: rotate(180deg); }
details.aufklapp > :not(summary) { margin: 0 var(--abstand-4) var(--abstand-4); }
.verlauf-liste, .aufgaben-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.verlauf-liste li { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3); align-items: start; font-size: .94rem; }
.verlauf-liste li.behoben strong { color: var(--ok); }
.verlauf-liste li button { grid-column: 2; justify-self: start; }
.aufgaben-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--abstand-3); align-items: center; min-height: var(--touch); }
.aufgabe .nr { color: var(--accent); font-weight: 700; }
.aufgabe a { overflow-wrap: anywhere; min-width: 0; }
.braucht li.erledigt { opacity: .75; }
.braucht li.erledigt .text { text-decoration: line-through; text-decoration-thickness: 1px; }
details.hilfe .aufgaben-liste { padding-bottom: var(--abstand-3); }
.stapel .aktualisieren-zeile + p { margin: 0; }
.aktualisieren .knopf svg.dreht { animation: drehen 1.2s linear infinite; }
.aktualisieren .knopf[disabled] { opacity: .75; cursor: default; }
.aktualisieren .plakette { white-space: normal; text-align: left; }
@media (prefers-reduced-motion: reduce) { .aktualisieren .knopf svg.dreht { animation-duration: 6s; } }

/* Cockpit: Bereiche als Kacheln mit Unterseiten (#118). Alle Kacheln gleich groß; die ganze Fläche ist der Link. */
.raster.kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: 1fr; }
.kachel-link { display: grid; grid-template-rows: auto auto 1.4em; align-content: start; gap: var(--abstand-2); min-height: 112px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.kachel-link:hover, .kachel-link:focus-visible { border-color: var(--accent); }
.kachel-link:active { transform: scale(.99); }
.kachel-link.crit { border-color: var(--crit); } .kachel-link.warn { border-color: var(--warn); }
.kachel-link .kachel-kopf { display: flex; align-items: center; gap: var(--abstand-3); min-width: 0; }
.kachel-link .kachel-kopf h3 { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.kachel-link .plakette { justify-self: start; white-space: normal; }
.kachel-link .kachel-zeit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zahl-marke { flex: none; min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: .84rem; text-align: center; font-variant-numeric: tabular-nums; }
.braucht a.braucht-link { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; min-width: 0; }
.pruef-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.pruef { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3); align-items: start; padding-bottom: var(--abstand-3); border-bottom: 1px solid var(--line); }
.pruef:last-child { border-bottom: 0; padding-bottom: 0; }
.pruef-text { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.pruef-text .detail { display: block; color: var(--muted); overflow-wrap: anywhere; }
.pruef-text .detail.leise { font-size: .88rem; }

/* Cockpit: Konten & Lizenzen (#98 Phase 3) */
.kennzahlen.kz-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kennzahlen.kz-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kennzahlen.kz-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kz-link { text-decoration: none; color: inherit; }
a.kz-link:hover, a.kz-link:focus-visible { border-color: var(--accent); }
.kennzahl .kz-hinweis { font-size: .82rem; font-weight: 500; }
.kennzahl .kz-zeile { font-size: .82rem; font-weight: 600; color: var(--accent); }
.abschnitt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
@media (min-width: 900px) { .abschnitt-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.abschnitt-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: var(--abstand-3); align-items: center; min-height: 60px; padding: var(--abstand-3) var(--abstand-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; }
.abschnitt-zeile:hover, .abschnitt-zeile:focus-visible { border-color: var(--accent); }
.abschnitt-text { display: grid; gap: 6px; min-width: 0; }
.chevron-rechts { width: 20px; height: 20px; color: var(--accent); transform: rotate(-90deg); }
.konto-liste, .pf-liste, .schlicht-liste, .neben-liste, .balken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.konto-zeile { width: 100%; display: grid; gap: 6px; text-align: left; font: inherit; color: inherit; padding: var(--abstand-3) var(--abstand-4); min-height: 60px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.konto-zeile.statisch { cursor: default; }
button.konto-zeile:hover, button.konto-zeile:focus-visible { border-color: var(--accent); }
.konto-name { display: grid; gap: 2px; min-width: 0; }
.konto-name strong { overflow-wrap: anywhere; }
.konto-name .detail { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.konto-zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); min-width: 0; }
.konto-zusatz .leise { font-size: .88rem; overflow-wrap: anywhere; min-width: 0; }
@media (min-width: 900px) { .konto-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liste-kopf { position: sticky; top: 0; z-index: 2; background: var(--bg, var(--surface)); padding-block: var(--abstand-2); }
.werkzeug-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }
@media (min-width: 640px) { .werkzeug-reihe { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; } }
.befehl-text { width: 100%; }
.produkt .produkt-zahlen { margin: 0; }
.balken { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
svg.balken { width: 100%; box-sizing: border-box; }
.balken .fuell { fill: var(--accent); }
.balken.knapp .fuell { fill: var(--warn); } .balken.ueber .fuell { fill: var(--crit); }
.balken-liste li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 4em; grid-template-areas: "datum balken wert" ". marken marken"; gap: 4px var(--abstand-3); align-items: center; }
.balken-liste .datum { grid-area: datum; color: var(--muted); }
.balken-liste .balken { grid-area: balken; }
.balken-liste .wert { grid-area: wert; text-align: right; }
.balken-liste .plakette { grid-column: 2 / -1; justify-self: start; }
.statusbox { border-left: 6px solid var(--ok); }
.statusbox.warn { border-left-color: var(--warn); } .statusbox.crit { border-left-color: var(--crit); }
.neben-liste { gap: 6px; font-size: .94rem; color: var(--ink); }
.pf.karte { gap: 6px; }
.pf .detail { display: block; color: var(--muted); overflow-wrap: anywhere; }

/* Chat im Cockpit (#98 Phase 4): Sprechblasen, Vorschlagskarten, Eingabe am unteren Rand (auf dem Handy über der Tab-Leiste) */
.chat { gap: var(--abstand-3); }
.chat-pc { display: flex; align-items: center; gap: var(--abstand-2); font-size: .92rem; color: var(--muted); }
.chat-pc.ok { color: var(--ok); } .chat-pc.crit { color: var(--crit); font-weight: 600; }
.chat-pc .zeilen-sym { width: 18px; height: 18px; flex: none; }
.chat-verlauf { display: grid; gap: var(--abstand-3); align-content: start; min-height: 30vh; }
.chat-zeile { display: flex; min-width: 0; }
.chat-zeile.nutzer { justify-content: flex-end; }
.chat-blase { max-width: min(46rem, 92%); min-width: 0; display: grid; gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow-wrap: anywhere; }
.chat-blase.nutzer { background: var(--accent-soft); border-color: var(--accent); }
.chat-blase .umbruch { white-space: pre-wrap; }
.chat-wartet { display: flex; align-items: center; gap: var(--abstand-2); }
.chat-wartet svg { width: 18px; height: 18px; flex: none; animation: drehen 1.2s linear infinite; }
.chat-vorschlag { display: grid; gap: var(--abstand-2); box-shadow: none; border-left: 6px solid var(--info); }
.chat-vorschlag.warn { border-left-color: var(--warn); } .chat-vorschlag.ok { border-left-color: var(--ok); } .chat-vorschlag.crit { border-left-color: var(--crit); }
.chat-vorschlag-titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2); }
.chat-anzeige { font-weight: 600; }
.chat-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }
.chat-eingabe { display: grid; gap: var(--abstand-2); position: sticky; bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom)); background: var(--bg); padding-block: var(--abstand-3); border-top: 1px solid var(--line); z-index: 3; }
.chat-eingabe textarea { min-height: 3.2rem; max-height: 40vh; }
.chat-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.chat-abstand { flex: 1 1 0; }
.chat-modell { display: flex; gap: var(--abstand-2); }
.chat-modell .chip { padding-inline: var(--abstand-4); }
@media (min-width: 900px) { .chat-eingabe { bottom: 0; } .chat-vorschlag .chat-knoepfe { max-width: 28rem; } }
.chat-knoepfe .knopf { white-space: nowrap; justify-content: center; padding-inline: var(--abstand-2); }
.chat-verlauf > :last-child { scroll-margin-bottom: 15rem; }
@media (max-width: 420px) { .chat-knoepfe { grid-template-columns: minmax(0, 1fr); } }

/* Cockpit kompakt (#123): Übersicht und Bereichsseiten dicht wie der frühere Leitstand. Probleme farbig, OK tritt zurück. */
.cockpit-uebersicht { gap: var(--abstand-3); }
.cockpit-uebersicht .karte { padding: var(--abstand-3) var(--abstand-4); gap: var(--abstand-2); }
.cockpit-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); }
.ck-titel { min-width: 0; display: grid; gap: 2px; }
.ck-titel h1 { font-size: 1.5rem; }
.ck-titel p { font-size: .88rem; }
.ck-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); min-width: 0; }
.pillen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.pille { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.pille b { font-family: var(--schrift-anzeige); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pille.still { color: var(--muted); background: transparent; }
.pille.crit { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }
.pille.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.pille.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.ausfall-leiste { display: flex; align-items: flex-start; gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius); background: var(--crit-soft); border: 1px solid var(--crit); border-left-width: 6px; color: var(--ink); min-width: 0; }
.ausfall-leiste > svg { width: 20px; height: 20px; flex: none; color: var(--crit); margin-top: 2px; }
.ausfall-leiste span { min-width: 0; overflow-wrap: anywhere; }
.ausfall-leiste a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.cockpit-uebersicht .kurz p { font-size: .95rem; }
.zwei-spalten { display: grid; gap: var(--abstand-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .zwei-spalten:not(.einzeln) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cockpit-uebersicht .braucht { gap: 0; }
.cockpit-uebersicht .braucht li { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 6px 0; gap: var(--abstand-2); font-size: .95rem; }
.cockpit-uebersicht .braucht li:first-child { border-top: 0; }
.cockpit-uebersicht .braucht .nr { background: none; padding: 0 2px; }
.cockpit-uebersicht .aufgaben-liste { gap: 0; }
.cockpit-uebersicht .aufgaben-liste li { min-height: 0; padding: 6px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.cockpit-uebersicht .aufgaben-liste li:first-child { border-top: 0; }
.cockpit-uebersicht details.hilfe { font-size: .92rem; }
h2.abschnitt { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stapel.eng { gap: var(--abstand-2); }
.bkacheln { display: grid; gap: var(--abstand-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bkachel { display: flex; align-items: center; gap: var(--abstand-2); min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .15s; }
.bkachel:hover, .bkachel:focus-visible { border-color: var(--accent); }
.bk-sym { width: 18px; height: 18px; flex: none; }
.bk-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-marke { flex: none; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.bk-pfeil { width: 14px; height: 14px; flex: none; color: var(--muted); transform: rotate(180deg); }
.bkachel.crit { background: var(--crit-soft); border-color: var(--crit); } .bkachel.crit .bk-sym, .bkachel.crit .bk-marke { color: var(--crit); }
.bkachel.warn { background: var(--warn-soft); border-color: var(--warn); } .bkachel.warn .bk-sym, .bkachel.warn .bk-marke { color: var(--warn); }
.bkachel.info .bk-sym, .bkachel.info .bk-marke { color: var(--info); }
.bkachel.ok { background: transparent; } .bkachel.ok .bk-name { font-weight: 500; color: var(--muted); } .bkachel.ok .bk-sym, .bkachel.ok .bk-marke { color: var(--ok); font-weight: 600; }
.weiteres { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); padding-top: var(--abstand-2); border-top: 1px solid var(--line); }
.weiter-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid transparent; color: var(--ink); text-decoration: none; font-size: .9rem; }
.weiter-link:hover, .weiter-link:focus-visible { border-color: var(--accent); }
.weiter-link svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.weiter-link.crit svg, .weiter-link.crit strong { color: var(--crit); }
@media (max-width: 767px) { .cockpit-uebersicht { gap: var(--abstand-3); } .bkachel { min-height: var(--touch); } }

/* Bereichsseite: Gruppen nach Schwere, eine Zeile je Prüfung */
.bz-gruppe { padding: 0; gap: 0; overflow: hidden; }
.bz-gruppe.crit { border-color: var(--crit); } .bz-gruppe.warn { border-color: var(--warn); }
.bz-gruppe > h2, .bz-gruppe > summary { padding: var(--abstand-3) var(--abstand-4); }
.bz-gruppe > summary { display: flex; align-items: center; gap: var(--abstand-3); cursor: pointer; list-style: none; min-height: var(--touch); }
.bz-gruppe > summary::-webkit-details-marker { display: none; }
.bz-gruppe > summary .chevron { margin-left: auto; width: 20px; height: 20px; color: var(--accent); flex: none; transition: transform .15s; }
.bz-gruppe[open] > summary .chevron { transform: rotate(180deg); }
.gruppen-titel { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.gruppen-titel.crit { color: var(--crit); } .gruppen-titel.warn { color: var(--warn); } .gruppen-titel.info { color: var(--info); } .gruppen-titel.ok { color: var(--ok); }
.bz-liste { list-style: none; margin: 0; padding: 0; }
.bz { display: grid; grid-template-columns: 18px minmax(0, 30%) minmax(0, 1fr) auto; column-gap: var(--abstand-3); align-items: baseline; padding: 7px var(--abstand-4); border-top: 1px solid var(--line); font-size: .95rem; }
.bz .zeilen-sym { margin-top: 0; align-self: center; }
.bz-befund { color: var(--muted); }
.bz-seit { font-size: .85rem; white-space: nowrap; text-align: right; }
.bz.crit { background: var(--crit-soft); } .bz.warn { background: var(--warn-soft); }
@media (max-width: 639px) {
  .bz { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 2px; }
  .bz-name { grid-column: 2; } .bz-seit { grid-column: 3; grid-row: 1; }
  .bz-befund { grid-column: 2 / -1; }
}
.bz-gruppe .verlauf-liste { padding: var(--abstand-3) var(--abstand-4); border-top: 1px solid var(--line); }
.bz-leer { padding: 0 var(--abstand-4) var(--abstand-3); }