/* BelegHero UI v2 – ERZEUGT von scripts/ui_v2_einbinden.py aus app/static/ui-v2/*.css.
 * Nicht von Hand ändern: Quelldateien bearbeiten und das Skript laufen lassen. */

/* ==== tokens.css ==== */
/* BelegHero UI v2 – Design Tokens
 *
 * Alle Werte hängen an `.bp-v2`, nicht an :root. Nimmt man die Klasse vom
 * body, gilt kein einziger v2-Wert mehr – das ist der Rückweg zum alten
 * Design (siehe docs/ui-v2/RUECKWEG.md).
 *
 * Farbstrategie: Grün trägt Navigation, Auswahl, Fortschritt und
 * "fertig"-Zustände. Arbeitsflächen bleiben hell und neutral.
 */

@font-face {
  font-family: "BH Jakarta";
  src: url("/static/fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.bp-v2 {
  /* Marke ------------------------------------------------------------ */
  --green-950: #123322;
  --green-900: #173c27;
  --green-800: #205236;
  --green-700: #2e6b42;
  --green-600: #3a8454;
  --green-500: #4caf70;
  --green-400: #74c28f;
  --green-300: #a3d6b3;
  --green-200: #c9e7d2;
  --green-100: #e5f3e8;
  --green-050: #f1f8f3;

  /* Flächen ---------------------------------------------------------- */
  --backdrop: #f2f4f3;          /* außerhalb der App-Fläche, neutral */
  --workspace: #edf4ef;         /* Grund der App-Fläche */
  --panel: #ffffff;             /* Karten, Tabellen */
  --panel-muted: #f5f8f5;       /* Unterflächen in Karten */
  --panel-sunken: #eef3ef;      /* Eingabefelder im Ruhezustand, Spuren */
  --panel-hover: var(--hover-flaeche);   /* alter Name, dieselbe Fläche */
  --panel-selected: #eaf5ed;
  --panel-raised: #ffffff;       /* aktive Wahl in Segmenten, Schieber */

  /* Hover (Emil, 30.09.2026: „bei hover sind andere grüntöne – das muss überall wo eine hover farbe ist gleich
     sein und überall passen“). EINE Sprache für alles, worüber die Maus fährt – vorher waren es sechs Flächen,
     fünf Grüns für Ränder und drei für Schrift:
       --hover-flaeche    Zeilen, Listen, Menüs, Karten, Knöpfe: dieselbe zarte Tönung (heller als „gewählt“)
       --hover-akzent     Rand und Schrift von Knöpfen, Links, Pfeilen: dasselbe Dunkelgrün
       --hover-primaer    gefüllte grüne Knöpfe: dasselbe Dunkelgrün als Fläche
       --hover-auf-gruen  auf grünem Grund (Seitenleiste, Leisten): ein heller Schleier
     Rot bleibt rot (Löschen); Eingabefelder dunkeln nur neutral nach – Grün gehört dort dem Fokus.
     tests/test_hover_einheitlich.py hält das fest. */
  --hover-flaeche: #eff5f1;
  --hover-akzent: var(--green-800);
  --hover-primaer: var(--fix-green-800);
  --hover-auf-gruen: rgba(255, 255, 255, 0.1);

  /* Text ------------------------------------------------------------- */
  --text-primary: #17221b;
  --text-secondary: #56635b;   /* ≥ 5,5:1 auf allen hellen Flächen (WCAG AA) */
  --text-tertiary: #606d65;    /* ≥ 4,7:1 – Metatext bleibt lesbar, Hierarchie über Größe */
  --text-disabled: #aab4ad;
  --text-on-green: #f1f8f3;
  --text-on-green-muted: #a9c6b3;
  --text-link: var(--green-700);

  /* Linien ----------------------------------------------------------- */
  --border-subtle: #dce6df;
  --border-default: #cbd8cf;
  --border-strong: #a9bbaf;
  --divider: #e6ede8;

  /* Semantik --------------------------------------------------------- */
  --success: var(--green-700);
  --success-strong: var(--green-800);
  --success-bg: var(--green-100);
  --success-border: var(--green-200);

  --warning: #b57b25;
  --warning-strong: #8f5f17;
  --warning-bg: #fbf1e1;
  --warning-border: #f0dcb8;

  --danger: #b84d42;
  --danger-strong: #963a31;
  --danger-bg: #f9e9e6;
  --danger-border: #f0cdc7;

  --info: #537ca5;
  --info-strong: #3e6388;
  --info-bg: #e9f0f7;
  --info-border: #cddcec;

  --neutral: #65736a;
  --neutral-bg: #eef2ef;
  --neutral-border: #dce3de;

  /* Fachliche Status (nie nur Farbe: immer mit Symbol + Text) -------- */
  --status-done: var(--green-700);          /* verarbeitet, fertig, bereit */
  --status-done-bg: var(--green-100);
  --status-review: var(--info);             /* in Prüfung */
  --status-review-bg: var(--info-bg);
  --status-assign: var(--warning);          /* wartet auf Zuordnung */
  --status-assign-bg: var(--warning-bg);
  --status-missing: #7a5c99;                /* fehlt */
  --status-missing-bg: #f1ecf6;
  --status-missing-strong: #634a80;          /* Text/Icon auf --status-missing-bg */
  --status-error: var(--danger);            /* fehlerhaft */
  --status-error-bg: var(--danger-bg);

  /* Grafiken: eine starke Farbe fuer Erledigtes, zwei weiche warme fuer Offenes */
  --chart-done: #2f7a4c;
  --chart-review: #b7dcc3;
  /* kein Beleg = Bernstein statt Lachsrot (UI-Pass 22.09.2026, Punkt 32) */
  --chart-missing: #e6ad4f;
  --chart-missing-track: #f5e3c2;
  --chart-grid: #edf1ee;
  --chart-hover: var(--hover-flaeche);

  /* Diagramme -------------------------------------------------------- */
  --chart-1: var(--green-700);
  --chart-2: var(--green-400);
  --chart-3: #6f93b8;
  --chart-4: #d19a45;
  --chart-5: #9a7fb8;
  --chart-grid: #e3eae5;
  --chart-track: #e8efea;

  /* Typografie ------------------------------------------------------- */
  --font-sans: "BH Jakarta", "Plus Jakarta Sans", Arial, sans-serif;
  --font-num: "BH Jakarta", "Plus Jakarta Sans", Arial, sans-serif;

  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-base: 0.875rem;   /* 14 – UI-Grundgröße */
  --text-md: 0.9375rem;    /* 15 */
  --text-lg: 1.0625rem;    /* 17 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.5rem;      /* 24 */
  --text-3xl: 1.75rem;     /* 28 – Seitentitel */
  --text-4xl: 2.5rem;      /* 40 – Kennzahlen */
  --text-5xl: 2.75rem;     /* 44 – Leitkennzahl */

  --weight-light: 400;      /* Kennzahlen: gross und ruhig, nicht duenn */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-table-head: var(--weight-medium); /* Tabellenkopf: mittel, auch wenn eine Seite dichter ist */
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.06em;

  /* Abstände (4er-Raster) -------------------------------------------- */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Radien ----------------------------------------------------------- */
  --radius-card-lg: 24px;
  --radius-card: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* Schatten (grün getönt, weich) ------------------------------------ */
  --shadow-card: 0 1px 2px rgba(18, 51, 34, 0.04), 0 6px 20px -12px rgba(18, 51, 34, 0.12);
  --shadow-card-hover: 0 1px 2px rgba(18, 51, 34, 0.05), 0 14px 32px -16px rgba(18, 51, 34, 0.2);
  --shadow-raised: 0 2px 6px rgba(18, 51, 34, 0.06), 0 18px 40px -18px rgba(18, 51, 34, 0.26);
  --shadow-popover: 0 4px 12px rgba(18, 51, 34, 0.08), 0 24px 56px -20px rgba(18, 51, 34, 0.3);
  --shadow-drawer: -1px 0 0 var(--border-subtle), -28px 0 64px -36px rgba(18, 51, 34, 0.35);
  --shadow-inset: inset 0 1px 2px rgba(18, 51, 34, 0.06);
  --shadow-pill: 0 1px 2px rgba(18, 51, 34, 0.1), 0 0 0 1px rgba(18, 51, 34, 0.04);
  --focus-ring: 0 0 0 3px rgba(76, 175, 112, 0.38);
  --focus-ring-danger: 0 0 0 3px rgba(184, 77, 66, 0.28);

  /* Bedienelemente --------------------------------------------------- */
  --control-h-xs: 26px;
  --control-h-sm: 32px;
  --control-h: 38px;
  --control-h-lg: 44px;
  --icon-btn: 36px;
  --icon-btn-sm: 32px;          /* wie der kleine Knopf (--control-h-sm) - bis 11.10.2026 30px */
  --row-h: 48px;
  --row-h-compact: 40px;

  /* ROLLEN (11.10.2026, docs/ui-v2/REGELN.md) ------------------------------
     Eine Groesse je Rolle, fuer JEDE Seite - neue Ansichten und Bestand. Der
     Bestand nahm diese Werte bis dahin oft nicht an: app-neu.css setzt Karte,
     Knopf und Feld mit !important, und die Sonderwerte einzelner Seiten
     (36, 34, 40 px) standen daneben. Wer eine Rolle aendern will, aendert sie
     HIER; am Telefon gelten die Werte aus responsive.css.

     Knopf:      --control-h (38) · klein --control-h-sm (32) · gross --control-h-lg (44)
                 Schrift 14 / 13 / 15, Gewicht mittel, Innenrand 16 / 12 / 20
     Feld:       --control-h hoch, Schrift 14, Innenrand 12, Radius --radius-sm
     Symbolknopf: --icon-btn (36) · in Listenzeilen --icon-btn-sm (32)        */
  --karte-innenrand: var(--space-5);        /* Innenrand einer Inhaltskarte */
  --karte-radius: var(--radius-card);
  --abstand-karten: var(--space-5);         /* Karte -> Karte, untereinander und nebeneinander */
  --abstand-seitenkopf: var(--space-6);     /* Seitentitel -> erster Inhalt */
  --abstand-kartentitel: var(--space-4);    /* Kartentitel (samt Beischrift) -> Inhalt der Karte */
  --abstand-titel-beischrift: var(--space-1);   /* Kartentitel -> Beischrift direkt darunter */
  --fenster-innenrand: var(--space-6);      /* Dialog und Fenster: Innenrand des Blatts */
  --fenster-radius: var(--radius-card-lg);
  --zelle-y: 6px;                           /* Tabellenzelle oben/unten; die Zeile ist mindestens --row-h hoch */
  --marke-h: 24px;                          /* Marke / Pille */

  /* Layout ----------------------------------------------------------- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 76px;
  --project-sidebar-w: 248px;
  --project-sidebar-w-collapsed: 64px;
  --topbar-h: 64px;
  --drawer-w: 440px;
  --frame-gap: 0px;             /* Rand um die App: seit 17.09.2026 randlos (Emil) */
  --content-max: 1480px;

  /* Bewegung --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 260ms;

  /* Ebenen ----------------------------------------------------------- */
  --z-sticky: 10;
  --z-sidebar: 30;
  --z-drawer: 60;
  --z-overlay: 70;
  --z-popover: 80;
  --z-toast: 1000;
  --z-dialog: 1100;
}

/* Feste Grüntöne ----------------------------------------------------
 * Dieselben Werte in Hell und Dunkel. Für Grün als FLÄCHE (Hauptknöpfe,
 * Seitenleiste, Fortschrittsbalken) und für helle Schrift AUF diesen
 * Flächen. Die Stufen --green-* kehren sich im Dunkelmodus um (hohe Stufen
 * werden Schrift, niedrige werden Tönung) – eine Fläche, die dunkelgrün
 * bleiben soll, nimmt deshalb --fix-green-*. */
.bp-v2 {
  --fix-green-950: #123322;
  --fix-green-900: #173c27;
  --fix-green-800: #205236;
  --fix-green-700: #2e6b42;
  --fix-green-600: #3a8454;
  --fix-green-500: #4caf70;
  --fix-green-400: #74c28f;
  --fix-green-300: #a3d6b3;
  --fix-green-200: #c9e7d2;
  --fix-green-100: #e5f3e8;
  --fix-green-050: #f1f8f3;
  /* Signalfarben als FLÄCHE unter weißer Schrift (Abzeichen, Gefahr-Knöpfe):
     im Dunkeln würden --danger & Co. hell – die Fläche bleibt satt. */
  --fix-danger: #b84d42;
  --fix-danger-strong: #963a31;
  --fix-warning: #b57b25;
  --fix-warning-strong: #8f5f17;
  --fix-info: #537ca5;
  --fix-info-strong: #3e6388;    /* für weiße Schrift: 6,3:1 (auf --fix-info nur 4,4:1) */
  /* Flächen, die im Hellen weiss sind und es bleiben sollen (Belegvorschau,
     QR-Code, Papier): hier ausdrücklich, nicht über --panel. */
  --paper-fix: #ffffff;
  color-scheme: light;
}

/* Inseln: Flächen, die in beiden Darstellungen dunkelgrün bleiben (Leiste,
 * Markenkarten, Sammelleiste, Meldungen). Innen gelten die festen Stufen –
 * alles, was dort --green-* nutzt, sieht in Hell und Dunkel gleich aus.
 * Im Hellen ändert das nichts (fest = beweglich). */
.bp-v2 :is(.global-sidebar, .v2-card--brand, .v2-bulkbar, .v2-toast) {
  --green-950: var(--fix-green-950);
  --green-900: var(--fix-green-900);
  --green-800: var(--fix-green-800);
  --green-700: var(--fix-green-700);
  --green-600: var(--fix-green-600);
  --green-500: var(--fix-green-500);
  --green-400: var(--fix-green-400);
  --green-300: var(--fix-green-300);
  --green-200: var(--fix-green-200);
  --green-100: var(--fix-green-100);
  --green-050: var(--fix-green-050);
  --danger: var(--fix-danger);
  --danger-strong: var(--fix-danger-strong);
  --warning: var(--fix-warning);
  --info: var(--fix-info);
}

/* DUNKELMODUS (Emil, 21.09.2026: "geb der gesamten app und admin page einen
 * dark mode") ---------------------------------------------------------
 * <html data-theme="dark"> setzt der Kopf jeder Seite (Darstellung: Automatisch
 * folgt dem System, Hell, Dunkel – gespeichert als bh-darstellung). Nur die
 * Farbwerte ändern sich; alles, was über Token läuft, folgt von selbst – auch
 * der Bestand über compat/tokens-legacy.css. Kontraste gemessen mit
 * scripts/ui_v2_farben.js.
 *
 * GRAU STATT GRÜN (Emil, UI-Pass 22.09.2026: „im darkmode ist die app zu grün.
 * mehr grau und schwarz. sidebar bleibt grün“). Grund, Karten, Linien und
 * Grautöne sind neutral, fast schwarz, nie ganz. Grün bleibt, wo es etwas
 * bedeutet: Hauptknöpfe, Auswahl, Status, Fortschritt. Die Tönungsstufen
 * (--green-050 bis -200) sind ebenfalls grau: getönte Flächen wie der aktive
 * Reiter oder eine Status-Pille zeigen Grün nur noch als Schrift oder Kontur.
 * Die Leiste ist eine Insel (siehe oben) und bleibt dunkelgrün. */
html.bp-v2[data-theme="dark"],
html.bp-v2[data-theme="dark"] .bp-v2 {
  color-scheme: dark;

  /* Grün: hohe Stufen = Schrift/Kontur, niedrige = Tönung */
  --green-950: #e2f4e8;
  --green-900: #c6ead2;
  --green-800: #a6dcb9;
  --green-700: #8ad2a4;
  --green-600: #6fc08c;
  --green-500: #58a878;
  --green-400: #3f7e58;
  --green-300: #2e5c40;
  --green-200: #2c3531;
  --green-100: #212624;
  --green-050: #1a1d1c;

  /* Flächen */
  --backdrop: #0a0b0b;
  --workspace: #0e0f0f;
  --panel: #171919;
  --panel-muted: #1c1e1e;
  --panel-sunken: #131515;
  --hover-flaeche: #222625;             /* heller als die Karte, dunkler als „gewählt“ */
  --hover-auf-gruen: rgba(255, 255, 255, 0.1);   /* die Seitenleiste bleibt grün - derselbe Schleier */
  --panel-hover: var(--hover-flaeche);
  --panel-selected: #232826;
  --panel-raised: #2a2d2d;

  /* Text */
  --text-primary: #e8eaea;
  --text-secondary: #b0b4b3;
  --text-tertiary: #9a9f9e;
  --text-disabled: #5f6463;
  --text-on-green: #f1f8f3;
  --text-on-green-muted: #b4cebd;

  /* Linien */
  --border-subtle: #2a2d2d;
  --border-default: #373b3b;
  --border-strong: #525857;
  --divider: #232626;

  /* Semantik: Schrift hell, Flächen dunkel getönt */
  --warning: #e3ae55;
  --warning-strong: #f0c886;
  --warning-bg: #2b2112;
  --warning-border: #57431f;

  --danger: #ef9185;
  --danger-strong: #f6b2a8;
  --danger-bg: #2e1815;
  --danger-border: #5d2c25;

  --info: #93b9de;
  --info-strong: #b6d0eb;
  --info-bg: #142231;
  --info-border: #2b4561;

  --neutral: #a3a8a7;
  --neutral-bg: #1f2222;
  --neutral-border: #323636;

  --status-missing: #bea3db;
  --status-missing-bg: #241c2f;
  --status-missing-strong: #d4c0ea;

  --chart-done: #57b27b;
  --chart-review: #3d7655;   /* 3,3:1 auf der Karte; #2f5a41 lag bei 2,2:1 (Durchsicht 03.10.2026) */
  --chart-missing: #d4a14e;
  --chart-missing-track: #3a2f1b;
  --chart-hover: var(--hover-flaeche);
  --chart-3: #86add3;
  --chart-4: #d9a75b;
  --chart-5: #b6a0d2;
  --chart-grid: #292c2c;
  --chart-track: #222525;

  --paper-fix: #ffffff;

  /* Schatten: im Dunkeln trägt Tiefe die Fläche, nicht der Schatten */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px -12px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -16px rgba(0, 0, 0, 0.65);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.45), 0 24px 56px -20px rgba(0, 0, 0, 0.75);
  --shadow-drawer: -1px 0 0 var(--border-subtle), -28px 0 64px -36px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --focus-ring: 0 0 0 3px rgba(111, 192, 140, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(239, 145, 133, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .bp-v2 {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}

/* ==== reset.css ==== */
/* BelegHero UI v2 – Reset
 *
 * Gilt nur unter .bp-v2. Ziel: auf Windows (Chromium/WebView2) und macOS
 * (Chromium/WKWebView) dieselben Grundmaße – keine nativen Bedienelemente,
 * keine Systemschrift, keine UA-Abstände.
 */

html.bp-v2 {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
  background: #f2f4f3;
  color-scheme: light;
  scrollbar-gutter: auto;
}

/* DER WEISSE BLITZ BEIM SEITENWECHSEL (Emil, 20.09.2026: "jedes mal bei seiten
   wechsel flasht alles weiss ganz kurz").
   ========================================================================
   Das Wurzelelement malt die Leinwand - und zwar SCHON, bevor vom neuen
   Dokument irgendetwas anderes steht. Genau in diesem Augenblick war sie
   reinweiss, waehrend der Rest der Anwendung auf einem getoenten Grund sitzt.
   Zwei Regeln haben sich dazu addiert, beide fuer sich gut begruendet:

     theme.css     `html, body, body.bp-app, body.bp-auth { background:
                   oklch(1 0 155) !important }` - der Neutralisierungslauf vom
                   08.08.2026, der den Gruenstich aus dem Seitengrund nahm.
                   Er trifft `html` mit, und sein !important schlaegt die
                   Zeile oben.
     app-neu.css   `html:has(body.bp-app) { background: transparent
                   !important }` - gedacht, damit der Grund des body
                   durchscheint. `transparent` an der Wurzel heisst aber:
                   der Browser malt SEINEN Standard, und der ist weiss.

   Unter v2 traegt die Wurzel deshalb denselben Ton wie das, was gleich
   darueber erscheint: ausserhalb der App-Flaeche `--backdrop`, im
   Arbeitsbereich `--workspace`. Dann ist der erste Bildaufbau bereits richtig
   getoent, und es gibt nichts mehr aufzublitzen.

   `!important` steht hier nicht aus Bequemlichkeit: die beiden Regeln oben
   tragen es selbst, und ohne waere diese wirkungslos. Die Spezifitaet
   (`html.bp-v2` gegen `html`) entscheidet den Gleichstand. */
html.bp-v2 {
  background: var(--backdrop) !important;
}

html.bp-v2:has(body.bp-app) {
  background: var(--workspace) !important;
}

html.bp-v2 body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--backdrop);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: hidden macht body zum Scroll-Container, und dann kleben
     Kopfzeile und Leisten nicht mehr (position: sticky bezieht sich auf den
     nächsten Scroll-Container, nicht auf das Fenster). */
  overflow-x: hidden;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.bp-v2 *,
.bp-v2 *::before,
.bp-v2 *::after {
  box-sizing: border-box;
}

.bp-v2 :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}

.bp-v2 :where(ul, ol)[role="list"],
.bp-v2 :where(.v2-list-reset) {
  list-style: none;
  padding: 0;
}

.bp-v2 :where(img, svg, video, canvas, picture) {
  display: block;
  max-width: 100%;
}

.bp-v2 :where(svg) {
  flex-shrink: 0;
}

.bp-v2 :where(input, button, textarea, select, optgroup) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

.bp-v2 :where(button, [role="button"]) {
  cursor: pointer;
}

.bp-v2 :where(button:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
}

.bp-v2 :where(a) {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bp-v2 :where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

.bp-v2 :where(hr) {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-4) 0;
}

.bp-v2 [hidden]:not([hidden="until-found"]) {
  display: none !important;
}

.bp-v2 :where(:focus) {
  outline: none;
}

.bp-v2 :where(:focus-visible) {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.bp-v2 ::selection {
  background: var(--green-200);
  color: var(--green-950);
}

/* Einheitliche, dezente Rollleisten in Chromium (Windows + macOS gleich). */
.bp-v2 * {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.bp-v2 .v2-visually-hidden,
.bp-v2 .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Alles Anklickbare zeigt die Hand – auch <button>, dessen Browser-Vorgabe der
   Pfeil ist (Klicktest 16.09.2026: viele Knoepfe ohne Zeiger). :where haelt die
   Spezifitaet bei 0, Bausteine koennen es ueberschreiben. */
html.bp-v2 :where(button:not(:disabled), [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], summary, label[for], select:not(:disabled)) {
  cursor: pointer;
}

/* ==== typography.css ==== */
/* BelegHero UI v2 – Typografie
 *
 * Eine Familie (gebündelte Plus Jakarta Sans, variabel 200–800) für alles:
 * Überschriften, Beschriftungen, Daten. Kennzahlen leicht und groß,
 * Beschriftungen mittel und klein. Ziffern in Tabellen/Beträgen tabellarisch.
 */

.bp-v2 :where(h1, .v2-h1) {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.bp-v2 :where(h2, .v2-h2) {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.bp-v2 :where(h3, .v2-h3) {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.bp-v2 :where(h4, .v2-h4) {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.bp-v2 :where(h5, h6) {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.bp-v2 :where(p) {
  max-width: 72ch;
}

.bp-v2 :where(small, .v2-small) {
  font-size: var(--text-sm);
}

.bp-v2 :where(strong, b) {
  font-weight: var(--weight-semibold);
}

.bp-v2 :where(code, kbd, samp, pre) {
  font-family: var(--font-num);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

.bp-v2 :where(kbd) {
  display: inline-flex;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1;
}

/* Rollen ----------------------------------------------------------------- */

.bp-v2 .v2-page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.bp-v2 .v2-page-subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.bp-v2 .v2-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bp-v2 .v2-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.bp-v2 .v2-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.bp-v2 .v2-muted {
  color: var(--text-secondary);
}

.bp-v2 .v2-num,
.bp-v2 .v2-amount,
.bp-v2 :where(td, th).is-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.bp-v2 .v2-amount {
  white-space: nowrap;
}

.bp-v2 .v2-amount.is-negative {
  color: var(--danger-strong);
}

/* Kennzahlen: groß, leicht, eng. */
.bp-v2 .v2-metric {
  font-family: var(--font-num);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
}

.bp-v2 .v2-metric--xl {
  font-size: var(--text-5xl);
}

.bp-v2 .v2-metric--md {
  font-size: var(--text-3xl);
}

.bp-v2 .v2-metric-unit {
  font-size: max(0.5em, var(--text-xs));
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  color: var(--text-tertiary);
  margin-left: 0.15em;
}

.bp-v2 .v2-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bp-v2 .v2-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==== layout.css ==== */
/* BelegHero UI v2 – Seitenlayout
 *
 * Seitenkopf, Abschnitte, Raster und Stapel innerhalb von #app-main.
 * Die App-Hülle selbst (Rahmen, Leisten, Kopfzeile) steht in shell.css.
 */

.bp-v2 .v2-page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-7) var(--space-9);
}

.bp-v2 .v2-page--wide {
  max-width: none;
}

.bp-v2 .v2-page--flush {
  padding: 0;
}

.bp-v2 .v2-page-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--abstand-seitenkopf);
}

.bp-v2 .v2-page-head-text {
  flex: 1 1 320px;
  min-width: 0;
}

.bp-v2 .v2-page-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-section {
  margin-top: var(--space-7);
}

.bp-v2 .v2-section:first-child {
  margin-top: 0;
}

.bp-v2 .v2-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bp-v2 .v2-section-title {
  flex: 1 1 auto;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
}

/* Stapel und Reihen ------------------------------------------------------ */

.bp-v2 .v2-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bp-v2 .v2-stack--xs { gap: var(--space-1); }
.bp-v2 .v2-stack--sm { gap: var(--space-2); }
.bp-v2 .v2-stack--lg { gap: var(--space-6); }

.bp-v2 .v2-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bp-v2 .v2-row--sm { gap: var(--space-2); }
.bp-v2 .v2-row--wrap { flex-wrap: wrap; }
.bp-v2 .v2-row--between { justify-content: space-between; }
.bp-v2 .v2-row--start { align-items: flex-start; }

.bp-v2 .v2-grid {
  display: grid;
  gap: var(--abstand-karten);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 280px), 1fr));
}

.bp-v2 .v2-grid-2 { display: grid; gap: var(--abstand-karten); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-v2 .v2-grid-3 { display: grid; gap: var(--abstand-karten); grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Arbeitsbereich mit Detailspalte (Tabelle + Drawer) -------------------- */

.bp-v2 .v2-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.bp-v2 .v2-workbench.has-detail {
  grid-template-columns: minmax(0, 1fr) var(--drawer-w);
}

.bp-v2 .v2-workbench-detail {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-3));
  max-height: calc(100dvh - var(--topbar-h) - var(--frame-gap) * 2 - var(--space-5));
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.bp-v2 .v2-divider {
  height: 1px;
  background: var(--divider);
  border: 0;
  margin: var(--space-4) 0;
}

/* ==== shell.css ==== */
/* BelegHero UI v2 – App-Hülle
 *
 *   .app-frame
 *   ├── aside#global-sidebar   feste Spalte, 232px, immer gleiche Reihenfolge
 *   ├── aside#project-sidebar  optionale Spalte, 248px, nur im Projektkontext
 *   └── .v2-stage
 *       ├── header#app-topbar  Brotkrumen, Suche, Zeitraum, Hinweise, Profil
 *       └── main#app-main      Seiteninhalt
 *
 * Gescrollt wird das Dokument (nicht ein innerer Container): bestehende
 * Seitenlogik mit window.scrollTo, klebenden Elementen und Beobachtern
 * funktioniert dadurch unverändert. Leisten und Kopfzeile kleben.
 */

.bp-v2 .app-frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* DIE LEISTEN GLEITEN (Emil, 20.09.2026: "jetzt grade snappt alles direkt").
     Ein- und Ausklappen aendert nur `--sidebar-w`, und eine Rasterspalte
     springt ohne diese Zeile von 232 auf 76 Pixel. Animiert wird die Spalte
     selbst, nicht die Breite der Leiste darin: so wandert der Inhalt daneben
     im selben Zug mit, statt hinterherzurutschen. Ueber `--dur` gebunden -
     bei `prefers-reduced-motion` ist das 0ms, und es springt wieder. */
  transition: grid-template-columns var(--dur) var(--ease-in-out);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--workspace);
}

.bp-v2 .app-frame.has-project-sidebar {
  grid-template-columns: var(--sidebar-w) var(--project-sidebar-w) minmax(0, 1fr);
}

/* Projektleiste eingeklappt (Knopf an der Leiste oder in der Kopfzeile, nur
   am Rechner): sie verschwindet nicht, sondern wird zur schmalen Leiste mit
   Monogramm, den Schrittnummern 1–4 und dem Fortschrittsbalken. Emil,
   17.09.2026: „dass man die evtl. einklappen kann" – eingeklappt bleibt
   sichtbar, wo man im Projekt steht. */
@media (min-width: 1200px) {
  .bp-v2 .app-frame.has-project-sidebar.is-project-sidebar-hidden {
    grid-template-columns: var(--sidebar-w) var(--project-sidebar-w-collapsed) minmax(0, 1fr);
  }

  .bp-v2 .is-project-sidebar-hidden .project-sidebar {
    padding: var(--space-4) var(--space-2) var(--space-3);
    align-items: center;
    overflow: visible;
    /* Punkt 13 (Henry, 17.09.2026): eingeklappt soll daneben nicht "noch eine
       Sidebar" stehen. Ohne eigene Flaeche und ohne Trennlinie bleibt nur die
       Schrittspur - die Arbeitsflaeche beginnt optisch direkt hinter der
       Hauptnavigation. */
    background: transparent;
    border-right: 0;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-kopf {
    justify-content: center;
    margin-bottom: var(--space-3);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-back,
  .bp-v2 .is-project-sidebar-hidden .ps-switch-text,
  .bp-v2 .is-project-sidebar-hidden .ps-switch > .v2-icon,
  .bp-v2 .is-project-sidebar-hidden .ps-meta,
  .bp-v2 .is-project-sidebar-hidden .ps-steps-label,
  .bp-v2 .is-project-sidebar-hidden .ps-link > span,
  .bp-v2 .is-project-sidebar-hidden .ps-link > .v2-icon--sm,
  .bp-v2 .is-project-sidebar-hidden .ps-progress-head {
    display: none;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-collapse .v2-icon {
    transform: rotate(180deg);
  }

  /* Der Schrittname bleibt fuer die Vorlesefunktion da (der Link hiesse sonst
     nur „3“); sichtbar ist er in der Sprechblase. */
  .bp-v2 .is-project-sidebar-hidden .ps-step-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-switch {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    margin-bottom: var(--space-4);
  }

  /* Emil, 23.09.2026: „oben Projekt-Logo unzentriert“. Ausgeklappt steht das Kuerzel oben neben
     zwei Textzeilen (align-self: flex-start); eingeklappt ist es allein im Kasten und gehoert in
     die Mitte. */
  .bp-v2 .is-project-sidebar-hidden .ps-switch .v2-monogram {
    align-self: center;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-steps {
    width: 100%;
    justify-items: center;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step {
    grid-template-columns: 30px;
    width: 46px;
    min-height: 46px;
    padding: 8px;
    justify-content: center;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-links {
    width: 100%;
    justify-items: center;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-link {
    width: 40px;
    justify-content: center;
    padding: 8px 0;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-progress {
    width: 100%;
    padding: var(--space-3) 4px 0;
  }

  /* SCHMALE LEISTE AUFGERAEUMT (Emil, UI-Pass 22.09.2026: „eingeklappte projekt
     sidebar gefällt mir noch nicht“). Alle Schritte gleich gross und rund:
     erledigt = gruener Kreis mit Haken, aktuell = gefuellter gruener Kreis mit
     Ring, offen = Umriss. Eine feine Linie verbindet sie und faerbt sich gruen,
     soweit erledigt ist. Keine Karte mit Schatten mehr um den aktuellen
     Schritt - er war das einzige Quadrat in einer Reihe aus Kreisen. */
  .bp-v2 .is-project-sidebar-hidden .ps-steps {
    --ps-kreis: 32px;
    --ps-luecke: 10px;
    gap: var(--ps-luecke);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-steps > li {
    position: relative;
    display: grid;
    justify-items: center;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% + var(--ps-kreis) / 2 + 3px);
    height: calc(100% + var(--ps-luecke) - var(--ps-kreis) - 6px);
    width: 2px;
    border-radius: 1px;
    transform: translateX(-50%);
    background: var(--border-default);
    pointer-events: none;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-steps > li:has(> .ps-step.is-done)::after {
    background: var(--fix-green-600);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step,
  .bp-v2 .is-project-sidebar-hidden .ps-step[aria-current="step"] {
    grid-template-columns: var(--ps-kreis);
    width: 40px;
    min-height: 40px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step:hover {
    background: transparent;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step-num {
    width: var(--ps-kreis);
    height: var(--ps-kreis);
    transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step:hover .ps-step-num {
    border-color: var(--hover-akzent);
  }

  /* Feste Stufe: im Dunkeln wuerde --green-600 hell und der weisse Haken verschwaende. */
  .bp-v2 .is-project-sidebar-hidden .ps-step.is-done .ps-step-num {
    border-color: var(--fix-green-600);
    background: var(--fix-green-600);
    color: #f6fbf7;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step[aria-current="step"] .ps-step-num {
    border-color: var(--fix-green-700);
    background: var(--fix-green-700);
    color: #f6fbf7;
    box-shadow: 0 0 0 3px var(--workspace), 0 0 0 5px var(--green-300);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-step:focus-visible {
    box-shadow: none;
  }


  .bp-v2 .is-project-sidebar-hidden .ps-step:focus-visible .ps-step-num {
    box-shadow: var(--focus-ring);
  }

  /* Der Aufklapp-Pfeil wie der Einklapp-Knopf der Hauptleiste: 28 px, mittig. */
  .bp-v2 .is-project-sidebar-hidden .ps-kopf {
    width: 100%;
    margin-bottom: var(--space-3);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-collapse {
    width: 28px;
    height: 28px;
  }

  /* „Mehr“: ein runder Knopf in der Groesse der Schritte, die Punkte kraeftig. */
  .bp-v2 .is-project-sidebar-hidden .ps-links {
    margin-top: var(--space-3);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-link {
    width: 32px;
    height: 32px;
    /* „Optionen-Knopf gestretched“ (Emil, 23.09.2026): die offene Leiste gibt jedem Link 40px
       Mindesthoehe - bei 32px Breite wurde der Kreis zum Oval. */
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
  }

  .bp-v2 .is-project-sidebar-hidden .ps-mehr-knopf {
    border: 1.5px solid var(--border-default);
    background: var(--panel);
    color: var(--text-secondary);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-mehr-knopf:hover,
  .bp-v2 .is-project-sidebar-hidden .ps-mehr-knopf[aria-expanded="true"] {
    border-color: var(--hover-akzent);
    color: var(--hover-akzent);
  }

  .bp-v2 .is-project-sidebar-hidden .ps-mehr-knopf .v2-icon circle {
    fill: currentColor;
  }

  /* Sprechblasen nur eingeklappt: offen steht der Name ja daneben. */
  .bp-v2 .app-frame:not(.is-project-sidebar-hidden) .project-sidebar [data-tip]::after {
    display: none;
  }
}

/* Ausserhalb der schmalen Leiste (offen, Schublade) keine Sprechblasen der Leiste. */
@media (max-width: 1199px) {
  .bp-v2 .project-sidebar [data-tip]::after {
    display: none;
  }
}

/* ======================================================================
 * Globale Sidebar
 * ==================================================================== */

.bp-v2 .global-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background:
    radial-gradient(140% 60% at 0% 0%, rgba(76, 175, 112, 0.16) 0%, rgba(76, 175, 112, 0) 60%),
    linear-gradient(180deg, var(--green-900) 0%, var(--green-950) 100%);
  color: var(--text-on-green);
  overflow: hidden;
}

/* Kopf der Hauptnavigation: Wortzeichen und der Einklapp-Knopf nebeneinander
   (Henry, 17.09.2026, Teil C1). Eingeklappt stehen sie uebereinander. */
.bp-v2 .gs-kopf {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 var(--space-2) var(--space-6);
}

.bp-v2 .gs-kopf .gs-brand {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.bp-v2 .gs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 0 var(--space-2) var(--space-6);
  padding: 0 4px;
  border-radius: var(--radius-md);
  color: #f6fbf7;
  text-decoration: none;
}

/* Die Marke führt zur Startseite - sie antwortet wie jede Zeile der Leiste, mit demselben Schleier. */
.bp-v2 .gs-brand:hover {
  background: var(--hover-auf-gruen);
}

.bp-v2 .gs-brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--green-400);
}

/* DIE WEISSE KACHEL STATT DES GRUENEN QUADRATS (Henry, 22.09.2026, nach seiner
   Markenuebersicht). Die Kachel ist die Zeichnung selbst (core/icons.js,
   brandMark) - keine Flaeche, kein Verlauf mehr darunter; der Schatten liegt
   weich unter der Form wie im Vorbild. Schriftzug wie in der Fassung fuer
   dunklen Grund: „Beleg“ gebrochen weiss, „Hero“ hellgruen, Jakarta 800. */
.bp-v2 .gs-brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
}

.bp-v2 .gs-brand-mark svg,
.bp-v2 .gs-brand-mark img {
  display: block;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}

.bp-v2 .gs-brand-word {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #f9f5f2;
  white-space: nowrap;
}

.bp-v2 .gs-brand-word span {
  color: #a8e1b2;
}

.bp-v2 .gs-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .gs-nav-label {
  margin: var(--space-2) 14px var(--space-2);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 231, 210, 0.5);
}

.bp-v2 .gs-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: rgba(241, 248, 243, 0.78);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bp-v2 .gs-item .v2-icon {
  width: 19px;
  height: 19px;
  color: rgba(201, 231, 210, 0.72);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Auf grünem Grund EIN Schleier für jedes Hover (tokens.css, --hover-auf-gruen); Schrift und Zeichen werden weiß. */
.bp-v2 .gs-item:hover {
  background: var(--hover-auf-gruen);
  color: #ffffff;
}

.bp-v2 .gs-item:hover .v2-icon {
  color: currentColor;
}

.bp-v2 .gs-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green-400);
}

.bp-v2 .gs-item[aria-current="page"],
.bp-v2 .gs-item.is-active {
  background: var(--green-100);
  color: var(--green-950);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}

.bp-v2 .gs-item[aria-current="page"]:focus-visible,
.bp-v2 .gs-item.is-active:focus-visible {
  box-shadow: 0 0 0 2px var(--green-950), 0 0 0 4px var(--green-300);
}

/* Gewählt bleibt beim Überfahren gewählt - kein zweiter Hover-Ton (vorher: weiß). */
.bp-v2 .gs-item[aria-current="page"]:hover,
.bp-v2 .gs-item.is-active:hover {
  background: var(--green-100);
}

.bp-v2 .gs-item[aria-current="page"] .v2-icon,
.bp-v2 .gs-item.is-active .v2-icon {
  color: var(--green-700);
}

/* Unterseite eines Bereichs (Rechnungen → Stammdaten): eine stille Textzeile unter dem Eintrag.

   DAS IST DER VIERTE ANLAUF, und er nimmt etwas weg, statt etwas dazuzugeben (Henry, 06.10.2026: „die
   Stammdaten-Ansicht in der Sidebar gefällt mir immer noch nicht“). Die drei davor haben die Unterseite jedes Mal
   anders MARKIERT - 17.09. eine helle Pille, 22.09. „man sieht nicht, dass Stammdaten gewählt ist“, 02.10. Schleier
   und heller Strich - und jedes Mal blieb es ein zweites Markierungselement neben dem Oberpunkt: Führungslinie,
   Schleier, Strich, dazu der Oberpunkt halb gewählt. Vier Signale für eine Aussage.

   JETZT EIN SIGNAL JE EBENE. Der Bereich trägt die helle Pille wie jeder andere Eintrag - auf Rechnungen UND auf
   Stammdaten, denn man ist in beiden im Bereich Rechnungen. Die Unterseite ist eine Textzeile ohne Fläche, ohne
   Linie, ohne Strich: ihre Schrift beginnt auf der Kante der Bereichsbeschriftung, ein Punkt unter dem
   Bereichszeichen hängt sie an den Bereich. Gewählt = weiße, kräftige Schrift und der Punkt in Grün (so sieht man,
   dass Stammdaten offen ist, ohne dass eine zweite Fläche entsteht); nicht gewählt = gedämpft. */
.bp-v2 .gs-sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}

.bp-v2 .gs-subitem {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  /* 14px Innenabstand + 19px Zeichen + 12px Lücke = die Kante der Beschriftung des Oberpunkts. */
  padding: 0 14px 0 45px;
  border-radius: var(--radius-pill);
  color: rgba(241, 248, 243, 0.66);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Der Punkt sitzt unter der Mitte des Bereichszeichens: 14px Innenabstand + halbes 19px-Zeichen, minus der halbe Punkt. */
.bp-v2 .gs-subitem::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  /* In der Farbe der Schrift, gedämpft: beim Überfahren färbt sich die Schrift weiß, und der Punkt geht mit - ohne eigene
     Hintergrundfarbe im Hover (die Leiste kennt EINEN Schleier, tests/test_hover_einheitlich.py). */
  background: currentColor;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.bp-v2 .gs-subitem:hover {
  background: var(--hover-auf-gruen);
  color: #ffffff;
}

.bp-v2 .gs-subitem:hover::before {
  opacity: 0.9;
}

.bp-v2 .gs-subitem:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green-400);
}

.bp-v2 .gs-subitem[aria-current="page"] {
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.bp-v2 .gs-subitem[aria-current="page"]::before {
  background: var(--green-300);
  opacity: 1;
}

/* Am Finger so hoch wie die Hauptpunkte nahe genug: eine Zeile von 36px ist dort zu knapp zum Treffen. */
@media (pointer: coarse) {
  .bp-v2 .gs-subitem {
    height: 42px;
  }
}

.bp-v2 .is-sidebar-collapsed .gs-sub {
  display: none;
}

.bp-v2 .gs-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-v2 .gs-item-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #eaf5ed;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bp-v2 .gs-item.is-active .gs-item-count,
.bp-v2 .gs-item[aria-current="page"] .gs-item-count {
  /* festes Gruen: weisse Zahl - siehe test_weisse_schrift_steht_nur_auf_festen_farben */
  background: var(--fix-green-700);
  color: #fff;
}

.bp-v2 .gs-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(201, 231, 210, 0.1);
}

.bp-v2 .gs-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: var(--space-2);
  padding: 8px;
  border: 0;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: #f1f8f3;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .gs-profile:hover,
.bp-v2 .gs-profile[aria-expanded="true"] {
  background: var(--hover-auf-gruen);
}

.bp-v2 .gs-profile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green-400);
}

.bp-v2 .gs-profile[aria-current="page"],
.bp-v2 .gs-profile.is-active {
  background: rgba(229, 243, 232, 0.16);
}

/* Auf der aufgehellten Fläche des gewählten Profils stand „Pilot-Zugang“ mit 3,99:1 (gemessen 12.10.2026). */
.bp-v2 .gs-profile.is-active .gs-profile-sub {
  color: rgba(241, 248, 243, 0.82);
}

.bp-v2 .gs-profile .v2-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(150deg, var(--green-300), var(--green-500));
  color: var(--green-950);
}

.bp-v2 .gs-profile-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.bp-v2 .gs-profile-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .gs-profile-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-on-green-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .gs-profile > .v2-icon {
  width: 16px;
  height: 16px;
  color: var(--text-on-green-muted);
}

/* Eingeklappt (Symbolleiste) */

.bp-v2 .app-frame.is-sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
}

.bp-v2 .is-sidebar-collapsed .global-sidebar {
  padding-inline: var(--space-3);
  /* DIE SPRECHBLASEN STEHEN NEBEN DER LEISTE, NICHT DARIN (Emil, 20.09.2026).
     Eingeklappt wandert jede Beschriftung in `data-tip` (shell.js,
     syncSidebarBeschriftung) und erscheint beim Ueberfahren rechts vom Symbol -
     so hat Henry es am 17.09. vorgesehen. Die Leiste hat aber `overflow: hidden`,
     und die Sprechblase ist ein `::after` INNERHALB des Eintrags: sie endete an
     der Kante nach genau einem Buchstaben. Vom Tooltip "Navigation ausklappen"
     blieb ein "N" auf gruenem Grund stehen - das sah nach einem Anzeigefehler
     aus, und die Funktion gab es faktisch nicht.

     Eingeklappt gibt es nichts zu beschneiden: jedes Textlabel steht hier auf
     `display: none`, uebrig bleiben mittige Symbole. Das Beschneiden bleibt
     deshalb dem offenen Zustand vorbehalten, wo lange Projekt- und Kontonamen
     wirklich anstossen koennen - und wo es keine Sprechblasen gibt, weil der
     Name daneben steht. */
  overflow: visible;
}

.bp-v2 .is-sidebar-collapsed .gs-brand {
  justify-content: center;
  margin-inline: 0;
}

/* AUSBLENDEN STATT VERSCHWINDEN (Emil, 20.09.2026).
   Hier stand `display: none` fuer alle Beschriftungen. Das hat zwei Dinge auf
   einmal falsch gemacht:

     1. Es ist nicht animierbar. Die Texte waren im selben Bild weg, in dem der
        Klick kam, waehrend die Leiste daneben noch ihre Breite aenderte.
     2. Es nahm den Navigationslinks ihren NAMEN. Ein `.gs-item` traegt kein
        eigenes aria-label - der Name steckt im Label. Eingeklappt meldete der
        Zugaenglichkeitsbaum deshalb Links voellig ohne Beschriftung.

   `opacity` + Breite null blendet weich aus, laesst den Text aber im Baum
   stehen. `overflow: hidden` am Text selbst haelt ihn in seiner (schrumpfenden)
   Spur - die Leiste darf ihn nicht beschneiden, weil dort die Sprechblasen
   hinausragen muessen. */
.bp-v2 .gs-brand-word,
.bp-v2 .gs-item-label,
.bp-v2 .gs-item-count,
.bp-v2 .gs-nav-label,
.bp-v2 .gs-profile-text {
  transition: opacity var(--dur-fast) var(--ease-out);
}

.bp-v2 .is-sidebar-collapsed .gs-brand-word,
.bp-v2 .is-sidebar-collapsed .gs-item-label,
.bp-v2 .is-sidebar-collapsed .gs-item-count,
.bp-v2 .is-sidebar-collapsed .gs-nav-label,
.bp-v2 .is-sidebar-collapsed .gs-profile-text {
  opacity: 0;
  /* `flex: 0 0 0` statt nur `width: 0` - die Beschriftung ist ein Flex-Kind mit
     `flex: 1 1 auto`, und das haelt sie sonst auf ihrer Inhaltsbreite. */
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  margin: 0;
  /* UND KEIN INNENABSTAND (Emil, 21.09.2026: "ein Symbol aus der Reihe"). Die Zahl
     am Eintrag (Projekte: Anzahl) hat `padding: 0 7px`; bei `border-box` bleiben
     davon trotz Breite null 14 px stehen - unsichtbar, aber das Symbol daneben
     rutschte um 7 px nach links. Nur bei Eintraegen mit Zahl, deshalb nur einer. */
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/* Das Chevron am Profil hat keinen Namen zu verlieren und geht ganz. */
.bp-v2 .is-sidebar-collapsed .gs-profile > .v2-icon {
  display: none;
}

.bp-v2 .is-sidebar-collapsed .gs-item {
  justify-content: center;
  padding: 0;
  gap: 0;      /* sonst haelt der Flex-Abstand die Luecke der leeren Beschriftung offen */
}

.bp-v2 .is-sidebar-collapsed .gs-profile {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}

/* DIE LEISTE HAT EINE MITTE (Emil, UI-Pass 22.09.2026: „pfeil in der sidebar ist
   nicht zentriert“). Zeichen und Avatar standen 5 px links der Mitte: Marke und
   Konto behielten ihren Flex-Abstand von 10 px neben der auf Breite null
   geschrumpften Beschriftung - wie zuvor schon die Eintraege. */
.bp-v2 .is-sidebar-collapsed .gs-brand {
  gap: 0;
  padding: 0;
}

/* Der Einklapp-Knopf: klein und ruhig, erst beim Ueberfahren deutlich - er soll
   auffindbar sein, aber der Navigation nicht die Aufmerksamkeit wegnehmen. */
.bp-v2 .global-sidebar .gs-collapse {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-on-green-muted);
  opacity: 0.75;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.bp-v2 .global-sidebar .gs-collapse:hover {
  background: var(--hover-auf-gruen);
  color: var(--text-on-green);
  opacity: 1;
}

.bp-v2 .global-sidebar .gs-collapse:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--green-400);
}

.bp-v2 .global-sidebar .gs-collapse .v2-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.bp-v2 .is-sidebar-collapsed .gs-kopf {
  flex-direction: column;
  gap: var(--space-2);
  margin-inline: 0;
}

.bp-v2 .is-sidebar-collapsed .gs-collapse .v2-icon {
  transform: rotate(180deg);
}

/* Unter 1200 px ist die Hauptnavigation eine Schublade - da gibt es nichts
   einzuklappen, das erledigt der Knopf in der Kopfzeile. */
@media (max-width: 1199px) {
  .bp-v2 .global-sidebar .gs-collapse {
    display: none;
  }
}

/* ======================================================================
 * Projekt-Sidebar
 * ==================================================================== */

.bp-v2 .project-sidebar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sidebar) - 1);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--panel-muted);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bp-v2 .ps-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin: 0 0 var(--space-4);
}

/* Einklapp-Knopf an der Leiste selbst; unter 1200 px ist die Leiste eine
   Schublade und der Knopf verschwindet. */
.bp-v2 .ps-collapse {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bp-v2 .ps-collapse:hover { background: var(--hover-flaeche); color: var(--text-primary); }
.bp-v2 .ps-collapse:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bp-v2 .ps-collapse .v2-icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
@media (max-width: 1199px) {
  .bp-v2 .ps-collapse { display: none; }
}

.bp-v2 .ps-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0 0 0 -6px;
  padding: 0 10px 0 6px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.bp-v2 .ps-back:hover {
  background: var(--hover-flaeche);
  color: var(--text-primary);
}

.bp-v2 .ps-back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .ps-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text-primary);
  text-align: left;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.04);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .ps-switch:hover {
  border-color: var(--hover-akzent);
}

.bp-v2 .ps-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .ps-switch .v2-monogram {
  align-self: flex-start;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 13px;
}

.bp-v2 .ps-switch-text {
  display: grid;
  /* EINE SPALTE, DIE SCHRUMPFEN DARF (Emil, 23.09.2026: „das geht null“): ohne `minmax(0, …)` wuchs sie auf
     die Breite des laengsten nicht umbrechenden Teils - „Testdaten Mock (loeschbar)“ lief unter den Pfeil. */
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

/* Bis zu zwei Zeilen statt nach wenigen Zeichen „…“; der volle Name steht im
   Tooltip des Knopfs. */
.bp-v2 .ps-switch-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bp-v2 .ps-switch > .v2-icon {
  flex: none;
  /* Auf Hoehe des Namens, nicht mitten durch die Zeilen darunter. */
  align-self: flex-start;
  margin-top: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

/* EINE ZEILE STATT VIER (Henry, 17.09.2026): Zeitraum und Status stehen
   nebeneinander unter dem Projektnamen, der Mandant nur, wenn es nicht der
   angemeldete Nutzer selbst ist. Seit dem UI-Pass (22.09.2026) IN der Karte,
   direkt unter dem Namen, statt lose darunter. */
.bp-v2 .ps-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.bp-v2 .ps-meta[hidden] {
  display: none;
}

.bp-v2 .ps-switch {
  margin-bottom: var(--space-5);
}

.bp-v2 .ps-meta-teil {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Mandant hat eine eigene Zeile; Zeitraum und Status teilen sich die
   naechste - ein umbrechendes „· 11.03.–14.08.2026“ am Zeilenanfang sah nach
   Fehler aus. */
.bp-v2 .ps-meta > [data-ps-client] {
  flex-basis: 100%;
  /* Der Mandant darf auf zwei Zeilen gehen, statt nach „Testdaten Mock (lo…“ abzubrechen. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Menue „Projekt wechseln“: gleich grosse Kuerzel, Namen ueber zwei Zeilen
   statt mitten im Wort abgeschnitten (UI-Pass 22.09.2026). */
.bp-v2 .ps-menu-projekt {
  align-items: center;
  min-height: 44px;
  white-space: normal;
}

.bp-v2 .ps-menu-kuerzel {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
}

.bp-v2 .ps-menu-name {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.bp-v2 .ps-steps-label {
  margin: 0 4px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bp-v2 .ps-steps {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .ps-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px 8px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .ps-step:hover {
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}

.bp-v2 .ps-step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .ps-step-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.bp-v2 .ps-step-num .v2-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.bp-v2 .ps-step-text {
  min-width: 0;
  line-height: 1.25;
}

.bp-v2 .ps-step-title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.bp-v2 .ps-step-sub {
  display: block;
  margin-top: 1px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .ps-step.is-done .ps-step-num {
  border-color: var(--green-600);
  background: var(--green-100);
  color: var(--green-700);
}

.bp-v2 .ps-step[aria-current="step"] {
  border-color: var(--border-subtle);
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.bp-v2 .ps-step[aria-current="step"]:focus-visible {
  box-shadow: var(--focus-ring), var(--shadow-card);
}

.bp-v2 .ps-step[aria-current="step"]:hover {
  border-color: var(--hover-akzent);
}

.bp-v2 .ps-step[aria-current="step"] .ps-step-num {
  border-color: var(--fix-green-700);
  background: var(--fix-green-700);
  color: #f6fbf7;
}

.bp-v2 .ps-step[aria-current="step"] .ps-step-title {
  font-weight: var(--weight-semibold);
  color: var(--green-900);
}

.bp-v2 .ps-step.is-locked {
  opacity: 0.62;
}

.bp-v2 .ps-step.is-locked .ps-step-num {
  border-style: dashed;
}

/* EINE HANDLUNG IST NOETIG (Henry, 07.10.2026: „eine rote 1 … dass man weiß, man muss da was tun“) - heute das
   getrennte Postfach an „Quellen und Belege“ (boot.js readSteps, data-alarm am alten Reiter). Rot wie jede Stoerung,
   eine Zahl wie an einer Glocke; der Untertitel sagt, was zu tun ist. Feste Stufe (--fix-danger), damit die weisse
   Zahl auch im Dunkeln lesbar bleibt. */
.bp-v2 .ps-step-num {
  position: relative;
}
.bp-v2 .ps-step-alarm {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--fix-danger);
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--workspace);
}
.bp-v2 .ps-step.has-alarm .ps-step-sub {
  color: var(--danger-strong);
  font-weight: var(--weight-medium);
}

.bp-v2 .ps-progress {
  margin-top: auto;
  padding: var(--space-4) 4px 0;
}

.bp-v2 .ps-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.bp-v2 .ps-progress-head strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
 * Bühne + Kopfzeile
 * ==================================================================== */

/* KEIN `min-height: 100%` (Emil, 26.09.2026: „danach scrollt die Seite automatisch ultra weit nach unten in
   blank space“). Im Raster von .app-frame rechnet WebKit (Mac-App, Safari) die 100 % gegen die ALTE Zeilenhoehe:
   klappt eine lange Liste zu, haelt die Buehne die Zeile auf ihrer bisherigen Hoehe, und die Seite schrumpft nie
   wieder - im WKWebView gemessen 4354 px statt 1620, 2830 px davon leer. Chrome rechnet neu, darum fiel es nur in
   der App auf. Die Rasterzeile streckt die Buehne ohnehin auf ihre Hoehe (mindestens 100dvh am Rahmen); unter
   1200 px ist der Rahmen ein Block, dort wirkten die 100 % nie. */
.bp-v2 .v2-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bp-v2 .v2-topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sidebar) - 2);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-h);
  padding: 0 var(--space-7);
  background: var(--workspace);
  transition: box-shadow var(--dur) var(--ease-out);
}

.bp-v2 .v2-topbar.is-scrolled {
  box-shadow: 0 1px 0 var(--border-subtle), 0 8px 20px -18px rgba(18, 51, 34, 0.35);
}

/* EIN ZUKLAPP-KNOPF REICHT (Emil, UI-Pass 22.09.2026: „die drei striche zum
   sidebar zuklappen sind überflüssig“). Am Rechner klappt der Pfeil an der
   Leiste selbst; die drei Striche gibt es nur, wo die Leiste eine Schublade
   ist (responsive.css, unter 1200 px). Eine Stufe genauer als .v2-icon-btn,
   das im Buendel spaeter steht. */
.bp-v2 .v2-topbar .tb-menu {
  display: none;
  flex: none;
}

/* RUECKWEG AUF UNTERSEITEN (UI-Pass, Punkt 26). Am Rechner tragen ihn die
   Brotkrumen und der Link „Zurück zu …“ über dem Titel; der Pfeil in der
   Kopfzeile erscheint erst, wo die Brotkrumen fehlen (responsive.css). */
.bp-v2 .v2-topbar .tb-zurueck {
  display: none;
  flex: none;
  margin-left: -6px;
}

.bp-v2 .v2-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 var(--space-2) -4px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
}

.bp-v2 .v2-zurueck:hover {
  color: var(--text-primary);
  background: var(--hover-flaeche);
}

.bp-v2 .v2-zurueck:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Dasselbe fuer die Projektleiste: am Rechner klappt sie der Pfeil neben
   „Alle Projekte“ (eingeklappt: derselbe Pfeil, gedreht). Der Knopf in der
   Kopfzeile bleibt nur, wo die Leiste eine Schublade ist. */
@media (min-width: 1200px) {
  .bp-v2 .v2-topbar .tb-project-toggle {
    display: none;
  }
}

/* Die Brotkrumen geben Breite ab, bevor Knöpfe aus der Kopfzeile laufen:
 * der Bereich bleibt ganz, Projektname und Seitenname kürzen mit „…“. */
.bp-v2 .tb-crumbs-nav {
  flex: 0 1 auto;
  min-width: 0;
}

.bp-v2 .tb-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.bp-v2 .tb-crumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bp-v2 .tb-crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  transform: rotate(45deg);
  margin-right: 4px;
  flex: none;
}

.bp-v2 .tb-crumbs li:first-child:not(:last-child) {
  flex: none;
}

.bp-v2 .tb-crumbs a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.bp-v2 .tb-crumbs a:hover {
  color: var(--hover-akzent);
}

.bp-v2 .tb-crumbs [aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .tb-search {
  position: relative;
  flex: 0 1 340px;
  margin-left: auto;
  min-width: var(--control-h);
  container: tb-suche / inline-size;
}

.bp-v2 .tb-search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--control-h);
  padding: 0 8px 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .tb-search-btn:hover {
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}

.bp-v2 .tb-search-btn {
  overflow: hidden;
}

/* Wird die Suche schmal (lange Brotkrumen, Kontextfilter, Projektleiste),
   bleibt nur das Symbol – nie Text, der unter die Aktionen laeuft. */
@container tb-suche (max-width: 190px) {
  .bp-v2 .tb-search-btn {
    justify-content: center;
    width: var(--control-h);
    margin-left: auto;
    padding: 0;
  }

  .bp-v2 .tb-search-btn > span,
  .bp-v2 .tb-search-btn > kbd {
    display: none;
  }
}

.bp-v2 .tb-search-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .tb-search-btn > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .tb-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

.bp-v2 .tb-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 12px 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.bp-v2 .tb-context .v2-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.bp-v2 .tb-context:hover {
  border-color: var(--hover-akzent);
}

.bp-v2 .tb-context:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .tb-profile {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.bp-v2 .tb-profile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .tb-profile .v2-avatar {
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

/* Ohne eigenen Rand: der Hover-Rand als Ring - dasselbe Dunkelgrün wie jeder Knopfrand (tokens.css, „Hover“). */
.bp-v2 .tb-profile:hover,
.bp-v2 .tb-profile[aria-expanded="true"] {
  box-shadow: 0 0 0 1px var(--hover-akzent);
}

/* App herunterladen: sichtbar, aber in der zweiten Reihe – kein gefüllter
 * Knopf, sonst empfiehlt jede Seite (Abo, Nutzung …) als Erstes den Download.
 * In der App fehlt er ganz (shell.js). */
.bp-v2 .tb-download {
  height: var(--icon-btn);
  padding: 0 var(--space-3) 0 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.bp-v2 .tb-download .v2-icon {
  color: var(--green-700);
}

.bp-v2 .tb-download:hover {
  color: var(--hover-akzent);
}

/* Neben der Projektleiste wird es eng: dann nur das Zeichen (Name im Tooltip). */
@media (min-width: 1200px) and (max-width: 1439px) {
  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-actions {
    gap: 10px;
  }
}

@media (min-width: 1200px) and (max-width: 1799px) {
  /* Die Suche wird zur Lupe, bevor der Projektname gekürzt wird. */
  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-search {
    flex: none;
  }

  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-search-btn {
    justify-content: center;
    width: var(--control-h);
    padding: 0;
  }

  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-search-btn > span,
  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-search-btn > kbd {
    display: none;
  }

  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-download {
    width: var(--icon-btn);
    padding: 0;
    border-radius: 50%;
  }

  .bp-v2 .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .tb-download-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* WhatsApp in der Markenfarbe der App: das Zeichen erkennt man an der Form. */
.bp-v2 .tb-whatsapp {
  color: var(--green-700);
}

.bp-v2 .tb-whatsapp:hover:not(:disabled) {
  color: var(--hover-akzent);
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}

.bp-v2 .tb-whatsapp .v2-icon {
  width: 17px;
  height: 17px;
}

/* Im Konto-Menü nur, wo die Kopfzeile Download und Glocke nicht zeigt (Handy). */
.bp-v2 .v2-popover .pm-download,
.bp-v2 .v2-popover .pm-hinweise {
  display: none;
}

.bp-v2 .pm-kopf {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 280px;
  padding: 8px 10px 10px;
}

.bp-v2 .pm-kopf-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bp-v2 .pm-recht {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  margin: 6px 4px 0;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--divider);
}

.bp-v2 .pm-recht a {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: none;
}

.bp-v2 .pm-recht a:hover,
.bp-v2 .pm-recht a:focus-visible {
  color: var(--hover-akzent);
  text-decoration: underline;
}

/* Darstellung im Konto-Menü: Name links, Hell und Dunkel rechts (System gibt
   es nur in den Einstellungen). */
.bp-v2 .pm-darstellung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 2px 4px 0;
}

.bp-v2 .pm-darstellung .v2-menu-label {
  padding: 0 10px;
}

.bp-v2 .pm-darstellung .v2-segmented > button {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-xs);
}

.bp-v2 .pm-darstellung .v2-darstellung .v2-icon {
  width: 14px;
  height: 14px;
}

/* .v2-segmented steht im Bündel NACH shell.css – eine Klasse mehr, sonst gewinnt
   dessen Innenabstand (12px je Seite) und drückt das Zeichen auf 10px zusammen. */
.bp-v2 .v2-segmented.v2-darstellung--kompakt > button {
  justify-content: center;
  width: 34px;
  padding: 0;
}

.bp-v2 .v2-darstellung .v2-icon {
  width: 16px;
  height: 16px;
}

.bp-v2 .tb-mobile-context {
  display: none;
}

/* Hauptinhalt ------------------------------------------------------------ */

.bp-v2 #app-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Suchpanel -------------------------------------------------------------- */

/* Der Vorhang liegt UNTER dem Fenster. Vorher war er ein .v2-overlay mit
 * z-index 70 und das Fenster z-index 1 – der Vorhang deckte das Suchfeld mit
 * ab, alles wirkte grün eingefärbt. Er ist jetzt neutral statt markengrün. */
.bp-v2 .v2-search-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh var(--space-4) var(--space-4);
}

.bp-v2 .v2-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 22, 20, 0.34);
  animation: v2-fade-in var(--dur) var(--ease-out);
}

.bp-v2 .v2-search-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(76vh, 620px);
  border-radius: var(--radius-card-lg);
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(17, 22, 20, 0.08), 0 28px 72px -28px rgba(17, 22, 20, 0.5);
  overflow: hidden;
  animation: v2-pop-in var(--dur) var(--ease-out);
}

.bp-v2 .v2-search-input-row {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--divider);
  color: var(--text-tertiary);
}

.bp-v2 .v2-search-input-row > .v2-icon {
  width: 20px;
  height: 20px;
}

/* Das Feld ist die Zeile selbst – ohne eigenen Rahmen und Fokusring aus dem
 * Bestand, sonst steht ein Kasten im Kasten. */
html.bp-v2 .v2-search-panel .v2-search-input-row input,
html.bp-v2 .v2-search-panel .v2-search-input-row input:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-size: var(--text-lg) !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

html.bp-v2 .v2-search-panel .v2-search-input-row input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

html.bp-v2 .v2-search-panel .v2-search-input-row input::placeholder {
  color: var(--text-tertiary);
}

/* Schliessen als rundes Kreuz statt der Taste „Esc“ (UI-Pass 22.09.2026);
   Escape schliesst weiterhin. */
.bp-v2 .v2-search-zu {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-search-zu:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}

.bp-v2 .v2-search-zu:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-search-zu .v2-icon {
  width: 16px;
  height: 16px;
}

.bp-v2 .v2-search-esc,
.bp-v2 .v2-search-foot kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-secondary);
  font: 500 var(--text-2xs)/1 var(--font-sans);
}

.bp-v2 .v2-search-esc {
  flex: none;
  height: 26px;
  cursor: pointer;
}

.bp-v2 .v2-search-esc:hover {
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}

.bp-v2 .v2-search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-2);
}

.bp-v2 .v2-search-results:empty {
  display: none;
}

/* Gruppen mit ruhiger Ueberschrift, kompakte Zeilen (40 px) mit Zeichen ohne
   grosse Kreisflaeche (UI-Pass 22.09.2026). */
.bp-v2 .v2-search-gruppe {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-v2 .v2-search-gruppe:first-child {
  padding-top: var(--space-2);
}

.bp-v2 .v2-search-hit {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
}

.bp-v2 .v2-search-hit-zeichen {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.bp-v2 .v2-search-hit-zeichen .v2-icon {
  width: 18px;
  height: 18px;
}

.bp-v2 .v2-search-hit.is-active .v2-search-hit-zeichen {
  color: var(--green-700);
}

.bp-v2 .v2-search-hit-text {
  display: grid;
  min-width: 0;
}

.bp-v2 .v2-search-hit-title,
.bp-v2 .v2-search-hit-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .v2-search-hit-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.bp-v2 .v2-search-hit-sub {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-search-hit > .v2-icon:last-child {
  color: var(--green-700);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-search-hit:hover,
.bp-v2 .v2-search-hit.is-active {
  background: var(--hover-flaeche);
}

.bp-v2 .v2-search-hit.is-active {
  box-shadow: inset 2px 0 0 var(--green-600);
}

.bp-v2 .v2-search-hit:hover > .v2-icon:last-child,
.bp-v2 .v2-search-hit.is-active > .v2-icon:last-child {
  opacity: 1;
}

.bp-v2 .v2-search-hint,
.bp-v2 .v2-search-leer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bp-v2 .v2-search-hint,
.bp-v2 .v2-search-leer {
  padding: var(--space-4) var(--space-3);
}

.bp-v2 .v2-search-leer {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.bp-v2 .v2-search-foot {
  display: flex;
  flex: none;
  gap: var(--space-4);
  padding: 6px var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--panel-muted);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.bp-v2 .v2-search-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 620px), (hover: none) {
  .bp-v2 .v2-search-foot {
    display: none;
  }
}

@media (max-width: 620px) {
  .bp-v2 .v2-search-panel {
    padding: var(--space-3);
  }

  .bp-v2 .v2-search-box {
    max-height: calc(100dvh - 24px);
  }

  html.bp-v2 .v2-search-panel .v2-search-input-row input,
  html.bp-v2 .v2-search-panel .v2-search-input-row input:focus {
    height: 56px !important;
    font-size: var(--text-md) !important;
  }
}

/* Vorhang der Schubladen liegt UNTER den Leisten, über dem Inhalt */
.bp-v2 .app-frame > .v2-overlay {
  z-index: calc(var(--z-drawer) - 1);
}

/* Schrittwahl in der Handy-Kopfzeile reagiert beim Beruehren/Ueberfahren */
.bp-v2 .tb-mobile-step { border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-out); }
.bp-v2 .tb-mobile-step:hover,
.bp-v2 .tb-mobile-step[aria-expanded="true"] { background: var(--hover-flaeche); }

/* Projektleiste: Transparenz-Log und Datenschutz unter den Schritten */
.bp-v2 .ps-links {
  display: grid;
  gap: 2px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
}

.bp-v2 .ps-links-gruppe {
  display: grid;
  gap: 2px;
}

/* „Mehr“ klappt Transparenz-Log, Datenschutz und Rundgang auf (Emils Board, 22.09.2026) */
.bp-v2 .ps-mehr-liste {
  display: grid;
  gap: 2px;
}

.bp-v2 .ps-mehr-liste[hidden] {
  display: none;
}

/* Der Pfeil steht mit seiner Spitze buendig unter dem Zeichen bei
   „Datenschutz“ (Emil, UI-Pass 22.09.2026: „pfeil ausrichtung passt nicht
   ganz“): das Chevron fuellt sein Feld schmaler aus als das Link-Zeichen,
   deshalb 1 px nach rechts; gedreht wird um die eigene Mitte. */
.bp-v2 .ps-mehr-knopf > .v2-icon:last-child {
  margin-right: -1px;
  transform-origin: 50% 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}

.bp-v2 .ps-mehr-knopf[aria-expanded="true"] > .v2-icon:last-child {
  transform: rotate(180deg);
}

.bp-v2 .ps-mehr-knopf[aria-expanded="true"] {
  color: var(--text-primary);
}

.bp-v2 .ps-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bp-v2 .ps-link:hover {
  background: var(--hover-flaeche);
  color: var(--text-primary);
}

.bp-v2 .ps-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .ps-link > .v2-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.bp-v2 .ps-link > .v2-icon:last-child:not(:first-child) {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

@media (max-width: 1199px) {
  .bp-v2 .ps-link {
    min-height: 44px;
  }
}

/* Personenzeichen statt Initialen, solange kein Name bekannt ist */
.bp-v2 [data-shell-avatar] > .v2-icon {
  width: 16px;
  height: 16px;
}

/* ==== components.css ==== */
/* BelegHero UI v2 – Bausteine
 *
 * Buttons, Icon-Buttons, Statuspillen, Chips, Segmente, Reiter, Avatare,
 * Fortschritt, Menüs, Tooltips. Jeder Baustein hat Ruhe, Hover, Fokus,
 * Aktiv, Deaktiviert und – wo sinnvoll – Laden.
 */

/* Icons ------------------------------------------------------------------ */

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

.bp-v2 .v2-icon--sm { width: 16px; height: 16px; }
.bp-v2 .v2-icon--xs { width: 14px; height: 14px; stroke-width: 2; }
.bp-v2 .v2-icon--lg { width: 22px; height: 22px; }
/* Marken- und Flächenzeichen (WhatsApp): gefüllt statt Kontur. */
.bp-v2 .v2-icon--flaeche { fill: currentColor; stroke: none; }

/* Buttons ---------------------------------------------------------------- */

.bp-v2 .v2-btn {
  --btn-bg: var(--panel);
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-subtle);
  /* Hover wie überall (tokens.css, „Hover“): Tönung, dunkelgrüner Rand, dunkelgrüne Schrift. */
  --btn-bg-hover: var(--hover-flaeche);
  --btn-border-hover: var(--hover-akzent);
  --btn-fg-hover: var(--hover-akzent);
  --btn-bg-active: var(--panel-sunken);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg-hover, var(--btn-fg));
}

.bp-v2 .v2-btn:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-bg-active);
  transform: translateY(0.5px);
}

.bp-v2 .v2-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-btn:disabled,
.bp-v2 .v2-btn[aria-disabled="true"] {
  --btn-bg: var(--neutral-bg);
  --btn-fg: var(--text-secondary);
  --btn-border: var(--border-default);
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-fg);
  box-shadow: none;
  opacity: 1;
}

.bp-v2 button.v2-btn:disabled {
  cursor: not-allowed;
}

.bp-v2 .v2-btn[aria-disabled="true"] {
  pointer-events: none;
}

.bp-v2 .v2-btn .v2-icon {
  width: 16px;
  height: 16px;
  margin-inline: -2px;
}

.bp-v2 .v2-btn--primary {
  --btn-bg: var(--fix-green-700);
  --btn-fg: #f6fbf7;
  --btn-border: var(--fix-green-700);
  --btn-bg-hover: var(--hover-primaer);
  --btn-border-hover: var(--hover-primaer);
  --btn-fg-hover: #f6fbf7;
  --btn-bg-active: var(--fix-green-900);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bp-v2 .v2-btn--dark {
  --btn-bg: var(--fix-green-950);
  --btn-fg: #f1f8f3;
  --btn-border: var(--fix-green-950);
  --btn-bg-hover: var(--hover-primaer);
  --btn-border-hover: var(--hover-primaer);
  --btn-fg-hover: #f1f8f3;
  --btn-bg-active: var(--fix-green-950);
}

.bp-v2 .v2-btn--soft {
  --btn-bg: var(--green-100);
  --btn-fg: var(--green-800);
  --btn-border: transparent;
  /* Zart bleibt zart: die Fläche bleibt, der Rand wird dunkelgrün wie bei jedem Knopf. */
  --btn-bg-hover: var(--green-100);
  --btn-border-hover: var(--hover-akzent);
  --btn-fg-hover: var(--hover-akzent);
  --btn-bg-active: var(--green-200);
}

.bp-v2 .v2-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-secondary);
  --btn-border: transparent;
  --btn-bg-hover: var(--hover-flaeche);
  --btn-border-hover: transparent;
  --btn-fg-hover: var(--hover-akzent);
  --btn-bg-active: var(--border-subtle);
}

.bp-v2 .v2-btn--ghost:hover:not(:disabled) {
  color: var(--hover-akzent);
}

.bp-v2 .v2-btn--danger {
  --btn-bg: var(--panel);
  --btn-fg: var(--danger-strong);
  --btn-border: var(--danger-border);
  --btn-bg-hover: var(--danger-bg);
  --btn-border-hover: var(--danger);
  --btn-fg-hover: var(--danger-strong);
  --btn-bg-active: var(--danger-bg);
}

.bp-v2 .v2-btn--danger-solid {
  --btn-bg: var(--fix-danger);
  --btn-fg: #fff8f7;
  --btn-border: var(--fix-danger);
  --btn-bg-hover: var(--fix-danger-strong);
  --btn-border-hover: var(--fix-danger-strong);
  --btn-fg-hover: #fff8f7;
  --btn-bg-active: var(--fix-danger-strong);
}

.bp-v2 .v2-btn--danger:focus-visible,
.bp-v2 .v2-btn--danger-solid:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

.bp-v2 .v2-btn--sm {
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  gap: 6px;
}

.bp-v2 .v2-btn--xs {
  height: var(--control-h-xs);
  padding: 0 10px;
  font-size: var(--text-xs);
  gap: 4px;
}

.bp-v2 .v2-btn--lg {
  height: var(--control-h-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-md);
}

.bp-v2 .v2-btn--block {
  width: 100%;
}

/* Pfeil-Knopf wie "Projekt öffnen ↗": Text + runder Pfeil rechts */
.bp-v2 .v2-btn--arrow {
  padding-right: 6px;
}

.bp-v2 .v2-btn--arrow .v2-btn-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: transform var(--dur) var(--ease-out);
}

.bp-v2 .v2-btn--arrow:not(.v2-btn--primary):not(.v2-btn--dark) .v2-btn-arrow {
  background: var(--panel-sunken);
}

.bp-v2 .v2-btn--arrow:hover .v2-btn-arrow {
  transform: translate(1px, -1px);
}

/* Laden: Text bleibt stehen (keine Breitenänderung), Kreisel drüber */
.bp-v2 .v2-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.bp-v2 .v2-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--btn-fg) transparent var(--btn-fg) transparent;
  animation: v2-spin 0.8s linear infinite;
}

@keyframes v2-spin {
  to { transform: rotate(360deg); }
}

/* Icon-Buttons (rund) ---------------------------------------------------- */

.bp-v2 .v2-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-icon-btn:hover:not(:disabled) {
  background: var(--hover-flaeche);
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}

.bp-v2 .v2-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp-v2 .v2-icon-btn[aria-pressed="true"],
.bp-v2 .v2-icon-btn.is-active {
  background: var(--green-100);
  border-color: var(--green-200);
  color: var(--green-800);
}

.bp-v2 .v2-icon-btn--sm {
  width: var(--icon-btn-sm);
  height: var(--icon-btn-sm);
}

.bp-v2 .v2-icon-btn--sm .v2-icon {
  width: 16px;
  height: 16px;
}

/* RUND BLEIBT RUND (Durchsicht 03.10.2026). Bis 900px hebt die Tippflaechen-Regel (theme.css, „Tippflaechen
   mobil“) jeden Knopf der Arbeitsflaeche mit !important auf --bp-tap Hoehe – die runden Symbolknoepfe auf /belege
   wurden 30×38 und damit oval. Dieselbe Flaeche auch in der Breite; nur dort, wo die Regel greift. */
@media (max-width: 900px) {
  html.bp-v2 body.bp-app .main-content button.v2-icon-btn {
    min-width: var(--bp-tap);
  }
}

.bp-v2 .v2-icon-btn--ghost {
  border-color: transparent;
  background: transparent;
}

.bp-v2 .v2-icon-btn--ghost:hover:not(:disabled) {
  background: var(--hover-flaeche);
  border-color: transparent;
}

.bp-v2 .v2-icon-btn--primary {
  border-color: var(--fix-green-700);
  background: var(--fix-green-700);
  color: #f6fbf7;
}

.bp-v2 .v2-icon-btn--primary:hover:not(:disabled) {
  border-color: var(--hover-primaer);
  background: var(--hover-primaer);
  color: #fff;
}

.bp-v2 .v2-icon-btn .v2-dot-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 2px var(--panel);
}

.bp-v2 .v2-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--fix-green-700);
  color: #fff;
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--panel);
}

/* Statuspillen ---------------------------------------------------------- */

.bp-v2 .v2-pill {
  --pill-fg: var(--neutral);
  --pill-bg: var(--neutral-bg);
  --pill-border: transparent;

  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.bp-v2 .v2-pill .v2-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.1;
}

.bp-v2 .v2-pill--sm {
  height: 20px;
  padding: 0 8px 0 6px;
  font-size: var(--text-2xs);
  gap: 4px;
}

.bp-v2 .v2-pill--plain { padding-left: 10px; }

.bp-v2 .v2-pill--done,
.bp-v2 .v2-pill--success { --pill-fg: var(--green-800); --pill-bg: var(--green-100); }
.bp-v2 .v2-pill--review,
.bp-v2 .v2-pill--info { --pill-fg: var(--info-strong); --pill-bg: var(--info-bg); }
.bp-v2 .v2-pill--assign,
.bp-v2 .v2-pill--warning { --pill-fg: var(--warning-strong); --pill-bg: var(--warning-bg); }
.bp-v2 .v2-pill--missing { --pill-fg: var(--status-missing-strong); --pill-bg: var(--status-missing-bg); }
.bp-v2 .v2-pill--error,
.bp-v2 .v2-pill--danger { --pill-fg: var(--danger-strong); --pill-bg: var(--danger-bg); }
.bp-v2 .v2-pill--neutral { --pill-fg: var(--text-secondary); --pill-bg: var(--neutral-bg); }
.bp-v2 .v2-pill--outline { --pill-bg: var(--panel); --pill-border: var(--border-subtle); --pill-fg: var(--text-secondary); }
.bp-v2 .v2-pill--brand { --pill-fg: #f1f8f3; --pill-bg: var(--fix-green-700); }

/* Veränderung: ↑ 18 % */
.bp-v2 .v2-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bp-v2 .v2-delta .v2-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.bp-v2 .v2-delta--good { color: var(--green-800); background: var(--green-100); }
.bp-v2 .v2-delta--bad { color: var(--danger-strong); background: var(--danger-bg); }
.bp-v2 .v2-delta--flat { color: var(--text-secondary); background: var(--neutral-bg); }

/* Chips (Filter) -------------------------------------------------------- */

.bp-v2 .v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h-sm);
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-chip:hover {
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}

.bp-v2 .v2-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-chip[aria-pressed="true"],
.bp-v2 .v2-chip.is-active {
  border-color: var(--fix-green-700);
  background: var(--fix-green-700);
  color: #f6fbf7;
}

.bp-v2 .v2-chip .v2-chip-count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--panel-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bp-v2 .v2-chip[aria-pressed="true"] .v2-chip-count,
.bp-v2 .v2-chip.is-active .v2-chip-count {
  background: var(--fix-green-950);
  color: #fff;
}

/* Segmente ---------------------------------------------------------------- */

.bp-v2 .v2-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--panel-sunken);
}

.bp-v2 .v2-segmented > button,
.bp-v2 .v2-segmented > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-segmented > :hover {
  color: var(--hover-akzent);
}

.bp-v2 .v2-segmented > [aria-selected="true"],
.bp-v2 .v2-segmented > [aria-pressed="true"],
.bp-v2 .v2-segmented > .is-active {
  background: var(--panel-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-pill);
}

.bp-v2 .v2-segmented > :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Gleitender Schieber unter Segment-Umschaltern -------------------------- */
/*
 * Die weisse Pille der aktiven Wahl liegt nicht mehr im Knopf, sondern als
 * EIN Element an der Gruppe - so faehrt sie von der alten zur neuen Wahl,
 * statt dass zwei Knoepfe gegeneinander ueberblenden (Emil, 20.09.2026:
 * "snappt alles direkt"). Lage und Breite misst core/schieber.js aus; ohne
 * dieses Modul fehlt `hat-schieber`, und alles sieht aus wie vorher.
 */
.bp-v2 .hat-schieber {
  position: relative;
}

.bp-v2 .hat-schieber::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--schieber-b, 0);
  height: var(--schieber-h, 0);
  transform: translate(var(--schieber-x, 0), -50%);
  border-radius: var(--radius-pill);
  background: var(--panel-raised);
  box-shadow: var(--shadow-pill);
  pointer-events: none;
}

/* Bewegen erst ab dem zweiten Bild - siehe schieber.js, sonst faehrt der
   Schieber beim ersten Erscheinen grundlos von links herein. */
.bp-v2 .schieber-gleitet::before {
  transition: transform var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}

/* Die Knoepfe stehen ueber dem Schieber ... */
.bp-v2 .hat-schieber > * {
  position: relative;
  z-index: 1;
}

/* ... und geben ihren eigenen Grund ab, solange er da ist. */
.bp-v2 .v2-segmented.hat-schieber > [aria-selected="true"],
.bp-v2 .v2-segmented.hat-schieber > [aria-pressed="true"],
.bp-v2 .v2-segmented.hat-schieber > .is-active {
  background: transparent;
  box-shadow: none;
}

/* Reiter ----------------------------------------------------------------- */

.bp-v2 .v2-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
  scrollbar-width: none;
}

.bp-v2 .v2-tabs::-webkit-scrollbar { display: none; }

.bp-v2 .v2-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.bp-v2 .v2-tab:hover { color: var(--hover-akzent); }

.bp-v2 .v2-tab[aria-selected="true"],
.bp-v2 .v2-tab.is-active {
  color: var(--green-800);
}

.bp-v2 .v2-tab[aria-selected="true"]::after,
.bp-v2 .v2-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--green-700);
}

/* Avatar ----------------------------------------------------------------- */

.bp-v2 .v2-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--green-200), var(--green-100));
  color: var(--green-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  /* OPTISCH MITTIG (Emil, UI-Pass 22.09.2026): Buchstabenabstand haengt rechts
     Luft an, und die Zeilenhoehe der Schrift liegt nicht mittig um die
     Grossbuchstaben. Ohne Abstand, mit Zeilenhoehe 1 und - wo der Browser es
     kann - auf Versalhoehe beschnitten sitzen ein und zwei Buchstaben mittig. */
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-box: trim-both cap alphabetic;
  flex: none;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(18, 51, 34, 0.06);
}

/* Ein Buchstabe steht etwas groesser als zwei - sonst wirkt er verloren. */
.bp-v2 .v2-avatar[data-zeichen="1"] {
  font-size: calc(var(--text-xs) * 1.25);
}

.bp-v2 .v2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-v2 .v2-avatar--sm { width: 28px; height: 28px; font-size: 10.5px; }
.bp-v2 .v2-avatar--lg { width: 48px; height: 48px; font-size: var(--text-md); }

/* Mandanten-Monogramm (eckig-rund) */
.bp-v2 .v2-monogram {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  flex: none;
}

/* Fortschritt ------------------------------------------------------------ */

.bp-v2 .v2-progress {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--chart-track);
  overflow: hidden;
}

.bp-v2 .v2-progress > span,
.bp-v2 .v2-progress-bar {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--green-600);
  transition: width var(--dur-slow) var(--ease-out);
}

.bp-v2 .v2-progress--sm { height: 6px; }
.bp-v2 .v2-progress--lg { height: 10px; }

/* Stabreihe wie in der Referenz: viele schmale abgerundete Balken */
.bp-v2 .v2-ticks {
  display: grid;
  grid-template-columns: repeat(var(--ticks, 30), minmax(0, 1fr));
  gap: 3px;
  height: 28px;
}

.bp-v2 .v2-ticks > i {
  display: block;
  border-radius: var(--radius-pill);
  background: var(--chart-track);
}

.bp-v2 .v2-ticks > i.is-on {
  background: var(--green-500);
}

.bp-v2 .v2-ticks > i.is-on.is-strong {
  background: var(--green-700);
}

/* Kreisel ---------------------------------------------------------------- */

.bp-v2 .v2-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--green-200);
  border-top-color: var(--green-700);
  animation: v2-spin 0.8s linear infinite;
  flex: none;
}

.bp-v2 .v2-spinner--sm { width: 14px; height: 14px; }
.bp-v2 .v2-spinner--lg { width: 28px; height: 28px; border-width: 3px; }

/* Menü / Popover --------------------------------------------------------- */

.bp-v2 .v2-popover {
  position: absolute;
  z-index: var(--z-popover);
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-popover);
  transform-origin: top right;
  animation: v2-pop-in var(--dur) var(--ease-out);
}

@keyframes v2-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.bp-v2 .v2-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  text-align: left;
  text-decoration: none;
}

.bp-v2 .v2-menu-item .v2-icon {
  color: var(--text-tertiary);
}

.bp-v2 .v2-menu-item:hover,
.bp-v2 .v2-menu-item:focus-visible,
.bp-v2 .v2-menu-item.is-active {
  background: var(--hover-flaeche);
  outline: none;
}

.bp-v2 .v2-menu-item--danger { color: var(--danger-strong); }
.bp-v2 .v2-menu-item--danger .v2-icon { color: var(--danger); }

.bp-v2 .v2-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--divider);
}

.bp-v2 .v2-menu-label {
  padding: 8px 10px 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Tooltip (CSS, über data-tip) ------------------------------------------ */

.bp-v2 [data-tip] {
  position: relative;
}

/*
 * EINBLENDEN STATT AUFPLOPPEN (Emil, 20.09.2026). Die Sprechblase entstand
 * frueher erst im Moment des Ueberfahrens - ein Element, das es vorher nicht
 * gab, kann nicht ueberblenden. Jetzt ist sie immer da und nur unsichtbar.
 *
 * `visibility` wandert verzoegert mit: beim Erscheinen sofort, beim
 * Verschwinden erst NACH dem Ausblenden (`transition-delay` an der
 * Grundregel). Sonst waere sie im selben Bild weg, in dem die Deckkraft zu
 * sinken beginnt.
 *
 * Die 250 ms Wartezeit vor dem Erscheinen sind Absicht: wer mit der Maus nur
 * ueber die Leiste faehrt, soll keine Kette aufblitzender Blasen hinter sich
 * herziehen. Wer stehen bleibt, bekommt sie. Beim Tastaturfokus entfaellt das
 * Warten - dort ist das Ansteuern schon die Absicht.
 */
.bp-v2 [data-tip]::after {
  content: attr(data-tip);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: var(--z-popover);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--fix-green-950);
  color: #eef6f0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-raised);
}

.bp-v2 [data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-fast) var(--ease-out) 250ms,
    visibility 0s linear 250ms;
}

.bp-v2 [data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    visibility 0s linear;
}

.bp-v2 [data-tip-pos="right"]::after {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Info-i: Erklaerung auf Abruf (core/info-i.js) ---------------------------
 *
 * Das i sitzt an der Ueberschrift und erbt deren Zeile; die Erklaerung klappt
 * als eigener Absatz darunter auf. Die Trefferflaeche ist groesser als das
 * Zeichen (::before), damit es auch mit dem Finger gelingt. Gross- und
 * Sperrschrift kleiner Ueberschriften (ARBEITSSCHRITTE) gelten fuer das i nicht. */
.bp-v2 .info-i {
  /* Am Telefon gibt `body.bp-app .main-content button` jedem Knopf `min-height: var(--bp-tap) !important` - das i
     wurde dort zum hohen Oval. Die Trefferflaeche liefert hier ::before; die Variable gilt nur fuer das i. */
  --bp-tap: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 0.12em;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .info-i::before {
  content: '';
  position: absolute;
  inset: -8px;
}

/* Mit dem Finger die volle Trefferflaeche der Rolle: 18 + 2 x 13 = 44 px (docs/ui-v2/REGELN.md). Das Zeichen selbst
   bleibt 18 px - es sitzt in der Zeile der Ueberschrift. */
@media (max-width: 900px), (pointer: coarse) {
  .bp-v2 .info-i::before { inset: -13px; }
}

.bp-v2 .info-i:hover {
  color: var(--hover-akzent);
}

.bp-v2 .info-i:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .info-i[aria-expanded="true"] {
  /* festes Gruen: im Dunkelmodus wird --green-700 hell, das weisse i verschwand darauf */
  color: #fff;
  background: var(--fix-green-700);
  border-color: var(--fix-green-700);
}

.bp-v2 .info-i-text {
  display: block;
  max-width: 62ch;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--green-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular, 400);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.bp-v2 .info-i-text[hidden] {
  display: none;
}

/* Trenner / Toolbar ------------------------------------------------------ */

.bp-v2 .v2-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-toolbar-sep {
  width: 1px;
  height: 20px;
  margin: 0 var(--space-1);
  background: var(--border-subtle);
}

.bp-v2 .v2-spacer {
  flex: 1 1 auto;
}

/* Schlüssel-Wert-Liste --------------------------------------------------- */

.bp-v2 .v2-kv {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 10px var(--space-4);
  font-size: var(--text-base);
}

.bp-v2 .v2-kv > dt {
  color: var(--text-secondary);
}

.bp-v2 .v2-kv > dd {
  margin: 0;
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Legende-Punkt --------------------------------------------------------- */

.bp-v2 .v2-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--swatch, var(--green-600));
  flex: none;
}

.bp-v2 .v2-swatch--round {
  border-radius: 50%;
}

.bp-v2 .v2-swatch--hatched {
  background: repeating-linear-gradient(135deg, var(--swatch, var(--status-missing)) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--swatch, var(--status-missing));
}

/* Pfeile aus dem Bestandstext --------------------------------------------
 * Die Hausschrift hat kein → und ←; core/pfeile.js ersetzt das Zeichen durch
 * dieses Element. Gleiche Linie wie die Icons der Hülle, Farbe vom Text. */

.bp-v2 .v2-pfeil {
  display: inline-block;
  flex: none;
  width: 0.92em;
  height: 0.92em;
  margin-inline: 0.06em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bp-v2 .v2-pfeil[data-richtung="links"] {
  transform: scaleX(-1);
}

/* Marken aus dem Bestandstext ----------------------------------------------
 * ✓ ○ ● ✕ hat die Hausschrift so wenig wie die Pfeile; core/pfeile.js setzt an
 * ihre Stelle dieses Element. Die Zeichnungen stehen als Token da, damit eine
 * Seite, die ihr Zeichen im Stylesheet setzt (content), dieselbe nimmt. */

.bp-v2 {
  --maske-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --maske-kreis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
  --maske-punkt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6' fill='black'/%3E%3C/svg%3E");
  --maske-winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --maske-winkel-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --maske-kreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

.bp-v2 .v2-marke {
  display: inline-block;
  flex: none;
  width: 0.92em;
  height: 0.92em;
  margin-inline: 0.06em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: var(--maske-haken) center / contain no-repeat;
  mask: var(--maske-haken) center / contain no-repeat;
}

.bp-v2 .v2-marke[data-marke="kreis"] { -webkit-mask-image: var(--maske-kreis); mask-image: var(--maske-kreis); }
.bp-v2 .v2-marke[data-marke="punkt"] { -webkit-mask-image: var(--maske-punkt); mask-image: var(--maske-punkt); }
.bp-v2 .v2-marke[data-marke="kreuz"] { -webkit-mask-image: var(--maske-kreuz); mask-image: var(--maske-kreuz); }

/* ==== cards.css ==== */
/* BelegHero UI v2 – Karten und Dashboard-Module
 *
 * Eine Karte ist ein Modul mit eigener Aufgabe (Kennzahl, Diagramm,
 * Projekt, Aufgabenliste) – kein Rahmen um beliebigen Inhalt.
 * Karten werden nicht verschachtelt; innere Flächen sind .v2-subpanel.
 */

.bp-v2 .v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--karte-innenrand);
  border-radius: var(--karte-radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.bp-v2 .v2-card--flush {
  padding: 0;
  overflow: hidden;
}

.bp-v2 .v2-card--compact {
  padding: var(--space-4);
  border-radius: var(--radius-card);
}

.bp-v2 .v2-card--muted {
  background: var(--panel-muted);
  box-shadow: none;
}

.bp-v2 .v2-card--brand {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(116, 194, 143, 0.28) 0%, rgba(116, 194, 143, 0) 55%),
    var(--green-900);
  color: var(--text-on-green);
}

.bp-v2 .v2-card--brand .v2-card-title,
.bp-v2 .v2-card--brand .v2-metric {
  color: #f6fbf7;
}

.bp-v2 .v2-card--brand .v2-muted,
.bp-v2 .v2-card--brand .v2-meta,
.bp-v2 .v2-card--brand .v2-metric-unit {
  color: var(--text-on-green-muted);
}

.bp-v2 a.v2-card,
.bp-v2 .v2-card.is-interactive {
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bp-v2 a.v2-card:hover,
.bp-v2 .v2-card.is-interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.bp-v2 a.v2-card:focus-visible,
.bp-v2 .v2-card.is-interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-card-hover), var(--focus-ring);
}

.bp-v2 .v2-card.is-selected {
  box-shadow: 0 0 0 2px var(--green-600), var(--shadow-card-hover);
}

/* Kopf ------------------------------------------------------------------- */

.bp-v2 .v2-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--icon-btn);
  margin-bottom: var(--abstand-kartentitel);
}

.bp-v2 .v2-card--flush .v2-card-head {
  margin: 0;
  padding: var(--space-4) var(--space-5);
}

.bp-v2 .v2-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.bp-v2 .v2-card-title small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.bp-v2 .v2-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.bp-v2 .v2-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.bp-v2 .v2-card--flush .v2-card-foot {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--divider);
}

/* Unterfläche innerhalb einer Karte ------------------------------------- */

/* EINE EBENE (Plan 2.3): Unterbereiche sind keine Kaesten mehr. Sie gliedern
   sich durch Abstand und eine Haarlinie – graue Flaechen in Karten hat die
   Referenz nicht, und sie liessen jede Seite nach "Boxen ueberall" aussehen. */
.bp-v2 .v2-subpanel {
  padding: var(--space-3) 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.bp-v2 .v2-subpanel + .v2-subpanel {
  margin-top: 0;
  border-top: 1px solid var(--divider);
}

/* Kennzahl-Karte --------------------------------------------------------- */

.bp-v2 .v2-kpi {
  gap: var(--space-3);
  min-height: 176px;
}

.bp-v2 .v2-kpi .v2-card-head {
  margin-bottom: 0;
}

.bp-v2 .v2-kpi-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.bp-v2 .v2-kpi-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kpi-tint, var(--green-100));
  color: var(--kpi-ink, var(--green-800));
  flex: none;
}

.bp-v2 .v2-kpi-icon .v2-icon {
  width: 16px;
  height: 16px;
}

.bp-v2 .v2-kpi-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.bp-v2 .v2-kpi-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bp-v2 .v2-kpi-spark {
  margin-top: auto;
  height: 40px;
}

.bp-v2 .v2-kpi--review { --kpi-tint: var(--info-bg); --kpi-ink: var(--info-strong); }
.bp-v2 .v2-kpi--assign { --kpi-tint: var(--warning-bg); --kpi-ink: var(--warning-strong); }
.bp-v2 .v2-kpi--missing { --kpi-tint: var(--status-missing-bg); --kpi-ink: #634a80; }
.bp-v2 .v2-kpi--error { --kpi-tint: var(--danger-bg); --kpi-ink: var(--danger-strong); }

/* Projektkarte ----------------------------------------------------------- */

.bp-v2 .v2-project-card {
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-card-lg);
}

.bp-v2 .v2-project-visual {
  position: relative;
  height: 132px;
  border-radius: var(--radius-card);
  background: var(--panel-muted);
  overflow: hidden;
}

.bp-v2 .v2-project-visual .v2-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.08);
}

.bp-v2 .v2-project-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-2);
}

.bp-v2 .v2-project-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.bp-v2 .v2-project-meta {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.bp-v2 .v2-project-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Dashboard-Raster ------------------------------------------------------- */

.bp-v2 .v2-dash {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--abstand-karten);
}

.bp-v2 .v2-span-3 { grid-column: span 3; }
.bp-v2 .v2-span-4 { grid-column: span 4; }
.bp-v2 .v2-span-5 { grid-column: span 5; }
.bp-v2 .v2-span-6 { grid-column: span 6; }
.bp-v2 .v2-span-7 { grid-column: span 7; }
.bp-v2 .v2-span-8 { grid-column: span 8; }
.bp-v2 .v2-span-12 { grid-column: 1 / -1; }

.bp-v2 .v2-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

/* Diagramme -------------------------------------------------------------- */

.bp-v2 .v2-chart {
  position: relative;
  width: 100%;
}

.bp-v2 .v2-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.bp-v2 .v2-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bp-v2 .v2-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bp-v2 .v2-chart-tip {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--fix-green-950);
  color: #f1f8f3;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transform: translate(-50%, -130%);
  pointer-events: none;
  box-shadow: var(--shadow-raised);
}

.bp-v2 .v2-axis-label {
  font-size: 11px;
  fill: var(--text-tertiary);
  font-family: var(--font-sans);
}

.bp-v2 .v2-day-pills {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.bp-v2 .v2-day-pills > span {
  flex: 1 1 0;
  min-width: 0;
  height: 22px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  line-height: 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.bp-v2 .v2-day-pills > span.is-active {
  border-color: var(--border-default);
  background: var(--panel);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* Donut ------------------------------------------------------------------ */

.bp-v2 .v2-donut-layout {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.bp-v2 .v2-donut {
  position: relative;
  aspect-ratio: 1;
}

.bp-v2 .v2-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.bp-v2 .v2-donut-center .v2-metric {
  font-size: var(--text-4xl);
}

.bp-v2 .v2-donut-center .v2-pill {
  justify-self: center;
  margin-top: 6px;
}

.bp-v2 .v2-status-list {
  display: grid;
  gap: var(--space-3);
}

.bp-v2 .v2-status-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.bp-v2 .v2-status-row .v2-kpi-icon {
  width: 28px;
  height: 28px;
}

.bp-v2 .v2-status-row-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.bp-v2 .v2-status-row-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Aufgabenliste --------------------------------------------------------- */

.bp-v2 .v2-task-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .v2-task {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 10px 10px 12px;
  border-radius: var(--radius-lg);
  background: var(--panel-muted);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-task:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}

.bp-v2 .v2-task .v2-kpi-icon {
  width: 36px;
  height: 36px;
}

.bp-v2 .v2-task-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.bp-v2 .v2-task-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Überschriften auf dunklen Markenkarten: app-neu.css färbt h1–h4 mit
   !important in Tinte – hier muss die helle Schrift dagegenhalten. */
html.bp-v2 body .v2-card--brand :is(h1, h2, h3, h4, .v2-card-title, .v2-kpi-title) {
  color: #eef7f1 !important;
}

/* ==== tables.css ==== */
/* BelegHero UI v2 – Tabellen und Arbeitslisten
 *
 * Für viele Belege: dichte Zeilen, klebender Kopf, rechtsbündige Beträge,
 * Mehrfachauswahl, Sammelaktionsleiste, aktive Zeile für den Detail-Drawer.
 * Unter 720px wird jede Zeile zur kompakten Listenzeile (.v2-table--stack).
 */

.bp-v2 .v2-table-wrap {
  position: relative;
  min-width: 0;
  /* Die Seite scrollt als Ganzes. Ein eigener, oft nur 1px zu hoher
     Scrollbereich fängt sonst das Mausrad ein, sobald der Zeiger über der
     Liste steht. Waagerechtes Überlaufen wird unten nur dort zugelassen,
     wo es auf schmalen Bildschirmen wirklich gebraucht wird. */
  overflow: visible;
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  overscroll-behavior: auto;
}

.bp-v2 .v2-table-wrap--bare {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.bp-v2 .v2-table {
  width: 100%;
  font-size: var(--text-base);
  color: var(--text-primary);
  table-layout: auto;
}

.bp-v2 .v2-table thead th {
  position: sticky;
  /* Seit der Seiten-Scroll wieder der führende Scrollbereich ist, muss der
     Tabellenkopf unter der klebenden Topbar stehen statt von ihr verdeckt zu
     werden. Der Desktop-Rand wird über --frame-gap mitgerechnet. */
  top: calc(var(--topbar-h) + var(--frame-gap, 0px));
  z-index: var(--z-sticky);
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--panel-muted);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}

.bp-v2 .v2-table thead th:first-child { padding-left: var(--space-5); }
.bp-v2 .v2-table thead th:last-child { padding-right: var(--space-5); }

.bp-v2 .v2-table th.is-num,
.bp-v2 .v2-table td.is-num {
  text-align: right;
}

.bp-v2 .v2-table th.is-center,
.bp-v2 .v2-table td.is-center {
  text-align: center;
}

.bp-v2 .v2-table th.is-check,
.bp-v2 .v2-table td.is-check {
  width: 44px;
  padding-right: 0;
}

.bp-v2 .v2-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  margin: 0 -6px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.bp-v2 .v2-th-sort:hover { color: var(--text-primary); background: var(--hover-flaeche); }
.bp-v2 .v2-th-sort .v2-icon { width: 12px; height: 12px; opacity: 0.5; }
.bp-v2 .v2-th-sort[aria-sort="ascending"] .v2-icon,
.bp-v2 .v2-th-sort[aria-sort="descending"] .v2-icon { opacity: 1; color: var(--green-700); }

.bp-v2 .v2-table tbody td {
  height: var(--row-h);
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}

.bp-v2 .v2-table tbody td:first-child { padding-left: var(--space-5); }
.bp-v2 .v2-table tbody td:last-child { padding-right: var(--space-5); }

.bp-v2 .v2-table tbody tr:last-child td {
  border-bottom: 0;
}

.bp-v2 .v2-table--compact tbody td {
  height: var(--row-h-compact);
  padding-top: 4px;
  padding-bottom: 4px;
}

.bp-v2 .v2-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-table--interactive tbody tr {
  cursor: pointer;
}

.bp-v2 .v2-table--interactive tbody tr:hover {
  background: var(--hover-flaeche);
}

.bp-v2 .v2-table tbody tr.is-selected {
  background: var(--panel-selected);
}

.bp-v2 .v2-table tbody tr.is-active {
  background: var(--green-100);
  box-shadow: inset 0 0 0 1px var(--green-300);
}

.bp-v2 .v2-table tbody tr:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green-500);
}

/* Zelleninhalte */

.bp-v2 .v2-cell-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* Titel und Unterzeile stehen untereinander, auch wenn der Rahmen ein <span> ist. */
.bp-v2 .v2-cell-main > span:not([class]) {
  display: grid;
  min-width: 0;
}

.bp-v2 .v2-cell-title {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .v2-cell-sub {
  display: block;
  margin-top: 1px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .v2-doc-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 36px;
  border-radius: 6px;
  background: var(--panel-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  flex: none;
  overflow: hidden;
}

.bp-v2 .v2-doc-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: linear-gradient(225deg, var(--backdrop) 50%, var(--border-subtle) 50%);
}

.bp-v2 .v2-doc-thumb .v2-icon { width: 14px; height: 14px; }
.bp-v2 .v2-doc-thumb--pdf { color: var(--danger); }
.bp-v2 .v2-doc-thumb--img { color: var(--info); }

.bp-v2 .v2-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.bp-v2 .v2-confidence-bar {
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--chart-track);
  overflow: hidden;
}

.bp-v2 .v2-confidence-bar > i {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--green-600);
}

.bp-v2 .v2-confidence.is-low .v2-confidence-bar > i { background: var(--warning); }

/* Checkbox in Tabellen: nutzt .v2-check aus forms.css */

/* Sammelaktionsleiste --------------------------------------------------- */

.bp-v2 .v2-bulkbar {
  position: sticky;
  bottom: var(--space-4);
  z-index: calc(var(--z-sticky) + 1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: var(--space-3) auto 0;
  padding: 6px 6px 6px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--green-950);
  color: #eef6f0;
  box-shadow: var(--shadow-popover);
  animation: v2-pop-in var(--dur) var(--ease-out);
}

.bp-v2 .v2-bulkbar-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bp-v2 .v2-bulkbar .v2-btn {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #eef6f0;
  --btn-border: transparent;
  --btn-bg-hover: var(--hover-auf-gruen);
  --btn-border-hover: transparent;
  --btn-fg-hover: #eef6f0;
  --btn-bg-active: rgba(255, 255, 255, 0.2);
}

.bp-v2 .v2-bulkbar .v2-btn--primary {
  --btn-bg: var(--green-500);
  --btn-fg: var(--green-950);
  --btn-bg-hover: var(--green-400);
  --btn-fg-hover: var(--green-950);
}

/* Paginierung / Tabellenfuß -------------------------------------------- */

.bp-v2 .v2-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--divider);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Nur in der gestapelten Liste: was dort mit den ausgeblendeten Spalten wegfiele. */
.bp-v2 .v2-nur-schmal {
  display: none;
}

/* Gestapelte Liste für schmale Breiten --------------------------------- */

@media (max-width: 720px) {
  .bp-v2 .v2-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }

  .bp-v2 .v2-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .bp-v2 .v2-table--stack,
  .bp-v2 .v2-table--stack tbody {
    display: block;
  }

  .bp-v2 .v2-table--stack tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "check main amount action"
      "check meta status action";
    align-items: center;
    gap: 2px var(--space-3);
    padding: 12px var(--space-4);
    border-bottom: 1px solid var(--divider);
  }

  .bp-v2 .v2-table--stack tbody td {
    display: block;
    height: auto;
    padding: 0 !important;
    border: 0;
    min-width: 0;
  }

  .bp-v2 .v2-table--stack td[data-area="check"] { grid-area: check; align-self: center; }
  .bp-v2 .v2-table--stack td[data-area="main"] { grid-area: main; }
  .bp-v2 .v2-table--stack td[data-area="amount"] { grid-area: amount; text-align: right; }
  .bp-v2 .v2-table--stack td[data-area="meta"] { grid-area: meta; font-size: var(--text-xs); color: var(--text-tertiary); }
  .bp-v2 .v2-table--stack td[data-area="status"] { grid-area: status; justify-self: end; }
  .bp-v2 .v2-table--stack td[data-area="hide-sm"] { display: none; }
  .bp-v2 .v2-table--stack .v2-nur-schmal { display: inline; }
  .bp-v2 .v2-table--stack td[data-area="action"] { grid-area: action; align-self: center; }
  .bp-v2 .v2-table--stack td[data-area="action"]:empty { display: none; }
}

/* ==== forms.css ==== */
/* BelegHero UI v2 – Formulare
 *
 * Keine nativen Plattform-Bedienelemente: appearance:none überall, eigene
 * Checkbox/Radio/Schalter/Auswahlpfeil. Dadurch sehen Felder unter Windows
 * und macOS gleich hoch und gleich gezeichnet aus.
 */

.bp-v2 .v2-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bp-v2 .v2-field + .v2-field {
  margin-top: var(--space-4);
}

.bp-v2 .v2-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.bp-v2 .v2-field-label .v2-optional {
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
}

.bp-v2 .v2-field-hint {
  font-size: var(--text-sm);   /* Hilfstext am Feld ist 13 px, wie im Bestand (.field-note) - bis 11.10.2026 12 px */
  color: var(--text-tertiary);
}

.bp-v2 .v2-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--danger-strong);
}

.bp-v2 .v2-field-error .v2-icon { width: 14px; height: 14px; }

.bp-v2 .v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
}

.bp-v2 .v2-form-grid > .v2-field + .v2-field { margin-top: 0; }
.bp-v2 .v2-form-grid > .is-wide { grid-column: 1 / -1; }

/* Eingaben --------------------------------------------------------------- */

.bp-v2 .v2-input,
.bp-v2 .v2-select,
.bp-v2 .v2-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);   /* wie jedes Feld im Bestand (--e-klein) - bis 11.10.2026 --radius-md, das nie ankam */
  background: var(--panel);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-input::placeholder,
.bp-v2 .v2-textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.bp-v2 .v2-input:hover,
.bp-v2 .v2-select:hover,
.bp-v2 .v2-textarea:hover {
  border-color: var(--border-default);
}

.bp-v2 .v2-input:focus,
.bp-v2 .v2-select:focus,
.bp-v2 .v2-textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-input:disabled,
.bp-v2 .v2-select:disabled,
.bp-v2 .v2-textarea:disabled {
  background: var(--panel-muted);
  color: var(--text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.bp-v2 .v2-input[aria-invalid="true"],
.bp-v2 .v2-select[aria-invalid="true"],
.bp-v2 .v2-textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.bp-v2 .v2-input[aria-invalid="true"]:focus {
  box-shadow: var(--focus-ring-danger);
}

.bp-v2 .v2-input--sm,
.bp-v2 .v2-select--sm {
  height: var(--control-h-sm);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.bp-v2 .v2-input--lg {
  height: var(--control-h-lg);
  font-size: var(--text-md);
}

.bp-v2 .v2-input--pill {
  border-radius: var(--radius-pill);
  padding-inline: 16px;
}

.bp-v2 .v2-input.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bp-v2 .v2-textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.bp-v2 .v2-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2365736a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.bp-v2 .v2-select::-ms-expand { display: none; }

/* Feld mit Symbol ------------------------------------------------------- */

.bp-v2 .v2-input-group {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.bp-v2 .v2-input-group > .v2-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

html.bp-v2 body .v2-input-group > .v2-icon ~ .v2-input,
html.bp-v2 body .v2-input-group > .v2-input:not(:first-child),
.bp-v2 .v2-input-group > .v2-input {
  padding-left: 38px !important;
}

.bp-v2 .v2-input-group > .v2-input--pill {
  padding-left: 40px;
}

.bp-v2 .v2-input-group > .v2-input--pill ~ .v2-icon,
.bp-v2 .v2-input-group > .v2-input--pill + .v2-icon {
  left: 14px;
}

.bp-v2 .v2-input-group > .v2-input-suffix {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bp-v2 .v2-input-group .v2-unit {
  position: absolute;
  right: 12px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* Checkbox / Radio ------------------------------------------------------- */

.bp-v2 .v2-check,
.bp-v2 .v2-radio {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--panel);
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-radio {
  border-radius: 50%;
}

.bp-v2 .v2-check:hover,
.bp-v2 .v2-radio:hover {
  border-color: var(--hover-akzent);
}

.bp-v2 .v2-check:focus-visible,
.bp-v2 .v2-radio:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-check:checked,
.bp-v2 .v2-check:indeterminate {
  border-color: var(--fix-green-700);
  background: var(--fix-green-700);
}

.bp-v2 .v2-check:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.bp-v2 .v2-check:indeterminate::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

.bp-v2 .v2-radio:checked {
  border-color: var(--green-700);
  border-width: 5px;
}

.bp-v2 .v2-check:disabled,
.bp-v2 .v2-radio:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp-v2 .v2-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
}

/* Schalter --------------------------------------------------------------- */

.bp-v2 .v2-switch {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease-out);
}

.bp-v2 .v2-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.25);
  transition: transform var(--dur) var(--ease-out);
}

.bp-v2 .v2-switch:checked {
  background: var(--fix-green-600);
}

.bp-v2 .v2-switch:checked::after {
  transform: translateX(16px);
}

.bp-v2 .v2-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Dateiablage ------------------------------------------------------------ */

.bp-v2 .v2-dropzone {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-card);
  background: var(--panel-muted);
  color: var(--text-secondary);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-dropzone:hover,
.bp-v2 .v2-dropzone.is-dragover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}

.bp-v2 .v2-dropzone-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--green-700);
  box-shadow: var(--shadow-card);
}

/* Suchfeld in Filterleisten ------------------------------------------- */

.bp-v2 .v2-filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-filterbar .v2-input-group {
  flex: 1 1 260px;
  max-width: 380px;
}

.bp-v2 .v2-filter-select {
  width: auto;
  min-width: 140px;
  height: var(--control-h-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  padding-left: 14px;
  box-shadow: none;
}

@media (max-width: 720px) {
  .bp-v2 .v2-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 16px verhindert das Zoomen beim Fokus auf iOS */
  .bp-v2 .v2-input,
  .bp-v2 .v2-select,
  .bp-v2 .v2-textarea {
    font-size: 16px;
  }
}

/* ==== states.css ==== */
/* BelegHero UI v2 – Zustände
 *
 * Laden (Skelett statt Kreisel mitten im Inhalt), leer (erklärt, was hier
 * hingehört und wie es dorthin kommt), Fehler (sagt, was passiert ist und
 * was man tun kann), kein Zugriff, nicht gefunden, Hinweise, Toasts.
 */

/* Skelett ---------------------------------------------------------------- */

.bp-v2 .v2-skeleton {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--panel-sunken);
  overflow: hidden;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.bp-v2 .v2-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  animation: v2-shimmer 1.4s var(--ease-in-out) infinite;
}

@keyframes v2-shimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .bp-v2 .v2-skeleton::after { animation: none; }
}

.bp-v2 .v2-skeleton--text { height: 12px; margin: 6px 0; }
.bp-v2 .v2-skeleton--title { height: 18px; width: 40%; margin: 4px 0 10px; }
.bp-v2 .v2-skeleton--metric { height: 40px; width: 55%; border-radius: var(--radius-md); }
.bp-v2 .v2-skeleton--pill { height: 22px; width: 84px; border-radius: var(--radius-pill); }
.bp-v2 .v2-skeleton--circle { border-radius: 50%; }
.bp-v2 .v2-skeleton--block { height: 120px; border-radius: var(--radius-card); }
.bp-v2 .v2-skeleton--row { height: 40px; margin: 8px 0; border-radius: var(--radius-md); }

/* Leer / Fehler / Kein Zugriff / Nicht gefunden ------------------------ */

.bp-v2 .v2-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

.bp-v2 .v2-state--inline {
  max-width: none;
  justify-items: start;
  text-align: left;
  padding: var(--space-5);
}

.bp-v2 .v2-state--page {
  min-height: min(60vh, 520px);
  align-content: center;
}

.bp-v2 .v2-state-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-1);
  border-radius: 20px;
  background: var(--green-100);
  color: var(--green-700);
}

.bp-v2 .v2-state-art .v2-icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}

.bp-v2 .v2-state--error .v2-state-art { background: var(--danger-bg); color: var(--danger); }
.bp-v2 .v2-state--denied .v2-state-art { background: var(--warning-bg); color: var(--warning-strong); }
.bp-v2 .v2-state--notfound .v2-state-art { background: var(--neutral-bg); color: var(--text-secondary); }

.bp-v2 .v2-state-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.bp-v2 .v2-state-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 48ch;
}

.bp-v2 .v2-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.bp-v2 .v2-state--inline .v2-state-actions {
  justify-content: flex-start;
}

.bp-v2 .v2-state-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Hinweisbänder ---------------------------------------------------------- */

.bp-v2 .v2-notice {
  --notice-fg: var(--info-strong);
  --notice-bg: var(--info-bg);
  --notice-border: var(--info-border);

  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-lg);
  background: var(--notice-bg);
  color: var(--text-primary);
  font-size: var(--text-base);
}

.bp-v2 .v2-notice > .v2-icon {
  margin-top: 1px;
  color: var(--notice-fg);
}

.bp-v2 .v2-notice-title {
  font-weight: var(--weight-semibold);
  color: var(--notice-fg);
}

.bp-v2 .v2-notice--success { --notice-fg: var(--green-800); --notice-bg: var(--green-050); --notice-border: var(--green-200); }
.bp-v2 .v2-notice--warning { --notice-fg: var(--warning-strong); --notice-bg: var(--warning-bg); --notice-border: var(--warning-border); }
.bp-v2 .v2-notice--danger { --notice-fg: var(--danger-strong); --notice-bg: var(--danger-bg); --notice-border: var(--danger-border); }

/* Hinweis zur Mac-App (core/app-stand.js) ------------------------------
 * Steht zwischen Kopfzeile und Inhalt, in derselben Flucht wie die Kopfzeile –
 * nicht IN #app-main, weil Ansichten dort ihren Inhalt austauschen. */

.bp-v2 .v2-app-stand {
  padding: var(--space-2) var(--space-7) 0;
  max-width: calc(var(--content-max) + 2 * var(--space-7));
}

.bp-v2 .v2-app-stand-hinweis {
  grid-template-columns: 20px minmax(0, 1fr);
}

.bp-v2 .v2-app-stand-inhalt p {
  margin: var(--space-1) 0 0;
  max-width: 72ch;
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.bp-v2 .v2-app-stand-schritte {
  display: grid;
  gap: var(--space-1);
  max-width: 72ch;
  margin: var(--space-2) 0 0;
  padding-left: 1.3em;
  line-height: var(--leading-normal);
}

.bp-v2 .v2-app-stand-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 1199px) {
  .bp-v2 .v2-app-stand { padding-inline: var(--space-5); }
}

@media (max-width: 767px) {
  .bp-v2 .v2-app-stand { padding-inline: var(--space-3); }
}

/* Kleine Fehlerzeile innerhalb einer Ansicht --------------------------- */

.bp-v2 .v2-inline-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.bp-v2 .v2-inline-error > .v2-icon {
  margin-top: 1px;
  color: var(--danger);
  flex: none;
}

.bp-v2 .v2-inline-error a {
  color: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

.bp-v2 .v2-inline-error .v2-btn {
  margin-left: auto;
  flex: none;
}

/* Toasts ----------------------------------------------------------------- */

.bp-v2 .v2-toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.bp-v2 .v2-toast {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--fix-green-950);
  color: #eef6f0;
  font-size: var(--text-base);
  box-shadow: var(--shadow-popover);
  pointer-events: auto;
  animation: v2-toast-in var(--dur-slow) var(--ease-out);
}

.bp-v2 .v2-toast .v2-icon { color: var(--green-400); }
.bp-v2 .v2-toast--danger .v2-icon { color: #f0a097; }
.bp-v2 .v2-toast--warning .v2-icon { color: #e8c07c; }

@keyframes v2-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Overlay / Drawer / Dialog --------------------------------------------- */

.bp-v2 .v2-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(18, 51, 34, 0.28);
  animation: v2-fade-in var(--dur) var(--ease-out);
}

@keyframes v2-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bp-v2 .v2-drawer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
}

.bp-v2 .v2-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
}

.bp-v2 .v2-drawer-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
  overscroll-behavior: contain;
}

.bp-v2 .v2-drawer-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--panel);
}

.bp-v2 .v2-drawer-section + .v2-drawer-section {
  margin-top: var(--space-6);
}

.bp-v2 .v2-drawer-section-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bp-v2 .v2-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.bp-v2 .v2-dialog-panel {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--fenster-innenrand);
  border-radius: var(--fenster-radius);
  background: var(--panel);
  box-shadow: var(--shadow-popover);
  animation: v2-pop-in var(--dur) var(--ease-out);
}

/* Zeitleiste / Historie -------------------------------------------------- */

.bp-v2 .v2-timeline {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.bp-v2 .v2-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 1px;
  background: var(--border-subtle);
}

.bp-v2 .v2-timeline > li {
  position: relative;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bp-v2 .v2-timeline > li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--green-600);
}

.bp-v2 .v2-timeline > li strong {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* ==== responsive.css ==== */
/* BelegHero UI v2 – Breakpoints
 *
 *   ≥1440  App-Fläche schwebt (shell.css)
 *   1200–1439  volle Fläche, beide Leisten als feste Spalten
 *   768–1199   globale und Projekt-Sidebar als beschriftete Schubladen,
 *              damit die Navigation nicht zu einer rätselhaften Icon-Leiste wird
 *   <768   dieselben Schubladen; die Arbeitsfläche wird zusätzlich kompakt
 */

/* Dashboard-Spalten ------------------------------------------------------ */

@media (max-width: 1439px) {
  .bp-v2 .v2-page {
    padding-inline: var(--space-6);
  }
}

@media (max-width: 1279px) {
  .bp-v2 .v2-dash .v2-span-3 { grid-column: span 6; }
  .bp-v2 .v2-dash .v2-span-4 { grid-column: span 6; }
  .bp-v2 .v2-dash .v2-span-5,
  .bp-v2 .v2-dash .v2-span-7,
  .bp-v2 .v2-dash .v2-span-8 { grid-column: 1 / -1; }

  .bp-v2 .v2-workbench.has-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Detail als Overlay von rechts */
  .bp-v2 .v2-workbench.has-detail .v2-workbench-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: min(var(--drawer-w), 100vw);
    max-height: none;
    border-radius: var(--radius-card-lg) 0 0 var(--radius-card-lg);
    box-shadow: var(--shadow-drawer);
    animation: v2-drawer-in var(--dur-slow) var(--ease-out);
  }
}

@keyframes v2-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Navigation als Schublade ------------------------------------------------
 *
 * Ab Tablet-Hochformat ist eine schmale Symbolleiste zwar platzsparend,
 * aber ohne Beschriftungen nicht selbsterklärend. Die Arbeitsfläche bleibt
 * deshalb breit; die vollständige Navigation öffnet sich über das Menü.
 */

@media (max-width: 1199px) {
  .bp-v2 .app-frame,
  .bp-v2 .app-frame.has-project-sidebar {
    display: block;
  }

  .bp-v2 .global-sidebar,
  .bp-v2 .project-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: min(320px, 86vw);
    z-index: var(--z-drawer);
    border-radius: 0 var(--radius-card-lg) var(--radius-card-lg) 0;
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
    box-shadow: 28px 0 64px -32px rgba(18, 51, 34, 0.5);
  }

  .bp-v2 .project-sidebar {
    border-right: 0;
  }

  .bp-v2 .app-frame.is-nav-open .global-sidebar,
  .bp-v2 .app-frame.is-project-nav-open .project-sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
  }

  .bp-v2 .v2-topbar {
    gap: var(--space-2);
    padding: 0 var(--space-5);
  }

  .bp-v2 .v2-topbar .tb-menu {
    display: inline-grid;
  }

  .bp-v2 .v2-topbar .tb-zurueck {
    display: inline-grid;
  }

  .bp-v2 .v2-zurueck {
    display: none;
  }

  .bp-v2 .tb-crumbs {
    display: none;
  }

  .bp-v2 .tb-mobile-context {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
  }

  .bp-v2 .tb-mobile-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bp-v2 .tb-mobile-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    background: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--green-700);
    text-align: left;
    max-width: 100%;
    white-space: nowrap;
  }

  .bp-v2 .tb-mobile-step-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bp-v2 .tb-mobile-step > .v2-icon {
    flex: none;
  }

  .bp-v2 .tb-search {
    flex: none;
    margin-left: 0;
  }

  .bp-v2 .tb-search-btn {
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .bp-v2 .tb-search-btn > span,
  .bp-v2 .tb-search-btn > kbd,
  .bp-v2 .tb-context {
    display: none;
  }

  /* Wie die Suche: nur noch das Zeichen, der Name steht im Tooltip. */
  .bp-v2 .tb-download {
    width: var(--icon-btn);
    padding: 0;
    border-radius: 50%;
  }

  .bp-v2 .tb-download-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Beruehrung ------------------------------------------------------------- */

/* ROLLEN FUER DEN FINGER (11.10.2026, docs/ui-v2/REGELN.md): was man mit dem Finger trifft, ist 44 px hoch.
   DIE BEDINGUNG ist dieselbe, mit der der Bestand seine Zeilenknoepfe und Auswahlfelder schon vergroessert:
   bis 900 px Breite oder grober Zeiger. Bis zum 12.10.2026 schalteten die Token erst bei 767 px - dazwischen
   (Tablet hochkant, 768 px) standen Auswahlfelder und Zeilenknoepfe mit 44 px neben Textfeldern und Knoepfen
   mit 38 px. Die Abstaende der Karten haengen an der Breite und stehen im Block darunter. */
@media (max-width: 900px), (pointer: coarse) {
  .bp-v2 {
    --control-h: 44px;
    --control-h-sm: 38px;
    --icon-btn: 44px;
    --icon-btn-sm: 44px;
  }

  /* Die Umschaltreihe ist ein kleiner Knopf je Feld: 28 px am Schreibtisch, unter dem Finger die Höhe der Rolle. */
  .bp-v2 .v2-segmented > button,
  .bp-v2 .v2-segmented > a {
    height: var(--control-h-sm);
  }
}

/* Schmal (Smartphone) ---------------------------------------------------- */

@media (max-width: 767px) {
  .bp-v2 {
    --topbar-h: 58px;
    /* Karten ruecken zusammen. */
    --karte-innenrand: var(--space-4);
    --abstand-karten: var(--space-4);
    --abstand-seitenkopf: var(--space-4);
    --fenster-innenrand: var(--space-5);
  }

  html.bp-v2 body.v2-shell {
    padding: 0 !important;
  }

  .bp-v2 .app-frame,
  .bp-v2 .app-frame.has-project-sidebar {
    border-radius: 0;
    box-shadow: none;
  }

  .bp-v2 .v2-topbar {
    padding: 0 var(--space-3);
  }

  /* Am Handy gibt es keine Mac-App zu laden: der Weg wandert ins Konto-Menü. */
  .bp-v2 .tb-download {
    display: none;
  }

  /* Der Projektname braucht die Breite: Knöpfe rücken zusammen, und die
   * Projektleiste öffnet am Handy der Schritt unter dem Namen – derselbe
   * Weg wie der Leistenknopf, der deshalb hier entfällt. */
  .bp-v2 .tb-actions {
    gap: var(--space-2);
  }

  .bp-v2 .v2-topbar:has(.tb-mobile-step:not([hidden])) .tb-project-toggle {
    display: none;
  }

  .bp-v2 .v2-popover .pm-download,
  .bp-v2 .v2-popover .pm-hinweise {
    display: flex;
  }

  .bp-v2 .tb-actions .tb-notify {
    display: none;
  }

  .bp-v2 .v2-page {
    padding: var(--space-4) var(--space-4) var(--space-9);
  }

  .bp-v2 .v2-page-title {
    font-size: var(--text-2xl);
  }

  .bp-v2 .v2-dash {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-v2 .v2-dash > [class*="v2-span-"] {
    grid-column: 1 / -1;
  }

  .bp-v2 .v2-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bp-v2 .v2-kpi {
    min-height: 0;
    padding: var(--space-4);
  }

  .bp-v2 .v2-kpi .v2-metric {
    font-size: var(--text-3xl);
  }

  .bp-v2 .v2-grid-2,
  .bp-v2 .v2-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-v2 .v2-donut-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .bp-v2 .v2-donut {
    width: min(220px, 70vw);
  }

  .bp-v2 .v2-card {
    padding: var(--karte-innenrand);
    border-radius: var(--radius-card);
  }

  .bp-v2 .v2-table-wrap {
    border-radius: var(--radius-card);
  }

  /* Detail als eigene Unteransicht (volle Breite) */
  .bp-v2 .v2-workbench.has-detail .v2-workbench-detail {
    width: 100vw;
    border-radius: 0;
  }

  .bp-v2 .v2-bulkbar {
    bottom: var(--space-3);
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }

  .bp-v2 .v2-toasts {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }
}

@media (max-width: 380px) {
  .bp-v2 .v2-kpi-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Drucken (⌘P, auch aus der Mac-App) ------------------------------------
 *
 * Gedruckt wird der Inhalt: Leisten, Kopfzeile, Schubladen und schwebende
 * Knöpfe bleiben weg, die App-Fläche verliert Rand und Schatten.
 */

@media print {
  .bp-v2 .global-sidebar,
  .bp-v2 .project-sidebar,
  .bp-v2 .v2-topbar,
  .bp-v2 .v2-overlay,
  .bp-v2 .v2-toasts,
  .bp-v2 #scroll-fab,
  .bp-v2 #chat-toggle {
    display: none !important;
  }

  html.bp-v2 body.v2-shell {
    padding: 0 !important;
    background: none !important;
  }

  .bp-v2 .app-frame,
  .bp-v2 .app-frame.has-project-sidebar {
    display: block;
    max-width: none;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    background: none;
  }

  .bp-v2 .v2-card {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ==== compat/tokens-legacy.css ==== */
/* BelegHero UI v2 – alte Token-Namen auf v2-Werte
 *
 * bp2.css, theme.css und app-neu.css bleiben unter v2 geladen – sie tragen
 * funktionale Regeln (hidden, Dialoge, Schubladen, Reiter). Ihre Werte kommen
 * aber aus ~70 Token (Bestand 01 §5.2), die app-neu.css auf body.bp-app
 * definiert. Hier bekommen dieselben Namen v2-Werte, mit höherer Spezifität
 * (html.bp-v2 body.bp-app) – so rendert der gesamte Bestand sofort in der
 * neuen Farb-, Radius- und Abstandswelt, ohne eine Seite anzufassen.
 */

html.bp-v2 body.bp-app,
html.bp-v2 body.bp-auth {
  /* Schrift: die alte Kette nannte -apple-system/BlinkMacSystemFont/Segoe UI
     als Ersatz – dieselbe Datei, aber auf Windows und macOS verschiedene
     Rückfälle für fehlende Zeichen. Unter v2 eine Kette für beide. */
  --bp-font-sans: var(--font-sans);
  --bp-font-display: var(--font-sans);

  /* bp2.css (:root) */
  /* GANZE GROESSEN (11.10.2026, docs/ui-v2/REGELN.md): 0.72 / 0.8 / 0.85rem ergaben 11,52 / 12,8 / 13,6 px -
     drei Zwischenstufen, die es auf der Leiter der neuen Ansichten nicht gibt (12 / 13 / 14). Rund 500 Stellen im
     Bestand lesen diese drei Namen; sie stehen jetzt auf der Leiter. */
  --fs-marke: var(--text-xs);
  --fs-klein: var(--text-sm);
  --fs-neben: var(--text-sm);
  --fs-text: 0.875rem;
  --fs-basis: 0.9375rem;
  --fs-gross: 1.0625rem;
  --fs-titel: 1.25rem;
  --fs-titel-l: 1.5rem;
  --fs-kopf-l: 2.375rem;
  --paper: var(--panel);
  --surface: var(--panel-muted);
  --surface-2: var(--panel-sunken);
  --line-soft: var(--divider);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-tertiary);
  --green: var(--green-700);
  --r-sm: var(--radius-md);
  --r-md: var(--radius-lg);
  --r-lg: var(--radius-card);
  --r-pill: var(--radius-pill);
  --ease: var(--ease-out);
  --bp-zeit-schnell: var(--dur-fast);
  --bp-zeit: var(--dur);
  --bp-kurve: var(--ease-out);

  /* theme.css (:root, --bp-*) */
  --bp-accent: var(--green-700);
  --bp-accent-soft: var(--green-100);
  --bp-soft: var(--green-050);
  --bp-muted: var(--text-secondary);
  --bp-ink: var(--text-primary);
  --bp-bone: var(--panel);
  --bp-line: var(--border-subtle);
  --bp-danger: var(--danger);
  --accent: var(--green-700);
  --accent-soft: var(--green-100);
  --accent-tint: var(--green-050);
  --muted: var(--text-secondary);
  --card: var(--panel);
  --ink: var(--text-primary);
  --line: var(--border-subtle);
  --warn: var(--warning-strong);   /* Text/Flaeche: 4,9:1 statt 3,6:1 */
  --bp-tap: var(--control-h);
  --bp-tap-m: var(--control-h-sm);
  --bp-tap-l: var(--control-h-lg);

  /* app-neu.css (body.bp-app) */
  --flur: var(--workspace);
  --grund-oben: var(--workspace);
  --grund-unten: var(--workspace);
  --karte: var(--panel);
  --still: var(--panel-muted);
  --flaeche-aktiv: var(--panel-selected);
  --linie: var(--border-subtle);
  --linie-leiste: var(--divider);
  --linie-zart: var(--divider);
  --hebung: var(--shadow-card);
  --hebung-hoch: var(--shadow-raised);
  --hebung-karte: var(--shadow-card);
  --tinte: var(--text-primary);
  --tinte-2: var(--text-secondary);
  --tinte-3: var(--text-tertiary);
  --gruen: var(--green-700);
  --gruen-tief: var(--green-800);
  --gruen-hell: var(--green-600);
  --gruen-kontur: var(--green-400);
  --wasch: var(--green-050);
  --gruen-wahl: var(--green-200);
  --wasch-rand: var(--green-200);
  --gut-wasch: var(--green-100);
  --warn-wasch: var(--warning-bg);
  --stop: var(--danger-strong);    /* 6:1 statt 4,3:1 */
  --stop-wasch: var(--danger-bg);
  --info-wasch: var(--info-bg);
  --e-klein: var(--radius-sm);
  --e: var(--radius-lg);
  --e-knopf: var(--radius-pill);
  --e-karte: var(--karte-radius);          /* bis 11.10.2026 --radius-card-lg (24) - die neuen Karten haben 20 */
  --e-pille: var(--radius-pill);
  --knopf-innen: var(--space-4);
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 20px;
  --a6: 24px;
  --a8: 32px;
  --a10: 40px;
  --s-mikro: 11px;
  --s-meta: 13px;
  --s-text: 14px;
  --s-titel: 16px;
  --s-seite: 30px;
  --s-zahl: 32px;
  --hoehe-zeile: var(--row-h);
  --hoehe-feld: var(--control-h);
  --leiste: var(--sidebar-w);
  --karte-innen: var(--karte-innenrand);   /* bis 11.10.2026 24 px - die neuen Karten haben 20 */
  --flur-rand: var(--space-7);

  /* nirgends definiert, aber mit Rückfallwert benutzt – bekommen v2-Werte */
  --s-klein: 12px;
  --rot: var(--danger);
  --text: var(--text-primary);
  --flaeche: var(--panel-muted);
  --stoerung: var(--danger);
  --warn-tint: var(--warning-bg);
}

/* ==== compat/legacy-shell.css ==== */
/* BelegHero UI v2 – alter Seitenrahmen unter der neuen Hülle
 *
 * Die v2-Hülle übernimmt den Anmelderahmen (#logged-in-view bzw. .layout auf
 * der Projektseite) in #app-main. Die statische Leiste (nav.sidebar, von
 * scripts/seitenleiste.py erzeugt) und die von app-shell.js gebaute Kopfzeile
 * bleiben im DOM – Skripte, Rundgang und Tests greifen darauf zu –, werden
 * aber nicht mehr gezeigt. Nichts hier darf transform/filter/contain tragen:
 * fixierte Overlays im Inhalt (#activity-log-modal …) würden sonst eingesperrt.
 */

/* Bis die Hülle steht: alten Rahmen nicht aufblitzen lassen. Scheitert der
   Start, nimmt boot.js bp-v2 wieder weg (Rückfall auf das alte Design).

   AUCH DER ALTE KOPF (Emil, Testkauf 02.10.2026: „bei jedem Ladevorgang wird noch der alte
   UI-Look angezeigt, mit dem anderen Logo“). #logged-out-header – altes Radar-Logo und
   Seitentitel – steht im Markup ohne display:none und blieb als einziges sichtbar, bis die
   Hülle stand und die Seite die Anmeldung geprüft hatte. Er gehört nur zur Abmeldeansicht:
   vor der Hülle unsichtbar, in der Hülle nur bei v2-logged-out. */
html.bp-v2 body.bp-app:not(.v2-shell) > .layout,
html.bp-v2 body.bp-app:not(.v2-shell) > #logged-in-view,
html.bp-v2 body.bp-app:not(.v2-shell) > #logged-out-header {
  visibility: hidden;
}

html.bp-v2 body.v2-shell:not(.v2-logged-out) > #logged-out-header {
  display: none !important;
}

/* Alte Leiste, Kopfzeile, Schubladenvorhang, Menüknopf */
html.bp-v2 body.v2-shell #app-main nav.sidebar,
html.bp-v2 body.v2-shell #app-main .main-content > .topbar,
html.bp-v2 body.v2-shell #app-main .main-content > .app-topbar,
html.bp-v2 body.v2-shell .app-scrim,
html.bp-v2 body.v2-shell #sideOpen,
html.bp-v2 body.v2-shell .side-open,
html.bp-v2 body.v2-shell .sidebar-collapse {
  display: none !important;
}

/* Waagerechte Schrittreiter bleiben unsichtbar – die Projekt-Sidebar ersetzt sie */
html.bp-v2 body.v2-shell .step-tabs {
  display: none !important;
}

/* Rahmen: keine Leistenbreite mehr als linker Abstand */
html.bp-v2 body.v2-shell #app-main .layout {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) !important;
  flex-direction: column;
}

html.bp-v2 body.v2-shell #app-main .main-content,
html.bp-v2 body.v2-shell #app-main .main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto !important;
  padding: var(--space-6) var(--space-7) var(--space-9) !important;
  background: transparent;
}

html.bp-v2 body.v2-shell.bp-project #app-main .main-content {
  max-width: none;
}

html.bp-v2 body.v2-shell #app-main .content,
html.bp-v2 body.v2-shell #app-main .main-content > .inner,
html.bp-v2 body.v2-shell #app-main .main-inner {
  padding: 0 !important;
}

html.bp-v2 body.v2-shell #app-main .main-content > .topbar + * {
  padding-top: 0;
}

/* Abmeldeansicht bleibt außerhalb der Hülle; die Hülle wird dann verborgen */
html.bp-v2 body.v2-shell.v2-logged-out .app-frame {
  display: none !important;
}

@media (max-width: 1439px) {
  html.bp-v2 body.v2-shell #app-main .main-content,
  html.bp-v2 body.v2-shell #app-main .main {
    padding-inline: var(--space-6) !important;
  }
}

@media (max-width: 767px) {
  html.bp-v2 body.v2-shell #app-main .main-content,
  html.bp-v2 body.v2-shell #app-main .main {
    padding: var(--space-4) var(--space-4) var(--space-9) !important;
  }
}

/* Ladeplatzhalter, solange der Anmelderahmen noch verborgen ist */
html.bp-v2 .v2-boot-skeleton {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Bestand, den eine neue Ansicht ersetzt: bleibt im DOM, wird nicht gezeigt */
html.bp-v2 body.v2-shell .v2-legacy-verborgen {
  display: none !important;
}

/* Neue Ansichten innerhalb des Bestandsinhalts */
html.bp-v2 body.v2-shell .v2-view {
  display: grid;
  gap: var(--abstand-karten);
  min-width: 0;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

html.bp-v2 body.v2-shell .v2-view + * {
  margin-top: var(--space-6);
}

/* Seitenkopf -> Inhalt ist --abstand-seitenkopf; das Raster der Ansicht bringt --abstand-karten schon mit. */
html.bp-v2 body.v2-shell .v2-view > .v2-page-head {
  margin-bottom: calc(var(--abstand-seitenkopf) - var(--abstand-karten));
}

html.bp-v2 body.v2-shell .v2-view > :empty {
  display: none;
}

/* ==== compat/legacy-components.css ==== */
/* BelegHero UI v2 – Bestandsbausteine im neuen Aussehen
 *
 * Die alten Blätter bleiben geladen (funktionale Regeln); ihre Farben und Maße
 * kommen über tokens-legacy.css schon aus v2. Hier nur, was dort fest
 * verdrahtet ist oder in v2 anders aussieht: Knopfgewicht und -höhe, Karten
 * ohne Rand, Seitentitel, Hinweisbänder. Spezifität bewusst über
 * "html.bp-v2 body.bp-app" (0,2,2) – !important nur, wo der Bestand es trägt.
 */

/* Seitentitel ------------------------------------------------------------ */
html.bp-v2 body.bp-app h1,
html.bp-v2 body.bp-app .hero-title {
  font-size: var(--text-3xl) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
  color: var(--text-primary);
}

/* Überschriften im Bestand ------------------------------------------------
 * GEMESSEN 16.09.2026 mit scripts/ui_v2_qualitaet.js: drei alte Quellen
 * setzten Überschriften unter v2 anders als gewollt.
 *  - index.html (Inline-Stil) zieht unter JEDES h2 eine Linie mit 0,4rem
 *    Abstand – in den Karten sah das aus wie eine halb gezeichnete Tabelle.
 *  - theme.css gibt Kartentiteln letter-spacing -0.045em !important: bei 16px
 *    -0,72px je Zeichen, Wortzwischenräume fallen sichtbar zusammen
 *    („DeinZugang“). Das war die „komische Schrift“.
 *  - bp2.css 800 und app-neu.css 600 !important für h2: die v2-Kartentitel
 *    (530) erschienen fett.
 * Nicht einzeln je Ansicht korrigieren – hier, einmal. */
html.bp-v2 body.bp-app {
  letter-spacing: normal;
}

html.bp-v2 body.bp-app :is(h2, h3, h4) {
  border-bottom: 0;
  padding-bottom: 0;
}

html.bp-v2 body.bp-app :is(h2, h3, h4, .section-title, .feature-heading, .feature-heading-title, .bp-kartenkopf h2) {
  letter-spacing: var(--tracking-snug) !important;
}

html.bp-v2 body.bp-app :is(h2, h3, .section-title, .feature-heading-title) {
  font-weight: var(--weight-medium) !important;
}

html.bp-v2 body.bp-app h4 {
  font-weight: var(--weight-semibold) !important;
}

/* Kennzahlen dürfen leicht sein – die Klasse entscheidet, nicht das Element. */
html.bp-v2 body.bp-app :is(.v2-kpi-value, .v2-metric, .v2-display) {
  font-weight: var(--weight-light) !important;
}

/* Verweise der neuen Oberflaeche erben keine alte Linkfarbe -----------------
 * app-neu.css faerbt JEDEN Verweis gruen (body.bp-app a) und beim Ueberfahren
 * gruen-tief (a:hover). Fuer Fliesstext-Links richtig, fuer Bausteine falsch:
 * Projektkarten (<a class="v2-card">) bekamen gruene Titel, das Logo
 * ("Beleg" in der Sidebar) wurde beim Ueberfahren dunkelgruen auf dunkelgruen.
 * Spezifitaet bewusst gleich der alten Regel (:where), damit jede
 * Baustein-Regel (.bp-v2 .x, .bp-v2 .x:hover) weiter gewinnt. */
:where(html.bp-v2) body.bp-app a:where([class*="v2-"], [class^="gs-"], [class*=" gs-"], [class^="ps-"], [class*=" ps-"], [class^="tb-"], [class*=" tb-"]),
:where(html.bp-v2) body.bp-app a:where([class*="v2-"], [class^="gs-"], [class*=" gs-"], [class^="ps-"], [class*=" ps-"], [class^="tb-"], [class*=" tb-"]):hover {
  color: inherit;
}

/* Fliesstext-Links: eine Farbe, lesbar (6,4:1), beim Ueberfahren dunkler und unterstrichen. */
:where(html.bp-v2) body.bp-app a:not([class]) {
  color: var(--text-link);
}

:where(html.bp-v2) body.bp-app a:not([class]):hover {
  color: var(--hover-akzent);
  text-decoration: underline;
}

/* Knoepfe als Verweis (<a class="v2-btn">) --------------------------------
 * GEMESSEN 16.09.2026 (Klick-/Hovertest): app-neu.css faerbt JEDEN Verweis beim
 * Ueberfahren gruen-tief (body.bp-app a:hover). Auf "Neues Projekt" (primaer)
 * war die Schrift dann so gruen wie der Knopf – 1,00:1, unsichtbar; auf
 * "Projekt oeffnen" (dunkel) 1,36:1. Knoepfe behalten ihre eigene Schriftfarbe. */
html.bp-v2 body :is(a.v2-btn, a.v2-btn:hover, a.v2-btn:visited, a.v2-btn:active, a.v2-btn:focus-visible) {
  color: var(--btn-fg);
  text-decoration: none;
}

html.bp-v2 body :is(a.v2-icon-btn, a.v2-icon-btn:hover, a.v2-icon-btn:visited, a.v2-chip, a.v2-chip:hover, a.v2-tab, a.v2-menu-item, a.v2-menu-item:hover) {
  text-decoration: none;
}

/* Die schwebende Hilfe-Blase: unter v2 öffnet der Kopfzeilen-Knopf
   [data-shell=assistant] denselben Assistenten (boot.js). */
html.bp-v2 body.bp-app.v2-shell #chat-toggle {
  display: none !important;
}

/* Schwebender Nach-oben-Knopf der Projektseite (_initScrollFab in index.html).
   Der Bestand setzt ihn unten mittig, weil rechts die Hilfe-Blase lag – unter
   v2 sitzt der Assistent in der Kopfzeile, die Ecke ist frei. Mittig lag der
   grüne Kreis auf den Karten, und „↑“/„↓“ fielen auf eine andere Schrift
   zurück: Pfeil deshalb als Maske, Richtung aus data-mode. `display` setzt
   das Skript selbst. */
html.bp-v2 body.bp-app #scroll-fab {
  left: auto;
  right: var(--space-6);
  bottom: var(--space-6);
  transform: none;
  z-index: calc(var(--z-drawer) - 1);
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-secondary);
  box-shadow: var(--shadow-raised);
  font-size: 0;
  line-height: 0;
  filter: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #scroll-fab::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bp-v2 body.bp-app #scroll-fab[data-mode="down"]::before {
  transform: rotate(180deg);
}
html.bp-v2 body.bp-app #scroll-fab:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #scroll-fab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-raised), var(--focus-ring);
}
/* Am Seitenende lag der Knopf auf der Ecke der letzten Karte. Solange er zu
   sehen ist (das Skript setzt display: flex inline), bekommt die Seite unten
   seine Höhe als Platz dazu – kurze Seiten ohne Knopf rollen nicht plötzlich. */
html.bp-v2 body.v2-shell:not(.schritt-auftrag):has(> #scroll-fab[style*="flex"]) #app-main .main-content {
  padding-bottom: calc(var(--space-6) + 44px + var(--space-5)) !important;
}
/* Während des Rundgangs nicht: der Knopf lag sonst im Ausschnitt auf der Karte,
   die gerade erklärt wird. */
html.bp-v2 body:has(#tour-overlay[style*="block"]) #scroll-fab {
  visibility: hidden;
}
/* Ab 1440 px schwebt die App-Fläche mit Rand (shell.css): der Knopf bleibt in
   ihr, statt auf ihrer Ecke zu sitzen. MIT RUECKFALL (Emil, 23.09.2026: „besser unten
   rechts“): `--frame-max` gibt es nicht mehr - ohne Rueckfall war die ganze Angabe
   ungueltig, `right` fiel weg, und der Knopf sass links unten auf der Leiste. */
@media (min-width: 1440px) {
  html.bp-v2 body.bp-app.v2-shell #scroll-fab {
    right: calc(max(var(--frame-gap, 0px), (100vw - var(--frame-max, 100vw)) / 2) + var(--space-6));
    bottom: calc(var(--frame-gap, 0px) + var(--space-6));
  }
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app #scroll-fab {
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  html.bp-v2 body.v2-shell:not(.schritt-auftrag):has(> #scroll-fab[style*="flex"]) #app-main .main-content {
    padding-bottom: calc(var(--space-4) + 44px + var(--space-5) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Hilfe-Assistent ------------------------------------------------------- */
/* KOMPLETT IM NEUEN DESIGN (Emil, UI-Pass 22.09.2026: „hilfe assistent braucht
   einen kompletten overhaul. bessere spacings, alles“). Das Fenster klappt
   unter dem Kopfzeilen-Knopf auf, der es oeffnet; am Handy ist es ein Blatt
   ueber die ganze Flaeche. Farben nur ueber Token - hell und dunkel. Der
   Bestand (index.html, theme.css) setzt Groessen teils mit !important, daher
   hier ebenso. */
html.bp-v2 body.bp-app #chat-panel {
  position: fixed;
  top: calc(var(--topbar-h) + var(--space-2));
  right: var(--space-5);
  bottom: auto;
  left: auto;
  z-index: var(--z-popover);
  width: min(400px, calc(100vw - 2 * var(--space-5)));
  max-width: none;
  height: min(620px, calc(100dvh - var(--topbar-h) - var(--space-2) - var(--space-5)));
  max-height: none;
  display: none;
  flex-direction: column;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card-lg) !important;
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-popover) !important;
  overflow: hidden;
  animation: v2-pop-in var(--dur) var(--ease-out);
  transform-origin: top right;
}
html.bp-v2 body.bp-app #chat-panel.open {
  display: flex;
}

html.bp-v2 body.bp-app #chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
  background: var(--panel);
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app .chat-kopf-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}
html.bp-v2 body.bp-app .chat-kopf-text {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
html.bp-v2 body.bp-app .chat-kopf-text small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}
html.bp-v2 body.bp-app #chat-header .bp-chat-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #chat-header .bp-chat-close:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #chat-header .bp-chat-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* KI-Hinweis (Art. 50 KI-VO): eine schmale, ruhige Zeile statt einer Blase. */
html.bp-v2 body.bp-app #chat-support-note {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
}
html.bp-v2 body.bp-app #chat-support-note strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app #chat-support-note a {
  color: var(--green-700);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
html.bp-v2 body.bp-app #chat-support-note a:hover {
  text-decoration: underline;
}

html.bp-v2 body.bp-app #chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #chat-messages .chat-msg {
  display: flex;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}
html.bp-v2 body.bp-app #chat-messages .chat-msg.user {
  justify-content: flex-end;
}
html.bp-v2 body.bp-app #chat-messages .chat-msg .bubble {
  display: block;
  max-width: 85%;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.bp-v2 body.bp-app #chat-messages .chat-msg.assistant .bubble {
  border-bottom-left-radius: 6px;
  background: var(--panel-muted);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app #chat-messages .chat-msg.user .bubble {
  border-bottom-right-radius: 6px;
  background: var(--fix-green-700);
  color: #fff;
}

/* Tipp-Anzeige: drei Punkte, die nacheinander aufleuchten. */
html.bp-v2 body.bp-app #chat-messages .chat-msg.is-tippt .bubble {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 14px 16px;
}
html.bp-v2 body.bp-app #chat-messages .chat-msg.is-tippt .bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: chat-tippt 1.2s var(--ease-in-out) infinite;
}
html.bp-v2 body.bp-app #chat-messages .chat-msg.is-tippt .bubble span:nth-child(2) { animation-delay: 0.15s; }
html.bp-v2 body.bp-app #chat-messages .chat-msg.is-tippt .bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-tippt {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html.bp-v2 body.bp-app #chat-messages .chat-msg.is-tippt .bubble span { animation: none; }
}

/* Beispielfragen im leeren Verlauf */
html.bp-v2 body.bp-app #chat-messages .chat-vorschlaege {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
html.bp-v2 body.bp-app #chat-messages .chat-vorschlaege button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #chat-messages .chat-vorschlaege button:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}
html.bp-v2 body.bp-app #chat-messages .chat-vorschlaege button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

html.bp-v2 body.bp-app #chat-image-preview {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
html.bp-v2 body.bp-app #chat-image-preview img {
  height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}
html.bp-v2 body.bp-app #chat-image-preview .rm {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app #chat-image-preview .rm:hover {
  background: var(--danger-bg);
}

/* Eingabe in einer Reihe: Bueroklammer, mitwachsendes Feld, Senden - alles auf
   einer Linie, 40 px hoch (am Handy 44 px). */
html.bp-v2 body.bp-app #chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex: none;
  padding: var(--space-3);
  border-top: 1px solid var(--divider);
  background: var(--panel);
}
html.bp-v2 body.bp-app #chat-input-row #chat-attach-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px !important;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 0 !important;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #chat-input-row #chat-attach-btn:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #chat-input-row #chat-attach-btn.has-image {
  border-color: var(--green-600);
  background: var(--green-050);
  color: var(--green-700);
}
html.bp-v2 body.bp-app #chat-input-row #chat-input {
  flex: 1 1 auto;
  min-width: 0;
  /* app-neu.css gibt jedem Textfeld 76 px und Zieh-Griff (mit !important) -
     hier waechst das Feld mit dem Text, von einer Zeile an. */
  height: 40px;
  min-height: 40px !important;
  max-height: 140px;
  margin: 0;
  padding: 9px 14px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 20px !important;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}
html.bp-v2 body.bp-app #chat-input-row #chat-input::placeholder {
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app #chat-input-row button.chat-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 40px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fix-green-700);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #chat-input-row button.chat-send:hover {
  background: var(--hover-primaer);
}
html.bp-v2 body.bp-app #chat-input-row :is(#chat-attach-btn, button.chat-send):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Am Handy ein Blatt ueber die ganze Flaeche; Eingabe ueber dem Home-Balken. */
@media (max-width: 640px) {
  html.bp-v2 body.bp-app #chat-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: var(--z-dialog);
    animation: v2-drawer-up var(--dur-slow) var(--ease-out);
  }
  html.bp-v2 body.bp-app #chat-header {
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  }
  html.bp-v2 body.bp-app #chat-input-row {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  html.bp-v2 body.bp-app #chat-input-row #chat-attach-btn,
  html.bp-v2 body.bp-app #chat-input-row button.chat-send {
    height: 44px;
  }
  html.bp-v2 body.bp-app #chat-input-row #chat-attach-btn {
    width: 44px !important;
    min-width: 44px;
  }
  html.bp-v2 body.bp-app #chat-input-row #chat-input {
    height: 44px;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    font-size: 16px !important;  /* unter 16 px zoomt iOS beim Tippen die Seite */
    line-height: 1.4;           /* eine Zeile passt ohne Rollbalken in 44 px */
  }
  html.bp-v2 body.bp-app #chat-header .bp-chat-close {
    width: 44px;
    height: 44px;
  }
}
@keyframes v2-drawer-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Karten ----------------------------------------------------------------- */
html.bp-v2 body.bp-app .panel,
html.bp-v2 body.bp-app .bp-karte,
html.bp-v2 body.bp-app .sheet,
html.bp-v2 body.bp-app .main-content > section,
html.bp-v2 body.bp-app .content > section,
html.bp-v2 body.bp-app .tab-panel > section {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

/* Knöpfe ----------------------------------------------------------------- */
html.bp-v2 body.bp-app .btn,
html.bp-v2 body.bp-app .primary-btn,
html.bp-v2 body.bp-app .ghost-btn,
html.bp-v2 body.bp-app .secondary-btn,
html.bp-v2 body.bp-app .account-new-btn,
html.bp-v2 body.bp-app button.primary,
html.bp-v2 body.bp-app button.secondary,
html.bp-v2 body.bp-app button.danger,
html.bp-v2 body.bp-app .row-action-btn,
/* Die vier folgenden standen bis 11.10.2026 nur in der Liste von app-neu.css und blieben deshalb bei 36 px und
   Gewicht 600 - neben Knoepfen mit 38 px und 500 (docs/ui-v2/REGELN.md). */
html.bp-v2 body.bp-app .setup-tun,
html.bp-v2 body.bp-app .tarif-knopf,
html.bp-v2 body.bp-app .pdf-oeffnen,
html.bp-v2 body.bp-app .paket-knopf {
  min-height: var(--control-h) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

html.bp-v2 body.bp-app .primary-btn:not(.bp-still),
html.bp-v2 body.bp-app button.primary:not(.bp-still),
html.bp-v2 body.bp-app .account-new-btn:not(.bp-still) {
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.bp-v2 body.bp-app :is(.btn, .primary-btn, .ghost-btn, .secondary-btn, button.primary, button.secondary, button.danger, .row-action-btn):focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Eingaben: Fokusring in v2-Grün */
html.bp-v2 body.bp-app input:focus,
html.bp-v2 body.bp-app select:focus,
html.bp-v2 body.bp-app textarea:focus {
  border-color: var(--green-600) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Hinweisbänder ---------------------------------------------------------- */
html.bp-v2 body.bp-app .bp-hinweis,
html.bp-v2 body.bp-app #reauth-banner,
html.bp-v2 body.bp-app #hintergrund-banner,
html.bp-v2 body.bp-app #postfach-freigabe-band {
  border-radius: var(--radius-lg) !important;
}

/* Dialoge ---------------------------------------------------------------- */
html.bp-v2 body.bp-app .bp-dialog {
  border-radius: var(--fenster-radius);
  padding: var(--fenster-innenrand);
  box-shadow: var(--shadow-popover);
}

html.bp-v2 body.bp-app .bp-dialog::backdrop {
  background: rgba(18, 51, 34, 0.32);
  backdrop-filter: none;
}

/* Hinweiskästen aus dem Bestand tragen --e-knopf, unter v2 eine Pille. Sobald
 * ihr Text umbricht, wird daraus ein Oval – sie bekommen die Kastenecke. */
html.bp-v2 body.bp-app :is(#whatsapp-status .warning, .portal-datenschutz, #scan-info-modal .scan-info-note) {
  border-radius: var(--radius-md) !important;
}

/* FARBEN DES BESTANDS, DIE DER V2-RESET ÜBERDECKTE.
 * reset.css setzt `.bp-v2 :where(button, a) { color: inherit }` mit Spezifität
 * 0,1,0. Bestandsregeln mit genau einer Klasse (index.html, <style>) stehen
 * davor und verloren: die grünen Aktionsverweise der Akte („ändern“,
 * „festlegen“), „Bearbeiten“ im Auftrag und die Gesprächsvorschläge wurden
 * schwarz. Hier gleiche Spezifität, später im Blatt – Hover- und Aktivregeln
 * des Bestands bleiben stärker. Gemessen auf allen Bestandsseiten: betroffen
 * sind nur die Projektseite und zwei Schließknöpfe in Rechnungen. */
:where(html.bp-v2) .akte-aktion,
:where(html.bp-v2) .as-bearbeiten,
:where(html.bp-v2) .kg-vorschlag:where(:not(.kg-vorschlag-tut)),
:where(html.bp-v2) .nachschub-link {
  color: var(--green-700);
}
:where(html.bp-v2) .akte-aktion,
:where(html.bp-v2) .as-bearbeiten,
:where(html.bp-v2) .as-mehr,
:where(html.bp-v2) .kg-vorschlag {
  font-weight: var(--weight-semibold);
}
:where(html.bp-v2) .as-mehr,
:where(html.bp-v2) .akte-drawer-zu,
:where(html.bp-v2) .kg-klammer {
  color: var(--text-tertiary);
}
:where(html.bp-v2) .s3-chip,
:where(html.bp-v2) .info-btn,
:where(html.bp-v2) .pm-knopf,
:where(html.bp-v2) .rd-zu {
  color: var(--text-secondary);
}
:where(html.bp-v2) .info-btn {
  font-weight: 700;
}
:where(html.bp-v2) .copy-btn {
  color: #fff;
}

/* SYMBOL-KNOEPFE IN DER ZEILE (Emil, UI-Pass 22.09.2026: „icons rechts zu nah
 * aneinander“, Punkt 12; Stammdaten Punkt 15): 8 px Abstand, runde Knoepfe mit Rand in gleicher Groesse, mehr
 * Luft zum Betrag; Stornieren leicht abgesetzt, weil es die folgenreiche
 * Handlung ist. Am Handy und auf Touch-Geraeten 44 px. */
html.bp-v2 body.bp-app .row-actions {
  gap: var(--space-2);
}
html.bp-v2 body.bp-app .bp-zeilenknopf {
  width: var(--icon-btn-sm);   /* 32 - bis 11.10.2026 34, in der Belegliste 30 */
  height: var(--icon-btn-sm);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .bp-zeilenknopf svg {
  width: 16px;
  height: 16px;
}
html.bp-v2 body.bp-app .bp-zeilenknopf:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app .bp-zeilenknopf:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .bp-zeilenknopf.gefahr {
  margin-left: var(--space-1);
}
html.bp-v2 body.bp-app .bp-zeilenknopf.gefahr:hover {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.bp-app .bp-zeilenknopf {
    width: 44px;
    height: 44px;
  }
}

/* Schliessen-Knoepfe der Bestandsfenster (WhatsApp, Aktionsfenster): dasselbe
   Kreuz als Zeichen im runden Knopf wie im Hilfe-Assistenten und im
   Rechnungsfenster – statt des Schriftzeichens „ד (UI-Pass 22.09.2026). */
html.bp-v2 .aktion-zu,
html.bp-v2 body.bp-app .wa-fenster .wa-zu {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 0;
  line-height: 0;
}
html.bp-v2 .aktion-zu:hover,
html.bp-v2 body.bp-app .wa-fenster .wa-zu:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 .aktion-zu:focus-visible,
html.bp-v2 body.bp-app .wa-fenster .wa-zu:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ==== regeln.css ==== */
/* ROLLEN FUER DEN BESTAND (11.10.2026) - die Regeln stehen in docs/ui-v2/REGELN.md.
 *
 * Die neuen Ansichten (.v2-btn, .v2-card, .v2-input ...) lesen die Rollen-Token aus tokens.css von selbst. Die
 * Bestandsseiten tun es nicht: app-neu.css setzt Knopf, Feld, Karte, Marke und Tabellenkopf mit eigenen Zahlen und
 * `!important` (36 px Knopf, 9/12 px Feldrand, 21 px Marke, 11 px Tabellenkopf, 32 px unter dem Seitenkopf). Gemessen
 * am 11.10.2026 auf 19 Seiten: derselbe Knopf 32,6 / 34 / 36 / 38 / 40 px hoch, dasselbe Feld 38 / 39,6 / 41,6 px,
 * dieselbe Marke 21 und 24 px, der Abstand unter dem Seitentitel 20 und 32 px.
 *
 * Dieses Blatt bringt die Familien des Bestands auf die Rollen - EINMAL, fuer alle Seiten. Es steht VOR den Blaettern
 * der einzelnen Seiten (compat/seiten/): eine Seite darf abweichen, aber nur dort und mit Begruendung. Eine neue Zahl
 * fuer eine Rolle gehoert in tokens.css, nicht hierher.
 *
 * `!important` steht hier nur, wo app-neu.css oder theme.css es selbst traegt - sonst kaeme die Regel nicht an. */

/* 1  KNOPF --------------------------------------------------------------------------------------------------------
   Die Familie (.btn, .primary-btn, button.primary ...) steht in compat/legacy-components.css unter „Knöpfe“:
   --control-h hoch, Gewicht mittel. Der Zeilenknopf (.bp-zeilenknopf) steht dort ebenfalls und ist --icon-btn-sm.
   Hier nur die kleine Form - fuer Handlungen IN einer Zeile oder einem Kaertchen, neben denen ein normaler Knopf zu
   schwer waere. */
html.bp-v2 body.bp-app .bp-knopf-klein {
  min-height: var(--control-h-sm) !important;
  padding: 0 var(--space-3) !important;
  font-size: var(--text-sm) !important;
}

/* 2  FELD ---------------------------------------------------------------------------------------------------------
   Genau --control-h hoch. app-neu.css gibt 9 px Rand oben und unten zu 19,6 px Zeile und 2 px Kontur: 39,6 px - und
   das Datumsfeld kam mit seinem Kalenderzeichen auf 41,6 px. Die Hoehe traegt jetzt das Feld, nicht der Rand. */
html.bp-v2 body.bp-app input[type="text"],
html.bp-v2 body.bp-app input[type="email"],
html.bp-v2 body.bp-app input[type="number"],
html.bp-v2 body.bp-app input[type="date"],
html.bp-v2 body.bp-app input[type="password"],
html.bp-v2 body.bp-app input[type="search"],
html.bp-v2 body.bp-app input[type="tel"],
html.bp-v2 body.bp-app input:not([type]),
html.bp-v2 body.bp-app select {
  height: var(--control-h);
  padding-block: 0 !important;
}
/* Zeitpunkt, Uhrzeit, Monat, Adresse: diese Sorten kennt die Feldregel in app-neu.css nicht - sie standen mit dem
   Aussehen des Browsers da (50 px hoch, eckig, 13 px; gefunden am 12.10.2026 in „Reise ohne Zahlung abrechnen“). */
html.bp-v2 body.bp-app input:is([type="datetime-local"], [type="time"], [type="month"], [type="url"]) {
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
}

/* 3  MARKE / PILLE ------------------------------------------------------------------------------------------------
   Eine Hoehe, eine Schrift - wie .v2-pill. Im Bestand waren es 21 px und 11 px. */
html.bp-v2 body.bp-app .status-pill,
html.bp-v2 body.bp-app .badge,
html.bp-v2 body.bp-app .tag,
html.bp-v2 body.bp-app .bp-marke,
html.bp-v2 body.bp-app .soon-badge,
html.bp-v2 body.bp-app .project-type,
html.bp-v2 body.bp-app .primary-feature-badge,
html.bp-v2 body.bp-app .lock-badge,
html.bp-v2 body.bp-app .tarif-marke {
  min-height: var(--marke-h);
  font-size: var(--text-xs) !important;
}

/* 4  TABELLENKOPF -------------------------------------------------------------------------------------------------
   12 px, Gewicht mittel. Vorher je nach Seite 11/600, 12/500 und 14/650. */
html.bp-v2 body.bp-app table:not(.preview-items) th {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* 5  SEITENKOPF -> INHALT -----------------------------------------------------------------------------------------
   app-neu.css gibt dem Kopf 32 px mit `!important`; die Blaetter der Seiten wollten 20 und kamen nicht an. */
html.bp-v2 body.bp-app .sheet-kopf,
html.bp-v2 body.bp-app .account-page-head,
html.bp-v2 body.bp-app .hero.account-page-head,
html.bp-v2 body.bp-app .uev-kopf {
  margin-bottom: var(--abstand-seitenkopf) !important;
}

/* 6  BESCHRIFTUNG UND HILFSTEXT AM FELD ---------------------------------------------------------------------------
   Beschriftung 13 px / mittel, Hilfstext 13 px in der zweiten Tintenfarbe. */
html.bp-v2 body.bp-app .field > label,
html.bp-v2 body.bp-app .li-field-label,
html.bp-v2 body.bp-app label.feld-titel {
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
}

/* 7  MEHRZEILIGES FELD ---------------------------------------------------------------------------------------------
   Der Text beginnt an derselben Kante wie im einzeiligen Feld (12 px) - app-neu.css gibt dem Textfeld 10. */
html.bp-v2 body.bp-app textarea:not(#kg-text) {
  padding: var(--space-2) var(--space-3) !important;
}

/* 8  BESCHRIFTUNG AUSSERHALB VON .field ----------------------------------------------------------------------------
   theme.css macht jedes <label> 600. Ohne Gewicht (:where), damit jede genauere Regel - etwa die Zeile neben einem
   Haekchen mit 400 - weiter gewinnt. */
:where(html.bp-v2 body.bp-app) label {
  font-weight: var(--weight-medium);
}

/* 9  KENNZAHL-KACHEL ------------------------------------------------------------------------------------------------
   Innenrand wie jede Karte - app-neu.css gab ihr 18 px oben und unten. */
html.bp-v2 body.bp-app .panel.uev-kpi {
  padding: var(--karte-innenrand) !important;
}

/* 10  MIT DEM FINGER UND AM TELEFON ----------------------------------------------------------------------------------
   Die Hoehen kommen aus den Token (responsive.css: --control-h 44). Zwei Dinge tragen die Token nicht: */
@media (max-width: 900px), (pointer: coarse) {
  /* FELDSCHRIFT 16 px - unter derselben Bedingung wie die 44 px Hoehe, also auch am Tablet. Darunter zoomt iOS beim Antippen in das Feld hinein und laesst die Seite verschoben zurueck.
     app-neu.css verlangt 16 px schon - mit `body.bp-app input`, und das verliert gegen die eigene Feldregel
     (`body.bp-app input[type="text"]`, 14 px). Gemessen am 11.10.2026 bei 390 px: Auswahlfelder 16 px, Textfelder 14. */
  html.bp-v2 body.bp-app input[type="text"],
  html.bp-v2 body.bp-app input[type="email"],
  html.bp-v2 body.bp-app input[type="number"],
  html.bp-v2 body.bp-app input[type="date"],
  html.bp-v2 body.bp-app input[type="password"],
  html.bp-v2 body.bp-app input[type="search"],
  html.bp-v2 body.bp-app input[type="tel"],
  html.bp-v2 body.bp-app input:is([type="datetime-local"], [type="time"], [type="month"], [type="url"]),
  html.bp-v2 body.bp-app input:not([type]),
  html.bp-v2 body.bp-app select,
  html.bp-v2 body.bp-app textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  /* KARTE -> KARTE wie in den neuen Ansichten (16 statt 20). Mit :where, damit die Regel genau so schwer wiegt wie
     die Kartenregel in app-neu.css und jede genauere Ausnahme dort weiter gilt. */
  :where(html.bp-v2) body.bp-app .panel,
  :where(html.bp-v2) body.bp-app .bp-karte,
  :where(html.bp-v2) body.bp-app .sheet,
  :where(html.bp-v2) body.bp-app .main-content > section:not(#tarif-vergleich-section),
  :where(html.bp-v2) body.bp-app .content > section:not(#tarif-vergleich-section),
  :where(html.bp-v2) body.bp-app .content > .tab-panel > section:not(#tarif-vergleich-section),
  :where(html.bp-v2) body.bp-app .tab-panel > section:not(#tarif-vergleich-section),
  :where(html.bp-v2) body.bp-app .gated-content > section,
  :where(html.bp-v2) body.bp-app .setup-panel,
  :where(html.bp-v2) body.bp-app .project-list-panel,
  :where(html.bp-v2) body.bp-app .next-steps-panel,
  :where(html.bp-v2) body.bp-app .project-list-rest,
  :where(html.bp-v2) body.bp-app .task-section,
  :where(html.bp-v2) body.bp-app .primary-feature-section,
  :where(html.bp-v2) body.bp-app .secondary-feature-section {
    margin-bottom: var(--abstand-karten) !important;
  }
}

/* 11  KARTENKOPF: TITEL -> BEISCHRIFT -> INHALT ---------------------------------------------------------------------
   Gemessen am 12.10.2026: Titel -> Beischrift 2 / 4 / 8 / 10 px, Kopf -> Inhalt 0 bis 37 px. Die 8 px kamen aus EINER
   Bestandsregel (`h2 + p { margin-top: var(--a2) !important }`, app-neu.css), der Rest aus den Seiten. Jetzt steht die
   Beischrift --abstand-titel-beischrift unter ihrem Titel und der Inhalt --abstand-kartentitel unter dem Kopf - gleich,
   ob der Kopf nur ein Titel ist, eine Zeile mit Knopf oder ein Block mit Beischrift. Was eine Seite dafuer an ihrem
   eigenen Kopf richten muss, steht in ihrem Blatt unter compat/seiten/. */
html.bp-v2 body.bp-app :is(h2, h3, .section-title, .v2-card-title) + p { margin-top: var(--abstand-titel-beischrift) !important; }
html.bp-v2 body.bp-app :is(h2, .section-title, .v2-card-title) + :is(small, .v2-meta, .v2-muted, .sub) { margin-top: var(--abstand-titel-beischrift); }

/* 12  ABSCHNITTSTITEL IN EINER KARTE (h3) ----------------------------------------------------------------------------
   14 px / 600 - stand als 14 und 15 px nebeneinander. Der Titel eines Leerzustands (.v2-state-title) gliedert nichts
   und bleibt ruhiger. */
html.bp-v2 body.bp-app :is(.panel, .sheet, .v2-card, .bp-karte) h3:not(.v2-state-title) {
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
}

/* 13  TABELLENZEILE ---------------------------------------------------------------------------------------------------
   Wie .v2-table: die Zelle hat --zelle-y oben und unten, die Zeile ist mindestens --row-h hoch. Projekte standen mit
   10 px, Rechnungen mit 12 px, Belege mit 6 px da - drei Zeilenhoehen fuer dieselbe Sorte Liste. Nur solange die Liste
   eine Tabelle ist: darunter stapelt jede Seite ihre Zeilen zu Bloecken (Projekte bis 640 px, Rechnungen bis 900 px). */
@media (min-width: 641px) {
  html.bp-v2 body.bp-app .modal-panel table tbody td,
  html.bp-v2 body.bp-app .mandanten-tabelle tbody td { height: var(--row-h); padding-top: var(--zelle-y); padding-bottom: var(--zelle-y); }
}
/* Das Transparenz-Protokoll stapelt nicht: es bleibt auch am Telefon eine Tabelle. Dort griff die Regel oben nicht, und
   die Zeile stand mit 10 px da - gemessen am 12.10.2026 in einem Lauf, dessen Vorschau schon einen Eintrag hatte. */
html.bp-v2 body.bp-app #activity-log-list table tbody td { height: var(--row-h); padding-top: var(--zelle-y); padding-bottom: var(--zelle-y); }
@media (min-width: 901px) {
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table tbody td { height: var(--row-h); padding-top: var(--zelle-y); padding-bottom: var(--zelle-y); }
}

/* 14  LEERE ZEILE -----------------------------------------------------------------------------------------------------
   „Noch kein Kunde angelegt.“ - der eine Satz in einer Karte, die noch nichts zeigt. Beischrift-Groesse, ruhig, links.
   Der Leerzustand einer ganzen Flaeche ist .v2-state (states.css). */
html.bp-v2 body.bp-app :is(.bp-leer, .stamm-leer, .uev-leer, .v2-leerzeile) {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* 15  FENSTER UND DIALOG ----------------------------------------------------------------------------------------------
   Ein Blatt, das ueber der Seite liegt: Innenrand --fenster-innenrand (24, am Telefon 20), Radius --fenster-radius,
   Titel 20 px / 600, Schliessen-Knopf --icon-btn. Vorher: Innenrand 20 / 22,4 / 24, Radius 12 / 24, Titel 16 / 500,
   20 / 600 und 24 / 600, Schliessen-Knopf am Telefon 36 x 36, 36 x 44 und 44 x 44. Die Begruessung
   (.v2-umzug-titel, 24 px) bleibt groesser: sie ist eine Buehne, kein Arbeitsfenster. */
html.bp-v2 body.bp-app :is(.modal-panel > .modal-header, .rd-kopf) h2,
html.bp-v2 body.bp-app .stamm-dialog-karte > h2,
html.bp-v2 body.bp-app .wa-fenster .wa-kopf h2,
html.bp-v2 body.bp-app .bp-dialog-titel {
  font-size: var(--text-xl) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
html.bp-v2 body.bp-app .stamm-dialog-karte {
  padding: var(--fenster-innenrand);
  border: 0;
  border-radius: var(--fenster-radius);
  box-shadow: var(--shadow-raised);
}
/* Ein Fenster, das beim Öffnen den Fokus bekommt (`panel.focus()`), behält seine Ecken. WebKit wertet diesen Fokus
   als :focus-visible, Chrome nicht - und die allgemeine Fokusregel des Bestands (app-neu.css: `body.bp-app
   :focus-visible { border-radius: var(--e-klein) }`) nahm dem Willkommen-Fenster in Safari und in der Mac-App die
   Ecken: 10 statt 24 px (gemessen am 12.10.2026, voller WebKit-Lauf). */
html.bp-v2 body.bp-app :is(.v2-dialog-panel, .modal-panel, .stamm-dialog-karte):focus-visible { border-radius: var(--fenster-radius); }
html.bp-v2 body.bp-app :is(.modal-panel .modal-close, .rd-zu),
html.bp-v2 body.bp-app .wa-fenster .wa-zu,
html.bp-v2 .bh-assistent-zu {
  width: var(--icon-btn);
  height: var(--icon-btn);
  min-height: 0;
}
/* Das WhatsApp-Fenster (nach seinem Umbau, 12.10.2026, Trello 226). Sein Blatt ist aus Kopf (mit Trennlinie ueber die
   ganze Breite) und Inhalt gebaut - der Innenrand steht deshalb an beiden Teilen, nicht am Blatt; gemessen wird er am
   Titel. Vorher (gemessen): Rand 20, Radius 20, Titel 16 / 500, Schliessen-Knopf am Telefon 36. */
html.bp-v2 body.bp-app .wa-fenster {
  border-radius: var(--fenster-radius);
}
html.bp-v2 body.bp-app .wa-fenster .wa-kopf {
  padding: var(--fenster-innenrand) var(--fenster-innenrand) var(--space-4);
}
html.bp-v2 body.bp-app .wa-fenster .wa-inhalt {
  padding: var(--fenster-innenrand);
}

/* 16  KNOEPFE, DIE NOCH EIGENE MASSE HATTEN ---------------------------------------------------------------------------
   Gefunden in den Zustaenden (12.10.2026): Vorschlaege im Auftragsgespraech 36 px / 600 / Radius 12, Vorschlaege im
   Assistenten 35 px / 550, „Weiter“ im Rundgang 42 px / 600 / Radius 7, „Archiv oeffnen“ 28 px / 600, das Kreuz an
   der Rechnungsposition 28 und 44 px, Senden im Assistenten 42 px. Jeder nimmt jetzt seine Rolle. */
/* (Die Vorschlaege stehen in ihren Blaettern: compat/seiten/projekt-schritt1.css und assistent.css - beide werden
   nach dieser Datei geladen.) */
html.bp-v2 body.bp-app #questions-section > summary #archive-toggle {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium) !important;
}
html.bp-v2 #tour-next-btn,
html.bp-v2 #tour-back-btn {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
html.bp-v2 #tour-skip-btn { width: var(--icon-btn-sm); height: var(--icon-btn-sm); }
/* !important, weil app-neu.css beide Groessen (28 und 44 px) so setzt. */
html.bp-v2 body.bp-app .line-item-row .line-item-remove { width: var(--icon-btn-sm) !important; height: var(--icon-btn-sm) !important; }

/* 17  BESCHRIFTUNG AN KAESTCHEN UND AUSWAHLPUNKT ----------------------------------------------------------------------
   Der Satz hinter einem Kaestchen ist Fliesstext (14 px / 400), keine Feldbeschriftung - „GiroCode aufdrucken“ stand
   mit 13 px da, „Kleinunternehmer nach §19“ mit 14 px. !important, weil die Beschriftungsregel (Abschnitt 6) sonst
   ueber `.field > label` gewinnt. */
html.bp-v2 body.bp-app input:is([type="checkbox"], [type="radio"]) + label {
  font-size: var(--text-base) !important;
  font-weight: var(--weight-regular) !important;
}

/* 18  TASTATURFOKUS, WO EINE VARIANTE IHN VERSCHLUCKTE -----------------------------------------------------------------
   Der Hausring kommt als box-shadow. Drei Knoepfe setzen fuer ihre Variante einen eigenen Schatten mit mehr Gewicht
   als die Fokusregel - mit der Tastatur sah man dort nicht, wo man steht (gefunden vom Klicktest, 12.10.2026):
   „Auftrag starten“ im Gespraech, der gewaehlte Zeitraum in Schritt 4, „In Schritt 3 klaeren“, der laufende Schritt
   auf der Uebersicht und das gewaehlte Feld eines Umschalters (Hell / Dunkel). */
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-haupt:focus-visible,
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art.hat-schieber .s4-art.aktiv:focus-visible,
html.bp-v2 body.bp-app #gaps .s4-klaeren:focus-visible,
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="aktuell"] > a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}
/* Im Umschalter liegt der Ring INNEN im Feld: die Spur schneidet ab, was ueber ihren Rand ragt - ein Schatten oder
   eine Kontur aussen war am gewaehlten Feld (Hell / Dunkel) nicht zu sehen. */
html.bp-v2 body .v2-segmented > :focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: -2px;
}

/* Das gewählte Projekt im Menü „Projekt wechseln“ liegt schon auf der Fläche, mit der die anderen Zeilen den Fokus
   zeigen - mit der Tastatur darauf sah man nichts (gemessen 12.10.2026). Dort zeigt ihn der Ring. */
html.bp-v2 body .v2-menu-item:is(.is-active, [aria-current]):focus-visible { box-shadow: var(--focus-ring) !important; }

/* 19  AUFKLAPPZEILE ANTWORTET AUF DEN ZEIGER ---------------------------------------------------------------------------
   Vier Zeilen, die man anklicken kann, taten beim Ueberfahren nichts (Klicktest, 12.10.2026) - jede andere tut es.
   Drei bekommen die Hover-Farbe - in Schritt 4 so, wie es dort fuer jeden Klappkopf gilt („der Titel faerbt sich, sonst
   nichts“, projekt-schritt4.css); bei den DATEV-Angaben gewann die Farbe der leisen Zeile gegen diese Regel. Die Zeile
   zum Loeschen traegt ihre Warnfarbe fest und wird stattdessen unterstrichen.
   „Nach der Uebergabe“: dort soll sich der Titel IN der Zeile faerben - die Regel dafuer verlor gegen die Titelfarbe,
   die Zeile tat beim Ueberfahren gar nichts (mit erzwungenem Hover nachgemessen). Der Klicktest schaut nur auf die
   Zeile selbst und meldet sie deshalb weiter. */
html.bp-v2 body.bp-app .abo-faq-item > summary:hover,
html.bp-v2 body .v2-settings-gefahr--ruhig > summary:hover { color: var(--hover-akzent); }
html.bp-v2 body.bp-app #tab-panel-overview #s4-datev-angaben > summary:hover,
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf:hover > .section-title { color: var(--hover-akzent) !important; }
html.bp-v2 body .v2-settings-gefahr:not(.v2-settings-gefahr--ruhig) > summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Dasselbe an drei Stellen der Rechnungsseite (Qualitaetslauf ueber alle Zustaende, 12.10.2026; mit erzwungenem Hover
   nachgemessen): „PDF oeffnen“, die Vorschau, die sich zum Vergroessern anklicken laesst, und der Verweis in der
   Stammdaten-Warnung. */
html.bp-v2 body.bp-app .pdf-oeffnen:hover { background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #invoice-preview-buehne:hover { border-color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #profile-warning > a:hover { text-decoration-thickness: 2px; }
/* Der Textknopf der Projektseite (`.nachschub-link`) antwortete nur über die Farbe seines Strichs - und wo der Strich
   schon die Schriftfarbe hat („Rechnungen holen lassen“), gar nicht. Er wird dunkler wie jeder Verweis. */
html.bp-v2 body.bp-app .nachschub-link:hover { color: var(--hover-akzent); }

/* 20  KONTRAST AN ZWEI STELLEN ----------------------------------------------------------------------------------------
   „Mac-App herunterladen“ in Schritt 2 stand in 13 px mit 3,97:1 auf dem gruenen Feld; das Stornieren-Zeichen beim
   Ueberfahren mit 4,27:1 auf seiner roten Flaeche. */
html.bp-v2 body.bp-app #scan-app-laden { color: var(--green-700); }
html.bp-v2 body.bp-app #scan-app-laden:hover { color: var(--hover-akzent); }
html.bp-v2 body.bp-app .bp-zeilenknopf.gefahr:hover { color: var(--danger-strong); }
/* DREI WEITERE, erst gesehen, als die Prüfung auch einzelne Zeichen und im Hellen die Farben las (12.10.2026):
   - `.icon-btn` der Projektseite dimmt mit 60 % Deckkraft. Gedacht für ein Symbol, getragen auch von Wörtern
     („Fertig“, „Abbrechen“): 2,6:1. Leise über die Farbe, nicht über die Deckkraft.
   - Die Zahl im gewählten Filter der Rechnungen stand weiß auf aufgehelltem Grün (4,24:1) - jetzt dunkler unterlegt,
     wie es der Dunkelmodus schon tat.
   - „Entfernen“ am Auszug im Gespräch: 90 % Deckkraft auf der grünen Blase ergaben 4,35:1. */
html.bp-v2 body.bp-app .icon-btn { opacity: 1; color: var(--text-secondary); }
html.bp-v2 body.bp-app .bp-filter.aktiv .bp-filter-zahl { background: rgba(0, 0, 0, 0.24); }
html.bp-v2 body.bp-app .kg-auszug-weg { opacity: 1; }

/* 21  ZEICHEN AUS DEM STYLESHEET -----------------------------------------------------------------------------------
   ✓ ● ▸ ▾ hat die Hausschrift nicht. Im Text setzt core/pfeile.js eine Zeichnung an ihre Stelle; was eine Seite per
   `content` setzt, erreicht das Skript nicht - der Qualitätslauf fand so „✓“ und „●“ am Projektstand von Schritt 2
   (12.10.2026). Dieselben Zeichnungen (Token in components.css), Farbe wie zuvor vom Pseudoelement. */
html.bp-v2 body.bp-app :is(.s2-projektstand-teile li.erledigt, .s2-projektstand-teile li.vorschlag,
                           .kg-aktivitaet-zeile.fertig, .kg-aktivitaet-zeile.laeuft, .pc-haken li)::before,
html.bp-v2 body.bp-app .pc-bereich-kopf::before,
html.bp-v2 body.bp-app .pc-karten-aktion::after {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: var(--maske-haken) center / contain no-repeat;
  mask: var(--maske-haken) center / contain no-repeat;
}
html.bp-v2 body.bp-app :is(.s2-projektstand-teile li.vorschlag, .kg-aktivitaet-zeile.laeuft)::before {
  -webkit-mask-image: var(--maske-punkt);
  mask-image: var(--maske-punkt);
}
html.bp-v2 body.bp-app .kg-aktivitaet-zeile:is(.fertig, .laeuft)::before { margin-right: 0.3em; }
html.bp-v2 body.bp-app .pc-bereich-kopf::before { -webkit-mask-image: var(--maske-winkel); mask-image: var(--maske-winkel); }
html.bp-v2 body.bp-app .pc-karten-aktion::after { -webkit-mask-image: var(--maske-winkel-unten); mask-image: var(--maske-winkel-unten); }

/* ==== compat/seiten/dialoge.css ==== */
/* UI v2 – Bestandsseite „dialoge“ im neuen Aussehen (eigene Welle). */

/* KONTINGENT AUFGEBRAUCHT (konto-extras.js, limitPopupZeigen).
 * Gleiche Bauform wie das WhatsApp-Fenster: ruhiges Blatt, Pillenknoepfe,
 * „Später“ links und die eine gruene Handlung rechts. Am Handy stehen beide
 * untereinander in voller Breite, die Handlung oben. */
html.bp-v2 body.bp-app .bp-limit-huelle {
  padding: var(--space-4);
  background: oklch(24% 0.014 155 / 0.28);
}

html.bp-v2 body.bp-app .bp-limit-kasten {
  /* 520 statt 460 (02.10.2026): das Fenster zur Projektgrenze trägt drei Knöpfe
   * („Projekt abschließen“, „Schließen“, „Tarife ansehen“) – bei 460 brach der
   * grüne allein in eine zweite Zeile. Dieselbe Breite wie .v2-dialog-panel. */
  max-width: 520px;
  padding: var(--fenster-innenrand) !important;
  border: 0 !important;
  border-radius: var(--fenster-radius) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-raised) !important;
  color: var(--text-primary);
}

html.bp-v2 body.bp-app .bp-limit-kasten h2 {
  margin: 0 0 var(--space-3) !important;
  color: var(--text-primary);
  font: 600 var(--text-xl)/1.3 var(--font-sans) !important;
  letter-spacing: -0.01em;
}

html.bp-v2 body.bp-app .bp-limit-kasten p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 1.55;
}

html.bp-v2 body.bp-app .bp-limit-kasten p + p {
  margin-top: var(--space-3);
}

html.bp-v2 body.bp-app .bp-limit-kasten .bp-limit-sub {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

html.bp-v2 body.bp-app .bp-limit-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

html.bp-v2 body.bp-app :is(.bp-limit-primaer, .bp-limit-sekundaer) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill) !important;
  font: 500 var(--text-base)/1.2 var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

html.bp-v2 body.bp-app .bp-limit-primaer:not(.bp-still) {
  order: 2;
  border-color: var(--fix-green-700);
  background: var(--fix-green-700) !important;
  color: #fff !important;
}

html.bp-v2 body.bp-app .bp-limit-primaer:not(.bp-still):hover {
  border-color: var(--hover-primaer);
  background: var(--hover-primaer) !important;
}

html.bp-v2 body.bp-app .bp-limit-sekundaer {
  order: 1;
  border-color: var(--border-default);
  background: var(--panel);
  color: var(--text-primary);
}

html.bp-v2 body.bp-app .bp-limit-sekundaer:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}

html.bp-v2 body.bp-app :is(.bp-limit-primaer, .bp-limit-sekundaer):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 519.98px) {
  html.bp-v2 body.bp-app .bp-limit-kasten {
    padding: var(--space-5) !important;
  }

  html.bp-v2 body.bp-app .bp-limit-knoepfe {
    flex-direction: column;
    margin-top: var(--space-5);
  }

  html.bp-v2 body.bp-app :is(.bp-limit-primaer, .bp-limit-sekundaer) {
    order: 0 !important;
    width: 100%;
    min-height: 44px;
  }
}

/* BESTANDS-DIALOGE (.modal-overlay): Transparenz-Log, Archiv, Anleitung.
 * Blatt, Kopf und Inhalt trugen je einen eigenen Innenabstand – am Handy stand
 * der Text 42px vom Rand. Der Abstand sitzt jetzt einmal am Blatt. */
html.bp-v2 body.bp-app .modal-panel:not(.scan-info-dialog) {
  --dialog-rand: var(--fenster-innenrand);
  position: relative;
  padding: var(--dialog-rand) !important;
  border: 0 !important;
  border-radius: var(--fenster-radius) !important;
  box-shadow: var(--shadow-raised) !important;
}

/* Der Kopf klebt beim Scrollen. Er reicht bis an die Oberkante des Blatts und
 * hat eine Fläche – sonst lief der Inhalt im Randstreifen darüber sichtbar
 * durch. */
html.bp-v2 body.bp-app .modal-panel:not(.scan-info-dialog) > .modal-header {
  top: calc(-1 * var(--dialog-rand));
  z-index: 2;
  gap: var(--space-3);
  margin: calc(-1 * var(--dialog-rand)) 0 0 !important;
  padding: var(--dialog-rand) 0 var(--space-3) !important;
  background: var(--panel);
}

/* Das Kreuz steht in der Kopfzeile neben dem Titel. Absolut gesetzt hing es
 * am klebenden Kopf und rutschte unter die Titelzeile, sobald eine Beischrift
 * darunter stand (Archiv). */
html.bp-v2 body.bp-app .modal-panel:not(.scan-info-dialog) > .modal-header > .modal-close {
  position: static;
  flex: none;
  align-self: flex-start;
  margin: -6px -8px 0 auto;
}

html.bp-v2 body.bp-app .modal-panel:not(.scan-info-dialog) > .modal-header ~ div {
  padding: 0 !important;
}

html.bp-v2 body.bp-app .modal-panel .modal-close {
  top: var(--space-4);
  right: var(--space-4);
  border-radius: var(--radius-pill);
}

html.bp-v2 body.bp-app .modal-panel .modal-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ANLEITUNG COMPUTER-SUCHE (#scan-tutorial-modal): die Betriebssystem-Wahl war
 * ein grauer Kasten direkt unter dem grünen Hilfekasten. Sie steht jetzt frei;
 * Knöpfe in Pillenform wie überall. Am Handy stehen Text und Hilfeknopf
 * untereinander – nebeneinander wurde der Text neun Zeilen hoch. */
html.bp-v2 body.bp-app #scan-tutorial-modal .scan-help-cta {
  gap: var(--space-4);
  padding: var(--space-4);
  border-color: var(--green-200);
  border-radius: var(--radius-md);
  background: var(--green-050);
}

html.bp-v2 body.bp-app #scan-tutorial-modal .scan-help-cta .txt {
  color: var(--text-primary);
  line-height: 1.5;
}

html.bp-v2 body.bp-app #scan-tutorial-modal :is(.scan-help-cta button, .copy-btn) {
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--fix-green-700);
  font-size: var(--text-base);
  font-weight: 500;
}

html.bp-v2 body.bp-app #scan-tutorial-modal :is(.scan-help-cta button, .copy-btn):hover {
  background: var(--hover-primaer);
}

html.bp-v2 body.bp-app #scan-tutorial-modal .os-switcher-box {
  margin: var(--space-5) 0 var(--space-2);
  padding: 0;
  border: 0;
  background: none;
}

/* Der Auswahlpunkt sitzt 10px in der Ecke – bei 24px Rundung lag er auf der Kante. */
html.bp-v2 body.bp-app #scan-tutorial-modal .os-switcher-box .choice-card.small {
  border-radius: var(--radius-md) !important;
}

@media (max-width: 519.98px) {
  html.bp-v2 body.bp-app #scan-tutorial-modal .scan-help-cta {
    flex-direction: column;
    align-items: stretch;
  }

  html.bp-v2 body.bp-app #scan-tutorial-modal .scan-help-cta button {
    width: 100%;
    min-height: 44px;
  }
}

/* COMPUTER-SUCHE (#scan-info-modal): Kopf mit Haarlinie und Inhalt haben ihren
 * eigenen Abstand, theme.css legte dem Blatt aber mit !important noch einen an.
 * Die Haarlinie reichte so nicht bis an den Rand, und am Handy lief die
 * Knopfzeile links aus dem Blatt heraus. */
html.bp-v2 body.bp-app #scan-info-modal .scan-info-dialog {
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-card-lg) !important;
  box-shadow: var(--shadow-raised) !important;
}

html.bp-v2 body.bp-app #scan-info-modal .scan-info-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 519.98px) {
  html.bp-v2 body.bp-app #scan-info-modal .modal-header {
    padding: var(--space-5) 56px var(--space-4) var(--space-5);
  }

  html.bp-v2 body.bp-app #scan-info-modal .scan-info-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  html.bp-v2 body.bp-app #scan-info-modal .scan-info-actions {
    flex-direction: column;
    align-items: stretch;
  }

  html.bp-v2 body.bp-app #scan-info-modal .scan-info-actions > :is(a, button) {
    justify-content: center;
    width: 100%;
    min-height: 44px !important;
  }
}

/* TOTER PROJEKTLINK (index.html, _zeigeToterLink): die Seite ersetzt ihren
 * Inhalt durch eine Meldung mit Inline-Stilen in Systemschrift und einem
 * eckigen Knopf. Unter v2 dieselbe Meldung als ruhige Karte in Hausschrift. */
html.bp-v2:has(body[data-toter-link]),
html.bp-v2 body[data-toter-link] {
  min-height: 100vh;
  margin: 0;
  background: var(--backdrop) !important;
}
/* Der Grund-Body der Projektseite hat Seitenpolster und eine Breitengrenze –
 * die Karte stand am Handy dadurch nicht mittig. */
html.bp-v2 body[data-toter-link] {
  width: auto !important;
  max-width: none !important;
  padding: 1px 0 0 !important;
}
html.bp-v2 body[data-toter-link] > div {
  max-width: 520px !important;
  margin: 14vh auto 0 !important;
  padding: var(--space-8) !important;
  border-radius: var(--radius-card-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
}
html.bp-v2 body[data-toter-link] h1 {
  margin: 0 0 var(--space-3) !important;
  font: 600 var(--text-2xl)/1.25 var(--font-sans) !important;
  letter-spacing: -0.01em;
}
html.bp-v2 body[data-toter-link] p {
  margin: 0 0 var(--space-6) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-md);
  line-height: 1.55;
}
html.bp-v2 body[data-toter-link] a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--fix-green-700) !important;
  font-weight: var(--weight-medium);
}
html.bp-v2 body[data-toter-link] a:hover {
  background: var(--hover-primaer) !important;
}
html.bp-v2 body[data-toter-link] a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (max-width: 620px) {
  html.bp-v2 body[data-toter-link] > div {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--space-4));
    margin: var(--space-6) auto 0 !important;
    padding: var(--space-6) !important;
  }
  html.bp-v2 body[data-toter-link] a {
    justify-content: center;
    width: 100%;
  }
}

/* RÜCKFRAGE MIT FOLGEN (bp-dialoge.js, 02.10.2026 – „Projekt löschen“ aus der
 * Projektliste, Emil Testkauf): Überschrift wie im Grenzen-Fenster, die Liste
 * dessen, was verschwindet, ein leiser Fußsatz und das Feld für den Namen.
 * Abstände im Raster der Kontoseiten: 12 px zwischen den Teilen, 24 px vor den
 * Knöpfen. */
html.bp-v2 body.bp-app .bp-dialog.bp-dialog-mit-titel {
  max-width: 30rem;
}
html.bp-v2 body.bp-app .bp-dialog-titel {
  /* !important wie beim Grenzen-Fenster: app-neu.css setzt jede h2 der App
   * mit !important auf die Kartentitelgröße. */
  margin: 0 0 var(--space-3) !important;
  color: var(--text-primary);
  font: 600 var(--text-xl)/1.3 var(--font-sans) !important;
  letter-spacing: -0.01em;
}
html.bp-v2 body.bp-app .bp-dialog-mit-titel .bp-dialog-text {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 1.55;
}
html.bp-v2 body.bp-app .bp-dialog-punkte {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 1.55;
}
html.bp-v2 body.bp-app .bp-dialog-punkte li { margin: 2px 0; }
html.bp-v2 body.bp-app .bp-dialog-punkte li::marker { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .bp-dialog-fuss {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}
html.bp-v2 body.bp-app .bp-dialog-fuss a {
  color: var(--text-link, var(--green-700));
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .bp-dialog-tippen {
  display: block;
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .bp-dialog-tippfeld {
  margin-bottom: var(--space-6);
}
html.bp-v2 body.bp-app .bp-dialog-knoepfe button {
  min-height: var(--control-h);
  border-radius: var(--radius-pill) !important;
}
@media (max-width: 519.98px) {
  html.bp-v2 body.bp-app .bp-dialog-knoepfe button { min-height: 44px; }
}

/* ==== compat/seiten/uebersicht.css ==== */
/* UI v2 – Bestandsseite „uebersicht“ im neuen Aussehen (eigene Welle). */

/* „Wozu?“ in der Einrichtung reagiert beim Ueberfahren */
html.bp-v2 body.bp-app details.setup-warum-auf > summary {
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app details.setup-warum-auf > summary:hover { color: var(--hover-akzent); background: var(--hover-flaeche); }

/* EINRICHTUNGSSCHRITT „ist dran“ ueberall mit normalem Radius – die Pillenform
 * des Bestands wird bei mehrzeiligem Text zum Oval (Projektliste und Uebersicht). */
html.bp-v2 body.bp-app .setup-schritt.ist-dran {
  border-radius: var(--radius-md) !important;
  background: var(--green-050) !important;
  box-shadow: inset 0 0 0 1px var(--green-200) !important;
}

/* VERBINDEN-Knoepfe: Beschriftung mittig, nicht links in einer breiten Pille */
html.bp-v2 body.bp-app .verbindung-tun {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 620px) {
  /* Kennzahl-Kacheln zu zweit statt jede ueber die volle Breite – die
   * Uebersicht war am Handy fast 5000 px lang, meist leere Kachelflaeche. */
  html.bp-v2 body.bp-app .uev-kacheln { grid-template-columns: 1fr 1fr !important; gap: var(--space-3) !important; }
  html.bp-v2 body.bp-app .uev-kacheln > .uev-kpi { padding: var(--space-4) !important; min-width: 0; }
  html.bp-v2 body.bp-app .uev-kacheln .uev-zahl { font-size: var(--text-3xl) !important; line-height: 1.1; }
  html.bp-v2 body.bp-app .uev-kacheln .uev-teil { font-size: var(--text-xs) !important; overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
  html.bp-v2 body.bp-app .uev-kacheln { grid-template-columns: 1fr !important; }
}

/* GRAFIKEN – ruhiger und klarer (Emil, 16.09.2026: „deutlich besser“).
 * Eine starke Farbe fuer das Erledigte, zwei weiche warme Toene fuer das, was
 * noch etwas will. Raster und Beschriftung treten zurueck, die Balken selbst
 * formt core/verlauf-v2.js (breiter, rund, Fuge zwischen den Anteilen). */
html.bp-v2 body.bp-app .uev-grafik {
  --ton-erledigt: var(--chart-done);
  --ton-vorschlag: var(--chart-review);
  --ton-ohne: var(--chart-missing);
}
html.bp-v2 body.bp-app .uev-grafik-kopf { align-items: center; margin-bottom: var(--space-3); }
html.bp-v2 body.bp-app .uev-grafik-kopf .uev-rubrik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-md) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html.bp-v2 body.bp-app .uev-grafik-zeitraum { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-regular); }
html.bp-v2 body.bp-app .uev-grafik svg .vl-raster { stroke: var(--chart-grid) !important; stroke-width: 1; }
html.bp-v2 body.bp-app .uev-grafik svg path { pointer-events: none; }
html.bp-v2 body.bp-app .uev-grafik svg .vl-grundlinie { stroke: var(--border-subtle) !important; stroke-width: 1; }
html.bp-v2 body.bp-app .uev-grafik svg .vl-massstab,
html.bp-v2 body.bp-app .uev-grafik svg .vl-datum {
  fill: var(--text-tertiary) !important;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .uev-grafik svg .vl-datum { text-anchor: middle; }
html.bp-v2 body.bp-app .uev-legende { gap: var(--space-2) var(--space-4) !important; color: var(--text-secondary) !important; font-size: var(--text-sm) !important; }
html.bp-v2 body.bp-app .uev-legende i { width: 10px !important; height: 10px !important; border-radius: 50% !important; }

/* Auskunftskasten beim Ueberfahren wie die Karten */
html.bp-v2 body.bp-app .uev-tip {
  padding: var(--space-2) var(--space-3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  background: var(--panel) !important;
  box-shadow: 0 8px 24px -8px rgba(18, 51, 34, 0.22) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}
html.bp-v2 body.bp-app .uev-tip b { color: var(--text-primary) !important; }
html.bp-v2 body.bp-app .uev-tip .z i { width: 8px !important; height: 8px !important; border-radius: 50% !important; }

/* Zeitraumschalter wie die uebrigen Segment-Umschalter (.v2-segmented, mit
   gleitendem Schieber aus core/schieber.js) - UI-Pass 22.09.2026, Punkt 32.
   Die Seite bringt eigene Regeln fuer .uev-zeitraum/.uev-zr mit; sie werden
   hier auf die Gestalt von .v2-segmented zurueckgesetzt. */
html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented { border: 0 !important; border-radius: var(--radius-pill) !important; background: var(--panel-sunken) !important; padding: 3px !important; }
html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented > .uev-zr { min-height: 28px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary) !important; background: transparent !important; box-shadow: none !important; }
html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented > .uev-zr:hover,
html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented > .uev-zr[aria-pressed="true"] { color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented:not(.hat-schieber) > .uev-zr[aria-pressed="true"] { background: var(--panel-raised) !important; box-shadow: var(--shadow-pill) !important; }
@media (pointer: coarse) {
  html.bp-v2 body.bp-app .uev-zeitraum.v2-segmented > .uev-zr { height: var(--control-h-sm); min-height: var(--control-h-sm); }
}

/* Kopf: Titel und darunter der Zeitraum; Legende mit Summen darunter */
html.bp-v2 body.bp-app .uev-grafik-kopf { align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
/* Am Handy rutscht der Umschalter unter den Titel, statt ihn umzubrechen. */
html.bp-v2 body.bp-app .uev-grafik-titelblock { flex: 1 1 12rem; }
html.bp-v2 body.bp-app .uev-grafik-titelblock .uev-grafik-zeitraum { margin: 0; }
html.bp-v2 body.bp-app .uev-legende b { color: var(--text-primary); font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app .uev-grafik .uev-legende { margin: 0 0 var(--space-1) !important; }

/* Leiser: gestrichelte Hilfslinien, Grundlinie fuer leere Monate, schmale Spur */
html.bp-v2 body.bp-app .uev-grafik svg .vl-raster { stroke-dasharray: 2 5; }
html.bp-v2 body.bp-app .uev-grafik svg .vl-null { fill: var(--border-strong); }
html.bp-v2 body.bp-app .uev-grafik svg .vl-spur { fill: transparent; pointer-events: none; transition: fill var(--dur-fast) var(--ease-out); }
html.bp-v2 body.bp-app .uev-grafik svg .vl-spur.is-an { fill: color-mix(in srgb, var(--text-primary) 6%, transparent); }
html.bp-v2 body.bp-app .uev-grafik svg .uev-treffer:hover,
html.bp-v2 body.bp-app .uev-grafik svg .uev-treffer:focus-visible { fill: transparent !important; }
html.bp-v2 body.bp-app .uev-grafik svg .vl-massstab,
html.bp-v2 body.bp-app .uev-grafik svg .vl-datum { font-weight: var(--weight-regular); }
html.bp-v2 body.bp-app .uev-tip .z-reihe { display: flex; gap: 4px 12px; margin-top: 4px; }

/* Geld- und Fortschrittsbalken: gleiche Hoehe, gleiche Rundung, gleiche Farben */
html.bp-v2 body.bp-app .uev-geldfluss-balken {
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--chart-missing-track) !important;
}
html.bp-v2 body.bp-app .uev-geldfluss-balken i {
  border-radius: 999px;
  background: var(--green-600) !important;
  box-shadow: 3px 0 0 var(--panel);
}
html.bp-v2 body.bp-app .uev-lage-balken,
html.bp-v2 body.bp-app .progress-bar-track {
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--green-100) !important;
}
/* Die Spur muss neben dem Gruen als Spur lesbar sein (UI-Pass, Punkt 30). */
html.bp-v2 body.bp-app #uev-lage .uev-lage-balken {
  background: var(--green-200) !important;
}
html.bp-v2 body.bp-app .uev-lage-balken i,
html.bp-v2 body.bp-app .progress-bar-fill {
  border-radius: 999px !important;
  background: var(--green-600) !important;
}

html.bp-v2 body.bp-app .uev-lage-balken { margin-top: var(--space-2); }

/* VERBINDUNGEN (Uebersicht und Profil) wie Einstellungen › Verbindungen
 * (UI-Pass 22.09.2026, Punkt 33): Symbol | Name + zweite Zeile | Pille rechts,
 * darunter rechts der kleine Link „Verbinden →“. Gleiche Zeilenhoehe, feine
 * Trennlinie. Am Handy bleibt die Pille rechts, die zweite Zeile laeuft unter
 * Symbol und Name weiter. */
html.bp-v2 body.bp-app .verbindung-zeile {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas:
    "zeichen titel wert"
    "zeichen folge tun";
  align-items: center;
  gap: 2px var(--space-3) !important;
  min-height: 64px;
  padding: var(--space-3) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
html.bp-v2 body.bp-app .verbindung-zeile + .verbindung-zeile { border-top: 1px solid var(--divider) !important; }
html.bp-v2 body.bp-app .verbindung-punkt { display: none !important; }
html.bp-v2 body.bp-app .verbindung-zeichen {
  grid-area: zeichen;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel-muted);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .verbindung-zeile[data-zustand="verbunden"] .verbindung-zeichen { color: var(--green-700); }
html.bp-v2 body.bp-app .verbindung-zeichen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.bp-v2 body.bp-app .verbindung-titel { grid-area: titel; align-self: end; font-size: var(--text-base) !important; font-weight: var(--weight-semibold) !important; color: var(--text-primary); }
html.bp-v2 body.bp-app .verbindung-zeile:not(:has(.verbindung-folge)) .verbindung-titel { grid-row: 1 / 3; align-self: center; }
html.bp-v2 body.bp-app .verbindung-wert {
  grid-area: wert;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--text-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
html.bp-v2 body.bp-app .verbindung-zeile:not(:has(.verbindung-tun)) .verbindung-wert { grid-row: 1 / 3; align-self: center; }
html.bp-v2 body.bp-app .verbindung-wert::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
html.bp-v2 body.bp-app .verbindung-zeile[data-zustand="verbunden"] .verbindung-wert { background: var(--green-100); color: var(--green-800) !important; }
html.bp-v2 body.bp-app .verbindung-zeile[data-zustand="abgelaufen"] .verbindung-wert { background: var(--warning-bg); color: var(--warning-strong) !important; }
html.bp-v2 body.bp-app .verbindung-folge {
  grid-area: folge;
  align-self: start;
  margin: 0 !important;
  flex-basis: auto !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.45;
}
html.bp-v2 body.bp-app a.verbindung-tun {
  grid-area: tun;
  justify-self: end;
  align-self: start;
  display: inline-flex !important;
  align-items: center;
  min-height: 0;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--green-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html.bp-v2 body.bp-app a.verbindung-tun:hover { color: var(--hover-akzent) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html.bp-v2 body.bp-app .verbindung-zeile[data-zustand="abgelaufen"] a.verbindung-tun { color: var(--warning-strong) !important; }
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .verbindung-zeile {
    grid-template-areas:
      "zeichen titel wert"
      "zeichen folge folge"
      ". tun tun";
  }
  html.bp-v2 body.bp-app a.verbindung-tun { justify-self: start; justify-content: flex-start; width: auto !important; min-height: 44px; }
}
html.bp-v2 body.bp-app .verbindungsstand-titel {
  margin: 0 0 var(--space-1) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* KENNZAHL-KACHELN
 * Der Kartenabstand des Bestands (margin unten) kam zum Rasterabstand dazu:
 * zwischen den Reihen 34px, zwischen den Spalten 12px. */
html.bp-v2 body.bp-app .uev-kacheln > .uev-kpi { margin: 0 !important; }
/* Aufgaben ausgeblendet: „Als Nächstes“ ist verborgen, die Kacheln standen in
 * der linken Hälfte und rechts daneben blieb eine leere Fläche. Dann nehmen sie
 * die ganze Breite, drei je Reihe. */
@media (min-width: 901px) {
  html.bp-v2 body.bp-app .uev-breit:has(> .uev-naechstes[hidden]) { grid-template-columns: 1fr; }
  html.bp-v2 body.bp-app .uev-breit:has(> .uev-naechstes[hidden]) > .uev-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Am Handy trägt „Letzter Import“ einen Monatsnamen statt einer Zahl – in
 * Kennzahlgröße brach „August 2026“ in zwei riesige Zeilen. */
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .uev-kacheln .uev-zahl.uev-zahl-klein { font-size: var(--text-xl) !important; line-height: 1.25; }
}

/* AUSGABEN UND EINNAHMEN (Emil, UI-Pass 22.09.2026: „einmal zahl drüber einmal
 * daneben. sieht generell irgendwie komisch aus“). Zwei gleich breite, gleich
 * gebaute Haelften; ueber ein gemeinsames Raster (subgrid) stehen Etikett, Zahl,
 * Balkenspur und Legende links und rechts auf denselben Linien. */
html.bp-v2 body.bp-app .uev-geldfluss-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  column-gap: 0;
  row-gap: 0;
  margin-top: var(--space-3);
}
html.bp-v2 body.bp-app .uev-geldfluss-block {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
}
html.bp-v2 body.bp-app .uev-geldfluss-block + .uev-geldfluss-block {
  padding-left: var(--space-6);
  margin-left: var(--space-6);
  border-left: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .uev-geldfluss-block > .uev-rubrik {
  color: var(--text-secondary);
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html.bp-v2 body.bp-app .uev-geldfluss-block > .uev-zahl {
  margin: 2px 0 0 !important;
  font-size: var(--text-3xl) !important;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .uev-geldfluss-balken,
html.bp-v2 body.bp-app .uev-geldfluss-platz {
  display: block;
  height: 10px;
  margin: var(--space-3) 0 var(--space-3) !important;
}
html.bp-v2 body.bp-app .uev-geldfluss-legende {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
html.bp-v2 body.bp-app .uev-geldfluss-legende li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}
html.bp-v2 body.bp-app .uev-geldfluss-legende b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .uev-geldfluss-legende .uev-meta {
  color: var(--text-tertiary);
}
/* Farbpunkt vor „mit“ und „ohne Beleg“ – dieselben Farben wie der Balken. */
html.bp-v2 body.bp-app .uev-geldfluss-legende :is(.uev-gl-mit, .uev-gl-ohne)::before {
  content: "";
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--green-600);
}
html.bp-v2 body.bp-app .uev-geldfluss-legende .uev-gl-ohne::before {
  background: var(--chart-missing);
}
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .uev-geldfluss-reihe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  html.bp-v2 body.bp-app .uev-geldfluss-block {
    grid-row: auto;
    grid-template-rows: none;
  }
  html.bp-v2 body.bp-app .uev-geldfluss-block + .uev-geldfluss-block {
    margin: var(--space-4) 0 0;
    padding: var(--space-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--divider);
  }
  /* Zeitraum unter den Titel statt daneben in zwei Zeilen gequetscht. */
  html.bp-v2 body.bp-app .uev-geldfluss .uev-lage-kopf {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-titel-beischrift);
  }
  /* Untereinander braucht die rechte Haelfte keinen Platzhalter fuer den Balken. */
  html.bp-v2 body.bp-app .uev-geldfluss-platz {
    display: none;
  }
  html.bp-v2 body.bp-app .uev-geldfluss-block + .uev-geldfluss-block .uev-geldfluss-legende {
    margin-top: var(--space-2);
  }
  html.bp-v2 body.bp-app .uev-geldfluss-block > .uev-zahl {
    font-size: var(--text-2xl) !important;
  }
}

/* ALS NÄCHSTES (Emil, UI-Pass 22.09.2026: „das geht garnicht. vorallem beim
 * hover ist die schrift nicht mehr lesbar“). Die ganze Zeile ist das Ziel und
 * reagiert mit einer ruhigen Flaeche; die Handlung steht als Text mit Pfeil
 * rechts und bricht nicht um, der Pfeil rueckt beim Ueberfahren ein Stueck vor.
 * Nichts legt sich mehr ueber die Schrift. Zeilen ueber die volle Kartenbreite
 * (ein allgemeines li-Maximum hielt sie bei 800 px), Betrag in fester Spalte. */
html.bp-v2 body.bp-app .uev-naechstes .uev-lage-kopf {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-app #uev-naechstes-titel {
  white-space: nowrap;
}
html.bp-v2 body.bp-app #uev-naechstes-titel {
  color: var(--text-primary);
  font-size: var(--text-md) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* „Aufgaben einen Monat ausblenden“: eine leise Textaktion, kein zweiter Knopf
 * neben der Hauptaktion. */
html.bp-v2 body.bp-app .uev-naechstes .uev-stille-knopf {
  min-height: var(--control-h-sm) !important;
  padding: 0 var(--space-2) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
}
html.bp-v2 body.bp-app .uev-naechstes .uev-stille-knopf:hover {
  color: var(--hover-akzent) !important;
  text-decoration: underline;
}
html.bp-v2 body.bp-app .uev-naechste {
  gap: 0 !important;
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .uev-naechste > li {
  max-width: none;
  border-bottom: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .uev-naechste > li.uev-nichts {
  padding: var(--space-3) 0;
  border-bottom: 0;
}
html.bp-v2 body.bp-app .uev-sprung {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 7.5rem auto;
  align-items: center;
  gap: var(--space-4) !important;
  min-height: 60px;
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app a.uev-sprung:hover {
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.bp-app a.uev-sprung:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .uev-sprung .wort b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-sprung .uev-zeile {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .uev-betrag {
  justify-self: end;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-sprung .uev-pfeil {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  min-width: 8.5rem;
  justify-content: flex-end;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--green-700) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-sprung .uev-pfeil svg {
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app a.uev-sprung:hover .uev-pfeil {
  background: transparent !important;
  color: var(--hover-akzent) !important;
}
html.bp-v2 body.bp-app a.uev-sprung:hover .uev-pfeil svg {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  html.bp-v2 body.bp-app a.uev-sprung:hover .uev-pfeil svg { transform: none; }
}
/* Am Handy zweizeilig: Name und Betrag oben, darunter Metazeile, die Handlung
 * darunter links. */
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .uev-sprung {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "wort betrag"
      "tun tun";
    row-gap: var(--space-2) !important;
  }
  html.bp-v2 body.bp-app .uev-sprung .wort { grid-area: wort; }
  html.bp-v2 body.bp-app .uev-betrag { grid-area: betrag; align-self: start; }
  html.bp-v2 body.bp-app .uev-sprung .uev-pfeil { grid-area: tun; justify-content: flex-start; min-width: 0; }
}

/* ======================================================================
 * STARTSEITE MIT TIEFE (Henry, 25.09.2026: „die Seite sollte noch mehr nach
 * einer Home Seite aussehen, etwas mehr Tiefe haben und irgendwie schon auf der
 * Seite wiederspiegeln was BelegHero also kann ... mit den 4 Schritten, mit
 * WhatsApp etc. Finde die Seite aktuell noch etwas zu flach und einfach“).
 *
 * Die Flächen bleiben neutral (Hausregel: Grün trägt die Handlung und den
 * Stand, nicht die Fläche). Tiefe kommt aus Ebenen: die Startbühne liegt höher
 * als die Karten darunter, der Ring auf einer eigenen Scheibe, die Schritte als
 * Kacheln auf der Bühne. Ohne Radar dahinter (Emil, 25.09.2026).
 * ====================================================================== */

/* Kopf: Datum klein darüber, Begrüßung als Überschrift */
html.bp-v2 body.bp-app .uev-datum {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app .uev-datum:empty { display: none; }

/* Die Startbühne ---------------------------------------------------------- */
html.bp-v2 body.bp-app #uev-lage.uev-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-6) var(--space-7) var(--space-7);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel) 55%, var(--panel-muted) 100%);
  box-shadow: var(--shadow-raised);
}

/* Kopfzeile der Bühne: „Jetzt weitermachen“ wie die Titel der übrigen Kästen */
html.bp-v2 body.bp-app #uev-lage.uev-hero > .uev-lage-kopf {
  align-items: center;
  /* Der erste Eintrag der Liste bringt 8 px mit, die mit diesem Rand zusammenfallen - es zählt der größere. */
  margin: 0 0 var(--abstand-kartentitel);
}

html.bp-v2 body.bp-app .uev-hero-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-2);
}
/* Ein Absatz, kein h3: app-neu.css setzt `body.bp-app h3` mit !important auf Fließtextgröße. */
html.bp-v2 body.bp-app .uev-hero-name {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}
html.bp-v2 body.bp-app .uev-hero-meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-md);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .uev-hero-meta b,
html.bp-v2 body.bp-app #uev-lage.uev-hero .uev-fokus-zahlen b {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app #uev-lage.uev-hero .uev-fokus-zahlen {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app #uev-lage.uev-hero .uev-fokus-haupt {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html.bp-v2 body.bp-app .uev-hero-tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
html.bp-v2 body.bp-app .uev-hero-tun .uev-fokus-tun { margin: 0; }

/* Fortschrittsring auf einer eigenen, leicht erhabenen Scheibe */
html.bp-v2 body.bp-app .uev-ring {
  position: relative;
  flex: none;
  width: 156px;
  height: 156px;
}
html.bp-v2 body.bp-app .uev-ring::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 14px 32px -16px rgba(18, 51, 34, 0.45), inset 0 0 0 1px var(--border-subtle);
}
html.bp-v2 body.bp-app .uev-ring > .uev-ring-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
html.bp-v2 body.bp-app .uev-ring-spur {
  fill: none;
  stroke: var(--panel-sunken);
  stroke-width: 9;
}
html.bp-v2 body.bp-app .uev-ring-bogen {
  fill: none;
  stroke: var(--green-600);
  stroke-width: 9;
  stroke-linecap: round;
}
html.bp-v2 body.bp-app .uev-ring-mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
}
html.bp-v2 body.bp-app .uev-ring-mitte b {
  font-size: 1.7rem;
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .uev-ring-mitte span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Die vier Schritte ---------------------------------------------------------- */
html.bp-v2 body.bp-app .uev-reise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 body.bp-app .uev-reise-schritt {
  position: relative;
  margin: 0;
  min-width: 0;
}
/* Verbindungslinie zum nächsten Schritt – grün, wenn dieser erledigt ist */
html.bp-v2 body.bp-app .uev-reise-schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 33px;
  right: calc(-1 * var(--space-3));
  width: var(--space-3);
  height: 2px;
  background: var(--border-default);
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="erledigt"]:not(:last-child)::after {
  background: var(--green-500);
}
html.bp-v2 body.bp-app .uev-reise-schritt > :is(a, div) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.04);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .uev-reise-schritt > a:hover {
  transform: translateY(-2px);
  border-color: var(--hover-akzent);
  box-shadow: var(--shadow-card-hover);
}
html.bp-v2 body.bp-app .uev-reise-schritt > a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="aktuell"] > :is(a, div) {
  border-color: var(--green-400);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--success-bg), 0 14px 30px -18px rgba(18, 51, 34, 0.5);
}
html.bp-v2 body.bp-app .uev-reise-marke {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--panel-sunken);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold, 700);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .uev-reise-marke svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="erledigt"] .uev-reise-marke {
  border-color: transparent;
  /* festes Gruen: --green-600 wird im Dunkelmodus hell, der weisse Haken stand dann kaum sichtbar darauf */
  background: var(--fix-green-600);
  color: #fff;
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="aktuell"] .uev-reise-marke {
  border: 2px solid var(--green-600);
  background: var(--panel);
  color: var(--green-700);
}
html.bp-v2 body.bp-app .uev-reise-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html.bp-v2 body.bp-app .uev-reise-nr {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app .uev-reise-text b {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-reise-text > span:last-child {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-zustand="offen"] .uev-reise-text b {
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .uev-reise-jetzt {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  font-size: 11px;
  font-weight: var(--weight-bold, 700);
  color: var(--success-strong);
}
/* DIE ROTE 1 (Henry, 07.10.2026: „eine rote Fehlermeldung … bei der Übersicht, dass da eine rote 1 steht, dass man
   weiß, man muss da was tun“) - heute das getrennte Postfach an Schritt 2 (main._projekt_reise). Die Zahl sitzt wie
   an einer Glocke oben rechts an der Schrittmarke; die Karte ist rot umrandet, die Zeile darunter sagt, was zu tun
   ist, und „Handlung nötig“ steht dort, wo sonst „Jetzt dran“ steht. Feste Stufe fuer die weisse Zahl. */
html.bp-v2 body.bp-app .uev-reise-marke { position: relative; }
html.bp-v2 body.bp-app .uev-reise-alarm {
  position: absolute;
  top: -7px;
  right: -9px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--fix-danger);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--panel);
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-alarm] > :is(a, div) {
  border-color: var(--danger);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--danger-bg);
}
html.bp-v2 body.bp-app .uev-reise-schritt[data-alarm] > a:hover { border-color: var(--danger-strong); }
html.bp-v2 body.bp-app .uev-reise-schritt[data-alarm] .uev-reise-text > span:last-child {
  color: var(--danger-strong);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app .uev-reise-handlung {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--danger-bg);
  font-size: 11px;
  font-weight: var(--weight-bold, 700);
  color: var(--danger-strong);
}

/* Weitere Projekte unter der Bühne */
html.bp-v2 body.bp-app #uev-lage.uev-hero .uev-fokus-weitere {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .uev-fokus-weitere-titel {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Automatische Quellen als Karten ------------------------------------------ */
html.bp-v2 body.bp-app .uev-titelblock { display: grid; gap: 2px; }
html.bp-v2 body.bp-app .uev-unterzeile {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .uev-quellen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Eine Spalte, der Knopf ganz unten (margin-top: auto): in einer Reihe gleich hoher Karten stehen alle Knöpfe
   auf einer Linie, und eine kurze Karte hat ihre Luft über dem Knopf statt darunter. */
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  font-size: var(--text-sm);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.04);
}
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle + .uev-quelle { border-top: 1px solid var(--border-subtle); }
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle[data-zustand="laeuft"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-bg) 55%, var(--panel)) 0%, var(--panel) 70%);
}
/* Symbol links, Stand rechts; wird die Karte zu schmal, rutscht der Stand unter das Symbol statt darüber. */
html.bp-v2 body.bp-app .uev-quelle-kopf {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
html.bp-v2 body.bp-app .uev-quelle-zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--panel-sunken);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .uev-quelle-zeichen svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.bp-v2 body.bp-app .uev-quelle[data-zustand="laeuft"] .uev-quelle-zeichen { background: var(--success-bg); color: var(--success); }
html.bp-v2 body.bp-app .uev-quelle[data-zustand="still"] .uev-quelle-zeichen { background: var(--warning-bg); color: var(--warning-strong); }
/* Postfach getrennt (Henry, 07.10.2026): rot - Zeichen, Stand, Rahmen und der Weg zum Neuverbinden. */
html.bp-v2 body.bp-app .uev-quelle[data-zustand="fehler"] .uev-quelle-zeichen { background: var(--danger-bg); color: var(--danger); }
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle[data-zustand="fehler"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
/* WIE DAS GRUEN BEI „Aktiv“ (Henry, 08.10.2026: „dass dort … Postfach oder WhatsApp grün hinterlegt sind, ganz leicht
   oben. Vielleicht kann man das genauso auch rot hinterlegen, wenn da eine Aktion erforderlich ist“): orange getoent
   bei „Aktion erforderlich“, rot bei „Handlung nötig“. */
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle[data-zustand="still"] {
  border-color: var(--warning-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning-bg) 70%, var(--panel)) 0%, var(--panel) 70%);
}
html.bp-v2 body.bp-app .uev-quellen > .uev-quelle[data-zustand="fehler"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-bg) 75%, var(--panel)) 0%, var(--panel) 70%);
}
/* Der Handlungsknopf: orange bei „Aktion erforderlich“, rot gefuellt bei „Handlung nötig“ - ein Knopf, kein Textlink. */
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-handlung {
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning-strong);
  text-decoration: none;
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-handlung:hover {
  border-color: var(--warning);
  text-decoration: none;
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-handlung--fehler {
  border-color: var(--fix-danger);
  background: var(--fix-danger);
  color: #fff;
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-handlung--fehler:hover {
  border-color: var(--fix-danger-strong);
  background: var(--fix-danger-strong);
}
html.bp-v2 body.bp-app .uev-quelle-stand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--panel-sunken);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-quelle[data-zustand="laeuft"] .uev-quelle-stand { background: var(--success-bg); color: var(--success-strong); }
html.bp-v2 body.bp-app .uev-quelle[data-zustand="still"] .uev-quelle-stand { background: var(--warning-bg); color: var(--warning-strong); }
html.bp-v2 body.bp-app .uev-quelle[data-zustand="fehler"] .uev-quelle-stand { background: var(--danger-bg); color: var(--danger-strong); }
html.bp-v2 body.bp-app .uev-quelle .uev-nachschub-zeichen { font-size: 10px; }
html.bp-v2 body.bp-app .uev-quellen .uev-quelle b.uev-quelle-name {
  align-self: stretch;
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle b.uev-quelle-name::before { content: none; }
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-zweck {
  align-self: stretch;
  color: var(--text-secondary);
  line-height: 1.45;
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-text {
  align-self: stretch;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-text:not(:last-child) { margin-bottom: var(--space-2); }
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);  /* so hoch wie der Plus-Knopf: Link und Knöpfe stehen in der Reihe auf einer Linie */
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-link);
  text-decoration: none;
  cursor: pointer;
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun:hover { text-decoration: underline; text-underline-offset: 3px; }
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
/* Was fehlt, hat ein „+“ (Henry, 29.09.2026): ein ruhiger Knopf statt eines Textlinks. Der Dauerauftrag
   (.uev-quelle-knopf) ist eine Einstellung, keine Anbindung: derselbe Knopf ohne Plus. */
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-plus,
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-knopf { padding: var(--space-1) var(--space-4); }
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-plus:hover,
html.bp-v2 body.bp-app .uev-quellen .uev-quelle .uev-quelle-tun.uev-quelle-knopf:hover {
  text-decoration: none;
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app .uev-quelle-plus-zeichen {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Fest wie der Hauptknopf (.v2-btn--primary): im Dunkelmodus ist --green-700 ein helles Grün, und das helle „+“
     darauf stand bei 1,6:1 (Durchsicht 03.10.2026). */
  background: var(--fix-green-700);
  color: #f6fbf7;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}
/* Die Konten der Bank: ein flacher Streifen unter den Karten (Emil, 30.09.2026: „voll komisch, wenn das alles so
   lang ist“) - je Bank eine Kopfzeile, die Konten nebeneinander wie in einer Banking-App. */
html.bp-v2 body.bp-app .uev-bankkonten { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
html.bp-v2 body.bp-app .uev-bankkonten-bank { display: grid; gap: var(--space-2); }
html.bp-v2 body.bp-app .uev-bankkonten-kopf {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: 0;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-bankkonten-kopf small { font-weight: normal; color: var(--text-tertiary); }
html.bp-v2 body.bp-app .uev-bankkonten-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
}
html.bp-v2 body.bp-app .uev-bankkonten-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--panel-sunken);
}
html.bp-v2 body.bp-app .uev-bankkonten-liste .uev-konto-name {
  display: grid; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-bankkonten-liste .uev-konto-name small {
  font-size: var(--text-xs); font-weight: normal; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-bankkonten-liste .uev-konto-saldo {
  flex: none; font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--text-primary);
}

/* Was BelegHero schon erledigt hat: als Reihe kleiner Erfolge */
html.bp-v2 body.bp-app .uev-erledigt ul.uev-erledigt-liste {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 body.bp-app .uev-erledigt ul.uev-erledigt-liste > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app .uev-erledigt ul.uev-erledigt-liste > li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bp-v2 body.bp-app .uev-erledigt ul.uev-erledigt-liste > li b { color: var(--success-strong); }

html.bp-v2 body.bp-app .uev-ganz { white-space: nowrap; }

/* DIE KENNZAHLEN SIND LINKS (Emil, 25.09.2026: „mach das auch klickbar“). `.uev-kpi-ziel` liegt über der
   ganzen Kachel; Links im Text der Kachel („Kontoauszug hochladen“) bleiben darüber klickbar. Ein kleiner
   Pfeil oben rechts sagt, dass die Kachel weiterführt – ohne Ziel fehlt er. */
html.bp-v2 body.bp-app .uev-kacheln-kern > .uev-kpi {
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
html.bp-v2 body.bp-app .uev-kpi-ziel {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
html.bp-v2 body.bp-app .uev-kpi-ziel::after {
  content: "";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 18px;
  height: 18px;
  background: var(--text-tertiary);
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .uev-kacheln-kern > .uev-kpi:has(> .uev-kpi-ziel:not([hidden])):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
html.bp-v2 body.bp-app .uev-kpi-ziel:hover::after {
  opacity: 1;
  background: var(--hover-primaer);
  transform: translate(2px, -2px);
}
html.bp-v2 body.bp-app .uev-kpi-ziel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .uev-kacheln-kern .uev-teil a {
  position: relative;
  z-index: 2;
}

/* Schmaler: Schritte zu zweit, am Handy untereinander; Ring kleiner neben dem Namen */
@media (max-width: 1100px) {
  html.bp-v2 body.bp-app .uev-reise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.bp-v2 body.bp-app .uev-reise-schritt:nth-child(2n)::after { display: none; }
}
@media (max-width: 620px) {
  html.bp-v2 body.bp-app #uev-lage.uev-hero { padding: var(--space-5) var(--space-4); }
  html.bp-v2 body.bp-app .uev-hero-oben { gap: var(--space-4); align-items: start; }
  html.bp-v2 body.bp-app .uev-ring { width: 96px; height: 96px; }
  html.bp-v2 body.bp-app .uev-ring::before { inset: 11px; }
  html.bp-v2 body.bp-app .uev-ring-mitte b { font-size: 1.15rem; }
  /* 11 px ist die kleinste Stufe der Leiter (--text-2xs) - stand mit 10 px da; „vollständig“ passt weiter in den Ring. */
  html.bp-v2 body.bp-app .uev-ring-mitte span { font-size: var(--text-2xs); }
  html.bp-v2 body.bp-app .uev-hero-tun { grid-column: 1 / -1; }
  html.bp-v2 body.bp-app .uev-reise { grid-template-columns: 1fr; gap: var(--space-2); }
  html.bp-v2 body.bp-app .uev-reise-schritt::after { display: none; }
  html.bp-v2 body.bp-app .uev-reise-schritt > :is(a, div) { flex-direction: row; align-items: center; padding: var(--space-3); }
  html.bp-v2 body.bp-app :is(.uev-reise-jetzt, .uev-reise-handlung) { position: static; margin-left: auto; align-self: center; }
  /* Fünf Karten untereinander wären am Handy zwei Bildschirmhöhen – als wischbare Reihe,
     die in sich rollt (die Seite selbst rollt nie seitwärts). */
  html.bp-v2 body.bp-app .uev-quellen {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--space-4));
    padding: 0 var(--space-4) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    overscroll-behavior-x: contain;
  }
  html.bp-v2 body.bp-app .uev-quellen > .uev-quelle {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.bp-v2 body.bp-app .uev-reise-schritt > a:hover { transform: none; }
  html.bp-v2 body.bp-app .uev-kacheln-kern > .uev-kpi:hover { transform: none; }
}

/* ==========================================================================
   MAC-APP AM FALSCHEN ORT (Emil, 25.09.2026: „das soll aber einfach so im home screen kommen falls die app nicht
   in programme liegt“). Eine Karte ganz oben, gefüllt von core/app-stand.js – deutlich, aber kein Alarm: warme
   Warnfarbe, ein Knopf, der das erledigt.
   ========================================================================== */
html.bp-v2 body.bp-app .uev-app-ort {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-card-lg);
  background: linear-gradient(120deg, var(--warning-bg) 0%, var(--warning-bg) 35%, var(--panel) 100%);
  box-shadow: var(--shadow-raised);
}
html.bp-v2 body.bp-app .uev-app-ort-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--warning);
  color: #fff;
  box-shadow: 0 8px 18px -10px var(--warning-strong);
}
html.bp-v2 body.bp-app .uev-app-ort-zeichen .v2-icon {
  width: 24px;
  height: 24px;
}
html.bp-v2 body.bp-app .uev-app-ort-inhalt {
  display: grid;
  gap: 6px;
  min-width: 0;
}
html.bp-v2 body.bp-app .uev-app-ort-marke {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning-strong);
}
html.bp-v2 body.bp-app .uev-app-ort-titel {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}
html.bp-v2 body.bp-app .uev-app-ort-text {
  max-width: 64ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .uev-app-ort-schritte {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding-left: 1.3em;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .uev-app-ort-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 8px;
}
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .uev-app-ort {
    flex-direction: column;
    padding: var(--space-5) var(--space-4);
  }
}

/* Abos und Verträge (28.09.2026, Bank-Idee 5): eine Zeile je Reihe - Name mit Rhythmus, Betrag, rechts Preisänderung
   und Dauerbeleg. Dieselben Haarlinien wie die Aufgabenliste, keine Karten in der Karte. */
html.bp-v2 body.bp-app .uev-abos-liste {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 body.bp-app .uev-abo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name betrag" "rechts rechts";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .uev-abo:last-child { border-bottom: 0; }
html.bp-v2 body.bp-app .uev-abo-name { grid-area: name; display: grid; gap: 2px; min-width: 0; }
html.bp-v2 body.bp-app .uev-abo-name b {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .uev-abo-name .uev-meta { font-size: var(--text-sm); }
html.bp-v2 body.bp-app .uev-abo-betrag {
  grid-area: betrag;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  text-align: right;
}
html.bp-v2 body.bp-app .uev-abo-rechts {
  grid-area: rechts;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
html.bp-v2 body.bp-app .uev-abo-rechts:empty { display: none; }
html.bp-v2 body.bp-app .uev-abo-marke {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .uev-abo-marke.is-warn { background: var(--warning-bg); color: var(--warning-strong); }
html.bp-v2 body.bp-app .uev-abo-marke.is-ok { background: var(--success-bg); color: var(--success-strong); }
html.bp-v2 body.bp-app .uev-abo-knopf { min-height: 32px; font-size: var(--text-sm); }
html.bp-v2 body.bp-app .uev-abos-status:empty { display: none; }
html.bp-v2 body.bp-app .uev-abos-status { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
html.bp-v2 body.bp-app .uev-abos-mehr { margin-top: var(--space-2); }
@media (min-width: 900px) {
  html.bp-v2 body.bp-app .uev-abo {
    grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto);
    grid-template-areas: "name rechts betrag";
  }
  html.bp-v2 body.bp-app .uev-abo-rechts { justify-content: flex-end; }
}

/* KARTENKOPF nach docs/ui-v2/REGELN.md (12.10.2026): unter dem Kopf jeder Karte der Uebersicht stehen 16 px. Vorher
 * 6,4 px („Weitere Aufgaben“), 8 px („Jetzt weitermachen“) und 12 px („Ausgaben und Einnahmen“, „Was BelegHero bereits
 * erledigt“, „Zuletzt bearbeitete Projekte“) auf derselben Seite. */
html.bp-v2 body.bp-app .panel:not(.uev-hero) > .uev-lage-kopf,
html.bp-v2 body.bp-app .panel > .uev-projekte-kopf { margin-bottom: var(--abstand-kartentitel); }
html.bp-v2 body.bp-app #uev-erledigt-titel { margin-bottom: var(--abstand-kartentitel); }

/* ANGABEN DER BUEHNE („4 Vorschlaege pruefen · 4 Belege fehlen“): der Trennpunkt haengt an der Angabe. Am Telefon steht
 * jede Angabe in ihrer eigenen Zeile - dort blieb der Punkt am Zeilenende haengen. */
html.bp-v2 body.bp-app #uev-lage :is(.uev-hero-meta, .uev-fokus-zahlen) > .uev-ganz:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.35em;
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app .uev-reise-jetzt { white-space: nowrap; }
/* AM TELEFON KÜRZER (Emil, 12.10.2026). Die Übersicht war dort 4521 px lang.
   - Drei der vier Zahlenkacheln wiederholen, was die Bühne darüber schon sagt (offen, zu prüfen, fehlend). Steht die
     Bühne da, entfallen sie am Telefon; „Letzter Import“ steht nirgends sonst und bleibt.
   - „Automatische Quellen“, „Einrichtung“ und „Verbindungen“ stehen als eine Zeile da und klappen beim Antippen auf
     (uebersicht.html, telefonKlappenEinrichten). Zugeklappt bleibt sichtbar, was den Titel trägt - bei der Einrichtung
     also auch der Satz „Noch 2 Schritte, dann läuft alles.“ */
@media (max-width: 767px) {
  html.bp-v2 body.bp-app #uev-lage:not([hidden]) ~ #uev-kacheln-kern > :is(#uev-kpi-offen, #uev-kpi-vorschlaege, #uev-kpi-fehlend) { display: none; }
  html.bp-v2 body.bp-app [data-telefon-zu="1"] > :not(:has(.uev-klappknopf)) { display: none !important; }
  html.bp-v2 body.bp-app [data-telefon-zu="1"] :is(h2, h3):has(> .uev-klappknopf) { margin-bottom: 0 !important; }
  /* Zugeklappt ist die Karte eine Zeile: der Kopf verliert Abstand und Linie zum Inhalt, den es gerade nicht gibt,
     und der Verweis neben dem Titel („Einrichtung →“) macht dem Winkel Platz. */
  html.bp-v2 body.bp-app [data-telefon-zu="1"] > :has(.uev-klappknopf) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  html.bp-v2 body.bp-app [data-telefon-zu="1"] .uev-lage-kopf > .uev-alle-projekte { display: none; }
  /* Der Titel reicht über die ganze Zeile - der Winkel steht bei allen dreien am rechten Rand. */
  html.bp-v2 body.bp-app :is(#uev-nachschub .uev-titelblock, #uev-einrichtung .section-heading > div) { flex: 1 1 auto; min-width: 0; }
  html.bp-v2 body.bp-app #uev-einrichtung .section-heading { display: flex; }
  /* Bleibt nur „Letzter Import“ stehen, nimmt die Kachel die ganze Breite - allein in der halben stand sie verloren da. */
  html.bp-v2 body.bp-app #uev-lage:not([hidden]) ~ #uev-kacheln-kern > #uev-kpi-import { grid-column: 1 / -1; }
  /* Unter den Kacheln stand fest 20 px, wo zwischen Karten am Telefon 16 gilt - gemessen, sobald eine Kachel die
     ganze Breite hat und damit genau über der nächsten Karte steht. Der Abstand der Rolle. */
  html.bp-v2 body.bp-app #uev-kacheln-kern { margin-bottom: var(--abstand-karten); }
  html.bp-v2 body.bp-app .uev-klappknopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    /* Drei Klappzeilen untereinander, eine Schrift: „Verbindungen“ ist am Schreibtisch ein Abschnittstitel (14/600),
       die beiden anderen sind Kartentitel (16/500). Als Zeile gelesen sind alle drei dasselbe. */
    font: inherit;
    font-size: 16px;
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
  }
  html.bp-v2 body.bp-app .uev-klappknopf::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--text-tertiary);
    -webkit-mask: var(--maske-winkel-unten) center / contain no-repeat;
    mask: var(--maske-winkel-unten) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  html.bp-v2 body.bp-app .uev-klappknopf[aria-expanded="true"]::after { transform: rotate(180deg); }
  html.bp-v2 body.bp-app .uev-klappknopf:hover { color: var(--hover-akzent); }
  html.bp-v2 body.bp-app .uev-klappknopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}

@media (max-width: 767px) {
  html.bp-v2 body.bp-app #uev-lage :is(.uev-hero-meta, .uev-fokus-zahlen) > .uev-ganz { display: block; }
  html.bp-v2 body.bp-app #uev-lage :is(.uev-hero-meta, .uev-fokus-zahlen) > .uev-ganz:not(:last-child)::after { content: none; }
}

/* ==== compat/seiten/projektliste.css ==== */
/* UI v2 – Projektliste im Bestand zuerst.
 *
 * Der Kontoweg liefert den AVV-Hinweis, die Einrichtung und die Sortierung
 * aus einer gemeinsamen Datenbasis. Er bleibt sichtbar; diese Regeln geben
 * ihm ausschließlich die ruhige v2-Oberfläche.
 */

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .main-content {
  max-width: 1120px;
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .account-page-head {
  align-items: flex-end;
  margin: 0 0 var(--space-5);
  padding: 0;
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .hero-title {
  color: var(--text-primary);
  font: 500 var(--text-3xl)/1.15 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .hero-sub,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .section-heading p,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .section-hint {
  color: var(--text-secondary);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-list-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-steps-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] #avv-hinweis {
  border-color: var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-list-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-steps-panel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty {
  padding: var(--space-5);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-list-werkzeuge {
  gap: var(--space-2);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-filter,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] #project-sort {
  min-height: 38px;
  border-radius: var(--radius-pill);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .account-new-btn,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .add-card-confirm,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .add-card-cancel,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-save,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-cancel {
  min-height: 38px;
  border-radius: var(--radius-pill);
}

/* WEISS AUF GRUEN (Emil, 28.09.2026: „der grüne Button sollte weiße Schrift haben“). „Anlegen“ im neuen
 * Projekt und „Speichern“ beim Umbenennen tragen im Bestand `color: white` mit EINER Klasse; der v2-Reset
 * `.bp-v2 :where(button) { color: inherit }` hat dieselbe Spezifitaet, steht spaeter und machte die Schrift
 * dunkel. Beide Knoepfe erscheinen erst nach einem Klick - darum fielen sie bei der Messung der
 * Bestandsfarben (compat/legacy-components.css) nicht auf. Ausgegraut (disabled) bleibt die Bestandsfarbe. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .add-card-confirm:not(:disabled),
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-save:not(:disabled) {
  color: var(--text-on-green, #fff);
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .add-card-active {
  border-color: var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Der fertige Vorgang bleibt deutlich genug lesbar. Das alte Ausgrauen
 * verringerte den Kontrast jeder enthaltenen Angabe unter AA. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card.completed {
  opacity: 1;
}

html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card .project-type,
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card.completed .project-meta {
  color: var(--text-secondary);
}

/* Die Marke („Kanzlei“, „Belege“) verschwand in der überfahrenen Zeile: gleich helle Fläche auf gleich heller Zeile
 * (Emil, 30.09.2026, Bildschirmfoto). In der getönten Zeile wird sie weiß - sie bleibt lesbar, und die Zeile hat
 * dieselbe Hover-Fläche wie jede andere (tokens.css, „Hover“). */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card:hover .project-type {
  background: var(--panel);
}

@media (max-width: 720px) {
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .account-page-head,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .account-new-btn,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-filter,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] #project-sort {
    width: 100%;
  }

  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-list-panel,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-panel,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-steps-panel,
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty {
    padding: var(--space-4);
  }
}

/* Nachschliff: der gerade dran stehende Einrichtungsschritt ist eine ruhige
 * Flaeche mit normalem Radius (die Pillenform wurde am Handy zum Oval).
 * „Neues Projekt“ bleibt bewusst weiss, solange die Einrichtung offen ist:
 * der Bestand haelt dann den naechsten Einrichtungsschritt als einzige gruene
 * Handlung (Regel mit :has(#setup-panel) in app-neu.css). */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-schritt.ist-dran {
  border-radius: var(--radius-md) !important;
  background: var(--green-050) !important;
  box-shadow: inset 0 0 0 1px var(--green-200) !important;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-card .project-meta {
  text-align: left;
}

@media (max-width: 720px) {
  /* Marken wie „Optional“ und „Erledigt“ duerfen unter den Titel rutschen */
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-schritt { flex-wrap: wrap; }
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .setup-schritt.ist-dran { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
}

/* EINRICHTUNGSSCHRITTE (Projektliste und Uebersicht) am Handy: der Bestand setzt
 * Nummer und Text ohne Spaltenabstand nebeneinander – die Nummer lag auf dem
 * Text. Die Marke „Optional“ darf unter den Titel rutschen, statt den Titel auf
 * drei Zeilen zu druecken. */
@media (max-width: 720px) {
  html.bp-v2 body.bp-app .setup-schritt { column-gap: var(--space-3) !important; }
  html.bp-v2 body.bp-app .setup-schritt .setup-nummer { align-self: start; margin-top: 1px; }
  html.bp-v2 body.bp-app .setup-titel { flex-wrap: wrap; row-gap: 4px; }
}

/* „Wozu?“ gehört unter den Titel und nicht als zweite, schmale Spalte an
 * den rechten Rand der Textspalte. Das alte Raster ließ die Erklärung direkt
 * vor dem Aktionsknopf schweben und wirkte deshalb wie ein verrutschter
 * eigener Button. */
html.bp-v2 body.bp-app .setup-text {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-1);
}

html.bp-v2 body.bp-app .setup-text .setup-titel,
html.bp-v2 body.bp-app details.setup-warum-auf {
  grid-column: 1 / -1;
}

html.bp-v2 body.bp-app details.setup-warum-auf {
  justify-self: start;
  margin-top: var(--space-1);
}

html.bp-v2 body.bp-app details.setup-warum-auf > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-left: -8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}

html.bp-v2 body.bp-app details.setup-warum-auf > summary::-webkit-details-marker { display: none; }
html.bp-v2 body.bp-app details.setup-warum-auf > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app details.setup-warum-auf > summary:hover,
html.bp-v2 body.bp-app details.setup-warum-auf[open] > summary {
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app details.setup-warum-auf[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
html.bp-v2 body.bp-app details.setup-warum-auf .setup-warum {
  margin-top: var(--space-1) !important;
  line-height: 1.5;
}

@media (max-width: 720px) {
  html.bp-v2 body.bp-app details.setup-warum-auf > summary {
    min-height: 44px;
  }
}

/* Mandanten auf einen Blick (28.09.2026, Max): Marken wie auf der Uebersicht, Zahlen rechtsbuendig. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle th {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  border-bottom-color: var(--divider);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle td { border-bottom-color: var(--divider); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle .meta { color: var(--text-secondary); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle .mandanten-name { font-weight: var(--weight-semibold); color: var(--text-primary); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle tr { border-bottom-color: var(--divider); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-tabelle .ist-offen { color: var(--danger-strong); font-weight: var(--weight-medium); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-marke {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-marke.is-ok { background: var(--success-bg); color: var(--success-strong); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-marke.is-warn { background: var(--warning-bg); color: var(--warning-strong); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-marke.is-danger { background: var(--danger-bg); color: var(--danger-strong); }
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-link {
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .mandanten-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
 * TESTKAUF 02.10.2026 (Emil) – Projektzeile, Umbenennen, Menü, „Woran du
 * weiterarbeiten kannst“.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Ruhezustand: „Projekt öffnen“/„Einrichten“ und der Menüknopf in derselben Höhe
 * (vorher 28 neben 34 px – zwei Knöpfe, die nebeneinanderstehen und nicht
 * zueinander passen). Am Handy und mit dem Finger beide 44 px. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-open {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3) !important;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-do {
  gap: var(--space-2);
}
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-open {
    min-height: 44px;
  }
}

/* UMBENENNEN (Bild 12): das Feld linksbündig in Zeilenhöhe, die beiden Knöpfe in
 * ihrer eigenen Breite daneben – nicht mehr jeder über die halbe Zeile. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-box input {
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-primary);
  font-size: var(--text-base);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-box input:focus {
  outline: none;
  border-color: var(--green-600, var(--hover-akzent));
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-rename-actions button {
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Das Menü am Körper der Seite (account.html, projektMenueOeffnen) – über dem
 * Kopf und der Seitenleiste, Einträge als Knöpfe ohne Bestandsrahmen. */
html.bp-v2 body.bp-app .projekt-menue {
  z-index: 1200;
  min-width: 13rem;
}
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item {
  min-height: 36px;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  cursor: pointer;
}
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item:hover,
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item:focus-visible {
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item--danger,
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item--danger:hover {
  color: var(--danger-strong) !important;
}
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item--danger:hover,
html.bp-v2 body.bp-app .projekt-menue .v2-menu-item--danger:focus-visible {
  background: var(--danger-bg) !important;
}
/* Mit dem Finger 44 px je Eintrag - wie „Projekt öffnen“ darüber. */
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.bp-app .projekt-menue .v2-menu-item {
    min-height: 44px;
  }
}

/* WORAN DU WEITERARBEITEN KANNST (Bild 13: „grüne Hover-Fläche wirkt komisch und
 * eckig“). Die Fläche lief kantig bis an die Ränder, der Text klebte an ihrer
 * linken Kante, und die Trennlinie darüber schnitt sie oben ab. Jetzt dieselbe
 * zarte Hover-Fläche wie in Menüs und Listen, gerundet und mit Innenrand; der
 * negative Rand hält den Text bündig mit der Überschrift. Der Fokus bekommt
 * den Hausring. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-steps {
  display: grid;
  gap: 2px;
  margin: 0 calc(-1 * var(--space-3));
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step {
  padding: var(--space-3) !important;
  border-top: 0 !important;
  border-radius: var(--radius-sm) !important;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step:hover {
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step:focus-visible {
  outline: none;
  background: var(--hover-flaeche) !important;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step-go {
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step:is(:hover, :focus-visible) .next-step-go {
  color: var(--hover-akzent);
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step-go { transition: none; }
  html.bp-v2 body.v2-shell[data-v2-page="project-list"] .next-step:is(:hover, :focus-visible) .next-step-go { transform: none; }
}

/* DER LEERE ZUSTAND (03.10.2026). Bis dahin sah ihn kaum jemand - jedes Konto hatte ein Projekt. Seit neue Konten
 * ohne beginnen, ist er die erste Projektliste jedes neuen Kunden, und er stand mittig mit doppelten Nummern
 * („1. 1 Auftrag klären“: die Zahlen stehen im Markup, das <ol> setzte seine eigenen davor), mit einem Titel in
 * Fließtextgröße und einem Schatten ohne Fläche. Die Karte ist .project-list-rest; hier nur ihr Inhalt - links
 * bündig wie die Einrichtung darüber, die Nummern wie deren offene Schritte. Der Knopf bleibt weiß: grün ist
 * solange der nächste Einrichtungsschritt („Vorgang anlegen“), siehe „Nachschliff“ oben. */
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty {
  padding: 0 !important;
  text-align: left;
  box-shadow: none;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty h3 {
  margin: 0 0 var(--space-2);
  /* So gross wie „Einrichtung“ darueber (.section-title, --s-titel); app-neu.css setzt jedes h3 mit !important
   * auf Fliesstextgroesse. */
  font-size: var(--s-titel) !important;
  color: var(--text-primary);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty > p {
  max-width: 64ch;
  margin: 0;
  color: var(--text-secondary);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty-steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 64ch;
  color: var(--text-secondary);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty-steps strong {
  color: var(--text-primary);
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.v2-shell[data-v2-page="project-list"] .project-empty .account-new-btn {
  margin-top: 0;
}

/* ==== compat/seiten/projekt-schritt1.css ==== */
/* UI v2 – Projektschritte (alle vier) und Schritt 1 „Auftrag klären“
 *
 * Die Schritte laufen im Bestand (index.html, #tab-panel-*); hier nur das
 * Aussehen. Gemeinsames zuerst, dann Schritt 1.
 */

/* Kopf je Schritt (views/_schritt.js) ------------------------------------- */
html.bp-v2 body.bp-app .v2-step-head {
  margin: 0 0 var(--space-5);
}

html.bp-v2 body.bp-app .v2-step-kicker {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--green-700);
}

/* "Schritt 1 von 4" steht schon in der Projektleiste - mit Nummer, Namen und
   Haken (Henry, 17.09.2026, F1: "Wenn redundant: entfernen"). */
@media (min-width: 1200px) {
  html.bp-v2 body.bp-app .app-frame.has-project-sidebar:not(.is-project-sidebar-hidden) .v2-step-kicker {
    display: none;
  }
}
/* In Schritt 1 ist sie nie noetig (Korrekturpass, Punkte 15 und 24: "Keine
   zusaetzliche Step-Zeile"): eingeklappt zeigt die Leiste die Schrittnummern
   weiter, und unter 1200 px steht der Schritt in der Kopfzeile ("Schritt 1:
   Auftrag"). Sie kostete sonst genau dort Platz, wo das Gespraech beginnt. */
html.bp-v2 body.bp-app.schritt-auftrag .app-frame.has-project-sidebar .v2-step-kicker {
  display: none;
}

/* Gezeichnete Symbole statt Schriftzeichen, die die Hausschrift nicht hat -- */
html.bp-v2 body.bp-app .bh-aufklapp {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.bp-v2 body.bp-app .kg-auszug-klammer {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  font-size: 0 !important;
  color: inherit;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.5-7.8 7.8a5 5 0 0 1-7.1-7.1l8.2-8.2a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.5-7.8 7.8a5 5 0 0 1-7.1-7.1l8.2-8.2a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.bp-v2 body.bp-app .akte-pfeil::before,
html.bp-v2 body.bp-app .kg-analyse-auf::after {
  content: "" !important;
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Aufklapper: nur der Pfeil rechts, kein Punkt davor ------------------------ */
html.bp-v2 body.bp-app details > summary {
  list-style: none;
}

html.bp-v2 body.bp-app details > summary::-webkit-details-marker {
  display: none;
}

/* Schritt 1: der Kopf steht einmal (v2), nicht doppelt ----------------------- */
html.bp-v2 body.bp-app #tab-panel-context .kg-kopf {
  display: none !important;
}

/* Aufklapper im Bestand: das Schriftzeichen "▸" vorn entfaellt, der Pfeil rechts reicht. */
html.bp-v2 body.bp-app details.task-accordion summary::before {
  display: none !important;
}

/* Gespraech und Auftragsspalte als EINE Karte auf der Arbeitsflaeche.
   Im Bestand lag beides in einer weissen Schrittkarte; unter v2 steht der
   Schritt auf dem Seitengrund, darum bekommt das Gespraech selbst den Rahmen. */
html.bp-v2 body.bp-app #tab-panel-context #kg.kg {
  margin: var(--space-2) 0 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fenster { background: var(--panel); }
html.bp-v2 body.bp-app #tab-panel-context .kg-verlauf { padding: var(--space-5) var(--space-5) var(--space-3); }
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile {
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--divider);
  background: var(--panel);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte {
  border-left: 1px solid var(--divider);
  background: var(--panel-muted);
}
/* Der Fuss der Spalte ("Alle Angaben") klebt unten (position: sticky) und braucht
   den Spaltenhintergrund - transparent schien die gescrollte Liste hindurch
   (Emil, 17.09.2026, Mac-App: "Alle Angaben" ueber "Belegquellen"). */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-fuss {
  background: var(--panel-muted);
  box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.08);
}

/* Hochgeladener Auszug: Klammer und Dateiname auf einer Linie */
html.bp-v2 body.bp-app .kg-auszug-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
html.bp-v2 body.bp-app .kg-auszug-name > .kg-auszug-klammer { flex: none; margin: 0; }
html.bp-v2 body.bp-app .kg-auszug-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
html.bp-v2 body.bp-app .kg-auszug-weg {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
html.bp-v2 body.bp-app .kg-auszug-weg:hover { background: var(--danger-bg); color: var(--danger-strong); }

@media (max-width: 1023px) {
  html.bp-v2 body.bp-app #tab-panel-context .kg-verlauf { padding: var(--space-4) var(--space-3) var(--space-2); }
  html.bp-v2 body.bp-app #tab-panel-context .kg-zeile { padding: var(--space-2) var(--space-3) var(--space-3); margin-right: 0; }
}
html.bp-v2 body.bp-app .kg-auszug-zeile,
html.bp-v2 body.bp-app .kg-auszug-zeile > span { opacity: 1; color: var(--text-secondary); }

/* Akte-Kopf und naechster Schritt (schmale Schirme) reagieren beim Ueberfahren */
html.bp-v2 body.bp-app #akte > button.akte-kopf,
html.bp-v2 body.bp-app #akte-naechste > button { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
html.bp-v2 body.bp-app #akte > button.akte-kopf:hover { background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #akte-naechste > button:hover { color: var(--hover-akzent) !important; text-decoration-thickness: 2px; }

/* GESPRÄCH ALS CHAT-FENSTER: Höhe = Bild minus Abstand nach oben (siehe
 * views/project-order.js), nur der Verlauf rollt, die Eingabe steht fest am
 * unteren Rand. Die Untergrenze des Bestands (32rem) schob die Eingabe auf
 * Laptops mit 800–900px Bildhöhe unter den Rand – jetzt 22rem. */
html.bp-v2 body.bp-app #tab-panel-context #kg.kg {
  min-height: 22rem;
  /* clip statt hidden: rundet die Ecken genauso ab, macht die Karte aber nicht
     zum Scrollbereich. Mit hidden klebte die Eingabezeile am Handy nicht mehr am
     unteren Bildrand (position: sticky braucht die Seite als Scrollbereich). */
  overflow: hidden;
  overflow: clip;
}
/* Unter dem Gespräch nur noch der Rand der App-Fläche: 48px Seitenpolster und
 * ein leeres Statusfeld liessen fast 90px Leerraum unter der Eingabe. */
html.bp-v2 body.bp-app.schritt-auftrag .main-content {
  padding-bottom: var(--space-5) !important;
}
html.bp-v2 body.bp-app #tab-panel-context #kanzlei-context-status:empty {
  display: none;
}
/* „Auftrag starten →“ und die Rundgang-Vorschläge setzen den Pfeil per
 * `content` – als Zeichen, das die Hausschrift nicht hat. Hier als Maske wie
 * alle anderen Pfeile der Hülle. */
html.bp-v2 body.bp-app :is(.kg-vorschlag-tut, .kg-fertig-start)::after {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-left: 0.3em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Die angeheftete Auftragszeile (unter 1100 px, rechts ist dann keine Spalte)
 * hatte 1–2px Innenabstand und klebte an der Kartenkante: „AUFTRAG“ und „Als
 * Nächstes“ stehen jetzt bündig mit dem Verlauf darunter. */
@media (max-width: 1099px) {
  html.bp-v2 body.bp-app #tab-panel-context #akte {
    margin: 0;
    padding: var(--space-3) var(--space-5);
  }
}
@media (max-width: 1023px) {
  html.bp-v2 body.bp-app #tab-panel-context #akte {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
}
/* Hochgeladener Auszug am Handy: „Entfernen“ bricht unter die Angaben. Mit dem
 * vollen Zeilenabstand und eigenem Innenrand stand es abgesetzt und eingerückt
 * in der Blase – jetzt direkt darunter, bündig mit dem Text. */
@media (max-width: 640px) {
  html.bp-v2 body.bp-app .kg-auszug-zeile { row-gap: 0; }
  html.bp-v2 body.bp-app .kg-auszug-weg { padding: 2px 0; }
}

/* =========================================================================
 * SCHRITT 1 – FINALER UX-PASS (Henry, 17.09.2026)
 * Der Chat ist die Arbeit: breit, bis knapp an den unteren Rand, eine klare
 * Eingabe. Rechts nur die Fakten. Nur Schritt 1 – Hülle, Farben und
 * Kartenradien bleiben, wie sie sind.
 * ========================================================================= */

html.bp-v2 body.bp-app #tab-panel-context {
  /* Gespräch und Eingabe laufen über eine Arbeitsbreite, nicht über jede Bildschirmbreite.
     54rem statt 50 (Henry, 17.09.2026, Korrekturpass, Punkt 10: "Nachrichtenspalte
     breiter ... trotzdem angenehme Lesebreite"). */
  --s1-chat-max: 54rem;
  --s1-chat-rand: var(--space-5);
  --s1-chat-innen: max(var(--s1-chat-rand), calc((100% - var(--s1-chat-max)) / 2));
}

/* =========================================================================
 * KORREKTURPASS 17.09.2026: SCHRITT 1 IST ARBEITSFLÄCHE
 * "Breadcrumb → kompakter Titel → ein Satz → direkt Chat." Alles, was davor
 * Platz nahm, wird kleiner; der gewonnene Platz geht an das Gespräch, nicht
 * an die rechte Spalte und nicht an Aussenränder.
 * ========================================================================= */

/* Aussenrand der Arbeitsfläche: oben und seitlich knapper als auf den
   Listenseiten - hier steht ein Werkzeug, keine Textseite. */
html.bp-v2 body.v2-shell.schritt-auftrag #app-main .main-content {
  padding-top: var(--space-4) !important;
  padding-inline: var(--space-5) !important;
}

/* Punkt 4: Seitenkopf gibt Orientierung, verbraucht aber keine Arbeitsfläche. */
html.bp-v2 body.bp-app.schritt-auftrag .v2-page-head {
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-app.schritt-auftrag .v2-page-title {
  font-size: var(--text-2xl);
  line-height: 1.2;
}
html.bp-v2 body.bp-app.schritt-auftrag .v2-page-subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

/* Punkt 5: steht der Auftrag erst einmal, braucht die Einstiegszeile keinen
   Platz mehr - die Aufmerksamkeit gehört dann Gespräch, Abschlusskarte und
   rechter Spalte. Der Titel bleibt als Ortsangabe stehen, nur kleiner. */
html.bp-v2 body.bp-app.schritt-auftrag #tab-panel-context:has(#kg-abschluss-karte) .v2-page-subtitle {
  display: none;
}
html.bp-v2 body.bp-app.schritt-auftrag #tab-panel-context:has(#kg-abschluss-karte) .v2-page-title {
  font-size: var(--text-xl);
}
html.bp-v2 body.bp-app.schritt-auftrag #tab-panel-context:has(#kg-abschluss-karte) > .v2-step-head {
  margin-bottom: var(--space-2);
}

/* Punkt 7: unter dem Gespräch nur ein schmaler Rand. Die Regel weiter oben verlor
   gegen legacy-shell.css (dort steht #app-main in der Auswahl) – 48 px blieben. */
html.bp-v2 body.v2-shell.schritt-auftrag #app-main .main-content {
  padding-bottom: var(--space-4) !important;
}
html.bp-v2 body.bp-app #tab-panel-context > .v2-step-head {
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-app #tab-panel-context #kg.kg {
  margin-top: 0;
}

/* Punkte 9 bis 11: wird Platz frei, bekommt ihn das Gespräch. Die rechte Spalte
   bleibt schmal (sie trägt kurze Fakten, keine Fliesstexte), und der Abstand
   dazwischen wächst nur bis zu einem ruhigen Mass - vorher wurden aus 24 rem
   Bildschirmgewinn 70 px Spalte und 27 px Fuge statt Gespräch. */
@media (min-width: 1100px) {
  html.bp-v2 body.bp-app #tab-panel-context #kg.kg {
    grid-template-columns: minmax(0, 1fr) clamp(15.5rem, 22%, 18.5rem);
    column-gap: clamp(var(--space-5), 2.2vw, var(--space-8));
  }
}

/* Punkt 7: die Höhe kommt aus views/project-order.js (Bild minus Lage minus Abstand darunter). */
@media (min-width: 768px) {
  html.bp-v2 body.bp-app #tab-panel-context #kg.kg {
    height: var(--kg-v2-hoehe, calc(100dvh - 15rem));
    min-height: 22rem;
  }
}

/* Ohne rechte Spalte (noch nicht geladen) gehört die ganze Breite dem Gespräch. */
@media (min-width: 1100px) {
  html.bp-v2 body.bp-app #tab-panel-context #kg.kg:has(.auftrag-spalte[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Punkte 5 und 6: Verlauf, Anhänge, Status und Eingabe in derselben Arbeitsbreite, mittig.
   Wird die Projektleiste eingeklappt, wächst diese Breite mit (bis 50rem). */
html.bp-v2 body.bp-app #tab-panel-context .kg-verlauf {
  padding-inline: var(--s1-chat-innen);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-reihe.von-beleghero .kg-blase:not(.kg-blase-datei):not(.kg-analyse) {
  max-width: min(46rem, 100%);
}
html.bp-v2 body.bp-app #tab-panel-context .von-nutzer .kg-blase {
  max-width: min(36rem, 80%);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-reihe.von-beleghero .kg-blase.kg-analyse {
  width: min(40rem, 100%);
  max-width: min(40rem, 100%);
}

/* Punkt 8: die Eingabe als klares Feld – Büroklammer, Text, Senden in einem Rahmen. */
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile {
  margin: 0 var(--s1-chat-innen) var(--space-5);
  padding: var(--space-2);
  gap: var(--space-2);
  align-items: flex-end;
  border: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile:focus-within {
  border-color: var(--green-500);
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile textarea#kg-text {
  --hoehe-feld: 2.75rem;
  min-height: 2.75rem;
  max-height: 12rem;
  padding: 0.7rem var(--space-1);
  font-size: var(--text-base);
  line-height: 1.45;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile .kg-klammer {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile .kg-klammer:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile #kg-senden {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-anhaenge,
html.bp-v2 body.bp-app #tab-panel-context .kg-aktivitaet {
  margin-inline: var(--s1-chat-innen);
}

/* Der KI-Hinweis unter dem Eingabefeld (Art. 50 KI-VO, 29.09.2026): das Feld rueckt
   naeher heran, der Satz steht mittig und so leise wie beim Hilfe-Assistenten. */
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile:has(+ .kg-ki-hinweis) {
  margin-bottom: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-ki-hinweis {
  margin: 0 var(--s1-chat-innen) var(--space-4);
  padding: 0;
  /* 12 px, die Stufe für Angaben - mit 11 px war es der kleinste Satz der App. */
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-ki-hinweis strong {
  font-weight: 700;
  color: var(--text-secondary);
}

/* Punkte 17 und 18: Schnellauswahl sind Bedienelemente – weiß, feiner Rand, eckiger als
   die grüne Nutzerblase, und sie stehen unter BelegHeros Frage, nicht auf der Kundenseite. */
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlaege {
  gap: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag {
  /* Rolle Knopf klein (docs/ui-v2/REGELN.md) - bis 12.10.2026 36 px / Radius 12 / die Hauptwahl im Gewicht 600 */
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 1px rgba(16, 24, 20, 0.04);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag:active {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-900);
}

/* DER EMPFOHLENE WEG (Henry, 23.09.2026): nach der Auswertung standen "Nur relevante
 * Buchungen übernehmen", "Zeitraum ändern" und "Auszüge ansehen" als drei gleich
 * aussehende Bedienelemente nebeneinander – der erste ist aber der normale nächste
 * Schritt, die anderen beiden sind Korrekturwege. Gefüllt wie ein Hauptknopf (feste
 * Grünstufe, in Hell und Dunkel gleich), die anderen bleiben weiß, treten aber in
 * Schrift und Rand zurück. Nur wo der Server einen Weg benennt (`haupt`). */
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-haupt {
  border-color: var(--fix-green-700, var(--green-700));
  background: var(--fix-green-700, var(--green-700));
  color: var(--text-on-green, #f6fbf7);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-haupt:hover,
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-haupt:active {
  border-color: var(--hover-primaer);
  background: var(--hover-primaer);
  color: var(--text-on-green, #f6fbf7);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-leise {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-weight: var(--weight-regular, 400);
  box-shadow: none;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlag.kg-vorschlag-leise:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
/* „Empfohlen“ steht klein über der Reihe – ein Wort, keine zweite Überschrift. */
html.bp-v2 body.bp-app #tab-panel-context .kg-vorschlaege-hinweis {
  flex: 0 0 100%;
  margin-bottom: calc(-1 * var(--space-1));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Punkte 14 und 15: die Abschlusskarte – Kopf, vier kurze Werte, zwei Handlungen. */
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig {
  width: min(40rem, 100%);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-kurz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-5);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-kurz .kg-fertig-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 0;
  border: 0;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-kurz dt {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-kurz dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-fuss {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-knoepfe {
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: var(--space-5);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-aendern {
  grid-column: 2;
  justify-self: start;
  /* Zwei Woerter, die zusammengehoeren: bei 1280 px und beiden offenen Leisten
     brach "Angaben ändern" mitten im Knopf um (gesehen 17.09.2026). */
  white-space: nowrap;
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-kurz { grid-template-columns: minmax(0, 1fr); }
  html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-knoepfe { grid-template-columns: minmax(0, 1fr); }
  html.bp-v2 body.bp-app #tab-panel-context .kg-fertig-aendern { grid-column: 1; }
}

/* Punkte 9 bis 12: rechts nur die Fakten – ein ruhiger Titel, kompakte Zeilen, offene Angaben in einer Zeile. */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-kopf {
  padding-bottom: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-titel {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-zeile {
  padding-block: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-k[title] {
  cursor: help;
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-leer {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-tertiary);
}
/* NOCH OFFEN ALS ETIKETT UND KLEINE MARKEN (Emil, Testkauf 02.10.2026, Bild 7): vorher ein Satz mit
   gepunkteten Unterstreichungen, der zwischen Trenner und Namen umbrach. Jetzt bricht jede Angabe als
   Ganzes um; die Marken sind leiser als die Zeilen darueber (gestrichelter Rand = noch leer) und
   werden beim Zeigen zum Knopf. */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-noch-offen {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-noch-offen-titel {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-noch-offen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-offen-angabe {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 10px 2px 8px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
/* Das Plus sagt „hier fehlt noch etwas, hier trägst du es ein“ - gezeichnet, kein Schriftzeichen. */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte button.as-offen-angabe::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-offen-angabe.as-offen-fest {
  padding-inline: 10px;
  cursor: default;
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte button.as-offen-angabe:hover {
  border-style: solid;
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-offen-angabe:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Freiwillig und nicht gesetzt (Frist ohne Datum): leise, ohne gruenen Haken (Emil, 02.10.2026). */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-zeile.as-ohne-angabe .as-w {
  color: var(--text-tertiary);
}
/* Das Blatt "Alle Angaben" zeigt Angaben, keinen zweiten Fortschritt (Punkt 3). */
html.bp-v2 body.bp-app .akte-drawer .akte-balken,
html.bp-v2 body.bp-app .akte-drawer .akte-drawer-zaehler {
  display: none;
}

/* Punkte 19 und 20: die Auszugsliste – Monat und Ergebnis zuerst, Konto und Datei klein darunter. */
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-liste {
  gap: 0;
  max-height: 18rem;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei,
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei.nicht_lesbar,
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei.fehlgeschlagen {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "m s" "n a";
  align-items: baseline;
  gap: 1px var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei:first-child {
  border-top: 0;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei .m {
  grid-area: m;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei .s {
  grid-area: s;
  text-align: right;
  white-space: normal;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei .n {
  grid-area: n;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei .kg-analyse-aktion {
  grid-area: a;
  justify-self: end;
  font-size: var(--text-xs);
}

/* KEIN BELEGSTAND IN SCHRITT 1 (Henry, 17.09.2026, Korrekturpass, Punkt 1):
   "Auch nicht als kleine Zeile." Das Band wird hier gar nicht mehr gefuellt
   (siehe hintergrundAnzeigen in index.html); der Riegel hier ist die zweite
   Sicherung - kein fremder Weg soll in Schritt 1 doch wieder etwas einblenden. */
html.bp-v2 body.bp-app.schritt-auftrag #hintergrund-banner {
  display: none !important;
}
/* "Alle Angaben" direkt unter den Angaben, nicht am unteren Rand der Spalte. */
html.bp-v2 body.bp-app #tab-panel-context .auftrag-spalte .as-fuss {
  position: static;
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  box-shadow: none;
}
/* "Entfernen" steht nicht neunmal sichtbar untereinander: am Schreibtisch beim Überfahren der Zeile. */
@media (hover: hover) {
  html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei button.kg-analyse-aktion {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei:hover button.kg-analyse-aktion,
  html.bp-v2 body.bp-app #tab-panel-context .kg-analyse-datei:focus-within button.kg-analyse-aktion {
    opacity: 1;
  }
}
/* Schmale Fenster: die angeheftete Auftragszeile zählt keine Angaben (Punkt 3). */
html.bp-v2 body.bp-app #tab-panel-context .akte-zaehler {
  display: none;
}
/* Das Textfeld hat keinen eigenen Rahmen und Fokusring – beides trägt die Eingabezeile (kein Kasten im Kasten). */
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile textarea#kg-text,
html.bp-v2 body.bp-app #tab-panel-context .kg-zeile textarea#kg-text:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent;
}

/* „NEU BEGINNEN“ (Emil, Testkauf 02.10.2026): leise rechts im Schrittkopf, erst wenn es etwas
   zurueckzusetzen gibt (body.kg-gespraech-begonnen, index.html _kgNeuBeginnenZeigen). */
html.bp-v2 body.bp-app .v2-step-head [data-kg-neu-beginnen] {
  display: none;
}
html.bp-v2 body.bp-app.kg-gespraech-begonnen .v2-step-head [data-kg-neu-beginnen] {
  display: inline-flex;
}

/* DAS AUSFUEHRLICHE ZUM AUFKLAPPEN (Emil, Testkauf 02.10.2026, Bild 8): der Grund der Erkennung stand
   als oranger Kasten unter der Antwort. Jetzt zugeklappt in derselben Blase, im Ton des Gespraechs. */
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr {
  margin-top: var(--space-2);
}
/* Die Kartenzeile der allgemeinen Aufklapper (app-neu.css: Innenabstand, Linie unten) nimmt dort
   `:not(.kg-mehr)` aus. Den Winkel aus Rahmenlinien (`details > summary::after`) ersetzt der Pfeil hier. */
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr > summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 0;
  transform: none;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr[open] > summary::after {
  transform: rotate(180deg);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr > summary:hover {
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app #tab-panel-context .kg-mehr-text {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: normal;
}

/* ==== compat/seiten/projekt-schritt2.css ==== */
/* UI v2 – Bestandsseite „projekt-schritt2“ im neuen Aussehen.
   Die Wahl der Quelle bleibt der Bestand (selectBelegMethod); hier bekommt jede
   Kachel ein Zeichen, einen klaren Klickzustand und eine gut sichtbare Ablage. */

html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
}

html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 176px;
  margin: 0;
  padding: 20px 44px 18px 20px;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card);
  background: var(--panel) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  opacity: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Zeichen oben links */
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  background: var(--green-050) center / 22px 22px no-repeat;
}
html.bp-v2 body.bp-app #card-method-scan::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #card-method-postfach::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #card-method-whatsapp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.1-5.1A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #card-method-portale::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #card-method-manual::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") !important; }

/* Pfeil oben rechts: „hier klicken“; nach der Wahl ein Haken */
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 18px;
  width: 18px;
  height: 18px;
  background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card:hover {
  border-color: var(--hover-akzent) !important;
  box-shadow: var(--shadow-card) !important;   /* kein zweiter Grünton als Hof - der Rand sagt es */
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card:hover::after { background: var(--hover-primaer); }
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }

html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card.selected {
  border-color: var(--green-600) !important;
  background: var(--green-050) !important;
  box-shadow: 0 0 0 1px var(--green-600) !important;
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card.selected::before { background-color: var(--panel); }
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card.selected::after {
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fix-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  -webkit-mask: none;
  mask: none;
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card.selected:focus-visible { box-shadow: var(--focus-ring) !important; }
/* Die nicht gewaehlten Kacheln bleiben voll lesbar – verblasst wirkten sie gesperrt. */
html.bp-v2 body.bp-app .choice-row:has(.choice-card.selected) .choice-card:not(.selected) { opacity: 1; }

html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .s2-karten-titel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .s2-empfohlen,
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .nur-app-marke {
  display: inline-flex;
  align-items: center;
  height: var(--marke-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .s2-empfohlen { background: var(--green-100); color: var(--green-800); }
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .nur-app-marke { margin: 0; background: var(--neutral-bg); color: var(--text-secondary); }
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card-stand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card-stand::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-default);
}
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card-stand.gut { color: var(--green-800); }
html.bp-v2 body.bp-app :is(#beleg-method-choice, #s3-wege) .choice-card-stand.gut::before { background: var(--green-600); }

/* EIN ZEICHEN, NICHT ZWEI (Henry, 17.09.2026, Punkt P). Die drei Quellenkarten
   tragen ihr Zustandszeichen seit heute selbst (○ ● Ⅱ ✓ !, siehe S2_STAND in
   index.html) - der zusaetzliche Punkt davor war ein zweites Statussystem im
   selben Satz. Die Karten in #s3-wege behalten ihn: sie haben kein eigenes
   Zeichen. Farben ruhig und aus den Tokens, kein Regenbogen. */
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand::before { content: none; }
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand .zeichen {
  font-weight: var(--weight-semibold, 600);
}
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand.offen { color: var(--text-tertiary); }
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand:is(.laeuft, .fertig) { color: var(--green-800); }
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand.pausiert { color: var(--text-secondary); }
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand:is(.aktion, .problem) { color: var(--warning-strong); }
/* POSTFACH GETRENNT (Henry, 07.10.2026: „da muss quasi eine rote Fehlermeldung kommen“): rote Zeile, roter Rahmen -
   ueber die Variable, die der Rahmen ohnehin liest (kein weiteres !important). Ausgewaehlt bleibt die Karte gruen;
   dann steht der rote Kasten direkt darunter (#pf-alarm, index.html). */
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand.fehler,
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand .s2-zeile.fehler {
  color: var(--danger-strong);
  font-weight: var(--weight-semibold, 600);
}
html.bp-v2 body.bp-app #beleg-method-choice #card-method-postfach.alarm:not(.selected) {
  --border-subtle: var(--danger);
  --hover-akzent: var(--danger-strong);
  --shadow-card: 0 0 0 1px var(--danger);
}

/* ZWEI ZEILEN, WENN ZWEI DINGE GLEICHZEITIG GELTEN (Henry, 18.09.2026, UX-Pass
   Punkt 1): "✓ Computer durchsucht" und darunter "LIVE · Auswertung 85 % ·
   225 Dateien offen". Die Karte ist das Einzige, was man vom laufenden
   Computer-Vorgang sieht, sobald das Postfach offen ist. */
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand.zweizeilig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand .s2-zeile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand .s2-zeile:is(.fertig, .laeuft) { color: var(--green-800); }
html.bp-v2 body.bp-app #beleg-method-choice .choice-card-stand .s2-zeile.pausiert { color: var(--text-secondary); }
html.bp-v2 body.bp-app #beleg-method-choice .s2-live {
  color: var(--green-800);
  background: var(--green-100, #eef6f0);
  border-color: color-mix(in srgb, var(--green-600) 35%, transparent);
}

/* Ablage fuer Dateien: gross, mit Zeichen, eindeutig klickbar */
html.bp-v2 body.bp-app #tab-panel-submit .dropzone {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-6) var(--space-5);
  border: 2px dashed var(--green-300) !important;
  border-radius: var(--radius-card);
  background: var(--green-050) !important;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-submit .dropzone:hover,
html.bp-v2 body.bp-app #tab-panel-submit .dropzone.dragover { border-color: var(--hover-akzent) !important; background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-submit .dropzone > .icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0;
  font-size: 0;
  background: var(--green-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bp-v2 body.bp-app #tab-panel-submit .dropzone .filename { color: var(--text-secondary); font-size: var(--text-sm); }

/* Hinweis unter den Kacheln, solange noch kein Weg gewaehlt ist */
html.bp-v2 body.bp-app .v2-schritt-hinweis {
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .choice-row:has(.choice-card.selected) + .v2-schritt-hinweis { display: none; }

/* Schritt 3: dieselben Kacheln fuer die Wege zu fehlenden Belegen */
html.bp-v2 body.bp-app #s3-rechnungen-holen::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M4.2 7.5l2.6 1.5M17.2 15l2.6 1.5M4.2 16.5l2.6-1.5M17.2 9l2.6-1.5'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #s3-reisekosten::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M8 19h7a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E") !important; }
html.bp-v2 body.bp-app #s3-wege .choice-card { min-height: 150px; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
html.bp-v2 body.bp-app #s3-wege .choice-card .choice-card-sub { font-weight: var(--weight-regular); }
html.bp-v2 body.bp-app .weitere-wege-marke {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-align: left;
}


/* COMPUTERSUCHE: WAS GERADE PASSIERT, WIE LANGE NOCH, WO STEHT WAS (Emil, 23.09.2026) - in den Hausfarben,
   hell und dunkel ueber die Tokens. Dieselben Toene wie der Fortschritt in Schritt 3: fertig green-800,
   in Arbeit green-500, wartend green-300, zurueckgestellt neutral. */
html.bp-v2 body.bp-app .pc-aktivitaet { border-color: var(--border-subtle); background: var(--panel-muted); }
html.bp-v2 body.bp-app .pc-puls { background: var(--green-600); }
html.bp-v2 body.bp-app .pc-aktivitaet.still .pc-puls { background: var(--warning); }
html.bp-v2 body.bp-app .pc-aktiv-text { color: var(--text-primary); }
html.bp-v2 body.bp-app .pc-aktiv-tempo,
html.bp-v2 body.bp-app .pc-herzschlag,
html.bp-v2 body.bp-app .pc-fortschritt-dauer,
html.bp-v2 body.bp-app .pc-stufe-stand,
html.bp-v2 body.bp-app .pc-stufe-unter,
html.bp-v2 body.bp-app .pc-verlauf time,
html.bp-v2 body.bp-app .pc-verlauf-titel { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .pc-herzschlag.warnung { color: var(--warning-strong, var(--warning)); }
html.bp-v2 body.bp-app .pc-fortschritt-rest,
html.bp-v2 body.bp-app .pc-stufe dt { color: var(--text-secondary); }
html.bp-v2 body.bp-app .pc-stufe { border-color: var(--border-subtle); border-radius: var(--radius-lg); background: var(--panel); }
html.bp-v2 body.bp-app .pc-stufe-laeuft { border-color: var(--green-300); }
html.bp-v2 body.bp-app .pc-stufe-nr { border-color: var(--border-default); color: var(--text-tertiary); }
html.bp-v2 body.bp-app .pc-stufe-laeuft .pc-stufe-nr { border-color: var(--green-600); color: var(--green-700); }
html.bp-v2 body.bp-app .pc-stufe-fertig .pc-stufe-nr { border-color: var(--fix-green-700, var(--green-700)); background: var(--fix-green-700, var(--green-700)); color: var(--text-on-green, #f6fbf7); }
html.bp-v2 body.bp-app .pc-stufe-laeuft .pc-stufe-stand,
html.bp-v2 body.bp-app .pc-stufe .betont dd { color: var(--green-700); }
html.bp-v2 body.bp-app .pc-stufe dd { color: var(--text-primary); }
html.bp-v2 body.bp-app .pc-anteile { background: var(--neutral-bg); }
html.bp-v2 body.bp-app .pc-f-aus { background: var(--green-800); }
html.bp-v2 body.bp-app .pc-f-arbeit { background: var(--green-500); }
html.bp-v2 body.bp-app .pc-f-wartet { background: var(--green-300); }
html.bp-v2 body.bp-app .pc-f-ausser { background: var(--border-default); }
html.bp-v2 body.bp-app .pc-f-nicht { background: var(--neutral-border); }


/* MEETING 23.09.2026 - Anhalten in Rot (Computer und Postfach gleich), Fortschritt ohne Ueberstand. */
html.bp-v2 body.bp-app .ghost-btn.s2-anhalten {
  color: var(--danger-strong) !important;
  border-color: var(--danger) !important;
  background: transparent !important;
}
html.bp-v2 body.bp-app .ghost-btn.s2-anhalten:hover {
  background: var(--danger-bg) !important;
  border-color: var(--danger-strong) !important;
}
html.bp-v2 body.bp-app :is(.pc-anteile, .s2-balken) {
  border: 0 !important;
  border-radius: var(--radius-pill, 999px) !important;
  overflow: hidden !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ==== compat/seiten/projekt-schritt3.css ==== */
/* UI v2 – Schritt 3 „Prüfen und Zuordnen“ (Bestand #tab-panel-review) */

/* Fehlende Belege: Zeilen ohne farbigen Seitenstreifen (Plan 2.3) */
html.bp-v2 body.bp-app .s3-offene-zeile {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important;
  padding-left: var(--space-4) !important;
}

html.bp-v2 body.bp-app .s3-offene-zeile:hover {
  border-color: var(--hover-akzent) !important;
}

html.bp-v2 body.bp-app .weitere-wege-marke {
  display: block;
  margin: 0 0 var(--space-3) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
}

html.bp-v2 body.bp-app .s3-material-marke {
  font-size: var(--text-md) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
}

/* Rueckmeldung beim Ueberfahren – jede klickbare Flaeche zeigt, dass sie reagiert */
html.bp-v2 body.bp-app #tab-panel-review details.task-accordion > summary {
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-review details.task-accordion > summary:hover { background: var(--hover-flaeche); }
html.bp-v2 body.bp-app #tab-panel-review .review-card button.reject:hover {
  border-color: var(--danger-strong) !important;
  background: var(--danger-bg) !important;
  color: var(--danger-strong) !important;
}
html.bp-v2 body.bp-app #tab-panel-review [id^="answer-btn-"]:hover { color: var(--text-on-green, #f6fbf7) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-chip {
  /* Rolle kleiner Knopf (docs/ui-v2/REGELN.md) - bis 11.10.2026 27,8 px hoch aus 0.15rem Rand */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-chip:hover { border-color: var(--hover-akzent) !important; background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-chip.aktiv:hover,
html.bp-v2 body.bp-app #tab-panel-review .s3-chip[aria-pressed="true"]:hover { background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-leiste-zahl { margin-left: auto; }

/* Zaehler rechts in derselben Zeile wie die Sortierung */
html.bp-v2 body.bp-app #s3-offene-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
html.bp-v2 body.bp-app #s3-offene-leiste > * { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center; }
html.bp-v2 body.bp-app #s3-offene-leiste > .s3-leiste-zahl { order: 99; margin-left: auto !important; }

/* Wege zu fehlenden Belegen: Kacheln direkt auf der Flaeche, kein Kasten darum */
html.bp-v2 body.bp-app #tab-panel-review .weitere-wege {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Aufklapp-Pfeil der offenen Buchung als Zeichen statt Textzeichen */
html.bp-v2 body.bp-app .s3-fall-pfeil {
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 0;
  background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .s3-offene-zeile.offen .s3-fall-pfeil,
html.bp-v2 body.bp-app .s3-offene-zeile.is-open .s3-fall-pfeil { transform: rotate(90deg); }

/* Handy: Zaehler „1 offen“ und „Archiv oeffnen“ brechen nicht mitten im Wort um */
html.bp-v2 body.bp-app #tab-panel-review details.task-accordion > summary .task-count { white-space: nowrap; }
html.bp-v2 body.bp-app #s3-suchagent { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
html.bp-v2 body.bp-app #s3-suchagent .nachschub-link { margin: 0 !important; }

/* ===== UX-Pass Schritt 3 (Henry, 17.09.2026) ===== */

/* Fortschritt in drei ruhigen Toenen - keine Ampel */
html.bp-v2 body.bp-app .s3-seg-fertig,
html.bp-v2 body.bp-app .s3-leg-fertig i { background: var(--green-800); }
html.bp-v2 body.bp-app .s3-seg-pruefen,
html.bp-v2 body.bp-app .s3-leg-pruefen i { background: var(--green-300); }
html.bp-v2 body.bp-app .s3-seg-offen,
html.bp-v2 body.bp-app .s3-leg-offen i { background: var(--neutral-bg); border-color: var(--neutral-border); }
html.bp-v2 body.bp-app .s3-fortschritt-rest .s3-leg { color: var(--text-secondary); }
html.bp-v2 body.bp-app .s3-fortschritt-rest .s3-leg strong { color: var(--text-primary) !important; }
html.bp-v2 body.bp-app .s3-suchstatus { border-top-color: var(--border-subtle); color: var(--text-secondary); }
html.bp-v2 body.bp-app .s3-suchdetails > summary { color: var(--text-tertiary); }

/* Pruefmodus: der Behaelter traegt keinen eigenen Rahmen - sonst steht eine Karte in einer Karte in einer Karte */
html.bp-v2 body.bp-app #tab-panel-review #needs-review-section {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 var(--space-3) !important;
  box-shadow: none !important;
}
/* Im Pruefmodus ist der Einstiegsknopf weg - "Zuordnen" ist dann die eine gefuellte Handlung des Bildschirms.
   GEFUELLT NUR BEIM STARKEN VORSCHLAG (Henry, 22.09.2026, Punkt 9): ein satt gruener Knopf sagt
   "das ist wahrscheinlich richtig" - bei "plausibel" bleibt er Kontur, bei "unsicher" neutral. */
/* RUHE 700, HOVER 800 - wie jeder gefüllte Knopf. Hier stand in Ruhe schon das dunklere Grün, also dieselbe Farbe
   wie beim Überfahren: der Knopf, auf den der Prüfmodus hinführt, antwortete als einziger nicht (gemessen 12.10.2026). */
html.bp-v2 body.bp-app #needs-review-section.s3-fokus .review-card.s3-fokus-aktiv.s3-q-stark .buttons > button.primary {
  background: var(--fix-green-700) !important;
  border-color: var(--fix-green-700) !important;
  color: var(--text-on-green, #f6fbf7) !important;
}
html.bp-v2 body.bp-app #needs-review-section.s3-fokus .review-card.s3-fokus-aktiv.s3-q-stark .buttons > button.primary:hover {
  background: var(--hover-primaer) !important;
  border-color: var(--hover-primaer) !important;
}
html.bp-v2 body.bp-app .s3-vergleich-spalte { border-color: var(--border-subtle); border-radius: var(--radius-md); background: var(--panel-muted); }
html.bp-v2 body.bp-app .s3-vergleich-marke { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .s3-fokus-stand { color: var(--text-secondary); }

/* Sortierung als ein Auswahlfeld */
html.bp-v2 body.bp-app #s3-sortierung { width: auto !important; min-width: 0 !important; border-radius: var(--radius-md); }
html.bp-v2 body.bp-app .s3-sortieren { color: var(--text-secondary); }

/* Sekundaere Bereiche: eingeklappt und leise */
html.bp-v2 body.bp-app .s3-weitere { border-top-color: var(--border-subtle); }
html.bp-v2 body.bp-app .s3-weitere > summary { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-medium); }
html.bp-v2 body.bp-app .s3-material-schalter .s3-bestand-zeile {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--panel);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .s3-material-schalter .s3-bestand-zeile:hover { border-color: var(--hover-akzent); background: var(--hover-flaeche); }
html.bp-v2 body.bp-app .s3-material-schalter .s3-bestand-zeile[aria-pressed="true"] { border-color: var(--green-300); }

/* Eine Zeile je Liste: die Klappbox darunter ist nur Behaelter - ohne eigene Kopfzeile, ohne eigenen Rahmen.
   (Vorher standen in UI v2 die Umschalter UND die Kopfzeilen der Klappboxen untereinander.) */
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion > summary { display: none !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion {
  border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion[open] { padding: var(--space-3) 0 var(--space-2) !important; }

/* "Bestand noch einmal durchgehen" steht seit 18.09.2026 im Belegbestand - kleine Nebenaktion */
html.bp-v2 body.bp-app #tab-panel-review .s3-material .s3-durchgehen-zeile { margin: var(--space-3) 0 0 !important; }
html.bp-v2 body.bp-app .s3-auswahl-titel { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .s3-auswahl-weitere,
html.bp-v2 body.bp-app .s3-auswahl-mehr { border-top-color: var(--border-subtle); }

/* Pruefmodus am Telefon (Abnahme 19.09.2026): die Knopfzeile bricht um, der Nebenlink
   "Eigenen Beleg hochladen" haengt nicht mehr abgeschnitten rechts heraus. */
html.bp-v2 body.bp-app #needs-review-section .review-card .buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
html.bp-v2 body.bp-app #needs-review-section .review-card .buttons > .nachschub-link { margin: 0; }
@media (max-width: 480px) {
  html.bp-v2 body.bp-app #needs-review-section .review-card .buttons > .nachschub-link { flex-basis: 100%; text-align: left; }
}

/* Produkt-Pass 19.09.2026: Empfehlung, priorisierte Faecher, strukturierter Grund */
html.bp-v2 body.bp-app .s3-empfehlung { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--green-050); border: 1px solid var(--green-100); }
html.bp-v2 body.bp-app .s3-empf-marke { color: var(--green-700); }
html.bp-v2 body.bp-app .s3-empf-grund { color: var(--text-secondary); }
/* Das kleine "Mehr" ist seit 23.09.2026 das einzige Menue - es bleibt immer sichtbar. */
html.bp-v2 body.bp-app .s3-weitere-optionen > summary { color: var(--green-700); font-weight: var(--weight-medium); }
html.bp-v2 body.bp-app .s3-marke.typ { color: var(--green-700); }
html.bp-v2 body.bp-app .s3-kein-beleg { border-color: var(--border-subtle); border-radius: var(--radius-md); background: var(--panel-muted); }
html.bp-v2 body.bp-app .s3-grund-anmerkung { border-radius: var(--radius-md); }
html.bp-v2 body.bp-app .s3-nebenweg { color: var(--text-secondary); }

/* Faecher am Telefon: Text bricht um, kein Fach ragt aus der Zeile (gemessen 19.09.2026 bei 375 px) */
html.bp-v2 body.bp-app .s3-fall-faecher { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; gap: var(--space-2) !important; }
html.bp-v2 body.bp-app .s3-fall-faecher .s3-fach { white-space: normal !important; overflow-wrap: anywhere; min-width: 0 !important; max-width: 100% !important; width: auto !important; }
html.bp-v2 body.bp-app .s3-weitere-optionen { grid-column: 1 / -1; }
html.bp-v2 body.bp-app .s3-fall-faecher .s3-fach.empf { border-color: var(--green-600) !important; background: var(--green-050) !important; }

/* Vorschlagsqualitaet (Henry, 22.09.2026): Stufe, Abweichungen, Signale, Knopf-Hierarchie.
   Zweite Runde am selben Tag: KEINE gelbe Flaeche mehr ("wie ein Krankenschein"). Gruen nur als
   Vorstufe des Knopfgruens - Marke, feine Kante, Detailflaeche -, der Knopf behaelt die
   staerkste Farbe. Stark = klar gruen markiert, plausibel = dezent gruen, unsicher = neutral mit
   feinem Amber-Hinweis. Jede Karte ist eine eigene Karte (Rahmen, Schatten, Abstand). */
html.bp-v2 body.bp-app .s3-qualitaet { font-size: var(--text-xs, 0.72rem); border-radius: 999px; border: 1px solid transparent; }
html.bp-v2 body.bp-app .s3-qualitaet-stark { background: var(--green-100); color: var(--green-800); border-color: var(--green-200); }
html.bp-v2 body.bp-app .s3-qualitaet-plausibel { background: var(--green-050); color: var(--green-700); border-color: var(--green-100); }
html.bp-v2 body.bp-app .s3-qualitaet-unsicher { background: var(--panel); color: var(--warning-strong); border-color: var(--border-default); }
html.bp-v2 body.bp-app .s3-qualitaet-kein_hauptbeleg { background: var(--panel); color: var(--danger-strong); border-color: var(--border-default); }
html.bp-v2 body.bp-app .s3-karte-satz { color: var(--text-primary); }

/* Die Karte selbst: in UI v2 nimmt app-neu.css jeder Karte in einer Section Rahmen und Flaeche -
   deshalb liefen die unsicheren Vorschlaege ineinander. Hier bekommt jede ihren Kasten zurueck. */
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-stark:not(.confirmation-card),
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-plausibel:not(.confirmation-card),
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-unsicher:not(.confirmation-card) {
  background: var(--panel) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left-width: 4px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--space-4) var(--space-5) !important;
}
/* Kante in BelegHero-Dunkelgruen bei allen Stufen (Henry, 22.09.2026): "eine Karte = ein Kandidat".
   Die Stufe sagt die Marke oben; die gefuellten Knoepfe bleiben die kraeftigste Farbe. */
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-stark:not(.confirmation-card),
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-plausibel:not(.confirmation-card),
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-unsicher:not(.confirmation-card) { border-left-color: var(--green-800) !important; }
html.bp-v2 body.bp-app #tab-panel-review #s3-unsicher-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* min-width: 0 - sonst waechst die Karte am Telefon mit der laengsten Zeile ueber den Rand */
html.bp-v2 body.bp-app #tab-panel-review #s3-unsicher-liste > .review-card { margin: 0 !important; min-width: 0; }
/* Gefundener Beleg leicht mint, damit Buchung und Beleg auf einen Blick zwei Seiten sind. */
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-vergleich-spalte + .s3-vergleich-spalte { background: var(--green-050); border-color: var(--green-100); }

html.bp-v2 body.bp-app .s3-stand-ok, html.bp-v2 body.bp-app .s3-signal-ok .s3-signal-zeichen { color: var(--green-700); }
html.bp-v2 body.bp-app .s3-stand-pruefen, html.bp-v2 body.bp-app .s3-signal-pruefen .s3-signal-zeichen { color: var(--warning-strong); }
html.bp-v2 body.bp-app .s3-stand-widerspruch, html.bp-v2 body.bp-app .s3-signal-widerspruch .s3-signal-zeichen { color: var(--danger-strong); }
html.bp-v2 body.bp-app .s3-stand-unbekannt, html.bp-v2 body.bp-app .s3-signal-unbekannt .s3-signal-zeichen { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .s3-signal-art { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .s3-warum-block { background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--radius-md); min-width: 0; }
html.bp-v2 body.bp-app #tab-panel-review .s3-warum-block .compare-table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-warum-block .compare-table th,
html.bp-v2 body.bp-app #tab-panel-review .s3-warum-block .compare-table td { overflow-wrap: anywhere; white-space: normal !important; }
/* EINE KNOPFFORM (Meeting 23.09.2026, Emil: „die meisten sind abgerundet … manche sind einfach viereckig“): die
   Handlungsknoepfe sind Pillen wie ueberall, gleich hoch. */
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button { min-height: var(--control-h) !important; border-radius: var(--radius-pill) !important; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.reject {
  background: var(--panel) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.s3-spaeter {
  background: transparent !important; border: 1px solid transparent !important; color: var(--text-secondary) !important; box-shadow: none !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.s3-spaeter:hover { color: var(--text-primary) !important; background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-neutral {
  background: var(--panel) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}
html.bp-v2 body.bp-app #tab-panel-review #s3-unsicher-section > summary { color: var(--text-primary); }

/* Runde 3 (Henry, 22.09.2026): Differenzen rot, Fremdwaehrung, andere Buchungen, Upload-Pruefung */
html.bp-v2 body.bp-app #tab-panel-review .s3-delta.s3-delta-abw { color: var(--danger-strong) !important; }
html.bp-v2 body.bp-app .s3-fremd-hinweis { color: var(--text-tertiary); }
html.bp-v2 body.bp-app #tab-panel-review .s3-alt-buchungen { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--panel); }
html.bp-v2 body.bp-app #tab-panel-review .s3-alt-buchungen .alt-row { border-top-color: var(--border-subtle); }
html.bp-v2 body.bp-app .s3-alt-details { background: var(--green-050); border: 1px solid var(--green-100); }
html.bp-v2 body.bp-app .s3-alt-nr.s3-stand-ok { color: var(--green-700); }
html.bp-v2 body.bp-app .s3-alt-nr.s3-stand-widerspruch { color: var(--danger-strong); }
html.bp-v2 body.bp-app #tab-panel-review .s3-upload-widerspruch { border-left: 4px solid var(--danger) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-upload-widerspruch .meta { color: var(--danger-strong) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-alt-buchungen .alt-row { display: grid !important; grid-template-columns: minmax(0, 1fr); min-width: 0; }
html.bp-v2 body.bp-app #tab-panel-review .s3-alt-knoepfe .alt-btn { white-space: normal !important; max-width: 100%; }

/* ===== Emils Board (22.09.2026) ===== */

/* Punkt 2 – "Auswahl box spacing zu eng": die Sortierung stand ohne Abstand unter dem Untertitel
   und fast auf der ersten Buchung. Jetzt je 16 px darueber und darunter. */
html.bp-v2 body.bp-app #s3-offene-leiste { margin: var(--space-4) 0 !important; column-gap: var(--space-3); row-gap: var(--space-2); }
html.bp-v2 body.bp-app #s3-offene-leiste:empty { display: none; }
html.bp-v2 body.bp-app #s3-offene-liste { margin-top: 0 !important; }

/* Punkt 3 – "Details nicht richtig zum Rand formatiert": "Suchdetails" hatte das Polster einer
   Klappkarte (16 px links) und stand deshalb eingerueckt. Jetzt buendig mit Titel und Balken. */
html.bp-v2 body.bp-app #s3-suchdetails > summary {
  width: fit-content;
  padding: var(--space-2) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app #s3-suchdetails > summary:hover { background: transparent; color: var(--hover-akzent); }
html.bp-v2 body.bp-app #s3-suchdetails > .s3-suchagent { margin: var(--space-1) 0 0 !important; padding: 0 !important; }

/* Punkt 4 – "Abschnitt komisch gestaltet": "Weitere Wege" und "Belegbestand" standen zwischen
   zwei Trennlinien, der eine Titel 16 px eingerueckt, der andere nicht. Jetzt zwei ruhige Karten
   wie der Rest der Seite, alles auf derselben Kante, der Pfeil rechts in der Kopfzeile. */
html.bp-v2 body.bp-app #tab-panel-review .s3-weitere,
html.bp-v2 body.bp-app #tab-panel-review .s3-material {
  margin: var(--space-5) 0 0 !important;
  padding: var(--space-5) var(--space-6) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card-lg) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-card) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-weitere > summary {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-primary) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-weitere > summary:hover { background: transparent !important; color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-weitere[open] > summary { margin-bottom: var(--space-4) !important; border: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-weitere-unter { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-regular, 400); color: var(--text-tertiary); }
html.bp-v2 body.bp-app #tab-panel-review .s3-material-kopf { margin: 0 0 var(--space-3) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-material-schalter { margin-top: 0 !important; display: grid; gap: var(--space-2); }
@media (max-width: 640px) {
  /* DIESELBE KANTE WIE DIE KARTEN DARÜBER (Emil, 09.10.2026: „das spacing … muss immer und überall passen“). Am Handy
     standen „Weitere Wege“ und „Belegbestand“ 16 px eingerückt, die Karten darüber 24 px - jede Karte eine andere
     linke Kante. Und der Zusatz „zum Beispiel per WhatsApp“ stand trotz display:block NEBEN dem Titel (die Kopfzeile
     ist eine Flex-Zeile), beide zweizeilig gequetscht. Jetzt bricht er unter den Titel. */
  html.bp-v2 body.bp-app #tab-panel-review .s3-weitere,
  html.bp-v2 body.bp-app #tab-panel-review .s3-material { padding: var(--space-6) !important; }
  html.bp-v2 body.bp-app #tab-panel-review .s3-weitere > summary { flex-wrap: wrap; row-gap: 0; }
  html.bp-v2 body.bp-app #tab-panel-review .s3-weitere-unter { display: block; order: 3; flex: 0 0 100%; margin: var(--space-1) 0 0; }
}

/* Punkt 5 – "Unklar – bitte kurz prüfen": "Alles komisch, inkl text, formatierung". Betrag deutsch
   und in einer Zeile, Etiketten nebeneinander mit "Ändern" dahinter, die Hinweise aus der Pruefung
   als ruhige Zeile unter dem Beleg statt fett in der schmalen Einstufungsspalte. Keine gelbe
   Flaeche (Henry, 22.09.2026) - neutraler Grund, feine Amber-Kante. */
html.bp-v2 body.bp-app #tab-panel-review .lr-gruppe-hinweis { margin: var(--space-1) 0 var(--space-3) !important; max-width: 72ch; color: var(--text-secondary); }
html.bp-v2 body.bp-app #tab-panel-review .lr-zeile > td { vertical-align: middle; }
html.bp-v2 body.bp-app #tab-panel-review .lr-betrag,
html.bp-v2 body.bp-app #tab-panel-review .lr-datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
html.bp-v2 body.bp-app #tab-panel-review .lr-datei { min-width: 7rem; overflow-wrap: anywhere; }
html.bp-v2 body.bp-app #tab-panel-review .lr-notiz { width: 9rem; }
html.bp-v2 body.bp-app #tab-panel-review .einstufung-ruhe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
html.bp-v2 body.bp-app #tab-panel-review .einstufung-marken { flex-direction: row !important; flex-wrap: wrap; gap: var(--space-1); }
html.bp-v2 body.bp-app #tab-panel-review .einstufung-aendern {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--green-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* `.icon-btn` der Seite dimmt auf 60 % - richtig für ein Symbol, für ein Wort blieben 2,7:1 übrig. */
  opacity: 1 !important;
  position: relative;
}
html.bp-v2 body.bp-app #tab-panel-review .einstufung-aendern:hover { color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #tab-panel-review .lr-mit-hinweis > td { border-bottom-color: transparent !important; }
html.bp-v2 body.bp-app #tab-panel-review .lr-hinweis-zeile > td { padding-top: 0 !important; border-top: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-review .lr-warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 72ch;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--panel-muted);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
html.bp-v2 body.bp-app #tab-panel-review .lr-warnung + .lr-warnung { margin-top: var(--space-1); }
html.bp-v2 body.bp-app .lr-warnung .lr-warnung-zeichen { flex: none; margin: 0.12em 0 0; color: var(--warning-strong); }
html.bp-v2 body.bp-app #tab-panel-review .lr-einstufung { min-width: 11rem; }
/* SCHMALE KARTE BEI OFFENER LEISTE (Henry, Meeting 30.09.2026, Mac-App): bei 1200-1350 px
   Fensterbreite mit geoeffneter Hauptleiste reichte die Karte nicht - die Notiz-Spalte lief
   ueber den Kartenrand hinaus (Tabelle 741px, Karte 668px bei 1280px). table-layout:auto
   zaehlt die festen min-width/width-Werte der Spalten IMMER mit, auch wenn eine Spalte
   technisch umbrechen koennte - deshalb hier keine Medienabfrage, sondern kleinere
   Grundwerte: Datei, Notiz und Einstufung koennen schon umbrechen (overflow-wrap,
   flex-wrap), sie brauchten die alten Mindestbreiten nicht wirklich. */
/* Inhalt der Bestandslisten auf der Kartenkante (vorher 16 px eingerueckt unter "Belegbestand") */
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion > :not(summary) { padding-left: 0 !important; padding-right: 0 !important; }

/* BELEGBESTAND (Emil, UI-Pass 22.09.2026, Punkte 16, 18 und 19).
 * Drei gleich hohe Zeilen mit 8 px Abstand, die Zahl als ruhige Marke rechts,
 * ein Pfeil zum Aufklappen. Die geoeffnete Zeile wird zum Kopf ihrer Liste:
 * gleicher Rahmen, Inhalt direkt darunter mit festem Innenabstand, alles auf
 * einer linken Kante. */
html.bp-v2 body.bp-app #tab-panel-review .s3-material-schalter + details + .s3-material-schalter,
html.bp-v2 body.bp-app #tab-panel-review .s3-material > details + .s3-material-schalter {
  margin-top: var(--space-2) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material-schalter .s3-bestand-zeile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-zeile > span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--panel-muted);
  color: var(--text-secondary) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-zeile > span.ist-null {
  background: transparent;
  color: var(--text-tertiary) !important;
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-zeile::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 0;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-zeile[aria-pressed="true"]::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material-schalter .s3-bestand-zeile[aria-pressed="true"] {
  border-color: var(--border-default);
  border-bottom-color: var(--divider);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--panel-muted);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-zeile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Die offene Liste haengt am Kopf: derselbe Rahmen, 16 px Innenabstand. */
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion[open] {
  padding: var(--space-4) !important;
  border: 1px solid var(--border-default) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
/* Abstaende ueber Raender, nicht ueber `gap`: der Inhalt eines <details> liegt in
   einem eigenen Behaelter, an dem ein Raster nicht greift. */
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion[open] > * {
  margin: 0 !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion[open] > :not(summary) + :not(summary) {
  margin-top: var(--space-3) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion > .hint {
  max-width: 72ch;
  color: var(--text-secondary);
  font-size: var(--text-sm) !important;
  line-height: 1.5;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion .sub,
html.bp-v2 body.bp-app #tab-panel-review .s3-bz-leer {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
/* Suchfeld in Standardhoehe mit Lupe, Platzhalter nicht mehr am Rand. */
html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion input.lr-search {
  width: min(100%, 380px) !important;
  /* Rolle Feld (docs/ui-v2/REGELN.md) - bis 11.10.2026 40 px / 13 px / Radius 12 */
  height: var(--control-h) !important;
  min-height: var(--control-h) !important;
  margin: 0 !important;
  padding: 0 12px 0 36px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") no-repeat 12px center / 16px 16px !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
}
/* Die beiden Nebenaktionen in einer ruhigen Zeile. */
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-links > .s3-durchgehen-zeile,
html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-links > .s3-archiv-zeile {
  margin: 0 !important;
}
/* Zugeordnete Belege: Name und Metazeile, Betrag in fester Spalte, rechts
   „Öffnen“ und „Zuordnung lösen“ als leise Textaktionen. */
html.bp-v2 body.bp-app .s3-bz-liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 body.bp-app .s3-bz-zeile {
  max-width: none;
  display: grid;
  /* Feste Spalte fuer die Aktionen: Zeilen ohne Aktion (Geldeingang) halten den Betrag auf derselben Kante. */
  grid-template-columns: minmax(0, 1fr) 7rem 11.5rem;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.bp-app .s3-bz-zeile:first-child {
  border-top: 0;
  padding-top: 0;
}
html.bp-v2 body.bp-app .s3-bz-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html.bp-v2 body.bp-app .s3-bz-text b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-bz-meta {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Eric, 23.09.2026: Suche und Zahl ueber der Liste, je Zeile auch der gelesene Beleg - eine
   falsche Zuordnung sieht man nur, wenn beide Seiten nebeneinander stehen. */
html.bp-v2 body.bp-app .s3-bz-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-app .s3-bz-zahl {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .s3-bz-beleg {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-bz-anders {
  margin-left: var(--space-2);
  padding: 1px 6px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: var(--text-xs);
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-bz-zeile.s3-bz-arbeitet { opacity: 0.55; pointer-events: none; }
/* Emil, 23.09.2026: „Vollständige ansehen“ direkt am Fortschritt - rechts neben der Zahl, auf dem
   Handy darunter. Leise Kontur, die gefuellte Handlung der Seite bleibt „Vorschläge prüfen“. */
html.bp-v2 body.bp-app #tab-panel-review .s3-fortschritt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-fortschritt-kopf .s3-fortschritt-zahl { margin: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-vollstaendig-knopf {
  flex: none;
  min-height: var(--control-h) !important;
  padding: 0 var(--space-4) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-vollstaendig-knopf:hover { border-color: var(--hover-akzent) !important; background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-vollstaendig-knopf:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
html.bp-v2 body.bp-app .s3-bz-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
html.bp-v2 body.bp-app .s3-bz-filter:empty { display: none; }
html.bp-v2 body.bp-app .s3-bz-filter .s3-chip span { margin-left: 2px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
html.bp-v2 body.bp-app .s3-bz-filter .s3-chip.aktiv span { color: inherit; }
html.bp-v2 body.bp-app .s3-bz-ohne .s3-bz-beleg { color: var(--text-secondary); }
html.bp-v2 body.bp-app .s3-bz-hervor { outline: 2px solid var(--green-600); outline-offset: 3px; transition: outline-color var(--dur-slow, 0.6s) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { html.bp-v2 body.bp-app .s3-bz-hervor { transition: none; } }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-trotzdem-hinweis {
  max-width: 72ch;
  margin: var(--space-2) 0 0 !important;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
html.bp-v2 body.bp-app .s3-bz-betrag {
  justify-self: end;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-bz-tun {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-4);
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-bz-tun:empty { display: none; }
html.bp-v2 body.bp-app .s3-bz-tun .s3-bz-loesen {
  color: var(--text-secondary) !important;
}
html.bp-v2 body.bp-app .s3-bz-tun .s3-bz-loesen:hover {
  color: var(--danger) !important;
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app .s3-bz-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
  }
  html.bp-v2 body.bp-app .s3-bz-tun {
    grid-column: 1 / -1;
  }
  /* Auf dem Handy bricht die Belegzeile um - sonst waere „Händler weicht ab“ abgeschnitten. */
  html.bp-v2 body.bp-app .s3-bz-beleg { white-space: normal; }
  html.bp-v2 body.bp-app .s3-bz-kopf .s3-bz-suche { width: 100% !important; }
  html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion input.lr-search {
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
  }
}

/* AUFGEKLAPPTE BUCHUNG (Emil, UI-Pass 22.09.2026, Punkt 17: „kommt einem zu voll
 * vor. strukturier das besser“). Oben leise „Bisher: …“, dann EINE Empfehlung
 * (Knopf und Grund in einer Zeile), darunter die uebrigen Wege gruppiert und
 * gleich breit, ohne die Kreise, die wie Auswahlfelder aussahen. Im
 * aufgeklappten Zustand steht der Hauptknopf nicht noch einmal in der Kopfzeile. */
html.bp-v2 body.bp-app .s3-offene-zeile.offen .s3-fall-haupt {
  display: none !important;
}
html.bp-v2 body.bp-app .s3-fall-inhalt > .s3-fall-faecher {
  display: block !important;
  margin: 0;
}
html.bp-v2 body.bp-app .s3-fall-inhalt {
  padding-top: var(--space-3);
}
/* „Bisher: …“ als eine leise Zeile unter der Kopfzeile. */
html.bp-v2 body.bp-app .s3-fall-inhalt > .s3-fall-protokoll {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
html.bp-v2 body.bp-app .s3-fall-inhalt > .s3-fall-protokoll::before {
  content: "Bisher:";
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .s3-fall-inhalt > .s3-fall-protokoll li {
  margin: 0;
  padding: 0;
}
html.bp-v2 body.bp-app .s3-fall-inhalt > .s3-fall-protokoll li + li::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--text-tertiary);
}
/* Die Empfehlung: Hauptweg als gefuellter Knopf, der Grund daneben. */
html.bp-v2 body.bp-app .s3-fall-empfohlen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
}
html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto !important;
  min-height: var(--control-h) !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--fix-green-700) !important;
  color: var(--text-on-green) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  text-align: left;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.18) !important;
}
html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach:hover {
  background: var(--hover-primaer) !important;
}
html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach::after,
html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach .choice-card-sub,
html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach small {
  display: none !important;
}
html.bp-v2 body.bp-app .s3-fall-empfohlen .s3-empfehlung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .s3-fall-empfohlen .s3-empf-marke {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app .s3-fall-empfohlen .s3-empf-grund {
  flex-basis: auto;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
/* Gruppen „Beleg besorgen“ und „Ohne fremden Beleg“: ruhige Titel, gleich breite
 * Wege in einem Raster, ohne Kreise. */
html.bp-v2 body.bp-app .s3-fall-gruppe + .s3-fall-gruppe {
  margin-top: var(--space-4);
}
html.bp-v2 body.bp-app .s3-fall-gruppe-titel {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-2);
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  text-align: left !important;
  white-space: normal !important;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach::after {
  display: none !important;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach .choice-card-sub,
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach small {
  display: block;
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1.4;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach:hover {
  border-color: var(--hover-akzent) !important;
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach.still {
  color: var(--text-secondary) !important;
}
html.bp-v2 body.bp-app .s3-fall-faecher-liste .s3-fach:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}
/* „Weitere Optionen“ als Link mit Pfeil, ohne Unterstrich-Kasten. */
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen {
  margin-top: var(--space-4);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen > summary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--green-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  list-style: none;
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen > summary::-webkit-details-marker {
  display: none;
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen > summary::after {
  content: "" !important;
  position: static !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 2px !important;
  border: 0 !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen[open] > summary::after {
  margin-top: 3px !important;
  transform: rotate(-135deg) !important;
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen > summary:hover {
  background: transparent !important;
  color: var(--hover-akzent) !important;
  text-decoration: underline;
}
html.bp-v2 body.bp-app .s3-fall-inhalt .s3-weitere-optionen > .s3-fall-faecher-rest {
  display: block !important;
  margin: var(--space-3) 0 0 !important;
  padding: 0 !important;
}

/* „MEHR“ AN DER ZUGEKLAPPTEN BUCHUNG (Punkt 24: „das mehr hat eine andere pill
 * form als das 'auf dem mac suchen'“): gleiche Pillenform, Hoehe und Kante wie
 * der Hauptknopf daneben; das Menue mit Gruppen, Zeichen und klarem Hover,
 * rechts buendig, bleibt im Fenster. */
html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-haupt,
html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-schliessen {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  /* Rolle Knopf (docs/ui-v2/REGELN.md) - bis 11.10.2026 36 px / 13 px / 600, neben 38 / 14 / 500 im Rest der App */
  min-height: var(--control-h) !important;
  height: var(--control-h);
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-schliessen {
  padding: 0 12px 0 16px !important;
  border: 1px solid var(--border-default) !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-schliessen:hover,
html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-schliessen[aria-expanded="true"] {
  border-color: var(--hover-akzent) !important;
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.bp-app .s3-menu-liste {
  min-width: 18rem;
  padding: 6px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-popover) !important;
}
html.bp-v2 body.bp-app .s3-menu-liste.nach-oben {
  top: auto !important;
  bottom: calc(100% + 4px) !important;
}
html.bp-v2 body.bp-app .s3-menu-liste .s3-menu-gruppe {
  padding: 8px 10px 4px !important;
  color: var(--text-tertiary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.bp-v2 body.bp-app .s3-menu-liste .s3-menu-trenner {
  margin: 6px 4px !important;
  border-top-color: var(--divider) !important;
}
html.bp-v2 body.bp-app .s3-menu-liste button {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
html.bp-v2 body.bp-app .s3-menu-liste button:hover,
html.bp-v2 body.bp-app .s3-menu-liste button:focus-visible {
  outline: none;
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.bp-app .s3-menu-liste .s3-weg-zeichen {
  flex: none;
  margin-top: 1px;
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .s3-menu-liste .s3-menu-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
html.bp-v2 body.bp-app .s3-menu-liste button small {
  color: var(--text-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-regular);
  white-space: nowrap;
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app .s3-fall-empfohlen > .s3-fach {
    justify-content: center;
    width: 100% !important;
    min-height: 44px !important;
  }
  html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-haupt,
  html.bp-v2 body.bp-app .s3-fall-rechts .s3-fall-schliessen {
    height: 44px;
    min-height: 44px !important;
  }
  html.bp-v2 body.bp-app .s3-menu-liste {
    min-width: min(18rem, calc(100vw - 32px));
  }
  html.bp-v2 body.bp-app .s3-menu-liste button small {
    white-space: normal;
  }
}

/* WEITERE DATEIEN ALS ENTSCHEIDUNGSLISTE (Emil, UI-Pass 22.09.2026, Punkt 20).
 * Je Datei eine ruhige Karte: Name und „Öffnen“, darunter eine Metazeile, ein
 * Pruefhinweis als Satz, dann die Entscheidung als Knoepfe. */
html.bp-v2 body.bp-app #tab-panel-review .lr-gruppe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-1) !important;
  color: var(--text-primary);
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .lr-gruppe:first-of-type {
  margin-top: var(--space-4) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .lr-gruppe-zahl {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app #tab-panel-review .lr-gruppe-hinweis {
  margin: 0 0 var(--space-3) !important;
  max-width: 72ch;
  color: var(--text-secondary);
  font-size: var(--text-sm) !important;
}
html.bp-v2 body.bp-app .lr-karten {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 body.bp-app .lr-karte {
  max-width: none;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--panel);
}
html.bp-v2 body.bp-app .lr-karte-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}
html.bp-v2 body.bp-app .lr-karte-datei {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 body.bp-app .lr-karte-oeffnen {
  flex: none;
  color: var(--green-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
html.bp-v2 body.bp-app .lr-karte-oeffnen:hover {
  text-decoration: underline;
}
html.bp-v2 body.bp-app .lr-karte-meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .lr-karte-stand {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .lr-karte .lr-warnung {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-xs);
  background: var(--panel-muted);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
html.bp-v2 body.bp-app .lr-karte-tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
html.bp-v2 body.bp-app .lr-karte .lr-tun {
  display: inline-flex;
  align-items: center;
  /* Rolle kleiner Knopf (docs/ui-v2/REGELN.md) - bis 11.10.2026 34 px / 14 px Rand / 600 */
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app .lr-karte .lr-tun:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}
html.bp-v2 body.bp-app .lr-karte .lr-tun.lr-tun-haupt {
  border-color: var(--green-600);
  color: var(--green-800);
}
html.bp-v2 body.bp-app .lr-karte .lr-tun.lr-tun-haupt:hover {
  background: var(--hover-flaeche);
}
html.bp-v2 body.bp-app .lr-karte .lr-tun:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .lr-karte .lr-status {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
html.bp-v2 body.bp-app .lr-zuordnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
html.bp-v2 body.bp-app .lr-zuordnen[hidden],
html.bp-v2 body.bp-app .lr-notiz-feld[hidden] {
  display: none !important;
}
html.bp-v2 body.bp-app .lr-zuordnen select {
  min-width: min(100%, 22rem);
  height: var(--control-h-sm);   /* kleines Feld: steht in einer Zeile mit kleinen Knoepfen */
  min-height: var(--control-h-sm) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
}
html.bp-v2 body.bp-app .lr-notiz-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .lr-notiz-text {
  margin: 0;
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .lr-notiz-feld {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 18rem;
}
html.bp-v2 body.bp-app .lr-notiz-feld input {
  flex: 1 1 auto;
  height: var(--control-h-sm);   /* kleines Feld: steht in einer Zeile mit kleinen Knoepfen */
  min-height: var(--control-h-sm) !important;
  padding: 0 10px !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app .lr-karte .lr-tun {
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
  html.bp-v2 body.bp-app .lr-zuordnen select,
  html.bp-v2 body.bp-app .lr-notiz-feld input {
    width: 100%;
    height: 44px;
    min-height: 44px !important;
    font-size: 16px !important;
  }
}

/* Runde 4 (Henry, 23.09.2026): empfohlener Weg sofort sichtbar, linke Kante an allen Karten,
   Zuordnen gruen / Ablehnen rot, "N moegliche Belege" als Weg. */
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-jetzt {
  /* Ruhe 700, Hover 800 (siehe Prüfmodus oben): mit 800 in Ruhe tat der Knopf beim Überfahren nichts. */
  background: var(--fix-green-700) !important;
  border: 1px solid var(--fix-green-700) !important;
  color: var(--text-on-green, #f6fbf7) !important;
  border-radius: var(--radius-pill) !important;
  min-height: 2.5rem;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-jetzt:hover { background: var(--hover-primaer) !important; border-color: var(--hover-primaer) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-offene-zeile .s3-fall-haupt {
  background: var(--panel) !important; border: 1px solid var(--green-700) !important; color: var(--green-700) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-offene-zeile .s3-fall-haupt:hover { background: var(--hover-flaeche) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-offene-zeile,
html.bp-v2 body.bp-app #tab-panel-review .question-card {
  border-left: 4px solid var(--green-800) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-marke-link { color: var(--green-700); text-decoration: underline; }
html.bp-v2 body.bp-app #tab-panel-review .s3-marke-nachweis { color: var(--text-tertiary); font-weight: 500; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-zuordnen {
  background: var(--fix-green-800) !important; border-color: var(--fix-green-800) !important; color: var(--text-on-green, #f6fbf7) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-zuordnen.s3-neutral {
  background: var(--panel) !important; border-color: var(--green-700) !important; color: var(--green-700) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.reject {
  background: var(--panel) !important; color: var(--danger-strong) !important; border: 1px solid var(--danger) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.reject:hover {
  background: var(--danger-bg) !important; border-color: var(--danger-strong) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-fremd-hinweis.s3-stand-ok { color: var(--green-700); }
html.bp-v2 body.bp-app #tab-panel-review .s3-auswahl-passend { color: var(--green-700); }

/* MEETING 23.09.2026 (Emil und Henry) - die Vorschlagskarte.
   Knopfgewicht: Zuordnen und Ablehnen tragen die Karte. „Später“ ist ein Link rechts daneben, unterstrichen wie
   „Anderen Beleg verwenden“ (Henry: „da ist nicht mal mehr der Strich drunter“). Der Beleg ist ein kleiner Link in
   seiner Spalte, kein dritter gleich grosser Knopf. */
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.s3-spaeter {
  margin-left: auto; min-height: 0; padding: 0.35rem 0.15rem !important; border: 0 !important; background: transparent !important;
  color: var(--green-700) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 500;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.s3-spaeter:hover { background: transparent !important; color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-beleg-link {
  display: inline-block; margin-top: 0.4rem; padding: 0 !important; min-height: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; font-size: var(--fs-klein); font-weight: 500;
  color: var(--green-700) !important; text-decoration: underline; text-underline-offset: 3px;
}
/* Der Verwendungszweck unter der Buchung - klein, hoechstens zwei Zeilen. */
html.bp-v2 body.bp-app #tab-panel-review .s3-vergleich-zweck {
  margin-top: 0.35rem; font-size: var(--fs-klein); color: var(--text-secondary); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-vergleich-zweck-marke { color: var(--text-tertiary); }
/* Ablehnen als eigener Schritt: solange er offen ist, steht nur er unter dem Vergleich. */
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-ablehnen-offen > :is(.s3-entscheidung, .s3-trotzdem-hinweis, .s3-anderer-beleg,
  .s3-anderer-beleg-wahl, .gap-assign-panel, .s3-alt-buchungen, .s3-warum, .review-attach-panel) { display: none !important; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .reject-panel {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--panel-muted);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-ablehnen-titel { margin: 0 0 0.5rem; font-weight: 600; color: var(--text-primary); }
html.bp-v2 body.bp-app #tab-panel-review .s3-umhaengen { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
html.bp-v2 body.bp-app #tab-panel-review .s3-ablehnen-knoepfe { display: flex; gap: 1rem; align-items: center; margin-top: 0.7rem; }
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-ablehnen-knoepfe > button.s3-ablehnen-ja {
  background: var(--danger-strong) !important; border: 1px solid var(--danger-strong) !important; color: var(--text-on-green, #f6fbf7) !important;
  border-radius: var(--radius-pill) !important; min-height: var(--control-h) !important; padding: 0 1.1rem !important;
}
/* Die offene Rueckfrage ohne gruenen Strich (Emil: „was ist denn diese, dieser grüne Strich da?“). */
html.bp-v2 body.bp-app #tab-panel-review .question-card { border-left: 1px solid var(--border-subtle) !important; }
/* Der Verwendungszweck unter der offenen Buchung - hoechstens zwei Zeilen, der volle Text im Titel (Henry, 23.09.2026;
   seit 26.09.2026 zwei statt einer: in einer Zeile fiel genau „Rechnung 12/25“ dem Abschneiden zum Opfer). */
html.bp-v2 body.bp-app #tab-panel-review .s3-offene-zweck {
  margin-top: 0.15rem; font-size: var(--fs-klein); color: var(--text-secondary); max-width: 100%; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-offene-kopf { min-width: 0; }
/* DIE KENNUNG DER BUCHUNG (Henry, 26.09.2026): Rechnungs- oder Kundennummer als ruhige Marke neben dem Haendler - in
   der offenen Buchung, auf der Vorschlagskarte, bei den Rueckfragen und in der Liste der vollstaendigen. Sie bricht um
   und wird nie abgeschnitten. Daneben der Weg zum Kontoauszug als leiser Textlink. */
html.bp-v2 body.bp-app .s3-kennung {
  display: inline-block; max-width: 100%; margin-left: var(--space-2); padding: 0 6px;
  border: 1px solid var(--border-default); border-radius: 4px; background: var(--panel);
  color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; vertical-align: baseline;
}
html.bp-v2 body.bp-app .s3-kontoauszug-link {
  color: var(--green-700); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px;
}
html.bp-v2 body.bp-app .s3-kontoauszug-link:hover { color: var(--hover-akzent); }
html.bp-v2 body.bp-app .s3-bz-buchung {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); min-width: 0; font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .s3-bz-buchung > .s3-kennung { margin-left: 0; }
html.bp-v2 body.bp-app :is(.s3-vergleich-nr, .gap-assign-nr, .lr-rechnungsnr) { font-variant-numeric: tabular-nums; }
html.bp-v2 body.bp-app .lr-rechnungsnr { color: var(--text-secondary); font-size: var(--text-sm); }
/* Ein Weg gewaehlt (kein Beleg noetig, Eigenbeleg, Beleg auswaehlen): Empfehlung und Hauptknopf treten zurueck. */
html.bp-v2 body.bp-app #tab-panel-review .s3-weg-gewaehlt :is(.s3-empfehlung, .s3-fall-aktion) { display: none !important; }

/* Fortschritt ohne Ueberstand (Meeting 23.09.2026, Emil: „läuft über die Ränder hinaus“, Henry: „überall nur eckig“):
   die Leiste schneidet sicher ab (WebKit braucht `isolation` und die Maske), jedes Segment ist selbst rund. */
html.bp-v2 body.bp-app .s3-segmente {
  border: 0 !important;
  border-radius: var(--radius-pill, 999px) !important;
  overflow: hidden !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
html.bp-v2 body.bp-app .s3-seg {
  border: 0 !important;
  border-radius: var(--radius-pill, 999px) !important;
  box-sizing: border-box;
}
html.bp-v2 body.bp-app #questions-section > summary #archive-toggle { border-radius: var(--radius-pill) !important; }


/* ZUORDNEN GRUEN, ABLEHNEN ROT (Henry, 24.09.2026, Punkt 5): „Die beiden Hauptentscheidungen müssen sofort ins Auge
   fallen.“ Zuordnen ist BelegHero-gruen gefuellt - auch bei einem unsicheren Vorschlag -, Ablehnen rot gefuellt.
   „Trotzdem zuordnen“ (BelegHero sieht ein Gegensignal) bleibt bewusst ruhig; „Später“ und „Anderen Beleg verwenden“
   sind Links. Steht am Ende: gleich starke Regeln weiter oben verlieren. */
/* Das feste Gruen, nicht --green-700: das wird im Dunkelmodus hell, und weisse Schrift stand dann mit 1,77:1 darauf
   (gemessen 12.10.2026 an „Antworten“). */
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-zuordnen:not(.s3-trotzdem) {
  background: var(--fix-green-700, var(--green-700)) !important; border: 1px solid var(--fix-green-700, var(--green-700)) !important; color: var(--text-on-green, #f6fbf7) !important;
  font-weight: var(--weight-medium) !important;   /* wie jeder Knopf - die Farbe hebt ihn heraus, nicht das Gewicht */
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-zuordnen:not(.s3-trotzdem):hover {
  background: var(--hover-primaer) !important; border-color: var(--hover-primaer) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.primary.s3-trotzdem {
  background: var(--panel) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important;
  font-weight: var(--weight-medium, 500) !important;
}
/* Das feste Rot, nicht --danger: das wird im Dunkelmodus hell, und weisse Schrift stand dann mit 2,32:1 darauf
   (gemessen 12.10.2026 in WebKit an „Ablehnen“) - derselbe Fehler wie beim Gruen von „Antworten“. */
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.reject {
  background: var(--fix-danger, var(--danger)) !important; border: 1px solid var(--fix-danger, var(--danger)) !important; color: #fff !important;
}
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-entscheidung > button.reject:hover {
  background: var(--fix-danger-strong, var(--danger-strong)) !important; border-color: var(--fix-danger-strong, var(--danger-strong)) !important; color: #fff !important;
}

/* BELEG FEHLT NOCH (Punkt 6): dezente Hinweisfarbe an der Marke statt Empfehlungsgruen - keine gelbe Flaeche
   (Henry, 22.09.2026: der beige Hintergrund wirkte „wie ein Krankenschein“). */
html.bp-v2 body.bp-app .s3-empf-marke.s3-empf-fehlt,
html.bp-v2 body.bp-app .s3-fall-empfohlen .s3-empf-marke.s3-empf-fehlt { color: var(--warning-strong) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-empfehlung.s3-empfehlung-fehlt {
  background: var(--panel-muted); border-color: var(--border-subtle);
}

/* BUCHUNGSDETAILS (Punkt 4): aufklappbar, ruhig - Buchungstext, Verwendungszweck, Originalbetrag, Quelle. */
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails { margin-top: var(--space-2); font-size: var(--text-sm); }
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails > summary {
  cursor: pointer; width: fit-content; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px;
}
/* Die drei leisen Verweise der Karte antworten wie „Später“: die Farbe wird dunkler (gemessen 12.10.2026 - sie taten
   beim Überfahren nichts). */
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails > summary:hover,
html.bp-v2 body.bp-app #tab-panel-review .s3-warum > summary:hover,
html.bp-v2 body.bp-app #tab-panel-review .review-card .s3-beleg-link:hover { color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space-3); margin: var(--space-2) 0 0;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails dt { color: var(--text-secondary); }
html.bp-v2 body.bp-app #tab-panel-review .s3-buchungsdetails dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); }

/* ZUORDNUNG PRÜFEN (Punkt 15): feste Zuordnung mit Widerspruch - Hinweis in der Fortschrittskarte, Marke in der Liste. */
html.bp-v2 body.bp-app #tab-panel-review .s3-konflikt-hinweis { color: var(--danger-strong) !important; font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app #tab-panel-review .s3-bz-konflikt {
  display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--danger-bg); color: var(--danger-strong); font-weight: var(--weight-semibold);
}

/* EINNAHME / AUSGABE SICHTBAR + GELDEINGAENGE EINORDNEN (Henry, 28.09.2026) */
html.bp-v2 body.bp-app .s3-offene-betrag.plus, html.bp-v2 body.bp-app .s3-bz-betrag.plus { color: var(--green-700); }
html.bp-v2 body.bp-app .s3-marke.richtung { color: var(--text-tertiary); }
html.bp-v2 body.bp-app .s3-marke.richtung.plus { color: var(--green-700); }
html.bp-v2 body.bp-app #s3-geldeingaenge-section .s3-offene-zeile { border-left-color: #2b4a7a; }

/* HENRYS RUNDE 30.09.2026 (Meeting am Nachmittag)
   - Rückfragen im Stil der Vorschlagskarten: derselbe Kasten, dieselbe Kante, Buchung links, Frage rechts (mint).
   - Die Belegauswahl unter einer offenen Buchung hebt sich ab: eigene Fläche mit grüner Kante und „Schließen“.
   - Zwischen Anmerkung und „Speichern“ steht Luft (Geldeingang einordnen, Kein Beleg nötig). */
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-frage:not(.confirmation-card) {
  background: var(--panel) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 4px solid var(--green-800) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--space-4) var(--space-5) !important;
}
html.bp-v2 body.bp-app .s3-qualitaet-frage { background: var(--green-050); color: var(--green-700); border-color: var(--green-100); }
/* Emils Frage vom 23.09. („was ist dieser grüne Strich?“) galt der alten Rückfragekarte, deren Kante nichts hieß. Jetzt
   ist es dieselbe Kante wie auf jeder Vorschlagskarte (Henry, 22.09.: „eine Karte = ein Kandidat“). */
/* Die Bestätigung nach dem Antworten: ein ganzer, ruhig grüner Kasten mit dem Weg ins Archiv - vorher blieb von der
   alten Karte nur ein halber Rahmen (oben und links) stehen. */
html.bp-v2 body.bp-app #tab-panel-review .question-card.confirmation-card {
  background: var(--green-050) !important;
  border: 1px solid var(--green-200) !important;
  border-left: 4px solid var(--green-700) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: var(--space-4) calc(var(--space-5) + 1.8rem) var(--space-4) var(--space-5) !important;
  margin: 0 0 var(--space-3) !important;
}
html.bp-v2 body.bp-app #tab-panel-review .question-card.confirmation-card .meta { color: var(--green-800) !important; }
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-frage .s3-frage-antwort {
  width: 100%; min-height: 4.5rem; margin-top: var(--space-3); border-radius: var(--radius-md);
}
html.bp-v2 body.bp-app #tab-panel-review .review-card.s3-q-frage .s3-frage-upload {
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
}
html.bp-v2 body.bp-app .gap-assign-panel {
  background: var(--panel-muted) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--green-700) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card);
}
html.bp-v2 body.bp-app .gap-assign-titel { color: var(--text-primary); font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app .s3-kein-beleg-knoepfe { margin-top: var(--space-4) !important; }
html.bp-v2 body.bp-app .s3-suche { background: var(--panel-muted); border-color: var(--border-subtle); border-radius: var(--radius-md); }
html.bp-v2 body.bp-app .s3-suche-text { color: var(--text-primary); font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app .s3-suche-radar { color: var(--green-700); }


/* ==========================================================================
 * BELEGE OHNE BUCHUNG VON SELBST VORSCHLAGEN (Henry, 09.10.2026) - und die Abstände im Belegbestand darunter.
 *
 * NACH RASTER (Emil, 09.10.2026, zum ersten Handybild: „Hier ist das spacing falsch das muss immer und überall
 * passen“). Gemessen bei 390 px: die drei Antworten einer Zeile waren 44, 38 und 38 px hoch und standen in zwei
 * Zeilen mit 6 px Abstand; ein leeres Statusfeld machte den unteren Rand der Zeile 11 px dicker als den oberen; vor
 * „Ohne Bankbuchung“ fehlten die 8 px, die alle anderen Zeilen des Bestands trennen; „Bestand noch einmal durchgehen“
 * war wegen eines leeren Statusfelds 57 px hoch, der Link darunter 38.
 * Jetzt überall dieselben Schritte: 8 px zwischen Gleichem, 12 px zwischen Text und Antworten, eine Höhe je Zeile.
 * ========================================================================== */
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-offene-zeile { border-left-color: #2b4a7a; }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-kopf { cursor: default; align-items: center; gap: var(--space-3) var(--space-4); }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-offene-kopf { flex: 1 1 14rem; min-width: 0; }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts { flex: 0 0 auto; gap: var(--space-2); }
/* Drei Antworten, eine Höhe und eine Schrift - wie Hauptknopf und „Mehr“ an einer Buchung. */
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* Rolle Knopf (docs/ui-v2/REGELN.md) - bis 11.10.2026 36 px / 13 px */
  height: var(--control-h);
  min-height: var(--control-h) !important;
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  font-size: var(--text-base) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts > button.secondary { border-radius: var(--radius-pill) !important; font-weight: var(--weight-medium) !important; }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts > .nachschub-link { padding: 0 var(--space-2) !important; }
/* Ein leeres Statusfeld ist kein Flex-Kind mit eigenem Abstand. */
html.bp-v2 body.bp-app #s3-ohne-buchung-section .lr-status:empty,
html.bp-v2 body.bp-app #tab-panel-review .s3-durchgehen-zeile > .sub:empty { display: none !important; }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-ohne-buchung-satz { margin: var(--space-1) 0 var(--space-3); }
html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-bar-meldung { margin: 0 0 var(--space-3); }
/* „Ohne Bankbuchung“ steht hinter einer (meist leeren) Meldung - die Nachbarregel für 8 px griff dort nicht. */
html.bp-v2 body.bp-app #tab-panel-review .s3-material #s3-bar-schalter-zeile { margin-top: var(--space-2) !important; }
@media (max-width: 640px) {
  /* Am Handy: Text oben, darunter die zwei Antworten nebeneinander in einer Höhe, „Gehört nicht dazu“ mittig darunter. */
  html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-left: 0;
  }
  html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts > button { width: 100%; height: 44px; min-height: 44px !important; }
  html.bp-v2 body.bp-app #s3-ohne-buchung-section .s3-fall-rechts > .nachschub-link { grid-column: 1 / -1; height: var(--control-h-sm); min-height: var(--control-h-sm) !important; }
  /* „Ohne Bankbuchung – bar oder privat bezahlt“ bricht am Handy um und war damit 44 px hoch, ihre Nachbarn 38 - und
     der zweizeilige Name stieß oben und unten an den Rahmen. Alle Zeilen des Bestands sind dort 48 px hoch wie am
     Schreibtisch; mit engerem Zeilenabstand bleiben auch um zwei Zeilen 5 px Luft. */
  html.bp-v2 body.bp-app #tab-panel-review .s3-material-schalter .s3-bestand-zeile { min-height: 48px !important; line-height: 1.25 !important; }
  html.bp-v2 body.bp-app #tab-panel-review .s3-bestand-links { flex-direction: column; align-items: flex-start; gap: 0; }
  /* DAS „i“ BLEIBT AN SEINER ÜBERSCHRIFT. Füllte der Titel die Zeile, fiel der Info-Knopf allein in eine eigene Zeile
     darunter („1 von 3 Buchungen sind vollständig“, „5 Belege ohne Buchung gefunden“) - eine Leerzeile mit einem
     Kreis. Jetzt steht er rechts neben der ersten Zeile des Titels, und der Titel bricht in seiner Spalte um. */
  html.bp-v2 body.bp-app #tab-panel-review .feature-heading-zeile,
  html.bp-v2 body.bp-app #tab-panel-review .s3-fortschritt-titelzeile {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: var(--space-2);
  }
  html.bp-v2 body.bp-app #tab-panel-review .feature-heading-zeile > .feature-heading-title,
  html.bp-v2 body.bp-app #tab-panel-review .s3-fortschritt-titelzeile > .s3-fortschritt-zahl { flex: 0 1 auto; min-width: 0; }
  html.bp-v2 body.bp-app #tab-panel-review .feature-heading-zeile > .info-i,
  html.bp-v2 body.bp-app #tab-panel-review .s3-fortschritt-titelzeile > .info-i { flex: none; margin: 2px 0 0 !important; }
}

/* ROLLEN (12.10.2026): „Ablehnen“ wie jeder Knopf (stand in der Einzelansicht mit 39 px / 600 da), und die Suche der
 * Belegliste mit dem Finger in 16 px - die Regel dafuer griff erst unter 640 px, das Tablet blieb bei 14 px. */
html.bp-v2 body.bp-app #tab-panel-review button.reject {
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h) !important;
  font-weight: var(--weight-medium) !important;
}
@media (max-width: 900px), (pointer: coarse) {
  /* „Ändern“ an der Einstufung: das Wort bleibt klein, die Trefferfläche reicht darüber hinaus (wie beim „i“). */
  html.bp-v2 body.bp-app #tab-panel-review .einstufung-aendern::before { content: ""; position: absolute; inset: -12px -6px; }
  html.bp-v2 body.bp-app #tab-panel-review .s3-material details.task-accordion input.lr-search { font-size: 16px !important; }
}

/* KOMPAKTE BUCHUNGSKARTE (Henry, 12.10.2026: „deutlich kompakter und aufgeräumter … sofort erkennbar, was der Nutzer
   prüfen oder entscheiden muss“). Kopfzeile: Betrag, Händler, Datum und der Zuordnungsstatus („Vorschlag wartet“ /
   „Beleg fehlt“). Aufgeklappt zuerst EIN Block für den nächsten Schritt (Grund, Hauptknopf, „Anderer Weg …“), danach
   eingeklappt Buchungsdetails und Zuordnungsverlauf - der stand vorher als „Bisher: …“ oben in jeder Karte. */
html.bp-v2 body.bp-app #tab-panel-review .s3-marke-fehlt { color: var(--warning-strong); font-weight: var(--weight-medium); }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-schritt {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  background: var(--green-050);
}
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-schritt.fehlt { background: var(--panel-muted); border-color: var(--border-subtle); }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-schritt .s3-empfehlung { margin: 0; padding: 0; border: 0; background: none; }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-schritt .s3-fall-aktion { margin: 0; }
html.bp-v2 body.bp-app #tab-panel-review .s3-weg-gewaehlt .s3-fall-schritt { display: none !important; }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-fuss { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-3); }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-fuss > :is(.s3-buchungsdetails, .s3-fall-verlauf) { margin: 0; }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-verlauf { font-size: var(--text-sm); }
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-verlauf > summary {
  cursor: pointer; width: fit-content; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px;
}
html.bp-v2 body.bp-app #tab-panel-review .s3-fall-verlauf .s3-fall-protokoll {
  display: grid;
  gap: 2px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
/* „MEHR“ NUR AN DER ZUGEKLAPPTEN KARTE (Henry, 12.10.2026: der Knopf stand aufgeklappt doppelt - „Anderer Weg …“ am
   Hauptknopf öffnet dasselbe Menü, s3FallMenuUmschalten hängt es an den auslösenden Knopf). Nur in der Liste der
   offenen Buchungen: dort hat jede aufgeklappte Karte „Anderer Weg …“. Ist ein Weg gewählt (.s3-weg-gewaehlt), tritt
   der Schritt-Block samt „Anderer Weg …“ zurück - dann bleibt „Mehr“ der Weg ins Menü. */
html.bp-v2 body.bp-app #s3-offene-liste .s3-fall.offen:not(.s3-weg-gewaehlt) > .s3-fall-kopf > .s3-fall-rechts > .s3-menu {
  display: none !important;
}

/* ==== compat/seiten/projekt-schritt4.css ==== */
/* UI v2 – Bestandsseite „projekt-schritt4“ im neuen Aussehen.
   Alles bleibt der Bestand (Export, Pakete, Drive, Kanzlei-Link, offene Belege);
   hier nur Ordnung in Koepfen und Tabelle. */

/* Kartenkoepfe: Titel und Zusatz auf einer Grundlinie, Knopf rechts */
html.bp-v2 body.bp-app #tab-panel-overview .s4-pfeil svg {
  width: 16px;
  height: 16px;
}

html.bp-v2 body.bp-app #tab-panel-overview .s4-kontrolle-kopf,
html.bp-v2 body.bp-app #tab-panel-overview .s4-danach-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-kontrolle-kopf > .sub,
html.bp-v2 body.bp-app #tab-panel-overview .s4-danach-kopf > .sub {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-kontrolle-kopf > button { align-self: center; margin-left: auto; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-danach-kopf { align-items: center; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-danach-kopf > .sub { align-self: center; }

/* Offene Belege: feste Spalten nur, wenn die Karte breit genug ist (Containerabfrage –
   die Breite haengt an den Seitenleisten, nicht am Fenster). Schmal: Bloecke. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-tabelle { container: s4tab / inline-size; overflow-x: visible !important; }
/* BREIT: FESTE SPALTEN ALS GRID, NICHT ALS TABELLE (Emil, 23.09.2026: "overlap, nicht die volle Breite"). In der
   Mac-App (WebKit) loeste `table-layout: fixed; width: 100%` in diesem Container die Breite nicht auf: die Tabelle
   schrumpfte auf die Summe der festen Spalten (640px), die Haendlerspalte bekam nichts, "Händler" und "Betrag"
   lagen uebereinander, die Namen brachen Wort fuer Wort. Ein Grid je Zeile rechnet in jeder Engine gleich. */
@container s4tab (min-width: 820px) {
html.bp-v2 body.bp-app #gaps,
html.bp-v2 body.bp-app #gaps thead,
html.bp-v2 body.bp-app #gaps tbody { display: block; width: 100%; }
html.bp-v2 body.bp-app #gaps colgroup { display: none; }
html.bp-v2 body.bp-app #gaps tr {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 116px 132px minmax(300px, 340px);
  align-items: start;
}
html.bp-v2 body.bp-app #gaps th,
html.bp-v2 body.bp-app #gaps td { display: block; min-width: 0; padding-left: 12px !important; padding-right: 12px !important; }
html.bp-v2 body.bp-app #gaps th { align-self: stretch; }
html.bp-v2 body.bp-app #gaps td { align-self: stretch; padding-top: var(--space-4); padding-bottom: var(--space-4); }
html.bp-v2 body.bp-app #gaps td[colspan] { grid-column: 1 / -1; }
html.bp-v2 body.bp-app #gaps td.s4-datum,
html.bp-v2 body.bp-app #gaps td.s4-betrag { padding-top: calc(var(--space-4) + 9px); white-space: nowrap; }
html.bp-v2 body.bp-app #gaps td.s4-haendler { padding-top: calc(var(--space-4) + 6px); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
html.bp-v2 body.bp-app #gaps .s4-nebentext {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}
html.bp-v2 body.bp-app #gaps td:nth-child(4) { padding-top: calc(var(--space-4) + 7px); }
html.bp-v2 body.bp-app #gaps td.s4-handlung > .s3-fall-haupt,
html.bp-v2 body.bp-app #gaps td.s4-handlung > .s4-klaeren,
html.bp-v2 body.bp-app #gaps td.s4-handlung > .s3-menu { display: inline-flex; vertical-align: middle; margin: 0 var(--space-2) var(--space-2) 0; }
html.bp-v2 body.bp-app #gaps td.s4-handlung > .s4-kein-beleg { vertical-align: middle; }
html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-notiz-zeile { display: block; margin: 0; }
html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-notiz { width: 100%; height: var(--control-h); }

}

/* "In Schritt 3 klären" wie der Zeilenknopf in Schritt 3: gruener Umriss, gruene Schrift (Emil, 23.09.2026:
   Handlungen sind gruen; gefuellt bleibt der eine Hauptknopf je Karte, sonst stuenden 17 volle Knoepfe untereinander). */
html.bp-v2 body.bp-app #gaps .s4-klaeren {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h-sm); padding: 0 16px !important;
  background: var(--panel) !important; border: 1px solid var(--green-700) !important; color: var(--green-700) !important;
  border-radius: var(--radius-pill) !important; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  box-shadow: none !important;
}
html.bp-v2 body.bp-app #gaps .s4-klaeren:hover { background: var(--hover-flaeche) !important; }

/* Aufklappbare Koepfe reagieren beim Ueberfahren */
html.bp-v2 body.bp-app #tab-panel-overview details > summary {
  border-radius: var(--radius-sm, 8px);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-overview details > summary:hover { color: var(--hover-akzent); background: var(--hover-flaeche); }
/* Google-Knopf: weisse Flaeche mit dunkler Schrift, auch beim Ueberfahren */
html.bp-v2 body.bp-app a.bp-google-verbinden:hover {
  border-color: var(--hover-akzent) !important;
  background: var(--hover-flaeche) !important;
  color: var(--hover-akzent) !important;
}

/* Schmale Karte: jede offene Buchung als Block statt seitlich scrollender Tabelle */
@container s4tab (max-width: 819.98px) {
  html.bp-v2 body.bp-app #gaps,
  html.bp-v2 body.bp-app #gaps tbody { display: block; width: 100%; }
  html.bp-v2 body.bp-app #gaps thead,
  html.bp-v2 body.bp-app #gaps colgroup { display: none; }
  html.bp-v2 body.bp-app #gaps tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--divider);
  }
  html.bp-v2 body.bp-app #gaps td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; }
  html.bp-v2 body.bp-app #gaps td.s4-haendler { grid-column: 1; grid-row: 1; font-weight: var(--weight-semibold); }
  html.bp-v2 body.bp-app #gaps td.s4-haendler .s4-nebentext { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-regular); }
  html.bp-v2 body.bp-app #gaps td.s4-betrag { grid-column: 2; grid-row: 1; text-align: right; font-weight: var(--weight-semibold); white-space: nowrap; }
  html.bp-v2 body.bp-app #gaps td.s4-datum { grid-column: 1; grid-row: 2; color: var(--text-secondary); font-size: var(--text-sm); }
  html.bp-v2 body.bp-app #gaps td:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  html.bp-v2 body.bp-app #gaps td.s4-handlung { grid-column: 1 / -1; grid-row: 3; margin-top: var(--space-3); }
  html.bp-v2 body.bp-app #gaps td.s4-handlung > .s3-fall-haupt,
  html.bp-v2 body.bp-app #gaps td.s4-handlung > .s3-menu { display: inline-flex; margin: 0 var(--space-2) var(--space-2) 0; }
  html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-notiz { width: 100%; }
  html.bp-v2 body.bp-app #gaps td[colspan] { grid-column: 1 / -1; }
}

/* „Die Lücken bleiben im Export sichtbar.“ stand je nach Breite neben oder
 * unter den Knöpfen, und darunter um 12px eingerückt (Bestandsregel
 * `button + .sub`). Jetzt immer darunter, bündig mit dem ersten Knopf. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-naechstes > .s4-naechstes-hinweis {
  flex: 1 0 100%;
  max-width: none;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ZEITRAUM-UMSCHALTER (Monat · Quartal · Frei) als eine Pille: die aktive Wahl
 * war ein eckiger Kasten mit Innenlinie in einer anders gerundeten Hülle. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art {
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--panel-muted) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-art {
  display: inline-flex;
  align-items: center;
  height: 32px !important;
  padding: 0 var(--space-4) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-art:not(.aktiv):hover {
  color: var(--hover-akzent) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-art.aktiv {
  background: var(--panel) !important;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.1), 0 0 0 1px var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
/* Sobald der Schieber misst, traegt ER die Pille - der Knopf gibt sie ab.
   Eigene Zeile wegen der `!important` darueber (components.css reicht hier
   nicht). Der Schieber selbst nimmt die Linie dieser Seite. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art.hat-schieber .s4-art.aktiv {
  background: transparent !important;
  box-shadow: none !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art.hat-schieber::before {
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.1), 0 0 0 1px var(--border-subtle);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-art:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

/* NACH DER ÜBERGABE: Der Kopf ist die ganze obere Zeile der Karte. Beim
 * Überfahren färbte sich bisher nur ein enger grauer Kasten direkt um den
 * Text. Darunter drei Abschnitte mit gleichem Abstand; „Noch nichts
 * übergeben.“ steht als Satz in der Liste statt mittig in einer leeren Fläche. */
html.bp-v2 body.bp-app #tab-panel-overview details#s4-danach {
  padding: 0 !important;
  overflow: hidden;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf {
  margin: 0 !important;
  padding: var(--space-5) var(--space-6) !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach[open] > summary.s4-danach-kopf {
  border-bottom-color: var(--divider) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf:hover {
  background: var(--hover-flaeche) !important;
  color: inherit !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary ~ * {
  margin: 0 !important;
  padding: var(--space-5) var(--space-6) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile {
  gap: var(--space-6) !important;
  border-top: 1px solid var(--divider) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-verlauf .s4-untertitel {
  margin: 0 0 var(--space-1) !important;
  /* 14 wie jeder Abschnittstitel in einer Karte (regeln.css, Abschnitt 12) - stand als einziger mit 15 da. */
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-verlauf-leer {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  text-align: left !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-zeile-text > strong,
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-schalter {
  font-size: var(--text-md) !important;
  font-weight: var(--weight-semibold) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-schalter {
  gap: var(--space-2) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-schalter input {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--green-700);
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-zeile-text .hint {
  max-width: 64ch;
  margin: var(--space-1) 0 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.55;
}
/* Der Zustand ist ein <span class="sub">: die Bestandsregel für .sub gab ihm
 * 32px Abstand nach unten, darunter klaffte die Zeile. */
html.bp-v2 body.bp-app #tab-panel-overview #dauerauftrag-status {
  display: block;
  margin: var(--space-2) 0 0 !important;
  color: var(--text-tertiary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5;
}
html.bp-v2 body.bp-app #tab-panel-overview #dauerauftrag-status:empty {
  display: none;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-rhythmus {
  flex: none;
  min-width: 160px;
  min-height: var(--control-h);
  border-radius: var(--radius-pill) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .abschluss-block button,
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-abgeschlossen button {
  white-space: nowrap;
}

@media (max-width: 720px) {
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf,
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary ~ * {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile {
    gap: var(--space-3) !important;
  }
  /* Der Zusatz bricht um; der Pfeil rutschte dabei als eigene Zeile nach
   * links unten. Titel und Zusatz links untereinander, Pfeil rechts. */
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
  }
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf > * {
    grid-column: 1;
  }
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-rhythmus,
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .abschluss-block,
  html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .abschluss-block button {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FINALER SCHRITT-4-PASS (Henry, 19.09.2026): Bereitschaft zuerst, EINE Hauptaktion,
   Nebenwege zugeklappt, schlanke Kontrollliste, Uebergabeverlauf mit Versionen.
   ───────────────────────────────────────────────────────────────────────────── */
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > p { margin: 0; max-width: 72ch; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > p:empty,
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahlen:empty { display: none; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 36rem;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.25;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl b {
  color: var(--text-primary);
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.gut b { color: var(--green-700); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.pruefen:not(.null) b { color: var(--dunkel-warnung, #8a5a00); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.offen:not(.null) b { color: var(--dunkel-gefahr, #a8432e); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.null b { color: var(--text-tertiary); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit-satz { color: var(--text-primary); font-size: var(--text-md); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit-satz b { font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-cta > .primary { min-height: 44px; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit .s4-status:empty,
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit .s4-folge:empty { display: none; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit .s4-folge,
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit .s4-status { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-hinweis { margin: var(--space-2) 0 0; }
/* Direkt in die Buchhaltung des Kunden (04.10.2026, app/buchhaltung.py): je Buchhaltung eine Zeile mit Knopf. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-buchhaltung {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-buchhaltung[hidden] { display: none; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-titel { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-liste { display: grid; gap: var(--space-2); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-text .sub { color: var(--text-secondary); font-size: var(--text-sm); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-meldung { margin: 0; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bh-meldung:empty { display: none; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-ergebnis textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-sm); }

/* Nebenwege: eine Karte mit Ueberschrift im Aufklapper */
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  cursor: pointer;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary .section-title { margin: 0; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bericht {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--panel-muted);
  font: inherit;
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-bericht:empty { display: none; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-datev-nummern {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-datev-nummern label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--text-secondary); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-datev-nummern input { width: 9rem; }

/* Kontrollliste: eine Handlung je Zeile.
   DIE ZELLE BLEIBT EINE TABELLENZELLE (Emil, UI-Pass 22.09.2026: „hier verrutschen
   die zeilen irgendwie ganz komisch“). Hier stand `display: flex` direkt an der
   Zelle - spaeter im Blatt als die Regel fuer breite Karten und damit auch dort
   wirksam: die Zelle loeste sich aus dem Zeilenraster, Trennlinie und Hover
   endeten vor der letzten Spalte, die Knoepfe sassen versetzt. Jetzt ordnet ein
   innerer Behaelter die Knoepfe. */
html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-handlung-innen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
html.bp-v2 body.bp-app #gaps td.s4-handlung .s3-kein-beleg,
html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-notiz-zeile { flex: 1 0 100%; }
html.bp-v2 body.bp-app #gaps .s4-marken { display: block; margin-top: 2px; }
/* Buchungskonto je Zeile (30.09.2026, app/kontierung.py) */
html.bp-v2 body.bp-app #gaps .s4-konto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-top: var(--space-1); }
html.bp-v2 body.bp-app #gaps .s4-konto-feld {
  width: 6.5em; height: 28px; padding: 0 var(--space-2); box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font: inherit; font-variant-numeric: tabular-nums; color: var(--text-primary); background: transparent;
}

/* Verlauf */
html.bp-v2 body.bp-app #tab-panel-overview .s4-projektstatus { margin: 0 0 var(--space-3); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-link .s4-verlauf-adresse { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-xs); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-link.ist-zurueckgezogen { opacity: .6; }
@media (max-width: 560px) {
  html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl { padding: var(--space-2) var(--space-3); }
  html.bp-v2 body.bp-app #tab-panel-overview .s4-cta > .primary { width: 100%; }
}
/* Der Aufklapper IST jetzt die Karte: kein eigener Trennstrich und kein Abstand darueber. */
html.bp-v2 body.bp-app #tab-panel-overview #datev-export-section > #s4-andere-wege { margin-top: 0; padding-top: 0; border-top: 0; }
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary { min-height: 0; }
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege[open] > summary { margin-bottom: var(--space-4); }

/* Verlauf: Datum oben buendig, Versionsmarke in der Titelzeile */
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-zeile { align-items: start; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-text { display: block; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-text > b { margin-right: var(--space-2); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-text > .s3-marke { display: inline-block; vertical-align: baseline; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-verlauf-text > .sub { display: block; margin: 2px 0 0; }
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary > .sub { margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════════
   EMILS BOARD (22.09.2026): "Gesamte Seite 4 muss überarbeitet werden. Muss deutlich einfacher
   und nutzerfreundlicher gestaltet sein" und "Grüne Markierung komisch".
   Alle IDs, Knoepfe und Ablaeufe bleiben; geaendert werden Ordnung, Gewicht und Dichte:
   Zeitraum in einer Zeile, zuerst der Satz, die Zahlen als ruhige Legende wie in Schritt 3,
   genau eine gefuellte Handlung, Nebenwege als saubere Liste, Drive in einem Satz.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Punkt 1: kein getoentes Band beim Ueberfahren der Klappkoepfe - der Titel faerbt sich, sonst nichts. */
html.bp-v2 body.bp-app #tab-panel-overview details > summary:hover { background: transparent !important; color: var(--hover-akzent) !important; }
html.bp-v2 body.bp-app #tab-panel-overview details > summary:hover .section-title { color: var(--hover-akzent); }
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > summary.s4-danach-kopf:hover { background: transparent !important; }

/* Kopf: EINE Zeile - "Zeitraum", Pfeile mit Datum, rechts die Art */
html.bp-v2 body.bp-app #tab-panel-overview .s4-kopfzeile { align-items: center; gap: var(--space-3) var(--space-4); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-kopf-titel {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-kopfzeile > .s4-zeitraum { flex: 1 1 auto; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art { margin-left: auto !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-name { min-width: 0; font-size: var(--text-lg, 1.125rem); font-weight: var(--weight-semibold); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-frei { margin: var(--space-4) 0 0 !important; }

/* Bereitschaft: zuerst der Satz, dann die Zahlen, dann die eine Handlung */
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit { gap: var(--space-3); margin-top: var(--space-5); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-bereit-satz { order: 1; font-size: var(--text-lg, 1.125rem); line-height: 1.45; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-zahlen { order: 2; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-lage-projekt { order: 3; margin-top: calc(-1 * var(--space-1)); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-konten { order: 3; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-suche { order: 4; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-neu-seit { order: 5; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-upgrade { order: 6; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-cta { order: 7; margin-top: var(--space-2); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-folge { order: 8; max-width: 64ch; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-status { order: 9; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-ergebnis { order: 10; }
/* Direkt in die Buchhaltung: nach der einen Handlung und ihrem Ergebnis - ein zweiter Weg, nicht der erste Blick. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-bereit > .s4-buchhaltung { order: 11; margin-top: var(--space-2); }

/* Die drei Zahlen als Legende (dieselben Toene wie der Balken in Schritt 3), keine Kacheln */
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahlen {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5) !important;
  max-width: none !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-2) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--neutral-border);
  border-radius: 3px;
  background: var(--neutral-bg);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.gut::before { border-color: var(--green-800); background: var(--green-800); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.pruefen::before { border-color: var(--green-300); background: var(--green-300); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl b {
  color: var(--text-primary) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-semibold) !important;
}

/* Nebenwege: Kopf mit Pfeil rechts, Liste mit gleich breiten Knoepfen in einer Spalte */
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary { align-items: center !important; }
html.bp-v2 body.bp-app #tab-panel-overview #s4-andere-wege > summary::after { margin-left: auto; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste { max-width: 60rem; margin-top: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg { gap: var(--space-2) var(--space-6) !important; padding: var(--space-4) 0 !important; border-top-color: var(--divider) !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg:first-child { padding-top: 0 !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg-text b { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg-text .sub { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg > button.primary,
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-gruppe > button.primary { min-width: 13.5rem; justify-content: center; }
html.bp-v2 body.bp-app #tab-panel-overview details.s4-wege .s4-voraussetzungen > summary { width: fit-content; }

/* Google Drive: Titel, die Lage in einem Satz, die Handlung - die Erklaerung steht unter "Einzelheiten" */
html.bp-v2 body.bp-app #tab-panel-overview .s4-drive > .bp-kartenkopf { margin-bottom: var(--space-2) !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-drive-lage { margin: 0 0 var(--space-3) !important; color: var(--text-secondary) !important; font-size: var(--text-sm) !important; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-drive-erklaerung { margin: 0 0 var(--space-3) !important; max-width: 72ch; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-drive-einzelheiten > summary { width: fit-content; }

@media (max-width: 720px) {
  html.bp-v2 body.bp-app #tab-panel-overview .s4-zeitraum-art { margin-left: 0 !important; }
  html.bp-v2 body.bp-app #tab-panel-overview .s4-weg > button.primary,
  html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-gruppe > button.primary { min-width: 0; }
}

/* ZU KLAEREN, BREITE TABELLE (UI-Pass 22.09.2026, Punkt 22): alle Spalten
 * senkrecht mittig statt oben mit Einzelversatz je Spalte; gleiche Zeilenhoehe;
 * Hover und Trennlinie ueber die ganze Zeile. Die schmale Kartenform (Container
 * unter 820 px) bleibt, wie sie ist. */
@container s4tab (min-width: 820px) {
  /* Seit dem Grid (23.09.2026): senkrecht mittig ueber eine Spalte je Zelle, gestapelt wie bisher. */
  html.bp-v2 body.bp-app #gaps td,
  html.bp-v2 body.bp-app #gaps td.s4-datum,
  html.bp-v2 body.bp-app #gaps td.s4-betrag,
  html.bp-v2 body.bp-app #gaps td.s4-haendler,
  html.bp-v2 body.bp-app #gaps td:nth-child(4) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  html.bp-v2 body.bp-app #gaps td:nth-child(4) { align-items: flex-start; }
  html.bp-v2 body.bp-app #gaps th { display: flex; align-items: center; }
  html.bp-v2 body.bp-app #gaps th.s4-th-betrag { justify-content: flex-end; }
  html.bp-v2 body.bp-app #gaps tbody tr {
    min-height: 64px;
  }
  html.bp-v2 body.bp-app #gaps tbody tr > td {
    border-bottom: 1px solid var(--divider);
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  html.bp-v2 body.bp-app #gaps tbody tr:hover > td {
    background: var(--hover-flaeche);
  }
  html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-handlung-innen > .s4-klaeren,
  html.bp-v2 body.bp-app #gaps td.s4-handlung .s4-handlung-innen > .s4-kein-beleg {
    margin: 0 !important;
  }
}

/* WEITERE UEBERGABEWEGE ALS KACHELN (Emil, UI-Pass 22.09.2026, Punkt 21: „der
 * bereich holt mich noch nicht ab. sieht inkonsistent und komisch aus“). Statt
 * einer Liste ueber die halbe Breite ein Raster ueber die volle Breite (zwei bis
 * drei Spalten), jede Kachel gleich hoch: Titel, ein Satz, die Handlung unten.
 * Alle Knoepfe im selben zweitrangigen Stil. Kennungen, Knopfarten und
 * Reihenfolge bleiben. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-3) !important;
  max-width: none !important;
  margin: var(--space-2) 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste > .s4-weg {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3) !important;
  max-width: none;
  margin: 0 !important;
  padding: var(--space-4) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste > .s4-weg:first-child {
  padding-top: var(--space-4) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste > .s4-weg[style*="display: none"] {
  display: none !important;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg-text {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg-text b {
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
}
/* HANDLUNGEN SIND GRUEN (Emil, 23.09.2026: "alle aktionsknöpfe wie in google drive hochladen oder ähnliche müssen
   auch grün sein wie der knopf" - DATEV-Paket erstellen). Die Kacheln behalten Groesse und Lage; die Farbe kommt aus
   dem gefuellten Hauptknopf (.primary), nicht mehr aus einem weissen Nebenstil. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg > button.primary,
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-gruppe > button.primary {
  align-self: flex-start;
  min-width: 0 !important;
  /* Rolle Knopf (docs/ui-v2/REGELN.md) - bis 11.10.2026 13 px / 600 */
  min-height: var(--control-h) !important;
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
}
/* Abhol-Link: die Laufzeit steht ueber dem Knopf. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste .s4-wege-gruppe {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-laufzeit {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
/* Die Auswahl ist ein Feld wie jedes andere (Höhe, Schrift, Radius der Rolle). Sie stand mit 32 px / 13 px / 12 px
   da - gemessen erst am 12.10.2026, als ein Lauf den Zustand „Übergabe erstellt“ traf: vorher zeigt die Seite die
   Zeile nicht, und kein Lauf sah sie. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-laufzeit select {
  width: auto;
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-weg-status:empty {
  display: none;
}
/* „Was die Kanzlei damit macht“ als Fussnote unter dem Raster. */
html.bp-v2 body.bp-app #tab-panel-overview details.s4-wege .s4-voraussetzungen {
  margin-top: var(--space-4) !important;
}
html.bp-v2 body.bp-app #tab-panel-overview details.s4-wege .s4-voraussetzungen > summary {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}
@media (max-width: 640px) {
  html.bp-v2 body.bp-app #tab-panel-overview .s4-weg > button.primary,
  html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-gruppe > button.primary {
    align-self: stretch;
    justify-content: center;
    min-height: 44px !important;
  }
  html.bp-v2 body.bp-app #tab-panel-overview .s4-wege-liste .s4-wege-gruppe {
    align-items: stretch;
  }
}

/* NACH DER UEBERGABE, KUERZER (Emil, UI-Pass 22.09.2026, Punkt 23): je ein
 * Satz, das Ausfuehrliche hinter „Mehr erfahren“. Auswahl und Knopf rechts auf
 * Hoehe des Titels. */
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-kurz {
  margin: var(--space-1) 0 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-mehr {
  margin-top: var(--space-1);
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-mehr > summary {
  display: inline-flex;
  width: auto;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--green-700) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-mehr > summary:hover {
  text-decoration: underline;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach .s4-mehr > .hint {
  margin: var(--space-2) 0 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach #dauerauftrag-status:not(:empty) {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile {
  align-items: flex-start !important;
}
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile > .s4-rhythmus,
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile > .abschluss-block,
html.bp-v2 body.bp-app #tab-panel-overview #s4-danach > .s4-zeile > .s4-abgeschlossen {
  align-self: flex-start;
  margin-top: 0 !important;
}

/* GELDEINGAENGE EINORDNEN (Henry, 28.09.2026): vierter Zustand in Kopf und Kontrollliste, ruhiges Blau. */
html.bp-v2 body.bp-app #tab-panel-overview .badge.einordnen { background: #e8eef8; color: #2b4a7a; }
html.bp-v2 body.bp-app #tab-panel-overview .badge.einordnen::before { background: #2b4a7a; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-zahl.einordnen b { color: #2b4a7a; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-betrag.plus { color: var(--green-700); }

/* Konten lückenlos (Emil, 28.09.2026, Bank-Idee 7): der Haken leise und grün, die Lücke als Hinweis mit dem Weg zu
   Schritt 1. Steht nach der Lage, vor Suche und Nachlieferung (order 3 wie .s4-lage-projekt, danach im Dokument). */
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten > p { margin: 0; max-width: 72ch; }
/* Eigene Klassen statt .sub: die alte .sub-Regel setzt 2rem Abstand darunter und ihr Grau mit !important. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-ok { color: var(--green-700); font-size: var(--text-sm); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-teil,
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-rat { color: var(--text-secondary); font-size: var(--text-sm); }
/* Geprüfte Konten als Liste (06.10.2026): ein Haken je Konto, der geprüfte Bereich leise dahinter, der Grund fürs Fehlende
   einmal darunter. Vorher stand je Konto der ganze Satz. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-teil { display: grid; gap: var(--space-2); max-width: 72ch; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konto-zeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 0; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konto-haken { color: var(--green-700); font-weight: var(--weight-medium); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konto-name { color: var(--text-primary); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konto-stand { color: var(--text-secondary); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konto-stand::before { content: "·"; margin-right: var(--space-2); }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-fuss { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-luecke .bp-hinweis-text p { margin: var(--space-1) 0 0; }
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-liste {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: 1.1rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app #tab-panel-overview .s4-konten-liste li { max-width: none; }

/* ZEITRAUM-PFEILE: Rolle Symbolknopf (docs/ui-v2/REGELN.md). app-neu.css gibt 36 x 36 fest; am Telefon zog die
   Mindesthoehe den Knopf auf 44 hoch, die Breite blieb 36 - ein Oval. */
html.bp-v2 body.bp-app .s4-pfeil {
  width: var(--icon-btn);
  height: var(--icon-btn);
}

/* ROLLE FELD fuer Beginn und Ende der Reise (datetime-local): standen mit dem Aussehen des Browsers da. */
html.bp-v2 body.bp-app #tab-panel-overview input[type="datetime-local"] {
  box-sizing: border-box;
  height: var(--control-h) !important;
  min-height: 0 !important;
  padding: 0 var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-base) !important;
}
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.bp-app #tab-panel-overview input[type="datetime-local"] { font-size: 16px !important; }
}

/* REISE OHNE ZAHLUNG (und die Reise an einer Buchung): das Formular lief am Telefon rechts aus seiner Karte - die Felder
 * waren abgeschnitten (gesehen 12.10.2026 bei 390 px). Zwei Zeitfelder nebeneinander sind breiter als die Karte, und ein
 * Rasterfeld schrumpft nicht unter seinen Inhalt, solange `min-width` auf `auto` steht; das zog das ganze Formular mit.
 * Die Spalten stehen als style-Attribut im Markup (index.html) - deshalb der Attribut-Selektor und !important. */
html.bp-v2 body.bp-app #tab-panel-overview :is(.s4-rk, [id^="rk-"]) :is(div, label),
html.bp-v2 body.bp-app #tab-panel-overview label:has(> input[id^="rk-"]) { min-width: 0; }
html.bp-v2 body.bp-app #tab-panel-overview input[id^="rk-"] { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  html.bp-v2 body.bp-app #tab-panel-overview div[style*="grid-template-columns"]:has(> label > input[id^="rk-"]) {
    grid-template-columns: 1fr !important;
  }
}
/* „Reisekosten abrechnen“ ist die Handlung dieses Formulars und stand als kleines eckiges Kaestchen neben dem runden
 * „Abbrechen“. Nur hier: `.gap-ack-btn` traegt in Schritt 3 andere Aufgaben und bleibt dort, wie es ist. */
html.bp-v2 body.bp-app #tab-panel-overview .s4-rk .gap-ack-btn {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* ==== compat/seiten/belege.css ==== */
/* UI v2 – Bestandsseite „belege“ im neuen Aussehen (eigene Welle). */

/* ==== compat/seiten/rechnungen.css ==== */
/* UI v2 – Rechnungen im Bestand zuerst.
 *
 * Der Rechnungsablauf bleibt in invoices.html: Positionen, Vorschau, PDF,
 * Entwürfe und Zahlungseingang teilen dort ihren Zustand. Diese Regeln geben
 * ihm nur den Rahmen der v2-Hülle, ohne die Bedienung nachzubauen.
 */

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .main-content {
  max-width: 1240px;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .sheet-kopf {
  align-items: flex-end;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .sheet-titel {
  align-items: center;
  gap: var(--space-2);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .hero-title {
  color: var(--text-primary);
  font: 500 var(--text-3xl)/1.15 var(--font-sans);
  letter-spacing: -0.01em;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .hero-sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #rechnungen-zahl {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .primary-btn,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .secondary-btn,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .ghost-btn,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .row-action-btn,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .pdf-oeffnen {
  min-height: var(--control-h);
  border-radius: var(--radius-pill);
  font: 500 var(--text-sm)/1 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #erfassen-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .panel,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-create-panel,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .profile-warning {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .profile-warning {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .profile-warning a {
  color: var(--green-800);
  font-weight: 600;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-panel {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-kopf {
  align-items: center;
  gap: var(--space-4);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-gross {
  color: var(--text-primary);
  font: 400 var(--text-3xl)/1.1 var(--font-sans);
  letter-spacing: -0.02em;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-klein,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-meldung {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-list-panel {
  padding: var(--space-3) var(--space-5) var(--space-2);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .bp-filterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .bp-filter {
  /* Rolle Filterchip wie .v2-chip (docs/ui-v2/REGELN.md) - bis 11.10.2026 12 px Schrift und 14 px Rand */
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--panel-muted);
  color: var(--text-secondary);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .bp-filter:hover,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .bp-filter:focus-visible {
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .bp-filter.aktiv {
  background: var(--fix-green-700);
  color: var(--text-on-green);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table {
  width: 100%;
  border-collapse: collapse;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table th {
  padding: var(--space-3) var(--space-2);
  color: var(--text-secondary);
  font: 500 var(--text-xs)/1.3 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table td {
  padding: var(--space-3) var(--space-2);
  border-top-color: var(--border-subtle);
  color: var(--text-primary);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table tbody tr[data-id] {
  transition: background-color var(--dur-fast) var(--ease-out);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table tbody tr[data-id]:hover,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table tbody tr[data-id]:focus-visible {
  background: var(--hover-flaeche);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .empty-note {
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
  text-align: center;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-create-panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-create-panel > h2 {
  margin: 0;
  color: var(--text-primary);
  font: 500 var(--text-xl)/1.25 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-create-panel > .panel-hint {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--text-secondary);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .create-split {
  gap: var(--space-5);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .create-form.panel,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .vorschau-kasten {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: none;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .template-card,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .line-item,
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .totals-box {
  border-color: var(--border-subtle);
  box-shadow: none;
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .product-picker {
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .rd-huelle {
  padding: var(--space-4);
}

html.bp-v2 body.v2-shell[data-v2-page="invoices"] .rd-dialog {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}

/* Die Bestandsliste wird ab Tablet-Hochformat zur kompakten Leseliste.
 * Die Markup-Reihenfolge bleibt: Die vorhandene Grid-Regel ordnet sie nur
 * für schmale Bildschirme neu. So bleiben Zeilenklick, PDF, Kopie und Storno
 * an derselben Stelle bedienbar, ohne eine leere Aktionszeile zu erzeugen. */
/* Rechnung erstellen: die Vorschau bleibt beim langen Formular sichtbar.
   Ist das Blatt hoeher als das Fenster, rollt nur diese Spalte; der
   PDF-Knopf bleibt erreichbar. Unter 52.2222rem Kartenbreite stapelt der
   Bestand die Spalten, dann ist Kleben ueberfluessig. */
@container karte (min-width: 52.2222rem) {
  /* DAS FORMULAR BEKOMMT DEN GRÖSSEREN ANTEIL (Emil, 11.10.2026; Codex U05). Bis dahin teilten sich beide die Karte
     hälftig - bei 1280 px 464 px Formular neben 474 px Vorschau, und das Formular war gut viermal so hoch wie das
     Blatt. Drei zu zwei: gemessen 563 und 375 px. Das Blatt bleibt lesbar (und „Größer ansehen“ gibt es), die
     Felder bekommen Platz. */
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .create-form {
    flex: 3 1 30rem;
  }
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .create-preview-wrap {
    flex: 2 1 20rem;
    max-width: 34rem;
    position: sticky;
    top: var(--a4);
    max-height: calc(100vh - var(--topbar-h) - 2 * var(--a4));
    height: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 900px) {
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table tr {
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3) 0;
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table td {
    border: 0;
    padding: 0;
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table td[data-spalte="Status"],
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table td.faellig {
    padding-top: var(--space-1);
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table td.zeilenaktionen {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table .row-actions {
    gap: var(--space-2);
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table .bp-zeilenknopf {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 720px) {
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .sheet-kopf {
    align-items: stretch;
    flex-direction: column;
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] #erfassen-schalter {
    justify-content: center;
    width: 100%;
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-kopf {
    align-items: stretch;
    flex-direction: column;
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-list-panel,
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] #invoice-create-panel,
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .op-panel {
    padding: var(--space-4);
  }

  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .invoice-table,
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] .line-items-scroll {
    display: block;
    overflow-x: auto;
  }
}

/* Handy: die offene Summe bricht nicht mehr um („8.898,82“ / „€“) */
html.bp-v2 body.bp-app #op-summe { white-space: nowrap; }
@media (max-width: 620px) {
  html.bp-v2 body.bp-app #op-summe { font-size: var(--text-3xl) !important; line-height: 1.1; }
}

/* Neue Rechnung: das Formular ist schon in der Karte – kein zweiter Kasten darin
 * (am Handy war das Formular eine Karte in der Karte mit doppeltem Rand). */
html.bp-v2 body.bp-app #invoice-create-panel #invoice-form-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Symbol-Knoepfe: allgemeine Gestalt in compat/legacy-components.css (UI-Pass 22.09.2026). */
html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table td.zeilenaktionen {
  padding-left: var(--space-5);
}
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.v2-shell[data-v2-page="invoices"] table.invoice-table .bp-zeilenknopf {
    width: 44px;
    height: 44px;
  }
}

/* RECHNUNGSFENSTER (Emil, UI-Pass 22.09.2026: „spacings teilweise
 * inconsistent“). EINE Art Abschnittstitel, feste Abstaende (8 px Titel → Feld,
 * 24 px zwischen Abschnitten), gleich hohe Felder in der Hausschrift, Notiz
 * ohne Zieh-Griff, kein Leerraum ueber der Fusszeile. */
html.bp-v2 body.bp-app .rd-karte {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-popover);
}
html.bp-v2 body.bp-app .rd-kopf {
  align-items: center;
  padding: var(--space-5) var(--space-5) 0;
}
html.bp-v2 body.bp-app .rd-unter {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
html.bp-v2 body.bp-app .rd-zu {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-secondary);
}
html.bp-v2 body.bp-app .rd-zu:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}
html.bp-v2 body.bp-app .rd-zu:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 body.bp-app .rd-zahlen {
  margin: var(--space-5) var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--panel-muted);
}
/* Die kleinen Etiketten der Kurzuebersicht bleiben klein – aber ohne Versalien. */
html.bp-v2 body.bp-app .rd-zahlen .rd-klein {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: none;
}
html.bp-v2 body.bp-app .rd-zahlen strong {
  margin-top: 2px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
html.bp-v2 body.bp-app .rd-block {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) var(--space-5) 0;
}
/* Abschnittstitel: EINE Gestalt fuer Zahlungseingang, Interne Notiz und E-Rechnung. */
html.bp-v2 body.bp-app .rd-block > .rd-klein {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}
html.bp-v2 body.bp-app .rd-schnell {
  margin: 0;
  gap: var(--space-2);
}
html.bp-v2 body.bp-app .rd-felder {
  gap: var(--space-3);
  margin-top: var(--space-1);
}
/* Feldbeschriftungen: klein und ruhig, nicht fett. */
html.bp-v2 body.bp-app .rd-felder label {
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.bp-app .rd-felder input,
html.bp-v2 body.bp-app .rd-block textarea {
  min-height: var(--control-h) !important;
  height: var(--control-h);
  padding: 0 12px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  font: inherit !important;
  font-size: var(--text-base) !important;
  font-variant-numeric: tabular-nums;
}
html.bp-v2 body.bp-app .rd-block textarea {
  height: auto;
  min-height: 84px !important;
  padding: 10px 12px !important;
  line-height: 1.45;
  resize: none !important;
}
html.bp-v2 body.bp-app .rd-hinweis {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
}
html.bp-v2 body.bp-app .rd-karte .form-status {
  margin: var(--space-2) var(--space-5) 0;
}
html.bp-v2 body.bp-app .rd-karte .form-status:empty {
  display: none;
}
/* Fusszeile sauber abgesetzt: feine Linie, gleiche Knopfhoehe, klebt am Ende
   der Karte, auch wenn deren Inhalt rollt. */
html.bp-v2 body.bp-app .rd-knoepfe {
  position: sticky;
  bottom: 0;
  align-items: center;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--panel);
}
@media (max-width: 620px) {
  html.bp-v2 body.bp-app .rd-huelle {
    align-items: flex-end;
    padding: 0 !important;
  }
  html.bp-v2 body.bp-app .rd-karte {
    max-width: none;
    max-height: calc(100dvh - var(--space-6));
    border: 0;
    border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0;
  }
  html.bp-v2 body.bp-app .rd-knoepfe {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  html.bp-v2 body.bp-app .rd-felder input,
  html.bp-v2 body.bp-app .rd-block textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }
}

/* NETTO / BRUTTO-UMSCHALTER: Rolle kleiner Knopf (docs/ui-v2/REGELN.md). Die Seite gab ihm 0.3rem Rand und kam auf
   32,6 px; gedrueckt wurde er fett (700) und damit breiter - der Nachbar sprang beim Umschalten. Farbe und Kontur
   zeigen die Wahl, das Gewicht bleibt. */
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .pm-knopf {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .pm-knopf[aria-pressed="true"] {
  font-weight: var(--weight-medium);
}
/* Die nicht gewählte Seite antwortet beim Überfahren; die gewählte ist schon gewählt. */
html.bp-v2 body.v2-shell[data-v2-page="invoices"] .pm-knopf:not([aria-pressed="true"]):hover {
  background: var(--hover-flaeche);
}

/* WEITERE ANGABEN der Rechnungserfassung (#i-weitere): eine leise Aufklappzeile wie die Layoutwahl darüber. Die
   Hausregel für <details> wiegt mit der Kennung der Seite schwerer als eine Klasse - deshalb über die Kennung. */
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere {
  /* BLOCK, NICHT INLINE. `setup-warum-auf` baut das Aufklappfeld so breit wie seinen Inhalt - richtig für eine
     Zeile Text, falsch für ein Feldraster darin: am Telefon wurde es 456 px breit in einer 324 px schmalen Spalte,
     und USt-IdNr. und Skonto-Frist standen rechts außerhalb (gemessen 11.10.2026, 390 px). */
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-4);
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere > .field-grid {
  width: 100%;
  min-width: 0;
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere > summary {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere .weitere-angaben-zeile {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere .weitere-angaben-was {
  color: var(--text-secondary);
  font-weight: var(--weight-regular, 400);
}
html.bp-v2 body.v2-shell[data-v2-page="invoices"] #i-weitere[open] > .field-grid {
  margin-top: var(--space-3);
}

/* POSITIONEN IN DER MITTLEREN SPALTE. Unter 680 px Spaltenbreite stapelt der Bestand jede Position zu fünf Zeilen
   (gemessen 310 px je Position). Ab 520 px passen Menge, Einzelpreis, Rabatt und USt. in EINE Zeile. */
@container rechnungsspalte (min-width: 520px) and (max-width: 680px) {
  html.bp-v2 body.bp-app .line-item-row {
    /* Die Mengenspalte trägt drei Teile (Zahl, Einheit, Art) - sie bekommt gut doppelt so viel wie Rabatt und USt. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(0, 0.75fr);
  }
  html.bp-v2 body.bp-app .line-item-row .line-total {
    grid-column: 1 / 4;
    justify-self: end;
  }
  html.bp-v2 body.bp-app .line-item-row .line-item-remove {
    grid-column: 4;
  }
}

/* Mit dem Finger: 16 px Feldschrift wie ueberall (regeln.css, Abschnitt 10) - hier eigens, weil die Feldregel des
   Rechnungsfensters ihre Schrift mit !important setzt. Stand nur bis 620 px da. */
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.bp-app .rd-felder input,
  html.bp-v2 body.bp-app .rd-block textarea { font-size: 16px !important; }
}

/* ==== compat/seiten/kunden-produkte.css ==== */
/* UI v2 – Kunden und Produkte im Bestand zuerst.
 *
 * Kunden, Produkte und Abos teilen einen dynamischen Dialog mit mehreren
 * Positionen. Diese Regeln gestalten den vorhandenen Ablauf in der v2-Hülle,
 * ohne die Geschäftslogik zu duplizieren.
 */

html.bp-v2 body.v2-shell[data-v2-page="customers"] .main-content,
html.bp-v2 body.v2-shell[data-v2-page="products"] .main-content {
  max-width: 1120px;
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .sheet-kopf,
html.bp-v2 body.v2-shell[data-v2-page="products"] .sheet-kopf {
  align-items: flex-end;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .hero-title,
html.bp-v2 body.v2-shell[data-v2-page="products"] .hero-title {
  color: var(--text-primary);
  font: 500 var(--text-3xl)/1.15 var(--font-sans);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .hero-sub,
html.bp-v2 body.v2-shell[data-v2-page="products"] .hero-sub,
html.bp-v2 body.v2-shell[data-v2-page="customers"] .panel-hint,
html.bp-v2 body.v2-shell[data-v2-page="products"] .panel-hint {
  color: var(--text-secondary);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] section.panel,
html.bp-v2 body.v2-shell[data-v2-page="products"] section.panel,
html.bp-v2 body.v2-shell[data-v2-page="customers"] .stamm-dialog-inhalt,
html.bp-v2 body.v2-shell[data-v2-page="products"] .stamm-dialog-inhalt {
  border-color: var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] section.panel,
html.bp-v2 body.v2-shell[data-v2-page="products"] section.panel {
  padding: var(--space-5);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .stamm-zeile,
html.bp-v2 body.v2-shell[data-v2-page="products"] .stamm-zeile {
  border-color: var(--border-subtle);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .primary-btn,
html.bp-v2 body.v2-shell[data-v2-page="customers"] .ghost-btn,
html.bp-v2 body.v2-shell[data-v2-page="products"] .primary-btn,
html.bp-v2 body.v2-shell[data-v2-page="products"] .ghost-btn {
  min-height: 38px;
  border-radius: var(--radius-pill);
}

html.bp-v2 body.v2-shell[data-v2-page="customers"] .stamm-dialog,
html.bp-v2 body.v2-shell[data-v2-page="products"] .stamm-dialog {
  padding: var(--space-4);
}

@media (max-width: 720px) {
  html.bp-v2 body.v2-shell[data-v2-page="customers"] .sheet-kopf,
  html.bp-v2 body.v2-shell[data-v2-page="products"] .sheet-kopf {
    align-items: stretch;
    flex-direction: column;
  }

  html.bp-v2 body.v2-shell[data-v2-page="customers"] .sheet-kopf .primary-btn,
  html.bp-v2 body.v2-shell[data-v2-page="products"] .sheet-kopf .primary-btn {
    justify-content: center;
    width: 100%;
  }

  html.bp-v2 body.v2-shell[data-v2-page="customers"] section.panel,
  html.bp-v2 body.v2-shell[data-v2-page="products"] section.panel {
    padding: var(--space-4);
  }
}

/* Dialog „Kunde/Produkt anlegen“: Ueberschrift klebte am ersten Feldnamen */
html.bp-v2 body.bp-app .stamm-dialog-karte > h2 {
  margin: 0 0 var(--space-4) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--weight-semibold) !important;
}

/* Bearbeiten und Loeschen als runde Symbol-Knoepfe (UI-Pass 22.09.2026, Punkt 15):
   die Spalten der Zeile wachsen mit den 34-px-Knoepfen, 8 px dazwischen. */
html.bp-v2 body.bp-app .stamm-zeile {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: var(--space-2);
}
html.bp-v2 body.bp-app .stamm-zeile > .stamm-knopf:first-of-type {
  margin-left: var(--space-2);
}
html.bp-v2 body.bp-app .ab-posten-zeile {
  grid-template-columns: minmax(0, 1fr) 3.6rem 5rem 3.6rem auto;
}

/* Kartenkopf am Telefon: die Knoepfe brechen unter den Titel - dann im Kartenkopf-Abstand, nicht in den 12 px der Zeile. */
html.bp-v2 body.bp-app .panel-kopf { row-gap: var(--abstand-kartentitel); }

/* ==== compat/seiten/stammdaten.css ==== */
/* UI v2 – Bestandsseite „stammdaten“ im neuen Aussehen (eigene Welle). */

/* Haekchen in der Bestandsoberflaeche in Markenfarbe statt Systemblau */
html.bp-v2 body.bp-app input[type="checkbox"],
html.bp-v2 body.bp-app input[type="radio"] { accent-color: var(--green-700); }

/* „Zurueck zu Rechnungen“: Pfeil vor dem Text, nicht darunter */
html.bp-v2 body.bp-app a.back-link {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
}

/* ==== compat/seiten/bank.css ==== */
/* UI v2 – Bestandsseite „bank“ im neuen Aussehen (eigene Welle). */

/* Bestand zuerst (boot.js: bank: []). Leere Statuszeilen standen als Luecke
 * zwischen Erklaerung und „noch kein Bankkonto verbunden“. */
html.bp-v2 body.v2-shell[data-v2-page="bank"] #callback-note:empty,
html.bp-v2 body.v2-shell[data-v2-page="bank"] #connection-status:empty,
html.bp-v2 body.v2-shell[data-v2-page="bank"] .zeitraum-hinweis:empty { display: none !important; }
html.bp-v2 body.v2-shell[data-v2-page="bank"] #bank-accounts { margin-top: var(--space-4); }
html.bp-v2 body.v2-shell[data-v2-page="bank"] .bank-empty {
  padding: var(--space-3) 0;
  color: var(--text-secondary);
}
html.bp-v2 body.v2-shell[data-v2-page="bank"] .bank-note {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Kartenkopf: „Projekt“ klebte ohne Abstand auf der Werkzeugzeile, „Verbundene Konten“ stand 9,6 px ueber der Liste. */
html.bp-v2 body.bp-app .panel:has(> .bank-toolbar) > h2:not(:has(+ p:not([hidden]))),
html.bp-v2 body.bp-app #connections-panel > h2 { margin-bottom: var(--abstand-kartentitel); }

/* ==== compat/seiten/konto.css ==== */
/* UI v2 – Bestandsseiten Abo, Tarife, Nutzung, Profil (account.html) im neuen Aussehen.
   Die Funktionen bleiben die des Bestands; hier nur Mass, Ruhe und Rueckmeldung. */

/* Kacheln in Karten: flache Unterflaechen statt Kasten im Kasten */
html.bp-v2 body.v2-konto-bestand #billing-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html.bp-v2 body.v2-konto-bestand .paket-karte {
  border: 0 !important;
  background: var(--panel-muted) !important;
  box-shadow: none !important;
}

/* Preise: gross genug zum Vergleichen, nicht lauter als die Seite */
html.bp-v2 body.v2-konto-bestand .tarif-preis,
html.bp-v2 body.v2-konto-bestand .paket-preis {
  font-size: var(--text-3xl) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}
html.bp-v2 body.v2-konto-bestand .tarif-name { font-size: var(--text-xl) !important; }

/* Rueckmeldung beim Ueberfahren */
html.bp-v2 body.v2-konto-bestand .tarif-umschalter button { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
html.bp-v2 body.v2-konto-bestand .tarif-umschalter button[aria-pressed="false"]:hover { background: var(--hover-flaeche) !important; color: var(--text-primary) !important; }
html.bp-v2 body.v2-konto-bestand .tarif-knopf { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
html.bp-v2 body.v2-konto-bestand .tarif-knopf.primaer:hover { background: var(--hover-primaer) !important; border-color: var(--hover-primaer) !important; color: var(--text-on-green) !important; }
html.bp-v2 body.v2-konto-bestand .tarif-knopf:not(.primaer):hover { border-color: var(--hover-akzent) !important; background: var(--hover-flaeche) !important; }

/* AVV-HINWEIS: ruhig statt Warnung. Er steht unter der Seitenueberschrift (boot.js /
 * settings.js setzen ihn dorthin), in Markengruen statt Orange, mit Zeichen und
 * klarer Handlung. Die Bedingung (nur ohne Zustimmung sichtbar) bleibt die des
 * Bestands – [hidden] wird nie ueberschrieben. */
html.bp-v2 body.bp-app #avv-hinweis:not([hidden]) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-4) !important;
  margin: 0 0 var(--space-5) !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--green-200) !important;
  border-radius: var(--radius-card) !important;
  background: var(--green-050) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
html.bp-v2 body.bp-app #avv-hinweis:not([hidden])::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 14.5 2 2 4-4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  box-shadow: inset 0 0 0 1px var(--green-200);
}
html.bp-v2 body.bp-app #avv-hinweis .avv-text { font-size: var(--text-sm) !important; line-height: 1.45; color: var(--text-primary) !important; }
html.bp-v2 body.bp-app #avv-hinweis > a { color: var(--green-800) !important; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
html.bp-v2 body.bp-app #avv-hinweis > a:hover { color: var(--hover-akzent) !important; text-decoration-thickness: 2px; }
html.bp-v2 body.bp-app #avv-hinweis .primary-btn { min-height: var(--control-h); padding: 0 16px !important; border-radius: var(--radius-pill) !important; white-space: nowrap; }
html.bp-v2 body.bp-app #avv-hinweis .avv-meldung { grid-column: 1 / -1; font-size: var(--text-sm); }
html.bp-v2 body.bp-app #avv-hinweis .avv-meldung:empty { display: none; }

@media (max-width: 720px) {
  html.bp-v2 body.bp-app #avv-hinweis:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-3) !important;
  }
  html.bp-v2 body.bp-app #avv-hinweis > a { grid-column: 2; justify-self: start; }
  html.bp-v2 body.bp-app #avv-hinweis .primary-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* Abo: Zugang ohne grauen Kasten im Kasten; Kuendigen/Widerruf als Pillen wie alle Knoepfe */
html.bp-v2 body.v2-konto-bestand .billing-box {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.bp-v2 body.v2-konto-bestand .vertragsende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
html.bp-v2 body.v2-konto-bestand .vertragsende-knopf {
  display: inline-flex !important;
  align-items: center;
  min-height: var(--control-h);   /* Rolle Knopf - bis 11.10.2026 40 px / 13 px */
  padding: 0 var(--space-4) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  text-decoration: none !important;
}
html.bp-v2 body.v2-konto-bestand .vertragsende-knopf:hover { border-color: var(--hover-akzent) !important; background: var(--hover-flaeche) !important; }
html.bp-v2 body.v2-konto-bestand #knopf-widerrufen { color: var(--danger-strong) !important; border-color: #eac2bb !important; }
html.bp-v2 body.v2-konto-bestand #knopf-widerrufen:hover { background: var(--danger-bg) !important; }
html.bp-v2 body.v2-konto-bestand .vertragsende-sub { flex-basis: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
 * ABSTÄNDE DER KONTOSEITEN (Profil, Abo, Tarife, Nutzung) – ein Raster für alle.
 *
 * Vorher klebten die Reiter an der ersten Karte, Abschnittsüberschriften
 * standen 4px über ihrer Linie, Formularzeilen 12px auseinander und
 * Zusatzpakete direkt unter ihrem Satz. Jetzt gilt überall:
 *   Karte innen 24px (Handy 20px), zwischen Karten 20px,
 *   Abschnitte in einer Karte: Haarlinie mit je 24px davor und danach,
 *   Überschrift eines Abschnitts 12px über ihrem Inhalt.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Reiter → erste Karte: derselbe Abstand wie Kopf → Hinweis → Reiter */
html.bp-v2 body.v2-konto-bestand .main-content > .v2-settings {
  margin-bottom: var(--space-5);
}
html.bp-v2 body.bp-app [data-settings-avv] > #avv-hinweis:not([hidden]) {
  margin: 0 !important;
}

/* Karten */
html.bp-v2 body.v2-konto-bestand .content > section.account-footer:not(#tarif-vergleich-section) {
  margin: 0 0 var(--space-5) !important;
  padding: var(--space-6) !important;
}

html.bp-v2 body.v2-konto-bestand .account-footer > .section-heading {
  margin: 0 0 var(--space-6) !important;
  padding: 0 0 var(--space-5) !important;
}
html.bp-v2 body.v2-konto-bestand .account-footer > .section-heading p {
  margin-top: var(--space-1) !important;
  line-height: 1.5;
}

/* Profil: Verbindungen */
html.bp-v2 body.v2-konto-bestand #verbindungsstand {
  margin: 0 0 var(--space-6) !important;
  padding: 0 0 var(--space-3) !important;
}
html.bp-v2 body.v2-konto-bestand #verbindungsstand .verbindungsstand-titel {
  margin: 0 0 var(--space-3) !important;
}
html.bp-v2 body.v2-konto-bestand #verbindungsstand .verbindung-zeile {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}

/* Profil: Bild, Felder, Speichern, Aufgabenliste */
html.bp-v2 body.v2-konto-bestand .profil-kopf {
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
}
html.bp-v2 body.v2-konto-bestand .profil-kopf-text { gap: 2px; }
html.bp-v2 body.v2-konto-bestand #profil-bild-waehlen {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);   /* Rolle Knopf - bis 11.10.2026 36 px / 13 px */
  padding: 0 var(--space-4) !important;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font: inherit;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.v2-konto-bestand #profil-bild-waehlen:hover {
  border-color: var(--hover-akzent) !important;
  background: var(--hover-flaeche) !important;
}
/* Drei Spalten am Schreibtisch – bei vier wurden Beispieltexte abgeschnitten */
html.bp-v2 body.v2-konto-bestand .profil-felder {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--space-5) var(--space-4) !important;
  max-width: 960px;
}
html.bp-v2 body.v2-konto-bestand .profil-feld {
  gap: 6px !important;
  margin: 0 !important;
}
html.bp-v2 body.v2-konto-bestand .profil-fuss {
  margin-top: var(--space-6) !important;
}
html.bp-v2 body.v2-konto-bestand .stille-kasten {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
  border-top-color: var(--divider) !important;
}
html.bp-v2 body.v2-konto-bestand .stille-kasten p + p {
  margin-top: var(--space-1);
  line-height: 1.55;
}
html.bp-v2 body.v2-konto-bestand #stille-knopf {
  margin-top: var(--space-4);
}

/* Nutzung */
html.bp-v2 body.v2-konto-bestand .nutzung-herkunft {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
}
html.bp-v2 body.v2-konto-bestand .nutzung-herkunft-titel {
  margin-bottom: var(--space-2) !important;
}
html.bp-v2 body.v2-konto-bestand .nutzung-untertitel {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.v2-konto-bestand .nutzung-untertitel + p.sub {
  margin-top: var(--space-1) !important;
}
/* „Mehr Belege nötig?“ steht seit dem 02.10.2026 als eine Zeile da (Emil, Testkauf: „zu viel Text“) - mit Luft
 * zum Satz bzw. zur Herkunftsliste darüber. */
html.bp-v2 body.v2-konto-bestand .nutzung-mehr {
  margin-top: var(--space-4) !important;
}
html.bp-v2 body.v2-konto-bestand .paket-reihe {
  gap: var(--space-4) !important;
  margin-top: var(--space-4) !important;
}
html.bp-v2 body.v2-konto-bestand .paket-karte {
  gap: var(--space-1) !important;
  padding: var(--space-5) !important;
  border-radius: var(--radius-lg) !important;
}
/* Drei gleich starke grüne Flächen nebeneinander ließen keine erkennen –
 * die Zusatzpakete sind eine Wahl, keine Hauptaktion. Gleiche Form wie
 * „Verbinden“ in den Einstellungen. */
html.bp-v2 body.v2-konto-bestand .paket-knopf.primary-btn:not(.bp-still):not(:disabled) {
  min-height: var(--control-h) !important;
  margin-top: var(--space-3) !important;
  border: 1px solid var(--green-300) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  color: var(--green-800) !important;
  font-weight: var(--weight-semibold) !important;
}
html.bp-v2 body.v2-konto-bestand .paket-knopf.primary-btn:not(.bp-still):not(:disabled):hover {
  border-color: var(--hover-akzent) !important;
  background: var(--hover-flaeche) !important;
}
html.bp-v2 body.v2-konto-bestand .aktion-einloesen {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
}
html.bp-v2 body.v2-konto-bestand .aktion-einloesen > label {
  margin-bottom: var(--space-2) !important;
}
/* Leere Statuszeilen hielten unten 20–30px frei */
html.bp-v2 body.v2-konto-bestand :is(#nutzung-status, #aktionscode-status, #tarif-status, #billing-actions):empty {
  display: none !important;
}

/* Abo: Zugang */
html.bp-v2 body.v2-konto-bestand #billing-section .billing-box {
  margin: 0 !important;
}
html.bp-v2 body.v2-konto-bestand .vertragsende {
  margin-top: var(--space-5) !important;
}
html.bp-v2 body.v2-konto-bestand #billing-section .panel-hint {
  margin: var(--space-5) 0 0 !important;
}

/* VERTRAG BEENDEN (account.html, 02.10.2026 – Emil, Testkauf, Bild 17: „die abo
 * beenden UI … wie andere deutsche Unternehmen, nur in unserem Stil“). Eigene
 * ruhige Karte unter dem Zugang: links der Begriff, rechts die Auskunft, darunter
 * mit einer Haarlinie abgesetzt die beiden Pflichtknöpfe. Keine Signalfarbe auf
 * „Kündigen“; der Widerruf behält seine Warnkontur (B10, Emil 08.08.2026). */
html.bp-v2 body.v2-konto-bestand .vertrag-fakten {
  gap: var(--space-3);
}
html.bp-v2 body.v2-konto-bestand .vertrag-fakten > div {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  column-gap: var(--space-5);
}
html.bp-v2 body.v2-konto-bestand .vertrag-fakten dt {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
html.bp-v2 body.v2-konto-bestand .vertrag-fakten dd {
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
html.bp-v2 body.v2-konto-bestand .vertrag-karte .vertragsende {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}
html.bp-v2 body.v2-konto-bestand .vertrag-karte .vertragsende-sub {
  margin-top: var(--space-1) !important;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
@media (max-width: 720px) {
  html.bp-v2 body.v2-konto-bestand .vertrag-fakten > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* PASSWORT (Bild 15: „Link per Mail schicken“ klebte an seinem Satz). Im Raster der
 * übrigen Einstellungen: Haarlinie mit je 24 px davor und danach, 12 px zwischen
 * Satz und Knopf. */
html.bp-v2 body.v2-konto-bestand .passwort-weg {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
  border-top-color: var(--divider) !important;
}
html.bp-v2 body.v2-konto-bestand :is(.passwort-weg, .passwort-ohne) > p {
  margin: 0 0 var(--space-3) !important;
  line-height: 1.55;
}
html.bp-v2 body.v2-konto-bestand .passwort-ohne .ghost-btn {
  margin-top: 0 !important;
}

/* Tarifvergleich ist bewusst keine Karte (Bestand, Emil 10.08.2026) – v2 gab
 * ihm trotzdem den Kartenschatten, ohne Fläche wirkte das wie ein leerer
 * Rahmen um Überschrift und Tarife. */
html.bp-v2 body.v2-konto-bestand #tarif-vergleich-section {
  margin: var(--space-8) 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html.bp-v2 body.v2-konto-bestand .v2-settings + .content > #tarif-vergleich-section:first-child,
html.bp-v2 body.v2-konto-bestand #billing-section[hidden] + #tarif-vergleich-section {
  margin-top: 0 !important;
}
html.bp-v2 body.v2-konto-bestand #tarif-vergleich-section > .section-heading {
  margin: 0 0 var(--space-4) !important;
  padding: 0 !important;
  border: 0 !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-umschalter {
  display: inline-flex !important;
  gap: 2px;
  margin: 0 0 var(--space-4) !important;
  padding: 3px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--panel-muted) !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-umschalter button {
  display: inline-flex;
  align-items: center;
  /* Rolle kleiner Knopf - bis 11.10.2026 34 px. Mit !important, weil app-neu.css hier 34 px so setzt. */
  min-height: var(--control-h-sm) !important;
  padding: 0 var(--space-4) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-umschalter button[aria-pressed="true"] {
  background: var(--panel) !important;
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.1), 0 0 0 1px var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
/* „2 Monate geschenkt“: der Bestand setzt die Marke mit align-self oben an –
 * im Umschalter stand sie dadurch höher als „Jährlich“. Mittig, als kleine Marke. */
html.bp-v2 body.v2-konto-bestand .tarif-umschalter .spar-marke {
  align-self: center;
  min-height: 0 !important;
  margin-left: var(--space-2);
  padding: 2px var(--space-2) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--green-100) !important;
  color: var(--green-800) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
html.bp-v2 body.v2-konto-bestand .tarif-karten {
  gap: var(--space-4) !important;
  padding-top: 0 !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-karte {
  padding: var(--space-6) !important;
  border-radius: var(--radius-card) !important;
}
/* Leistungen als zwei Spalten: links was, rechts wie viel – so lassen sich
 * die Tarife Zeile für Zeile vergleichen. */
html.bp-v2 body.v2-konto-bestand .tarif-zeile {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) !important;
  padding: 6px 0 !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-zeile > b {
  text-align: right;
}
html.bp-v2 body.v2-konto-bestand .tarif-zeile > b.ja {
  color: var(--green-700) !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-zeile > b.nein {
  color: var(--text-tertiary) !important;
  font-weight: var(--weight-regular, 400) !important;
}
html.bp-v2 body.v2-konto-bestand .tarif-hinweis {
  max-width: none !important;
  margin: var(--space-4) 0 0 !important;
  text-align: center;
}

/* Häufige Fragen: jede Frage mit ihrer Antwort als eigener Block */
html.bp-v2 body.v2-konto-bestand .abo-faq {
  gap: var(--space-5) !important;
}
html.bp-v2 body.v2-konto-bestand .abo-faq-item p {
  margin-top: var(--space-1) !important;
  /* Eine Antwort ist ein eigenständiger Satz: 14 px / 1,5 wie jeder Erklärtext - stand mit 13 px / 1,55 da. */
  font-size: var(--text-base);
  line-height: 1.5;
}

@media (max-width: 720px) {
  html.bp-v2 body.v2-konto-bestand .content > section.account-footer:not(#tarif-vergleich-section) {
    padding: var(--space-5) !important;
  }
  html.bp-v2 body.v2-konto-bestand .account-footer > .section-heading {
    margin-bottom: var(--space-5) !important;
    padding-bottom: var(--space-4) !important;
  }
  html.bp-v2 body.v2-konto-bestand .profil-kopf {
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
  }
  html.bp-v2 body.v2-konto-bestand .profil-felder {
    gap: var(--space-4) !important;
  }
  html.bp-v2 body.v2-konto-bestand :is(.nutzung-herkunft, .nutzung-untertitel, .aktion-einloesen, .stille-kasten) {
    margin-top: var(--space-5) !important;
    padding-top: var(--space-5) !important;
  }
  html.bp-v2 body.v2-konto-bestand .profil-fuss {
    margin-top: var(--space-5) !important;
  }
  html.bp-v2 body.v2-konto-bestand #tarif-vergleich-section {
    margin: var(--space-7) 0 !important;
  }
  html.bp-v2 body.v2-konto-bestand .tarif-karte {
    padding: var(--space-5) !important;
  }
  html.bp-v2 body.v2-konto-bestand .vertragsende-knopf {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
}

html.bp-v2 body.v2-konto-bestand .paket-knopf.primary-btn:not(.bp-still):focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ==== compat/seiten/anmeldung.css ==== */
/* UI v2 – Anmelden, Starten, Passwort: Bestandsseiten im neuen Aussehen. */

/* Haekchen in Markenfarbe und gross genug zum Treffen */
html.bp-v2 body.bp-auth input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green-700);
  cursor: pointer;
}

/* Rechtslinks unter dem Formular lesbar (vorher 3,3:1) */
html.bp-v2 body.bp-auth .rechtsfuss,
html.bp-v2 body.bp-auth .rechtsfuss a { color: var(--text-secondary); }
html.bp-v2 body.bp-auth .rechtsfuss a:hover { color: var(--hover-akzent); }

/* Links im Formular reagieren sichtbar */
html.bp-v2 body.bp-auth .avv-zeile a:hover,
html.bp-v2 body.bp-auth .schon-konto a:hover { color: var(--hover-akzent); text-decoration-thickness: 2px; }

/* Passwortseiten und Kaufabschluss: Felder in Fingergroesse, Ueberschriften nicht zusammengedrueckt */
/* Nur die Eingabe selbst: `div.an-pw` traegt ebenfalls `.an-feld` (fuer den
   Label-Abstand) und bekam sonst Polster und Mindesthoehe – das Passwortfeld
   war 28px schmaler als die E-Mail-Zeile (Emils Handybild 17.09.2026). */
html.bp-v2 body.bp-auth input.an-feld,
html.bp-v2 body.bp-auth .an-pw input,
html.bp-v2 body.bp-auth input[type="email"],
html.bp-v2 body.bp-auth input[type="password"],
html.bp-v2 body.bp-auth input[type="text"] {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
html.bp-v2 body.bp-auth .an-titel,
html.bp-v2 body.bp-auth .card > h1 {
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
html.bp-v2 body.bp-auth .an-neu a:hover { color: var(--hover-akzent); text-decoration-thickness: 2px; }
html.bp-v2 body.bp-auth .brand-beleg,
html.bp-v2 body.bp-auth .brand-hero { letter-spacing: 0; }

/* Zeichen, die die Hausschrift nicht hat, als Masken */
/* „Zahlung erfolgreich“ nach dem Kauf: theme.css setzt das Schild in Schreibmaschinenschrift mit 10,9 px - die
   einzige Stelle der Anmeldeseiten ohne Hausschrift (gesehen 12.10.2026, als die Seite zum ersten Mal im Lauf war). */
html.bp-v2 body.bp-auth .success-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0;
}
html.bp-v2 body :is(.bh-haken, .bh-zurueck) {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  font-size: 0;
  background: currentColor;
  vertical-align: -2px;
}
html.bp-v2 body .bh-haken { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html.bp-v2 body .bh-zurueck { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
html.bp-v2 body.bp-auth .card #submit-btn { margin-top: var(--space-4); }

/* START: MARKENSPALTE
 * Der v2-Reset nimmt Absätzen den Außenabstand, und er steht später als die
 * Regeln im <style> von start.html: Wortmarke, Zeile darüber, Titel, Text und
 * Zusagen klebten ohne Luft aneinander. Die Abstände des Bestands zurück –
 * die Zusagen stehen wieder am unteren Rand der Spalte. */
html.bp-v2 body.bp-auth .auth-marke-kicker { margin: 4rem 0 0.9rem; }
html.bp-v2 body.bp-auth .auth-marke-titel { margin: 0 0 1rem; }
html.bp-v2 body.bp-auth .auth-marke-text { margin: 0 0 auto; }
html.bp-v2 body.bp-auth .auth-marke-punkte { margin: 2.5rem 0 0; }

/* ROLLEN (12.10.2026, docs/ui-v2/REGELN.md): Feld und Knopf vor der Anmeldung wie in der App - Radius des Felds 10
 * (stand mit 20 da), Knopf im Gewicht 500 (stand mit 600 da), mit dem Finger 16 px Feldschrift (stand mit 14 da, dann
 * zoomt iOS in das Feld). Die Hoehe bleibt die grosse (--control-h-lg, 44): hier steht das Formular allein auf der
 * Seite. */
html.bp-v2 body.bp-auth:not(.bp-app) :is(input.an-feld, .an-pw input, input[type="email"], input[type="password"], input[type="text"], select) {
  height: var(--control-h-lg);
  min-height: var(--control-h-lg);
  border-radius: var(--radius-sm) !important;
}
html.bp-v2 body.bp-auth:not(.bp-app) :is(.an-los, .primary-btn, #submit-btn) { font-weight: var(--weight-medium) !important; }
/* DIE KANTE DES KNOPFS. theme.css färbt seinen Rahmen, setzt aber weder Stil noch Stärke - es blieb die Vorgabe des
   Browsers für <button>: 2px outset. „Anmelden“ und „Link anfordern“ standen deshalb mit heller Kante oben links und
   dunkler unten rechts da, wie ein Knopf von 1998 - auch live (gemessen 12.10.2026 an beleghero.com/login). */
html.bp-v2 body.bp-auth:not(.bp-app) :is(.an-los, .primary-btn, .btn-primary, button.primary, #submit-btn) {
  border-style: solid;
  border-width: 1px;
}
/* EINE FORM VOR DER ANMELDUNG: DIE PILLE (Emil, 12.10.2026). „Anmelden“ und „Registrieren“ hatten 5-px-Ecken (Henry,
   18.09.2026: Anmelden wie /start), „Passwort vergessen“ und die Seite nach dem Kauf Pillen - zwei Formen für denselben
   Knopf, je nachdem, über welche Seite man kam. Jetzt die Form der App und der Mails. /start setzt seine Ecken mit
   !important; deshalb hier auch. Die Google-Knöpfe gehören dazu, und der auf /login bekommt die Höhe seines Nachbarn
   (stand mit 36 px unter 44). */
html.bp-v2 body.bp-auth:not(.bp-app) :is(.an-los, .primary-btn, .btn-primary, button.primary, #submit-btn, #unternehmen-btn,
                                         .an-google, .google-btn) {
  border-radius: var(--radius-pill) !important;
}
html.bp-v2 body.bp-auth:not(.bp-app) .an-google { min-height: var(--control-h-lg); }
/* Der Satz unter dem Titel (Registrierung, nach dem Kauf) erbte 16 px vom Blatt der Werbeseiten - neben der Leiter.
   Er ist ein Untertitel wie .v2-page-subtitle: 15 px. */
html.bp-v2 body.bp-auth:not(.bp-app) #intro-text { font-size: var(--text-md); }
@media (max-width: 900px), (pointer: coarse) {
  html.bp-v2 body.bp-auth:not(.bp-app) :is(input.an-feld, .an-pw input, input[type="email"], input[type="password"], input[type="text"], select) {
    font-size: 16px !important;
  }
}
/* Der Titel der Karte: Anmelden und Passwort standen mit 20 px / 700 da, Registrieren und Kaufabschluss mit 24 px / 500. */
html.bp-v2 body.bp-auth:not(.bp-app) :is(.an-titel, .card > h1) {
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-medium) !important;
}

/* AUSWAHLFELD vor der Anmeldung („Wie hast du von uns erfahren?“): ohne `appearance: none` zeichnet WebKit - Safari
 * und die Mac-App - sein eigenes Feld und setzt dessen Ecken (5 px) ueber unsere; Chrome nimmt den Radius an.
 * Gemessen am 12.10.2026 in einem WKWebView. Mit eigenem Pfeil wie .v2-select sieht das Feld in beiden gleich aus. */
html.bp-v2 body.bp-auth:not(.bp-app) select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2365736a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* „Freiwillige Angaben ergaenzen“ laesst sich aufklappen und tat beim Ueberfahren nichts. */
/* Der Winkel des Hauses statt des Dreiecks des Browsers („▶“): dieselbe Zeichnung wie überall, dreht sich beim Öffnen. */
html.bp-v2 body.bp-auth:not(.bp-app) .freiwillige-angaben > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
html.bp-v2 body.bp-auth:not(.bp-app) .freiwillige-angaben > summary::-webkit-details-marker { display: none; }
html.bp-v2 body.bp-auth:not(.bp-app) .freiwillige-angaben > summary::before {
  content: "";
  flex: none;
  width: 0.92em;
  height: 0.92em;
  background: currentColor;
  -webkit-mask: var(--maske-winkel) center / contain no-repeat;
  mask: var(--maske-winkel) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-auth:not(.bp-app) .freiwillige-angaben[open] > summary::before { transform: rotate(90deg); }
html.bp-v2 body.bp-auth:not(.bp-app) .freiwillige-angaben > summary:hover { color: var(--hover-akzent); }

/* ==== compat/seiten/admin.css ==== */
/* UI v2 – Bestandsseite „admin“ im neuen Aussehen (eigene Welle). */

/* ==== assistent.css ==== */
/* Hilfe-Assistent in der Kopfleiste (shell/assistent.js) -----------------
 *
 * Henry am 25.09.2026: „bekommen wir den Assistent Bot unten rechts hin? Bzw so
 * dass er etwas besser erkennbar ist als oben neben WhatsApp und
 * Benachrichtigungen?“ Unten rechts war er erkennbar, lag aber fest über dem
 * Inhalt (Emil, 11.10.2026: „damit er keinen Inhalt mehr überdeckt“). Jetzt
 * sitzt derselbe grüne, beschriftete Knopf in der Kopfleiste - in der Hülle
 * überdeckt er nichts. Das Fenster hängt darunter; am Handy ist es ein Blatt
 * über die ganze Fläche.
 *
 * Die Hausfarbe kommt aus den --fix-green-* Werten: Knopf und Kopf bleiben
 * auch im Dunkelmodus grün mit weißer Schrift. Alles andere über die Token,
 * hell und dunkel.
 */

/* Der Knopf -------------------------------------------------------------- */

.bp-v2 .tb-assistant {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  height: var(--icon-btn);
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fix-green-700);
  color: #fff;
  font: var(--weight-medium) var(--text-base) / 1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bp-v2 .tb-assistant[hidden] {
  display: none;
}
.bp-v2 .tb-assistant .v2-icon {
  width: 18px;
  height: 18px;
}
.bp-v2 .tb-assistant:hover {
  background: var(--hover-primaer);   /* wie jeder grüne Knopf (tokens.css, „Hover“) */
}
.bp-v2 .tb-assistant:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--workspace), 0 0 0 4px var(--fix-green-500);
}
.bp-v2 .tb-assistant[aria-expanded="true"] {
  background: var(--fix-green-900);
}
/* Wo die Kopfleiste eng wird (Schubladen-Breiten, Handy): nur das Zeichen, rund - grün bleibt er. */
@media (max-width: 1199px) {
  .bp-v2 .tb-assistant {
    justify-content: center;
    width: var(--icon-btn);
    padding: 0;
  }
  .bp-v2 .tb-assistant-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Das Fenster ------------------------------------------------------------ */

html.bp-v2 .bh-assistent {
  position: fixed;
  /* Unter der Kopfleiste, an deren rechtem Rand - dort sitzt der Knopf, der es öffnet. */
  top: calc(var(--topbar-h) + var(--space-1));
  right: var(--space-5);
  /* Unter dem Schleier eines Dialogs, der sich währenddessen öffnet; über Schubladen. */
  z-index: calc(var(--z-overlay) - 1);
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 2 * var(--space-5)));
  height: min(660px, calc(100dvh - var(--topbar-h) - var(--space-1) - var(--space-5)));
  min-height: 320px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-popover), 0 40px 80px -40px rgba(18, 51, 34, 0.35);
  overflow: hidden;
  transform-origin: top right;
  animation: bh-assistent-auf var(--dur-slow) var(--ease-out);
}
html.bp-v2 .bh-assistent[hidden] {
  display: none;
}
@keyframes bh-assistent-auf {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

html.bp-v2 .bh-assistent-kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(116, 194, 143, 0.35) 0%, rgba(116, 194, 143, 0) 55%),
    linear-gradient(135deg, var(--fix-green-700) 0%, var(--fix-green-900) 100%);
  color: #fff;
}
html.bp-v2 .bh-assistent-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
html.bp-v2 .bh-assistent-avatar .v2-icon {
  width: 20px;
  height: 20px;
}
html.bp-v2 .bh-assistent-kopftext {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
html.bp-v2 .bh-assistent-titel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
html.bp-v2 .bh-assistent-ki {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  /* Dunkler unterlegt statt aufgehellt: Weiß stand auf dem aufgehellten Grün mit 4,38:1, und 10 px liegt unter der
     kleinsten Schrift des Hauses (gemessen 12.10.2026). */
  background: rgba(0, 0, 0, 0.2);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}
html.bp-v2 .bh-assistent-unterzeile {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 .bh-assistent-zu {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 .bh-assistent-zu:hover {
  background: var(--hover-auf-gruen);
}
html.bp-v2 .bh-assistent-zu:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}

/* Verlauf ----------------------------------------------------------------- */

html.bp-v2 .bh-assistent-verlauf {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel-muted);
}
html.bp-v2 .bh-assistent-lade {
  margin: auto;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
html.bp-v2 .bh-assistent-nachricht {
  display: flex;
}
html.bp-v2 .bh-assistent-nachricht--du {
  justify-content: flex-end;
}
html.bp-v2 .bh-assistent-blase {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
html.bp-v2 .bh-assistent-nachricht--ki .bh-assistent-blase {
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 6px;
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.04);
}
html.bp-v2 .bh-assistent-nachricht--du .bh-assistent-blase {
  border-bottom-right-radius: 6px;
  background: var(--fix-green-700);
  color: #fff;
}
html.bp-v2 .bh-assistent-nachricht--denkt .bh-assistent-blase {
  color: var(--text-tertiary);
  animation: bh-assistent-denkt 1.2s ease-in-out infinite alternate;
}
@keyframes bh-assistent-denkt {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* Antworten mit Karten (Emil, 25.09.2026: „das sollte irgendwie cooler aussehen“) ------------------------ */

/* Der Verlauf ist Bezugspunkt für offsetTop – eine neue Antwort rollt an ihren Anfang. */
html.bp-v2 .bh-assistent-verlauf {
  position: relative;
}
html.bp-v2 .bh-assistent-nachricht--ki {
  align-items: flex-start;
  gap: 10px;
}
html.bp-v2 .bh-assistent-ki-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--fix-green-700) 0%, var(--fix-green-900) 100%);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(18, 51, 34, 0.7);
}
html.bp-v2 .bh-assistent-ki-zeichen .v2-icon {
  width: 15px;
  height: 15px;
}
html.bp-v2 .bh-assistent-antwort {
  display: grid;
  flex: 1;
  gap: 10px;
  min-width: 0;
}
html.bp-v2 .bh-a-text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
html.bp-v2 .bh-a-text > * {
  margin: 0;
}
html.bp-v2 .bh-a-text > * + * {
  margin-top: 8px;
}
html.bp-v2 .bh-a-text strong {
  font-weight: 700;
  color: var(--text-primary);
}
html.bp-v2 .bh-a-text ul,
html.bp-v2 .bh-a-text ol {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}
html.bp-v2 .bh-a-text li {
  position: relative;
  margin: 0;
  padding-left: 18px;
}
html.bp-v2 .bh-a-text ul > li::before {
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  content: "";
}
html.bp-v2 .bh-a-text ol {
  counter-reset: bh-a-nr;
}
html.bp-v2 .bh-a-text ol > li {
  counter-increment: bh-a-nr;
  padding-left: 24px;
}
html.bp-v2 .bh-a-text ol > li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  content: counter(bh-a-nr);
}
/* Änderungskarten stehen in der Spalte der Antwort, nicht unter dem Zeichen. */
html.bp-v2 .bh-assistent-verlauf > .bh-assistent-karte {
  margin-left: 38px;
  max-width: calc(100% - 38px);
}

/* Denkt nach: drei Punkte statt eines blinkenden Satzes */
html.bp-v2 .bh-assistent-denkt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
html.bp-v2 .bh-a-punkte {
  display: inline-flex;
  gap: 4px;
}
html.bp-v2 .bh-a-punkte i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: bh-a-punkt 1.2s var(--ease-out) infinite;
}
html.bp-v2 .bh-a-punkte i:nth-child(2) { animation-delay: 0.15s; }
html.bp-v2 .bh-a-punkte i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bh-a-punkt {
  0%, 70%, 100% { opacity: 0.3; transform: none; }
  35% { opacity: 1; transform: translateY(-3px); }
}

/* Projektkarte: Name, Zeitraum, Fortschritt, was offen ist, Weiterarbeiten */
html.bp-v2 .bh-a-projekt {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.05), 0 10px 24px -20px rgba(18, 51, 34, 0.45);
}
html.bp-v2 .bh-a-projekt-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
html.bp-v2 .bh-a-projekt-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--success-bg);
  color: var(--success);
}
html.bp-v2 .bh-a-projekt-zeichen .v2-icon {
  width: 17px;
  height: 17px;
}
html.bp-v2 .bh-a-projekt-titel {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}
html.bp-v2 .bh-a-projekt-name {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 .bh-a-projekt-zeit {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 .bh-a-projekt-prozent {
  flex: none;
  font-size: var(--text-lg);
  font-weight: 750;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 .bh-a-balken {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--panel-muted);
  box-shadow: 0 0 0 1px var(--border-subtle) inset;
}
html.bp-v2 .bh-a-balken > span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-500, var(--success)) 0%, var(--fix-green-700) 100%);
}
html.bp-v2 .bh-a-projekt-stand {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html.bp-v2 .bh-a-projekt-stand strong {
  font-weight: 700;
  color: var(--text-primary);
}
html.bp-v2 .bh-a-projekt-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
html.bp-v2 .bh-a-marke {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--panel-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.4;
  color: var(--text-secondary);
}
html.bp-v2 .bh-a-marke--pruefen { background: var(--warning-bg); color: var(--warning-strong); }
html.bp-v2 .bh-a-marke--offen { background: var(--danger-bg); color: var(--danger-strong); }
html.bp-v2 .bh-a-marke--erledigt { background: var(--success-bg); color: var(--success); }
html.bp-v2 body.bp-app a.bh-a-los,
html.bp-v2 a.bh-a-los {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: auto;
  padding: 0 12px 0 14px;
  border-radius: var(--radius-pill);
  background: var(--fix-green-700);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 a.bh-a-los:hover {
  background: var(--hover-primaer);
  color: #fff;
}
html.bp-v2 a.bh-a-los:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 a.bh-a-los .v2-icon {
  width: 15px;
  height: 15px;
}

/* Liste von Buchungen oder Belegen: jede Zeile springt an ihre Stelle im Projekt */
html.bp-v2 .bh-a-liste {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.05), 0 10px 24px -20px rgba(18, 51, 34, 0.45);
}
html.bp-v2 .bh-a-liste-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
html.bp-v2 .bh-a-liste-projekt {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
html.bp-v2 .bh-a-zeilen {
  margin: 0;
  padding: 0;
  list-style: none;
}
html.bp-v2 .bh-a-zeilen > li {
  margin: 0;
  padding: 0;
}
html.bp-v2 .bh-a-zeilen > li + li {
  border-top: 1px solid var(--border-subtle);
}
html.bp-v2 .bh-a-liste--zu .bh-a-zeile-mehr {
  display: none;
}
html.bp-v2 body.bp-app a.bh-a-zeile,
html.bp-v2 a.bh-a-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 a.bh-a-zeile:hover {
  background: var(--hover-flaeche);
  color: var(--text-primary);
}
html.bp-v2 a.bh-a-zeile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--success-border);
}
html.bp-v2 .bh-a-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}
html.bp-v2 .bh-a-zeile--pruefen .bh-a-punkt,
html.bp-v2 .bh-a-zeile--lose .bh-a-punkt { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
html.bp-v2 .bh-a-zeile--erledigt .bh-a-punkt,
html.bp-v2 .bh-a-zeile--zugeordnet .bh-a-punkt { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
html.bp-v2 .bh-a-zeile--privat .bh-a-punkt { background: var(--text-tertiary); box-shadow: 0 0 0 3px var(--panel-muted); }
html.bp-v2 .bh-a-zeile-mitte,
html.bp-v2 .bh-a-zeile-rechts {
  display: grid;
  gap: 1px;
  min-width: 0;
}
html.bp-v2 .bh-a-zeile-rechts {
  justify-items: end;
}
html.bp-v2 .bh-a-zeile-titel,
html.bp-v2 .bh-a-zeile-unter {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.bp-v2 .bh-a-zeile-titel {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.35;
}
html.bp-v2 .bh-a-zeile-unter {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--text-tertiary);
}
html.bp-v2 .bh-a-betrag {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.bp-v2 .bh-a-betrag--plus {
  color: var(--success);
}
html.bp-v2 .bh-a-stand {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--danger);
  white-space: nowrap;
}
html.bp-v2 .bh-a-zeile--pruefen .bh-a-stand,
html.bp-v2 .bh-a-zeile--lose .bh-a-stand { color: var(--warning-strong); }
html.bp-v2 .bh-a-zeile--erledigt .bh-a-stand,
html.bp-v2 .bh-a-zeile--zugeordnet .bh-a-stand { color: var(--success); }
html.bp-v2 .bh-a-zeile--privat .bh-a-stand { color: var(--text-tertiary); }
html.bp-v2 .bh-a-mehr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--success);
  font: 650 var(--text-sm) / 1.2 var(--font-sans);
  cursor: pointer;
}
html.bp-v2 .bh-a-mehr:hover {
  background: var(--hover-flaeche);
}
html.bp-v2 .bh-a-mehr:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--success-border);
}
html.bp-v2 .bh-a-mehr .v2-icon {
  width: 15px;
  height: 15px;
}

/* Sprungziel in Schritt 3 (index.html: bhZurBuchung) – kurz umrandet, damit das Auge es findet */
html.bp-v2 .s3-sprungziel {
  animation: bh-sprungziel 2.4s var(--ease-out) 1;
}
@keyframes bh-sprungziel {
  0%, 45% { box-shadow: 0 0 0 2px var(--success), 0 0 0 7px var(--success-bg); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Leerer Anfang: was er kann und drei, vier Fragen zum Antippen */
html.bp-v2 .bh-assistent-leer {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-2);
}
html.bp-v2 .bh-assistent-leer-titel {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
html.bp-v2 .bh-assistent-kann {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  list-style: none;
}
html.bp-v2 .bh-assistent-kann li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
html.bp-v2 .bh-assistent-kann li + li {
  border-top: 1px solid var(--border-subtle);
}
html.bp-v2 .bh-assistent-kann b {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
}
html.bp-v2 .bh-assistent-kann-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border-radius: 10px;
  background: var(--success-bg);
  color: var(--success);
}
html.bp-v2 .bh-assistent-kann-zeichen .v2-icon {
  width: 16px;
  height: 16px;
}
html.bp-v2 .bh-assistent-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
html.bp-v2 .bh-assistent-vorschlag {
  /* Rolle Knopf klein - bis 12.10.2026 35 px / Gewicht 550 */
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-primary);
  font: var(--weight-medium) var(--text-sm) / 1.3 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 .bh-assistent-vorschlag:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}
html.bp-v2 .bh-assistent-vorschlag:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Hinweiszeile (z. B. „An das Team gemeldet“) */
html.bp-v2 .bh-assistent-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--success);
}
html.bp-v2 .bh-assistent-zeile--info {
  color: var(--text-tertiary);
}
html.bp-v2 .bh-assistent-zeile .v2-icon {
  width: 14px;
  height: 14px;
}

/* Vorgeschlagene Änderung ------------------------------------------------- */

html.bp-v2 .bh-assistent-karte {
  display: grid;
  gap: var(--space-2);
  max-width: 92%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(18, 51, 34, 0.05);
}
html.bp-v2 .bh-assistent-karte--offen {
  border-color: var(--success-border);
  box-shadow: 0 0 0 3px var(--success-bg), 0 6px 18px -12px rgba(18, 51, 34, 0.35);
}
html.bp-v2 .bh-assistent-karte-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
}
html.bp-v2 .bh-assistent-karte-kopf .v2-icon {
  width: 14px;
  height: 14px;
}
html.bp-v2 .bh-assistent-karte-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
}
html.bp-v2 .bh-assistent-karte-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
html.bp-v2 .bh-assistent-ja,
html.bp-v2 .bh-assistent-nein {
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font: 650 var(--text-sm) / 1 var(--font-sans);
  cursor: pointer;
}
html.bp-v2 .bh-assistent-ja {
  border: 0;
  background: var(--fix-green-700);
  color: #fff;
}
html.bp-v2 .bh-assistent-ja:hover {
  background: var(--hover-primaer);
}
html.bp-v2 .bh-assistent-nein {
  border: 1px solid var(--border-default);
  background: var(--panel);
  color: var(--text-secondary);
}
html.bp-v2 .bh-assistent-nein:hover {
  border-color: var(--hover-akzent);
  color: var(--hover-akzent);
}
html.bp-v2 .bh-assistent-ja:focus-visible,
html.bp-v2 .bh-assistent-nein:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 .bh-assistent-ja:disabled,
html.bp-v2 .bh-assistent-nein:disabled {
  opacity: 0.55;
  cursor: progress;
}
html.bp-v2 .bh-assistent-karte-stand {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}
html.bp-v2 .bh-assistent-karte-stand .v2-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
html.bp-v2 .bh-assistent-karte-stand--erledigt { color: var(--success); }
html.bp-v2 .bh-assistent-karte-stand--verworfen { color: var(--text-tertiary); }
html.bp-v2 .bh-assistent-karte-stand--fehler { color: var(--danger); }

/* Screenshot-Vorschau ------------------------------------------------------ */

html.bp-v2 .bh-assistent-bild {
  position: relative;
  align-self: flex-start;
  margin: var(--space-2) var(--space-4) 0;
}
html.bp-v2 .bh-assistent-bild[hidden] {
  display: none;
}
html.bp-v2 .bh-assistent-bild img {
  display: block;
  max-width: 120px;
  max-height: 72px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
html.bp-v2 .bh-assistent-bild button {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--panel);
  cursor: pointer;
}
html.bp-v2 .bh-assistent-bild button .v2-icon {
  width: 12px;
  height: 12px;
}

/* Eingabe ------------------------------------------------------------------ */

html.bp-v2 .bh-assistent-eingabe {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-subtle);
  background: var(--panel);
}
/* Der Bestand (app-neu.css) greift jedes textarea mit !important und ID-Gewicht
   (`body.bp-app textarea:not(#kg-text)`: 76 px hoch, Ziehgriff) – deshalb hier über
   die eigene Kennung und ebenfalls mit !important. */
html.bp-v2 body.bp-app #bh-assistent-feld {
  flex: 1;
  width: auto !important;
  min-width: 0;
  min-height: 42px !important;
  max-height: 140px;
  margin: 0;
  padding: 10px 16px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 21px !important;
  background: var(--panel-sunken) !important;
  color: var(--text-primary) !important;
  font: 400 var(--text-base) / 1.45 var(--font-sans);
  resize: none !important;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
html.bp-v2 body.bp-app #bh-assistent-feld::placeholder {
  color: var(--text-tertiary);
}
html.bp-v2 body.bp-app #bh-assistent-feld:focus {
  outline: none;
  border-color: var(--green-500) !important;
  background: var(--panel) !important;
  box-shadow: var(--focus-ring) !important;
}
html.bp-v2 .bh-assistent-anhang,
html.bp-v2 .bh-assistent-senden {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
html.bp-v2 .bh-assistent-anhang {
  border: 1px solid var(--border-default);
  background: var(--panel);
  color: var(--text-secondary);
}
html.bp-v2 .bh-assistent-anhang:hover {
  color: var(--text-primary);
  background: var(--hover-flaeche);
}
html.bp-v2 .bh-assistent-senden {
  border: 0;
  background: var(--fix-green-700);
  color: #fff;
}
html.bp-v2 .bh-assistent-senden:hover {
  background: var(--hover-primaer);
}
html.bp-v2 .bh-assistent-senden:disabled {
  opacity: 0.5;
  cursor: progress;
}
html.bp-v2 .bh-assistent-anhang:focus-visible,
html.bp-v2 .bh-assistent-senden:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html.bp-v2 .bh-assistent-anhang .v2-icon,
html.bp-v2 .bh-assistent-senden .v2-icon {
  width: 18px;
  height: 18px;
}
/* Offenlegung nach Art. 50 Abs. 1 KI-VO – fest unter der Eingabe, nicht im rollenden Verlauf. */
html.bp-v2 .bh-assistent-hinweis {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  background: var(--panel);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-tertiary);
}
html.bp-v2 .bh-assistent-hinweis strong {
  font-weight: 700;
  color: var(--text-secondary);
}
html.bp-v2 .bh-assistent-hinweis a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Nachbarn ---------------------------------------------------------------- */

/* Solange das Fenster offen ist, hat der Nach-oben-Knopf dort nichts zu suchen. Sonst rückt niemand mehr:
   der Knopf des Assistenten sitzt in der Kopfleiste, unten rechts ist frei. */
html.bp-v2 body.bh-assistent-offen #scroll-fab {
  visibility: hidden;
}

/* Handy: Fenster als Blatt über alles ------------------------------------- */

@media (max-width: 640px) {
  html.bp-v2 .bh-assistent {
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    z-index: var(--z-dialog);
    transform-origin: bottom center;
  }
  html.bp-v2 .bh-assistent-kopf {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  }
  html.bp-v2 .bh-assistent-hinweis {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  /* Nicht hinter dem Blatt weiterrollen. */
  html.bp-v2 body.bh-assistent-offen {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.bp-v2 .bh-assistent,
  html.bp-v2 .bh-assistent-nachricht--denkt .bh-assistent-blase,
  html.bp-v2 .bh-a-punkte i,
  html.bp-v2 .s3-sprungziel {
    animation: none;
  }
  html.bp-v2 .s3-sprungziel {
    box-shadow: 0 0 0 2px var(--success);
  }
}

@media print {
  html.bp-v2 .bh-assistent {
    display: none !important;
  }
}

/* ==== views/app-angebot.css ==== */
/* UI v2 – Angebot der Mac-App (views/app-angebot.js). Gerüst wie das Umzugsfenster. */

.bp-v2 .v2-appang-schleier {
  position: absolute;
  inset: 0;
  background: rgba(18, 34, 26, 0.42);
}

.bp-v2 .v2-appang-panel {
  position: relative;
  width: min(520px, 100%);
  outline: none;
}

.bp-v2 .v2-appang-panel > [data-appang-inhalt] {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.bp-v2 .v2-appang-zu {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.bp-v2 .v2-appang-kopf {
  display: grid;
  gap: var(--space-1);
  padding-right: var(--space-8);
}

.bp-v2 .v2-appang-titel {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
  text-wrap: balance;
}

.bp-v2 .v2-appang-kopf .v2-meta {
  margin: 0;
}

.bp-v2 .v2-appang-liste {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .v2-appang-punkt {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bp-v2 .v2-appang-punkt strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-md);
}

.bp-v2 .v2-appang-punkt .v2-meta {
  display: block;
}

.bp-v2 .v2-appang-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
}

.bp-v2 .v2-appang-schritte {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  background: var(--panel-muted);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bp-v2 .v2-appang-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.bp-v2 .v2-appang-aktionen .v2-btn--primary {
  text-decoration: none;
}

@media (max-width: 480px) {
  .bp-v2 .v2-appang-aktionen .v2-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ==== views/bank.css ==== */
/* UI v2 – Regeln der Ansicht „bank“ (views/bank.js). */

.bp-v2 .v2-bank-list {
  min-width: 0;
}

.bp-v2 .v2-bank-cards {
  display: grid;
}

/* Ein Projekt je Zeile, getrennt durch Linien – keine Kaesten in der Karte */
.bp-v2 .v2-bank-project {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4) 0;
}

.bp-v2 .v2-bank-project + .v2-bank-project {
  border-top: 1px solid var(--divider);
}

.bp-v2 .v2-bank-project.is-focused {
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--green-050);
}

.bp-v2 .v2-bank-project-rechts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.bp-v2 .v2-bank-sicher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-bank-sicher .v2-icon {
  width: 16px;
  height: 16px;
  color: var(--green-700);
}

.bp-v2 .v2-bank-project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.bp-v2 .v2-bank-project-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.bp-v2 .v2-bank-project-name > div {
  min-width: 0;
}

.bp-v2 .v2-bank-project-name h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-bank-accounts {
  display: grid;
  gap: var(--space-2);
}

.bp-v2 .v2-bank-account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.bp-v2 .v2-bank-account-main {
  min-width: 0;
}

.bp-v2 .v2-bank-account-main strong,
.bp-v2 .v2-bank-account-main p,
.bp-v2 .v2-bank-account-main .v2-cell-sub {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .v2-bank-account-main p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-bank-account-main .v2-cell-sub {
  margin-top: 3px;
}

.bp-v2 .v2-bank-account-select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.bp-v2 .v2-bank-project-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-bank-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text-secondary);
}

.bp-v2 .v2-bank-empty strong {
  display: block;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-bank-empty p {
  margin-top: 4px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.bp-v2 .v2-bank-period {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  max-width: 480px;
  padding-top: var(--space-2);
}

.bp-v2 .v2-bank-period .v2-field {
  flex: 0 1 260px;
}

.bp-v2 .v2-bank-period .v2-meta {
  padding-bottom: 8px;
}

.bp-v2 .v2-bank-connect {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
  background: var(--panel);
}

.bp-v2 .v2-bank-connect .v2-card-head {
  margin-bottom: 0;
}

.bp-v2 .v2-bank-connect .v2-card-foot {
  padding-top: var(--space-2);
}

.bp-v2 .v2-bank-connect .v2-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 720px) {

  .bp-v2 .v2-bank-project-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bp-v2 .v2-bank-account {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .bp-v2 .v2-bank-account-select {
    grid-column: 2;
  }

  .bp-v2 .v2-bank-account > .v2-icon-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .bp-v2 .v2-bank-period {
    align-items: stretch;
    flex-direction: column;
  }

  .bp-v2 .v2-bank-period .v2-field {
    flex-basis: auto;
  }

  .bp-v2 .v2-bank-period .v2-meta {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .bp-v2 .v2-bank-project-head { flex-wrap: wrap; }
  .bp-v2 .v2-bank-project-rechts { width: 100%; justify-content: space-between; }
}

/* ==== views/customers.css ==== */
/* UI v2 – Regeln der Ansicht „customers“ (views/customers.js). */

.bp-v2 .v2-masterdata-list,
.bp-v2 .v2-masterdata-editor {
  min-width: 0;
}

.bp-v2 .v2-masterdata-list .v2-card-head {
  align-items: flex-start;
}

.bp-v2 .v2-masterdata-search {
  flex: 0 1 300px;
  min-width: min(100%, 220px);
}

.bp-v2 .v2-masterdata-cards {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--divider);
}

.bp-v2 .v2-masterdata-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--divider);
}

.bp-v2 .v2-masterdata-row:last-child {
  border-bottom: 0;
}

.bp-v2 .v2-masterdata-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-700);
}

.bp-v2 .v2-masterdata-icon .v2-icon {
  width: 19px;
  height: 19px;
}

.bp-v2 .v2-masterdata-main {
  min-width: 0;
}

.bp-v2 .v2-masterdata-main h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-masterdata-main p {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-masterdata-main .v2-cell-sub {
  display: block;
  margin-top: 4px;
}

.bp-v2 .v2-masterdata-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.bp-v2 .v2-masterdata-actions .v2-icon-btn--sm {
  width: 32px;
  height: 32px;
}

.bp-v2 .v2-masterdata-editor {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .bp-v2 .v2-masterdata-list .v2-card-head {
    flex-direction: column;
  }

  .bp-v2 .v2-masterdata-search {
    width: 100%;
    max-width: none;
  }

  .bp-v2 .v2-masterdata-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bp-v2 .v2-masterdata-actions {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==== views/handovers.css ==== */
/* UI v2 – Regeln der Ansicht „handovers“ (views/handovers.js). */

.bp-v2 .v2-handovers [data-h="content"] { display: grid; gap: var(--abstand-karten); min-width: 0; }

/* Bereit fuer die Uebergabe: eine klare Aufgabe je Projekt */
.bp-v2 .v2-handover-ready-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bp-v2 .v2-handover-ready-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.bp-v2 .v2-handover-ready-item + .v2-handover-ready-item { border-top: 1px solid var(--divider); }
.bp-v2 .v2-handover-ready-text { display: grid; gap: 0; flex: 1 1 auto; min-width: 0; }
.bp-v2 .v2-handover-ready-item > .v2-btn,
.bp-v2 .v2-handover-ready--leer > .v2-btn { flex-shrink: 0; }
.bp-v2 .v2-handover-ready--leer { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); }
.bp-v2 .v2-handover-ready--leer .v2-meta { max-width: 70ch; line-height: 1.55; margin-top: var(--space-1); }
.bp-v2 .v2-handover-ready--leer > .v2-kpi-icon { flex-shrink: 0; }

/* Filter ueber dem Verlauf */
.bp-v2 .v2-handover-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.bp-v2 .v2-handover-filterbar .v2-field { margin: 0; width: auto; }
.bp-v2 .v2-handover-filterbar .v2-select { width: auto; min-width: 170px; }

@media (max-width: 767px) {
  .bp-v2 .v2-handover-ready--leer,
  .bp-v2 .v2-handover-ready-item { flex-wrap: wrap; }
  .bp-v2 .v2-handover-ready--leer > .v2-btn,
  .bp-v2 .v2-handover-ready-item > .v2-btn { width: 100%; justify-content: center; }
  .bp-v2 .v2-handover-filterbar .v2-field,
  .bp-v2 .v2-handover-filterbar .v2-select { width: 100%; }
}

/* ==== views/help.css ==== */
/* UI v2 – Hilfe (views/help.js) */

.bp-v2 .v2-help .v2-dash {
  align-items: stretch;
}

.bp-v2 .v2-help-rundgang {
  justify-content: space-between;
  min-height: 220px;
}

.bp-v2 .v2-help-text {
  max-width: 52ch;
  font-size: var(--text-md);
  color: #cfe6d6;
}

.bp-v2 .v2-help-aktionen {
  margin-top: var(--space-5);
}

.bp-v2 .v2-help-start {
  --btn-bg: #f1f8f3;
  --btn-fg: var(--green-900);
  --btn-border: #f1f8f3;
  --btn-bg-hover: #ffffff;               /* heller Knopf auf grünem Grund: wird weiß */
  --btn-border-hover: #ffffff;
  --btn-fg-hover: var(--green-900);
  --btn-bg-active: var(--green-100);
}

.bp-v2 .v2-help-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--green-050);
  color: var(--green-800);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  align-self: flex-start;
}

.bp-v2 .v2-help-mail:hover {
  background: var(--hover-flaeche);
}

.bp-v2 .v2-help-plattform {
  margin-top: auto;
  padding-top: var(--space-4);
}

.bp-v2 .v2-help-links {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .v2-help-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
}

/* Sieben Rechtstexte (mit Kündigen und Widerrufen) – enger gesetzt, damit die
 * Karte nicht doppelt so hoch wird wie ihre Nachbarn in der Reihe. */
.bp-v2 .v2-help-links--schlicht {
  gap: 0;
}

.bp-v2 .v2-help-links--schlicht a {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 10px;
}

.bp-v2 .v2-help-links a:hover {
  background: var(--hover-flaeche);
}

.bp-v2 .v2-help-links a > .v2-icon {
  color: var(--text-tertiary);
}

.bp-v2 .v2-help-links .v2-kpi-icon {
  width: 32px;
  height: 32px;
}

.bp-v2 .v2-help-link-titel {
  display: block;
  font-weight: var(--weight-medium);
}

.bp-v2 .v2-help-links .v2-meta {
  display: block;
}

.bp-v2 .v2-help .v2-card-foot kbd {
  margin-left: auto;
}

.bp-v2 .v2-help-app .v2-card-title {
  font-size: var(--text-md);
}

/* Kartenkopf: bricht der Knopf unter den Text (Telefon), steht er im Kartenkopf-Abstand darunter. */
.bp-v2 .v2-help-app .v2-row--wrap { row-gap: var(--abstand-kartentitel); }

/* ==== views/invoices.css ==== */
/* UI v2 – Regeln der Ansicht „invoices“ (views/invoices.js). */

.bp-v2 .v2-invoice-editor {
  border: 1px solid var(--green-200);
  background: var(--green-050);
}

.bp-v2 .v2-invoice-editor .v2-card-head {
  margin-bottom: var(--space-5);
}

.bp-v2 .v2-invoice-list {
  min-width: 0;
}

.bp-v2 .v2-invoice-table {
  min-width: 720px;
}

.bp-v2 .v2-invoice-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  white-space: nowrap;
}

.bp-v2 .v2-invoice-table .v2-table-action {
  width: 1%;
}

@media (max-width: 720px) {
  .bp-v2 .v2-invoice-table {
    min-width: 0;
  }

  .bp-v2 .v2-invoice-table .v2-table-action {
    display: flex;
    justify-content: flex-start;
    padding-top: var(--space-2) !important;
  }

  .bp-v2 .v2-invoice-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 719px) {
  /* Drei Handlungen brauchen eine eigene Zeile, sonst bleibt fuer den Empfaenger kein Platz */
  .bp-v2 .v2-invoice-table.v2-table--stack tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main amount"
      "meta status"
      "action action";
  }
  .bp-v2 .v2-invoice-table.v2-table--stack td[data-area="action"] { justify-self: start; margin-top: var(--space-2); }
}

/* ==== views/overview.css ==== */
/* UI v2 – Übersicht (views/overview.js) */

.bp-v2 .v2-overview .v2-page-head {
  margin-bottom: var(--space-5);
}

.bp-v2 .v2-ov-hinweise:empty {
  display: none;
}

.bp-v2 .v2-ov-hinweise {
  display: grid;
  gap: var(--space-3);
}

.bp-v2 .v2-ov-hinweise:not(:has(> :not([hidden]):not([data-leer="1"]):not(:empty))) {
  display: none;
}

.bp-v2 .v2-ov-einrichtung {
  padding: var(--space-4) var(--space-5);
}

.bp-v2 .v2-ov-einrichtung > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.bp-v2 .v2-ov-einrichtung > summary::-webkit-details-marker { display: none; }
html.bp-v2 body.bp-app .v2-ov-einrichtung > summary::after { content: none; }
.bp-v2 .v2-ov-einrichtung > summary > span { flex: 1; min-width: 0; }
.bp-v2 .v2-ov-einrichtung > summary strong { display: block; font-size: var(--text-sm); }
.bp-v2 .v2-ov-einrichtung > summary small { display: block; color: var(--text-secondary); font-size: var(--text-xs); margin-top: var(--space-1); }
.bp-v2 .v2-ov-einrichtung[open] > summary > svg:last-child { transform: rotate(180deg); }
html.bp-v2 body.bp-app .v2-ov-einrichtung #uev-einrichtung {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.bp-v2 .v2-ov-einrichtung #uev-einrichtung > .section-heading {
  display: none;
}

/* Kennzahlen: drei je Reihe – genug Breite für Titel, Vergleich und Verlauf */
.bp-v2 .v2-ov-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1279px) {
  .bp-v2 .v2-ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bp-v2 .v2-ov-kpis .v2-kpi {
  min-height: 158px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 42%);
  grid-template-areas:
    "head head"
    "value spark"
    "foot spark";
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: end;
}

.bp-v2 .v2-ov-kpis .v2-kpi > .v2-card-head { grid-area: head; align-self: start; }
.bp-v2 .v2-ov-kpis .v2-kpi > .v2-kpi-value { grid-area: value; }
.bp-v2 .v2-ov-kpis .v2-kpi > .v2-kpi-foot { grid-area: foot; align-self: start; }
.bp-v2 .v2-ov-kpis .v2-kpi > .v2-kpi-spark { grid-area: spark; align-self: end; height: 56px; }

@media (max-width: 1023px) {
  .bp-v2 .v2-ov-kpis .v2-kpi {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "value" "foot" "spark";
  }
  .bp-v2 .v2-ov-kpis .v2-kpi > .v2-kpi-spark { height: 34px; }
}

.bp-v2 .v2-ov-kpis .v2-kpi-title {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.25;
}

.bp-v2 .v2-ov-kpis .v2-kpi-foot {
  font-size: var(--text-xs);
  line-height: 1.35;
}

html.bp-v2 body.bp-app .v2-ov-kpis .v2-card--brand .v2-kpi-title {
  color: #d7ecdd !important;
}

.bp-v2 .v2-ov-kpis .v2-card--brand .v2-kpi-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--green-100);
}

.bp-v2 .v2-ov-kpis .v2-card--brand .v2-kpi-foot {
  color: var(--text-on-green-muted);
}

.bp-v2 .v2-ov-kpis .v2-card--brand .v2-icon-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #eaf5ed;
}

.bp-v2 .v2-ov-kpis .v2-card--brand .v2-icon-btn:hover {
  background: var(--hover-auf-gruen);
}

.bp-v2 .v2-kpi-spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: auto;
}

/* Beleglage */
.bp-v2 .v2-ov-lage-zahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.bp-v2 .v2-ov-lage-zahlen > div {
  display: grid;
  gap: 4px;
}

@media (max-width: 767px) {
  .bp-v2 .v2-ov-lage-zahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bp-v2 .v2-ov-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
}

.bp-v2 .v2-ov-bar {
  outline: none;
  cursor: default;
}

.bp-v2 .v2-ov-bar rect:not(.v2-ov-bar-hit) {
  transition: opacity var(--dur-fast) var(--ease-out);
}

.bp-v2 .v2-ov-chart:hover .v2-ov-bar:not(:hover) rect:not(.v2-ov-bar-hit) {
  opacity: 0.55;
}

.bp-v2 .v2-ov-bar:focus-visible rect:not(.v2-ov-bar-hit) {
  stroke: var(--green-500);
  stroke-width: 2;
}

.bp-v2 .v2-ov-chart-fuss {
  margin-top: var(--space-2);
}

/* Status */
.bp-v2 .v2-ov-donut-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
}

.bp-v2 .v2-ov-donut-wrap .v2-donut {
  width: min(200px, 100%);
}

.bp-v2 .v2-ov-donut-wrap .v2-status-list {
  width: 100%;
  gap: 10px;
}

.bp-v2 .v2-ov-status .v2-status-row-label {
  font-size: var(--text-sm);
}

.bp-v2 .v2-ov-status-zahl {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.bp-v2 .v2-ov-status-zahl .v2-status-row-value {
  font-size: var(--text-lg);
}

.bp-v2 .v2-ov-status-zahl .v2-meta {
  min-width: 34px;
  text-align: right;
}

@media (min-width: 1280px) and (max-width: 1479px) {
  .bp-v2 .v2-ov-donut-wrap .v2-donut {
    width: 170px;
  }
}

/* Projekte */
.bp-v2 .v2-ov-projekte {
  min-width: 0;
}

.bp-v2 .v2-ov-projekt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.bp-v2 .v2-ov-visual {
  background: linear-gradient(160deg, var(--panel-muted), var(--green-050));
}

.bp-v2 .v2-ov-visual--bereit {
  background: linear-gradient(160deg, var(--green-050), var(--green-100));
}

.bp-v2 .v2-ov-visual--neu {
  background: linear-gradient(160deg, var(--panel-muted), var(--neutral-bg));
}

.bp-v2 .v2-ov-visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 118px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.bp-v2 .v2-ov-visual.v2-project-visual {
  height: auto;
}

.bp-v2 .v2-ov-projekt-raster .v2-ov-visual .v2-pill {
  position: static !important;
}

.bp-v2 .v2-ov-visual-zahl {
  display: grid;
  gap: 2px;
  margin-top: var(--space-4);
}

.bp-v2 .v2-ov-visual-zahl .v2-metric {
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.bp-v2 .v2-ov-visual .v2-pill {
  z-index: 1;
}

.bp-v2 .v2-ov-fortschritt {
  display: grid;
  gap: 6px;
}

.bp-v2 .v2-ov-fortschritt strong {
  font-size: var(--text-sm);
}

.bp-v2 .v2-ov-projekt-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Aufgaben: Zeilen mit Haarlinie statt grauer Kaesten (Plan 2.3) */
.bp-v2 .v2-ov-aufgaben .v2-task-list {
  gap: 0;
}

.bp-v2 .v2-ov-aufgaben .v2-task {
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  background: transparent;
}

.bp-v2 .v2-ov-aufgaben .v2-task:last-child {
  border-bottom: 0;
}

.bp-v2 .v2-ov-aufgaben .v2-task:hover {
  background: transparent;
  border-color: var(--hover-akzent);
}

.bp-v2 .v2-task.is-done {
  background: transparent;
}

.bp-v2 .v2-task.is-done .v2-task-title {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.bp-v2 .v2-ov-aufgaben .v2-task .v2-btn {
  gap: 6px;
}

/* Quellen: fuenf Spalten ohne Kaesten, getrennt durch Haarlinien */
.bp-v2 .v2-ov-quellen-raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 1279px) {
  .bp-v2 .v2-ov-quellen-raster {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.bp-v2 .v2-ov-quelle {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0 !important;
  min-width: 0;
}

.bp-v2 .v2-ov-quelle-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px var(--space-2);
}

.bp-v2 .v2-ov-quelle-kopf .v2-pill {
  grid-column: 2;
  justify-self: start;
}

.bp-v2 .v2-ov-quelle strong {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.bp-v2 .v2-ov-quelle .v2-kpi-icon {
  width: 28px;
  height: 28px;
}

.bp-v2 .v2-ov-quelle .v2-btn {
  justify-self: start;
}

/* Karten ohne Verlauf nutzen die ganze Breite */
.bp-v2 .v2-ov-kpis .v2-kpi:not(:has(> .v2-kpi-spark)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "value" "foot";
}

/* Telefon: Kennzahlen kompakt, Diagrammbeschriftung nur im Tooltip */
@media (max-width: 599px) {
  .bp-v2 .v2-ov-kpis .v2-kpi {
    min-height: 0;
  }

  .bp-v2 .v2-ov-kpis .v2-kpi .v2-metric {
    font-size: var(--text-3xl);
  }

  .bp-v2 .v2-ov-chart .v2-axis-label,
  .bp-v2 .v2-ov-chart .v2-ov-peak {
    display: none;
  }
}

/* Einrichtung: der Aufklapper zeigt beim Ueberfahren, dass er klickbar ist */
.bp-v2 .v2-ov-einrichtung > summary:hover {
  background: var(--hover-flaeche);
}

/* Projekte in der Uebersicht: keine Karte in der Karte – die Flaeche oben traegt die Form */
html.bp-v2 body.bp-app .v2-ov-projekt-raster .v2-project-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ==== views/project-handover.css ==== */
/* UI v2 – Projektschritt: Aussehen des Bestands steht in compat/seiten/projekt-schritt*.css. */

/* ==== views/project-list.css ==== */
/* UI v2 – Regeln der Ansicht „project-list“ (views/project-list.js). */

.bp-v2 .v2-project-list { min-width: 0; }
.bp-v2 .v2-project-list [data-pl="content"] { display: grid; gap: var(--abstand-karten); min-width: 0; }

/* Kopf der Liste: Titel links, Suche und Ansicht rechts */
.bp-v2 .v2-project-list-actions,
.bp-v2 .v2-project-statuses,
.bp-v2 .v2-project-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bp-v2 .v2-project-list-head { align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.bp-v2 .v2-project-list-actions { gap: var(--space-3); }
.bp-v2 .v2-project-search { width: 280px; max-width: 100%; }
html.bp-v2 body.bp-app .v2-project-search input { padding-left: 40px !important; }

/* Eine Filterzeile: Umfang und Status links, Sortierung rechts */
.bp-v2 .v2-project-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.bp-v2 .v2-project-statuses { flex: 0 1 auto; gap: 6px; }
.bp-v2 .v2-project-sort { gap: var(--space-1); margin-left: auto; }
.bp-v2 .v2-project-sort > .v2-meta { margin-right: var(--space-1); }
.bp-v2 .v2-project-sort > .v2-th-sort { margin: 0; padding: 0 8px; font-size: var(--text-sm); color: var(--text-secondary); }
.bp-v2 .v2-project-sort > .v2-th-sort.is-active { color: var(--text-primary); font-weight: var(--weight-semibold); }

.bp-v2 .v2-project-group + .v2-project-group { margin-top: var(--space-6); }
.bp-v2 .v2-project-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.bp-v2 .v2-project-group-title > span { color: var(--text-secondary); font-weight: var(--weight-regular); }
.bp-v2 .v2-project-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--space-5); }

/* Projektkarte: Kennzahl oben, Name mit Umbenennen, Fuss mit klarem Knopf */
.bp-v2 .v2-project-info { min-width: 0; flex: 1 1 auto; }
.bp-v2 .v2-pl-visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  height: auto;
  min-height: 118px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: linear-gradient(160deg, var(--panel-muted), var(--green-050));
}
.bp-v2 .v2-project-visual--bereit.v2-pl-visual { background: linear-gradient(160deg, var(--green-050), var(--green-100)); }
.bp-v2 .v2-project-visual--neu.v2-pl-visual { background: linear-gradient(160deg, var(--panel-muted), var(--neutral-bg)); }
html.bp-v2 body.bp-app .v2-pl-visual .v2-pill { position: static; box-shadow: none; }
.bp-v2 .v2-pl-visual-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; }
.bp-v2 .v2-pl-visual-kopf > .v2-meta { font-size: var(--text-xs); white-space: nowrap; }
.bp-v2 .v2-pl-visual-zahl { display: grid; gap: 2px; }
.bp-v2 .v2-pl-visual-zahl .v2-metric { font-size: var(--text-2xl); line-height: 1.1; }
.bp-v2 .v2-pl-titel { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.bp-v2 .v2-pl-titel .v2-project-name a { color: inherit; text-decoration: none; }
.bp-v2 .v2-pl-titel .v2-project-name a:hover { color: var(--hover-akzent); text-decoration: underline; text-underline-offset: 3px; }
.bp-v2 .v2-project-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
.bp-v2 .v2-pl-foot-info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.bp-v2 .v2-pl-rename { display: grid; gap: var(--space-2); }
.bp-v2 .v2-pl-titel .v2-project-meta { margin-top: 2px; line-height: 1.45; }
html.bp-v2 body.bp-app :is(.v2-project-list, .v2-ov-projekt-raster) .v2-project-card { display: flex; flex-direction: column; padding: var(--space-4); }
.bp-v2 :is(.v2-project-list, .v2-ov-projekt-raster) .v2-project-body { flex: 1 1 auto; padding: 0; }
.bp-v2 :is(.v2-project-list, .v2-ov-projekt-raster) .v2-project-foot { margin-top: auto; padding-top: var(--space-1); }

/* Einrichtung: helle Karte mit einer klaren naechsten Aufgabe */
.bp-v2 .v2-project-setup { gap: var(--space-4); }
.bp-v2 .v2-project-setup-main { display: flex; align-items: center; gap: var(--space-4); }
.bp-v2 .v2-project-setup-main > .v2-kpi-icon { flex-shrink: 0; }
.bp-v2 .v2-project-setup-text { flex: 1 1 auto; min-width: 0; }
.bp-v2 .v2-project-setup-text .v2-meta { margin-top: var(--space-1); max-width: 75ch; line-height: 1.55; }
.bp-v2 .v2-project-setup-text strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.bp-v2 .v2-project-setup-main > .v2-btn { flex-shrink: 0; }
.bp-v2 .v2-project-setup-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}
.bp-v2 .v2-setup-step { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.bp-v2 .v2-setup-step svg { color: var(--text-tertiary); }
.bp-v2 .v2-setup-step.is-done { color: var(--text-primary); }
.bp-v2 .v2-setup-step.is-done svg { color: var(--green-700); }

.bp-v2 .v2-table-progress { display: flex; align-items: center; gap: var(--space-2); min-width: 100px; }
.bp-v2 .v2-table-progress > .v2-progress { flex: 1; }
.bp-v2 .v2-project-create form { display: grid; gap: var(--space-5); }
.bp-v2 .v2-project-create .v2-field { gap: var(--space-2); }
.bp-v2 .v2-project-create .v2-card-foot {
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.bp-v2 .v2-project-create .v2-card-foot .v2-btn { flex: 0 0 auto; }

@media (max-width: 767px) {
  .bp-v2 .v2-project-list-actions { width: 100%; }
  .bp-v2 .v2-project-search { flex: 1 1 100%; width: 100%; }
  .bp-v2 .v2-project-setup-main { flex-wrap: wrap; }
  .bp-v2 .v2-project-setup-main > .v2-btn { width: 100%; justify-content: center; }
  .bp-v2 .v2-project-sort { margin-left: 0; }
}

/* ==== views/project-order.css ==== */
/* UI v2 – Projektschritt: Aussehen des Bestands steht in compat/seiten/projekt-schritt*.css. */

/* ==== views/project-review.css ==== */
/* UI v2 – Projektschritt: Aussehen des Bestands steht in compat/seiten/projekt-schritt*.css. */

/* ==== views/project-sources.css ==== */
/* UI v2 – Projektschritt: Aussehen des Bestands steht in compat/seiten/projekt-schritt*.css. */

/* ==== views/receipts.css ==== */
/* UI v2 – Regeln der Ansicht „receipts“ (views/receipts.js). */

.bp-v2 .v2-receipts-status { margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-medium); color: var(--text-secondary); }
.bp-v2 .v2-receipts-bottom { margin: 0; }
.bp-v2 .v2-receipts-bottom > .v2-card { display: flex; flex-direction: column; }
.bp-v2 .v2-receipts-bottom .v2-card-foot { margin-top: auto; padding-top: var(--space-4); }
.bp-v2 .v2-receipts-bottom .v2-meta { line-height: 1.55; max-width: 60ch; }
.bp-v2 .v2-address-list { display: grid; gap: var(--space-3); }
.bp-v2 .v2-address-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bp-v2 .v2-address-row code { font-size: var(--text-sm); overflow-wrap: anywhere; }
.bp-v2 .v2-address-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bp-v2 .v2-address-actions { display: flex; gap: var(--space-1); flex: none; }
.bp-v2 .v2-address-help { margin-top: var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.bp-v2 .v2-address-help summary { cursor: pointer; font-weight: var(--weight-medium); color: var(--text-secondary); }
.bp-v2 .v2-address-help[open] > summary { color: var(--text-primary); }
.bp-v2 .v2-address-help > .v2-meta { margin: var(--space-2) 0 0; line-height: 1.5; max-width: 60ch; }
.bp-v2 .v2-address-help > .v2-meta[hidden], .bp-v2 .v2-fw-schritte[hidden] { display: none; }
/* Weiterleitung einrichten (06.10.2026): Umschalter fuer das Mailprogramm, darunter kurze nummerierte Schritte. */
.bp-v2 .v2-fw-wahl { margin-top: var(--space-4); }
.bp-v2 .v2-fw-schritte { margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: fw; display: grid; gap: var(--space-3); max-width: 60ch; }
.bp-v2 .v2-fw-schritte li { counter-increment: fw; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-3); align-items: start;
  color: var(--text-secondary); font-size: var(--text-base); line-height: 1.5; }
.bp-v2 .v2-fw-schritte li::before { content: counter(fw); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--radius-pill);
  background: var(--panel-sunken); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; }
.bp-v2 .v2-fw-schritte strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.bp-v2 .v2-address-help > .v2-fw-hinweis { margin: var(--space-3) 0 0 calc(22px + var(--space-3)); }
.bp-v2 .v2-address-gmail { display: grid; gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 0 calc(var(--space-8) + var(--space-3)); padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--text-primary); font-size: var(--text-sm); }
.bp-v2 .v2-address-gmail code { font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: .04em; }
.bp-v2 .v2-address-gmail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* „Dokument fehlt?“ als schmale Hinweiszeile (UI-Pass 22.09.2026): Zeichen,
   ein Satz, rechts der Weg. Am Handy steht der Knopf unter dem Text. */
.bp-v2 .v2-receipts-bottom > .v2-rec-fehlt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.bp-v2 .v2-rec-fehlt .v2-card-title {
  margin: 0;
  font-size: var(--text-md);
}
.bp-v2 .v2-rec-fehlt-text p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.bp-v2 .v2-rec-fehlt-tun .v2-btn {
  white-space: nowrap;
}
@media (max-width: 620px) {
  .bp-v2 .v2-receipts-bottom > .v2-rec-fehlt {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bp-v2 .v2-rec-fehlt-tun {
    grid-column: 1 / -1;
  }
  .bp-v2 .v2-rec-fehlt-tun .v2-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* Belege selbst verwalten (24.09.2026): Datei ersetzen, löschen, neue Scan-Version. */
.bp-v2 .v2-rec-aktionen { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Ein Beleg in mehreren Projekten (Henry, 30.09.2026): jedes Projekt mit seinem Stand untereinander. */
/* Zwei Spalten wie eine kleine Tabelle - Projekt | Stand -, damit der Stand am Handy nicht als lose Zeile unter dem
   Projekt landet (Probelauf 390 px: „Noch offen“ stand allein unter „2026 Kreditkarte“). */
.bp-v2 .v2-rec-projekte { display: grid; grid-template-columns: minmax(0, auto) auto; gap: var(--space-1) var(--space-3);
  justify-content: start; align-items: center; }
.bp-v2 .v2-rec-projekt { display: contents; }
.bp-v2 .v2-rec-projekte .v2-btn { white-space: normal; text-align: left; justify-self: start; }
.bp-v2 .v2-rec-projekte .v2-meta { white-space: nowrap; }
.bp-v2 .v2-rec-loeschen:hover:not(:disabled) { color: var(--danger); }
.bp-v2 .v2-rec-scan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg);
  border: 1px solid var(--warning-border); color: var(--text-primary); font-size: var(--text-sm); line-height: 1.45; }
.bp-v2 .v2-rec-scan-knoepfe { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

/* Verlauf eines Belegs (GoBD-Pruefung 09.10.2026): eine Zeile ueber die ganze Breite unter dem Beleg. Den Inhalt
   baut /static/beleg-verlauf.js - dieselben Klassen (kv-…) wie in der Belegvorschau des Projekts. */
.bp-v2 .v2-rec-verlauf-zeile > td { padding: 0 var(--space-4) var(--space-4); }
.bp-v2 .v2-rec-verlauf { display: grid; gap: var(--space-3); padding-top: var(--space-3); font-size: var(--text-sm);
  line-height: 1.45; color: var(--text-primary); }
.bp-v2 .v2-rec-verlauf h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.bp-v2 .v2-rec-verlauf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bp-v2 .v2-rec-verlauf li { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-4);
  padding-top: var(--space-2); border-top: 1px solid var(--border-subtle, var(--border)); max-width: none; }
.bp-v2 .v2-rec-verlauf li:first-child { border-top: 0; padding-top: 0; }
.bp-v2 .v2-rec-verlauf .kv-wann { color: var(--text-secondary); white-space: nowrap; }
.bp-v2 .v2-rec-verlauf .kv-wer { color: var(--text-secondary); }
.bp-v2 .v2-rec-verlauf .kv-was { overflow-wrap: anywhere; }
.bp-v2 .v2-rec-verlauf .kv-leer, .bp-v2 .v2-rec-verlauf .kv-hinweis { margin: 0; color: var(--text-secondary); }

/* Trinkgeld-Satz (Kawentsmann, Sichtpruefung 27.09.2026): „52,90 €“, „+ 5,10 € Trinkgeld“, „= 58,00 €“ brechen nie
   in sich, nur zwischen den Teilen (views/receipts.js, betragHtml). */
.bp-v2 .v2-betrag-teil { display: inline-block; white-space: nowrap; }

@media (max-width: 720px) {
  /* Am Handy (gestapelte Tabelle): drei Handlungen - oeffnen, ersetzen, loeschen - brauchen eine eigene Zeile, sonst
     bleibt fuer den Belegnamen ein Buchstabe und das Etikett liegt ueber dem Projekt (Sichtpruefung 27.09.2026, 390 px;
     so schon bei den Rechnungen, views/invoices). Der Trinkgeld-Satz steht dort je Teil in einer Zeile. */
  .bp-v2 .v2-receipts-table.v2-table--stack tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main amount"
      "meta status"
      "action action";
  }
  .bp-v2 .v2-receipts-table.v2-table--stack td[data-area="action"] { justify-self: start; margin-top: var(--space-2); }
  .bp-v2 .v2-receipts-table.v2-table--stack .v2-betrag-teil { display: block; }
  /* Die Verlaufszeile ist keine Belegzeile: ein Block ueber die ganze Breite, Zeit und Satz untereinander. */
  .bp-v2 .v2-receipts-table.v2-table--stack tbody tr.v2-rec-verlauf-zeile { display: block; }
  .bp-v2 .v2-receipts-table.v2-table--stack tr.v2-rec-verlauf-zeile > td { display: block; padding: 0 0 var(--space-3); }
  .bp-v2 .v2-rec-verlauf li { grid-template-columns: 1fr; }
}

/* ==== views/settings.css ==== */
/* UI v2 – Regeln der Ansicht „settings“ (views/settings.js). */

.bp-v2 .v2-settings,
.bp-v2 .v2-masterdata,
.bp-v2 .v2-invoices,
.bp-v2 .v2-bank {
  display: grid;
  gap: var(--abstand-karten);
}

.bp-v2 .v2-settings-nav,
.bp-v2 .v2-masterdata-nav,
.bp-v2 .v2-invoice-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(var(--space-2) * -1) 0 0;
}

.bp-v2 .v2-settings-tab,
.bp-v2 .v2-masterdata-nav a,
.bp-v2 .v2-invoice-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.bp-v2 .v2-settings-tab:hover,
.bp-v2 .v2-masterdata-nav a:hover,
.bp-v2 .v2-invoice-nav a:hover {
  color: var(--text-primary);
  background: var(--hover-flaeche);
}

.bp-v2 .v2-settings-tab.is-active,
.bp-v2 .v2-masterdata-nav a.is-active,
.bp-v2 .v2-invoice-nav a.is-active {
  border-color: var(--green-200);
  background: var(--green-100);
  color: var(--green-800);
}

.bp-v2 .v2-settings-tab .v2-icon,
.bp-v2 .v2-masterdata-nav a .v2-icon,
.bp-v2 .v2-invoice-nav a .v2-icon {
  width: 16px;
  height: 16px;
}

.bp-v2 .v2-settings-grid {
  align-items: stretch;
}

.bp-v2 .v2-settings-grid > .v2-card {
  min-width: 0;
}

/* alte dunkle Begruessungskarte entfernt – siehe Kontokarte unten */

.bp-v2 .v2-settings-status-list,
.bp-v2 .v2-settings-project-list,
.bp-v2 .v2-settings-link-grid,
.bp-v2 .v2-settings-subscriptions,
.bp-v2 .v2-usage-source-list,
.bp-v2 .v2-usage-purchase-list {
  display: grid;
  gap: var(--space-2);
}

.bp-v2 .v2-settings-status-row,
.bp-v2 .v2-settings-project-row,
.bp-v2 .v2-settings-subscription,
.bp-v2 .v2-usage-source,
.bp-v2 .v2-usage-purchase-list > div {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}

.bp-v2 .v2-settings-status-row:last-child,
.bp-v2 .v2-settings-project-row:last-child,
.bp-v2 .v2-settings-subscription:last-child,
.bp-v2 .v2-usage-source:last-child,
.bp-v2 .v2-usage-purchase-list > div:last-child {
  border-bottom: 0;
}

.bp-v2 .v2-settings-status-row > strong,
.bp-v2 .v2-settings-project-row > .v2-truncate,
.bp-v2 .v2-settings-subscription > div:first-child,
.bp-v2 .v2-usage-source > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}

.bp-v2 .v2-settings-project-row,
.bp-v2 .v2-settings-link-grid a {
  color: var(--text-primary);
  text-decoration: none;
}

.bp-v2 .v2-settings-project-row:hover {
  color: var(--hover-akzent);
}

/* Darstellung: keine Verknüpfung, sondern ein Schalter in der Zeile. Auf dem
   Handy rutscht er unter den Namen. */
.bp-v2 .v2-settings-darstellung {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.bp-v2 .v2-settings-darstellung:hover {
  color: var(--hover-akzent);
}

.bp-v2 .v2-settings-darstellung .v2-darstellung {
  flex: none;
  margin-left: auto;
}

.bp-v2 .v2-settings-link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bp-v2 .v2-settings-link-grid a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.bp-v2 .v2-settings-link-grid a:hover {
  background: var(--hover-flaeche);
  color: var(--hover-akzent);
}

.bp-v2 .v2-settings-link-grid a .v2-icon {
  color: var(--green-700);
}

.bp-v2 .v2-access-price,
.bp-v2 .v2-plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.bp-v2 .v2-access-price strong,
.bp-v2 .v2-plan-price strong {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.bp-v2 .v2-access-price span,
.bp-v2 .v2-plan-price span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.bp-v2 .v2-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel-muted);
}

.bp-v2 .v2-plan-card.is-current {
  border-color: var(--green-300);
  background: var(--green-050);
  box-shadow: inset 0 0 0 1px var(--green-200);
}

.bp-v2 .v2-plan-card .v2-card-head {
  margin-bottom: 0;
}

.bp-v2 .v2-plan-card h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-plan-card h3 small {
  display: block;
  margin-top: 2px;
  color: var(--green-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.bp-v2 .v2-plan-card > p {
  min-height: 3em;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-plan-card ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-plan-card li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: baseline;
}

.bp-v2 .v2-plan-card li .v2-icon {
  width: 15px;
  height: 15px;
  color: var(--green-700);
}

.bp-v2 .v2-plan-card li span {
  color: var(--text-primary);
  text-align: right;
}

.bp-v2 .v2-plan-recommended {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-usage-progress .v2-card-head {
  align-items: flex-start;
}

.bp-v2 .v2-usage-percent {
  color: var(--green-700);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-usage-source strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.bp-v2 .v2-usage-purchase-list > div {
  justify-content: space-between;
}

.bp-v2 .v2-kpi-icon--error {
  --kpi-tint: var(--danger-bg);
  --kpi-ink: var(--danger-strong);
}

@media (max-width: 720px) {
  .bp-v2 .v2-settings-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-v2 .v2-settings-status-row,
  .bp-v2 .v2-settings-subscription {
    align-items: flex-start;
  }

  .bp-v2 .v2-settings-status-row .v2-pill,
  .bp-v2 .v2-settings-subscription .v2-pill {
    margin-left: auto;
  }
}

/* Kontokarte der Einstellungen: hell, mit Kuerzel, zwei klare Wege */
.bp-v2 .v2-settings-welcome { display: flex; flex-direction: column; gap: var(--space-4); }
.bp-v2 .v2-settings-konto { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.bp-v2 .v2-settings-konto-text { min-width: 0; }
.bp-v2 .v2-settings-konto-text .v2-meta { margin-top: 2px; overflow-wrap: anywhere; }
.bp-v2 .v2-settings-welcome > .v2-meta { max-width: 60ch; line-height: 1.55; }
.bp-v2 .v2-settings-welcome .v2-card-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* Reiter am Handy in einer Zeile, seitlich wischbar statt umbrechend */
@media (max-width: 620px) {
  .bp-v2 .v2-settings-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .bp-v2 .v2-settings-nav::-webkit-scrollbar { display: none; }
  .bp-v2 .v2-settings-nav a { flex: none; }
}

/* Kopf, AVV-Hinweis und Reiter im gleichen Abstand – mit und ohne Hinweis.
 * Der leere Platzhalter des Hinweises zählte sonst als eigene Rasterzeile. */
.bp-v2 .v2-settings > .v2-settings-nav { margin-top: 0; }
.bp-v2 .v2-settings > [data-settings-avv]:not(:has(> #avv-hinweis:not([hidden]))) { display: none; }

/* Kontokarte: Zugang und Verbrauch als ruhige Zeilen */
.bp-v2 .v2-settings-fakten { display: grid; margin: 0; border-top: 1px solid var(--divider); }
.bp-v2 .v2-settings-fakten > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--divider);
}
.bp-v2 .v2-settings-fakten dt { color: var(--text-secondary); font-size: var(--text-sm); }
.bp-v2 .v2-settings-fakten dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: right;
}

/* Zeilen mit Pfeil (Weitere Einstellungen) */
.bp-v2 .v2-settings-project-row > .v2-icon:last-child {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}
.bp-v2 .v2-settings-project-row:hover > .v2-icon:last-child { color: var(--hover-akzent); }

/* Reiter am Handy: rechts ausblenden, damit sichtbar ist, dass es weitergeht */
@media (max-width: 620px) {
  .bp-v2 .v2-settings-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  /* Am Ende gibt es nichts mehr zu wischen – dann verdeckt die Ausblendung nur den letzten Reiter (settings.js). */
  .bp-v2 .v2-settings-nav.v2-nav-ende {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Deine Daten (19.09.2026): Export und die beiden Löschwege */
.bp-v2 .v2-settings-daten {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
}

.bp-v2 .v2-settings-daten-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.bp-v2 .v2-settings-daten-zeile > div {
  flex: 1 1 280px;
  min-width: 0;
}

.bp-v2 .v2-settings-gefahr {
  border-top: 1px solid var(--divider);
  padding-top: var(--space-3);
}

.bp-v2 .v2-settings-gefahr > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--danger-strong);
  font-weight: 600;
}

.bp-v2 .v2-settings-gefahr > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-danger);
  border-radius: 6px;
}

.bp-v2 .v2-settings-gefahr[open] > summary {
  margin-bottom: var(--space-3);
}

.bp-v2 .v2-settings-gefahr form {
  display: grid;
  gap: var(--space-3);
}

.bp-v2 .v2-settings-gefahr--ruhig > summary {
  color: var(--text-primary);
}


/* Buchhaltung (04.10.2026, buchhaltung-karte.js): eine ganze Zeile wie „Daten mitbringen“ darüber. Je verbundener
   Buchhaltung ein Block, darunter die Wahl der nächsten mit ihrem Formular. Der Platzhalter verschwindet aus dem Raster
   (display: contents), solange er gefüllt ist; leer bleibt er verborgen und belegt keine Zelle. */
.bp-v2 .v2-settings-buchhaltung-platz:not([hidden]) {
  display: contents;
}

.bp-v2 .v2-settings-buchhaltung {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
}

.bp-v2 .v2-settings-bh-zugang {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
}

.bp-v2 .v2-settings-bh-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.bp-v2 .v2-settings-bh-name {
  flex: 1 1 260px;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bp-v2 .v2-settings-bh-name .v2-meta {
  overflow-wrap: anywhere;
}

.bp-v2 .v2-settings-bh-meldung {
  color: var(--warning-strong);
}

.bp-v2 .v2-settings-bh-wahl {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
}

.bp-v2 .v2-settings-bh-wahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-settings-bh-formular {
  display: grid;
  gap: var(--space-2);
  max-width: 640px;
}

.bp-v2 .v2-settings-bh-schritte {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}

.bp-v2 .v2-settings-bh-schritte code,
.bp-v2 .v2-settings-bh-formular code {
  overflow-wrap: anywhere;
}

.bp-v2 .v2-settings-bh-kopie {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-left: var(--space-1);
}

.bp-v2 .v2-settings-bh-kopie code {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--hover-flaeche);
  color: var(--text-primary);
}

.bp-v2 .v2-settings-sevdesk {
  display: grid;
  gap: var(--space-2);
}

.bp-v2 .v2-settings-sevdesk-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-settings-sevdesk [data-settings-status]:empty {
  display: none;
}

.bp-v2 .v2-settings-buchhaltung-hinweis {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.bp-v2 .v2-settings-bh-bestaetigung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.bp-v2 .v2-settings-bh-aktionen {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Kartenkopf: die beiden Karten sind Raster mit 12 px Abstand - der Kopf bringt nur die fehlenden 4 px mit, sonst
   standen 28 px unter dem Titel und 16 px unter dem jeder anderen Karte der Seite. */
.bp-v2 .v2-settings-umzug > .v2-card-head,
.bp-v2 .v2-settings-daten > .v2-card-head { margin-bottom: var(--space-1); }

/* ==== views/systemstatus.css ==== */
/* UI v2 – Systemstatus (core/systemstatus.js): Band bei Störung, Karte in der Hilfe */

.bp-v2 .v2-systemstatus {
  padding: var(--space-2) var(--space-7) 0;
  max-width: calc(var(--content-max) + 2 * var(--space-7));
}

.bp-v2 .v2-systemstatus-hinweis {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
}

.bp-v2 .v2-systemstatus-inhalt p {
  margin: 2px 0 0;
}

.bp-v2 .v2-systemstatus-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 720px) {
  .bp-v2 .v2-systemstatus { padding-inline: var(--space-4); }
  .bp-v2 .v2-systemstatus-hinweis { grid-template-columns: 20px minmax(0, 1fr); }
  .bp-v2 .v2-systemstatus-aktionen { grid-column: 2; }
}

/* Karte in der Hilfe */
.bp-v2 .v2-status-gesamt {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--success);
}

.bp-v2 .v2-status-gesamt--eingeschraenkt,
.bp-v2 .v2-status-gesamt--wartung { color: var(--warning-strong); }
.bp-v2 .v2-status-gesamt--stoerung { color: var(--danger-strong); }

.bp-v2 .v2-status-liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .v2-status-zeile {
  /* Die Lesebreite fuer Fliesstext (max-width an li) gilt fuer eine Tabellenzeile nicht. */
  max-width: none;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.bp-v2 .v2-status-zeile:first-child { border-top: 0; }

.bp-v2 .v2-status-name {
  display: grid;
  gap: 2px;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-status-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  transform: translateY(1px);
}

.bp-v2 .v2-status-punkt--gut { background: var(--success); }
.bp-v2 .v2-status-punkt--info { background: var(--info-strong); }
.bp-v2 .v2-status-punkt--warn { background: var(--warning-strong); }
.bp-v2 .v2-status-punkt--stoerung { background: var(--danger-strong); }

.bp-v2 .v2-status-wort {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.bp-v2 .v2-status-wort--betrieb { color: var(--success); }
.bp-v2 .v2-status-wort--eingeschraenkt,
.bp-v2 .v2-status-wort--wartung { color: var(--warning-strong); }
.bp-v2 .v2-status-wort--stoerung { color: var(--danger-strong); font-weight: var(--weight-semibold); }

/* ==== views/umzug.css ==== */
/* UI v2 – Umzugsfenster (views/umzug.js) */

.bp-v2 .v2-umzug-schleier {
  position: absolute;
  inset: 0;
  background: rgba(18, 34, 26, 0.42);
}

.bp-v2 .v2-umzug-panel {
  position: relative;
  width: min(620px, 100%);
  display: grid;
  gap: var(--space-4);
  outline: none;
}

.bp-v2 .v2-umzug-panel.is-breit {
  width: min(760px, 100%);
}

.bp-v2 .v2-umzug-panel > [data-umzug-inhalt] {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.bp-v2 .v2-umzug-zu {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.bp-v2 .v2-umzug-kopf {
  display: grid;
  gap: var(--space-1);
  padding-right: var(--space-8);
}

.bp-v2 .v2-umzug-titel {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
  text-wrap: balance;
}

.bp-v2 .v2-umzug-kopf .v2-meta {
  margin: 0;
  overflow-wrap: anywhere;
}

.bp-v2 .v2-umzug-kopf--fertig {
  justify-items: start;
}

.bp-v2 .v2-umzug-haken-gross {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success);
}

.bp-v2 .v2-umzug-haken-gross svg {
  width: 24px;
  height: 24px;
}

/* Angebot: zwei gleichwertige Karten nebeneinander */
.bp-v2 .v2-umzug-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.bp-v2 .v2-umzug-karte {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.bp-v2 .v2-umzug-karte strong {
  color: var(--text-primary);
  font-size: var(--text-lg);
}

.bp-v2 .v2-umzug-karte.is-empfohlen {
  border-color: var(--green-600);
  background: var(--panel-selected);
}

.bp-v2 .v2-umzug-karte:hover,
.bp-v2 .v2-umzug-quelle:hover {
  border-color: var(--hover-akzent);
  box-shadow: var(--shadow-card-hover);
}

.bp-v2 .v2-umzug-karte:focus-visible,
.bp-v2 .v2-umzug-quelle:focus-visible,
.bp-v2 .v2-umzug-art-knopf:focus-visible,
.bp-v2 .v2-umzug-ablage:focus-within {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bp-v2 .v2-umzug-karte-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
}

.bp-v2 .v2-umzug-karte-fuss {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-link);
  font-weight: var(--weight-semibold);
}

/* Programm wählen */
.bp-v2 .v2-umzug-quellen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
}

.bp-v2 .v2-umzug-quelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}

/* Datei wählen */
.bp-v2 .v2-umzug-wege {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--panel-muted);
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-wege dt {
  color: var(--text-tertiary);
}

.bp-v2 .v2-umzug-wege dd {
  margin: 0;
  color: var(--text-primary);
}

.bp-v2 .v2-umzug-ablage {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-7) var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--panel-muted);
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
}

.bp-v2 .v2-umzug-ablage.is-ziel,
.bp-v2 .v2-umzug-ablage:hover {
  border-color: var(--hover-akzent);
  background: var(--hover-flaeche);
}

.bp-v2 .v2-umzug-ablage input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bp-v2 .v2-umzug-ablage svg {
  width: 26px;
  height: 26px;
  color: var(--green-700);
}

.bp-v2 .v2-umzug-belege,
.bp-v2 .v2-umzug-schon,
.bp-v2 .v2-umzug-warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.bp-v2 .v2-umzug-belege svg,
.bp-v2 .v2-umzug-schon svg,
.bp-v2 .v2-umzug-warnung svg {
  flex: none;
  margin-top: 2px;
}

.bp-v2 .v2-umzug-schon {
  color: var(--success);
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-warnung {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--warning-bg, #fdf3dc);
  color: var(--warning-strong, #7a5310);
  font-size: var(--text-sm);
}

/* Vorschau */
.bp-v2 .v2-umzug-art {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--panel-sunken);
}

.bp-v2 .v2-umzug-art-knopf {
  padding: 6px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.bp-v2 .v2-umzug-art-knopf.is-active {
  background: var(--panel);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-card);
}

.bp-v2 .v2-umzug-beispiele {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.bp-v2 .v2-umzug-beispiele li {
  display: grid;
  gap: 2px;
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--divider);
  min-width: 0;
}

.bp-v2 .v2-umzug-beispiele li:last-child {
  border-bottom: 0;
}

.bp-v2 .v2-umzug-beispiele strong,
.bp-v2 .v2-umzug-beispiele span {
  overflow-wrap: anywhere;
}

.bp-v2 .v2-umzug-beispiele span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-zuordnung > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-umzug-zuordnung > summary small {
  color: var(--text-tertiary);
  font-weight: var(--weight-regular, 400);
}

.bp-v2 .v2-umzug-tabelle {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.bp-v2 .v2-umzug-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-tabelle th,
.bp-v2 .v2-umzug-tabelle td {
  padding: 6px var(--space-2) 6px 0;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: middle;
}

.bp-v2 .v2-umzug-tabelle thead th {
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-umzug-tabelle tbody th {
  font-weight: var(--weight-semibold);
}

.bp-v2 .v2-umzug-tabelle tbody th small {
  display: block;
  max-width: 28ch;
  overflow: hidden;
  color: var(--text-tertiary);
  font-weight: var(--weight-regular, 400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-v2 .v2-umzug-tabelle select {
  min-width: 180px;
}

/* Archiv (ZIP): Zählung und Fortschritt */
.bp-v2 .v2-umzug-zaehlung {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-v2 .v2-umzug-zaehlung li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-zaehlung strong {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bp-v2 .v2-umzug-zaehlung small,
.bp-v2 .v2-umzug-haken small {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.bp-v2 .v2-umzug-balken {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--panel-sunken);
}

.bp-v2 .v2-umzug-balken > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green-600);
  transition: width 0.4s var(--ease-out);
}

.bp-v2 .v2-umzug-warnung a {
  color: inherit;
  text-decoration: underline;
}

.bp-v2 .v2-umzug-haken {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.bp-v2 .v2-umzug-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.bp-v2 .v2-umzug-fuss-rechts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bp-v2 .v2-umzug [data-umzug-status]:empty {
  display: none;
}

.bp-v2 .v2-settings-umzug {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .bp-v2 .v2-umzug-karte,
  .bp-v2 .v2-umzug-balken > span {
    transition: none;
  }
}

/* ==== dunkel.css ==== */
/* BelegHero UI v2 – Dunkelmodus: was die Token allein nicht lösen
 *
 * Fast alles folgt den Farbwerten aus tokens.css (html[data-theme="dark"]).
 * Hier steht nur, was im Dunkeln eine ANDERE Entscheidung braucht als ein
 * getauschter Wert: Schleier hinter Dialogen, der Schimmer der Ladeplatzhalter,
 * feste Farben aus dem Bestand. Jede Regel beginnt mit
 * html.bp-v2[data-theme="dark"] – im Hellen greift keine davon.
 *
 * Steht als letzte Datei im Bündel (scripts/ui_v2_einbinden.py), damit sie bei
 * gleicher Gewichtung gewinnt.
 */

/* Bestand: Token aus theme.css, die tokens-legacy.css nicht abbildet ----------
 * theme.css setzt sie auf :root (dort rechnen auch --card & Co. mit ihnen),
 * deshalb hier am Wurzelelement. --bp-white ist im Bestand Fläche UND Schrift
 * auf der Hausfarbe; als Schrift steht dort var(--bp-auf-gruen, var(--bp-white)). */
html.bp-v2[data-theme="dark"] {
  --bp-white: var(--panel);
  --bp-auf-gruen: #f6fbf7;
  --bp-app-surface: var(--panel);
  --bp-surface: var(--panel);
  --bp-app-page: var(--workspace);
  --bp-bone: var(--panel-muted);
  --bp-canvas: var(--workspace);
  --bp-app-tonal: var(--panel-muted);
  --bp-soft: var(--panel-muted);
  --bp-app-tonal-strong: var(--panel-sunken);
  --bp-surface-subtle: var(--panel-sunken);
  --bp-ash: var(--panel-sunken);
  --bp-warm: var(--panel-sunken);
  --bp-peach: var(--panel-sunken);
  --bp-sage: var(--panel-sunken);
  --bp-sky: var(--panel-sunken);
  --bp-ink: var(--text-primary);
  --bp-corporate: var(--text-primary);
  --bp-ink-2: var(--text-secondary);
  --bp-corporate-2: var(--text-secondary);
  --bp-muted: var(--text-secondary);
  --bp-line: var(--border-subtle);
  --bp-line-strong: var(--border-default);
  --bp-accent-soft: var(--green-100);
  --bp-green-soft: var(--green-100);
  /* bp2.css: nicht abgebildete Töne */
  --green-wash: var(--green-100);
  --amber-wash: var(--warning-bg);
}

/* Rollen für feste Farben im Bestand ------------------------------------------
 * scripts/ui_v2_dunkel_bestand.py schreibt jede helle Fläche/Linie und jede
 * dunkle Schrift in bp2.css, theme.css, app-neu.css, anmeldung.css, admin.css
 * und den <style>-Blöcken der Seiten als var(--dunkel-<rolle>, <alter Wert>).
 * Nur hier sind die Rollen definiert – im Hellen gilt der alte Wert. */
html.bp-v2[data-theme="dark"] {
  --dunkel-flaeche: var(--panel);
  --dunkel-flaeche-2: var(--panel-muted);
  --dunkel-flaeche-3: var(--panel-raised);
  --dunkel-flaeche-hauch: rgba(255, 255, 255, 0.05);
  --dunkel-neutral-mittel: #404545;
  --dunkel-gruen-grund: var(--green-100);
  --dunkel-warnung-grund: var(--warning-bg);
  --dunkel-gefahr-grund: var(--danger-bg);
  --dunkel-info-grund: var(--info-bg);
  --dunkel-lila-grund: var(--status-missing-bg);
  --dunkel-linie: var(--border-subtle);
  --dunkel-linie-2: var(--border-default);
  --dunkel-gruen-linie: var(--green-200);
  --dunkel-warnung-linie: var(--warning-border);
  --dunkel-gefahr-linie: var(--danger-border);
  --dunkel-info-linie: var(--info-border);
  --dunkel-schrift: var(--text-primary);
  --dunkel-schrift-2: var(--text-secondary);
  --dunkel-gruen: var(--green-700);
  --dunkel-warnung: var(--warning-strong);
  --dunkel-gefahr: var(--danger-strong);
  --dunkel-info: var(--info-strong);
  --dunkel-lila: var(--status-missing-strong);
}

/* Eigene Töne einzelner Seiten und Blätter ------------------------------------ */
/* Schritt 1 (index.html): Gesprächsfläche, rechte Spalte, Nutzerblase */
html.bp-v2[data-theme="dark"] body.bp-app.schritt-auftrag {
  --s1-grund: var(--workspace);
  --s1-spalte: var(--panel-muted);
  --s1-wasch: var(--green-050);
  --s1-nutzer: var(--green-100);
}

/* verlauf.css (Transparenz-Log, Admin): Raster und Balken der Verlaufsgrafik.
   Dort auf :root gesetzt – deshalb hier am Wurzelelement. */
html.bp-v2[data-theme="dark"] {
  --v-balken: var(--green-500);
  --v-balken-an: var(--green-700);
  --v-text: var(--text-tertiary);
  --v-grundlinie: var(--border-default);
  --v-raster: var(--divider);
  --v-leer: var(--text-disabled);
}

/* anmeldung.css: der warme Seitengrund („das beige kann so bleiben“ – im Hellen). */
html.bp-v2[data-theme="dark"] .anmeldung {
  --an-grund: var(--backdrop);
  --an-still: var(--panel-muted);
}

/* Schleier: im Dunkeln trägt Schwarz, grün getönte Schleier verschwinden. */
html.bp-v2[data-theme="dark"] .v2-overlay,
html.bp-v2[data-theme="dark"] .v2-search-backdrop,
html.bp-v2[data-theme="dark"] .v2-umzug-schleier {
  background: rgba(0, 0, 0, 0.58);
}

html.bp-v2[data-theme="dark"] body.bp-app .bp-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

html.bp-v2[data-theme="dark"] body.bp-app .bp-limit-huelle {
  background: rgba(0, 0, 0, 0.58);
}

/* Bestands-Dialoge (Transparenz-Log, Archiv, Kauf): theme.css legt einen
   blaugrünen Schleier darüber – auf dunklem Grund wirkt er wie ein Farbstich. */
html.bp-v2[data-theme="dark"] body.bp-app .modal-overlay,
html.bp-v2[data-theme="dark"] body.bp-app #purchased-modal,
html.bp-v2[data-theme="dark"] body.bp-auth #success-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Ladeplatzhalter: ein leiser Lichtstreif statt des weissen Bandes. */
html.bp-v2[data-theme="dark"] .v2-skeleton::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Meldungen und Sammelleiste bleiben dunkelgrün; auf dunklem Grund brauchen
   sie eine feine Kante, sonst verschwimmen sie mit der Fläche. */
html.bp-v2[data-theme="dark"] :is(.v2-toast, .v2-bulkbar) {
  box-shadow: var(--shadow-popover), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.bp-v2[data-theme="dark"] [data-tip]::after {
  box-shadow: var(--shadow-raised), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.bp-v2[data-theme="dark"] body.v2-konto-bestand #knopf-widerrufen {
  border-color: var(--danger-border) !important;
}

/* Seitengrund: theme.css setzt html/body mit !important auf Weiß (im Dunkeln über
   --dunkel-flaeche die Kartenfläche) – der Grund ist aber Arbeitsfläche bzw. Hintergrund. */
html.bp-v2[data-theme="dark"] body.bp-app {
  background: var(--workspace) !important;
}

html.bp-v2[data-theme="dark"] body.bp-auth {
  background: var(--backdrop) !important;
}

/* Registrierung: der kleine Schrittbalken ist ein Verlauf aus zwei festen Tönen. */
html.bp-v2[data-theme="dark"] body.bp-auth .step-indicator span::after {
  background: linear-gradient(to right, var(--green-600) 0 33%, var(--panel-raised) 33% 100%);
}

html.bp-v2[data-theme="dark"] body.bp-auth #step-unternehmen .step-indicator span::after {
  background: linear-gradient(to right, var(--green-600) 0 67%, var(--panel-raised) 67% 100%);
}

html.bp-v2[data-theme="dark"] body.bp-auth #step-2 .step-indicator span::after {
  background: var(--green-600);
}

/* Rechnungen: Zahl im aktiven Filter – auf der festen Hausfarbe dunkler unterlegt. */
html.bp-v2[data-theme="dark"] body.bp-app .bp-filter.aktiv .bp-filter-zahl {
  background: rgba(0, 0, 0, 0.28);
}

/* Kleine Textknöpfe im Bestand (Ändern): 60 % Deckkraft sind auf dunklem Grund zu blass. */
html.bp-v2[data-theme="dark"] body.bp-app .icon-btn {
  opacity: 0.85;
}