/* Propria — App-Styles des Produkts STWEG: die EINE Stilquelle (Blueprint §5).
   Keine <style>-Bloecke in Templates, kein inline style ausser fuer
   serverseitig berechnete Werte.

   CI Propria (Leitfaden 02_DESIGN/ci/propria/ci-propria.md, Joel 2026-09-25):
   Violett #7a52dd (Knoepfe) bzw. #5a31bd (Schrift) auf Anthrazit-Violett #1d1626, Bricolage Grotesque fuer
   Titel, Figtree fuer Text und Zahlen. Farben ausschliesslich ueber die
   Variablen unten - nie als Hexwert in einer Regel. Schriften aus
   fonts/fonts.css (self-hosted, base.html).

   Farbregel: Violett heisst Marke und Hauptaktion, nie «OK». Status ist
   Gruen (bezahlt/erledigt), Ocker (offen/Warnung) und Rot (ueberfaellig/Fehler).

   Genau EIN CSS pro App: diese Datei, als Kopie (Joel 2026-10-01). Keine
   App-eigene Ergaenzungsdatei, keine Themes. Waehlbar ist nur Light/Dark - drei Zustaende, nicht zwei:
     :root                                        Light (Vorgabe)
     Media-Abfrage dunkel + :root:not(...)        System-Dunkel
     :root[data-theme="dark"]                     explizite Wahl
   Nie eine Farbe nur in einem Media- oder Theme-Block definieren.

   ACHTUNG: Diese Datei wird maschinell gelesen (Mail-Farben der App lesen
   den :root-Block). Der :root-Block steht darum zuerst, und das at-Wort fuer
   Media-Abfragen kommt in Kommentaren nicht vor. */

:root {
  --pro-flaeche: #ece6f5;
  --pro-karte: #ffffff;
  --pro-feld: #ffffff;
  --pro-sidebar: #241a33;
  --pro-sidebar-text: #d2c6e2;
  --pro-sidebar-titel: #ffffff;
  --pro-sidebar-rand: #3a2f4d;
  --pro-sidebar-aktiv: #6a3fd0;
  --pro-sidebar-aktiv-text: #ffffff;
  --pro-sidebar-menue: #2b2040;        /* Menue-Mitte hebt sich sehr leicht ab */
  --pro-info-flaeche: #cdd6f2;         /* Hinweis «Information» */
  --pro-sidebar-akzent: #b9a3fb;       /* Violett auf immer-dunklen Flaechen (Sidebar, Anmelde-Marke), in beiden Modi gleich */
  --pro-kreuz-rot: #d8232a;            /* Schweizerkreuz im Punkt der grossen Wortmarke */
  --pro-kreuz-weiss: #ffffff;
  --pro-knopf-rand: #8a7aa3;           /* Rand neutraler Knoepfe und Legenden, 3.9:1 zur Karte (Joel 2026-10-02) */
  --pro-papier: #ffffff;               /* bewusst weiss in beiden Modi: Mail-Vorschau, Mail-Editor, Druck (Joel 2026-10-02) */
  --pro-papier-text: #1d1626;
  --pro-papier-rand: #dcd2ea;
  --pro-tabellenkopf: #efe9f8;
  --pro-rand: #dcd2ea;
  --pro-text: #1d1626;
  --pro-text-leise: #5f5470;
  --pro-akzent: #7a52dd;              /* eine Spur heller als die Marke, 5.1:1 mit Weiss (Joel 2026-09-29) */
  --pro-akzent-dunkel: #5a31bd;        /* hover auf Knoepfen */
  --pro-akzent-text: #ffffff;
  --pro-akzent-schrift: #5a31bd;
  --pro-erfolg: #1b7350;
  --pro-warnung: #8f5a0c;
  --pro-fehler: #b3302a;
  --pro-fehler-text: #ffffff;           /* Schrift auf dem roten Knopf */
  --pro-erfolg-text: #ffffff;           /* Schrift auf gruenem Knopf (Entscheid E6, Joel 2026-10-02) */
  --pro-warnung-text: #ffffff;          /* Schrift auf ockerfarbenem Knopf */
  --pro-erfolg-flaeche: #e3f1ea;
  --pro-warnung-flaeche: #f6ecd9;
  --pro-fehler-flaeche: #f7e1de;
  --pro-schatten: 0 1px 2px rgba(29, 22, 38, .08);
  --pro-schatten-popup: 0 8px 24px rgba(29, 22, 38, .18), 0 1px 3px rgba(29, 22, 38, .12); /* Uhrzeit, Kalender, Dropdowns (Joel 2026-10-09) */
  --pro-radius: 6px;
  --pro-sidebar-breite: 15.5rem;
  --pro-sidebar-schmal: 3.5rem;         /* Symbol-Leiste in Stufe mittel (Blueprint §5.7) */
  --pro-stufe-mittel: 768px;            /* Stufen-Grenzen zum Nachlesen fuer Skripte und Tests; */
  --pro-stufe-breit: 1200px;            /* in den Regeln unten stehen sie als Zahl */

  --pro-schrift-titel: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --pro-schrift-text: "Figtree", "Segoe UI", sans-serif;

  /* Bootstrap an die CI haengen - so folgen auch Bausteine, die wir nicht
     selbst stylen (Alerts, Dropdowns, Formulare). */
  --bs-body-bg: var(--pro-flaeche);
  --bs-body-color: var(--pro-text);
  --bs-body-font-family: var(--pro-schrift-text);
  --bs-secondary-color: var(--pro-text-leise);
  --bs-border-color: var(--pro-rand);
  --bs-tertiary-bg: var(--pro-tabellenkopf);
  --bs-link-color: var(--pro-akzent-schrift);
  --bs-link-hover-color: var(--pro-text);
  --bs-primary: var(--pro-akzent);
  --bs-primary-rgb: 122, 82, 221;
  --bs-success-rgb: 27, 115, 80;
  --bs-warning-rgb: 143, 90, 12;
  --bs-danger-rgb: 179, 48, 42;
  --bs-border-radius: var(--pro-radius);
  --bs-border-radius-sm: var(--pro-radius);
  --bs-border-radius-lg: var(--pro-radius);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pro-flaeche: #271a36;
    --pro-karte: #322245;
    --pro-feld: #2c1d3d;
    --pro-sidebar: #150a20;
    --pro-sidebar-text: #b4a1c9;
    --pro-sidebar-titel: #ece8f2;
    --pro-sidebar-rand: #30283c;
    --pro-sidebar-aktiv: #a78bfa;
    --pro-sidebar-aktiv-text: #150f1f;
    --pro-sidebar-menue: #1b0f26;
    --pro-info-flaeche: #2b2f55;
    --pro-tabellenkopf: #3c2b50;
    --pro-rand: #4b3662;
    --pro-text: #ddd4e8;
    --pro-text-leise: #ab98c1;
    --pro-akzent: #a78bfa;
    --pro-akzent-dunkel: #b9a3fb;
    --pro-akzent-text: #150f1f;
    --pro-akzent-schrift: #b9a3fb;
    --pro-erfolg: #5fcf9d;
    --pro-warnung: #e3b35a;
    --pro-fehler: #f47d74;
    --pro-fehler-text: #150f1f;
    --pro-knopf-rand: #8a76a6;
    --pro-erfolg-text: #150f1f;
    --pro-warnung-text: #150f1f;
    --pro-erfolg-flaeche: #16302a;
    --pro-warnung-flaeche: #332a16;
    --pro-fehler-flaeche: #3a1f1f;
    --pro-schatten: 0 1px 2px rgba(0, 0, 0, .4);
    --pro-schatten-popup: 0 8px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --bs-primary-rgb: 167, 139, 250;
    --bs-success-rgb: 95, 207, 157;
    --bs-warning-rgb: 227, 179, 90;
    --bs-danger-rgb: 244, 125, 116;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pro-flaeche: #271a36;
  --pro-karte: #322245;
  --pro-feld: #2c1d3d;
  --pro-sidebar: #150a20;
  --pro-sidebar-text: #b4a1c9;
  --pro-sidebar-titel: #ece8f2;
  --pro-sidebar-rand: #30283c;
  --pro-sidebar-aktiv: #a78bfa;
  --pro-sidebar-aktiv-text: #150f1f;
  --pro-sidebar-menue: #1b0f26;
  --pro-info-flaeche: #2b2f55;
  --pro-tabellenkopf: #3c2b50;
  --pro-rand: #4b3662;
  --pro-text: #ddd4e8;
  --pro-text-leise: #ab98c1;
  --pro-akzent: #a78bfa;
  --pro-akzent-dunkel: #b9a3fb;
  --pro-akzent-text: #150f1f;
  --pro-akzent-schrift: #b9a3fb;
  --pro-erfolg: #5fcf9d;
  --pro-warnung: #e3b35a;
  --pro-fehler: #f47d74;
  --pro-fehler-text: #150f1f;
  --pro-knopf-rand: #8a76a6;
  --pro-erfolg-text: #150f1f;
  --pro-warnung-text: #150f1f;
  --pro-erfolg-flaeche: #16302a;
  --pro-warnung-flaeche: #332a16;
  --pro-fehler-flaeche: #3a1f1f;
  --pro-schatten: 0 1px 2px rgba(0, 0, 0, .4);
  --pro-schatten-popup: 0 8px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --bs-primary-rgb: 167, 139, 250;
  --bs-success-rgb: 95, 207, 157;
  --bs-warning-rgb: 227, 179, 90;
  --bs-danger-rgb: 244, 125, 116;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--pro-flaeche);
  color: var(--pro-text);
  font-family: var(--pro-schrift-text);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, .pro-titel {
  font-family: var(--pro-schrift-titel);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: 30px; margin: 0; }
