/* ============================================================
   VORSCHAU „neue Optik" (U1, 01.10.2026) in der Formensprache v5
   „einheitlich wie die Einstellungen" (U2, Auftrag Eric, 02.10.2026).

   Wird NUR geladen, wenn die Vorschau aktiv ist (`body.ui-v3`, base.html);
   Schalter aus = diese Datei wird nicht einmal angefordert. Alles hier
   überschreibt Regeln aus app.css über DENSELBEN Klassen — kein Aufbau,
   kein Text, keine Bedienung ändert sich.

   Drei Geltungsbereiche, und sie überschneiden sich nicht:
   * INHALT = main, dialog und die beiden Seitenpanels (role="dialog")
     samt Loki: die v5-Regeln (graue Fläche, weisse Gruppen, Zeilen,
     30-px-Bedienelemente, Rot nur wo Prod rot ist).
   * KOPFZEILE: Mac-Symbolleiste; ihre Knöpfe (Glocke, Benutzer) bleiben U1.
   * SEITENLEISTE: EXAKT Prod (U1c, Block am Ende) — keine Regel davor
     reicht hinein, weil jede einen der beiden anderen Bereiche nennt.

   Spezifität statt !important: jede Regel beginnt mit `body.ui-v3` und
   dem Bereich und gewinnt so über app.css (dort steht !important nur im
   reduced-motion-Block). Gemessen wird das im Browser
   (tests/u2_probe.py, tests/test_u2_formensprache.py).
   ============================================================ */

/* ---------- Schriften, LOKAL ----------
   IBM Plex Sans: nur noch die Menütexte der Seitenleiste (U1c).
   Inter (SIL OFL, static/fonts/inter/OFL.txt, @fontsource/inter 5.3.0):
   Inhalt, Kopfzeile, Dialoge. Keine Abfrage an Google Fonts. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Token ----------
   v5 unter eigenem Präfix; die Haus-Token (gleiche Namen wie app.css
   :root) zeigen darauf, damit jede app.css-Regel, die sie liest, von
   selbst die v5-Werte bekommt. Nebentext und Zähler: #6E6E73 (5,07:1
   auf Weiss, 4,66:1 auf #F5F5F7). #8E8E93 (--v5-ter, 3,26:1) NUR für
   Symbole und Chevrons, nie für Text. Auf den grauen Füllungen (Chips,
   Felder, Schienen) hält #6E6E73 die 4,5:1 nicht — dort --v5-sec-fuellung. */
/* ---------- U3 C1: fliessende Grundgrösse ----------
   Die Wurzel wächst mit dem Fenster: 14 px bei 1366, rund 15 px bei 1920,
   16 px ab 2560 (Vorgabe Eric, 03.10.2026). Alles in v3.css rechnet in
   REFERENZPIXELN — `--rp` ist 1/14 rem, `calc(26 * var(--rp))` heisst
   „26 px bei 1366, mehr auf grossen Fenstern". Browser-Zoom und
   Windows-Skalierung wirken weiter, weil die Kette am rem hängt.
   Ausgenommen: Haarlinien (<= 1 px) und die Seitenleiste (Prod-Pixel,
   Block am Ende — sie skaliert NICHT mit). */
html:has(> body.ui-v3) { font-size: clamp(14px, calc(0.18vw + 11.5px), 16px); }

