/* ═══════════════════════════════════════════════════════════════════════
   ALMAS ONE — Oberflächen-Stil
   ALMAS-Webdesign-System v2 · hell, premium, weiche Schatten
   Von Grund auf geschrieben — keine Kopie von almas-design.css.
   Frontend-Version: 1.0.1
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. GESTALTUNGS-MARKEN (Tokens)
   ───────────────────────────────────────────────────────────── */
:root{
  /* Marke */
  --rot:#FF2325;              /* Flächen, Glow, Akzentbalken */
  --rot-text:#D81020;         /* Text und Knöpfe — AA-sicher */
  --rot-tief:#BC0E1B;         /* Hover des Haupt-Knopfs — dunkler, nicht heller (AA: 6.63:1) */
  --rot-schleier:rgba(255,35,37,.08);
  --rot-kante:rgba(255,35,37,.22);
  --rot-glut:rgba(255,35,37,.26);

  /* Flächen */
  --grund:#F6F6F8;            /* Seitenhintergrund */
  --karte:#FFFFFF;
  --flaeche:#F1F1F4;          /* eingelassene Flächen, Schalter-Bett */
  --seitenleiste:#FFFFFF;
  --seitenleiste-hover:#F4F4F7;
  --seitenleiste-aktiv:rgba(255,35,37,.10);
  --glas:rgba(255,255,255,.78);

  /* Text */
  --text:#15161A;
  --text-2:#5C5F66;
  --text-3:#6B6E75;          /* AA: 5.10:1 auf Weiss, 4.53:1 auf --flaeche */

  /* Kanten */
  --kante:#E2E3E8;
  --kante-2:#ECECEF;

  /* Semantische Akzente (Kennzahlen, Plaketten) */
  --amber:#8F5600;   --amber-tint:rgba(143,86,0,.07);    --amber-kante:rgba(143,86,0,.20);
  --blau:#0057B8;    --blau-tint:rgba(0,87,184,.07);     --blau-kante:rgba(0,87,184,.20);
  --gruen:#147A3D;   --gruen-tint:rgba(20,122,61,.07);   --gruen-kante:rgba(20,122,61,.20);
  --teal:#0A6F67;    --teal-tint:rgba(10,111,103,.07);   --teal-kante:rgba(10,111,103,.20);
  --rubin:#C20F1C;   --rubin-tint:rgba(194,15,28,.07);   --rubin-kante:rgba(194,15,28,.20);

  /* Schatten — weich und mehrschichtig */
  --schatten-sm:0 1px 2px rgba(16,17,22,.04),0 2px 6px rgba(16,17,22,.05);
  --schatten-md:0 6px 16px rgba(16,17,22,.06),0 12px 30px rgba(16,17,22,.08);
  --schatten-lg:0 12px 30px rgba(16,17,22,.10),0 26px 60px rgba(16,17,22,.12);
  --schatten-xl:0 18px 40px rgba(16,17,22,.14),0 40px 90px rgba(16,17,22,.16);

  /* Radien */
  --r-sm:10px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pille:999px;

  /* Maße */
  --leiste-breite:264px;
  --kopf-hoehe:64px;

  /* Bewegung */
  --weich:cubic-bezier(.22,.61,.36,1);
  --zeit:.24s;

  --schrift:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --schrift-zahl:"Helvetica Neue",Helvetica,ui-monospace,"SF Mono",Menlo,monospace;
}

/* ─────────────────────────────────────────────────────────────
   2. GRUNDLAGEN
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* `hidden` muss stärker sein als jede display-Regel weiter unten —
   sonst bleibt z. B. .landung{display:flex} trotz hidden sichtbar. */
[hidden]{ display:none!important; }

/* Die bekannte Falle: ein ID-Selektor (#landung{display:flex}) schlägt einen
   Attribut-Selektor ([hidden]) bei gleicher Wichtigkeit. Das `!important` oben
   fängt das zwar ab — aber genau diese Regel ist die, die man beim Aufräumen
   als „redundant" entfernt, und dann steht die Landung dauerhaft über der
   Schale. Deshalb hier zusätzlich ausdrücklich und mit ID-Spezifität:
   die beiden Umschalt-Container von ALMAS ONE. */
#landung[hidden], #schale[hidden]{ display:none!important; }

/* Ohne JavaScript gibt es keine Oberfläche — dann wenigstens einen Satz dazu. */
.ohne-skript{
  margin:0; padding:16px 20px;
  background:var(--amber-tint); color:var(--text);
  border-bottom:1px solid var(--amber-kante);
  font-size:14px; line-height:1.55;
}
.ohne-skript strong{ display:block; margin-bottom:2px; }

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--schrift);
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  background:var(--grund);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;               /* nie horizontales Seiten-Scrollen */
}

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; color:var(--text); }
h1{ font-size:23px; }
h2{ font-size:19px; }
h3{ font-size:16px; }
h4{ font-size:14px; }
p{ margin:0 0 10px; }
a{ color:var(--rot-text); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

/* Sichtbarer Fokus — überall, ohne Ausnahme */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--rot-text);
  outline-offset:2px;
  border-radius:4px;
}

/* Nur für Screenreader */
.nur-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Sprungmarke für die Tastatur */
.sprungmarke{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--rot-text); color:#fff; padding:10px 16px;
  border-radius:var(--r-sm); font-weight:600; box-shadow:var(--schatten-md);
  transition:top .18s var(--weich);
}
.sprungmarke:focus{ top:12px; text-decoration:none; }

::selection{ background:var(--rot-schleier); color:var(--text); }

/* Ruhige Bildlaufleisten */
.scrollt{ scrollbar-width:thin; scrollbar-color:#CFD1D8 transparent; }
.scrollt::-webkit-scrollbar{ width:10px; height:10px; }
.scrollt::-webkit-scrollbar-thumb{ background:#D6D8DE; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
.scrollt::-webkit-scrollbar-thumb:hover{ background:#BDC0C8; background-clip:content-box; }
.scrollt::-webkit-scrollbar-track{ background:transparent; }

/* ─────────────────────────────────────────────────────────────
   3. GERÜST — Seitenleiste · Glas-Kopf · Inhalt
   ───────────────────────────────────────────────────────────── */
.schale{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
}

/* ── Seitenleiste: hell, premium ── */
.seitenleiste{
  width:var(--leiste-breite);
  flex:0 0 var(--leiste-breite);
  min-width:0;
  background:var(--seitenleiste);
  border-right:1px solid var(--kante-2);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  z-index:60;
}

.leiste-marke{
  display:flex; align-items:center; gap:11px;
  padding:16px 18px;
  border-bottom:1px solid var(--kante-2);
  min-height:var(--kopf-hoehe);
  min-width:0;
}
.leiste-marke img{ width:32px; height:32px; object-fit:contain; flex:0 0 32px; }
.leiste-marke .marke-text{ min-width:0; }
.leiste-marke .marke-name{
  font-size:15px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leiste-marke .marke-name em{ font-style:normal; color:var(--rot-text); }
.leiste-marke .marke-unter{ font-size:11px; color:var(--text-3); line-height:1.3; }

.leiste-nav{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:12px 12px 18px;
}
.nav-gruppe{ margin-bottom:16px; }
.nav-titel{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); padding:0 10px; margin:0 0 6px;
}
.leiste-nav ul{ list-style:none; margin:0; padding:0; }

.nav-punkt{
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:100%; min-width:0;
  padding:9px 12px;
  margin-bottom:2px;
  border:0; background:transparent;
  border-radius:var(--r-md);
  font:inherit; font-weight:600; font-size:13.5px;
  color:var(--text-2);
  text-align:left; cursor:pointer;
  transition:background var(--zeit) var(--weich), color var(--zeit) var(--weich);
}
.nav-punkt:hover{ background:var(--seitenleiste-hover); color:var(--text); text-decoration:none; }
.nav-punkt .nav-symbol{ flex:0 0 18px; width:18px; height:18px; display:grid; place-items:center; opacity:.85; }
.nav-punkt .nav-symbol svg{ width:18px; height:18px; }
.nav-punkt .nav-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-punkt[aria-current="page"]{
  background:var(--seitenleiste-aktiv);
  color:var(--rot-text);
  font-weight:700;
}
.nav-punkt[aria-current="page"]::before{
  content:""; position:absolute; left:2px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--rot);
}

/* Untermenü: die Module eines Bereichs */
.nav-unter{ margin:2px 0 8px 30px; padding-left:10px; border-left:1px solid var(--kante-2); }
.nav-unter .nav-punkt{ font-size:13px; font-weight:500; padding:6px 10px; }
.nav-unter .nav-punkt[aria-current="page"]::before{ display:none; }

.nav-zahl{
  margin-left:auto; flex:0 0 auto;
  font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:var(--r-pille);
  background:var(--flaeche); color:var(--text-2);
}
.nav-zahl.ist-warnung{ background:var(--amber-tint); color:var(--amber); }
.nav-zahl.ist-kritisch{ background:var(--rubin); color:#fff; }   /* AA: 6.21:1 — --rot waere 3.80:1 */

.leiste-fuss{
  border-top:1px solid var(--kante-2);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.leiste-fuss .fuss-zeile{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.version-plakette{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-3);
  background:var(--flaeche); border-radius:var(--r-pille);
  padding:3px 10px; white-space:nowrap;
}
.version-plakette .punkt{ width:6px; height:6px; border-radius:50%; background:var(--gruen); flex:0 0 6px; }
.version-plakette.ist-alt .punkt{ background:var(--amber); }
.version-plakette.ist-tot .punkt{ background:var(--rubin); }

/* ── Hauptspalte ── */
.haupt{
  flex:1 1 auto;
  min-width:0;              /* PFLICHT — sonst schiebt eine breite Tabelle die Seite auf */
  display:flex; flex-direction:column;
}

/* ── Glas-Kopf ── */
.kopf{
  position:sticky; top:0; z-index:50;
  min-height:var(--kopf-hoehe);
  display:flex; align-items:center; gap:14px;
  padding:10px 24px;
  background:var(--glas);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--kante-2);
  min-width:0;
}
.kopf-titel{ min-width:0; margin-right:auto; }
.kopf-titel h1{ font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kopf-titel .kopf-unter{ font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.leiste-schalter{
  display:none;
  width:38px; height:38px; flex:0 0 38px;
  align-items:center; justify-content:center;
  border:1px solid var(--kante); background:var(--karte);
  border-radius:var(--r-sm); cursor:pointer; color:var(--text-2);
  box-shadow:var(--schatten-sm);
}
.leiste-schalter svg{ width:18px; height:18px; }

/* ── Globale Suche ── */
.suche{ position:relative; flex:0 1 380px; min-width:0; }
.suche-feld{
  width:100%; min-width:0;
  height:38px; padding:0 34px 0 36px;
  font:inherit; font-size:13.5px; color:var(--text);
  background:var(--karte);
  border:1px solid var(--kante);
  border-radius:var(--r-pille);
  box-shadow:var(--schatten-sm);
  transition:border-color var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich);
}
.suche-feld::placeholder{ color:var(--text-3); }
.suche-feld:focus{ outline:none; border-color:var(--rot); box-shadow:0 0 0 3px var(--rot-schleier); }
.suche-feld:focus-visible{ outline:none; }
.suche-symbol{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; }
.suche-symbol svg{ width:16px; height:16px; display:block; }
.suche-taste{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:10.5px; color:var(--text-3); border:1px solid var(--kante);
  border-radius:5px; padding:1px 5px; background:var(--flaeche); pointer-events:none;
}

.suche-tafel{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  max-height:min(64vh,520px); overflow-y:auto;
  background:var(--karte); border:1px solid var(--kante-2);
  border-radius:var(--r-lg); box-shadow:var(--schatten-lg);
  padding:8px; z-index:80;
}
.suche-tafel[hidden]{ display:none; }
/* Statuszeile der Suche — eigener aria-live-Bereich AUSSERHALB der listbox.
   In einer listbox darf nichts stehen, was keine option ist. */
.suche-status:empty{ display:none; }
.suche-status{ padding:6px 10px 8px; }
.suche-status .st-titel{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:4px;
}
.suche-status .st-text{ font-size:12.5px; color:var(--text-2); }
.suche-liste:empty{ display:none; }
.suche-gruppe + .suche-gruppe{ margin-top:6px; border-top:1px solid var(--kante-2); padding-top:6px; }
.suche-gruppe-titel{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); padding:6px 10px 4px;
}
.suche-treffer{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px; min-width:0;
  border:0; background:transparent; border-radius:var(--r-sm);
  font:inherit; text-align:left; cursor:pointer; color:var(--text);
}
.suche-treffer:hover,.suche-treffer:focus-visible,
.suche-treffer.ist-aktiv{ background:var(--flaeche); text-decoration:none; }
.suche-treffer.ist-aktiv{ box-shadow:inset 0 0 0 2px var(--rot-kante); }
.suche-treffer .tr-text{ min-width:0; }
.suche-treffer .tr-titel{ font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suche-treffer .tr-unter{ font-size:12px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suche-treffer .tr-typ{
  margin-left:auto; flex:0 0 auto;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-3); background:var(--flaeche);
  border-radius:var(--r-pille); padding:2px 8px;
}

/* ── Nutzer-Menü ── */
.nutzer{ position:relative; flex:0 0 auto; }
.nutzer-knopf{
  display:flex; align-items:center; gap:9px;
  padding:5px 10px 5px 5px;
  border:1px solid var(--kante); background:var(--karte);
  border-radius:var(--r-pille); cursor:pointer; font:inherit;
  box-shadow:var(--schatten-sm); color:var(--text);
  max-width:220px; min-width:0;
}
.nutzer-knopf:hover{ box-shadow:var(--schatten-md); }
.kuerzel{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--rot-schleier); color:var(--rot-text);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.nutzer-knopf .nutzer-name{ font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nutzer-tafel{
  position:absolute; right:0; top:calc(100% + 8px); width:250px;
  background:var(--karte); border:1px solid var(--kante-2);
  border-radius:var(--r-lg); box-shadow:var(--schatten-lg);
  padding:8px; z-index:80;
}
.nutzer-tafel[hidden]{ display:none; }
.nutzer-kopf{ padding:10px 12px 12px; border-bottom:1px solid var(--kante-2); margin-bottom:6px; }
/* Trägt role="menu"; enthält ausschließlich role="menuitem"-Knöpfe. */
.menue-liste{ display:flex; flex-direction:column; gap:2px; }
.nutzer-kopf .n-name{ font-weight:700; }
.nutzer-kopf .n-mail{ font-size:12px; color:var(--text-3); overflow-wrap:anywhere; }
.nutzer-kopf .n-rolle{ margin-top:7px; }
.menue-punkt{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 12px; border:0; background:transparent;
  border-radius:var(--r-sm); font:inherit; font-size:13.5px;
  color:var(--text-2); text-align:left; cursor:pointer;
}
.menue-punkt:hover{ background:var(--flaeche); color:var(--text); text-decoration:none; }
.menue-punkt.ist-rot{ color:var(--rot-text); }

/* ── Inhaltsbereich ── */
.inhalt{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  padding:22px 24px 64px;
}
.bahn{ max-width:1440px; margin:0 auto; min-width:0; }

.abschnitt{ margin-bottom:26px; min-width:0; }
.abschnitt-kopf{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px; min-width:0;
}
.abschnitt-kopf h2{ margin-right:auto; min-width:0; }
.abschnitt-kopf .hinweis{ font-size:12.5px; color:var(--text-3); }

/* ─────────────────────────────────────────────────────────────
   4. KARTEN
   ───────────────────────────────────────────────────────────── */
.karte{
  background:var(--karte);
  border:1px solid var(--kante-2);
  border-radius:var(--r-lg);
  box-shadow:var(--schatten-sm);
  min-width:0;
}
.karte-kopf{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:15px 18px; border-bottom:1px solid var(--kante-2);
  min-width:0;
}
.karte-kopf h3{ margin-right:auto; min-width:0; }
.karte-leib{ padding:16px 18px; min-width:0; }
.karte-leib.ist-eng{ padding:12px 14px; }
.karte-fuss{
  padding:12px 18px; border-top:1px solid var(--kante-2);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(180deg,#FFFFFF,#FCFCFD);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

.gitter{ display:grid; gap:16px; min-width:0; }
.gitter.ist-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.gitter.ist-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gitter.ist-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* ─────────────────────────────────────────────────────────────
   5. KENNZAHL-KACHELN — je Kachel ein semantischer Akzent
   (Balken links + farbige Zahl + zarte Flächentönung)
   ───────────────────────────────────────────────────────────── */
.kennzahl{
  position:relative; overflow:hidden;
  background:var(--karte);
  border:1px solid var(--kante-2);
  border-radius:var(--r-lg);
  box-shadow:var(--schatten-sm);
  padding:16px 18px 16px 22px;
  min-width:0;
  transition:transform var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich);
}
.kennzahl::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--akzent,var(--rot));
}
.kennzahl::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--akzent-tint,var(--rot-schleier));
}
.kennzahl > *{ position:relative; z-index:1; }
.kennzahl:hover{ transform:translateY(-3px); box-shadow:var(--schatten-md); }
a.kennzahl,button.kennzahl{
  display:block; width:100%; text-align:left; font:inherit;
  color:inherit; cursor:pointer;
}
a.kennzahl:hover,button.kennzahl:hover{ text-decoration:none; }

/* Eigenständig — wird auch außerhalb von .kennzahl als Kartenmarke benutzt. */
.kz-marke{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3);
  display:flex; align-items:center; gap:7px; min-width:0;
}
.kz-marke svg{ flex:0 0 auto; }
.kennzahl .kz-wert{
  font-family:var(--schrift-zahl);
  font-size:31px; font-weight:700; letter-spacing:-.035em;
  line-height:1.15; margin-top:6px;
  color:var(--akzent,var(--text));
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.kennzahl .kz-zusatz{ font-size:12.5px; color:var(--text-2); margin-top:3px; }
.kennzahl .kz-trend{ font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }

.akz-rot{     --akzent:var(--rubin); --akzent-tint:var(--rubin-tint); }
.akz-amber{   --akzent:var(--amber); --akzent-tint:var(--amber-tint); }
.akz-blau{    --akzent:var(--blau);  --akzent-tint:var(--blau-tint); }
.akz-gruen{   --akzent:var(--gruen); --akzent-tint:var(--gruen-tint); }
.akz-teal{    --akzent:var(--teal);  --akzent-tint:var(--teal-tint); }
.akz-marke{   --akzent:var(--rot-text); --akzent-tint:var(--rot-schleier); }
.akz-neutral{ --akzent:var(--text-2); --akzent-tint:rgba(92,95,102,.05); }

/* ─────────────────────────────────────────────────────────────
   6. PLAKETTEN (Status-Badges)
   ───────────────────────────────────────────────────────────── */
.plakette{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px;
  border-radius:var(--r-pille);
  font-size:11.5px; font-weight:700; line-height:1.5;
  white-space:nowrap;
  border:1px solid transparent;
}
.plakette::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
.plakette.ohne-punkt::before{ display:none; }

.pl-offen{        color:var(--amber); background:var(--amber-tint); border-color:var(--amber-kante); }
.pl-frei{         color:var(--gruen); background:var(--gruen-tint); border-color:var(--gruen-kante); }
.pl-ueberfaellig{ color:var(--rubin); background:var(--rubin-tint); border-color:var(--rubin-kante); }
.pl-bezahlt{      color:var(--blau);  background:var(--blau-tint);  border-color:var(--blau-kante); }
.pl-info{         color:var(--teal);  background:var(--teal-tint);  border-color:var(--teal-kante); }
.pl-neutral{      color:var(--text-2);background:var(--flaeche);    border-color:var(--kante); }

/* Schwere-Plakette eines Beitrags: Zeichen + Wort tragen die Aussage, die
   Farbe verstärkt sie nur. WCAG 1.4.1 — Farbe nie als einziger Träger. */
.pl-zeichen{
  display:inline-grid; place-items:center;
  min-width:15px; height:15px; padding:0 3px;
  border:1px solid currentColor; border-radius:4px;
  font-size:9.5px; font-weight:800; line-height:1;
  font-family:var(--schrift-zahl);
}

/* Schwere-Stufen der Modul-Beiträge (ARCHITEKTUR §6) */
.beitrag.ist-warnung{ border-color:var(--amber-kante); }
.beitrag.ist-warnung .karte-kopf{ background:var(--amber-tint); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.beitrag.ist-kritisch{ border-color:var(--rubin-kante); }
.beitrag.ist-kritisch .karte-kopf{ background:var(--rubin-tint); border-radius:var(--r-lg) var(--r-lg) 0 0; }

/* ─────────────────────────────────────────────────────────────
   7. KNÖPFE
   ───────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; min-height:38px;
  border:1px solid transparent; border-radius:var(--r-sm);
  font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich), transform var(--zeit) var(--weich);
}
.knopf:hover{ text-decoration:none; }
.knopf:disabled,.knopf[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none!important; }
.knopf svg{ width:16px; height:16px; flex:0 0 16px; }

.knopf-haupt{ background:var(--rot-text); color:#fff; box-shadow:0 8px 20px var(--rot-glut); }
.knopf-haupt:hover:not(:disabled){ background:var(--rot-tief); transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,35,37,.34); }

.knopf-neben{ background:var(--karte); color:var(--text); border-color:var(--kante); box-shadow:var(--schatten-sm); }
.knopf-neben:hover:not(:disabled){ background:var(--flaeche); box-shadow:var(--schatten-md); }

.knopf-leise{ background:transparent; color:var(--text-2); }
.knopf-leise:hover:not(:disabled){ background:var(--flaeche); color:var(--text); }

.knopf-gefahr{ background:var(--rubin); color:#fff; box-shadow:0 8px 20px rgba(194,15,28,.22); }
.knopf-gefahr:hover:not(:disabled){ filter:brightness(1.08); }

.knopf-klein{ padding:5px 11px; min-height:30px; font-size:12.5px; }
.knopf-gross{ padding:12px 24px; min-height:46px; font-size:15px; }
.knopf-voll{ width:100%; }

.knopf-reihe{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; min-width:0; }

/* ─────────────────────────────────────────────────────────────
   8. SCHALTER (segmentierter Umschalter statt Knopf-Reihe)
   ───────────────────────────────────────────────────────────── */
.schalter{
  display:inline-flex; gap:3px; padding:4px;
  background:var(--flaeche);
  border-radius:var(--r-pille);
  box-shadow:inset 0 1px 2px rgba(16,17,22,.06);
  max-width:100%; min-width:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.schalter::-webkit-scrollbar{ display:none; }
.schalter-lasche{
  border:0; background:transparent;
  border-radius:var(--r-pille);
  padding:6px 15px; min-height:32px;
  font:inherit; font-size:13px; font-weight:600;
  color:var(--text-2); cursor:pointer; white-space:nowrap;
  transition:background var(--zeit) var(--weich), color var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich);
}
.schalter-lasche:hover{ color:var(--text); }
.schalter-lasche[aria-selected="true"],
.schalter-lasche[aria-checked="true"],
.schalter-lasche.ist-aktiv{
  background:var(--karte); color:var(--text); box-shadow:var(--schatten-md);
}
.schalter-lasche .lasche-zahl{ margin-left:6px; font-size:11px; font-weight:700; color:var(--text-3); }
.schalter-lasche[aria-selected="true"] .lasche-zahl,
.schalter-lasche[aria-checked="true"] .lasche-zahl,
.schalter-lasche.ist-aktiv .lasche-zahl{ color:var(--rot-text); }

/* ─────────────────────────────────────────────────────────────
   9. TABELLEN — scrollen INTERN, nie die Seite
   ───────────────────────────────────────────────────────────── */
.tabellen-rahmen{
  background:var(--karte);
  border:1px solid var(--kante-2);
  border-radius:var(--r-lg);
  box-shadow:var(--schatten-sm);
  overflow:hidden;
  min-width:0; max-width:100%;
}
.tabellen-fenster{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}
table.tabelle{
  width:100%;
  min-width:640px;            /* darunter wird gescrollt — INNEN, nicht die Seite */
  border-collapse:collapse;
  font-size:13.5px;
}
table.tabelle th,
table.tabelle td{
  padding:11px 14px;
  text-align:left;
  border-bottom:1px solid var(--kante-2);
  vertical-align:middle;
}
table.tabelle thead th{
  position:sticky; top:0; z-index:2;
  background:var(--karte);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3);
  border-bottom:1px solid var(--kante);
  white-space:nowrap;
}
table.tabelle tbody tr{ transition:background .15s var(--weich); }
table.tabelle tbody tr:hover{ background:var(--grund); }
table.tabelle tbody tr:last-child td{ border-bottom:0; }
table.tabelle td.zahl,
table.tabelle th.zahl{ text-align:right; font-family:var(--schrift-zahl); font-variant-numeric:tabular-nums; }
table.tabelle td.eng{ white-space:nowrap; }
table.tabelle .haupt-zelle{ font-weight:600; color:var(--text); }
table.tabelle .neben-zeile{ font-size:12px; color:var(--text-3); }
table.tabelle tr.ist-klickbar{ cursor:pointer; }

/* Zeilenliste für Modul-Beiträge (Kunden-/Geräte-/Auftragsseite) */
.zeilen{ margin:0; display:grid; grid-template-columns:minmax(96px,auto) 1fr; gap:7px 14px; min-width:0; }
.zeilen dt{ font-size:12.5px; color:var(--text-3); min-width:0; }
.zeilen dd{ margin:0; font-size:13.5px; font-weight:500; min-width:0; overflow-wrap:anywhere; }

/* ─────────────────────────────────────────────────────────────
   10. FORMULARE
   ───────────────────────────────────────────────────────────── */
.feld{ margin-bottom:14px; min-width:0; }
.feld > label{
  display:block; margin-bottom:5px;
  font-size:12.5px; font-weight:600; color:var(--text-2);
}
.feld .feld-hilfe{ font-size:12px; color:var(--text-3); margin-top:5px; }
.feld .feld-fehler{ font-size:12px; color:var(--rubin); font-weight:600; margin-top:5px; }

.eingabe,.auswahl,.textfeld{
  width:100%; min-width:0;
  padding:9px 12px; min-height:38px;
  font:inherit; font-size:13.5px; color:var(--text);
  background:var(--karte);
  border:1px solid var(--kante);
  border-radius:var(--r-sm);
  transition:border-color var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich);
}
.eingabe::placeholder,.textfeld::placeholder{ color:var(--text-3); }
.eingabe:focus,.auswahl:focus,.textfeld:focus{
  outline:none; border-color:var(--rot); box-shadow:0 0 0 3px var(--rot-schleier);
}
.eingabe:focus-visible,.auswahl:focus-visible,.textfeld:focus-visible{ outline:none; }
.eingabe[aria-invalid="true"],.textfeld[aria-invalid="true"]{ border-color:var(--rubin); }
.textfeld{ min-height:96px; resize:vertical; line-height:1.55; }
.auswahl{
  appearance:none; -webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C5F66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px;
}
.feld-reihe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 14px; min-width:0; }