h2 { font-size: 18px; margin: 0; }
a { color: var(--pro-akzent-schrift); }
.pro-betrag, .pro-nummer { font-variant-numeric: tabular-nums; }
.pro-leise { color: var(--pro-text-leise); }

/* ---------- Layout: Sidebar links, Inhalt rechts ---------- */
.pro-app { display: flex; min-height: 100vh; }
.pro-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }

/* Sidebar: Kopf und Fuss stehen fest, nur das Menue scrollt (Joel 2026-09-20). */
.pro-sidebar {
  z-index: 1030;                       /* ueber dem Inhalt, unter Modals (1055) und Wartungs-Banner (1060) */
  width: var(--pro-sidebar-breite);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pro-sidebar);
  color: var(--pro-sidebar-text);
  border-right: 1px solid var(--pro-rand);   /* Kante zum Inhalt (Joel 2026-10-01) */
}
.pro-sidebar__kopf { padding: 20px 16px 14px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--pro-sidebar-rand); }
.pro-sidebar__gemeinschaft { font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--pro-sidebar-titel); line-height: 1.15; }
.pro-sidebar__ort { font-size: 12px; }
.pro-sidebar__werkzeuge { display: flex; align-items: center; gap: 8px; }
.pro-sidebar__suche { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; background: rgba(255,255,255,.06); border: 1px solid var(--pro-sidebar-rand); border-radius: var(--pro-radius); color: var(--pro-sidebar-text); }
.pro-sidebar__suche input { flex: 1; background: transparent; border: 0; color: inherit; font: inherit; outline: none; }
.pro-sidebar__menue { background: var(--pro-sidebar-menue); flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.pro-sidebar__fuss { padding: 10px 10px 12px; border-top: 1px solid var(--pro-sidebar-rand); display: flex; flex-direction: column; gap: 2px; }
.pro-nav__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--pro-radius); color: var(--pro-sidebar-text); font-size: 14px; font-weight: 500; text-decoration: none; }
.pro-nav__link:hover { background: rgba(255,255,255,.06); color: var(--pro-sidebar-titel); }
.pro-nav__link.ist-aktiv { background: var(--pro-sidebar-aktiv); color: var(--pro-sidebar-aktiv-text); font-weight: 600; }
.pro-nav__link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pro-sidebar__marke { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--pro-sidebar-titel); }
.pro-sidebar__marke img { width: 24px; height: 24px; }
.pro-sidebar__marke .punkt { color: var(--pro-akzent); }
.pro-sidebar__marke .tld { font-weight: 500; }
.pro-sidebar__version { margin-left: auto; font-size: 11px; opacity: .7; }
.pro-sidebar__icon-knopf { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--pro-sidebar-rand); border-radius: var(--pro-radius); color: var(--pro-sidebar-text); cursor: pointer; }
.pro-sprache { display: inline-flex; border: 1px solid var(--pro-sidebar-rand); border-radius: var(--pro-radius); overflow: hidden; }
.pro-sprache button { height: 36px; padding: 0 12px; background: transparent; border: 0; color: var(--pro-sidebar-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pro-sprache button.ist-aktiv { background: var(--pro-sidebar-aktiv); color: var(--pro-sidebar-aktiv-text); font-weight: 700; }

/* ---------- Bausteine ---------- */
.pro-karte { background: var(--pro-karte); border: 1px solid var(--pro-rand); border-radius: var(--pro-radius); box-shadow: var(--pro-schatten); }
.pro-kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pro-kpi__wert { font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.pro-knopf, .btn-primary {
  height: 44px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pro-akzent); color: var(--pro-akzent-text); border: 0; border-radius: var(--pro-radius);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pro-knopf:hover, .btn-primary:hover { background: var(--pro-akzent-dunkel); color: var(--pro-akzent-text); }
.pro-knopf--neutral, .btn-outline-secondary {
  background: transparent; color: var(--pro-text); border: 1px solid var(--pro-knopf-rand);
}
.pro-knopf--neutral:hover, .btn-outline-secondary:hover { background: var(--pro-tabellenkopf); color: var(--pro-text); }
.pro-knopf--gefahr, .btn-danger { background: var(--pro-fehler); color: var(--pro-fehler-text); }

.pro-feld, .form-control, .form-select {
  height: 44px; padding: 0 12px; background: var(--pro-feld); color: var(--pro-text);
  border: 1px solid var(--pro-rand); border-radius: var(--pro-radius); font: inherit;
}
.pro-feld:focus, .form-control:focus, .form-select:focus { outline: none; border-color: var(--pro-akzent); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }

.pro-tabelle { width: 100%; border-collapse: collapse; }
.pro-tabelle th { padding: 10px 20px; background: var(--pro-tabellenkopf); border-top: 1px solid var(--pro-rand); font-size: 12px; font-weight: 600; color: var(--pro-text-leise); text-align: left; }
.pro-tabelle td { padding: 12px 20px; border-top: 1px solid var(--pro-rand); }
.pro-tabelle .ist-betrag { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Status: nie Violett. */
.pro-status { display: inline-block; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pro-status--bezahlt, .pro-status--erledigt { color: var(--pro-erfolg); }
.pro-status--offen { color: var(--pro-warnung); }
.pro-status--ueberfaellig, .pro-status--fehler { color: var(--pro-fehler); }
.alert-success { background: var(--pro-erfolg-flaeche); color: var(--pro-erfolg); border-color: var(--pro-erfolg); }
.alert-warning { background: var(--pro-warnung-flaeche); color: var(--pro-warnung); border-color: var(--pro-warnung); }
.alert-danger  { background: var(--pro-fehler-flaeche);  color: var(--pro-fehler);  border-color: var(--pro-fehler); }

/* ---------- Statusseiten: Wartung 503, Fehler 404/500/403 ---------- */
.pro-status-seite { min-height: 100vh; display: flex; flex-direction: column; background: var(--pro-flaeche); color: var(--pro-text); }
.pro-status-seite__kopf, .pro-status-seite__fuss { height: 64px; padding: 0 48px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--pro-rand); font-size: 13px; color: var(--pro-text-leise); }
.pro-status-seite__fuss { height: 52px; border-bottom: 0; border-top: 1px solid var(--pro-rand); font-size: 12px; }
.pro-status-seite__inhalt { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; }
.pro-status-seite__box { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.pro-status-seite__zeichen { width: 96px; height: 96px; border-radius: 22px; background: var(--pro-sidebar); display: flex; align-items: center; justify-content: center; }
.pro-status-seite__code { font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 96px; letter-spacing: -0.04em; line-height: 1; color: var(--pro-akzent-schrift); opacity: .25; }
.pro-status-seite__titel { font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1.15; }
.pro-status-seite__text { font-size: 16px; color: var(--pro-text-leise); line-height: 1.55; }
.pro-status-seite__hinweis { font-size: 12px; color: var(--pro-text-leise); }

/* ---------- Anmeldeseite: Anmelden, Passwort vergessen, neues Passwort ----------
   Aus app/templates/auth/_rahmen.html uebernommen (2026-10-01), damit die App
   genau ein CSS hat. Links die Marke auf immer dunklem Grund, rechts die Karte.
   Keine Gemeinschaft, keine Adresse (ci-propria.md §5). */

/* Der anonyme Rahmen aus base.html bringt Container und Sprachumschalter mit;
   nur auf dieser Seite neutralisieren, nicht ausblenden. */
body:has(.pro-anmelden) > .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
body:has(.pro-anmelden) > .container > .text-end,
body:has(.pro-anmelden) > .container > footer { display: none !important; }

.pro-anmelden { position: fixed; inset: 0; display: flex; background: var(--pro-flaeche); }

/* Links: die Marke */
.pro-anmelden__marke {
  flex: 0 0 44%; max-width: 560px;
  background: var(--pro-sidebar); color: var(--pro-sidebar-text);
  padding: 48px; display: flex; flex-direction: column; gap: 24px;
}
.pro-anmelden__lockup { display: flex; align-items: center; gap: 20px; }
.pro-anmelden__wortmarke {
  font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 40px;
  letter-spacing: -.03em; color: var(--pro-sidebar-titel); line-height: 1;
}
.pro-anmelden__tld { font-weight: 500; }
/* Schweizerkreuz im Punkt nur ab ca. 40 px (§1). */
.pro-anmelden__kreuz {
  display: inline-flex; align-items: center; justify-content: center;
  width: .5em; height: .5em; background: var(--pro-kreuz-rot); border-radius: 2px;
  vertical-align: .08em; margin: 0 .04em;
}
.pro-anmelden__kreuz::before {
  content: ""; display: block; width: 62%; height: 62%;
  background:
    linear-gradient(var(--pro-kreuz-weiss), var(--pro-kreuz-weiss)) center/100% 30% no-repeat,
    linear-gradient(var(--pro-kreuz-weiss), var(--pro-kreuz-weiss)) center/30% 100% no-repeat;
}
.pro-anmelden__claim { font-size: 14px; margin-top: 6px; }
/* Slogan; zweiter Teil violett. Die Flaeche ist immer dunkel, darum
   --pro-sidebar-akzent und nicht --pro-akzent-schrift (das kippt mit dem Modus). */
.pro-anmelden__versprechen {
  margin-top: auto; font-family: var(--pro-schrift-titel); font-weight: 700;
  font-size: 34px; line-height: 1.15; letter-spacing: -.02em; color: var(--pro-sidebar-titel);
}
.pro-anmelden__versprechen em { font-style: normal; color: var(--pro-sidebar-akzent); }
.pro-anmelden__untertitel { font-size: 15px; line-height: 1.6; max-width: 46ch; }
.pro-anmelden__herkunft { margin-top: auto; font-size: 12px; opacity: .75; }

/* Rechts: das Formular */
.pro-anmelden__feld { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px; overflow-y: auto; }
.pro-anmelden__karte {
  width: 100%; max-width: 380px; background: var(--pro-karte);
  border: 1px solid var(--pro-rand); border-radius: 10px; padding: 36px; box-shadow: var(--pro-schatten);
}
.pro-anmelden__titel {
  font-family: var(--pro-schrift-titel); font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; color: var(--pro-text); margin: 0 0 22px;
}
/* Feldbeschriftungen: Textton der CI, 600 (C4) */
.pro-anmelden .form-label { color: var(--pro-text); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pro-anmelden__zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.pro-anmelden__trenner { border-top: 1px solid var(--pro-rand); }

/* Handy: die Markenflaeche traegt nur noch das Lockup */
@media (max-width: 860px) {
  .pro-anmelden { flex-direction: column; }
  .pro-anmelden__marke { flex: 0 0 auto; max-width: none; padding: 24px 24px 20px; gap: 0; }
  .pro-anmelden__versprechen, .pro-anmelden__untertitel, .pro-anmelden__herkunft { display: none; }
  .pro-anmelden__wortmarke { font-size: 28px; }
  .pro-anmelden__karte { padding: 26px; }
}

/* ---------- App-Bausteine (aus ergaenzungen.css v1.43.0, uebernommen 2026-10-01) ---------- */

/* Technische Werte: neutral wie ein Feld, nicht in Alert-Farbe (N-59). */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .875em; color: var(--pro-text); background: var(--pro-feld);
  border: 1px solid var(--pro-rand); border-radius: 6px; padding: .1em .38em; overflow-wrap: anywhere;
}
kbd { font-weight: 600; box-shadow: 0 1px 0 var(--pro-rand); }
pre { background: var(--pro-feld); border: 1px solid var(--pro-rand); border-radius: 8px; padding: 12px 14px; color: var(--pro-text); overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.form-text code, .table code, .small code { padding: .05em .3em; }

/* Scrollbalken: schmal, aber greifbar und immer sichtbar. */
:root { scrollbar-width: thin; scrollbar-color: var(--pro-rand) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pro-rand); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--pro-text-leise); background-clip: content-box; }
.pro-sidebar__menue { scrollbar-color: var(--pro-sidebar-rand) transparent; }
.pro-sidebar__menue::-webkit-scrollbar-thumb { background: var(--pro-sidebar-rand); background-clip: content-box; }
.pro-sidebar__menue::-webkit-scrollbar-thumb:hover { background: var(--pro-sidebar-text); background-clip: content-box; }
@media (prefers-contrast: more) {
  :root { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb { background: var(--pro-text-leise); }
}

/* Glocke / Dropdown: beim Ueberfahren lesbar, auch Titel und Untertitel (T-18). */
.dropdown-item:hover, .dropdown-item:focus { background: var(--pro-tabellenkopf); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:hover *, .dropdown-item:focus * { color: var(--pro-text); }
.dropdown-item:hover .text-muted, .dropdown-item:focus .text-muted { color: var(--pro-text-leise) !important; }

/* Hinweis «Information» (T-63, T-94). */
.alert-info { background: var(--pro-info-flaeche); border-color: var(--pro-rand); color: var(--pro-text); }

/* Karten: gleiche runde Form, auch mit list-group am Rand (T-59). */
.card { overflow: hidden; }

/* Aktiver Posteingang ruhig statt tuerkis auf violett (T-93). */
.pro-sidebar a.active.text-info, .pro-sidebar a.active.text-info i,
.sidebar a.active.text-info, .sidebar a.active.text-info i { color: var(--pro-sidebar-aktiv-text) !important; }

/* Ein Link direkt im Inhalt nur so breit wie sein Text (T-116). */
.pro-main > a { align-self: flex-start; }

/* Leiste «Ungespeicherte Aenderungen» nur ueber dem Inhalt, nicht ueber der Sidebar (T-121). */
.pro-speicherleiste {
  position: fixed; bottom: 0; left: var(--pro-sidebar-breite); right: 0; z-index: 1040;
  background: var(--pro-karte); color: var(--pro-text); border-color: var(--pro-rand) !important;
}

/* Statusseite im schmalen Fenster (T-102). */
@media (max-width: 560px) { .pro-status-seite__inhalt { padding: 32px 20px; } }

/* Bootstrap-Tabellen folgen der CI-Schrift, auch im Dunkelmodus (T-49). */
:root {
  --bs-emphasis-color: var(--pro-text);
  --bs-table-color: var(--pro-text);
  --bs-table-striped-color: var(--pro-text);
  --bs-table-active-color: var(--pro-text);
  --bs-table-hover-color: var(--pro-text);
}

/* ---------- Druck ---------- */
@media print {
  .pro-sidebar { display: none; }
  .pro-main { padding: 0; }
  .pro-speicherleiste { display: none !important; }
  body { background: var(--pro-papier); color: var(--pro-papier-text); }   /* Papier ist immer weiss */
}


/* =====================================================================
   AUS base.html UEBERNOMMEN (Stand v1.44.2, Commit 040d976, 02.10.2026)
   Entscheid Joel 02.10.2026: genau ein CSS. Die beiden <style>-Bloecke in
   base.html entfallen. Reihenfolge wie bisher (base.html kam nach dieser
   Datei), darum steht alles hier am Ende. Feste Farben sind durch
   Variablen ersetzt.
   ===================================================================== */

/* ---------- Kurznamen fuer Vorlagen ----------
   Vorlagen benutzen var(--danger), var(--bg-muted) usw. Die Kurznamen zeigen
   auf --pro-*; neue Regeln nehmen direkt --pro-*. */
:root {
  --bg:            var(--pro-flaeche);
  --bg-card:       var(--pro-karte);
  --bg-card-hover: var(--pro-tabellenkopf);
  --bg-muted:      var(--pro-tabellenkopf);
  --border:        var(--pro-rand);
  --border-soft:   var(--pro-rand);
  --text:          var(--pro-text);
  --text-muted:    var(--pro-text-leise);
  --text-soft:     var(--pro-text-leise);
  --primary:       var(--pro-akzent);
  --primary-dark:  var(--pro-akzent-dunkel);
  --primary-soft:  var(--pro-tabellenkopf);
  --success:       var(--pro-erfolg);
  --success-soft:  var(--pro-erfolg-flaeche);
  --danger:        var(--pro-fehler);
  --danger-soft:   var(--pro-fehler-flaeche);
  --warning:       var(--pro-warnung);
  --warning-soft:  var(--pro-warnung-flaeche);
  --info:          var(--pro-akzent-schrift);
  --info-soft:     var(--pro-info-flaeche);
  --sidebar-bg:    var(--pro-sidebar);
  --sidebar-sub:   var(--pro-sidebar-rand);
  --sidebar-text:  var(--pro-sidebar-text);
  --sidebar-muted: var(--pro-text-leise);
  --sidebar-hover: var(--pro-sidebar-rand);
  --sidebar-active: var(--pro-sidebar-aktiv);
  --shadow-sm:     var(--pro-schatten);
  --shadow:        var(--pro-schatten);
  --shadow-md:     var(--pro-schatten);
  --radius:        var(--pro-radius);
  --radius-sm:     calc(var(--pro-radius) * 0.7);
  --radius-lg:     calc(var(--pro-radius) * 1.6);
}

/* ---------- Bootstrap-Bauteile mit eigener heller Flaeche ---------- */
.dropdown-menu, .modal-content, .offcanvas, .list-group-item {
  background-color: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.dropdown-menu { box-shadow: var(--pro-schatten-popup); }
.table-light, .table-light > * {
  background-color: var(--bg-muted) !important;
  color: var(--text) !important;
}

/* ---------- Grundlagen der App ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--pro-schrift-text);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-dark); }

/* ---------- Sidebar (Ergaenzung zu .pro-sidebar) ----------
   Scroll-Container ist .pro-sidebar__menue; das Skript in base.html setzt
   dessen scrollTop direkt. */
.sidebar { box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
/* Sprachumschalter als Links (Route), nicht als <button> */
.pro-sprache a {
  height: 36px; padding: 0 12px; display: inline-flex; align-items: center;
  color: var(--pro-sidebar-text); font-size: 12px; font-weight: 600;
  text-decoration: none;
}
.pro-sprache a.ist-aktiv {
  background: var(--pro-sidebar-aktiv); color: var(--pro-sidebar-aktiv-text);
  font-weight: 700;
}
.pro-sidebar__suche i { opacity: .7; font-size: .9rem; }
/* Name der Gemeinschaft in vier Stufen, damit ein langer Name nicht die Sidebar sprengt */
.pro-sidebar__gemeinschaft { overflow-wrap: anywhere; }
.pro-sidebar__gemeinschaft.ist-mittel    { font-size: 15px; }
.pro-sidebar__gemeinschaft.ist-lang      { font-size: 13.5px; line-height: 1.25; }
.pro-sidebar__gemeinschaft.ist-sehr-lang { font-size: 12.5px; line-height: 1.3; }
/* Handy: Sidebar als Schublade von links */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; max-width: 85vw; height: 100vh;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar.sidebar-open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.4); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1055; display: none; }
  .sidebar-backdrop.active { display: block; }
  .mobile-topbar {
    display: flex !important; align-items: center; gap: .75rem;
    padding: .6rem .9rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1000;
  }
  .mobile-topbar .btn { padding: .25rem .5rem; }
  main.col { padding-top: .5rem !important; }
}
.mobile-topbar { display: none; }
.sidebar a {
  color: var(--sidebar-text);
  text-decoration: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500;
  transition: all .15s ease;
  margin-bottom: .1rem;
}
.sidebar a i.bi { font-size: 1rem; opacity: .85; width: 1.1rem; text-align: center; }
/* Sidebar-Rand ist in beiden Modi dunkel, darum helle Schrift beim Ueberfahren */
.sidebar a:hover { background: var(--sidebar-hover); color: var(--pro-sidebar-titel); }
.sidebar a.active { background: var(--sidebar-active); color: var(--pro-sidebar-aktiv-text); box-shadow: var(--shadow-sm); }
.sidebar a.active i.bi { opacity: 1; }
/* Glocke in der Sidebar: Eintraege wie Dropdown, nicht wie Sidebar-Link
   (Rueckfall T-18, CI-Pruefung 2026-10-09 §1). */
.sidebar .dropdown-menu .dropdown-item {
  display: block; margin: 0; border-radius: 0; transition: none;
  font-size: inherit; font-weight: inherit;
  color: var(--pro-text); background: transparent;
}
.sidebar .dropdown-menu .dropdown-item i.bi { opacity: 1; width: auto; font-size: inherit; }
.sidebar .dropdown-menu .dropdown-item:hover,
.sidebar .dropdown-menu .dropdown-item:focus { background: var(--pro-tabellenkopf); color: var(--pro-text); }
.sidebar .group-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pro-sidebar-text);
  padding: 1rem 1rem .35rem; margin-top: .75rem; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: .35rem;
}
.sidebar .group-title:first-child { margin-top: .25rem; }
.sidebar .sub-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pro-sidebar-text);
  padding: .8rem 1rem .25rem; font-weight: 700;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: .4rem; opacity: .85;
}
.sidebar hr { border-color: rgba(255,255,255,.06); }

/* ---------- Inhalt ----------
   min-width: 0, damit ein breites Kind (z. B. Schneeraeumungs-Matrix) die Zeile nicht aus dem Fenster schiebt */
main.col { background: var(--bg); min-width: 0; }

/* ---------- Karten ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card-body { padding: 1.25rem 1.5rem; }
.card .card-body h5, .card .card-body h6 { margin-bottom: .85rem; }
.card-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  padding: .85rem 1.5rem;
  font-weight: 600;
}
/* Statusraender gedaempft aus den Statusfarben (vorher feste Pastelltoene) */
.card.border-danger  { border-color: color-mix(in srgb, var(--pro-fehler) 45%, var(--pro-karte)); }
.card.border-warning { border-color: color-mix(in srgb, var(--pro-warnung) 45%, var(--pro-karte)); }
.card.border-success { border-color: color-mix(in srgb, var(--pro-erfolg) 45%, var(--pro-karte)); }
.card.border-info    { border-color: color-mix(in srgb, var(--pro-akzent-schrift) 35%, var(--pro-karte)); }
.card.border-primary { border-color: color-mix(in srgb, var(--pro-akzent) 45%, var(--pro-karte)); }

/* ---------- Brotkrumen ---------- */
.breadcrumb { font-size: .8125rem; padding: .5rem 0; margin-bottom: 1rem; background: transparent; }
.breadcrumb-item { color: var(--text-muted); }
.breadcrumb-item a { color: var(--text-muted); font-weight: 500; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--text); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--text-soft); padding: 0 .15rem; }