body.ui-v3 {
  --rp: calc(1rem / 14);
  --v5-bg:      #F5F5F7;
  --v5-ink:     #1D1D1F;
  --v5-sec:     #6E6E73;
  --v5-sec-fuellung: #636366;   /* Nebentext AUF grauer Füllung: 4,73:1 auf #E4E4E9 (#6E6E73 dort nur 4,0) */
  --v5-ter:     #8E8E93;
  --v5-fill:    rgba(118, 118, 128, .12);
  --v5-fill2:   rgba(118, 118, 128, .20);
  --v5-seg:     #E4E4E9;
  --v5-sep:     rgba(60, 60, 67, .13);
  --v5-zeile:   rgba(60, 60, 67, .10);
  --v5-kopflinie: rgba(60, 60, 67, .16);
  --v5-hair:    0 0 0 .5px rgba(0, 0, 0, .09);
  --v5-hebt:    0 0 0 .5px rgba(0, 0, 0, .1), 0 calc(12 * var(--rp)) calc(32 * var(--rp)) rgba(0, 0, 0, .16);
  --v5-ring:    0 0 0 calc(3 * var(--rp)) rgba(200, 32, 47, .25);
  --v5-acc:     #C8202F;
  --v5-acc-hover: #A81A27;
  --v5-alarm:   #D70015;
  --v5-warn:    #B25000;
  --v5-kopf-hoehe: calc(60 * var(--rp));
  --v5-schrift: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;

  --hintergrund:      var(--v5-bg);
  --flaeche:          #FFFFFF;
  --flaeche-2:        #EFEFF1;
  --seitenleiste:     #FFFFFF;
  --linie:            var(--v5-sep);
  --linie-leise:      var(--v5-zeile);
  --text:             var(--v5-ink);
  --text-2:           var(--v5-sec);
  --text-3:           var(--v5-sec);
  --icon-grund:       #2E3036;
  --akzent:           var(--v5-acc);
  --akzent-hover:     var(--v5-acc-hover);
  --akzent-flaeche:   #FDEEF0;
  --warnung:          #9A6700;
  --warnung-flaeche:  #FFF8EC;
  --fehler:           #C0392B;
  --fehler-flaeche:   #FDF2F0;
  --fehler-text:      #B0281C;
  --ok:               #1E7F37;
  --ok-flaeche:       #F0F9F2;
  --aktiv-flaeche:    #E4E4E9;
  --rand-eingabe:     transparent;
  --schrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --groesse-xs: calc(13 * var(--rp));
  --groesse-s:  calc(14 * var(--rp));
  --groesse-m:  calc(14 * var(--rp));
  --groesse-l:  calc(20 * var(--rp));
  --groesse-xl: calc(26 * var(--rp));
  --radius:        calc(10 * var(--rp));
  --radius-mittel: calc(10 * var(--rp));
  --radius-gross:  calc(10 * var(--rp));
  --schatten-ruhe:  var(--v5-hair);
  --schatten-hover: 0 0 0 .5px rgba(0, 0, 0, .1), 0 calc(6 * var(--rp)) calc(16 * var(--rp)) rgba(0, 0, 0, .08);
  --schatten-hebt:  var(--v5-hebt);
  --hover-flaeche: var(--flaeche-2);
  --rolle-label-farbe: #4A4E57;
  background: var(--v5-bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: calc(14 * var(--rp));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Schrift im Inhalt, in der Kopfzeile, in Dialogen ----------
   `--schrift` zeigt dort auf den Inter-Stapel, damit auch app.css-Regeln
   mit `var(--schrift)` ihn bekommen. Inter ersetzt die TEXTSCHRIFT.

   ⚠ SCHRIFTEN MIT FUNKTION BLEIBEN WIE IN PROD (U2c, Vorgabe Eric
   02.10.2026): Was in Prod Monospace oder Calibri trägt, behält es —
   die Ausnahmen im `inherit` darunter lassen app.css bzw. die
   Browser-Vorgabe wirken, statt deren Stapel hier ein zweites Mal
   hinzuschreiben:
     Monospace (app.css): .mb-material, .mb-zitat, .zr-text textarea
       (Positionstext, Spalten stehen untereinander), .av-platzhalter-knopf,
       .av-text-feld, .kalk-antwort-text, .kalk-vorlage-form textarea
     Monospace (Browser-Vorgabe): code, pre, samp, kbd (ausser dem
       v3-Tastenhinweis, den es in Prod nicht gibt)
     Calibri (app.css): .av-vorschau-text, .av-signatur-pre — die
       Vorschau zeigt, wie die Mail in Outlook aussieht
     Markenschriften (app.css): .wortmarke/.odin-marke (Orbitron),
       .ms-button (Segoe UI, Microsoft-Anmeldeknopf)
   Wächter: tests/u2_probe.py, e) — dieselbe berechnete Familie wie alt. */
body.ui-v3 :is(main, .kopfzeile, dialog, .seitenpanel-inhalt, .loki-fenster, .einst-raster) {
  --schrift: var(--v5-schrift);
  font-family: var(--v5-schrift);
  letter-spacing: -0.006em;
  color: var(--v5-ink);
}
body.ui-v3 :is(main, .kopfzeile, dialog, .seitenpanel-inhalt, .loki-fenster, .einst-raster) *:where(:not(
    code, pre, samp, kbd:not(.v3-kbd),
    .mb-material, .mb-zitat, .zr-text textarea, .av-platzhalter-knopf, .av-text-feld,
    .kalk-antwort-text, .kalk-vorlage-form textarea,
    .av-vorschau-text, .av-signatur-pre,
    .wortmarke, .odin-marke, .ms-button)) { font-family: inherit; }
body.ui-v3 .app-inhalt, body.ui-v3 main { background: var(--v5-bg); color: var(--v5-ink); }
body.ui-v3 main { padding-block: calc(26 * var(--rp)) calc(36 * var(--rp)); font-size: calc(14 * var(--rp)); }

/* ---------- Kopfzeile: Mac-Symbolleiste ---------- */
.ui-v3 .kopfzeile {
  /* Rechts `max-content`: Logo, Glocke und Benutzer-Knopf brauchen bei 1366 px
     rund 330 px — mit 1fr liefen sie unter das Suchfeld (gemessen an der Probe). */
  min-height: var(--v5-kopf-hoehe);
  height: var(--v5-kopf-hoehe);
  padding: 0 calc(20 * var(--rp));
  gap: calc(16 * var(--rp));
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 245, 247, .8);
  -webkit-backdrop-filter: saturate(180%) blur(calc(20 * var(--rp)));
  backdrop-filter: saturate(180%) blur(calc(20 * var(--rp)));
  border-bottom: .5px solid rgba(0, 0, 0, .1);
  box-shadow: none;
}
.ui-v3 .globalsuche { position: relative; }
.ui-v3 .globalsuche input[type="search"] {
  height: calc(40 * var(--rp)); min-height: calc(40 * var(--rp));
  padding: 0 calc(72 * var(--rp)) 0 calc(14 * var(--rp));
  border: 0;
  border-radius: calc(8 * var(--rp));
  background-color: var(--v5-fill);
  box-shadow: none;
  font-size: var(--groesse-s);
}
.ui-v3 .globalsuche input[type="search"]:focus { background-color: var(--flaeche); box-shadow: var(--v5-ring); outline: none; }
.ui-v3 .kopfzeile :is(.primaer, .knopf.primaer) { border-radius: calc(8 * var(--rp)); font-weight: 600; font-size: calc(13 * var(--rp)); min-height: calc(30 * var(--rp)); padding: calc(5 * var(--rp)) calc(12 * var(--rp)); line-height: calc(20 * var(--rp)); }
.ui-v3 .v3-kbd {
  position: absolute; right: calc(12 * var(--rp)); top: 50%; transform: translateY(-50%);
  font-size: calc(11 * var(--rp));
  border: 0;
  box-shadow: var(--v5-hair);
  border-radius: calc(5 * var(--rp));
  padding: calc(2 * var(--rp)) calc(6 * var(--rp));
  background: var(--flaeche);
  color: var(--v5-sec);
  pointer-events: none;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.ui-v3 .globalsuche .vorschlaege {
  border: 0;
  border-radius: calc(10 * var(--rp));
  box-shadow: var(--v5-hebt);
  padding: calc(8 * var(--rp));
  margin-top: calc(8 * var(--rp));
}
.ui-v3 .vorschlag-gruppe {
  padding: calc(8 * var(--rp)) calc(10 * var(--rp)) calc(4 * var(--rp));
  font-size: calc(12 * var(--rp));
  font-weight: 600;
  color: var(--v5-sec);
}
.ui-v3 .vorschlag ~ .vorschlag-gruppe { border-top: 0; margin-top: calc(4 * var(--rp)); }
.ui-v3 .vorschlag {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(12 * var(--rp));
  text-align: left;
  padding: calc(9 * var(--rp)) calc(10 * var(--rp));
  border-radius: calc(8 * var(--rp));
}
.ui-v3 .vorschlag.gewaehlt, .ui-v3 .vorschlag:hover { background: var(--v5-fill); }
.ui-v3 .vorschlag .vorschlag-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-v3 .vorschlag .meta {
  margin-left: auto; flex: none;
  font-size: calc(12 * var(--rp)); font-weight: 600;
  padding: calc(2 * var(--rp)) calc(8 * var(--rp));
  border-radius: calc(6 * var(--rp));
  background: var(--v5-fill);
  color: var(--v5-sec);
  white-space: nowrap;
}
.ui-v3 .vorschlag.gewaehlt .meta, .ui-v3 .vorschlag:hover .meta { background: var(--flaeche); }
.ui-v3 .kopf-dazu { gap: calc(14 * var(--rp)); }
.ui-v3 .logo-kopf { height: calc(22 * var(--rp)); }
.ui-v3 .glocke {
  width: calc(40 * var(--rp)); height: calc(40 * var(--rp));
  border-radius: calc(8 * var(--rp));
  color: var(--icon-grund);
}
.ui-v3 .glocke:hover { background: var(--v5-fill); }
.ui-v3 .glocke .nav-icon { width: calc(19 * var(--rp)); height: calc(19 * var(--rp)); flex-basis: calc(19 * var(--rp)); }
.ui-v3 .glocke .nav-badge-halter { top: calc(3 * var(--rp)); right: 1px; }
.ui-v3 .glocke .nav-badge { min-width: calc(18 * var(--rp)); height: calc(18 * var(--rp)); padding: 0 calc(5 * var(--rp)); font-size: calc(10 * var(--rp)); display: inline-flex; align-items: center; justify-content: center; }
.ui-v3 .benutzer-menue summary {
  height: calc(40 * var(--rp));
  padding: 0 calc(10 * var(--rp)) 0 calc(4 * var(--rp));
  gap: calc(8 * var(--rp));
  border-radius: calc(20 * var(--rp));
  border: 0;
  box-shadow: var(--v5-hair);
  background: var(--flaeche);
  color: var(--text);
  font-weight: 500;
}
.ui-v3 .benutzer-menue summary:hover { background: var(--v5-fill); }
.ui-v3 .avatar { background: var(--akzent-flaeche); color: var(--akzent-hover); font-weight: 650; }
.ui-v3 .benutzer-menue .avatar-klein { width: calc(30 * var(--rp)); height: calc(30 * var(--rp)); flex-basis: calc(30 * var(--rp)); font-size: calc(13 * var(--rp)); }
.ui-v3 .v3-pfeil { width: calc(14 * var(--rp)); height: calc(14 * var(--rp)); color: var(--v5-ter); }
.ui-v3 .benutzer-menue .menue-liste {
  width: calc(290 * var(--rp));
  border: 0;
  border-radius: calc(10 * var(--rp));
  box-shadow: var(--v5-hebt);
  padding: calc(8 * var(--rp));
  gap: calc(2 * var(--rp));
}
.ui-v3 .v3-menue-kopf {
  display: flex; align-items: center; gap: calc(10 * var(--rp));
  padding: calc(8 * var(--rp)) calc(10 * var(--rp)) calc(12 * var(--rp));
  border-bottom: 1px solid var(--v5-zeile);
  margin-bottom: calc(4 * var(--rp));
}
.ui-v3 .v3-menue-kopf .avatar { width: calc(36 * var(--rp)); height: calc(36 * var(--rp)); flex: 0 0 calc(36 * var(--rp)); font-size: calc(14 * var(--rp)); }
.ui-v3 .v3-menue-name { display: flex; flex-direction: column; min-width: 0; }
.ui-v3 .v3-menue-name strong { font-weight: 600; }
.ui-v3 .v3-menue-name span { font-size: var(--groesse-xs); color: var(--v5-sec); }
.ui-v3 .menue-liste a, .ui-v3 .menue-liste .abmelden-knopf {
  display: flex; align-items: center; gap: calc(12 * var(--rp));
  height: calc(36 * var(--rp));
  padding: 0 calc(10 * var(--rp));
  border-radius: calc(6 * var(--rp));
  font-size: calc(13 * var(--rp));
  color: var(--text);
}
/* „Abmelden" ist ein Submit-Formular (N1) — im Menü sieht es aus wie die Links daneben. */
.ui-v3 .menue-liste .abmelden-knopf, .ui-v3 .menue-liste button[type="submit"].abmelden-knopf {
  background: transparent; border: 0; box-shadow: none; color: var(--text); font-weight: 400; width: 100%; justify-content: flex-start; min-height: 0;
}
.ui-v3 .menue-liste a:hover, .ui-v3 .menue-liste .abmelden-knopf:hover { background: var(--v5-fill); text-decoration: none; }
.ui-v3 .menue-liste .v3-kbd { position: static; transform: none; margin-left: auto; }
.ui-v3 .menue-liste .nav-icon { width: calc(17 * var(--rp)); height: calc(17 * var(--rp)); flex: 0 0 calc(17 * var(--rp)); color: var(--icon-grund); }

/* ============================================================
   INHALT (main, dialog, Seitenpanels, Loki)
   ============================================================ */

/* ---------- Überschriften, Seitenkopf ---------- */
body.ui-v3 main h1 { font-size: calc(26 * var(--rp)); font-weight: 700; letter-spacing: -0.02em; color: var(--v5-ink); margin: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) h2 { font-size: calc(20 * var(--rp)); font-weight: 650; letter-spacing: -0.01em; color: var(--v5-ink); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) h3 { font-size: calc(14 * var(--rp)); font-weight: 650; color: var(--v5-ink); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.seitenkopf, .seite-kopf, .listenkopf) { border: 0; background: transparent; box-shadow: none; margin-bottom: calc(18 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .seitenkopf { align-items: baseline; gap: calc(14 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.seitenkopf .hinweis, .seitenkopf .meta, .seitenkopf .dazu, .seite-kopf p, .board-hinweis),
body.ui-v3 main > p { font-size: calc(13 * var(--rp)); color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.hinweis, .meta, .optional) { color: var(--v5-sec); }
/* Verweise im Seitenkopf (So fangen wir an, Team, Abwesenheit, So geht's):
   rote Textknöpfe, Fläche erst beim Zeigen. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .seitenkopf :is(a.knopf, summary.knopf):not(.primaer) { background-color: transparent; color: var(--v5-acc); white-space: nowrap; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .seitenkopf :is(a.knopf, summary.knopf):not(.primaer):hover { background-color: var(--v5-fill); }
/* Mein Tag (der einzige Seitenkopf vor .vt-zahlen): die drei Verweise in
   EINER Zeile, rechtsbündig, 4 px Abstand (U2c). */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .seitenkopf:has(+ .vt-zahlen) > .dazu {
  display: inline-flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: calc(4 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .seitenkopf:has(+ .vt-zahlen) > .dazu > :is(a, details > summary) { white-space: nowrap; }

/* ---------- Abschnitte: Titel grau ÜBER der weissen Gruppe ----------
   Eine .kasten mit eigenem h2/h3 ist selbst unsichtbar; ihr Titel steht
   über der Gruppe, alle übrigen direkten Kinder SIND die Gruppe. Ohne
   :has() (Firefox < 121) bleibt die .kasten eine weisse Gruppe als Ganzes. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 calc(26 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) > :is(h2, h3) {
  font-size: calc(13 * var(--rp)); font-weight: 600; letter-spacing: 0; color: var(--v5-sec); text-transform: none;
  margin: 0 0 calc(6 * var(--rp)); padding: 0 calc(16 * var(--rp)); border: 0; background: transparent;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) > :is(h2, h3) * { color: var(--v5-sec); font-size: calc(13 * var(--rp)); font-weight: 500; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) > :is(h2, h3):not(:first-child) { margin-top: calc(18 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) > :is(p, span.hinweis, div.meta, label.meta) { font-size: calc(12 * var(--rp)); color: var(--v5-sec); padding: 0 calc(16 * var(--rp)); margin: calc(4 * var(--rp)) 0 calc(6 * var(--rp)); }
/* Abschnitt mit Untergruppen (Auswertung): das h2 ist der Abschnittstitel,
   die h3 sind die grauen Gruppenbeschriftungen. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h3) > h2 { font-size: calc(17 * var(--rp)); font-weight: 650; color: var(--v5-ink); letter-spacing: -0.01em; padding: 0 calc(4 * var(--rp)); margin-bottom: calc(2 * var(--rp)); }

/* Die weisse Gruppe — überall dieselbe. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:has(> h2, > h3) > :not(h2, h3, p, span, div.meta, label, dialog, script),
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:not(:has(> h2, > h3)),
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .tabelle-umschlag,
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table.vk-liste,
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel,
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) section.zr-kasten {
  background: var(--flaeche); border: 0; border-radius: calc(10 * var(--rp)); box-shadow: var(--v5-hair);
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:not(:has(> h2, > h3)) { padding: calc(14 * var(--rp)) calc(16 * var(--rp)); margin-bottom: calc(22 * var(--rp)); }
/* Keine Karte in der Karte: eine Tabelle IN einer Gruppe trägt keine zweite. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.kasten, .kachel, .karte, .zr-kasten, .tabelle-umschlag) .tabelle-umschlag { background: transparent; box-shadow: none; border-radius: 0; }
/* „Liegt bei uns": die Spalte Netto muss per Scroll erreichbar bleiben. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .tabelle-umschlag { overflow-x: auto; }

/* ---------- Listen als Zeilen (Mein Tag u. a.) ---------- */
/* ⚠ U3c (Befund Eric, 03.10.2026): Diese Regel galt bis dahin für JEDE
   Liste in einem Kasten und setzte display: block — damit zerfiel der
   Begleitschein (.bs-zeile ist in app.css flex) in drei Zeilen je Schritt.
   Jetzt nur noch Listen OHNE eigene Bauteil-Klasse und die Listen von
   „Mein Tag" (namentlich), und sie setzt NIE display. Bauteile mit eigenem
   Layout behalten es — Wächter j (tests/u3_probe.py) vergleicht display
   je Element mit alt. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten :is(ul:not([class]), ul.vt-zeitleiste) { list-style: none; margin: 0; padding: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten :is(ul:not([class]), ul.vt-zeitleiste) > li:not([class]) { min-height: calc(44 * var(--rp)); padding: calc(11 * var(--rp)) calc(16 * var(--rp)); margin: 0; border: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten :is(ul:not([class]), ul.vt-zeitleiste) > li:not([class]) + li:not([class]) { box-shadow: inset 0 .5px 0 var(--v5-sep); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten :is(ul:not([class]), ul.vt-zeitleiste) > li:not([class]) a:not(.knopf) { color: var(--v5-ink); font-weight: 600; text-decoration: none; }

/* ---------- Tabellen ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table { background: transparent; border: 0; border-collapse: separate; border-spacing: 0; box-shadow: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) th {
  background: transparent; color: var(--v5-sec); font-size: calc(12 * var(--rp)); font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: calc(9 * var(--rp)) calc(12 * var(--rp)); border: 0; border-bottom: 1px solid var(--v5-kopflinie); box-shadow: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) td {
  font-size: calc(13 * var(--rp)); padding: calc(10 * var(--rp)) calc(12 * var(--rp)); border: 0; border-bottom: 1px solid var(--v5-zeile); box-shadow: none;
  background: transparent; vertical-align: middle; font-variant-numeric: tabular-nums;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tr > :first-child { padding-left: calc(16 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tr > :last-child { padding-right: calc(16 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tr:last-child td { border-bottom: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) th.rechts { font-variant-numeric: tabular-nums; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tbody tr:hover td { background: #F7F7F9; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tr.vk-rot, body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) tr.vk-rot > td { background: transparent; border-left-color: transparent; box-shadow: none; }
/* Links in Tabellen schwarz; erste Spalte und Zeilenlink halbfett. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table a { color: var(--v5-ink); text-decoration: none; font-weight: 400; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table :is(a.zeilenlink, td:first-child a) { font-weight: 600; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table a:hover { text-decoration: underline; }

/* ---------- Bedienelemente: 30 px, grau gefüllt, ohne Rahmen ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :where(
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"], [type="range"], [type="color"]),
    select, textarea) {
  background-color: var(--v5-fill); border: 0; border-radius: calc(7 * var(--rp)); box-shadow: none;
  color: var(--v5-ink); font-size: calc(13 * var(--rp)); min-height: calc(30 * var(--rp)); padding: calc(5 * var(--rp)) calc(12 * var(--rp)); line-height: calc(20 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) select { padding-right: calc(30 * var(--rp)); background-position: right calc(9 * var(--rp)) center; background-size: calc(12 * var(--rp)) auto; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) textarea { line-height: 1.45; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :where(input, select, textarea):focus {
  outline: none; box-shadow: var(--v5-ring); background-color: var(--flaeche);
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--v5-acc); width: calc(16 * var(--rp)); height: calc(16 * var(--rp)); min-height: 0;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :where(button:not(.menue-eintrag, .vt-spalte-knopf, .vorschlag), a.knopf, summary.knopf, .mehrfach-knopf, .kundenfilter-knopf, .bs-beleg-waehlen, .status-menue > summary) {
  background-color: var(--v5-fill); color: var(--v5-ink); border: 0; border-radius: calc(8 * var(--rp)); box-shadow: none;
  font-size: calc(13 * var(--rp)); font-weight: 500; min-height: calc(30 * var(--rp)); padding: calc(5 * var(--rp)) calc(12 * var(--rp)); line-height: calc(20 * var(--rp)); text-decoration: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :where(button:not(.menue-eintrag, .vt-spalte-knopf, .vorschlag), a.knopf, summary.knopf, .mehrfach-knopf, .kundenfilter-knopf, .bs-beleg-waehlen, .status-menue > summary):hover { background-color: var(--v5-fill2); }
/* Rot bleibt genau, was in Prod rot ist (app.css): .primaer und
   Absendeknöpfe — ausser denen, die app.css selbst entfärbt (.leise,
   .gefahr, Menüeinträge, „Auftrag löschen" bewusst schwarz, .winzig, die
   Kachel-Kreuze, die Text-Knöpfe der Kalkulation) und den Segmenten der
   Umschalter. Gemessen: tests/u2_probe.py, Wächter a. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.primaer, button[type="submit"]):not(.leise, .gefahr, .vf-chip, .menue-eintrag, .loeschen-schwarz, .winzig, .bs-kachel-x, .kalk-link, .kalk-vorschlag-knopf, .kalk-btn:not(.kalk-btn-primaer), :is(.vf-gruppe, .vt-reiter, .zr-reiter, .queue-umschalter) > *) {
  background-color: var(--v5-acc); color: #FFFFFF; font-weight: 600;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.primaer, button[type="submit"]):not(.leise, .gefahr, .vf-chip, .menue-eintrag, .loeschen-schwarz, .winzig, .bs-kachel-x, .kalk-link, .kalk-vorschlag-knopf, .kalk-btn:not(.kalk-btn-primaer), :is(.vf-gruppe, .vt-reiter, .zr-reiter, .queue-umschalter) > *):hover {
  background-color: var(--v5-acc-hover);
}
/* Zerstörend (Löschen, „Sensibel – Inhalt löschen"): rote Schrift auf
   grau, nie rote Fläche; in Tabellenzeilen ohne Fläche, grau beim Zeigen. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(button, a, summary).gefahr { background-color: var(--v5-fill); color: var(--v5-alarm); font-weight: 600; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) td :is(button, a, summary).gefahr { background-color: transparent; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) td :is(button, a, summary).gefahr:hover { background-color: var(--v5-fill); }
/* Kleine Pfeilknöpfe */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vt-mail-pfeil { min-height: calc(24 * var(--rp)); min-width: calc(24 * var(--rp)); padding: 0 calc(6 * var(--rp)); border-radius: calc(6 * var(--rp)); }

/* Auswahl in Tabellenzeilen wie ein Einblendmenü der Einstellungen:
   ohne Fläche, grau erst beim Zeigen. Zuständig breit genug für
   „nicht zugewiesen". */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) td :where(select, input:not([type="checkbox"], [type="radio"])) {
  background-color: transparent; border: 0; box-shadow: none; border-radius: calc(6 * var(--rp)); min-height: calc(26 * var(--rp)); padding: 0 calc(22 * var(--rp)) 0 calc(8 * var(--rp)); color: var(--v5-ink);
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) td :where(select, input:not([type="checkbox"], [type="radio"])):hover { background-color: var(--v5-fill); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) select.zustaendig-waehler { min-width: calc(112 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vk-bemerkung { background-color: transparent; border: 0; border-radius: calc(6 * var(--rp)); box-shadow: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vk-bemerkung:hover { background-color: var(--v5-fill); }

/* ---------- Umschalter: graue Schiene, aktiver Teil weiss ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.vf-gruppe, nav.vt-reiter) {
  display: inline-flex; align-items: center; gap: 0; padding: calc(2 * var(--rp)); border: 0; border-radius: calc(9 * var(--rp));
  background-color: var(--v5-fill); box-shadow: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.vf-gruppe, nav.vt-reiter) > :is(a, button) {
  background: transparent; border: 0; box-shadow: none; border-radius: calc(7 * var(--rp)); color: var(--v5-ink);
  font-size: calc(13 * var(--rp)); font-weight: 500; min-height: calc(26 * var(--rp)); padding: calc(4 * var(--rp)) calc(14 * var(--rp)); text-decoration: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.vf-gruppe, nav.vt-reiter) > :is(a, button).aktiv {
  background: var(--flaeche); font-weight: 600; box-shadow: 0 1px calc(2 * var(--rp)) rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}
/* Zuschnittrechner-Reiter und „Meine Vorgänge / Nicht zugewiesen": im
   selben Behälter liegen weitere Elemente (Animationen-Haken, Formular) —
   deshalb die Segmente einzeln, nicht der Behälter. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.zr-reiter, .queue-umschalter) { gap: 0; border: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.zr-reiter > button[role="tab"], .queue-umschalter > a.knopf) {
  background: var(--v5-seg); color: var(--v5-ink); border: 0; border-radius: 0; box-shadow: none;
  margin: 0; font-weight: 500; min-height: calc(30 * var(--rp)); padding: 0 calc(14 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.zr-reiter > button[role="tab"]:first-of-type, .queue-umschalter > a.knopf:first-child) { border-radius: calc(9 * var(--rp)) 0 0 calc(9 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.zr-reiter > button[role="tab"]:last-of-type, .queue-umschalter > a.knopf:nth-child(2)) { border-radius: 0 calc(9 * var(--rp)) calc(9 * var(--rp)) 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.zr-reiter > button[role="tab"][aria-selected="true"], .queue-umschalter > a.knopf.primaer) {
  background: var(--flaeche); color: var(--v5-ink); font-weight: 600; border-radius: calc(9 * var(--rp));
  box-shadow: inset 0 0 0 calc(2 * var(--rp)) var(--v5-seg), 0 1px calc(2 * var(--rp)) rgba(0, 0, 0, .10);
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .queue-umschalter > form { margin-left: calc(10 * var(--rp)); }

/* ---------- Marken und Status: eine Form ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.status-pille, .chip, .karte-kundentyp):not(.chip-fehler, .chip-knopf) {
  border: 0; border-radius: calc(6 * var(--rp)); font-size: calc(12 * var(--rp)); font-weight: 600; padding: calc(2 * var(--rp)) calc(8 * var(--rp)); box-shadow: none;
  letter-spacing: 0; vertical-align: middle;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-kundentyp { background: var(--v5-fill); color: #3A3A3C; }
/* .chip-fehler nur als Schrift. Rot (Alarm) überall; auf den Karten trägt
   EILIG Orange (chip-eilig in karte.html, vk-eilig an der Anfrage, der
   einzige .chip-fehler der Lagerkarte). Kleinschreibung mit grossem
   Anfang NUR in den Karten-Chips — dort stehen ausschliesslich
   Zustandswörter; anderswo trägt .chip-fehler auch Namen und Sätze. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .chip.chip-fehler {
  display: inline-block; background: transparent; border: 0; color: var(--v5-alarm);
  letter-spacing: 0; font-size: calc(12 * var(--rp)); font-weight: 600; padding: 0; vertical-align: middle; border-radius: calc(6 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-chips .chip.chip-fehler { text-transform: lowercase; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-chips .chip.chip-fehler::first-letter { text-transform: uppercase; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.karte .chip-eilig, .lagerkarte .karte-chips .chip-fehler, .vk-karte .vk-eilig) { color: var(--v5-warn); }
/* .warnt färbt nur Text, nie eine ganze Karte (die Lagerkarte trägt es). */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.termin-ueber, .warnt:not(.karte), .warnung) { color: var(--v5-alarm); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .chip-knopf { border-radius: calc(999 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .chip-knopf.aktiv { background-color: var(--v5-acc); color: #FFFFFF; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .chip-knopf.aktiv.abgeleitet { background-color: var(--akzent-flaeche); color: var(--v5-acc-hover); }

/* ---------- Kennzahlen ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kacheln { gap: calc(12 * var(--rp)); margin-bottom: calc(18 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--rp));
  flex: 0 1 auto; padding: calc(12 * var(--rp)) calc(16 * var(--rp)); min-width: calc(150 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel:hover { box-shadow: var(--schatten-hover); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel-label { font-size: calc(13 * var(--rp)); font-weight: 500; color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel-wert { font-size: calc(26 * var(--rp)); font-weight: 700; letter-spacing: -0.02em; color: var(--v5-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel-warnt { border: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kachel-warnt .kachel-wert { color: var(--v5-alarm); }
/* Mein Tag: EINE Gruppe mit vier gleich breiten Feldern und feinen Trennern. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vt-zahlen.kasten { display: flex; gap: 0; padding: calc(12 * var(--rp)) 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vt-zahl { flex: 1; padding: 0 calc(16 * var(--rp)); box-shadow: inset -.5px 0 0 var(--v5-sep); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vt-zahl:last-child { box-shadow: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .vt-zahl :is(strong, b, .wert) { font-size: calc(26 * var(--rp)); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Filterleiste ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) form.filterleiste { gap: calc(8 * var(--rp)); border: 0; background: transparent; box-shadow: none; margin-bottom: calc(14 * var(--rp)); }
/* app.css hängt das Suchfeld der Tafel an eine ID — die v5-Werte deshalb hier. */
body.ui-v3 #board-suche {
  min-height: calc(30 * var(--rp));
  padding: calc(5 * var(--rp)) calc(12 * var(--rp)) calc(5 * var(--rp)) calc(32 * var(--rp));
  background-color: var(--v5-fill);
  box-shadow: none;
  font-size: calc(13 * var(--rp));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(10 * var(--rp)) center;
  width: calc(280 * var(--rp));
}
body.ui-v3 #board-suche:focus { background-color: var(--flaeche); box-shadow: var(--v5-ring); }

/* ---------- Board (Übersicht, Anfragen, Lager) ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .board { gap: calc(12 * var(--rp)); padding: calc(4 * var(--rp)) calc(4 * var(--rp)) calc(24 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) section.spalte { background: transparent; padding: 0; border: 0; box-shadow: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .spalte > header { min-height: calc(28 * var(--rp)); padding: calc(4 * var(--rp)) calc(4 * var(--rp)) calc(6 * var(--rp)); gap: calc(8 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.spalte-titel, .spalte > header .spalte-umbenennen > summary) { font-size: calc(13 * var(--rp)); font-weight: 600; color: var(--v5-sec); letter-spacing: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.spalte-zaehler, .lagerspalte-zaehler, section.spalte .anzahl) {
  background: transparent; border: 0; color: var(--v5-sec); font-weight: 500; font-size: calc(13 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .spalten-filter > summary { border-radius: calc(8 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.karte, .lagerkarte, .vk-karte) {
  border: 0; border-radius: calc(10 * var(--rp)); background: var(--flaeche);
  box-shadow: var(--v5-hair), 0 1px calc(2 * var(--rp)) rgba(0, 0, 0, .04);
  padding: calc(12 * var(--rp)) calc(13 * var(--rp)); margin-bottom: calc(7 * var(--rp));
  transition: box-shadow .15s ease;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.karte, .lagerkarte, .vk-karte):hover { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 calc(6 * var(--rp)) calc(16 * var(--rp)) rgba(0, 0, 0, .08); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-nummer { font-size: calc(15 * var(--rp)); font-weight: 650; letter-spacing: -0.01em; color: var(--v5-ink); font-variant-numeric: tabular-nums; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-kunde { font-size: calc(13 * var(--rp)); color: var(--v5-sec); font-weight: 400; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-positionen { font-size: calc(13 * var(--rp)); color: var(--v5-ink); margin-top: calc(4 * var(--rp)); line-height: 1.35; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-positionen-mehr { color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-chips { gap: calc(8 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-fuss { border-top: 0; font-size: calc(12 * var(--rp)); color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-termin { font-size: calc(12 * var(--rp)); font-weight: 500; color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-termin.termin-ueber { color: var(--v5-alarm); font-weight: 650; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .lager-position { box-shadow: inset 0 -.5px 0 var(--v5-sep); border: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .lager-position:last-child { box-shadow: none; }

/* ---------- Auftragsseite ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .panel-abschnitt { border: 0; box-shadow: inset 0 -.5px 0 var(--v5-sep); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .panel-abschnitt:last-child { box-shadow: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .panel-feldname { color: var(--v5-sec); font-size: calc(13 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) li.bs-zeile { min-height: calc(40 * var(--rp)); border: 0; box-shadow: inset 0 -.5px 0 var(--v5-sep); }

/* ---------- Was in main klebt, klebt UNTER der Symbolleiste ----------
   app.css rechnet mit einer Kopfzeile, die mitscrollt („top: 0 genügt",
   Kommentar an .panel-titel). In v5 klebt sie (Regel 14) — ohne den
   Versatz verschwänden die Titelzeile des Auftragspanels, die Kapitel der
   Hilfe und die Kopfleiste der Kalkulation darunter. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .panel-abschnitt.panel-titel { top: var(--v5-kopf-hoehe); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .hilfe-kapitel { top: calc(var(--v5-kopf-hoehe) + calc(24 * var(--rp))); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kalk-kopfleiste { top: var(--v5-kopf-hoehe); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kalk-mit-mail > .kalk-mailpanel.ist-offen { top: calc(var(--v5-kopf-hoehe) + calc(76 * var(--rp))); }
/* Die Titelzeile zieht ihre Fläche per Negativrand bis an die Kastenränder —
   der Rand muss dem v5-Innenabstand der Gruppe (14px 16px) folgen. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kasten:not(:has(> h2, > h3)) > .panel-abschnitt.panel-titel {
  margin: calc(-14 * var(--rp)) calc(-16 * var(--rp)) 0; padding: calc(14 * var(--rp)) calc(16 * var(--rp)) calc(12 * var(--rp)); border-radius: calc(10 * var(--rp)) calc(10 * var(--rp)) 0 0; border-bottom: 1px solid var(--v5-zeile);
}

/* ---------- Zuschnittrechner ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-kasten-kopf { background: transparent; border: 0; border-bottom: 1px solid var(--v5-zeile); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-kasten-kopf h2 { font-size: calc(15 * var(--rp)); font-weight: 600; letter-spacing: -0.01em; color: var(--v5-ink); }
/* Zahl und Einheit sind EIN graues Feld; die Einheit ohne eigene Fläche. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-eingabe { background-color: var(--v5-fill); border: 0; border-radius: calc(7 * var(--rp)); box-shadow: none; overflow: hidden; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-eingabe :is(input, select) { background-color: transparent; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-eingabe .zr-einheit { background: transparent; border: 0; color: var(--v5-sec-fuellung); }

/* ---------- Nebentext auf Füllung, Ruhezustände ----------
   Auf grauer Fläche liest Nebentext das dunklere Grau — als Token im
   Behälter, damit app.css-Regeln mit var(--text-2) es mitnehmen. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.chip, .status-pille, .karte-kundentyp, .mehrfach-knopf, .kundenfilter-knopf, .zr-eingabe, .vf-gruppe, nav.vt-reiter) {
  --text-2: var(--v5-sec-fuellung); --text-3: var(--v5-sec-fuellung); --v5-sec: var(--v5-sec-fuellung);
}
/* Gesperrte Meilensteine und fertige Lagerpositionen: app.css dimmt sie
   mit opacity (2,2–2,7:1, auch in Prod). In v5 grau statt durchscheinend —
   der Zustand bleibt sichtbar (Durchstreichung, Grund-Text), lesbar >= 4,5:1. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .gesperrt label { opacity: 1; color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .gesperrt label :is(.stein-name, .meta, .gesperrt-grund) { color: var(--v5-sec); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .lager-position.fertig { opacity: 1; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .lager-position.fertig, body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .lager-position.fertig * { color: var(--v5-sec); }
/* Einträge im Statusmenü sind Zeilen, keine Knöpfe. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .menue-eintrag { background: transparent; border: 0; border-radius: calc(6 * var(--rp)); font-size: calc(13 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .menue-eintrag:hover { background: var(--v5-fill); }

/* ---------- Leere Zustände, Menüs, Dialoge, Panels ---------- */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .leerzustand { text-align: center; color: var(--v5-sec); padding: calc(32 * var(--rp)) calc(20 * var(--rp)); }
body.ui-v3 :is(.kundenfilter-menue, .status-menue .menue, .spalten-filter .menue, main .vorschlaege) {
  border: 0; border-radius: calc(10 * var(--rp)); box-shadow: var(--v5-hebt);
}
.ui-v3 .haus-dialog { border: 0; border-radius: calc(12 * var(--rp)); box-shadow: var(--v5-hebt); padding: calc(20 * var(--rp)); }
.ui-v3 .haus-dialog::backdrop { background: rgba(0, 0, 0, .25); }
.ui-v3 .toast { border-radius: calc(10 * var(--rp)); font-size: calc(13 * var(--rp)); box-shadow: var(--v5-hebt); }
.ui-v3 .seitenpanel-inhalt { background: var(--v5-bg); border-left: .5px solid rgba(0, 0, 0, .1); }
.ui-v3 .seitenpanel-kopf { border-bottom: .5px solid rgba(0, 0, 0, .1); }
.ui-v3 .seitenpanel-inhalt .seitenpanel-zu { background-color: transparent; color: var(--icon-grund); }
.ui-v3 .loki-fenster { border: 0; border-radius: calc(12 * var(--rp)); box-shadow: var(--v5-hebt); }
.ui-v3 .spiegel-band { font-family: var(--v5-schrift); }
.ui-v3 label:where(:not(.seitenleiste *)),
.ui-v3 .feld > .feldname { font-size: calc(13 * var(--rp)); color: var(--rolle-label-farbe); font-weight: 500; }

/* ---------- Einstellungen (Rahmen statt Seitenleiste/Kopfzeile) ---------- */
.ui-v3 .einst-raster {
  display: grid;
  grid-template-columns: calc(272 * var(--rp)) minmax(0, 1fr);
  grid-template-rows: calc(60 * var(--rp)) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--v5-bg);
}
.ui-v3 .einst-kopf {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: calc(18 * var(--rp));
  height: calc(60 * var(--rp));
  padding: 0 calc(24 * var(--rp));
  background: rgba(245, 245, 247, .8);
  -webkit-backdrop-filter: saturate(180%) blur(calc(20 * var(--rp)));
  backdrop-filter: saturate(180%) blur(calc(20 * var(--rp)));
  border-bottom: .5px solid rgba(0, 0, 0, .1);
}
.ui-v3 .einst-zurueck {
  display: flex; align-items: center; gap: calc(8 * var(--rp));
  height: calc(30 * var(--rp)); padding: 0 calc(12 * var(--rp));
  border-radius: calc(8 * var(--rp));
  color: var(--text);
  font-size: calc(13 * var(--rp));
}
.ui-v3 .einst-zurueck:hover { background: var(--v5-fill); text-decoration: none; }
.ui-v3 .einst-zurueck .nav-icon { width: calc(17 * var(--rp)); height: calc(17 * var(--rp)); flex: 0 0 calc(17 * var(--rp)); }
.ui-v3 .einst-titel { font-size: calc(17 * var(--rp)); font-weight: 650; margin: 0; }
.ui-v3 .einst-suche {
  margin-left: auto;
  display: flex; align-items: center; gap: calc(8 * var(--rp));
  width: calc(340 * var(--rp)); height: calc(30 * var(--rp));
  padding: 0 calc(10 * var(--rp));
  border-radius: calc(8 * var(--rp));
  background: var(--v5-fill);
}
.ui-v3 .einst-suche:focus-within { background: var(--flaeche); box-shadow: var(--v5-ring); }
.ui-v3 .einst-suche .nav-icon { width: calc(15 * var(--rp)); height: calc(15 * var(--rp)); flex: 0 0 calc(15 * var(--rp)); color: var(--v5-ter); }
.ui-v3 .einst-suche input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; box-shadow: none;
  min-height: 0; height: calc(28 * var(--rp)); padding: 0; margin: 0; font-size: calc(13 * var(--rp));
}
.ui-v3 .einst-suche input[type="search"]:focus { box-shadow: none; outline: none; }
.ui-v3 .einst-nav {
  display: flex; flex-direction: column; gap: 1px;
  padding: calc(18 * var(--rp)) calc(12 * var(--rp));
  border-right: .5px solid rgba(0, 0, 0, .1);
  background: var(--seitenleiste);
  position: sticky; top: 0; height: calc(100vh - calc(60 * var(--rp))); overflow-y: auto;
}
.ui-v3 .einst-gruppe { display: flex; flex-direction: column; gap: 1px; }
.ui-v3 .einst-gruppe + .einst-gruppe { margin-top: calc(12 * var(--rp)); }
.ui-v3 .einst-gruppe-titel {
  padding: calc(6 * var(--rp)) calc(12 * var(--rp)) calc(4 * var(--rp));
  font-size: calc(12 * var(--rp)); font-weight: 600;
  color: var(--v5-sec);
}
.ui-v3 .einst-punkt {
  height: calc(32 * var(--rp));
  display: flex; align-items: center;
  padding: 0 calc(12 * var(--rp));
  border-radius: calc(7 * var(--rp));
  color: var(--v5-ink);
  font-size: calc(13 * var(--rp));
}
.ui-v3 .einst-punkt:hover { background: var(--v5-fill); color: var(--text); text-decoration: none; }
.ui-v3 .einst-punkt.einst-aktiv { background: var(--aktiv-flaeche); color: var(--text); font-weight: 600; }
.ui-v3 .einst-stand .kasten { margin: 0; display: flex; flex-direction: column; gap: calc(12 * var(--rp)); }
.ui-v3 .einst-stand h2 { font-size: calc(20 * var(--rp)); }
.ui-v3 .einst-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--rp)); }
.ui-v3 .einst-chip { padding: calc(4 * var(--rp)) calc(10 * var(--rp)); border-radius: calc(6 * var(--rp)); background: var(--v5-fill); font-size: calc(13 * var(--rp)); }
.ui-v3 .einst-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(24 * var(--rp)); align-items: center; padding: calc(12 * var(--rp)) 0; border-bottom: 1px solid var(--v5-zeile); }
.ui-v3 .einst-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-v3 .einst-zeile strong { font-weight: 500; }
.ui-v3 .einst-zeile .meta { display: block; font-size: calc(13 * var(--rp)); color: var(--v5-sec); }
.ui-v3 .einst-pille { font-size: calc(12 * var(--rp)); font-weight: 600; padding: calc(2 * var(--rp)) calc(8 * var(--rp)); border-radius: calc(6 * var(--rp)); background: var(--v5-fill); color: var(--v5-sec); white-space: nowrap; }
.ui-v3 .einst-pille.an { background: var(--ok-flaeche); color: var(--ok); }
.ui-v3 .einst-pille.gesperrt { background: var(--warnung-flaeche); color: var(--warnung); }
/* U3 A5 (Befund Eric, 03.10.2026): Auf „Abwesenheit" war das Formular
   unsichtbar. Es ist dasselbe Formular wie der Aufklapper in „Mein Tag"
   (app.css: position absolute, right 0, top 100 %) — ohne den details-Anker
   landete es ausserhalb des Bildes (gemessen bei 2560 px: x 2165, y 1275).
   Im Einstellungsrahmen steht es im Fluss, volle Inhaltsbreite, als Gruppe. */
.ui-v3 .einst-raster .vt-telefon-form {
  position: static; width: auto; z-index: auto; box-shadow: var(--v5-hair);
}
@media (max-width: 1100px) {
  .ui-v3 .einst-raster { grid-template-columns: calc(220 * var(--rp)) minmax(0, 1fr); }
  .ui-v3 .einst-suche { width: calc(240 * var(--rp)); }
}

/* ============================================================
   U3 TEIL A (Auftrag Eric, 03.10.2026): EINSTELLUNGS-RAHMEN
   Eine Mittelachse für alle 13 Seiten, derselbe Kopf, keine doppelte
   Navigation, Leiste wie die macOS-Systemeinstellungen. Gilt nur unter
   .einst-raster (?rahmen=einstellungen) — ohne Rahmen bleiben die Seiten,
   wie sie sind. Wächter: tests/u3_probe.py (g).
   ============================================================ */
/* A1: Mittelachse. Formular-Spalte clamp(640px, 42vw, 900px), Seiten mit
   Tabelle clamp(900px, 70vw, 1500px) — beide mittig auf derselben Achse. */
body.ui-v3 .einst-raster {
  --einst-breite: clamp(640px, 42vw, 900px);
  --einst-erklaerung: calc(560 * var(--rp));
}
body.ui-v3 .einst-raster .einst-inhalt:has(main table) { --einst-breite: clamp(900px, 70vw, 1500px); }
body.ui-v3 .einst-raster .einst-inhalt {
  display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--rp));
  padding: calc(32 * var(--rp)) clamp(16px, 2vw, 48px) calc(72 * var(--rp));
  min-width: 0;
}
body.ui-v3 .einst-raster .einst-inhalt > :is(.einst-seitenkopf, .einst-stand) { width: min(100%, var(--einst-breite)); margin: 0; max-width: none; }
body.ui-v3 .einst-raster .einst-inhalt > main {
  width: 100%; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--rp));
}
body.ui-v3 .einst-raster .einst-inhalt > main > * { width: min(100%, var(--einst-breite)); margin-block: 0; }