.haken{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; cursor:pointer; margin-bottom:9px; }
.haken input{ width:17px; height:17px; margin:2px 0 0; accent-color:var(--rot-text); flex:0 0 17px; cursor:pointer; }

/* ─────────────────────────────────────────────────────────────
   11. ZUSTÄNDE — lädt · leer · scheitert
   ───────────────────────────────────────────────────────────── */
.zustand{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px;
  padding:52px 24px; min-width:0;
  color:var(--text-2);
}
.zustand .z-symbol{
  width:52px; height:52px; border-radius:var(--r-lg);
  display:grid; place-items:center; margin-bottom:4px;
  background:var(--flaeche); color:var(--text-3);
}
.zustand .z-symbol svg{ width:24px; height:24px; }
.zustand h3{ font-size:15.5px; }
.zustand p{ font-size:13.5px; color:var(--text-3); max-width:44ch; margin:0; }
.zustand .knopf-reihe{ margin-top:10px; justify-content:center; }

.zustand.ist-fehler .z-symbol{ background:var(--rubin-tint); color:var(--rubin); }
.zustand.ist-fehler h3{ color:var(--rubin); }

/* ── KEIN ZUGRIFF (403) — bewusst UNAEHNLICH zu leer und zu Fehler (WP29) ──
   Drei Zustaende, drei Aussagen: „es gibt nichts" · „Sie duerfen es nicht
   sehen" · „es hat nicht geklappt". Wer sie nur ueber die Farbe trennt,
   verstoesst gegen WCAG 1.4.1 UND laesst Farbsehende raten. Deshalb
   unterscheidet sich HIER die ANORDNUNG: linksbuendig statt mittig, mit
   Balken an der Kante, Schloss im abgerundeten QUADRAT statt im Kreis, und
   dem ausgeschriebenen Merkwort „Keine Freigabe" ueber der Ueberschrift.
   Es gibt hier keinen „Nochmal versuchen"-Knopf — auch das ist ein
   sichtbarer Unterschied. */