/* ---------- Formulare ---------- */
.form-label { font-weight: 500; color: var(--text); margin-bottom: .35rem; font-size: .875rem; }
.form-label.small { font-size: .8rem; }
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  font-size: .9rem;
  background: var(--bg-card);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Fokusring im Akzent (vorher festes Bootstrap-Blau) */
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2);
  outline: 0;
}
.form-control::placeholder { color: var(--text-soft); }
.form-text { color: var(--text-muted); font-size: .8rem; }
textarea.form-control { min-height: 80px; }
.form-check { padding-left: 1.75rem; margin-bottom: .5rem; }
.form-check-input {
  width: 1.05rem; height: 1.05rem;
  margin-top: .18rem;
  border: 1.5px solid var(--pro-knopf-rand);
  cursor: pointer;
  transition: all .15s ease;
}
/* Einzug nur innerhalb .form-check; Checkboxen in Tabellen haben keinen */
.form-check .form-check-input { margin-left: -1.75rem; }
.form-check-input:focus { border-color: var(--pro-akzent); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { cursor: pointer; line-height: 1.4; }

/* ---------- Knoepfe ----------
   Hoehen nach ci-propria.md §5: 44 px normal, btn-sm 34 px (Handy). */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 44px;
  font-weight: 600; font-size: .875rem; line-height: 1.2;
  border-radius: var(--radius);
  padding: 0 1.1rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn > i.bi { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2); }