/* A2: derselbe Kopf auf jeder Seite (templates/v3/einstellungen_abschnitt_kopf.html). */
body.ui-v3 .einst-raster .einst-seitenkopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(6 * var(--rp)); }
body.ui-v3 .einst-raster .einst-seitentitel { font-size: calc(22 * var(--rp)); font-weight: 700; letter-spacing: -0.01em; color: var(--v5-ink); margin: calc(6 * var(--rp)) 0 0; }
body.ui-v3 .einst-raster .einst-kurzinfo { font-size: calc(13 * var(--rp)); color: var(--v5-sec); margin: 0; }
/* Die eigene Überschrift der Seite steht jetzt im Kopf (sechs Seiten hiessen
   „Antwortvorlagen"); ein Seitenkopf, der danach nichts mehr trägt, entfällt. */
body.ui-v3 .einst-raster main h1 { display: none; }
body.ui-v3 .einst-raster main .seitenkopf > .dazu:empty { display: none; }
body.ui-v3 .einst-raster main > .seitenkopf:not(:has(> :not(h1, .dazu:empty))) { display: none; }
body.ui-v3 .einst-raster main > .seitenkopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(10 * var(--rp)); margin: 0; }
body.ui-v3 .einst-raster main > .seitenkopf > .dazu { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--rp)); }
/* Die Erklärung: 13 px grau, mittig, höchstens 560 px. */
body.ui-v3 .einst-raster main > .seitenkopf > .hinweis,
body.ui-v3 .einst-raster main > .seitenkopf > .meta,
body.ui-v3 .einst-raster main > p.hinweis:not(.kasten),
body.ui-v3 .einst-raster main > .seite-schmal > p.hinweis,
body.ui-v3 .einst-raster main > .seite-mittel > p.hinweis {
  width: min(100%, var(--einst-erklaerung)); align-self: center; text-align: center;
  font-size: calc(13 * var(--rp)); color: var(--v5-sec); margin: 0 auto;
}