.zustand.ist-gesperrt{
  align-items:flex-start; text-align:left;
  padding:24px 24px 24px 22px; gap:9px;
  border-left:4px solid var(--amber);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:
    repeating-linear-gradient(135deg,
      var(--amber-tint) 0 9px, transparent 9px 18px) left/64px 100% no-repeat,
    var(--flaeche);
}
.zustand.ist-gesperrt .z-schild{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.zustand.ist-gesperrt .z-symbol{
  width:40px; height:40px; margin:0;
  border-radius:var(--r-sm);              /* Quadrat mit Radius — nicht der Kreis der anderen */
  background:var(--amber-tint); color:var(--amber);
  border:1px solid var(--amber-kante);
}
.zustand.ist-gesperrt .z-symbol svg{ width:22px; height:22px; }
.zustand.ist-gesperrt h3{ color:var(--text); }
.zustand.ist-gesperrt p{ max-width:56ch; text-align:left; }
/* Der Satz, um den es geht. Er darf nicht wie eine Fussnote aussehen. */
.zustand.ist-gesperrt .z-abgrenzung{ color:var(--text); font-size:14px; }
.zustand.ist-gesperrt .z-abgrenzung strong{ font-weight:650; }
.zustand.ist-gesperrt .z-wo{ color:var(--text-3); }
/* Die Knopfreihe folgt der linksbuendigen Anordnung — sonst saesse sie
   mittig unter linksbuendigem Text und die Kachel waere wieder unentschieden. */
.zustand.ist-gesperrt .knopf-reihe{ justify-content:flex-start; margin-top:6px; }
.plakette.pl-gesperrt{
  color:var(--amber); background:var(--amber-tint); border-color:var(--amber-kante);
  letter-spacing:.04em; text-transform:uppercase; font-size:10.5px;
}
/* Beitrags-Kachel eines gesperrten Moduls: bernsteinfarbene Kante, damit sie
   im Raster weder mit einem echten Beitrag noch mit einer Warnung verwechselt
   wird. Der Leib traegt das Schloss und das Merkwort. */
.beitrag.ist-gesperrt{ border-color:var(--amber-kante); }
.beitrag.ist-gesperrt .karte-kopf{
  background:var(--amber-tint); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.beitrag.ist-gesperrt .karte-leib{ padding:0; }
.beitrag.ist-gesperrt .zustand.ist-gesperrt{ background:transparent; border-left-width:4px; }
/* Technischer Zusatz. Bewusst NICHT auf `.zustand` eingeschraenkt: dieselbe
   Zeile steht auch in der Ausfall-Karte, die in einer `.karte` sitzt — dort
   blieb sie vorher unformatiert. `pre-line` haelt mehrere Gruende
   auseinander, ohne dass jeder ein eigenes Element braucht. */
.z-technisch{
  margin-top:10px; max-width:100%;
  font-family:var(--schrift-zahl); font-size:11.5px; color:var(--text-3);
  background:var(--flaeche); border-radius:var(--r-sm);
  padding:7px 11px; overflow-wrap:anywhere; text-align:left;
  white-space:pre-line;
}

/* Ladepunkt im Knopf */
.spinner{
  width:15px; height:15px; flex:0 0 15px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:dreht .7s linear infinite;
}
@keyframes dreht{ to{ transform:rotate(360deg); } }

/* ── Skelett-Lader ── */
.skelett{
  position:relative; overflow:hidden;
  background:var(--flaeche);
  border-radius:var(--r-sm);
  height:14px;
}
.skelett::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:wandert 1.35s var(--weich) infinite;
}
@keyframes wandert{ to{ transform:translateX(100%); } }
.skelett.s-titel{ height:20px; width:42%; }
.skelett.s-zeile{ height:13px; width:100%; margin-top:9px; }
.skelett.s-kurz{ width:62%; }
.skelett.s-zahl{ height:32px; width:52%; margin-top:8px; }
.skelett.s-block{ height:120px; border-radius:var(--r-md); }
.skelett-kachel{
  background:var(--karte); border:1px solid var(--kante-2);
  border-radius:var(--r-lg); box-shadow:var(--schatten-sm);
  padding:16px 18px;
}

/* ─────────────────────────────────────────────────────────────
   12. MODAL / DIALOG
   ───────────────────────────────────────────────────────────── */
.modal-grund{
  position:fixed; inset:0; z-index:120;
  background:rgba(16,17,22,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center;
  padding:20px;
  animation:blendet-ein .18s var(--weich);
}
.modal-grund[hidden]{ display:none; }
.modal{
  width:min(620px,100%);
  max-height:min(86vh,780px);
  display:flex; flex-direction:column;
  background:var(--karte);
  border-radius:var(--r-xl);
  box-shadow:var(--schatten-xl);
  overflow:hidden; min-width:0;
  animation:steigt-auf .22s var(--weich);
}
.modal.ist-breit{ width:min(920px,100%); }
.modal-kopf{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--kante-2);
  min-width:0;
}
.modal-kopf h2{ margin-right:auto; font-size:17px; min-width:0; }
.modal-leib{ padding:20px 22px; overflow-y:auto; min-width:0; }
.modal-fuss{
  padding:14px 22px; border-top:1px solid var(--kante-2);
  display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap;
  background:linear-gradient(180deg,#FFFFFF,#FCFCFD);
}
.schliessen{
  width:32px; height:32px; flex:0 0 32px;
  display:grid; place-items:center;
  border:0; background:transparent; border-radius:var(--r-sm);
  color:var(--text-3); cursor:pointer;
}
.schliessen:hover{ background:var(--flaeche); color:var(--text); }
.schliessen svg{ width:16px; height:16px; }

@keyframes blendet-ein{ from{ opacity:0; } }
@keyframes steigt-auf{ from{ opacity:0; transform:translateY(12px) scale(.985); } }

/* ─────────────────────────────────────────────────────────────
   13. MELDESTREIFEN
   ───────────────────────────────────────────────────────────── */
.meldungen{
  position:fixed; right:20px; bottom:20px; z-index:140;
  display:flex; flex-direction:column; gap:9px;
  max-width:min(380px,calc(100vw - 40px));
}
.meldung{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 15px;
  background:var(--karte); border:1px solid var(--kante-2);
  border-left:4px solid var(--text-2);
  border-radius:var(--r-md); box-shadow:var(--schatten-lg);
  font-size:13.5px; min-width:0;
  animation:schiebt-rein .22s var(--weich);
}
.meldung.ist-gut{ border-left-color:var(--gruen); }
.meldung.ist-warnung{ border-left-color:var(--amber); }
.meldung.ist-fehler{ border-left-color:var(--rubin); }
@keyframes schiebt-rein{ from{ opacity:0; transform:translateX(20px); } }

/* ─────────────────────────────────────────────────────────────
   14. ÖFFENTLICHE LANDEANSICHT (nicht angemeldet)
   ───────────────────────────────────────────────────────────── */
.landung{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1100px 520px at 12% -12%,rgba(255,35,37,.09),transparent 62%),
    radial-gradient(900px 460px at 92% 6%,rgba(0,87,184,.06),transparent 60%),
    var(--grund);
}
.landung-kopf{
  display:flex; align-items:center; gap:11px;
  padding:20px 28px; min-width:0;
}
.landung-kopf img{ width:34px; height:34px; object-fit:contain; }
.landung-kopf .marke-name{ font-size:16px; font-weight:700; letter-spacing:-.02em; }
.landung-kopf .marke-name em{ font-style:normal; color:var(--rot-text); }

.landung-mitte{
  flex:1 1 auto;
  display:grid; place-items:center;
  padding:24px 24px 72px; min-width:0;
}
.landung-karte{
  width:min(560px,100%);
  background:var(--karte);
  border:1px solid var(--kante-2);
  border-radius:var(--r-xl);
  box-shadow:var(--schatten-xl);
  padding:38px 34px 32px;
  text-align:center; min-width:0;
}
.landung-karte .baer{ width:64px; height:64px; margin:0 auto 18px; object-fit:contain; }
.landung-karte h1{ font-size:29px; letter-spacing:-.03em; }
.landung-karte h1 em{ font-style:normal; color:var(--rot-text); }
.landung-karte .unterzeile{ font-size:14.5px; color:var(--text-2); margin:10px 0 24px; }
.landung-karte .knopf-reihe{ justify-content:center; }
.landung-punkte{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin-top:28px; text-align:left; min-width:0;
}
.landung-punkt{
  background:var(--grund); border:1px solid var(--kante-2);
  border-radius:var(--r-md); padding:12px 14px; min-width:0;
}
.landung-punkt .lp-titel{ font-size:13px; font-weight:700; }
.landung-punkt .lp-text{ font-size:12px; color:var(--text-3); }
.landung-fuss{ padding:0 28px 24px; text-align:center; font-size:12px; color:var(--text-3); }

/* ─────────────────────────────────────────────────────────────
   15. KLEINWERKZEUG
   ───────────────────────────────────────────────────────────── */
.brotkrumen{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-3); margin-bottom:10px; min-width:0;
}
.brotkrumen button{
  border:0; background:transparent; font:inherit; font-size:12.5px;
  color:var(--rot-text); cursor:pointer; padding:0;
}
.brotkrumen button:hover{ text-decoration:underline; }
.brotkrumen .trenner{ color:var(--kante); }

.trennlinie{ height:1px; background:var(--kante-2); border:0; margin:18px 0; }
.leise{ color:var(--text-3); }
.klein{ font-size:12px; }
.stark{ font-weight:700; }
.zahl-schrift{ font-family:var(--schrift-zahl); font-variant-numeric:tabular-nums; }
.rechts{ text-align:right; }
.abstand-oben{ margin-top:16px; }
.eng-halten{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.marke-punkt{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--rot); flex:0 0 8px;
}

/* Platzhalter-Karte „Modul folgt“ */
.platzhalter{
  border:1px dashed var(--kante);
  background:linear-gradient(180deg,#FFFFFF,#FBFBFD);
  border-radius:var(--r-lg);
  padding:26px 22px;
  text-align:center; min-width:0;
}
.platzhalter h3{ font-size:15px; }
.platzhalter p{ font-size:13px; color:var(--text-3); margin:6px 0 0; }
.platzhalter .pl-slug{
  display:inline-block; margin-top:12px;
  font-family:var(--schrift-zahl); font-size:11.5px;
  background:var(--flaeche); color:var(--text-2);
  border-radius:var(--r-pille); padding:3px 11px;
}

/* ─────────────────────────────────────────────────────────────
   16. SCHMALE FENSTER
   Tablets behalten die volle Oberfläche — Handys gehen nach /mobile.
   ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  :root{ --leiste-breite:224px; }
  .inhalt{ padding:20px 18px 56px; }
  .kopf{ padding:10px 18px; }
}

@media (max-width:900px){
  .seitenleiste{
    position:fixed; left:0; top:0; bottom:0;
    transform:translateX(-100%);
    /* visibility nimmt die geschlossene Leiste aus Tab-Reihenfolge UND
       Barrierefreiheits-Baum. Ohne das tabbt man durch unsichtbare Knoepfe. */
    visibility:hidden;
    transition:transform .26s var(--weich), visibility 0s linear .26s;
    box-shadow:var(--schatten-xl);
    width:280px; flex-basis:280px;
  }
  .seitenleiste.ist-offen{
    transform:none;
    visibility:visible;
    transition:transform .26s var(--weich), visibility 0s linear 0s;
  }
  .leiste-schalter{ display:inline-flex; }
  .haupt{ width:100%; min-width:0; }
  .leiste-schleier{
    position:fixed; inset:0; z-index:55;
    background:rgba(16,17,22,.35);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  .leiste-schleier[hidden]{ display:none; }
  .suche{ flex:1 1 auto; }
  .suche-taste{ display:none; }
  .nutzer-knopf .nutzer-name{ display:none; }
}

@media (max-width:640px){
  .inhalt{ padding:16px 14px 56px; }
  .kopf{ padding:10px 14px; gap:10px; }
  /* NICHT display:none — sonst hat die App unter 640px gar keine h1 mehr.
     Optisch weg, im Barrierefreiheits-Baum vorhanden. */
  .kopf-titel{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
  .kennzahl .kz-wert{ font-size:26px; }
  .landung-karte{ padding:28px 20px 24px; }
  .landung-karte h1{ font-size:24px; }
  .meldungen{ right:12px; left:12px; bottom:12px; max-width:none; }
  .zeilen{ grid-template-columns:1fr; gap:2px 0; }
  .zeilen dd{ margin-bottom:8px; }
}

/* ── Arbeits-Einstiege (Befund 10: die Leiste zeigt Arbeit, keine App-Namen) ── */
.nav-arbeit-leer{ font-size:12px; color:var(--text-2); padding:4px 10px 8px; margin:0; }

/* Fachmodul-Vollansichten: technischer Ausklapper am Fuss der Bereichsseite,
   bewusst KEINE Navigationsebene. */
.werkzeug-lade{
  margin-top:22px; border:1px solid var(--kante-2); border-radius:var(--r-md);
  background:var(--karte); box-shadow:var(--schatten-sm); overflow:hidden;
}
.werkzeug-lade > summary{
  cursor:pointer; padding:11px 14px; font-size:12.5px; font-weight:600; color:var(--text-2);
  list-style:none;
}
.werkzeug-lade > summary::-webkit-details-marker{ display:none; }
.werkzeug-lade > summary::before{ content:"▸ "; color:var(--text-3); }
.werkzeug-lade[open] > summary::before{ content:"▾ "; }
.werkzeug-lade > summary:hover{ background:var(--flaeche); color:var(--text); }
.werkzeug-lade > summary:focus-visible{ outline:2px solid var(--rot); outline-offset:-2px; }
.werkzeug-lade .wl-leib{ padding:0 14px 14px; }
.werkzeug-lade .wl-hinweis{ font-size:12px; color:var(--text-2); margin:0 0 10px; }
.werkzeug-lade .wl-liste{ display:flex; flex-wrap:wrap; gap:8px; }

/* ─────────────────────────────────────────────────────────────
   17. BEWEGUNG AUS · DRUCK · HOHER KONTRAST
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .kennzahl:hover,.knopf-haupt:hover{ transform:none!important; }
}

@media print{
  .seitenleiste,.kopf,.meldungen,.leiste-schleier{ display:none!important; }
  .inhalt{ padding:0; }
  .karte,.kennzahl,.tabellen-rahmen{ box-shadow:none; border-color:#CCC; break-inside:avoid; }
  body{ background:#fff; }
}

@media (prefers-contrast:more){
  :root{ --kante:#9A9CA4; --kante-2:#B7B9C0; --text-2:#3E4148; --text-3:#5C5F66; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „ids" (Geräte-IDs) — frontend/module/ids.js
   Alle Klassen tragen das Präfix .m-ids-, damit kein anderes Modul
   beschädigt werden kann. Mehr als diese drei Kleinigkeiten braucht das
   Modul nicht; alles Übrige kommt aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filterzeile: die beiden segmentierten Schalter nebeneinander, am Handy
   untereinander. min-width:0, damit nichts die Seite breit zieht. */
.m-ids-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-ids-filter > *{ min-width:0; }

/* Kennungen (Geräte-ID, Seriennummer, SIM) stehen in der Zahlen-Schrift:
   gleich breite Ziffern, damit sich Nummern beim Vergleichen decken. */
.m-ids-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* Die Akte im Modal stapelt ihre Blöcke mit Luft dazwischen. */
.m-ids-akte{ display:flex; flex-direction:column; gap:16px; margin-top:18px; min-width:0; }
.m-ids-akte > *{ min-width:0; }

/* ─────────────────────────────────────────────────────────────
   MODUL „aufschaltungen"
   Nur Layout der Filterzeile und des Listenfußes. Alles andere
   kommt aus den ui.*-Bausteinen der Schale.
   ───────────────────────────────────────────────────────────── */

/* Suchfeld und Blatt-Wahl in einer Zeile, am Handy untereinander.
   min-width:0 überall — sonst zieht ein langer Blattname die Seite breit. */
.m-aufschaltungen-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:flex-end; min-width:0; margin-bottom:14px;
}
.m-aufschaltungen-filter > *{ min-width:0; }
.m-aufschaltungen-suche{ flex:1 1 280px; margin-bottom:0; }
.m-aufschaltungen-blatt{ flex:0 1 240px; margin-bottom:0; }

/* Zeilenzahl links, „Mehr laden" daneben. */
.m-aufschaltungen-fuss{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-top:12px;
}

/* ─────────────────────────────────────────────────────────────
   MODUL doku — Suchfeld in der Abschnitts-Kopfzeile.
   `.eingabe` ist bewusst width:100%; in der Flex-Kopfzeile braucht es
   deshalb eine eigene Spur, sonst drueckt es Schalter und Knopf heraus.
   Praefix .m-doku-, damit kein anderes Modul betroffen ist.
   ───────────────────────────────────────────────────────────── */
.m-doku-suchfeld{ flex:1 1 200px; min-width:0; max-width:340px; }
.m-doku-suchfeld .eingabe{ min-height:34px; padding:7px 12px; }

/* MODUL doku — „Meinten Sie …?" (Kunden-Auswahl, ARCHITEKTUR §5a).
   Untereinander, nicht nebeneinander: die Beschriftungen sind ganze Saetze
   (Name · Kundennummer · Ort), und der Nutzer soll sie LESEN, nicht
   ueberfliegen — hier wird eine Identitaet bestaetigt. Die Knoepfe fliessen
   ueber die volle Breite und tragen ihren Text linksbuendig; `min-width:0`
   und `overflow-wrap` halten lange Firmennamen im Kasten, statt die Seite
   waagerecht scrollen zu lassen. */
.m-doku-auswahl{ display:flex; flex-direction:column; gap:8px; min-width:0; margin-top:10px; }
.m-doku-auswahl .knopf{
  width:100%; min-width:0; justify-content:flex-start; text-align:left;
  white-space:normal; overflow-wrap:anywhere; line-height:1.35;
}

/* ─────────────────────────────────────────────────────────────
   MODUL sim — Filterzeile.
   Nur Layout. Alles andere baut das Modul aus den ui.*-Bausteinen.
   Präfix .m-sim-, damit kein anderes Modul davon berührt wird.

   Die frühere `.m-sim-suchreihe` (Eingabefeld + Absende-Knopf in einer
   Zeile) und `.m-sim-filter-marke` (eigene Beschriftungen vor den beiden
   Schaltern) sind ersatzlos entfallen: der Suchbereich ist jetzt wie bei
   ids.js und aufschaltungen.js ein schlichtes `.feld` mit Tipp-Bremse, und
   die Schalter beschriften sich über ihre Optionen selbst.
   Werte deckungsgleich mit `.m-ids-filter`, damit beide Modulseiten
   nebeneinander dieselbe Zeile ergeben.
   ───────────────────────────────────────────────────────────── */
.m-sim-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-sim-filter > *{ min-width:0; }

/* ─────────────────────────────────────────────────────────────
   MODUL „aufschaltungen" — Nachtrag: Absprünge und Listenfuß.
   Alle Klassen mit dem Modul-Präfix, damit kein anderes Modul
   betroffen ist.
   ───────────────────────────────────────────────────────────── */

/* Absprung in die Alt-App. Das Zeichen ist rein dekorativ (aria-hidden);
   die Aussage „öffnet ein neues Fenster" steht IMMER im Text des Knopfes,
   weil die Schale aus `aktionen[]` einen Knopf ohne aria-Zusatz baut. */
.m-aufschaltungen-aus{ gap:6px; }
.m-aufschaltungen-aus-zeichen{
  font-size:0.95em; line-height:1; opacity:0.75; transform:translateY(-1px);
}

/* Der Knopf im Fuß sitzt neben der Zeilenzahl, der Fehlerhinweis darunter —
   die bereits geladenen Zeilen bleiben dabei stehen. */