.btn-sm { min-height: 34px; padding: 0 .75rem; font-size: .8rem; gap: .35rem; }
.btn-sm > i.bi { font-size: .9rem; }
.btn-lg { min-height: 50px; padding: 0 1.5rem; font-size: 1rem; }
.btn-link { min-height: 0; padding: .25rem .4rem; font-weight: 500; }
/* Knopffarben fuer primary/danger/outline-secondary stehen oben (Bausteine). */
.btn-primary { box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
/* Schrift aus eigenen Variablen (Entscheid E6, 02.10.2026), Hover dunkelt ueber filter. */
.btn-success { background: var(--success); border-color: var(--success); color: var(--pro-erfolg-text); }
.btn-success:hover { background: var(--success); border-color: var(--success); color: var(--pro-erfolg-text); filter: brightness(.92); transform: translateY(-1px); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: var(--pro-warnung-text); }
.btn-warning:hover { background: var(--warning); border-color: var(--warning); color: var(--pro-warnung-text); filter: brightness(.92); }
.btn-outline-primary { color: var(--primary); border-color: var(--pro-knopf-rand); background: transparent; }
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }
/* Gruen und Ocker sind Statusfarben, keine Knopffarben (ci-propria.md §3): neutral */
.btn-outline-success, .btn-outline-warning, .btn-outline-info,
.btn-outline-dark, .btn-secondary, .btn-dark {
  color: var(--text-muted); border-color: var(--pro-knopf-rand); background: transparent;
}
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
.btn-outline-dark:hover, .btn-secondary:hover, .btn-dark:hover {
  background: var(--bg-muted); color: var(--text); border-color: var(--text-soft);
}
.btn-outline-danger { color: var(--danger); border-color: var(--pro-knopf-rand); background: transparent; }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-link { font-weight: 500; color: var(--text-muted); }
.btn-link:hover { color: var(--primary); }