/* A3: die Reiter wiederholen die Leiste — im Rahmen aus (Belegliste im Bericht,
   Wächter g prüft, dass jedes Reiterziel in der Leiste steht). */
body.ui-v3 .einst-raster nav.seiten-reiter { display: none; }

/* A4: Breiten und Zentrierungen der Seiten selbst gelten im Rahmen nicht.
   ⚠ !important NUR an .anmeldung: passwort.html setzt margin-top INLINE. */
body.ui-v3 .einst-raster :is(.seite-schmal, .seite-mittel) { max-width: none; width: auto; margin: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(22 * var(--rp)); }
body.ui-v3 .einst-raster .anmeldung {
  margin: 0 !important; max-width: none; width: auto; min-height: 0; padding: 0;
  background: transparent; box-shadow: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: calc(12 * var(--rp)); text-align: left;
}
body.ui-v3 .einst-raster .anmeldung > .kasten { background: transparent; box-shadow: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(12 * var(--rp)); }
body.ui-v3 .einst-raster .anmeldung > .kasten > p.hinweis { margin: 0 !important; text-align: center; font-size: calc(13 * var(--rp)); color: var(--v5-sec); }
body.ui-v3 .einst-raster .anmeldung button[type="submit"] { width: auto; }
body.ui-v3 .einst-raster .einst-stand .kasten { margin: 0; }