.m-aufschaltungen-fuss-knopf{ display:flex; gap:8px; min-width:0; }
.m-aufschaltungen-fuss-fehler{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-top:8px; color:var(--rot-text,#C20F1C); min-width:0;
}

/* Warnung „Adresse pruefen" im Detail-Dialog. Sie stand frueher in `.zustand`
   — der zentrale LEERZUSTAND: zentriert, 52px Luft, grauer Text. Die einzige
   echte Warnung des Dialogs sah damit aus wie „hier ist nichts". Jetzt ein
   linksbuendiger Hinweiskasten mit Amber-Kante; die Aussage traegt weiterhin
   die Plakette (Text, nicht nur Farbe — WCAG 1.4.1). */
.m-aufschaltungen-warnung{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:11px 13px; margin-bottom:14px; min-width:0;
  border:1px solid var(--amber-kante);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md);
  background:var(--amber-tint);
}
.m-aufschaltungen-warnung > .klein{ margin:0; max-width:62ch; }

/* „Mehr laden" waehrend des Nachladens. Gesperrt wird ueber `aria-disabled`,
   NICHT ueber `disabled`: letzteres nimmt dem Knopf den Fokus und wirft einen
   Tastaturnutzer bei jedem Klick an den Seitenanfang zurueck. Also nur das
   Aussehen daempfen — der Knopf bleibt fokussierbar. */
.m-aufschaltungen-wartet{ opacity:0.62; cursor:progress; }

/* „Meinten Sie …?" — die Auswahl, wenn sich zu einer Aufschaltungszeile keine
   D365-Kundennummer BEWEISEN laesst. Untereinander, volle Breite: die Eintraege
   tragen Klarname und Kennung und werden sonst unlesbar abgeschnitten. */
.m-aufschaltungen-auswahl{
  display:flex; flex-direction:column; gap:8px; min-width:0; margin-top:8px;
}
.m-aufschaltungen-auswahl > .knopf{
  width:100%; justify-content:flex-start; text-align:left; min-width:0;
}

/* Fuss-Platzhalter des SIM-Detail-Dialogs. Am Desktop liegt er in
   `.modal-fuss` und bleibt eine Reihe; am Handy legt die Schale ihn in
   `.blatt-aktionen`, wo Knoepfe untereinander und ganzflaechig stehen —
   deshalb dort zur Spalte. */
.blatt-aktionen .m-sim-fuss{ flex-direction:column; align-items:stretch; width:100%; }

/* „Heute" im Modul doku: an einem Tag ohne Termin leert das Modul den
   Abschnitt vollstaendig. Ohne diese Regel bliebe seine Aussenluft (26px)
   ueber den Kennzahl-Kacheln stehen — ein Loch ohne Inhalt. */
.m-doku-heute:empty{ display:none; }

/* ─────────────────────────────────────────────────────────────
   MODUL doku — Kennzahl-Kachel als SCHALTER auf die Liste darunter.

   Warum es das gibt: Die Zeilen von „Mein Tag" koennen ihrer Zielseite
   keinen Ansichtswert mitgeben (`routeZuHash()` baut nur `#/modul/<slug>`).
   Wer „Voranmeldungen pruefen: 5" anklickte, landete deshalb auf der
   Liste im Zustand „Offen" — gemeldete Zahl und geoeffnete Menge gingen
   auseinander. Jetzt steht die Zahl beim Ankommen oben als Kachel und
   oeffnet mit EINEM Klick genau ihre Menge.

   `ui.kennzahl({ziel})` kann nur ROUTEN, deshalb macht das Modul die
   fertige Kachel nachtraeglich zum Knopf (role="button") — dasselbe
   Vorgehen wie `.m-sim-kachel-springt`. Hier nur, was das sichtbar macht;
   Optik und Akzent kommen unveraendert von `.kennzahl`.
   ───────────────────────────────────────────────────────────── */
.m-doku-kachel-schaltet{ cursor:pointer; }
.m-doku-kachel-schaltet:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-doku-kachel-schaltet:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* ─────────────────────────────────────────────────────────────
   MODUL sim — Nachtrag: Kennzahl-Kachel als Sprung in den
   Abschnitt „Letzte Statuswechsel" derselben Seite.
   `ui.kennzahl({ ziel })` kann nur ROUTEN, deshalb macht das Modul
   die fertige Kachel nachtraeglich zum Knopf (role="button").
   Hier nur, was das sichtbar macht — Optik und Akzent kommen
   unveraendert von `.kennzahl`.
   ───────────────────────────────────────────────────────────── */
.m-sim-kachel-springt{ cursor:pointer; }
.m-sim-kachel-springt:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-sim-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* Der Abschnitt selbst ist per `tabindex="-1"` fokussierbar, damit der Sprung
   Screenreader und Tastatur mitnimmt. Ein Fokusring um einen ganzen Abschnitt
   waere aber Laerm — der Zielabschnitt zeigt sich ueber seine Karte. */
#m-sim-wechsel:focus{ outline:none; }
#m-sim-wechsel:focus-visible{ outline:none; }

/* ─────────────────────────────────────────────────────────────
   18. ANKER-IDENTITÄT (ARCHITEKTUR §5a)
   Der Auflöser vor der Anker-Seite und der Identitäts-Kopf auf ihr.

   Grundsatz: Unsicherheit wird NIE allein über Farbe getragen
   (WCAG 1.4.1). Jede Stufe hat ihr Wort — „Kennung bestätigt",
   „Keine kanonische Kennung", „kein kanonischer Schlüssel" — und
   die Farbe ist nur die Verstärkung.
   ───────────────────────────────────────────────────────────── */

.aufl-platz:empty{ display:none; }
.aufl-platz{ margin-top:12px; }