/* ---------- Tabellen ---------- */
.table { color: var(--text); border-color: var(--border-soft); font-size: .9rem; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--border-soft); }
.table thead th {
  font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
}
.table tbody tr { transition: background-color .1s ease; }
.table-hover tbody tr:hover { background: var(--bg-muted); }
/* Rundung und Schatten nur fuer die freistehende Tabelle; in der Karte uebernimmt die Karte */
.table { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.card .table, .pro-karte .table { border-radius: 0; box-shadow: none; background: transparent; }
/* Tabelle in der Karte (CI-Nachtrag 2026-10-04, Befund Budget NF-13, Entscheid Joel):
   1. Bootstrap malt jede Zelle mit --bs-table-bg = --bs-body-bg = Seitenflaeche.
      In der Karte stand die Tabelle dadurch als lila Block im weissen Rahmen.
   2. Kein leerer Streifen unter der letzten Tabelle der Karte.
   3. table-sm wirkt wieder (die Regel oben setzt sonst fuer alle .8rem 1rem).
   4. Gruene und rote Zeilen in CI-Farben, auch im Dunkelmodus lesbar. */
.card .table, .pro-karte .table { --bs-table-bg: transparent; }
.card-body > .table:last-child,
.card-body > .table-responsive:last-child > .table { margin-bottom: 0; }
.table-sm > :not(caption) > * > * { padding: .35rem .6rem; }
.table-success, .table-success > * {
  --bs-table-bg: var(--pro-erfolg-flaeche);
  --bs-table-color: var(--pro-text);
  background-color: var(--pro-erfolg-flaeche) !important;
  color: var(--pro-text) !important;
}
.table-danger, .table-danger > * {
  --bs-table-bg: var(--pro-fehler-flaeche);
  --bs-table-color: var(--pro-text);
  background-color: var(--pro-fehler-flaeche) !important;
  color: var(--pro-text) !important;
}

/* ---------- Abzeichen ---------- */
.badge { font-weight: 500; font-size: .72rem; padding: .3em .6em; border-radius: .375rem; letter-spacing: .01em; }
/* Akzentflaeche: Schrift aus --pro-akzent-text (dunkel im Dunkelmodus) */
.bg-primary:not(.badge) { color: var(--pro-akzent-text); }
.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-secondary { background: var(--bg-muted) !important; color: var(--text-muted) !important; }
.badge.bg-success   { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-danger    { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-info      { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.bg-light     { background: var(--bg-muted) !important; color: var(--text) !important; }

/* ---------- Hinweise (Farben stehen oben bei den Bausteinen) ---------- */
.alert { border-radius: var(--radius); border: 1px solid transparent; padding: .9rem 1.1rem; font-size: .9rem; }

/* ---------- Definitionslisten ---------- */
dl.row dt { color: var(--text-muted); font-weight: 500; font-size: .85rem; }
dl.row dd { color: var(--text); font-size: .9rem; }

/* ---------- Fusszeile ---------- */
.app-footer {
  text-align: center; padding: 2rem 1rem;
  color: var(--text-muted); font-size: .825rem;
  margin-top: 3rem; border-top: 1px solid var(--border);
}
.app-footer img { height: 28px; vertical-align: middle; margin-right: .5rem; }
.app-footer .heart { color: var(--success); font-size: 1rem; }
.app-footer strong { color: var(--text); }
.bhh-footer-logo { opacity: .8; transition: opacity .2s ease; }
.bhh-footer-logo:hover { opacity: 1; }

/* ---------- Hilfsklassen ---------- */
.text-muted { color: var(--text-muted) !important; }
hr { border-color: var(--border-soft); opacity: 1; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow) !important; }
[data-href] { cursor: pointer; }

/* ---------- Sortierbare Tabellen (Skript in base.html) ---------- */
table.table.js-sortable th[data-sort] { cursor: pointer; user-select: none; }
table.table.js-sortable th[data-sort]:hover { background: var(--pro-tabellenkopf); color: var(--pro-text); }
table.table.js-sortable th[data-sort]::after { content: " \2195"; opacity: .25; font-size: .85em; }
table.table.js-sortable th[data-sort="asc"]::after  { content: " \2191"; opacity: 1; }
table.table.js-sortable th[data-sort="desc"]::after { content: " \2193"; opacity: 1; }

/* ---------- Auswahl mit Filter durch Tippen (T-112) ----------
   Liste fixed statt absolute, damit .table-responsive sie nicht abschneidet. */
.bhh-filterbar { position: relative; }
.bhh-filterbar .bhh-filter-liste {
  position: fixed; z-index: 1056;
  max-height: 16rem; overflow-y: auto; margin: 2px 0 0;
  padding: .25rem 0; list-style: none;
  background: var(--pro-karte); color: var(--pro-text);
  border: 1px solid var(--pro-rand); border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.bhh-filterbar .bhh-filter-liste[hidden] { display: none; }
.bhh-filterbar .bhh-filter-liste li { padding: .3rem .75rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhh-filterbar .bhh-filter-liste li[aria-selected="true"],
.bhh-filterbar .bhh-filter-liste li:hover { background: var(--pro-tabellenkopf); }
.bhh-filterbar .bhh-filter-leer { padding: .3rem .75rem; color: var(--pro-text-leise); cursor: default; }

/* ---------- Druck (aus base.html) ---------- */
@media print {
  body { background: var(--pro-papier); font-family: 'Helvetica', Arial, sans-serif; }
  .sidebar, .app-footer, .no-print, .navbar, .alert.no-print, .breadcrumb { display: none !important; }
  .col-md-10, .col-md-2, .container-fluid, .row {
    margin: 0 !important; padding: 0 !important;
    max-width: 100% !important; flex: 0 0 100% !important;
  }
  .print-header { display: block !important; }
  .card { border: none !important; box-shadow: none !important; page-break-inside: avoid; }
  .table { font-size: 10pt; }
  a { color: var(--pro-papier-text) !important; text-decoration: none !important; }
  h1, h2, h3, h4, h5 { page-break-after: avoid; }
  thead { display: table-header-group; }
  tfoot { display: table-row-group; }
}


/* =====================================================================
   NEU 02.10.2026: feste Farben aus Vorlagen (Analyse eigene Styles v1.44.2)
   ===================================================================== */

/* ---------- Bootstrap-Klassen mit fester Farbe, zentral umgebogen ----------
   Statt jede Vorlage einzeln anzufassen. */
.bg-light:not(.badge) { background-color: var(--pro-tabellenkopf) !important; color: var(--pro-text); }
.bg-white { background-color: var(--pro-karte) !important; }
.text-dark:not(.badge) { color: var(--pro-text) !important; }
.table-dark, .table-dark > * {
  --bs-table-bg: var(--pro-tabellenkopf);
  --bs-table-color: var(--pro-text);
  --bs-table-border-color: var(--pro-rand);
  background-color: var(--pro-tabellenkopf) !important;
  color: var(--pro-text) !important;
  border-color: var(--pro-rand) !important;
}
/* Weisse Schrift auf roter Flaeche: im Dunkelmodus ist das Rot hell */
.bg-danger.text-white { color: var(--pro-fehler-text) !important; }

/* ---------- Datumsauswahl (flatpickr) ----------
   Ersetzt das helle Theme «airbnb». Gilt mit flatpickr.min.css allein. */
.flatpickr-calendar {
  background: var(--pro-karte); color: var(--pro-text);
  border: 1px solid var(--pro-rand); box-shadow: var(--pro-schatten-popup);
  font-family: var(--pro-schrift-text);
}
.flatpickr-calendar.arrowTop::before    { border-bottom-color: var(--pro-rand); }
.flatpickr-calendar.arrowTop::after     { border-bottom-color: var(--pro-karte); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--pro-rand); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--pro-karte); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--pro-text); fill: var(--pro-text); background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--pro-karte); color: var(--pro-text); }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover { background: var(--pro-tabellenkopf); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--pro-text-leise); fill: var(--pro-text-leise); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--pro-akzent-schrift); }
.flatpickr-weekdays, span.flatpickr-weekday { background: transparent; color: var(--pro-text-leise); }
.flatpickr-day { color: var(--pro-text); }
.flatpickr-day:hover, .flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover,
.flatpickr-day.inRange { background: var(--pro-tabellenkopf); border-color: var(--pro-tabellenkopf); color: var(--pro-text); }
.flatpickr-day.today { border-color: var(--pro-akzent); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--pro-tabellenkopf); border-color: var(--pro-akzent); color: var(--pro-text); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus {
  background: var(--pro-akzent); border-color: var(--pro-akzent); color: var(--pro-akzent-text);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--pro-text-leise); opacity: .6; }
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--pro-rand); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .flatpickr-time .flatpickr-time-separator { color: var(--pro-text); background: transparent; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover { background: var(--pro-tabellenkopf); }

/* ---------- Zeiteingabe (ci-propria.md §9, Joel 2026-10-09) ----------
   Skript zeiteingabe.js. PC: Liste (H), Handy/Touch: Zifferblatt (G). */
.pro-zeit { position: relative; display: block; }
.pro-zeit > input[type="time"] { padding-right: 2.6rem; }
.pro-zeit > input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.pro-zeit__knopf {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--pro-text-leise); border-radius: 0 var(--pro-radius) var(--pro-radius) 0;
}
.pro-zeit__knopf:hover, .pro-zeit.ist-offen .pro-zeit__knopf { color: var(--pro-akzent-schrift); }
.pro-zeit__flaeche { display: none; }
.pro-zeit__auswahl {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1060;
  background: var(--pro-karte); color: var(--pro-text);
  border: 1px solid var(--pro-rand); border-radius: 8px; box-shadow: var(--pro-schatten-popup);
  font-family: var(--pro-schrift-text);
}
.pro-zeit__auswahl[hidden] { display: none; }
/* H: Liste */
.pro-zeit__liste { position: fixed; display: flex; gap: 4px; padding: 6px; } /* Lage setzt das Skript */
.pro-zeit__spalte { display: flex; flex-direction: column; gap: 2px; max-height: 15rem; overflow-y: auto; min-width: 3.5rem; }
.pro-zeit__kopf { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--pro-text-leise); padding: 2px 6px 4px; position: sticky; top: 0; background: var(--pro-karte); }
.pro-zeit__wert {
  border: 0; background: transparent; color: var(--pro-text); border-radius: 4px;
  padding: .3rem .6rem; font-variant-numeric: tabular-nums; text-align: center;
}
.pro-zeit__wert:hover, .pro-zeit__wert:focus-visible { background: var(--pro-tabellenkopf); outline: none; }
.pro-zeit__wert.ist-aktiv { background: var(--pro-akzent); color: var(--pro-akzent-text); }
/* G: Zifferblatt — auf Touch-Geraeten mittig ueber der Seite */
.pro-zeit__uhr {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(20rem, calc(100vw - 32px)); padding: 16px;
  box-shadow: var(--pro-schatten-popup), 0 0 0 100vmax rgba(15, 10, 22, .45);
}
.pro-zeit__uhr-kopf { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 2.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pro-zeit__uhr-teil { border: 0; background: transparent; color: var(--pro-text-leise); border-radius: 6px; padding: 0 .4rem; font: inherit; }
.pro-zeit__uhr-teil.ist-aktiv { color: var(--pro-akzent-schrift); background: var(--pro-tabellenkopf); }
.pro-zeit__uhr-hinweis { text-align: center; font-size: .8rem; color: var(--pro-text-leise); margin: 2px 0 10px; }
.pro-zeit__zifferblatt { display: block; width: 100%; height: auto; touch-action: manipulation; }
.pro-zeit__ziffer-grund { fill: var(--pro-tabellenkopf); }
.pro-zeit__ziffer { fill: transparent; cursor: pointer; }
.pro-zeit__ziffer.ist-aktiv, .pro-zeit__mitte { fill: var(--pro-akzent); }
.pro-zeit__zeiger { stroke: var(--pro-akzent); stroke-width: 2; }
.pro-zeit__ziffer-text { fill: var(--pro-text); font-size: 15px; text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.pro-zeit__ziffer-text.ist-klein { font-size: 12px; fill: var(--pro-text-leise); }
.pro-zeit__ziffer-text.ist-aktiv { fill: var(--pro-akzent-text); }
.pro-zeit__uhr-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (pointer: coarse) {
  .pro-zeit > input[type="time"] { pointer-events: none; }
  .pro-zeit__flaeche { display: block; position: absolute; inset: 0; border: 0; background: transparent; }
}
.numInputWrapper span.arrowUp::after   { border-bottom-color: var(--pro-text-leise); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--pro-text-leise); }

/* ---------- Ablagefeld fuer Dateien (Drop-Zone) ----------
   Anliegen, Feedback, Dokumente. Das Skript setzt nur noch die Klasse
   .ist-ueber, keine Farben mehr. */
.pro-dropzone {
  border: 2px dashed var(--pro-rand); border-radius: var(--pro-radius);
  padding: .75rem 1rem; background: var(--pro-tabellenkopf);
  transition: background .15s ease, border-color .15s ease;
}
.pro-dropzone.ist-ueber { border-color: var(--pro-akzent); background: var(--pro-info-flaeche); }
/* Ueberlagerung beim Ziehen in den Mail-Editor */
.pro-drop-ueberlagerung {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pro-info-flaeche) 85%, transparent);
  border: 2px dashed var(--pro-akzent); border-radius: 8px;
  pointer-events: none; z-index: 10;
}