/* A6: linke Leiste wie die macOS-Systemeinstellungen. */
.ui-v3 .einst-nav { padding: calc(16 * var(--rp)) calc(10 * var(--rp)); gap: calc(2 * var(--rp)); }
.ui-v3 .einst-gruppe { gap: calc(2 * var(--rp)); }
.ui-v3 .einst-gruppe + .einst-gruppe { margin-top: calc(14 * var(--rp)); }
/* U3b (Eric, 03.10.2026): Gruppentitel #6E6E73 statt #8E8E93 — 4,5:1 (Wächter d auf der Leiste). */
.ui-v3 .einst-gruppe-titel { padding: calc(4 * var(--rp)) calc(10 * var(--rp)); font-size: calc(11 * var(--rp)); font-weight: 600; color: var(--v5-sec); letter-spacing: 0; text-transform: none; }
.ui-v3 .einst-punkt {
  height: calc(32 * var(--rp)); gap: calc(10 * var(--rp)); padding: 0 calc(8 * var(--rp));
  border-radius: calc(8 * var(--rp)); font-size: calc(13 * var(--rp)); font-weight: 500; color: var(--v5-ink);
}
.ui-v3 .einst-punkt.einst-aktiv { background: #C8202F; color: #FFFFFF; font-weight: 600; }
.ui-v3 .einst-punkt.einst-aktiv:hover { background: #A81A27; color: #FFFFFF; }
/* Grundfarbe, falls ein Punkt keine trägt; die Vorlage setzt sie je Punkt. */
.ui-v3 :is(.einst-nav, .einst-seitenkopf) { --kachel: #8E8E93; }
.ui-v3 .einst-kachel {
  flex: none; display: inline-grid; place-items: center;
  width: calc(22 * var(--rp)); height: calc(22 * var(--rp)); border-radius: calc(6 * var(--rp));
  background: var(--kachel); color: #FFFFFF;
}
.ui-v3 .einst-kachel svg { width: calc(14 * var(--rp)); height: calc(14 * var(--rp)); stroke-width: 2; color: #FFFFFF; flex: none; }
.ui-v3 .einst-punkt.einst-aktiv .einst-kachel { box-shadow: 0 0 0 calc(1.5 * var(--rp)) #FFFFFF; }
.ui-v3 .einst-kachel-gross { width: calc(56 * var(--rp)); height: calc(56 * var(--rp)); border-radius: calc(14 * var(--rp)); }
.ui-v3 .einst-kachel-gross svg { width: calc(32 * var(--rp)); height: calc(32 * var(--rp)); }

/* A7: Formulare wie Erics Entwurf „Einstellungen4" — weisse Gruppe, Zeilen
   ab 44 px, Beschriftung links, Feld rechts, feine Trennlinie, Knöpfe
   UNTER der Gruppe rechts. Nur Anordnung und Optik: gleiche Felder, Namen,
   Ziele. Die Gruppe zeichnet ein ::before, das über der Knopfzeile endet
   (30 px Knopf + 12 px Abstand) — so stehen die Knöpfe ausserhalb, ohne
   dass sich am Formular etwas ändert. */
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form, form.av-vorgaben-form, .av-signatur-felder, main form.aktionszeile[action="/vertrieb/import"]) {
  /* inset: auto — der Aufklapper aus „Mein Tag" trägt top/right (app.css),
     die mit position relative sonst wieder wirkten (gemessen: 224 px tiefer). */
  position: relative; inset: auto; isolation: isolate;
  background: transparent; box-shadow: none; border-radius: 0;
  padding: 0 0 calc(42 * var(--rp)); margin: 0; max-width: none;
}
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form, form.av-vorgaben-form, .av-signatur-felder, main form.aktionszeile[action="/vertrieb/import"])::before {
  content: ""; position: absolute; inset: 0 0 calc(42 * var(--rp)) 0; z-index: -1;
  background: var(--flaeche); border-radius: calc(10 * var(--rp)); box-shadow: var(--v5-hair);
}
/* Knöpfe: unten rechts, unter der Gruppe. */
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form, main form.aktionszeile[action="/vertrieb/import"]) > button,
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > .aktionszeile {
  position: absolute; right: 0; bottom: 0; margin: 0;
}
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > .aktionszeile { display: flex; gap: calc(8 * var(--rp)); justify-content: flex-end; }
/* Bauart 1: je Feld ein Behälter (.feld) — Profil, Abwesenheit. */
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form) { display: flex; flex-direction: column; }
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form) > .feld {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--rp));
  min-height: calc(44 * var(--rp)); margin: 0; padding: calc(7 * var(--rp)) calc(16 * var(--rp));
  box-shadow: inset 0 -.5px 0 var(--v5-sep); font-size: calc(13 * var(--rp)); color: var(--v5-ink); font-weight: 400;
}
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form) > .feld:not(:has(~ .feld)) { box-shadow: none; }
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form) > .feld > label { margin: 0; font-size: calc(13 * var(--rp)); color: var(--v5-ink); font-weight: 400; }
body.ui-v3 .einst-raster :is(.anmeldung form, form.vt-telefon-form) > .feld > :is(input, select) { width: min(55%, calc(320 * var(--rp))); flex: none; margin: 0 0 0 auto; }
body.ui-v3 .einst-raster .anmeldung form > .feld > .optional { margin-right: auto; }
/* Bauart 2: Beschriftung und Feld flach nebeneinander — Angebotsvorgaben,
   Signatur. Die Beschriftung nimmt die ganze Zeile (Trennlinie über die
   volle Breite), das Feld liegt in derselben Zeile rechts darüber. */
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) {
  display: grid; grid-template-columns: minmax(0, 1fr) min(55%, calc(320 * var(--rp)));
  gap: 0; align-items: center;
}
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > label {
  grid-column: 1 / -1; display: flex; align-items: center; gap: calc(8 * var(--rp));
  min-height: calc(44 * var(--rp)); margin: 0;
  padding: calc(7 * var(--rp)) calc(min(55%, calc(320 * var(--rp))) + calc(28 * var(--rp))) calc(7 * var(--rp)) calc(16 * var(--rp));
  box-shadow: inset 0 -.5px 0 var(--v5-sep); font-size: calc(13 * var(--rp)); color: var(--v5-ink); font-weight: 400;
}
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > label:last-of-type { box-shadow: none; }
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > :is(input, textarea, select) {
  grid-column: 2; position: relative; z-index: 1; width: auto; margin: calc(7 * var(--rp)) calc(16 * var(--rp)) calc(7 * var(--rp)) 0;
}
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > label:nth-of-type(1), body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > input:nth-of-type(1) { grid-row: 1; }
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > label:nth-of-type(2), body.ui-v3 .einst-raster form.av-vorgaben-form > input:nth-of-type(2) { grid-row: 2; }
body.ui-v3 .einst-raster :is(form.av-vorgaben-form, .av-signatur-felder) > label:nth-of-type(3), body.ui-v3 .einst-raster form.av-vorgaben-form > input:nth-of-type(3), body.ui-v3 .einst-raster .av-signatur-felder > textarea { grid-row: 3; }
body.ui-v3 .einst-raster form.av-vorgaben-form > label:nth-of-type(4), body.ui-v3 .einst-raster form.av-vorgaben-form > input:nth-of-type(4) { grid-row: 4; }
body.ui-v3 .einst-raster form.av-vorgaben-form > label:nth-of-type(5), body.ui-v3 .einst-raster form.av-vorgaben-form > input:nth-of-type(5) { grid-row: 5; }
body.ui-v3 .einst-raster form.av-vorgaben-form > label:nth-of-type(6), body.ui-v3 .einst-raster form.av-vorgaben-form > input:nth-of-type(6) { grid-row: 6; }
body.ui-v3 .einst-raster form.av-vorgaben-form > span { grid-column: 1 / -1; padding: 0 calc(16 * var(--rp)); }
body.ui-v3 .einst-raster form.av-vorgaben-form > span:empty { display: none; }
/* Der Haken der Signatur hat kein eigenes Feld rechts: Zeile ohne Reserve. */
body.ui-v3 .einst-raster .av-signatur-felder > label.av-haken { padding-right: calc(16 * var(--rp)); }
body.ui-v3 .einst-raster .av-signatur-felder > label:has(+ textarea) { align-self: stretch; align-items: flex-start; padding-top: calc(12 * var(--rp)); }
body.ui-v3 .einst-raster .av-signatur-felder > textarea { align-self: stretch; }
/* Signatur und Vorschau im Rahmen untereinander (die Spalte ist schmal). */
body.ui-v3 .einst-raster form.av-signatur { display: flex; flex-direction: column; gap: calc(22 * var(--rp)); }
body.ui-v3 .einst-raster .av-signatur-vorschau-rahmen { border: 0; border-radius: calc(10 * var(--rp)); box-shadow: var(--v5-hair); background: var(--flaeche); }
/* Bauart 3: Import — Dateiwahl und Haken als Zeilen, „Einlesen" darunter. */
body.ui-v3 .einst-raster main form.aktionszeile[action="/vertrieb/import"] { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
body.ui-v3 .einst-raster main form.aktionszeile[action="/vertrieb/import"] > :is(input[type="file"], label) {
  min-height: calc(44 * var(--rp)); margin: 0; padding: calc(7 * var(--rp)) calc(16 * var(--rp));
  display: flex; align-items: center; gap: calc(8 * var(--rp)); background: transparent; width: auto;
  box-shadow: inset 0 -.5px 0 var(--v5-sep); font-size: calc(13 * var(--rp)); color: var(--v5-ink);
}
body.ui-v3 .einst-raster main form.aktionszeile[action="/vertrieb/import"] > label { box-shadow: none; }

/* ============================================================
   U3 TEIL B (Auftrag Eric, 03.10.2026): SYMBOLE UND SATTE FARBEN
   im Inhalt — die Seitenleiste bleibt Prod (B4, U1c-Wächter).
   ============================================================ */
/* B1: Kachel vor dem Seitentitel — Symbol und Farbe des aktiven Menüpunkts.
   Die Zuordnung steht im erzeugten Block (Quelle: partials/icons.html). */
/* U3-B1-ANFANG — ERZEUGT von tests/test_u3_symbole.py, nicht von Hand ändern */
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/"]) { --seiten-kachel: inline-block; --seiten-farbe: #5856D6; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.2'/%3E %3Crect x='11' y='3' width='6' height='6' rx='1.2'/%3E %3Crect x='3' y='11' width='6' height='6' rx='1.2'/%3E %3Crect x='11' y='11' width='6' height='6' rx='1.2'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/vertrieb"]) { --seiten-kachel: inline-block; --seiten-farbe: #FF3B30; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='13' height='12' rx='1.5'/%3E %3Cpath d='M3.5 8h13M7 3v3M13 3v3M7.5 12.2l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/vertrieb/anfragen"]) { --seiten-kachel: inline-block; --seiten-farbe: #C8202F; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4h13v8.5H9L5.5 16v-3.5h-2z'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/vertrieb/klaeren"]) { --seiten-kachel: inline-block; --seiten-farbe: #FF9500; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='11' height='8.5' rx='1.2'/%3E %3Cpath d='M2.5 6l5.5 4 5.5-4'/%3E %3Cpath d='M15 9.2a1.9 1.9 0 1 1 2.1 1.9c-.5.1-.6.4-.6.9v.6M16.5 15v.2'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/vertrieb/listen"]) { --seiten-kachel: inline-block; --seiten-farbe: #30B0C7; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.3'/%3E %3Cpath d='M2.8 14.5c.6-2.2 1.8-3.2 3.2-3.2s2.6 1 3.2 3.2M11 5.5h6M11 9.5h6M11 13.5h6'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/vertrieb/auswertung"]) { --seiten-kachel: inline-block; --seiten-farbe: #34C759; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v13h13'/%3E %3Cpath d='M6 13l3.2-3.6 2.6 2.1L16 6.5'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/beschaffung"]) { --seiten-kachel: inline-block; --seiten-farbe: #A2845E; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.6' cy='8.6' r='5.1'/%3E %3Cpath d='M13.3 13.3 17 17'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/liegt-bei-uns"]) { --seiten-kachel: inline-block; --seiten-farbe: #32ADE6; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 10S5.3 5.2 10 5.2 17.5 10 17.5 10 14.7 14.8 10 14.8 2.5 10 2.5 10z'/%3E %3Ccircle cx='10' cy='10' r='2.2'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/liste"]) { --seiten-kachel: inline-block; --seiten-farbe: #007AFF; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='12' height='13.5' rx='1.5'/%3E %3Crect x='7.3' y='2.5' width='5.4' height='3' rx='1'/%3E %3Cpath d='M7 10h6M7 13.2h6'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/bestellungen"]) { --seiten-kachel: inline-block; --seiten-farbe: #C93400; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.8 16.8 6.2v7.6L10 17.2 3.2 13.8V6.2z'/%3E %3Cpath d='M3.2 6.2 10 9.6l6.8-3.4M10 9.6v7.6'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/lager"]) { --seiten-kachel: inline-block; --seiten-farbe: #00C7BE; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='3' width='4' height='14' rx='1.2'/%3E %3Crect x='8' y='3' width='4' height='10' rx='1.2'/%3E %3Crect x='13.4' y='3' width='4' height='6' rx='1.2'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/queue"]) { --seiten-kachel: inline-block; --seiten-farbe: #248A3D; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 5 5h10l2 6.5V16H3z'/%3E %3Cpath d='M3 11.5h4l1.5 2.2h3L13 11.5h4'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/statistik"]) { --seiten-kachel: inline-block; --seiten-farbe: #0A84FF; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16v-5M10 16V5.5M15 16v-8M3 17.5h14'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/archiv"]) { --seiten-kachel: inline-block; --seiten-farbe: #8E8E93; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.5h14.4v3H2.8zM4.2 7.5v8.5h11.6V7.5'/%3E %3Cpath d='M8 10.5h4'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/rechner/zuschnitt"]) { --seiten-kachel: inline-block; --seiten-farbe: #FF2D55; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2h15v5.6h-15z'/%3E %3Cpath d='M12.2 4.4v11.2' stroke-dasharray='2.2 2'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/stammdaten/kunden"]) { --seiten-kachel: inline-block; --seiten-farbe: #AF52DE; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='6.8' r='2.8'/%3E %3Cpath d='M2.8 16.5c0-2.9 2.1-4.7 4.7-4.7s4.7 1.8 4.7 4.7'/%3E %3Ccircle cx='14.3' cy='7.4' r='2.1'/%3E %3Cpath d='M13.6 12.1c2.3.2 3.9 1.8 3.9 4.1'/%3E%3C/svg%3E"); }
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv)[href="/hilfe"]) { --seiten-kachel: inline-block; --seiten-farbe: #8E8E93; --seiten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.2'/%3E %3Cpath d='M7.9 8.1c.2-1.2 1.1-1.9 2.2-1.9 1.3 0 2.2.8 2.2 1.9 0 1.6-2.2 1.7-2.2 3.4M10.1 13.9v.2'/%3E%3C/svg%3E"); }
body.ui-v3 #aufmerksamkeit-panel { --panel-farbe: #FF9500; --panel-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 2.8 15.6h14.4z'/%3E %3Cpath d='M10 8.2v3.4M10 13.6v.1'/%3E%3C/svg%3E"); }
/* U3-B1-ENDE */
body.ui-v3 main :is(.seitenkopf, .listenkopf, .seite-kopf) > h1::before,
body.ui-v3 main > h1::before {
  content: ""; display: var(--seiten-kachel, none); flex: none;
  width: calc(32 * var(--rp)); height: calc(32 * var(--rp)); border-radius: calc(8 * var(--rp));
  margin-right: calc(12 * var(--rp)); vertical-align: calc(-6 * var(--rp));
  background: var(--seiten-symbol) center / calc(20 * var(--rp)) no-repeat, var(--seiten-farbe);
}
body.ui-v3 #aufmerksamkeit-panel .seitenpanel-kopf h3::before {
  content: ""; display: inline-block; flex: none;
  width: calc(28 * var(--rp)); height: calc(28 * var(--rp)); border-radius: calc(7 * var(--rp));
  margin-right: calc(10 * var(--rp)); vertical-align: calc(-8 * var(--rp));
  background: var(--panel-symbol) center / calc(18 * var(--rp)) no-repeat, var(--panel-farbe);
}