.aufloesung{
  border:1px solid var(--kante); border-radius:var(--r-md);
  background:var(--flaeche); padding:12px; min-width:0;
}
.aufl-kopf{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.aufl-grund{ margin:0 0 10px; max-width:62ch; }
/* Hinweis auf eine GEKUERZTE Trefferliste — eine gekappte Auswahl, die
   vollstaendig aussieht, ist selbst wieder eine Rateaufforderung. */
.aufl-gekuerzt{ margin:8px 0 0; max-width:62ch; }

.aufl-liste{ display:flex; flex-direction:column; gap:8px; }

.aufl-eintrag{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  width:100%; min-width:0; text-align:left; font:inherit; color:inherit;
  background:var(--karte); border:1px solid var(--kante); border-radius:var(--r-sm);
  padding:10px 12px; cursor:pointer;
  box-shadow:var(--schatten-sm);
  transition:border-color var(--zeit) var(--weich), box-shadow var(--zeit) var(--weich);
}
.aufl-eintrag:hover{ border-color:var(--rot-kante); box-shadow:var(--schatten-md); }
.aufl-eintrag:focus-visible{ outline:2px solid var(--rot-text); outline-offset:2px; }
/* Ersatzschlüssel: linke Kante in Rubin PLUS die Plakette im Fuß. */
.aufl-eintrag.ist-ersatz{ border-left:3px solid var(--rubin); }

.aufl-name{ font-weight:600; overflow-wrap:anywhere; }
.aufl-kennung{ font-family:var(--schrift-zahl); overflow-wrap:anywhere; }
.aufl-unter{ overflow-wrap:anywhere; }
.aufl-fuss{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

.aufl-notausgang{ margin-top:12px; padding-top:10px; border-top:1px solid var(--kante-2); }

/* ── Ausgefallene Quellen ──────────────────────────────────────────────
   Ein Ausfall darf nie wie Feierabend aussehen (ARCHITEKTUR §5a). Er steht
   VOR der Trefferliste, weil er aendert, wie die Liste zu lesen ist: faellt
   die massgebliche Quelle aus, kann der gesuchte Eintrag genau dort stehen —
   und eine Auswahl, die vollstaendig aussieht, ist es dann nicht. */
.aufl-ausfall,
.ident-ausfall{
  display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;
  margin:0 0 10px; padding:8px 10px; max-width:70ch;
  border:1px solid var(--rubin-kante, var(--kante)); border-left:3px solid var(--rubin);
  border-radius:var(--r-sm); background:var(--rubin-tint);
}
.ident-ausfall{ flex:1 1 100%; margin:6px 0 0; }

/* ── Identitäts-Kopf der Anker-Seite ── */
.ident-kopf{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-start;
  justify-content:space-between; min-width:0;
  border:1px solid var(--kante); border-left:3px solid var(--gruen);
  border-radius:var(--r-md); background:var(--karte);
  padding:12px 14px; margin-bottom:16px; box-shadow:var(--schatten-sm);
}
.ident-kopf.ist-unsicher{ border-left-color:var(--rubin); background:var(--rubin-tint); }
.ident-leib{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ident-name{ font-size:16px; font-weight:650; overflow-wrap:anywhere; }
.ident-kennung{ font-family:var(--schrift-zahl); overflow-wrap:anywhere; }
.ident-aliase{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:3px; min-width:0; }
.ident-alias{ overflow-wrap:anywhere; }
.ident-plaketten{ display:flex; gap:6px; flex-wrap:wrap; }
.ident-hinweis{ flex:1 1 100%; margin:2px 0 0; max-width:70ch; }
/* Klarname OHNE Beleg: klein, unten, ausdruecklich als Vermutung — nie als
   erste und groesste Zeile der Seite (ARCHITEKTUR §5a). */
.ident-vermutung{ flex:1 1 100%; margin:2px 0 0; max-width:70ch; font-style:italic; }
/* Der GRUND des Gateways — die belegte Aussage darueber, welche Quelle was
   geantwortet hat. Steht unter dem seitenbezogenen Hinweis, nicht statt ihm. */
.ident-grund{ flex:1 1 100%; margin:2px 0 0; max-width:70ch; }
.ident-kopf .knopf-reihe{ flex:1 1 100%; margin-top:4px; }

@media (max-width:720px){
  .ident-kopf{ flex-direction:column; }
  .ident-plaketten{ order:-1; }
}

/* ─────────────────────────────────────────────────────────────
   MODUL „video" — Video-Monitoring.
   Nur Layout der Filterzeile, des Listenfusses und der beiden
   Freitext-Spalten (Kundenname, Kameraname). Alles Uebrige kommt
   aus den ui.*-Bausteinen der Schale.
   Praefix .m-video-, damit kein anderes Modul betroffen ist.
   ───────────────────────────────────────────────────────────── */

/* Die beiden segmentierten Schalter nebeneinander, am Handy untereinander.
   Werte deckungsgleich mit .m-ids-filter und .m-sim-filter, damit zwei
   Modulseiten nebeneinander dieselbe Zeile ergeben. */
.m-video-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-video-filter > *{ min-width:0; }

/* Kunden- und Kameranamen kommen ungefiltert aus der Betreffzeile einer
   fremden Mail: beliebig lang, mit Klammern, Schraegstrichen und ohne
   Trennstellen. Ohne `overflow-wrap` zieht ein einziger langer Name die
   Tabelle — und damit die Seite — waagerecht auf. */
.m-video-name{ min-width:0; overflow-wrap:anywhere; }

/* Listenfuss: Zeilenzahl links, „Weitere laden" daneben. Leer bleibt er
   unsichtbar, damit unter der offenen Liste keine Luecke steht. */
.m-video-fuss{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-top:12px;
}
.m-video-fuss:empty{ display:none; }

/* Nachlade-Fehler im Listenfuss. Er ERSETZT die geladenen Zeilen nicht — die
   stimmen ja —, muss aber als Stoerung lesbar sein. Farbe UND Wort: der Text
   nennt den Grund selbst, die Farbe ist nur die Zugabe (WCAG 1.4.1). */
.m-video-nachlade-fehler{ color:var(--rubin); min-width:0; overflow-wrap:anywhere; }

/* Einstiegs-Kasten ueber der Liste: „nur die Ausfaelle von X". Er kommt von
   einer Anker-Kachel und sagt, WARUM die Liste kurz ist — ohne ihn haelt man
   die drei Zeilen fuer den ganzen Bestand. Text links, Ausweg rechts; am
   Handy untereinander, damit der Knopf die volle Tippbreite behaelt. */
.m-video-einstieg{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:space-between; min-width:0;
}
.m-video-einstieg > p{ flex:1 1 260px; min-width:0; margin:0; overflow-wrap:anywhere; }

/* Bestaetigungsauswahl „Meinten Sie …?" im Dialog (video.js →
   kundenAuswahlZeigen). Die Kandidaten stehen UNTEREINANDER, nie
   nebeneinander: zwei aehnliche Firmennamen in einer Zeile laden dazu ein,
   den naechstbesten zu treffen — und genau das soll die Auswahl verhindern.
   Jeder Knopf traegt seine volle Beschriftung (Name · Kennung · Quelle), also
   darf er umbrechen und muss linksbuendig bleiben. */
.m-video-auswahl{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.m-video-auswahl > p{ margin:0; min-width:0; overflow-wrap:anywhere; }
.m-video-auswahl-liste{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.m-video-auswahl-liste > button{
  width:100%; min-width:0; text-align:left; justify-content:flex-start;
  white-space:normal; overflow-wrap:anywhere; line-height:1.35;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „Scanner-Eingang" (frontend/module/scanner.js) — Präfix .m-scanner-
   Nur das Wenige, was die ui.*-Bausteine der Schale nicht schon hergeben.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filterzeile: Ansicht- und Dokumentart-Schalter nebeneinander, am Handy
   untereinander. min-width:0, damit nichts die Seite breit zieht. */
.m-scanner-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-scanner-filter > *{ min-width:0; }

/* Art-Zelle: Bezeichnung und (nur bei hoher/nachrangiger Priorität) die
   Plakette daneben. Umbricht statt die Spalte zu sprengen. */
.m-scanner-art{
  display:inline-flex; flex-wrap:wrap; gap:4px 8px;
  align-items:center; min-width:0;
}

/* Aufzählung der weiteren Treffer in der Anker-Kachel. Untereinander statt
   in einer langen Zeile — vor dem Kunden wird überflogen, nicht gelesen.
   min-width:0 und Umbruch, damit ein langer Absendername die Kachel (und
   damit die Anker-Seite) nicht breit zieht. */
.m-scanner-belegliste{
  display:flex; flex-direction:column; gap:3px;
  min-width:0; overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „testphasen" (Testphasen-Portal) — frontend/module/testphasen.js
   Alle Klassen tragen das Präfix .m-testphasen-, damit kein anderes Modul
   beschädigt werden kann. Mehr als diese fünf Kleinigkeiten braucht das
   Modul nicht; alles Übrige kommt aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filterzeile: die beiden segmentierten Schalter nebeneinander, am Handy
   untereinander. Werte deckungsgleich mit .m-ids-filter und .m-sim-filter,
   damit zwei Modulseiten nebeneinander dieselbe Zeile ergeben.
   min-width:0 überall — sonst zieht ein langer Schalter die Seite breit. */
.m-testphasen-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-testphasen-filter > *{ min-width:0; }

/* Dieselben beiden Schalter am Handy — dort IMMER untereinander. `.schalter`
   ist `inline-flex`; nebeneinander gesetzt ergäben zwei Reihen zu je halber
   Breite, beide angeschnitten. Untereinander bekommt jede Reihe die volle
   Breite und rollt für sich. `align-items:flex-start` hält jeden Schalter auf
   seiner Inhaltsbreite, statt ihn über die ganze Zeile zu dehnen. */
.m-testphasen-h-filter{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; min-width:0; margin-bottom:14px;
}
.m-testphasen-h-filter > *{ max-width:100%; min-width:0; }

/* Kennungen (Hauskennung SW-1042, IMEI, MAC) in der Zahlen-Schrift: gleich
   breite Ziffern, damit sich Nummern beim Vergleichen untereinander decken.
   `overflow-wrap` hält eine 15-stellige IMEI in ihrer Spalte, statt die
   Tabelle breit zu ziehen — die scrollt zwar intern, aber unnötig. */
.m-testphasen-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

/* Zustands-Zelle: Plakette oben, Liegezeit als Text darunter. Der Grund einer
   roten Plakette steht IMMER als Wort dabei (WCAG 1.4.1) — die Zeile darf
   deshalb umbrechen, statt den Text abzuschneiden. */
.m-testphasen-zustand{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  min-width:0;
}
.m-testphasen-zustand > .klein{ line-height:1.35; }

/* Die Geräte-Akte im Dialog stapelt ihre Blöcke mit Luft dazwischen —
   am Rechner im Modal, am Handy im Bottom-Sheet, beides derselbe Knoten. */
.m-testphasen-akte{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.m-testphasen-akte > *{ min-width:0; }
.m-testphasen-akte h4{ margin:4px 0 0; }

/* Der Änderungsverlauf wird NACHGELADEN und tauscht seinen Inhalt aus.
   Eine Mindesthöhe verhindert, dass der Dialog beim Wechsel vom Skelett zur
   Liste unter dem Finger springt. */
.m-testphasen-verlauf{ min-width:0; min-height:96px; }

/* ── Modul „defi" — Defi-Fernüberwachung ─────────────────────
   Praefix .m-defi-, wie im Modul-Vertrag vorgeschrieben. Nur, was die
   Bausteine der Schale nicht schon koennen. `min-width:0` ueberall, damit
   lange Kundennamen und Seriennummern die Seite nicht waagerecht schieben. */
.m-defi-filter{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  min-width:0;
}
.m-defi-filter > *{ min-width:0; }
/* Das Suchfeld steht als eigenes `.feld` UNTER dem Abschnittskopf — mit
   sichtbarem <label> und `.feld-hilfe`, wie in sim.js und ids.js. Es gehoert
   damit nicht mehr in die Schalter-Reihe: dort wuerde ein zweizeiliges Feld
   die mittig ausgerichteten Schalter auseinanderziehen. */
.m-defi-suchfeld{ max-width:420px; }

/* Der Hinweis auf den stillen Spiegel. Er steht unter den Kennzahlen und
   gehoert zu ihnen — deshalb kein Kartenrahmen, aber genug Abstand, dass er
   nicht wie eine Fussnote der letzten Kachel wirkt. */
.m-defi-spiegel{ margin-top:12px; min-width:0; }
.m-defi-spiegel > p{ margin:0; max-width:80ch; }

/* Ereignisse im Geraete-Detail. */
.m-defi-blatt-titel{
  margin:18px 0 8px; font-size:14px; font-weight:650; color:var(--text);
}
.m-defi-blatt-ereignisse{ min-width:0; }
.m-defi-blatt-ereignisse > p{ margin:0 0 8px; }

@media (max-width:720px){
  .m-defi-filter{ width:100%; }
  .m-defi-suchfeld{ max-width:none; }
}

/* ─────────────────────────────────────────────────────────────
   MODUL defi — Nachtrag: Kennzahl-Kachel als Sprung in den
   Abschnitt, den sie ZAEHLT, plus der Einstiegs-Hinweis.

   WARUM: „Defis ohne Kontakt 17" fuehrte auf eine Geraeteliste,
   die auf „Alle" stand — gemeldete Zahl und gezeigte Liste waren
   zwei verschiedene Mengen. `ui.kennzahl({ziel})` kann nur ROUTEN,
   deshalb macht das Modul die fertige Kachel nachtraeglich zum
   Knopf (role="button"). Werte deckungsgleich mit
   `.m-sim-kachel-springt`, damit beide Modulseiten sich gleich
   anfuehlen. Optik und Akzent kommen unveraendert von `.kennzahl`.
   ───────────────────────────────────────────────────────────── */
.m-defi-kachel-springt{ cursor:pointer; }
.m-defi-kachel-springt:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-defi-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* Die Zielabschnitte sind per `tabindex="-1"` fokussierbar, damit der Sprung
   Tastatur und Screenreader mitnimmt. Ein Fokusring um einen ganzen Abschnitt
   waere aber Laerm — er zeigt sich ueber seine Karte. */
#m-defi-geraete:focus, #m-defi-ereignisse:focus{ outline:none; }
#m-defi-geraete:focus-visible, #m-defi-ereignisse:focus-visible{ outline:none; }

/* Der Satz „Angesteuert aus Mein Tag: …" ueber den Kacheln. Er erklaert,
   warum die Schalter nicht auf „Alle" stehen — ohne ihn wirkt eine
   vorgefilterte Liste wie ein duenner Datenbestand.
   Der Satz wird nach jedem Schalter- und Suchwechsel NACHGEZOGEN (defi.js
   `einstiegPruefen()`); ohne Einstieg wird der Knoten ausgeblendet, deshalb
   die ausdrueckliche [hidden]-Regel. */
.m-defi-einstieg{ margin:0 0 12px; max-width:80ch; }
.m-defi-einstieg[hidden]{ display:none; }

/* ─────────────────────────────────────────────────────────────
   MODUL fuhrpark — Filterzeile, Einstiegs-Hinweis, springende
   Kennzahl-Kacheln.

   Bauart wie in ids.js / sim.js / video.js: die beiden Schalter
   und die Fahrzeug-Auswahl liegen in EINER umbrechenden Zeile.
   `min-width:0` auf jedem Kind ist Pflicht (Design-Standard) —
   ohne das sprengt die lange Fahrzeugliste die Seite quer.
   ───────────────────────────────────────────────────────────── */
.m-fuhrpark-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:flex-end; margin-bottom:12px; min-width:0;
}
.m-fuhrpark-filter > *{ min-width:0; }

/* Das Auswahlfeld steht in einer Flex-Zeile neben Schaltern, nicht in einer
   Formularspalte: deshalb kein Aussenabstand nach unten und eine eigene
   Breite statt `width:100%` aus `.auswahl`. */
.m-fuhrpark-fahrzeug{ flex:1 1 260px; max-width:360px; margin-bottom:0; }
.m-fuhrpark-fahrzeug > label{ font-size:12px; }

/* Der Satz „Angesteuert aus Mein Tag: …" ueber den Kacheln. Er erklaert,
   warum die Filter nicht auf „Alle" stehen — ohne ihn wirkt eine
   vorgefilterte Liste wie ein duenner Datenbestand. */
.m-fuhrpark-einstieg{ margin:0 0 12px; max-width:80ch; }

/* `ui.kennzahl({ziel})` kann nur ROUTEN. Hier soll der Klick aber innerhalb
   der Seite filtern und springen — deshalb macht das Modul die fertige Kachel
   nachtraeglich zum Knopf (role="button"). Werte deckungsgleich mit
   `.m-sim-kachel-springt` und `.m-defi-kachel-springt`, damit sich alle
   Modulseiten gleich anfuehlen. Optik und Akzent kommen von `.kennzahl`. */
.m-fuhrpark-kachel-springt{ cursor:pointer; }
.m-fuhrpark-kachel-springt:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-fuhrpark-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* Die beiden Zwischenueberschriften. Sie sind zugleich die Sprungziele der
   Kacheln und der „Mein Tag"-Zeilen: `tabindex="-1"` macht sie fokussierbar,
   ohne sie in die Tab-Reihenfolge zu haengen (Muster aus ids.js). Ohne sie
   landete der Sprung auf einer <section> ohne zugaenglichen Namen — der
   Screenreader las dort nur „Bereich". */
.m-fuhrpark-titel{ margin:0 0 10px; }

/* Ein Fokusring um eine Ueberschrift waere Laerm: das Ziel des Sprungs ist
   sichtbar, weil die Seite dorthin scrollt. Deshalb kein Rahmen — die
   Vorlesefunktion bekommt den Namen trotzdem. */
#m-fuhrpark-abfragen:focus, #m-fuhrpark-protokolle:focus{ outline:none; }
#m-fuhrpark-abfragen:focus-visible, #m-fuhrpark-protokolle:focus-visible{ outline:none; }

/* Suchfeld und die beiden Schalter am Handy — dort IMMER untereinander.
   `.schalter` ist `inline-flex`; nebeneinander gesetzt ergaeben zwei Reihen
   zu je halber Breite, beide angeschnitten. Werte deckungsgleich mit
   `.m-testphasen-h-filter`, damit sich die Handy-Fassungen gleich anfuehlen. */
.m-fuhrpark-h-filter{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; min-width:0; margin-bottom:14px;
}
.m-fuhrpark-h-filter > *{ max-width:100%; min-width:0; }
.m-fuhrpark-h-filter .feld{ width:100%; margin-bottom:0; }

/* ═══════════════════════════════════════════════════════════════════════
   Modul „tagesbericht" — Tagesbericht-Prüfung (frontend/module/tagesbericht.js)
   ═══════════════════════════════════════════════════════════════════════ */

/* EINE Filterzeile fuer ALLES, was die Liste steuert — beide Schalter
   (Ansicht, Zustand), die Lauf-Auswahl und das Suchfeld, in dieser Reihenfolge
   und direkt UEBER der Liste. Wie `.m-ids-filter` und `.m-sim-filter`.
   ⚠ Die Schalter duerfen NICHT in den `abschnitt-kopf`: sie stuenden dann
   oberhalb der vier Kennzahl-Kacheln, und beim Umschalten auf „On Break"
   laesen sich die Zahlen des Auftrags-Prueflaufs als Kopfzahlen der
   On-Break-Liste.
   `min-width:0` ueberall, damit lange Kunden- und Technikernamen die Seite
   nicht waagerecht schieben. */
.m-tagesbericht-filter{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  align-items:flex-end; margin-bottom:12px; min-width:0;
}
.m-tagesbericht-filter > *{ min-width:0; }
/* Die beiden Felder tragen unten schon den Abstand der Flex-Zeile — der
   Standard-Abstand von `.feld` wuerde den Schalter daneben verrutschen. */
.m-tagesbericht-filter .feld{ margin-bottom:0; }
/* Die Schalter sind hoeher als eine Feld-Zeile ohne Beschriftung; an der
   Unterkante ausgerichtet sitzen sie mit Feldern auf einer Linie. */
.m-tagesbericht-filter .schalter{ margin-bottom:1px; }
.m-tagesbericht-laufwahl{ flex:1 1 260px; max-width:420px; }
.m-tagesbericht-suchfeld{ flex:1 1 220px; max-width:340px; }

/* Am Handy steht dasselbe untereinander: erst der Absprung in die Alt-App
   (der einzige Weg zu allem Schreibenden — er muss auch bei leerer oder
   gestoerter Liste erreichbar sein), dann das Suchfeld, dann beide Schalter.
   IMMER untereinander, sonst rollen zwei Chip-Reihen nebeneinander und keine
   ist ganz zu sehen. */
.m-tagesbericht-h-filter{
  display:flex; flex-direction:column; gap:10px; margin-bottom:12px; min-width:0;
}
.m-tagesbericht-h-filter > *{ max-width:100%; min-width:0; }
.m-tagesbericht-h-filter .feld{ margin-bottom:0; }
/* Grosse Tippflaeche: der Knopf nimmt die ganze Breite, nicht nur seinen Text. */
.m-tagesbericht-h-filter > .knopf{ width:100%; justify-content:center; }

/* WO-Nummer in der Zahlen-Schrift: gleich breite Ziffern, damit eine Spalte
   voller WO1517xx untereinander lesbar bleibt. Der Auftragstyp steht klein
   daneben, nicht darunter — er ist eine Beischrift, keine zweite Zeile. */
.m-tagesbericht-wo{ display:inline-flex; gap:6px; align-items:baseline; min-width:0; }

/* Kunden-, Techniker- und Befundtexte kommen ungefiltert aus D365 und koennen
   sehr lang sein (Firmierungen, ganze Saetze aus dem Bericht). Sie duerfen
   umbrechen — die Seite darf nie waagerecht scrollen. */
.m-tagesbericht-name{ min-width:0; overflow-wrap:anywhere; }

/* Zustands-Zelle: Plakette oben, Freigabe-Stand als Text darunter. Der
   Unterschied haengt damit nie allein an der Farbe (WCAG 1.4.1). */
.m-tagesbericht-zustand{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:0;
}
.m-tagesbericht-zustand > .klein{ line-height:1.35; }

/* Befunde und offene Maengel als Liste statt als Bandwurm-Satz. Sie stehen in
   einer `dd`-Zelle der Zeilenliste, brauchen also weder Aussenabstand noch
   Aufzaehlungszeichen der Seite. */
.m-tagesbericht-befunde{
  margin:0; padding-left:18px; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.m-tagesbericht-befunde li{ overflow-wrap:anywhere; }

/* Der Detail-Dialog stapelt seine Bloecke mit Luft dazwischen. */
.m-tagesbericht-blatt{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.m-tagesbericht-blatt > *{ min-width:0; }
.m-tagesbericht-block h4{ margin:0 0 6px; }
.m-tagesbericht-block p{ margin:0; max-width:80ch; overflow-wrap:anywhere; }

/* Der Berichtstext des Technikers ist Fliesstext aus `go_comments` und enthaelt
   Zeilenumbrueche, die etwas bedeuten (Stichpunkte, Zwischenzeilen). Sie
   bleiben stehen. */
.m-tagesbericht-bericht{ white-space:pre-wrap; }

/* Der Hinweis auf die Deckelung der Lauf-Auswahl bzw. auf ihren Ausfall. */
.m-tagesbericht-deckel{ margin:12px 0 0; max-width:80ch; }

/* Die Verengung auf EINEN Auftrag (Einstieg aus einer Anker-Kachel). Sie steht
   sichtbar ueber der Liste und traegt den Knopf, der sie aufhebt — eine stumm
   verengte Liste liest sich sonst wie die ganze. Umbricht am Handy, damit der
   Knopf neben einer langen WO-Nummer nicht aus der Zeile faellt.
   Seit Modul-1.3.0 kommt am Handy eine ZWEITE Zeile derselben Bauart dazu: der
   gepinnte Prueflauf mit dem Knopf „Juengsten Prueflauf zeigen". Zwei Zeilen,
   weil es zwei Aussagen sind (welches Objekt · aus welchem Lauf) und jede
   einzeln aufgehoben wird. Der Abstand unten stapelt sie ohne Zusatzregel. */
.m-tagesbericht-verengung{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  align-items:center; margin:0 0 8px; min-width:0;
}
.m-tagesbericht-verengung > span{ min-width:0; overflow-wrap:anywhere; }

/* ─────────────────────────────────────────────────────────────
   MODUL td-tms — „TMS-Bestellungen"
   Praefix .m-td-tms-, wie im Modul-Vertrag vorgeschrieben. Nur, was die
   Bausteine der Schale nicht schon koennen. `min-width:0` ueberall, damit
   lange Firmennamen und Geraetezeilen die Seite nicht waagerecht schieben
   (ARCHITEKTUR §7).
   ───────────────────────────────────────────────────────────── */

/* Die drei Schalter (Status · Zeitraum · Zustaendigkeit) in einer Reihe.
   Sie umbrechen, statt die Seite zu schieben — auf schmalen Fenstern steht
   jeder Schalter in einer eigenen Zeile. */
.m-td-tms-filter{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  min-width:0; margin-bottom:12px;
}
.m-td-tms-filter > *{ min-width:0; }

/* Das Suchfeld steht als eigenes `.feld` UEBER der Schalter-Reihe — mit
   sichtbarem <label> und `.feld-hilfe`, wie in sim.js, ids.js und defi.js.
   In der Schalter-Reihe wuerde ein zweizeiliges Feld die mittig
   ausgerichteten Schalter auseinanderziehen. */
.m-td-tms-suchfeld{ max-width:460px; }

/* Der Satz unter den Kacheln: sie zaehlen ueber die GANZE geladene Liste,
   die Liste darunter folgt den Filtern. Ohne ihn liest jemand beides als
   dieselbe Menge. */
.m-td-tms-kachel-fuss{ margin:12px 0 0; max-width:80ch; }

/* Der Einstiegs-Kasten („Angesteuert aus Mein Tag / der Suche: …" plus, wenn
   die Liste auf einen Firmennamen eingeengt ist, der Satz dazu UND der Knopf,
   der die Einengung aufhebt). Er erklaert, warum die Filter nicht auf Standard
   stehen — ohne ihn wirkt eine vorgefilterte Liste wie ein duenner
   Datenbestand. Wird in BEIDEN Schalen benutzt (mobile.html laedt dieselbe
   Datei): am Handy ist „Mein Tag" der Haupteinstieg, dort ist der Kasten noch
   noetiger als am Schreibtisch.
   Frueher war das ein einzelnes <p>; jetzt ist es ein Behaelter mit bis zu
   drei Kindern, deshalb die Flex-Spalte. `align-items:flex-start` haelt den
   Aufheben-Knopf auf seiner eigenen Breite, statt ihn ueber die ganze Zeile
   zu ziehen. */
.m-td-tms-einstieg{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  margin:0 0 12px; max-width:80ch; min-width:0;
}
.m-td-tms-einstieg > p{ margin:0; }

/* Der dauerhafte Vorbehalt ueber der Handy-Liste: Anlagedatum — und, wenn die
   Sicht rechte-gescopt ist, „nur Ihre eigenen Bestellungen". Am Rechner steht
   derselbe Satz unter den Kacheln (.m-td-tms-kachel-fuss); am Handy gibt es
   keine Kacheln, also braucht er einen eigenen Platz. Er darf NICHT
   verschwinden, wenn die Liste gefuellt ist — genau dann wird er gebraucht. */
.m-td-tms-vorbehalt{ margin:0 0 12px; max-width:80ch; }

/* Die Bestellliste im Anker-Blatt (Rechner: Modal, Handy: Bottom-Sheet).
   Jede Zeile ist ein KNOPF, weil sie das Datenblatt oeffnet — ein <div> mit
   Klick-Ereignis waere fuer Tastatur und Screenreader kein Ziel. */
.m-td-tms-blattliste{
  display:flex; flex-direction:column; gap:8px; min-width:0; margin:8px 0 0;
}
.m-td-tms-blattzeile{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  width:100%; min-width:0; text-align:left;
  padding:10px 12px; border:1px solid var(--kante); border-radius:var(--r-sm);
  background:var(--karte); color:var(--text); font:inherit; cursor:pointer;
  transition:border-color var(--zeit) var(--weich), background var(--zeit) var(--weich);
}
.m-td-tms-blattzeile:hover{ border-color:var(--text-3); background:var(--flaeche); }
.m-td-tms-blattzeile:focus-visible{ outline:2px solid var(--rot-text); outline-offset:2px; }
/* Liegen gebliebene Entwuerfe: die Kante traegt die Warnung ZUSAETZLICH zur
   Plakette, nie statt ihrer (WCAG 1.4.1 — das Wort steht in der Plakette). */
.m-td-tms-blattzeile.ist-alt{ border-color:var(--rubin-kante); background:var(--rubin-tint); }
.m-td-tms-blattzeile-kopf{ font-weight:650; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.m-td-tms-blattzeile-text{ font-size:13px; color:var(--text-2); min-width:0; overflow-wrap:anywhere; }

/* Kennzahl-Kachel als Sprung in den Abschnitt, den sie ZAEHLT. Werte
   deckungsgleich mit `.m-sim-kachel-springt` und `.m-defi-kachel-springt`,
   damit sich alle Modulseiten gleich anfuehlen. Optik und Akzent kommen
   unveraendert von `.kennzahl`. */
.m-td-tms-kachel-springt{ cursor:pointer; }
.m-td-tms-kachel-springt:hover{ border-color:var(--kante); }
.m-td-tms-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text); outline-offset:2px;
}

/* Der Zielabschnitt ist per `tabindex="-1"` fokussierbar, damit der Sprung
   Tastatur und Screenreader mitnimmt. Ein Fokusring um einen ganzen
   Abschnitt waere aber Laerm — er zeigt sich ueber seine Liste. */
#m-td-tms-liste:focus{ outline:none; }
#m-td-tms-liste:focus-visible{ outline:none; }

/* Firmennamen sind lang und enthalten keine Trennstellen („Elektrotechnik
   Musterhausen Verwaltungsgesellschaft mbH"). Ohne `overflow-wrap` schiebt
   ein einziger solcher Name die Tabelle ueber den Bildschirmrand. */
.m-td-tms-name{ min-width:0; overflow-wrap:anywhere; }

/* Zwischenueberschriften im Datenblatt (Bestellung · Kunde · Lieferung ·
   Geraete · Programmierung · Aufschaltung · SIM · WLAN · Bemerkungen). */
.m-td-tms-blatt-titel{
  margin:18px 0 8px; font-size:14px; font-weight:650; color:var(--text);
}
.m-td-tms-blatt-titel:first-child{ margin-top:0; }

/* Der Fusstext des Datenblatts: PDF/DOCX entstehen aus einer zweiten Quelle
   (raw_json). Er gehoert zum Blatt, nicht in eine eigene Karte. */
.m-td-tms-blatt-fuss{ margin:18px 0 0; max-width:80ch; }

/* Der ehrliche Verweis in die Alt-App unter der Liste — Desktop UND Handy.
   Die Flex-Spalte traegt beide Faelle: am Handy laeuft der Knopf voll durch. */
.m-td-tms-fuss{
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  margin-top:16px; min-width:0;
}
.m-td-tms-fuss > p{ margin:0; max-width:80ch; }

/* Status-Zelle der Tabelle: neben der Status-Plakette kann eine zweite
   stehen („seit ueber 14 Tagen liegen"). Sie kennzeichnet genau die Zeilen,
   die „Mein Tag" als liegengeblieben MELDET — ohne sie waere die gemeldete
   Zahl in der Liste nicht abzaehlbar. Umbrechen statt die Spalte sprengen. */
.m-td-tms-plaketten{
  display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0;
}

@media (max-width:720px){
  .m-td-tms-filter{ width:100%; }
  .m-td-tms-filter > *{ width:100%; }
  .m-td-tms-suchfeld{ max-width:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „werkbank" (Lager) — frontend/module/werkbank.js
   Alle Klassen tragen das Präfix .m-werkbank-, damit kein anderes Modul
   beschädigt werden kann. Mehr braucht das Modul nicht; alles Übrige kommt
   aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die beiden segmentierten Schalter (Sicht · fachlicher Filter) nebeneinander,
   am Handy untereinander. Werte deckungsgleich mit .m-ids-filter und
   .m-sim-filter, damit sich die Modulseiten gleich anfühlen.
   min-width:0 überall — sonst zieht ein langer Filtername die Seite breit. */
.m-werkbank-filter-reihe{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-werkbank-filter-reihe > *{ min-width:0; }
.m-werkbank-filter{ min-width:0; }

/* Der Satz über den Kacheln erklärt, warum die Schalter nicht auf „Alles"
   stehen. Ohne ihn wirkt eine vorgefilterte Liste wie ein dünner Bestand. */
.m-werkbank-einstieg{ margin:0 0 12px; max-width:80ch; }

/* Kennungen (Seriennummer, Equipmentnummer, Artikelnummer) stehen in der
   Zahlen-Schrift: gleich breite Ziffern, damit sich Nummern beim Vergleichen
   decken — genau dafür liest ein Lagerist sie. */
.m-werkbank-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* Fußzeilen unter Listen und Blättern: Zählstand, Kürzungshinweis, der
   ehrliche Satz „das läuft in der Lager-App". */
.m-werkbank-fuss{ margin:10px 0 0; max-width:80ch; }
.m-werkbank-alt-satz{ margin:0 0 12px; max-width:80ch; }

/* Das Detail-Blatt stapelt seine Blöcke mit Luft dazwischen. */
.m-werkbank-blatt{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-werkbank-blatt > *{ min-width:0; }
.m-werkbank-block{ min-width:0; }
.m-werkbank-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}

@media (max-width:720px){
  .m-werkbank-filter-reihe{ width:100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MODUL „Mahnwesen" (frontend/module/mahnwesen.js)
   Nur Präfix .m-mahnwesen- — nichts hiervon greift in ein anderes Modul.
   ═══════════════════════════════════════════════════════════════════════ */

/* Zustand der D365-Verbindung: eine Zeile zwischen Kopf und Kacheln, keine
   eigene Kachel. Sie ist Betriebslage, keine Kennzahl. */
.m-mahnwesen-d365{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 14px; min-width:0; max-width:90ch;
}

/* Der sichtbare Einstieg: wer aus „Mein Tag" oder von einer Kachel kommt,
   liest hier, WELCHE Menge vor ihm liegt — und hat EINEN Knopf zurück auf
   alles. Er verschwindet, sobald die Filter nicht mehr zum Einstieg passen
   (`einstiegPruefen()`), deshalb muss `[hidden]` hier ausdrücklich greifen:
   `display:flex` würde die Vorgabe des Browsers sonst überstimmen.
   Bauart wie `.m-anfragen-einstieg`, damit sich die Modulseiten gleich
   anfuehlen. */
.m-mahnwesen-einstieg{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; justify-content:space-between;
  min-width:0; margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--blau-kante);
  border-left:4px solid var(--blau);
  border-radius:var(--r-md);
  background:var(--blau-tint);
  color:var(--text);
}
.m-mahnwesen-einstieg[hidden]{ display:none; }
.m-mahnwesen-einstieg > p{ margin:0; min-width:0; max-width:78ch; }
.m-mahnwesen-einstieg > .knopf{ flex:0 0 auto; }

/* Die beiden Filter liegen nebeneinander und brechen am schmalen Rand um.
   `min-width:0` überall, damit die Seite nie waagerecht scrollt. */
.m-mahnwesen-filter{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:0 0 12px; min-width:0;
}
.m-mahnwesen-filter > *{ min-width:0; }
.m-mahnwesen-schalter-platz{ min-width:0; }

/* Der Stufenfilter wird ausgeblendet, wo er nichts bewirken kann (Eingang,
   Bereit, Bezahlt). `[hidden]` sicherheitshalber ausdrücklich — ein Elternteil
   mit `display:flex` würde die Vorgabe des Browsers sonst überstimmen. */
.m-mahnwesen-stufe{ min-width:0; }
.m-mahnwesen-stufe[hidden]{ display:none; }

/* Kennungen (Vertrags- und Rechnungsnummer) in der Zahlen-Schrift: gleich
   breite Ziffern, damit sich Nummern beim Vergleichen untereinander decken —
   genau dafür liest sie jemand. */
.m-mahnwesen-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* In einer Zustandszelle können zwei Plaketten stehen („Versendet" +
   „Nicht im Drive"). Sie brechen um statt die Spalte zu sprengen. */
.m-mahnwesen-zustand{
  display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; min-width:0;
}

/* Das Detailblatt stapelt seine Blöcke mit Luft dazwischen — am Desktop im
   Modal, am Handy im Bottom-Sheet. */
.m-mahnwesen-blatt{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.m-mahnwesen-blatt > *{ min-width:0; }
.m-mahnwesen-block{ min-width:0; }
.m-mahnwesen-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}

/* Ehrliche Sätze unter Listen und Blättern: was hier NICHT passiert und wo es
   stattdessen passiert. Auf Lesebreite begrenzt. */
.m-mahnwesen-hinweis{ margin:0; max-width:80ch; }

/* Drei der vier Kennzahl-Kacheln sind Filter-Knoepfe: sie setzen den
   Zustands-Schalter und springen auf die Liste. Bauart wie
   `.m-sim-kachel-springt` / `.m-defi-kachel-springt`, damit sich die
   Modulseiten gleich anfuehlen. Optik und Akzent kommen unveraendert von
   `.kennzahl` — der Knopf-Charakter zeigt sich ueber Zeiger und Fokusring,
   nicht ueber eine zweite Farbe. */
/* Zaehler an den Laschen des Zustands-Schalters (wie die Badges in der
   Navigation der Alt-App). Eigene Klasse statt `.lasche-zahl` der Schale,
   weil die HANDY-Schale ihren Schalter aus `.h-chip` baut und die Regel
   `.schalter-lasche .lasche-zahl` dort nicht greifen wuerde — die Zahl klebte
   dann ohne Abstand am Wort. Eine Klasse, beide Oberflaechen. */
.m-mahnwesen-zaehler{
  margin-left:6px; font-size:11px; font-weight:700;
  color:var(--text-3,#6B6E75); font-variant-numeric:tabular-nums;
}
.schalter-lasche.ist-aktiv .m-mahnwesen-zaehler,
[role="radio"][aria-checked="true"] .m-mahnwesen-zaehler{ color:var(--rot-text,#D81020); }

.m-mahnwesen-kachel-springt{ cursor:pointer; }
.m-mahnwesen-kachel-springt:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-mahnwesen-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* Die Kacheln springen seit 1.1.0 auf einen EINSTIEG (`#/modul/mahnwesen/…`)
   statt nur den Schalter umzulegen — Fokus und Rollposition uebernimmt dann
   die Schale beim Zeichnen der Route (app.js → zeichne()). Der Abschnitt
   braucht dafuer weder `tabindex` noch einen eigenen Fokusring. */

@media (max-width:720px){
  .m-mahnwesen-filter{ width:100%; }
  .m-mahnwesen-filter > *{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „wirtschaft" (Wirtschaftlichkeit) — frontend/module/wirtschaft.js
   Alle Klassen tragen das Präfix .m-wirtschaft-, damit kein anderes Modul
   beschädigt werden kann. Mehr braucht das Modul nicht; alles Übrige kommt
   aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Suchfeld und die beiden segmentierten Schalter („Sicht" · „Rechenbasis")
   nebeneinander, am Handy untereinander. Werte deckungsgleich mit
   .m-werkbank-filter-reihe, damit sich die Modulseiten gleich anfühlen.
   min-width:0 überall — sonst zieht ein langer Filtername die Seite breit. */
.m-wirtschaft-filter-reihe{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:flex-end; min-width:0; margin-bottom:14px;
}
.m-wirtschaft-filter-reihe > *{ min-width:0; }
.m-wirtschaft-filter-reihe .feld{ margin-bottom:0; }
.m-wirtschaft-suchfeld{ flex:1 1 240px; max-width:360px; }

/* Der Satz über den Kacheln sagt, WAS gerade gerechnet wird (Schätzung oder
   echte Einsätze). Ohne ihn liest jemand eine IST-Zahl als Schätzung — und
   genau dieser Unterschied ist der Zweck des ganzen Werkzeugs. */
.m-wirtschaft-einstieg{ margin:0 0 12px; max-width:80ch; }

/* Fußzeilen: Zählstand, Kürzungshinweis, der ehrliche Verweis in die Alt-App. */
.m-wirtschaft-fuss{ margin:10px 0 0; max-width:80ch; }
.m-wirtschaft-fuss > p{ margin:0 0 10px; }

/* Vertrags- und Auftragsnummern in der Zahlen-Schrift: gleich breite Ziffern,
   damit sich Nummern beim Vergleichen decken — genau dafür liest man sie. */
.m-wirtschaft-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

/* Das Detail-Blatt stapelt seine Blöcke mit Luft dazwischen. */
.m-wirtschaft-blatt{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-wirtschaft-blatt > *{ min-width:0; }
.m-wirtschaft-block{ min-width:0; }
.m-wirtschaft-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}

/* Datenlücken als Liste — kurz, aufzählbar, ohne Farbcodierung allein. */
.m-wirtschaft-luecken{ margin:0; padding-left:20px; }
.m-wirtschaft-luecken li{ overflow-wrap:anywhere; }

/* Eine automatisch bestimmte Kategorie mit niedriger Konfidenz sagt das
   selbst — als WORT „(unsicher)", nicht nur über die Farbe (WCAG 1.4.1). */
.m-wirtschaft-unsicher{ color:var(--amber); }

/* Ein Satz, der etwas EINORDNET, ohne zu werten (z. B. „Einsatzzahl nicht
   geliefert"). Auf Lesebreite begrenzt, keine Ampel, keine Farbe. */
.m-wirtschaft-hinweis{ margin:0; max-width:80ch; }

/* Der Verweis in die Alt-App trägt einen ganzen Satz als Beschriftung
   („Im Wirtschaftlichkeitstool öffnen (Streamlit-Startseite)") — ehrlich, aber
   lang. `.knopf` steht auf `white-space:nowrap`; im Bottom-Sheet läuft der
   Knopf über die volle Breite (`.blatt-aktionen .knopf{width:100%}`) und
   schöbe den Text sonst über den Bildschirmrand hinaus, samt der Seite. Also
   umbrechen und linksbündig setzen — wie bei `.m-doku-auswahl .knopf`. */
.m-wirtschaft-altapp{
  min-width:0; max-width:100%;
  white-space:normal; overflow-wrap:anywhere;
  text-align:left; justify-content:flex-start; line-height:1.35;
}

/* Ausfallkarte „Schnittstelle noch nicht gebaut": der Weg in die Alt-App steht
   UNTER der Karte und mittig — sonst klebte der einzige Ausweg linksbündig
   unter einer zentrierten Meldung. Kein „Nochmal versuchen" daneben: der Pfad
   entsteht durch Wiederholen nicht (Begründung in zustandZuAnzeige()). */
.m-wirtschaft-ausfall{ min-width:0; }
.m-wirtschaft-ausfall .knopf-reihe{ justify-content:center; margin-top:12px; }

/* Am Handy: Suchfeld und Schalter voll breit untereinander. */
.m-wirtschaft-h-filter{
  display:flex; flex-direction:column; gap:10px; min-width:0; margin-bottom:14px;
}
.m-wirtschaft-h-filter > *{ max-width:100%; min-width:0; }
.m-wirtschaft-h-filter .feld{ width:100%; margin-bottom:0; }

@media (max-width:720px){
  .m-wirtschaft-filter-reihe{ width:100%; }
  .m-wirtschaft-filter-reihe > *{ width:100%; }
  .m-wirtschaft-suchfeld{ max-width:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „rechnungen" (Eingangsrechnungen) — frontend/module/rechnungen.js
   Alle Klassen tragen das Präfix .m-rechnungen-, damit kein anderes Modul
   beschädigt werden kann. Mehr braucht das Modul nicht; alles Übrige kommt
   aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filterreihe der Modulseite: der segmentierte Schalter. Werte
   deckungsgleich mit .m-ids-filter, .m-sim-filter und .m-werkbank-filter-reihe,
   damit sich alle Modulseiten gleich anfühlen.
   min-width:0 überall — sonst zieht ein langer Lieferantenname die Seite
   waagerecht auf, statt umzubrechen. */
.m-rechnungen-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0;
}
.m-rechnungen-filter > *{ min-width:0; }

/* Der Suchbereich ist ein `.feld` wie bei ids.js und sim.js — sichtbares
   <label>, Eingabefeld, Feldhilfe, eine eigene Zeile über den Filtern. Er war
   früher ein <form> in der Filterreihe; das brach als einziges Modul im Haus
   mit dem Muster und ließ den zugänglichen Namen unsichtbar. Nur die Breite
   wird hier begrenzt — alles Übrige kommt aus `.feld`. */
.m-rechnungen-suchfeld{ max-width:420px; min-width:0; }
.m-rechnungen-suchfeld .eingabe{ min-height:34px; padding:7px 12px; width:100%; }

/* Der Satz über den Kacheln sagt, WAS dieses Modul führt — Eingangs-, nicht
   Ausgangsrechnungen. Ohne ihn liest jemand „Rechnungen" auf einer
   Kundenseite als Forderung gegen den Kunden. */
.m-rechnungen-einstieg{ margin:0 0 12px; max-width:80ch; }

/* Fußzeilen unter Listen und Blättern: Zählstand, Kürzungshinweis, der
   ehrliche Satz zum Kostenstellen-Zuschnitt. */
.m-rechnungen-fuss{ margin:10px 0 0; max-width:80ch; }

/* Der Währungsvorbehalt an den beiden Geldsummen der Fach-API
   (`stats.sum_pending`, `alerts.overdueTotal`). Eigene Zeile mit KLEINEREM
   Abstand nach oben als `.m-rechnungen-fuss`, damit sie sichtbar zum
   Kachelblock gehört und nicht als dritter, unabhängiger Absatz gelesen
   wird — sie ist ein Vorbehalt zu den Zahlen darüber, kein neues Thema.
   Keine eigene Farbe: `.leise .klein` der Schale trägt das schon, und eine
   Handfarbe wäre ein Verstoß gegen den Webdesign-Standard. */
.m-rechnungen-vorbehalt{ margin:6px 0 0; max-width:80ch; }
/* Statuszeile über der Liste (role="status", aria-live="polite"). Sie behält
   ihre Höhe, ob sie „Belege werden geladen …" oder den Zählstand trägt —
   sonst springt die Liste bei jedem Tastendruck der Suche. */
.m-rechnungen-listenstatus{ margin:0 0 8px; min-height:16px; max-width:80ch; }
.m-rechnungen-alt-satz{ margin:4px 0 0; max-width:80ch; }

/* Der Hinweistext der gewählten Sicht ÜBER der Handy-Liste. Am Rechner steht
   derselbe Satz im Kopf der Karte (`ui.karte({hinweis})`); am Handy gibt es
   keine Karte um die Liste, und der Text fehlte deshalb ganz — samt der
   Auskunft, dass „Offen" Spesen, Archiv und erkannte Duplikate ausblendet.
   Er steht deshalb als eigener Absatz da, mit Abstand NACH UNTEN zur Liste
   statt nach oben wie `.m-rechnungen-fuss`. Leer bleibt er ohne Höhe: eine
   Sicht ohne Hinweis soll keine Lücke reißen. */
.m-rechnungen-hinweis{ margin:0 0 10px; max-width:80ch; }
.m-rechnungen-hinweis:empty{ display:none; }

/* Beleg- und Rechnungsnummern stehen in der Zahlen-Schrift: gleich breite
   Ziffern, damit sich Nummern beim Vergleichen decken — genau dafür liest
   ein Buchhalter sie. */
.m-rechnungen-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* Mehrere Hinweis-Plaketten in einer Zelle (Mahnung, Spese, Duplikat,
   Archiv). Umbrechen statt die Spalte sprengen. */
.m-rechnungen-plaketten{
  display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0;
}

/* Das Detailblatt stapelt seine Blöcke mit Luft dazwischen. */
.m-rechnungen-blatt{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-rechnungen-blatt > *{ min-width:0; }
.m-rechnungen-block{ min-width:0; }
.m-rechnungen-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}

@media (max-width:720px){
  .m-rechnungen-filter{ width:100%; }
  .m-rechnungen-filter > *{ width:100%; }
  .m-rechnungen-suchfeld{ max-width:none; }
}


/* ─────────────────────────────────────────────────────────────
   MODUL „Controlling" — frontend/module/controlling.js
   Nur Präfix .m-controlling-. Keine Tokens, keine Farben von Hand:
   alles über die Marken aus Abschnitt 1.
   ───────────────────────────────────────────────────────────── */

/* Der Stand des Spiegels steht ÜBER den Kacheln, nicht darunter: eine
   Kennzahl ohne Datierung liest sich wie „jetzt". Er darf umbrechen und
   nie die Seite breiter machen. */
.m-controlling-stand{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 14px; max-width:88ch; min-width:0; line-height:1.45;
}
.m-controlling-stand:empty{ display:none; }

/* Hinweise unter den Kacheln (ungeprüfte Belege, fehlende Aufteilung,
   gesperrte Einkaufspreise). Fester Knoten — siehe Modulkommentar. */
.m-controlling-anhang{ margin:12px 0 0; max-width:88ch; min-width:0; line-height:1.5; }
.m-controlling-anhang:empty{ display:none; }

/* Der Sicht-Schalter. `min-width:0` auf den Kindern, sonst schiebt der
   Schalter die Seite bei schmalen Fenstern nach rechts. */
.m-controlling-filter{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  margin:2px 0 18px; min-width:0;
}
.m-controlling-filter > *{ min-width:0; }

/* Am Handy rollen die Sichten als Chips — die Reihe darf scrollen,
   die Seite nicht. */
.m-controlling-h-filter{ margin:2px 0 14px; min-width:0; }
.m-controlling-h-filter > *{ max-width:100%; min-width:0; }

/* Der Ausweg in die Alt-App am Handy: volle Breite, große Tippfläche —
   er steht unter der Liste und darf nicht wie ein Randhinweis wirken. */
.m-controlling-h-alt{ margin:18px 0 12px; min-width:0; }
.m-controlling-h-alt > *{ width:100%; min-width:0; min-height:44px; }

/* Fußzeile unter einer Liste: Herkunftsnotiz, ungeprüfte Belege. */
.m-controlling-fuss{ margin:10px 0 0; max-width:88ch; min-width:0; line-height:1.5; }

/* DER EINSTIEG über der Liste (WP32): „diese Liste ist gefiltert, und zwar
   so — hier ist der Weg zurück". Er muss AUFFALLEN, ohne wie ein Fehler
   auszusehen: eine gefilterte Liste, die wie die ganze aussieht, ist der
   Fehler, gegen den es ihn gibt. Farben ausschließlich über die Marken aus
   Abschnitt 1 — die linke Kante trägt dieselbe Rolle wie in
   `.m-anfragen-einstieg`, damit derselbe Zustand auf jeder Modulseite
   gleich aussieht. Der Zustand steht zusätzlich im TEXT (WCAG 1.4.1);
   die Kante allein wäre in Graustufen unsichtbar. */
.m-controlling-einstieg{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; justify-content:space-between;
  min-width:0; margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--blau-kante);
  border-left:4px solid var(--blau);
  border-radius:var(--r-md);
  background:var(--blau-tint);
  color:var(--text);
}
.m-controlling-einstieg[hidden]{ display:none; }
.m-controlling-einstieg > p{ margin:0; min-width:0; max-width:78ch; line-height:1.5; }
.m-controlling-einstieg > .knopf{ flex:0 0 auto; }

/* Kennungen (Artikel-, Beleg-, Vertrags-, Kundennummer) in der
   Zahlen-Schrift: gleich breite Ziffern, damit sich Nummern beim
   Vergleichen untereinander decken — genau dafür liest sie jemand. */
.m-controlling-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

/* Artikelbezeichnungen sind lang und enthalten keine Leerzeichen an den
   nützlichen Stellen. Sie dürfen umbrechen, statt die Tabelle zu sprengen. */
.m-controlling-name{ min-width:0; overflow-wrap:anywhere; }

/* Beitrags-Zeile: Satz plus Plakette. Die Plakette trägt den Status als
   TEXT — die Farbe allein wäre ein Verstoß gegen WCAG 1.4.1. */
.m-controlling-zeile{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0;
}

/* Das Detail-Blatt stapelt seine Blöcke mit Luft dazwischen. */
.m-controlling-blatt{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-controlling-blatt > *{ min-width:0; }
.m-controlling-block{ min-width:0; }
.m-controlling-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}

/* „Was im Cockpit bleibt" — der ehrliche Satz über die Grenze von Stufe 1. */
.m-controlling-alt-satz{ margin:0 0 12px; max-width:80ch; }
.m-controlling-alt-liste{
  margin:0 0 12px; padding-left:20px; max-width:80ch; min-width:0;
}
.m-controlling-alt-liste li{ margin-bottom:8px; line-height:1.55; }

/* Die Gründe der Margen-Ampel kommen wörtlich aus der Fach-API. */
.m-controlling-gruende{
  margin:0; padding-left:20px; max-width:80ch; min-width:0;
}
.m-controlling-gruende li{ margin-bottom:6px; line-height:1.5; }

/* Technikerbericht: fremder Fließtext, in eingelassener Fläche und mit
   erhaltenen Umbrüchen — er ist ein Zitat, keine Aufzählung. */
.m-controlling-freitext{
  margin:0; padding:10px 12px; min-width:0;
  background:var(--flaeche); border-radius:var(--r-md);
  white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55;
}

@media (max-width:720px){
  .m-controlling-filter{ width:100%; }
  .m-controlling-filter > *{ width:100%; }
  /* Am Handy untereinander: der Knopf „Filter aufheben" braucht eine
     Tippfläche über die volle Breite, nicht einen Rest neben dem Satz. */
  .m-controlling-einstieg{ flex-direction:column; align-items:stretch; }
  .m-controlling-einstieg > .knopf{ width:100%; min-height:44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Modul „fuhrpark-bp" — Fuhrpark BioProtect (frontend/module/fuhrpark-bp.js)

   Eigener Praefix, obwohl der ALMAS-Zwilling `.m-fuhrpark-*` schon fuehrt:
   `.m-fuhrpark-filter` und `.m-fuhrpark-bp-filter` sind zwei verschiedene
   Klassen (CSS vergleicht Klassennamen exakt, nicht als Praefix). Die Werte
   sind absichtlich deckungsgleich mit denen des Zwillings — beide Module
   zeigen dieselbe Art Arbeit, und ein Mandant darf sich nicht anders anfuehlen
   als der andere. Geteilt wird trotzdem nichts: ein Modul, das die Klassen des
   Nachbarn mitbenutzt, aendert sie beim naechsten Umbau mit.
   ═══════════════════════════════════════════════════════════════════════ */

/* EINE umbrechende Zeile fuer beide Schalter und die Fahrzeug-Auswahl.
   `min-width:0` auf jedem Kind ist Pflicht (Design-Standard) — ohne das
   sprengt die lange Fahrzeugliste die Seite quer. */
.m-fuhrpark-bp-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:flex-end; margin-bottom:12px; min-width:0;
}
.m-fuhrpark-bp-filter > *{ min-width:0; }

/* Das Auswahlfeld steht in einer Flex-Zeile neben Schaltern, nicht in einer
   Formularspalte: deshalb kein Aussenabstand nach unten und eine eigene
   Breite statt `width:100%` aus `.auswahl`. */
.m-fuhrpark-bp-fahrzeug{ flex:1 1 260px; max-width:360px; margin-bottom:0; }
.m-fuhrpark-bp-fahrzeug > label{ font-size:12px; }

/* Der Satz „Angesteuert aus Mein Tag: …" ueber den Kacheln. Er erklaert,
   warum die Filter nicht auf „Alle" stehen — ohne ihn wirkt eine
   vorgefilterte Liste wie ein duenner Datenbestand. */
.m-fuhrpark-bp-einstieg{ margin:0 0 12px; max-width:80ch; }

/* `ui.kennzahl({ziel})` kann nur ROUTEN. Hier soll der Klick aber innerhalb
   der Seite filtern und springen — deshalb macht das Modul die fertige Kachel
   nachtraeglich zum Knopf (role="button"). Werte deckungsgleich mit
   `.m-fuhrpark-kachel-springt`; Optik und Akzent kommen von `.kennzahl`. */
.m-fuhrpark-bp-kachel-springt{ cursor:pointer; }
.m-fuhrpark-bp-kachel-springt:hover{ border-color:var(--rahmen-1,#E2E3E8); }
.m-fuhrpark-bp-kachel-springt:focus-visible{
  outline:2px solid var(--rot-text,#D81020); outline-offset:2px;
}

/* Die Zwischenueberschriften. Sie sind zugleich die Sprungziele der Kacheln
   und der „Mein Tag"-Zeilen: `tabindex="-1"` macht sie fokussierbar, ohne sie
   in die Tab-Reihenfolge zu haengen. Ohne sie landete der Sprung auf einer
   <section> ohne zugaenglichen Namen — der Screenreader laese dort nur
   „Bereich". */
.m-fuhrpark-bp-titel{ margin:0 0 10px; }

/* Ein Fokusring um eine Ueberschrift waere Laerm: das Ziel des Sprungs ist
   sichtbar, weil die Seite dorthin scrollt. Deshalb kein Rahmen — die
   Vorlesefunktion bekommt den Namen trotzdem. */
#m-fuhrpark-bp-abfragen:focus,   #m-fuhrpark-bp-protokolle:focus,
#m-fuhrpark-bp-h-abfragen:focus{ outline:none; }
#m-fuhrpark-bp-abfragen:focus-visible,   #m-fuhrpark-bp-protokolle:focus-visible,
#m-fuhrpark-bp-h-abfragen:focus-visible{ outline:none; }

/* Fussnote UNTER der Anforderungs-Tabelle. Sie traegt die zwei Auskuenfte, die
   vorher als immer gleicher Text in JEDER Zeile standen (Fahrzeug „wird beim
   Ausfuellen gesetzt", roher Status): einmal gesagt statt n-mal wiederholt.
   Ein Rahmen waere zu viel — sie ist eine Anmerkung, keine Warnung. */
.m-fuhrpark-bp-tabellen-fuss{ margin:8px 0 0; max-width:80ch; }

/* Der Knopf, der eine verengte Sicht wieder weitet („Alle offenen anzeigen").
   Am Handy steht er unter den Karten, nicht in einem Kartenfuss — deshalb
   etwas Luft nach oben. */
.m-fuhrpark-bp-h-weiten{ margin-top:12px; }

/* Zwischenueberschrift IM Protokoll-Modal (Fahrzeugdaten · Bewertung ·
   Schaden · Bemerkungen · Anhaenge). Kleiner als eine Abschnitts-H2, mit Luft
   nach oben, damit die Zeilenlisten darunter nicht ineinanderlaufen. */
.m-fuhrpark-bp-block-titel{
  margin:20px 0 8px; font-size:14px; font-weight:650; color:var(--text);
}
.m-fuhrpark-bp-block-titel:first-child{ margin-top:0; }

/* Bemerkungen aus dem Formular: fremder Fliesstext, in eingelassener Flaeche
   und mit erhaltenen Umbruechen — er ist ein Zitat, keine Aufzaehlung.
   `overflow-wrap:anywhere`, weil dort auch eine ungetrennte Kennung oder ein
   langer Link stehen kann; ohne das schoebe ein einziges Wort das Modal
   quer. Werte wie `.m-controlling-freitext`. */
.m-fuhrpark-bp-freitext{
  margin:0; padding:10px 12px; min-width:0;
  background:var(--flaeche); border-radius:var(--r-md);
  white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55;
}

/* ── Handy ─────────────────────────────────────────────────────────────
   Die zwei Meldewege ganz oben. Sie stehen VOR der Liste, weil am Handy
   jemand NEBEN dem Fahrzeug steht und melden will, nicht blaettern.
   Etwas mehr Abstand nach unten als zwischen zwei gewoehnlichen Karten:
   sie sind ein Werkzeugkasten, kein Listenanfang. */
.m-fuhrpark-bp-h-melden{ margin-bottom:18px; }

/* Suchfeld und die beiden Schalter am Handy — dort IMMER untereinander.
   `.schalter` ist `inline-flex`; nebeneinander gesetzt ergaeben zwei Reihen
   zu je halber Breite, beide angeschnitten. Werte deckungsgleich mit
   `.m-fuhrpark-h-filter`. */
.m-fuhrpark-bp-h-filter{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; min-width:0; margin-bottom:14px;
}
.m-fuhrpark-bp-h-filter > *{ max-width:100%; min-width:0; }
.m-fuhrpark-bp-h-filter .feld{ width:100%; margin-bottom:0; }

/* Die ZWEI Abfrage-Gruppen der Handy-Fassung („Offen …" / „Links verfallen …").
   Vorher standen offene und tote Anforderungen in EINER unbeschrifteten
   Kartenliste; wer aus „Mein Tag" auf eine verengte Sicht kam, konnte die
   gemeldete Zahl dort nicht wiederfinden. Jede Gruppe traegt jetzt eine eigene
   Ueberschrift, eine Zaehlzeile („3 von 47 verfallenen") und ihren eigenen
   Leerzustand. Der Abstand trennt sie deutlich genug, dass niemand die Karten
   der zweiten Gruppe der ersten Zahl zuschlaegt. */
.m-fuhrpark-bp-h-gruppe{ margin:0 0 20px; min-width:0; }
.m-fuhrpark-bp-h-gruppe:last-child{ margin-bottom:0; }

/* Kleiner als die Abschnitts-H2 darueber („Zustandsabfragen") — sie ist eine
   Unterteilung, keine zweite Ueberschrift. Werte wie `.m-fuhrpark-bp-block-titel`. */
.m-fuhrpark-bp-h-gruppe-titel{
  margin:0 0 2px; font-size:14px; font-weight:650; color:var(--text);
}

/* Die Zaehlzeile steht IMMER, auch bei null Karten — sie ist die einzige
   Stelle, an der eine verengte Teilmenge ihre Grundmenge nennt. */
.m-fuhrpark-bp-h-gruppe-zahl{ margin:0 0 8px; }

/* Der ehrliche Hinweis auf die kaputte Erinnerungsfunktion der Alt-App, unter
   den Karten der verfallenen Links. Eine Anmerkung, keine Warnung — deshalb
   kein Rahmen. */
.m-fuhrpark-bp-h-gruppe-fuss{ margin:10px 0 0; }

/* Der Aktualisieren-Weg der Handy-Fassung. Das Modul laedt EINMAL und filtert
   danach ohne Netz — ohne diesen Knopf bekaeme am Handy niemand neue Daten
   (das Ziehen der Schale verlaesst die Modulseite, statt sie neu zu laden).
   Rechtsbuendig ueber der ersten Ueberschrift, damit er die beiden grossen
   Meldewege darueber nicht optisch anficht. */
.m-fuhrpark-bp-h-aktualisieren{
  display:flex; justify-content:flex-end; margin:4px 0 10px;
}

/* Am schmalen Bildschirm bekommt die Filterzeile der Rechner-Fassung
   dieselbe Behandlung: alles volle Breite, nichts angeschnitten. */
@media (max-width:720px){
  .m-fuhrpark-bp-filter{ width:100%; }
  .m-fuhrpark-bp-filter > *{ width:100%; }
  .m-fuhrpark-bp-fahrzeug{ max-width:none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MODUL „auth" (Benutzer & Rechte / SSO) — frontend/module/auth.js
   Alle Klassen tragen das Präfix .m-auth-, damit kein anderes Modul
   beschädigt werden kann. Mehr braucht das Modul nicht; alles Übrige kommt
   aus den ui.*-Bausteinen der Schale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Werkzeugreihe der Modulseite: zwei segmentierte Schalter. Der Liste-Schalter
   wird EINMAL gebaut und nie ersetzt (sonst verlöre der Fokus beim Umschalten
   seinen Knoten); nur der Zustands-Schalter wird an seiner Stelle getauscht. Werte deckungsgleich mit .m-rechnungen-filter und
   .m-controlling-filter, damit sich alle Modulseiten gleich anfühlen.
   min-width:0 überall — sonst zieht eine lange E-Mail-Adresse die Seite
   waagerecht auf, statt umzubrechen. */
.m-auth-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin:0 0 10px;
}
.m-auth-filter > *{ min-width:0; }

/* Der Suchbereich ist ein `.feld` wie bei ids.js, sim.js und rechnungen.js —
   sichtbares <label>, Eingabefeld, Feldhilfe (per aria-describedby am Feld),
   eine eigene Zeile ÜBER den Schaltern. Er steht bewusst ausserhalb der
   Schalterreihe: dort wird beim Objektwechsel ein Schalter ausgetauscht, und
   ein Austausch über ein Feld, in dem gerade jemand tippt, nähme ihm den
   Fokus mitten im Wort.
   Nur die Breite wird hier begrenzt — alles Übrige kommt aus `.feld`. */
.m-auth-suchfeld{ max-width:420px; min-width:0; }
.m-auth-suchfeld .eingabe{ min-height:34px; padding:7px 12px; width:100%; }

/* Der Block „Neu angelegt“ ueber der Liste — die aus „Mein Tag“ gemeldete
   Arbeit. Er ist verborgen, solange nichts neu ist; die eigene [hidden]-Regel
   steht hier ausdruecklich, damit ihn keine spaetere display-Regel wieder
   sichtbar macht (ein leerer Rahmen ueber der Liste waere Fuellmaterial). */
.m-auth-neu[hidden], .m-auth-h-neu[hidden]{ display:none; }
.m-auth-h-neu{ margin:2px 0 16px; min-width:0; }
.m-auth-h-neu > *{ min-width:0; }
.m-auth-h-neu .m-auth-hinweis{ margin:0 0 10px; }

/* Statuszeile über der Liste (role="status" + aria-live="polite"). Sie behält ihre Höhe, ob
   sie leer ist oder den Zählstand trägt — sonst springt die Liste bei jedem
   Tastendruck der Suche. */
.m-auth-listenstatus{ margin:0 0 8px; min-height:16px; max-width:88ch; }

/* E-Mail-Adressen, Benutzernamen und Slugs stehen in der Zahlen-Schrift:
   gleich breite Zeichen, damit sich zwei ähnliche Kennungen beim Vergleichen
   decken. Genau dafür liest ein Admin sie — `j.langer@` und `jlanger@` sind
   zwei Menschen, und der Unterschied ist ein einziges Zeichen. */
.m-auth-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere; min-width:0;
}

/* Erklärsätze in Dialogen und unter Listen. Nie breiter als lesbar. */
.m-auth-satz{ margin:10px 0 0; max-width:88ch; min-width:0; line-height:1.55; }
.m-auth-hinweis{ margin:8px 0 0; max-width:88ch; min-width:0; line-height:1.55; }
.m-auth-liste{ margin:0 0 12px; padding-left:20px; max-width:88ch; min-width:0; }
.m-auth-liste li{ margin-bottom:8px; line-height:1.55; }

/* Blöcke im Detail-Dialog stapeln mit Luft dazwischen. */
.m-auth-block{ margin:18px 0 0; min-width:0; }
.m-auth-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}
/* Nachladeplätze im Detail-Dialog. Sie tragen nur Struktur — aber min-width:0,
   damit eine lange E-Mail-Adresse den Dialog nicht waagerecht aufzieht. */
.m-auth-rechte, .m-auth-nutzer{ min-width:0; }
.m-auth-rechte > *, .m-auth-nutzer > *{ min-width:0; }

/* Die Freigabeliste eines Benutzers: je Zeile der App-Name und der Zustand.
   ⚠ HIER STEHT KEINE FARBE UND KEIN EIGENES ABZEICHEN. Bis Fassung 1.0.0
     des Moduls definierte `.m-auth-pille` ein eigenes Status-Badge samt
     eigener Semantikfarbe (grün für „freigegeben"). Im selben Dialog stand
     das dann neben `ui.plakette('Aktiv','frei')` — zwei Vokabulare für
     dieselbe Art Aussage. Den Zustand trägt jetzt `ui.plakette()`, wie
     überall sonst im System; diese Regeln machen nur noch Layout.
   Der Unterschied „freigegeben / nicht freigegeben" hängt weiterhin NICHT
   an der Farbe (WCAG 1.4.1) — er steht als Wort in der Plakette. */
.m-auth-rechte-liste{
  list-style:none; margin:10px 0 0; padding:0; min-width:0;
  display:flex; flex-direction:column; gap:6px;
}
.m-auth-rechte-zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  justify-content:space-between; min-width:0;
  padding:6px 0; border-bottom:1px solid var(--kante);
}
.m-auth-rechte-zeile:last-child{ border-bottom:0; }
.m-auth-rechte-name{
  min-width:0; overflow-wrap:anywhere; font-size:13px; color:var(--text);
}

/* ── Handy ────────────────────────────────────────────────────
   Grosse Tippflächen, volle Breite, nichts fest bemessen. */
.m-auth-h-suchfeld{ margin:2px 0 10px; min-width:0; }
.m-auth-h-suchfeld .eingabe{ width:100%; min-height:44px; }
.m-auth-h-filter{ margin:0 0 12px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.m-auth-h-filter > *{ max-width:100%; min-width:0; }
.m-auth-h-alt{ margin:18px 0 12px; min-width:0; }
.m-auth-h-alt > *{ width:100%; min-width:0; min-height:44px; }

@media (max-width:720px){
  .m-auth-filter{ width:100%; }
  .m-auth-filter > *{ width:100%; }
  .m-auth-suchfeld{ max-width:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL „anfragen" — Anfragen-Cockpit (frontend/module/anfragen.js)

   Nur Layout und Lesbarkeit. Farben, Zustände und Plaketten kommen
   ausschließlich aus den ui.*-Bausteinen der Schale — dieses Modul
   definiert KEINE eigenen Statusfarben, sonst gäbe es zwei Vokabulare
   für dieselbe Aussage.

   Alle Klassen tragen das Präfix .m-anfragen-, damit kein anderes Modul
   davon berührt wird.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filterzeile: drei segmentierte Schalter (Verarbeitung · Typ · Pipeline).
   Werte deckungsgleich mit .m-ids-filter und .m-sim-filter, damit zwei
   Modulseiten nebeneinander dieselbe Zeile ergeben. `flex-wrap` ist hier
   nicht Kosmetik: drei Schalter passen auf einem 13-Zoll-Bildschirm nicht
   in eine Zeile, und die Seite darf NIE waagerecht scrollen. */
.m-anfragen-filter{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-bottom:18px;
}
.m-anfragen-filter > *{ min-width:0; max-width:100%; }

/* Der Einstiegs-Hinweis (WP32, Befund 4): „Sie sehen NICHT alle Anfragen,
   sondern genau die Menge, aus der die angeklickte Zahl stammt" — plus ein
   Klick zurück auf alles. Er steht ÜBER dem Suchfeld, weil er den Rahmen
   setzt, in dem alles darunter gilt; wer ihn übersieht, zählt eine gefilterte
   Liste gegen eine ungefilterte Zahl. Deshalb liegt er auf getönter Fläche
   mit farbiger Kante — auffällig genug zum Bemerken, ruhig genug, um nicht
   wie eine Störung zu wirken (dafür sind rote Karten da). */
.m-anfragen-einstieg{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; justify-content:space-between;
  min-width:0; margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--blau-kante);
  border-left:4px solid var(--blau);
  border-radius:var(--r-md);
  background:var(--blau-tint);
  color:var(--text);
}
.m-anfragen-einstieg > p{ margin:0; min-width:0; max-width:78ch; }
.m-anfragen-einstieg > .knopf{ flex:0 0 auto; }

/* Fuß unter der Liste: „Weitere laden" und der Hinweis auf die harte
   Grenze der Fach-API. */
.m-anfragen-fuss{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; min-width:0; margin-top:14px;
}
.m-anfragen-fuss > p{ margin:0; max-width:78ch; }

/* „Weitere laden" während des Nachladens. Gesperrt wird über `aria-disabled`,
   nicht über `disabled` — sonst verlöre der gerade gedrückte Knopf den Fokus
   und ein Tastaturnutzer landete mitten im Ladevorgang wieder am Seitenanfang.
   Die Optik muss das also selbst zeigen. Gleiche Werte wie .m-aufschaltungen-wartet. */
.m-anfragen-wartet{ opacity:0.62; cursor:progress; }

/* „Mehr laden" auf der Handy-Modulseite: volle Breite, damit der Daumen ihn
   nicht suchen muss. Die 44-px-Mindesthöhe bringt .knopf-gross selbst mit. */
.m-anfragen-handy-mehr{ display:flex; margin-top:12px; min-width:0; }
.m-anfragen-handy-mehr > .knopf{ width:100%; }

/* Kennungen und Zahlen (Eingangszeit, Score) in der Zahlen-Schrift:
   gleich breite Ziffern, damit sich Werte beim Vergleichen untereinander
   decken — genau dafür liest sie jemand. */
.m-anfragen-kennung{
  font-family:var(--schrift-zahl);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

/* Firmennamen sind lang und tragen keine Leerzeichen an den nützlichen
   Stellen („2RAD-BUDE.DE Inh. Jan Reimann"). Sie dürfen umbrechen,
   statt die Tabelle zu sprengen. */
.m-anfragen-name{ min-width:0; overflow-wrap:anywhere; }

/* Eine Zeile aus Plakette plus Text. Die Plakette trägt die Aussage als
   WORT — die Farbe allein wäre ein Verstoß gegen WCAG 1.4.1. */
.m-anfragen-zeile{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0;
}

/* Die Plakettenreihe im Kopf des Detail-Blatts: Typ, Verarbeitung,
   Pipeline, Score, Seriosität. */
.m-anfragen-marken{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  min-width:0; margin:0 0 14px;
}

/* Das Detail-Blatt stapelt seine Blöcke mit Luft dazwischen. */
.m-anfragen-blatt,
.m-anfragen-teile{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-anfragen-blatt > *,
.m-anfragen-teile > *{ min-width:0; }

.m-anfragen-block{ min-width:0; }
.m-anfragen-block-titel{
  margin:0 0 8px; font-size:14px; font-weight:650; color:var(--text);
}
.m-anfragen-block > p.klein{ margin:0 0 10px; max-width:80ch; }

/* Knopfreihe unter dem Detail-Blatt. Am Handy stapeln sich die Knöpfe
   und werden ganz breit — 44 px Mindesthöhe kommt aus .knopf selbst. */
.m-anfragen-blatt-fuss{
  display:flex; flex-wrap:wrap; gap:10px; min-width:0;
}

/* Der Mailtext des Interessenten ist FREMDER Fließtext: eingelassene
   Fläche, erhaltene Umbrüche, umbrechbar an jeder Stelle. Er ist ein
   Zitat, keine Aufzählung — und er wird als TEXT gesetzt, nie als HTML. */
.m-anfragen-freitext{
  margin:10px 0 0; padding:10px 12px; min-width:0;
  background:var(--flaeche); border-radius:var(--r-md);
  white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55;
}

/* „Was im Anfragen-Cockpit bleibt" — der ehrliche Satz über die Grenze
   von Stufe 1, plus die Aufzählung dessen, was dort liegt. */
.m-anfragen-alt-satz{ margin:0 0 10px; max-width:80ch; }
.m-anfragen-alt-liste{
  margin:0; padding-left:20px; max-width:80ch; min-width:0;
}
.m-anfragen-alt-liste li{ margin-bottom:8px; line-height:1.55; }

@media (max-width:720px){
  /* Volle Breite statt gedrängter Reste: die Schalter rollen dann als
     Chips in ihrer eigenen Zeile, und die Seite scrollt weiterhin nicht
     waagerecht. */
  .m-anfragen-filter{ width:100%; }
  .m-anfragen-filter > *{ width:100%; }
  .m-anfragen-fuss > *{ width:100%; }
  .m-anfragen-blatt-fuss > *{ width:100%; }
  /* Der Einstiegs-Hinweis bricht auf zwei Zeilen um; der Knopf bekommt die
     volle Breite, damit er am Daumen liegt und nicht am Rand klebt. */
  .m-anfragen-einstieg{ flex-direction:column; align-items:stretch; }
  .m-anfragen-einstieg > .knopf{ width:100%; }
}