/* ---------- Papier: bewusst weiss, auch im Dunkelmodus ----------
   Vorschau fremder Mails (Webmail, Projekt) und Mail-Editor. Fremde Mails
   sind fuer Weiss gebaut (Entscheid Joel 02.10.2026, ci-propria.md §3 Nr. 6). */
.pro-papier {
  background: var(--pro-papier); color: var(--pro-papier-text);
  border: 1px solid var(--pro-papier-rand); border-radius: 6px;
}
.pro-papier .ql-toolbar.ql-snow, .pro-papier .ql-container.ql-snow { border-color: var(--pro-papier-rand); }
.pro-papier .ql-editor.ql-blank::before { color: var(--pro-text-leise); }

/* ---------- Schneeraeumung: Matrix ----------
   Zugewiesen = Info (geplant, noch kein Status), Erledigt = Gruen,
   Ueberfaellig = Rot. Legende nutzt dieselben Klassen (Joel 02.10.2026). */
.matrix-wrap { overflow-x: auto; }
.matrix-table { border-collapse: collapse; background: var(--pro-karte); color: var(--pro-text); }
.matrix-table th, .matrix-table td {
  border: 1px solid var(--pro-rand);
  padding: .3rem .5rem; text-align: center;
  font-size: .85rem; white-space: nowrap;
}
.matrix-table thead th { background: var(--pro-tabellenkopf); color: var(--pro-text-leise); font-weight: 600; }
.matrix-table .unit-col {
  position: sticky; left: 0; z-index: 2;
  background: var(--pro-karte); text-align: left; min-width: 220px;
}
.matrix-table thead .unit-col { background: var(--pro-tabellenkopf); z-index: 3; }
.matrix-table .kw-header { min-width: 44px; }
.matrix-table .date-header { font-size: .7rem; color: var(--pro-text-leise); font-weight: normal; }
.matrix-table .cell-count { background: var(--pro-tabellenkopf); color: var(--pro-text); font-weight: 700; }
.matrix-table tbody tr:hover td.cell-empty,
.matrix-table tbody tr:hover td.unit-col { background: var(--pro-tabellenkopf); }
.matrix-table .cell-assigned, .matrix-farbe.cell-assigned { background: var(--pro-info-flaeche); color: var(--pro-text); font-weight: 600; }
.matrix-table .cell-erledigt, .matrix-farbe.cell-erledigt { background: var(--pro-erfolg-flaeche); color: var(--pro-erfolg); font-weight: 600; }
.matrix-table .cell-past,     .matrix-farbe.cell-past     { background: var(--pro-fehler-flaeche); color: var(--pro-fehler); font-weight: 600; }
/* Das Haekchen folgt der Zellfarbe, auch wenn noch text-white daran haengt */
.matrix-table td[class*="cell-"] > .dropdown > a,
.matrix-table td[class*="cell-"] > a { color: inherit !important; }
.matrix-farbe {
  display: inline-block; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 3px; border: 2px solid var(--pro-knopf-rand);
  vertical-align: -2px; margin-right: .3em;
}
.matrix-farbe.cell-assigned { border-color: color-mix(in srgb, var(--pro-info-flaeche) 35%, var(--pro-text)); }
.matrix-farbe.cell-erledigt { border-color: var(--pro-erfolg); }
.matrix-farbe.cell-past     { border-color: var(--pro-fehler); }