/* B2: Statusmarken als satte, volle Fläche mit weisser Schrift. Jede
   Familie hat mit Weiss mindestens 4,5:1 (Wächter h misst es am Element).
   Die heutige Bedeutung hängt an der SPALTE (app.css: Büro grau,
   Lieferant lila, Lager blau, Logistik türkis, Controlling seegrün,
   Fertig grün, storniert entsättigt) — je Spalte eine Familie. Für
   Controlling bleibt von den Familien nur Indigo, sonst stünde es in
   derselben Farbe wie Fertig. Warme Töne (orange, rot) bleiben den
   Warnungen vorbehalten (app.css, HARTE REGEL). */
body.ui-v3 :is(.s-auftrag_angelegt, .s-warten_auf_vorkasse)                         { --s-bg: #636366; --s-punkt: #636366; --s-text: #FFFFFF; }
body.ui-v3 :is(.s-bestellt_bei_lieferant, .s-warten_auf_wareneingang)               { --s-bg: #8944AB; --s-punkt: #8944AB; --s-text: #FFFFFF; }
body.ui-v3 :is(.s-arbeitsschein_im_lager, .s-fertig_gemeldet, .s-lieferschein_etiketten) { --s-bg: #0A64D6; --s-punkt: #0A64D6; --s-text: #FFFFFF; }
body.ui-v3 :is(.s-versandbereit, .s-versendet)                                      { --s-bg: #0B7A83; --s-punkt: #0B7A83; --s-text: #FFFFFF; }
body.ui-v3 .s-abgerechnet                                                           { --s-bg: #5856D6; --s-punkt: #5856D6; --s-text: #FFFFFF; }
body.ui-v3 :is(.s-bezahlt, .s-abgeschlossen)                                        { --s-bg: #1F7A36; --s-punkt: #1F7A36; --s-text: #FFFFFF; }
body.ui-v3 .s-storniert                                                             { --s-bg: #8C6A3F; --s-punkt: #8C6A3F; --s-text: #FFFFFF; }
/* Die rote Pille der Anfragen (überfällig) ist eine Warnung: Rot. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-pille.vk-pille-rot { background: #D70015; color: #FFFFFF; }
/* Das Statusmenü der Auftragsseite trägt dieselbe Fläche — der Pfeil und
   der Rand beim Zeigen müssen auf ihr sichtbar bleiben. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue > summary::after { color: currentColor; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue > summary:hover { box-shadow: inset 0 0 0 calc(1.5 * var(--rp)) rgba(255, 255, 255, .65); }

/* Das Statusmenü ist eine Statusmarke, kein grauer Knopf: die Grundregel für
   Knöpfe darf ihm die Fläche der Familie nicht nehmen (gemessen: Wächter h). */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue > summary,
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue > summary:hover { background-color: var(--s-bg, var(--v5-fill)); color: var(--s-text, var(--v5-ink)); }

/* Die Einträge IM Statusmenü tragen ebenfalls die Statusklasse (für ihren
   Punkt). app.css färbt ihre Schrift mit --s-text — mit den satten Familien
   stand dort Weiss auf Weiss (gemessen, Kontrastwächter d). In v3: dunkle
   Schrift, die Familie zeigt der Punkt. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue .menue-eintrag { color: var(--v5-ink); background: transparent; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .status-menue .menue-eintrag:is(:hover, .aktuell) { background: var(--v5-fill); box-shadow: none; }

/* B3: in den Spaltenköpfen der Boards wird der Punkt ein Quadrat 10 px,
   Radius 3, in der Farbe der Statusfamilie. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .spalte-titel .status-punkt { width: calc(10 * var(--rp)); height: calc(10 * var(--rp)); border-radius: calc(3 * var(--rp)); vertical-align: 0; }

/* ============================================================
   U3 TEIL C (Auftrag Eric, 03.10.2026): ANPASSUNG AN FENSTERGRÖSSE
   UND AUFLÖSUNG — 1280 bis 3440 px, Windows-Skalierung 100/125/150 %.
   Grundgrösse und Referenzpixel: siehe C1 oben (Wurzel, --rp).
   Wächter: tests/u3_probe.py (i), je Fenstergrösse.
   ============================================================ */
/* C1/C2: Seitenrand fliessend; Listen und Boards in voller Breite (Prod
   deckelte main bei 100rem — mit der 14-px-Wurzel wären das 1400 px). */
body.ui-v3 main { max-width: none; padding-inline: clamp(16px, 2vw, 48px); }
/* Lese-Seiten: eine mittige Spalte. */
body.ui-v3:has(.seitenleiste :is(a.nav-aktiv, a.bereich-aktiv):is([href="/vertrieb"], [href="/liegt-bei-uns"], [href="/statistik"], [href="/vertrieb/auswertung"], [href="/vertrieb/klaeren"], [href="/hilfe"])) main {
  max-width: clamp(960px, 72vw, 1600px); margin-inline: auto; width: 100%;
}
/* Auftragsseite: Arbeitsfläche | Auftragsdaten — ⚠ U3c: ZWEISPALTIG NUR, wenn
   die Begleitschein-Spalte dabei mindestens 900 px bekommt. Gemessen am
   03.10.2026: Bei 1366 px blieben ihr 563 px, die vollste Zeile braucht rund
   690 px; einzeilig ging es nicht, und „Wer · Wann" wurde abgeschnitten.
   Darunter steht die Seite untereinander wie in Prod (Details zuerst).
   Die Abfrage hängt an main (ein Raster kann sich nicht selbst abfragen):
   1540 px Inhalt = 900 px + Abstand + clamp(360px, 32vw, 620px). */
body.ui-v3 main:has(.ticket-raster) { container: hauptflaeche / inline-size; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster { grid-template-columns: minmax(0, 1fr); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > :is(.ticket-arbeit, .ticket-details, .ticket-kommentare) { grid-column: 1; grid-row: auto; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-details { order: -1; position: static; max-height: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-arbeit { order: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-kommentare { order: 1; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster .panel-abschnitt.panel-titel { position: static; }
@container hauptflaeche (min-width: 1540px) {
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster { grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 620px); }
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-arbeit     { grid-column: 1; grid-row: 1; order: 0; }
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-kommentare { grid-column: 1; grid-row: 2; order: 0; }
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster > .ticket-details    { grid-column: 2; grid-row: 1 / span 2; order: 0; }
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .ticket-raster .panel-abschnitt.panel-titel { position: sticky; }
}
/* Zuschnittrechner: Eingaben | Ergebnis. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-layout { grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr); }

/* C3: Boards — die Spalten teilen sich die Breite gleichmässig; passen sie
   nicht, scrollt NUR das Board (app.css: overflow-x auto), nie die Seite.
   Die schmale „Erledigt"-Spalte der Anfragen bleibt schmal. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.board, .vt-tafel) > .spalte:not(.schmal) { flex: 1 1 0; min-width: 240px; }
/* Karten brechen um, statt Kundennamen ohne title abzuschneiden. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte-kunde:not([title]) { white-space: normal; overflow: visible; text-overflow: clip; }

/* C4: Tabellen in voller Breite; Text bricht um, Zahlen nicht. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) table { width: 100%; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(td, th):is(.rechts, .kalk-num, .lz-menge) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* C1: keine Schrift unter 12 px im Inhalt. app.css setzt drei Stellen
   kleiner (legend der Spaltenfilter 11 px fest, .warnzeile 0,85rem,
   .bs-meta-wann 0,85em) — mit der 14-px-Wurzel fielen sie unter 12 px. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .spalten-filter legend { font-size: calc(12 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .warnzeile { font-size: calc(13 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-meta-wann { font-size: calc(12 * var(--rp)); }

/* C5: Suchfeld und Kachelreihe. */
body.ui-v3 .kopfzeile { grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 560px) max-content; }
body.ui-v3 .globalsuche { max-width: none; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: stretch; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .kacheln > .kachel { min-width: 0; height: 100%; }

/* C6: unter 1100 px stehen zweispaltige Bereiche untereinander. (Das
   Einklappen der Leiste unter 1180 px macht v3.js, nur ohne eigene Wahl.) */
@media (max-width: 1099px) {
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .zr-layout { grid-template-columns: minmax(0, 1fr); }
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) form.av-signatur { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   U3c (Befund Eric, 03.10.2026, Prod Auftrag 3017274): DER BEGLEITSCHEIN
   IST WIEDER EINZEILIG. Je Schritt EINE Zeile: [Haken + Schritt, darf
   umbrechen] [Ereignisdatum] [Beleg: Datei, ×, Belegart, wählen — höchstens
   die Hälfte, Dateiname mit Auslassung, voller Name im title] [Wer · Wann].
   Wächter j: tests/u3_probe.py (Zeilenhöhe, gemeinsame Mittellinie).
   ============================================================ */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein { container: bs-spalte / inline-size; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile {
  display: flex; flex-wrap: nowrap; align-items: center; gap: calc(12 * var(--rp));
  min-height: calc(44 * var(--rp)); padding: calc(6 * var(--rp)) calc(12 * var(--rp)); margin: 0;
  border: 0; border-bottom: 1px solid var(--v5-zeile); box-shadow: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile:last-child { border-bottom: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label:not(.bs-ereignis) {
  flex: 1 1 auto; min-width: 0; align-items: center; min-height: 0; flex-wrap: nowrap;
  padding: 0 calc(6 * var(--rp)); font-size: calc(14 * var(--rp));
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label.bs-ereignis { flex: none; align-self: center; flex-wrap: nowrap; flex-direction: row; white-space: nowrap; }
/* Zwei Bauteile stapeln sich in app.css in der Zeile: der Untertitel unter
   dem Schrittnamen und das Wort über dem Ereignisdatum. In v3 stehen beide
   in der Zeile (gemessen: sonst 57–80 px hohe Zeilen bei einzeiligem Namen). */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label:not(.bs-ereignis) > span { min-width: 0; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label:not(.bs-ereignis) > span > .meta { display: inline; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label:not(.bs-ereignis) > span > .stein-name + .meta::before { content: "\00a0·\00a0"; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > label.bs-ereignis > .meta { display: inline; }
/* „+1" (weitere Belege): app.css .85em ergab 11 px. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-dokument-mehr > summary {
  flex: none; min-height: 0; font-size: calc(12 * var(--rp)); line-height: 1.4;
  padding: calc(1 * var(--rp)) calc(5 * var(--rp)); border-radius: calc(5 * var(--rp)); background: var(--v5-fill);
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein .bs-dokument > .bs-beleg { flex: 1 1 auto; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein .bs-zeile input[type="checkbox"] { margin: 0; }
/* Felder in der Zeile (Spedition, Werte): ohne den Aussenabstand aus app.css
   (input: margin-top) — sonst 57 px bei 2560 px. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > :is(input, select) { margin: 0; align-self: center; }
/* Der Beleg schrumpft NICHT unter seinen Inhalt (app.css richtet ihn
   rechtsbündig aus — zu schmal lief er nach links über Name und Datum,
   gemessen 88 px bei 1366). Platz gibt nur der Dateiname her. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile > .bs-dokument { flex: 0 0 auto; max-width: 50%; min-width: 0; align-self: center; font-size: calc(13 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein .bs-dokument-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wer · Wann: eine Zeile, 12 px grau, rechtsbündig, ohne eigene Trennlinie. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .bs-erledigt-meta {
  display: flex; flex: none; flex-direction: row; align-items: baseline; gap: 0; margin-left: auto;
  padding-left: 0; border-left: 0; text-align: right; white-space: nowrap;
  font-size: calc(12 * var(--rp)); color: var(--v5-sec); font-weight: 400;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .bs-erledigt-meta > .bs-meta-wer { font-weight: 400; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .bs-erledigt-meta > .bs-meta-wer + .bs-meta-wann::before { content: "\00a0·\00a0"; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) :is(.begleitschein, .meilensteine) .bs-erledigt-meta > .bs-meta-wann { font-size: inherit; color: inherit; }
/* „wählen" und × wie in Prod: Text, keine Knopffläche. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-beleg-waehlen {
  background: transparent; border: 0; padding: 0; min-height: 0; line-height: inherit;
  font-size: calc(13 * var(--rp)); font-weight: 400; color: var(--v5-sec); text-decoration: none;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-beleg-waehlen:hover { background: transparent; text-decoration: underline; }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-dokument-weg {
  width: calc(20 * var(--rp)); height: calc(20 * var(--rp)); min-height: 0; padding: 0;
  display: inline-grid; place-items: center; flex: none;
  background: transparent; border: 0; border-radius: calc(5 * var(--rp)); color: var(--v5-sec); line-height: 1;
}
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-dokument-weg:hover { background: var(--v5-fill); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .bs-dokument-wort { background: transparent; padding: 0; min-height: 0; font-size: inherit; font-weight: 400; }
/* Nur wenn die Begleitschein-Spalte schmaler als 900 px ist, darf der Beleg
   in eine zweite Zeile. Auf der Auftragsseite kommt das ab 1100 px nicht
   vor (siehe .ticket-raster: zweispaltig erst ab 900 px für den Schein). */
@container bs-spalte (max-width: 899px) {
  body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .begleitschein > .bs-zeile { flex-wrap: wrap; }
}

/* U3c, Punkt 3: lange Statusmarken („Warten auf Wareneingang") ragten bei
   1280 px über den Kartenrand — die Marke bricht unter die Nummer. */
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte .karte-kopf { flex-wrap: wrap; row-gap: calc(4 * var(--rp)); }
body.ui-v3 :is(main, dialog, .seitenpanel-inhalt, .loki-fenster) .karte .karte-kopf > .status-pille { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* U1c, Punkt 1: Die Pille auf der Anfragen-Karte darf umbrechen statt
   abgeschnitten zu werden (bei 1366 px stand dort „nicht zu…"). */
.ui-v3 .vk-pille, .ui-v3 .vk-karte .karte-chips .chip {
  white-space: normal;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}
.ui-v3 .vk-karte .karte-kopf { flex-wrap: wrap; }

/* ============================================================
   U1c (Auftrag Eric, 02.10.2026): DIE SEITENLEISTE BLEIBT WIE IN PROD.
   Einzige Abweichung: die Schriftfamilie der Menütexte (Plex). Dafür
   bekommt die Leiste hier die Token aus app.css :root zurück (ohne
   --schrift) — aus app.css übernommen, nicht neu gewählt. Keine Regel
   oben reicht in die Leiste: jede nennt main, dialog, die Panels, die
   Kopfzeile oder den Einstellungsrahmen, oder sie trägt
   `:where(:not(.seitenleiste *))`. Die Wortmarke steht in app.css mit
   „Orbitron" vor der Hausschrift — sie hängt nicht an --schrift.
   Wächter: tests/test_u1c_seitenleiste.py (berechnete Werte alt gegen v3).
   ============================================================ */
.ui-v3 .seitenleiste {
  --hintergrund: #f7f7f8;
  --flaeche: #ffffff;
  --flaeche-2: #f0f0f2;
  --text: #111114;
  --text-1: var(--text);
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --icon-grund: #3f3f46;
  --linie: rgba(0, 0, 0, 0.08);
  --akzent: #c8202f;
  --akzent-hover: #a81a27;
  --akzent-flaeche: #fdeef0;
  --marke: #e52a3b;
  --warnung: #9a6700;
  --warnung-flaeche: #fff8ec;
  --fehler: #c0392b;
  --fehler-flaeche: #fdf2f0;
  --ok: #1e7f37;
  --ok-flaeche: #f0f9f2;
  /* U3 C1: die Wurzel wächst im v3-Pfad mit — die Leiste nicht. Ihre
     rem-Werte stehen hier als die Prod-Pixel (Wurzel 16 px). */
  --groesse-xs: 13px;
  --groesse-s: 15px;
  --groesse-m: 17px;
  --groesse-l: 22px;
  --groesse-xl: 28px;
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;
  --radius: 10px;
  --radius-gross: 14px;
  --radius-voll: 999px;
  --schatten-ruhe: 0 1px 2px rgba(0,0,0,.06), 0 0 0 0.5px rgba(0,0,0,.04);
  --schatten-hover: 0 3px 10px rgba(0,0,0,.10), 0 0 0 0.5px rgba(0,0,0,.04);
  --schatten-hebt: 0 12px 28px rgba(0,0,0,.16);
  --hover-flaeche: var(--flaeche-2);
  --rolle-titel-groesse: 16px;
  --rolle-titel-farbe: var(--text);
  --rolle-label-groesse: 14px;
  --rolle-label-farbe: #55555a;
  --rolle-meta-groesse: 14px;
  --rolle-meta-farbe: var(--text-2);
  --dauer: 170ms;
  --kurve: cubic-bezier(0.25, 0.6, 0.3, 1);
  --schrift-prod: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--groesse-m);
  color: var(--text);
}
/* Wortmarke, Kompaktlogo und Zähler sind keine Menütexte: dort auch die
   Prod-Schrift (die Wortmarke steht in app.css als „Orbitron" vor
   var(--schrift) — mit dem v3-Wert fiele sie auf Plex statt Arimo zurück). */
.ui-v3 .seitenleiste .marke { --schrift: var(--schrift-prod); font-family: var(--schrift-prod); }
.ui-v3 .seitenleiste .nav-badge, .ui-v3 .seitenleiste .upload-plus { font-family: var(--schrift-prod); }
/* U3 C1: die drei Stellen, an denen app.css in der Leiste direkt rem setzt. */
.ui-v3 .seitenleiste :is(.nav-punkt, button[type="submit"].nav-punkt) { font-size: 16px; }
.ui-v3 .seitenleiste .upload-plus { font-size: 44px; }
body.ui-v3.leiste-zu .seitenleiste .upload-plus { font-size: 28px; }