/* ---------- Kalender ---------- */
.cal-grid { border-collapse: collapse; width: 100%; table-layout: fixed; background: var(--pro-karte); }
.cal-grid th { text-align: center; padding: .4rem; font-size: .8rem; color: var(--pro-text-leise); font-weight: 600; }
.cal-grid td { border: 1px solid var(--pro-rand); vertical-align: top; padding: .3rem; min-height: 80px; height: 90px; }
.cal-grid .cal-day { font-size: .75rem; font-weight: 700; color: var(--pro-text-leise); margin-bottom: .2rem; }
.cal-grid .cal-day.current { color: var(--pro-text); }
.cal-grid .cal-today { background: var(--pro-info-flaeche); }
.cal-grid .cal-other { background: var(--pro-flaeche); }
.cal-grid .cal-band  { background: var(--pro-tabellenkopf); }
.cal-event { font-size: .7rem; padding: 1px 4px; border-radius: 3px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-event a { color: inherit; text-decoration: none; }

/* ---------- Abschluss: Bilanz und Erfolgsrechnung ----------
   Linien in Schriftfarbe statt Schwarz, damit sie im Dunkelmodus sichtbar sind. */
.bilanz-table, .er-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.bilanz-table th, .bilanz-table td,
.er-table th, .er-table td { padding: 0.25rem 0.6rem; vertical-align: middle; }
.bilanz-table .nr { width: 60px; color: var(--pro-text-leise); font-variant-numeric: tabular-nums; }
.bilanz-table .betrag { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.bilanz-table .pct { width: 60px; text-align: right; color: var(--pro-text-leise); font-variant-numeric: tabular-nums; }
.bilanz-table .gruppe-h { font-weight: 700; text-decoration: underline; border-bottom: 0; padding-top: 1rem; }
.bilanz-table .subtotal td {
  border-top: 1px solid var(--pro-text); border-bottom: 3px double var(--pro-text);
  font-weight: 700; padding-top: 0.4rem; padding-bottom: 0.4rem;
}
.bilanz-table .haupttotal td {
  border-top: 3px double var(--pro-text); border-bottom: 3px double var(--pro-text);
  font-weight: 700; font-size: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.bilanz-table .haupt-h {
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--pro-text); padding-top: 1.2rem;
}
.bilanz-table .haupt-h:first-child td { padding-top: 0; }
.er-table .nr     { width: 70px; color: var(--pro-text-leise); font-variant-numeric: tabular-nums; }
.er-table .einzel { width: 130px; text-align: right; font-variant-numeric: tabular-nums; color: var(--pro-text-leise); }
.er-table .summe  { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.er-table .gruppe-h { font-weight: 700; text-decoration: underline; padding-top: 0.8rem; }
.er-table .subtotal td { border-top: 1px solid var(--pro-text); font-weight: 700; padding-top: 0.4rem; }
.er-table .haupttotal td {
  border-top: 1px solid var(--pro-text); border-bottom: 3px double var(--pro-text);
  font-weight: 700; font-size: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.er-table .haupt-h {
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--pro-text); padding-top: 1rem;
}
.er-table .ergebnis td {
  border-top: 3px double var(--pro-text); border-bottom: 3px double var(--pro-text);
  font-weight: 700; font-size: 1.05rem; padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.er-table .ergebnis.gewinn td  { color: var(--pro-erfolg); }
.er-table .ergebnis.verlust td { color: var(--pro-fehler); }
/* Druck der Bilanz: zwei Spalten nebeneinander; nur auf der Bilanz-Seite */
@media print {
  body:has(.bilanz-table) { font-size: 9pt; }
  body:has(.bilanz-table) .card { border: none !important; }
  body:has(.bilanz-table) .card-body > .row { display: block !important; }
  body:has(.bilanz-table) .card-body > .row > .col-md-6 {
    float: left !important; width: 50% !important; max-width: 50% !important; flex: none !important;
  }
  .bilanz-table { font-size: 8pt; }
  .bilanz-table th, .bilanz-table td { padding: 0.15rem 0.4rem; }
  .bilanz-table, .bilanz-table tbody tr, .bilanz-table thead { page-break-inside: avoid; }
}

/* ---------- Akonto-Assistent: Randfarbe der Quartalsfelder ---------- */
.akonto-row-valid   { border-color: var(--pro-erfolg) !important; }
.akonto-row-invalid { border-color: var(--pro-fehler) !important; }

/* ---------- Release Notes ---------- */
.pro-release-notes h2 { font-size: 1.25rem; margin-top: 1.75rem; }
.pro-release-notes h2:first-child { margin-top: 0; }
.pro-release-notes h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.pro-release-notes h4 { font-size: .95rem; margin-top: 1rem; color: var(--pro-text-leise); }
.pro-release-notes ul { margin-bottom: .75rem; }
.pro-release-notes li { margin-bottom: .35rem; }
.pro-release-notes hr { margin: 1.5rem 0; opacity: .25; }
.pro-release-notes p { margin-bottom: .6rem; }

/* ---------- Projekte: Gantt-Balken ----------
   Schrift passend zur Flaeche, statt fest weiss. */
.pro-gantt-balken { color: var(--pro-akzent-text); }
.pro-gantt-balken--offen        { background: var(--pro-text-leise); }
.pro-gantt-balken--in-arbeit    { background: var(--pro-akzent); }
.pro-gantt-balken--erledigt     { background: var(--pro-erfolg); color: var(--pro-erfolg-text); }
.pro-gantt-balken--ueberfaellig { background: var(--pro-fehler); color: var(--pro-fehler-text); }
.pro-gantt-balken:hover { color: var(--pro-akzent-text); filter: brightness(.92); }
.pro-gantt-balken--ueberfaellig:hover { color: var(--pro-fehler-text); }

/* ---------- Statusseiten: Knoepfe und Marke (aus errors/_status_seite.html) ---------- */
.pro-status-seite__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pro-status-seite__knoepfe a,
.pro-status-seite__knoepfe button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: var(--pro-radius);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: 1px solid transparent;
}
.pro-status-seite__knoepfe .ist-primaer { background: var(--pro-akzent); color: var(--pro-akzent-text); }
.pro-status-seite__knoepfe .ist-primaer:hover { background: var(--pro-akzent-dunkel); }
.pro-status-seite__knoepfe .ist-neutral { background: transparent; color: var(--pro-text); border-color: var(--pro-knopf-rand); }
.pro-status-seite__knoepfe .ist-neutral:hover { background: var(--pro-tabellenkopf); }
.pro-marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pro-schrift-titel); font-weight: 700;
  letter-spacing: -.02em; color: var(--pro-text); font-size: 17px;
}
.pro-marke .punkt { color: var(--pro-akzent); }
.pro-marke .tld { font-weight: 500; }
@media (max-width: 560px) {
  .pro-status-seite__kopf, .pro-status-seite__fuss { padding: 0 20px; font-size: 12px; }
  .pro-status-seite__code { font-size: 64px; }
  .pro-status-seite__titel { font-size: 26px; }
}


/* =====================================================================
   NACHTRAG 02.10.2026: Funde Abnahme STWEG82 v1.47.0 (NF-10 bis NF-34)
   Entscheid Joel 02.10.2026
   ===================================================================== */

/* ---------- Rand neutraler Knoepfe ----------
   .btn setzt weiter oben border transparent und steht nach .btn-outline-secondary;
   darum hier der Rand noch einmal. */
.pro-knopf--neutral, .btn-outline-secondary { border: 1px solid var(--pro-knopf-rand); }
.btn-outline-secondary:hover { background: var(--pro-tabellenkopf); color: var(--pro-text); }

/* ---------- Hinweise light und secondary (sonst Bootstrap-Weiss) ---------- */
.alert-light, .alert-secondary {
  background: var(--pro-tabellenkopf); color: var(--pro-text); border-color: var(--pro-rand);
}

/* ---------- Weitere Bootstrap-Hilfsklassen auf die CI ---------- */
.text-body, .text-black { color: var(--pro-text) !important; }
.text-body-secondary { color: var(--pro-text-leise) !important; }
.bg-body { background-color: var(--pro-flaeche) !important; }
.bg-body-tertiary, .bg-body-secondary { background-color: var(--pro-tabellenkopf) !important; }

/* ---------- Legenden-Kaestchen: 14 px, Rand in der Zustandsfarbe ---------- */
.pro-legende-farbe {
  display: inline-block; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 3px; border: 2px solid var(--pro-knopf-rand); background: var(--pro-tabellenkopf);
  vertical-align: -2px; margin-right: .3em;
}
.pro-legende-farbe--erfolg  { background: var(--pro-erfolg-flaeche);  border-color: var(--pro-erfolg); }
.pro-legende-farbe--warnung { background: var(--pro-warnung-flaeche); border-color: var(--pro-warnung); }
.pro-legende-farbe--fehler  { background: var(--pro-fehler-flaeche);  border-color: var(--pro-fehler); }
.pro-legende-farbe--info    { background: var(--pro-info-flaeche);    border-color: color-mix(in srgb, var(--pro-info-flaeche) 35%, var(--pro-text)); }
.pro-legende-farbe--marke   { background: var(--pro-tabellenkopf);    border-color: var(--pro-akzent); }

/* Kalender: Eintraege und Legende mit Bootstrap-Farben auf CI-Flaechen, Rand links in der Farbe */
.cal-event[class*="bg-"] { color: var(--pro-text) !important; border-left: 3px solid var(--pro-knopf-rand); }
.cal-event.bg-primary   { background-color: var(--pro-tabellenkopf) !important;   border-left-color: var(--pro-akzent); }
.cal-event.bg-info      { background-color: var(--pro-info-flaeche) !important;   border-left-color: color-mix(in srgb, var(--pro-info-flaeche) 35%, var(--pro-text)); }
.cal-event.bg-warning   { background-color: var(--pro-warnung-flaeche) !important; border-left-color: var(--pro-warnung); }
.cal-event.bg-secondary { background-color: var(--pro-tabellenkopf) !important;   border-left-color: var(--pro-knopf-rand); }
.cal-event.bg-success   { background-color: var(--pro-erfolg-flaeche) !important; border-left-color: var(--pro-erfolg); }
.cal-event.bg-danger    { background-color: var(--pro-fehler-flaeche) !important;  border-left-color: var(--pro-fehler); }

/* ---------- Druck ----------
   A4 ist schmaler als 768 px: ohne diese Regeln erscheint die Handy-Kopfleiste.
   Im Dunkelmodus waeren die Farben hell auf Weiss: darum im Druck immer die hellen Werte. */
@media print {
  .mobile-topbar, .sidebar-backdrop, .pro-sidebar, .sidebar { display: none !important; }
  html, body { height: auto !important; }
  .pro-app { display: block; min-height: 0; }
  main.col { padding-top: 0 !important; }
  h1, h2, h3, .pro-titel { color: var(--pro-papier-text); }
}
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --pro-flaeche: #ece6f5;
    --pro-karte: #ffffff;
    --pro-feld: #ffffff;
    --pro-sidebar: #241a33;
    --pro-sidebar-text: #d2c6e2;
    --pro-sidebar-titel: #ffffff;
    --pro-sidebar-rand: #3a2f4d;
    --pro-sidebar-aktiv: #6a3fd0;
    --pro-sidebar-aktiv-text: #ffffff;
    --pro-sidebar-menue: #2b2040;
    --pro-info-flaeche: #cdd6f2;
    --pro-sidebar-akzent: #b9a3fb;
    --pro-kreuz-rot: #d8232a;
    --pro-kreuz-weiss: #ffffff;
    --pro-knopf-rand: #8a7aa3;
    --pro-papier: #ffffff;
    --pro-papier-text: #1d1626;
    --pro-papier-rand: #dcd2ea;
    --pro-tabellenkopf: #efe9f8;
    --pro-rand: #dcd2ea;
    --pro-text: #1d1626;
    --pro-text-leise: #5f5470;
    --pro-akzent: #7a52dd;
    --pro-akzent-dunkel: #5a31bd;
    --pro-akzent-text: #ffffff;
    --pro-akzent-schrift: #5a31bd;
    --pro-erfolg: #1b7350;
    --pro-warnung: #8f5a0c;
    --pro-fehler: #b3302a;
    --pro-fehler-text: #ffffff;
    --pro-erfolg-text: #ffffff;
    --pro-warnung-text: #ffffff;
    --pro-erfolg-flaeche: #e3f1ea;
    --pro-warnung-flaeche: #f6ecd9;
    --pro-fehler-flaeche: #f7e1de;
    color-scheme: light;
  }
}


/* =====================================================================
   KLEINERE AUFLOESUNGEN (Blueprint §5.7, Entscheid Joel 2026-10-05)
   Drei Stufen fuer alle Apps:
     schmal  unter 768 px      Handy
     mittel  768 bis 1199 px   Tablet, kleiner Laptop, vergroesserter Browser
     breit   ab 1200 px        normaler Bildschirm
   Die Grenzen stehen unten als Zahl (767.98 / 768 / 1199.98), weil CSS an
   dieser Stelle keine Variablen erlaubt. Andere Grenzen fuehrt keine App
   ein. Was die Vorlagen dafuer tun muessen: ci-propria.md §8.
   ===================================================================== */

/* ---------- Bausteine fuer alle Stufen ---------- */

/* Umschalt-Knopf der Symbol-Leiste: nur in Stufe mittel sichtbar */
.pro-sidebar__umschalter { display: none; }

/* Summenzeile ueber einer Tabelle: «4 Buchungen · Total CHF ...» */
.pro-tabelle-summe {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  margin: 0 0 .5rem; font-size: .875rem; color: var(--pro-text-leise);
}
.pro-tabelle-summe strong { color: var(--pro-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Aktionsleiste unter einem Formular: Hauptknopf zuerst, Loeschen abgesetzt */
.pro-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.pro-aktionen__gefahr { margin-left: auto; }

/* Foto-Feld: Beschriftung als grosse Flaeche, das Datei-Feld darin unsichtbar */
.pro-foto-knopf {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1rem;
  border: 2px dashed var(--pro-knopf-rand); border-radius: var(--pro-radius);
  background: var(--pro-karte); color: var(--pro-text);
  font-weight: 600; cursor: pointer;
}
.pro-foto-knopf:hover { border-color: var(--pro-akzent); }
.pro-foto-knopf input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Karten-Liste: nur fuer Funktionen mit «unterwegs: ja» */
.pro-kartenliste { display: flex; flex-direction: column; gap: .6rem; }
.pro-kartenliste__zeile {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
  padding: .75rem 1rem;
  background: var(--pro-karte); color: var(--pro-text);
  border: 1px solid var(--pro-rand); border-radius: var(--radius-lg);
  text-decoration: none;
}
a.pro-kartenliste__zeile:hover { border-color: var(--pro-akzent); color: var(--pro-text); }
.pro-kartenliste__titel { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pro-kartenliste__betrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pro-kartenliste__neben { grid-column: 1 / -1; margin-top: .15rem; font-size: .85rem; color: var(--pro-text-leise); }
.pro-kartenliste__zeile.ist-total { border: 2px solid var(--pro-text); }

/* ---------- Stufen schmal und mittel: Finger statt Maus ---------- */
@media (max-width: 1199.98px) {
  /* Tippflaechen mindestens 44 px (Knoepfe haben es schon, siehe «Knoepfe») */
  .sidebar a, .pro-nav__link, .pro-sidebar__icon-knopf, .pro-sprache a { min-height: 44px; }
  .pro-sidebar__icon-knopf { min-width: 44px; }
  /* Felder: mindestens 16 px Schrift, sonst zoomt das iPhone beim Antippen */
  .form-control, .form-select { font-size: 16px; min-height: 44px; }
  textarea.form-control { min-height: 88px; }
  .form-check-input { width: 1.25rem; height: 1.25rem; }
  .table-responsive { overscroll-behavior-x: contain; }
  .pro-aktionen .btn-link { min-height: 44px; }
}

/* ---------- Stufe mittel: Symbol-Leiste ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pro-sidebar { width: var(--pro-sidebar-schmal); }
  .pro-sidebar__umschalter { display: inline-flex; margin: 0 auto 4px; }

  /* Zu: nur Symbole */
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__kopf { padding: 12px 6px; align-items: center; }
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__werkzeuge { flex-direction: column; gap: 6px; }
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__werkzeuge .ms-auto { margin-left: 0 !important; }
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__gemeinschaft,
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__ort,
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__suche,
  .pro-sidebar:not(.sidebar-open) .pro-sprache,
  .pro-sidebar:not(.sidebar-open) .group-title,
  .pro-sidebar:not(.sidebar-open) .sub-title,
  .pro-sidebar:not(.sidebar-open) .pro-nav__text,
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__fuss > .small,
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__marke > span { display: none; }
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__menue,
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__fuss { padding: 8px 6px; }
  .pro-sidebar:not(.sidebar-open) .px-2 { padding-left: 0 !important; padding-right: 0 !important; }
  .pro-sidebar:not(.sidebar-open) a { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
  .pro-sidebar:not(.sidebar-open) .pro-sidebar__marke { justify-content: center; padding: 10px 0 0; }

  /* Offen: volle Breite ueber dem Inhalt, der Inhalt bleibt stehen */
  .pro-sidebar.sidebar-open {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
    width: var(--pro-sidebar-breite);
    z-index: 1060;
    box-shadow: 0 0 30px rgba(0,0,0,.4);
  }
  .pro-sidebar.sidebar-open + .pro-main { margin-left: var(--pro-sidebar-schmal); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1055; display: none; }
  .sidebar-backdrop.active { display: block; }
}

/* ---------- Stufe schmal: Schublade, eine Spalte ---------- */
@media (max-width: 767.98px) {
  .pro-main { padding: 16px 14px; gap: 14px; }
  .card-body { padding: 1rem; }
  /* Tabelle wischt seitwaerts statt Zellen zu quetschen (Beleg-Nummern brachen um) */
  .table-responsive > .table th, .table-responsive > .table td { white-space: nowrap; }
  /* Aktionsleiste unten fest, Hauptknopf volle Breite, Loeschen darunter abgesetzt */
  .pro-aktionen {
    position: sticky; bottom: 0; z-index: 900;
    flex-direction: column; align-items: stretch;
    margin: 1.25rem -14px 0; padding: 10px 14px 12px;
    background: var(--pro-karte); border-top: 1px solid var(--pro-rand);
  }
  .pro-aktionen > .btn { width: 100%; }
  .pro-aktionen__gefahr { margin: .75rem 0 0; order: 99; }
}