/* GMS Plattform – Gestaltung im Stil von macOS und iOS. Keine externen Schriften, keine Inline-Stile (CSP). */

:root {
  color-scheme: light;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --hg: #f5f5f7;
  --hg-2: #ffffff;
  --hg-3: rgba(118, 118, 128, 0.12);
  --hg-4: rgba(118, 118, 128, 0.08);
  --hg-hover: rgba(0, 0, 0, 0.04);
  --seitenleiste: rgba(242, 242, 245, 0.82);
  --glas: rgba(255, 255, 255, 0.72);
  --text: #1d1d1f;
  --text-2: rgba(60, 60, 67, 0.75);
  --text-3: rgba(60, 60, 67, 0.5);
  --linie: rgba(60, 60, 67, 0.13);
  --linie-stark: rgba(60, 60, 67, 0.22);
  --akzent: #007aff;
  --akzent-text: #0066d6;
  --akzent-hg: rgba(0, 122, 255, 0.11);
  --akzent-hg-stark: rgba(0, 122, 255, 0.18);
  --gruen: #34c759;
  --gruen-text: #1c7f37;
  --gruen-hg: rgba(52, 199, 89, 0.15);
  --orange: #ff9500;
  --orange-text: #a85a00;
  --orange-hg: rgba(255, 149, 0, 0.16);
  --rot: #ff3b30;
  --rot-text: #c41e14;
  --rot-hg: rgba(255, 59, 48, 0.12);
  --lila: #af52de;
  --lila-text: #8a3cb3;
  --lila-hg: rgba(175, 82, 222, 0.13);
  --grau-text: #6e6e73;
  --grau-hg: rgba(142, 142, 147, 0.16);
  --notiz-hg: #fff6cf;
  --notiz-rand: #f1d470;
  --wc-hg: rgba(0, 122, 255, 0.07);
  --schatten: 0 0.5px 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05);
  --schatten-hoch: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.1);
  --schatten-blatt: 0 20px 60px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  --fokus: 0 0 0 3.5px rgba(0, 122, 255, 0.35);
  --radius: 12px;
  --radius-k: 8px;
  --radius-g: 18px;
  --seitenleiste-breite: 252px;
  --kopf-hoehe: 52px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hg: #161618;
    --hg-2: #232325;
    --hg-3: rgba(118, 118, 128, 0.24);
    --hg-4: rgba(118, 118, 128, 0.16);
    --hg-hover: rgba(255, 255, 255, 0.05);
    --seitenleiste: rgba(30, 30, 32, 0.82);
    --glas: rgba(35, 35, 37, 0.72);
    --text: #f5f5f7;
    --text-2: rgba(235, 235, 245, 0.7);
    --text-3: rgba(235, 235, 245, 0.42);
    --linie: rgba(84, 84, 88, 0.55);
    --linie-stark: rgba(110, 110, 115, 0.7);
    --akzent: #0a84ff;
    --akzent-text: #4aa3ff;
    --akzent-hg: rgba(10, 132, 255, 0.2);
    --akzent-hg-stark: rgba(10, 132, 255, 0.3);
    --gruen: #30d158;
    --gruen-text: #4ade80;
    --gruen-hg: rgba(48, 209, 88, 0.2);
    --orange: #ff9f0a;
    --orange-text: #ffb340;
    --orange-hg: rgba(255, 159, 10, 0.2);
    --rot: #ff453a;
    --rot-text: #ff6961;
    --rot-hg: rgba(255, 69, 58, 0.2);
    --lila-text: #d38bff;
    --lila-hg: rgba(191, 90, 242, 0.22);
    --grau-text: #a1a1a6;
    --grau-hg: rgba(142, 142, 147, 0.24);
    --notiz-hg: rgba(255, 214, 10, 0.13);
    --notiz-rand: rgba(255, 214, 10, 0.35);
    --wc-hg: rgba(10, 132, 255, 0.12);
    --schatten: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);
    --schatten-hoch: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45);
    --schatten-blatt: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hg: #161618;
  --hg-2: #232325;
  --hg-3: rgba(118, 118, 128, 0.24);
  --hg-4: rgba(118, 118, 128, 0.16);
  --hg-hover: rgba(255, 255, 255, 0.05);
  --seitenleiste: rgba(30, 30, 32, 0.82);
  --glas: rgba(35, 35, 37, 0.72);
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.7);
  --text-3: rgba(235, 235, 245, 0.42);
  --linie: rgba(84, 84, 88, 0.55);
  --linie-stark: rgba(110, 110, 115, 0.7);
  --akzent: #0a84ff;
  --akzent-text: #4aa3ff;
  --akzent-hg: rgba(10, 132, 255, 0.2);
  --akzent-hg-stark: rgba(10, 132, 255, 0.3);
  --gruen: #30d158;
  --gruen-text: #4ade80;
  --gruen-hg: rgba(48, 209, 88, 0.2);
  --orange: #ff9f0a;
  --orange-text: #ffb340;
  --orange-hg: rgba(255, 159, 10, 0.2);
  --rot: #ff453a;
  --rot-text: #ff6961;
  --rot-hg: rgba(255, 69, 58, 0.2);
  --lila-text: #d38bff;
  --lila-hg: rgba(191, 90, 242, 0.22);
  --grau-text: #a1a1a6;
  --grau-hg: rgba(142, 142, 147, 0.24);
  --notiz-hg: rgba(255, 214, 10, 0.13);
  --notiz-rand: rgba(255, 214, 10, 0.35);
  --wc-hg: rgba(10, 132, 255, 0.12);
  --schatten: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);
  --schatten-hoch: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45);
  --schatten-blatt: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

/* Grundlagen ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--text);
  background: var(--hg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern";
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.klein { width: 15px; height: 15px; }
svg.ic.gross { width: 26px; height: 26px; stroke-width: 1.6; }
svg.ic.riesig { width: 44px; height: 44px; stroke-width: 1.3; }
.versteckt, [hidden] { display: none !important; }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl, .tabelle td.zahl, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.gedimmt { color: var(--text-2); }
.blass { color: var(--text-3); }
.klein { font-size: 12.5px; }
.fett { font-weight: 600; }
.umbruch { white-space: pre-wrap; overflow-wrap: anywhere; }
.rechts { text-align: right; }
.mitte { text-align: center; }
.zeile-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zeile-flex.weit { justify-content: space-between; }
.spalte-flex { display: flex; flex-direction: column; gap: 10px; }
.abstand-o { margin-top: 18px; }
.abstand-u { margin-bottom: 14px; }
.raum { flex: 1; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }

/* Hülle: Seitenleiste + Inhalt ------------------------------------------------------------------- */
.huelle { display: grid; grid-template-columns: var(--seitenleiste-breite) 1fr; min-height: 100vh; }
.seitenleiste {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--seitenleiste);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-right: 0.5px solid var(--linie);
  padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.marke-logo { width: 32px; height: 32px; display: grid; place-items: center; color: #096ab2; flex: none; }
.marke-logo svg.zeichen { width: 32px; height: 32px; }
:root[data-theme="dark"] .marke-logo { color: #3f95e2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke-logo { color: #3f95e2; } }
.anmelde-logo img { display: block; width: min(240px, 80%); height: auto; margin: 0 auto 20px; }
/* Assistent: Feld unter dem Menü, eigene Seite */
.seiten-assistent { display: flex; align-items: center; gap: 6px; margin: 10px 4px 0; padding: 0 8px; border-radius: 10px; background: var(--hg-3); }
.seiten-assistent .ic { color: var(--lila-text); flex: none; }
.seiten-assistent .feld { border: 0; background: transparent; padding-left: 0; min-height: 34px; box-shadow: none; }
.seiten-assistent:focus-within { box-shadow: 0 0 0 3px var(--akzent-hg); }
.assistent-karte { display: flex; flex-direction: column; gap: 12px; }
.assistent-karte .ki-zeile { align-items: center; }
.assistent-eingabe { flex: 1; font-size: 17px; min-height: 48px; }
.assistent-ergebnis:empty { display: none; }
.ki-verlauf[hidden] + .assistent-ergebnis { margin-top: 0; }
.assistent-karte + .ki-verlauf { margin-top: 14px; }
/* KI-Eingabefeld */
.ki-knopf { gap: 6px; }
.ki-knopf .ic { color: var(--lila-text); }
/* Chat oben rechts (auftrag/033): Zahl der ungelesenen Nachrichten am Knopf */
.chat-kopf-knopf { position: relative; }
.chat-kopf-knopf .zaehler { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 5px;
  border-radius: 9px; background: var(--rot); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums; }
.ki-flaeche { display: flex; flex-direction: column; gap: 12px; min-height: 340px; }
.ki-verlauf { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; }
.ki-beitrag { max-width: 88%; border-radius: 14px; padding: 9px 13px; font-size: 14px; line-height: 1.45; }
.ki-beitrag.nutzer { align-self: flex-end; background: var(--akzent-hg); color: var(--akzent-text); }
.ki-beitrag.ki { align-self: flex-start; background: var(--hg-3); }
.ki-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ki-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
/* Live-Chat (22.10.2026): Arbeitsschritte von Claude, sobald sie passieren */
.ki-schritte { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); }
.ki-schritte li::before { content: "› "; color: var(--text-3); }
.ki-beitrag.ki.fehler { background: var(--rot-hg); color: var(--rot-text); }
.ki-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.ki-vorschlag { border: 0; background: var(--hg-3); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; text-align: left; }
.ki-vorschlag:hover:not(:disabled) { background: var(--akzent-hg); color: var(--akzent-text); }
.ki-vorschlag:disabled { opacity: 0.55; cursor: default; }
.ki-zeile { display: flex; gap: 8px; align-items: flex-end; margin-top: auto; }
.ki-zeile .ki-eingabe { flex: 1; resize: vertical; min-height: 44px; }
/* Aufträge an Claude (Projekt je Person) */
.claude-bereich { margin-top: 18px; }
.claude-bereich .abschnitt-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.claude-karte { display: flex; flex-direction: column; gap: 10px; }
.claude-eingabe { width: 100%; resize: vertical; min-height: 76px; font-size: 15px; line-height: 1.45; }
.claude-senden { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.claude-nachfrage { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); background: var(--hg-3); border-radius: 10px; padding: 4px 6px 4px 10px; }
.claude-nachfrage span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-nachfrage[hidden] { display: none; }
.claude-liste { display: flex; flex-direction: column; gap: 10px; }
.claude-auftrag { display: flex; flex-direction: column; gap: 8px; }
.claude-auftrag.ungelesen { box-shadow: inset 3px 0 0 var(--lila-text); }
.claude-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.claude-frage { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; font-size: 14px; line-height: 1.45; }
.claude-antwort { background: var(--hg-3); border-radius: 12px; padding: 9px 13px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.claude-fuss { display: flex; flex-wrap: wrap; gap: 6px; }
.claude-fuss:empty { display: none; }
.claude-weiter { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 760px) { .ki-knopf span { display: none; } }
.anmelde-logo img.dunkel { display: none; }
:root[data-theme="dark"] .anmelde-logo img.hell { display: none; }
:root[data-theme="dark"] .anmelde-logo img.dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .anmelde-logo img.hell { display: none; }
  :root:not([data-theme="light"]) .anmelde-logo img.dunkel { display: block; }
}
.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-text b { font-size: 14px; font-weight: 600; }
.marke-text span { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-gruppe { margin-top: 10px; }
.nav-titel { font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 4px 10px; text-transform: none; letter-spacing: 0.01em; }
.nav-punkt {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--text);
  font-size: 13.5px; cursor: pointer; text-decoration: none; position: relative; min-height: 32px;
}
.nav-punkt:hover { background: var(--hg-hover); text-decoration: none; }
.nav-punkt .ic { color: var(--akzent); }
.nav-punkt.aktiv { background: var(--akzent-hg-stark); font-weight: 500; }
.nav-punkt .zaehler { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nav-punkt .zaehler.wichtig { background: var(--akzent); color: #fff; border-radius: 10px; padding: 0 7px; line-height: 18px; font-weight: 600; }
/* Plattformen der Gruppe links in der Seitenleiste (309, Janik 26.10.2026): Knopf wie ein Menüpunkt, Logo der Firma in ihren Farben */
button.nav-punkt { width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.plattform-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.nav-trenner { height: 0.5px; background: var(--linie); margin: 8px 10px; }
/* Gruppen der linken Leiste zum Auf- und Zuklappen (Sebastian 04.11.2026: „Dropdown feld links bitte einfügen das ist zu voll“) – die
   Überschrift ist ein Knopf mit Pfeil; zugeklappt zeigt sie die Summe der Zähler ihrer Punkte */
.nav-gruppe { display: flex; flex-direction: column; gap: 4px; }
.nav-gruppe-kopf {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; margin-top: 6px; border: 0; border-radius: 8px;
  background: none; font-family: inherit; line-height: 1.3; text-align: left; cursor: pointer;
}
.nav-gruppe-kopf:hover { background: var(--hg-hover); color: var(--text); }
.nav-gruppe-kopf .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-gruppe-kopf .pfeil { color: var(--text-3); transition: transform 0.2s ease; }
.nav-gruppe.zu .nav-gruppe-kopf .pfeil { transform: rotate(-90deg); }
.nav-gruppe-zahl { font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nav-gruppe-zahl.wichtig { background: var(--akzent); color: #fff; border-radius: 10px; padding: 0 7px; line-height: 18px; font-weight: 600; }
.nav-gruppe:not(.zu) .nav-gruppe-zahl, .nav-gruppe-zahl:empty { display: none; }
.nav-gruppe-inhalt { display: flex; flex-direction: column; gap: 4px; }
:root:not([data-glas="aus"]) .nav-gruppe-kopf { border-radius: 14px; }
:root:not([data-glas="aus"]) .nav-gruppe-kopf:hover { background: var(--lg-knopf); }
/* „Mehr“ am Handy: dieselben Gruppen */
.gruppe .mehr-gruppe-kopf .haupt b { font-weight: 600; }
.gruppe .mehr-gruppe-kopf .pfeil { transition: transform 0.2s ease; }        /* zu: Pfeil nach unten, offen: nach oben (die Bereiche haben Pfeile nach rechts) */
.gruppe .mehr-gruppe-kopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.gruppe .mehr-gruppe-inhalt > .zeile { padding-left: 28px; }
.gruppe .mehr-gruppe-inhalt > .zeile::before, .gruppe .mehr-gruppe-inhalt + .zeile::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--linie);
}
@media (prefers-reduced-motion: reduce) {
  .nav-gruppe-kopf .pfeil, .gruppe .mehr-gruppe-kopf .pfeil { transition: none; }
}
/* Schmale Fenster (Leiste nur mit Symbolen): keine Überschriften, darum alle Punkte zeigen; Gruppen durch eine Linie getrennt */
@media (max-width: 980px) {
  .nav-gruppe-inhalt[hidden] { display: flex !important; }   /* gegen [hidden] { display: none !important } oben */
  .nav-gruppe { border-top: 0.5px solid var(--linie); padding-top: 4px; margin-top: 4px; }
}
.seitenleiste-fuss { margin-top: auto; padding-top: 12px; border-top: 0.5px solid var(--linie); display: flex; flex-direction: column; gap: 6px; }
.person-knopf { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; }
.person-knopf:hover { background: var(--hg-hover); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; flex: none;
  background: linear-gradient(145deg, #a1a1a6, #6e6e73);
}
.avatar.gross { width: 56px; height: 56px; font-size: 20px; }
.avatar.akzent { background: linear-gradient(145deg, #2f8cff, #0058d6); }
.person-knopf .wer { display: flex; flex-direction: column; min-width: 0; }
.person-knopf .wer b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-knopf .wer span { font-size: 11.5px; color: var(--text-2); }
.demo-hinweis { font-size: 11px; color: var(--orange-text); background: var(--orange-hg); border-radius: 8px; padding: 5px 9px; line-height: 1.35; }

.inhalt { min-width: 0; display: flex; flex-direction: column; }
.kopfleiste {
  position: sticky; top: 0; z-index: 20; height: var(--kopf-hoehe); display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent; transition: border-color 0.2s;
}
.kopfleiste.mit-linie { border-bottom-color: var(--linie); }
.kopfleiste .kopf-titel { font-weight: 600; font-size: 14px; opacity: 0; transition: opacity 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopfleiste.mit-linie .kopf-titel { opacity: 1; }
.kopfleiste .zurueck { display: none; }
.seite { padding: 6px 28px 48px; max-width: 1480px; width: 100%; }
.seite.breit { max-width: none; }
.seitenkopf { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.seitenkopf h1 {
  font-family: var(--schrift-titel); font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; margin: 0;
}
.seitenkopf .untertitel { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; margin: 26px 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.abschnitt-titel { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 22px 4px 8px; display: flex; align-items: center; gap: 8px; }

/* Knöpfe ------------------------------------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 13px;
  border-radius: var(--radius-k); border: 0; cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  background: var(--hg-3); color: var(--text); transition: background 0.12s, transform 0.06s, opacity 0.12s; text-decoration: none;
  -webkit-user-select: none; user-select: none;
}
.knopf:hover { background: var(--hg-4); text-decoration: none; filter: brightness(0.98); }
.knopf:active { transform: scale(0.98); }
.knopf[disabled], .knopf.aus { opacity: 0.42; cursor: default; pointer-events: none; }
.knopf.primaer { background: #0071e3; color: #fff; }      /* Kontrast mit weißer Schrift ≥ 4,5:1, hell und dunkel */
.knopf.primaer:hover { filter: brightness(1.08); }
.knopf.getoent { background: var(--akzent-hg); color: var(--akzent-text); }
.knopf.gruen { background: #248a3d; color: #fff; }        /* dunkleres Grün: Kontrast mit weißer Schrift ≥ 4,5:1 */
.knopf.gruen-getoent { background: var(--gruen-hg); color: var(--gruen-text); }
.knopf.orange-getoent { background: var(--orange-hg); color: var(--orange-text); }
.knopf.gefahr { background: var(--rot-hg); color: var(--rot-text); }
.knopf.gefahr-voll { background: var(--rot); color: #fff; }
.knopf.schlicht { background: none; color: var(--akzent-text); padding-left: 6px; padding-right: 6px; }
.knopf.schlicht:hover { background: var(--akzent-hg); }
.knopf.klein { min-height: 26px; padding: 3px 10px; font-size: 12.5px; border-radius: 7px; }
.knopf.gross { min-height: 44px; padding: 10px 20px; font-size: 16px; border-radius: 12px; }
.knopf.rund { width: 30px; padding: 0; border-radius: 50%; }
.knopf.voll { width: 100%; }
.knopf .lade { width: 14px; height: 14px; border-width: 2px; }
.knopfgruppe { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Formulare -------------------------------------------------------------------------------------- */
.feld, select.feld, textarea.feld {
  width: 100%; min-height: 34px; padding: 7px 11px; border-radius: var(--radius-k); border: 0.5px solid transparent;
  background: var(--hg-3); outline: none; transition: box-shadow 0.15s, background 0.15s; font-size: 14px;
}
.feld:focus { box-shadow: var(--fokus); background: var(--hg-2); border-color: var(--akzent); }
textarea.feld { min-height: 80px; resize: vertical; line-height: 1.45; }
select.feld { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.feld.klein { min-height: 28px; padding: 4px 9px; font-size: 13px; }
.feld.fehler { box-shadow: 0 0 0 3px var(--rot-hg); }
.feldgruppe { display: flex; flex-direction: column; gap: 5px; }
.feldgruppe label, .feld-titel { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.feldgruppe .hilfe { font-size: 12px; color: var(--text-3); }
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.formular .ganz { grid-column: 1 / -1; }
.suche { position: relative; }
.suche .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 15px; height: 15px; }
.suche .feld { padding-left: 32px; }
.schalter { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .bahn { width: 38px; height: 23px; border-radius: 12px; background: var(--hg-3); position: relative; transition: background 0.18s; flex: none; }
.schalter .bahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s cubic-bezier(.3,.7,.4,1); }
.schalter input:checked + .bahn { background: var(--gruen); }
.schalter input:checked + .bahn::after { transform: translateX(15px); }
.schalter input:focus-visible + .bahn { box-shadow: var(--fokus); }
.schalter input:disabled + .bahn { opacity: 0.45; }
.kontrollkaestchen { display: inline-flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.kontrollkaestchen input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--akzent); flex: none; }

/* Segmente und Chips ---------------------------------------------------------------------------- */
.segmente { display: inline-flex; background: var(--hg-3); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmente button {
  border: 0; background: none; padding: 4px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text);
  display: inline-flex; gap: 6px; align-items: center; min-height: 26px;
}
.segmente button:hover { background: var(--hg-hover); }
.segmente button.aktiv { background: var(--hg-2); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04); }
.segmente button .zahl { color: var(--text-2); font-size: 12px; }
/* Roter Punkt „hier ist etwas zu tun“ (28.10.2026) */
.segmente button .tab-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; margin-left: -3px; align-self: flex-start; margin-top: 3px; }
.segmente.stufen button { min-width: 74px; justify-content: center; }
.segmente.stufen button.aktiv.s1 { color: var(--akzent-text); }
.segmente.stufen button.aktiv.s2 { color: var(--gruen-text); }
.segmente.stufen button.aktiv.s3 { color: var(--orange-text); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 0; background: var(--hg-3); border-radius: 16px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; min-height: 26px; color: var(--text);
}
.chip:hover { background: var(--hg-4); }
.chip.aktiv { background: var(--akzent); color: #fff; }
.chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--nan-farbe, var(--grau-text)); }

/* Pillen (Status) -------------------------------------------------------------------------------- */
.pille {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 11px; font-size: 12px; font-weight: 500;
  line-height: 19px; white-space: nowrap; background: var(--grau-hg); color: var(--grau-text);
}
.pille.gruen { background: var(--gruen-hg); color: var(--gruen-text); }
.pille.orange { background: var(--orange-hg); color: var(--orange-text); }
.pille.rot { background: var(--rot-hg); color: var(--rot-text); }
.pille.blau { background: var(--akzent-hg); color: var(--akzent-text); }
.pille.lila { background: var(--lila-hg); color: var(--lila-text); }
.pille.umriss { background: none; box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--text-2); }
.pille .punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ampel { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--grau-text); box-shadow: 0 0 0 3px var(--grau-hg); }
.ampel.gruen { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hg); }
.ampel.orange { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-hg); }
.ampel.rot { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hg); }
.nan-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--nan-farbe, var(--grau-text)); flex: none; }

/* Karten, Gruppen, Kacheln ----------------------------------------------------------------------- */
.karte { background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 18px; }
.karte.eng { padding: 0; overflow: hidden; }
.karte + .karte { margin-top: 14px; }
.karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.karte-kopf h3 { margin: 0; font-size: 14px; }
.karte-kopf .raum + * { margin-left: auto; }
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zwei-spalten.papier-links { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.gruppe { background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.gruppe .zeile {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 46px; position: relative; color: var(--text);
  text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: default;
}
.gruppe a.zeile, .gruppe button.zeile { cursor: pointer; }
.gruppe a.zeile:hover, .gruppe button.zeile:hover { background: var(--hg-hover); text-decoration: none; }
.gruppe .zeile + .zeile::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--linie); }
.gruppe .zeile .haupt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gruppe .zeile .haupt b { font-weight: 500; font-size: 14px; }
.gruppe a.haupt { color: var(--text); text-decoration: none; }
.gruppe a.haupt:hover b { color: var(--akzent-text); }
.gruppe .zeile .haupt span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.gruppe .zeile .wert { color: var(--text-2); font-variant-numeric: tabular-nums; }
.gruppe .zeile .pfeil { color: var(--text-3); }
.gruppe .zeile .symbol { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--akzent-hg); color: var(--akzent-text); flex: none; }
.gruppe .zeile .symbol.gruen { background: var(--gruen-hg); color: var(--gruen-text); }
.gruppe .zeile .symbol.orange { background: var(--orange-hg); color: var(--orange-text); }
.gruppe .zeile .symbol.rot { background: var(--rot-hg); color: var(--rot-text); }
.gruppe .zeile .symbol.lila { background: var(--lila-hg); color: var(--lila-text); }
.gruppe .zeile .symbol.grau { background: var(--grau-hg); color: var(--grau-text); }
.kachel {
  background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); padding: 15px 16px; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--text); border: 0; text-align: left; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; min-height: 96px;
}
a.kachel:hover, button.kachel:hover { text-decoration: none; box-shadow: var(--schatten-hoch); transform: translateY(-1px); }
.kachel .kz { font-family: var(--schrift-titel); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .kt { font-size: 13.5px; font-weight: 600; }
.kachel .ku { font-size: 12.5px; color: var(--text-2); }
.kachel.gruen .kz { color: var(--gruen-text); }
.kachel.orange .kz { color: var(--orange-text); }
.kachel.rot .kz { color: var(--rot-text); }
.kachel.blau .kz { color: var(--akzent-text); }
.kachel .kopf { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kachel.aktiv { box-shadow: inset 0 0 0 2px var(--akzent), var(--schatten); }
/* Eingangsrechnungen: Gesamtübersicht */
.ue-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ue-werkzeuge .suche { flex: 1 1 280px; max-width: 460px; }
.ue-werkzeuge select.feld { width: auto; max-width: 240px; }
.ueberweisung-feld { width: 150px; min-height: 30px; }
.summen-zeile { text-align: right; padding: 10px 14px; color: var(--text-2); font-weight: 500; }
.rot-text { color: var(--rot-text); font-weight: 600; }
.gruen-text { color: var(--gruen-text); font-weight: 600; }      /* Gutschrift im Kontoauszug (Buchhaltung › Kontoauszüge, 310) */
.hinweis {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; background: var(--akzent-hg); color: var(--text); font-size: 13.5px;
}
.hinweis .ic { color: var(--akzent-text); margin-top: 1px; }
.hinweis.orange { background: var(--orange-hg); }
.hinweis.orange .ic { color: var(--orange-text); }
.hinweis.rot { background: var(--rot-hg); }
.hinweis.rot .ic { color: var(--rot-text); }
.hinweis.gruen { background: var(--gruen-hg); }
.hinweis.gruen .ic { color: var(--gruen-text); }
.hinweis.grau { background: var(--hg-4); }
.hinweis.grau .ic { color: var(--text-2); }
.hinweis b { font-weight: 600; }
.hinweis .knopf { margin-left: auto; }

/* Tabellen --------------------------------------------------------------------------------------- */
.tabelle-huelle { background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); overflow: auto; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabelle th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; font-size: 12px; color: var(--text-2); background: var(--hg-2);
  padding: 9px 12px; border-bottom: 0.5px solid var(--linie); white-space: nowrap;
}
.tabelle td { padding: 9px 12px; border-bottom: 0.5px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle tbody tr.klickbar:hover td { background: var(--hg-hover); }
.tabelle tbody tr.gewaehlt td { background: var(--akzent-hg); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle td .unter { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.tabelle .ha { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .tage.alt { color: var(--orange-text); font-weight: 600; }
.tabelle.kompakt td { padding: 6px 10px; }
.tabelle tfoot td { font-weight: 600; border-top: 0.5px solid var(--linie-stark); }

/* Aufmaß: Übersichten links, Liste, Detail ------------------------------------------------------- */
.arbeitsflaeche { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
.arbeitsflaeche.mit-detail { grid-template-columns: 236px minmax(330px, 0.9fr) minmax(420px, 1.25fr); }
.arbeitsflaeche > * { min-width: 0; }
.detail > *, .karte, .gruppe { min-width: 0; }
.arbeitsflaeche.ohne-uebersicht { grid-template-columns: minmax(0, 1fr); }
.arbeitsflaeche.ohne-uebersicht.mit-detail { grid-template-columns: minmax(300px, 0.8fr) minmax(440px, 1.35fr); }
.uebersichten { position: sticky; top: calc(var(--kopf-hoehe) + 8px); display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - var(--kopf-hoehe) - 16px); overflow-y: auto; padding-bottom: 12px; }
.ue-punkt .avatar { width: 26px; height: 26px; font-size: 11px; }
.ue-punkt .spalte-flex { gap: 0; min-width: 0; flex: 1; }
.ue-punkt .spalte-flex span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken.breit { width: 30px; }
.ue-leiste { display: none; gap: 8px; margin-bottom: 12px; align-items: center; }
.ue-leiste .suche { flex: 1; }
.ue-wahl-knopf { flex: none; font-weight: 600; }
.uebersichten.im-blatt { position: static; max-height: none; overflow: visible; display: flex; }
.uebersichten.im-blatt .suche { display: none; }
.such-info:empty { display: none; }
.such-info { margin: -4px 2px 10px; }
.trenner { width: 1px; height: 18px; background: var(--linie-stark); margin: 0 6px; flex: none; }
.knopf.rot-text { color: var(--rot-text); }
.knopf.rot-text:hover { background: var(--rot-hg); }
.uebersichten .ue-titel { font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 12px 10px 4px; }
.ue-punkt {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 0; background: none;
  text-align: left; width: 100%; color: var(--text); font-size: 13.5px; min-height: 34px;
}
.ue-punkt:hover { background: var(--hg-hover); }
.ue-punkt.aktiv { background: var(--hg-2); box-shadow: var(--schatten); font-weight: 500; }
.ue-punkt .zahl { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12.5px; }
.ue-punkt .zahl.stark { font-weight: 700; color: var(--text); font-size: 15px; }
.ue-punkt .farbe { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--grau-text); }
.ue-punkt .farbe.blau { background: var(--akzent); }
.ue-punkt .farbe.orange { background: var(--orange); }
.ue-punkt .farbe.gruen { background: var(--gruen); }
.ue-punkt .farbe.lila { background: var(--lila); }
.ue-punkt .farbe.grau { background: #a1a1a6; }
.ue-punkt .farbe.rot { background: var(--rot); }
.listen-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.listen-kopf h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.018em; font-family: var(--schrift-titel); }
.listen-kopf .untertitel { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.listen-kopf .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.liste-kompakt .zeile-k {
  display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 0.5px solid var(--linie); align-items: center;
}
.liste-kompakt .zeile-k:hover { background: var(--hg-hover); }
.liste-kompakt .zeile-k.gewaehlt { background: var(--akzent-hg); }
.liste-kompakt .zeile-k .haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-kompakt .zeile-k .haupt b { font-weight: 600; font-size: 13.5px; }
.liste-kompakt .zeile-k .haupt span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail { position: sticky; top: calc(var(--kopf-hoehe) + 8px); max-height: calc(100vh - var(--kopf-hoehe) - 20px); overflow: auto; padding-bottom: 20px;
  container-type: inline-size; }
/* Aufmaß-Detail: Stammdaten und Mengen untereinander, nebeneinander erst bei breitem Detail (lange LV-Texte) */
.aufmass-karten { grid-template-columns: minmax(0, 1fr); }
/* Dokumentation (Objektordner der HA) */
.doku-pfad { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; min-width: 0; }
.doku-pfad > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe .zeile.doku-datei { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.gruppe .zeile.doku-datei:hover { background: var(--hg-3); }
/* PDF mit „Neue Fassung“ daneben (Janik 22.10.2026) */
.gruppe .doku-datei-zeile { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.gruppe .doku-datei-zeile > .zeile.doku-datei { flex: 1; min-width: 0; }
.doku-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.doku-bild { aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--hg-3); cursor: zoom-in;
  display: grid; place-items: center; }
.doku-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.doku-bild:hover img { transform: scale(1.04); }
.doku-bild:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Neu seit der letzten Prüfung (Sebastian 30.10.2026: neue Bilder des NAN nach einer Korrektur „angezeigt bekommen“) */
.doku-bild.neu { position: relative; box-shadow: 0 0 0 2px #ff3b30; }
.doku-bild.neu::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 0 2px var(--hg-2); }
.doku-neu { border: 1px solid color-mix(in srgb, #ff3b30 45%, transparent); background: color-mix(in srgb, #ff3b30 5%, transparent);
  border-radius: 12px; padding: 10px 12px; margin: 6px 0 14px; }
.doku-neu-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
/* Roter Punkt „neu“ wie am Reiter Postfach rechnung@ (Sebastian 30.10.2026: „Verwende doch bitte den Roten Punkt“) */
.rot-punkt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; margin-right: 6px; vertical-align: middle; }
.ue-punkt .rot-punkt { margin: 0 -3px 0 auto; }
.ue-punkt .rot-punkt + .zahl { margin-left: 0; }
.tabelle td .unter.rot-text { color: var(--rot-text); white-space: normal; }
.doku-bild.mehr { cursor: pointer; color: var(--akzent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12.5px; }
.doku-bild.mehr b { font-size: 18px; }
/* Bilder nach Unterordnern wie auf dem Server (Dominik 29.10.2026) */
.doku-ordner { margin: 0 0 10px; }
.doku-ordner > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; padding: 4px 2px 6px; color: var(--text-1, inherit); }
.doku-ordner > summary::-webkit-details-marker { display: none; }
.doku-ordner > summary .ic { color: var(--akzent-text); }
.doku-ordner > summary .gedimmt { margin-left: auto; font-size: 12px; }
.doku-ordner:not([open]) > summary { opacity: .8; }
.doku-tipp { margin: 6px 4px 0; }
.betrachter { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.betrachter-bild { max-width: 100%; max-height: min(70vh, 900px); object-fit: contain; border-radius: 10px; background: var(--hg-3); }
.betrachter-unter { text-align: center; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .doku-bild img { transition: none; } .doku-bild:hover img { transform: none; } }
@container (min-width: 780px) { .aufmass-karten { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.detail-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.detail-kopf h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--schrift-titel); }
.detail-kopf .unter { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.detail-kopf .knopf.rund { margin-left: auto; }
.schritte { display: flex; gap: 0; margin: 4px 0 16px; background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); padding: 12px 10px; overflow-x: auto; }
.schritt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); min-width: 72px; position: relative; text-align: center; }
.schritt::before { content: ""; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--linie); }
.schritt:first-child::before { display: none; }
.schritt .knoten { width: 16px; height: 16px; border-radius: 50%; background: var(--hg-2); box-shadow: inset 0 0 0 2px var(--linie-stark); position: relative; z-index: 1; }
.schritt.erledigt { color: var(--text-2); }
.schritt.erledigt .knoten { background: var(--gruen); box-shadow: none; }
.schritt.erledigt::before, .schritt.aktiv::before { background: var(--gruen); }
.schritt.aktiv { color: var(--text); font-weight: 600; }
.schritt.aktiv .knoten { background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hg); }
.schritt.aktiv.orange .knoten { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-hg); }
.daten-liste { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13.5px; }
.daten-liste dt { color: var(--text-2); }
.daten-liste dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.mengen { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mengen td { padding: 6px 0; border-bottom: 0.5px solid var(--linie); }
.mengen tr:last-child td { border-bottom: 0; }
.mengen td.code { width: 46px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mengen td.m { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; width: 70px; }
.mengen td.m.abweichung { color: var(--orange-text); }
.mengen th { font-size: 11.5px; color: var(--text-3); font-weight: 600; text-align: right; padding-bottom: 4px; }
.mengen th:nth-child(-n+2) { text-align: left; }
/* Positionen ändern (GMS-Korrektur) */
.mengen.bearbeiten td.m { width: 110px; }
.mengen.bearbeiten td.m .feld { width: 96px; text-align: right; min-height: 32px; padding: 4px 8px; }
.mengen.bearbeiten tr.gemeldet td:not(.m) { font-weight: 600; }
.projekt-filter { max-width: 340px; }
/* Eingangsrechnungen wie die Excel-Tabelle */
.projekt-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; white-space: normal; }
.feld.geld { text-align: right; font-variant-numeric: tabular-nums; }
.ue-werkzeuge select.feld { width: auto; min-width: 150px; }
/* Doku-Suche in der Karte, Hervorhebung beim Sprung von „Doku ansehen“ */
.doku-suche { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 0 8px; border-radius: 9px; background: var(--hg-3); }
.doku-suche .feld { border: 0; background: transparent; box-shadow: none; padding-left: 0; }
.doku-treffer .gruppe { margin-bottom: 12px; max-height: 320px; overflow: auto; }
.doku-karte.hervor { box-shadow: 0 0 0 3px var(--akzent-hg); transition: box-shadow .3s; }

/* Verlauf (wie ein Chat) ------------------------------------------------------------------------- */
.verlauf { display: flex; flex-direction: column; gap: 10px; }
.v-eintrag { padding: 10px 13px; border-radius: 12px; background: var(--hg-4); max-width: 100%; }
.v-eintrag .v-kopf { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-2); margin-bottom: 3px; flex-wrap: wrap; }
.v-eintrag .v-kopf b { color: var(--text); font-weight: 600; font-size: 12.5px; }
.v-eintrag .v-text { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Wer schreibt – Farben wie Spalte B der Haupttabelle (Janik 27.10.2026): 🟦 GMS, 🔴 Westconnect, 🟢 NAN; interne Notizen von GMS bleiben
   gelb mit dem blauen Rand. Neu (seit dem letzten Öffnen, 315) ist fett. */
.v-eintrag.wer-gms { background: var(--akzent-hg); box-shadow: inset 3px 0 0 var(--akzent); }
.v-eintrag.wer-westconnect { background: var(--rot-hg); box-shadow: inset 3px 0 0 var(--rot-text); }
.v-eintrag.wer-nan { background: var(--gruen-hg); box-shadow: inset 3px 0 0 var(--gruen-text); }
.v-eintrag.intern { background: var(--notiz-hg); box-shadow: inset 3px 0 0 var(--akzent), inset 0 0 0 1px var(--notiz-rand); }
.v-eintrag.neu .v-text { font-weight: 650; }
.v-eintrag.neu .v-kopf b { font-weight: 750; }
.wer-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; vertical-align: middle; margin-right: 4px; }
.wer-punkt.gms { background: var(--akzent); }
.wer-punkt.westconnect { background: var(--rot-text); }
.wer-punkt.nan { background: var(--gruen-text); }
.verlauf-kopf { justify-content: space-between; flex-wrap: wrap; }
.verlauf-legende { display: flex; gap: 12px; font-size: 12px; font-weight: 500; color: var(--text-2); text-transform: none; letter-spacing: 0; }
.neu-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-right: 6px; vertical-align: middle; }
.neu-punkt.westconnect { background: var(--rot-text); }
.neu-punkt.nan { background: var(--gruen-text); }
tr.ungelesen td { font-weight: 600; }
.letzte.neu { font-weight: 650; color: var(--text); }
.v-eintrag.system { background: none; padding: 2px 4px; }
.v-eintrag.system .v-text { font-size: 12.5px; color: var(--text-2); }
.v-eintrag.system .v-kopf { margin: 0; }
.verfassen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.verfassen .zeile-flex { justify-content: space-between; }

/* Blätter (Dialoge), Mitteilungen ---------------------------------------------------------------- */
.schleier {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.28); display: grid; place-items: center; padding: 20px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: einblenden 0.16s ease-out;
}
.blatt {
  background: var(--hg-2); border-radius: var(--radius-g); box-shadow: var(--schatten-blatt); width: min(540px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; animation: hochkommen 0.22s cubic-bezier(.2,.8,.3,1);
}
.blatt.breit { width: min(860px, 100%); }
.blatt.sehr-breit { width: min(1180px, 100%); }
.blatt-kopf { padding: 18px 22px 6px; display: flex; align-items: flex-start; gap: 12px; }
.blatt-kopf h2 { margin: 0; font-size: 18px; }
.blatt-kopf .unter { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.blatt-kopf .knopf.rund { margin-left: auto; }
.blatt-inhalt { padding: 10px 22px 6px; overflow: auto; }
.blatt-fuss { padding: 14px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.blatt-fuss .links { margin-right: auto; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes hochkommen { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.mitteilungen { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.mitteilung {
  background: rgba(30, 30, 32, 0.92); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 13.5px; box-shadow: var(--schatten-hoch);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; gap: 9px; align-items: center; animation: hochkommen 0.2s ease-out;
  max-width: min(560px, calc(100vw - 32px)); pointer-events: auto;
}
.mitteilung .ic { color: #8fd0ff; }
.mitteilung.fehler .ic { color: #ff8a80; }
.mitteilung.ok .ic { color: #6ee7a0; }
.leer { padding: 44px 20px; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.leer .ic { color: var(--text-3); }
.leer b { color: var(--text); font-size: 15px; font-weight: 600; }
.lade {
  width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--hg-3); border-top-color: var(--akzent); animation: drehen 0.8s linear infinite; display: inline-block;
}
.lade-flaeche { display: grid; place-items: center; padding: 60px; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Anmeldung --------------------------------------------------------------------------------------- */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--akzent-hg), transparent 70%), var(--hg); }
.anmelde-karte { width: min(400px, 100%); background: var(--hg-2); border-radius: 22px; box-shadow: var(--schatten-blatt); padding: 34px 32px 28px; }
.anmelde-karte h1 { text-align: center; font-size: 24px; margin: 0 0 4px; letter-spacing: -0.02em; font-family: var(--schrift-titel); }
.anmelde-fuer { text-align: center; margin: -4px 0 14px; padding: 8px 12px; border-radius: var(--radius-k); background: var(--akzent-hg);
  color: var(--akzent-text); font-size: 13px; font-weight: 600; }   /* Anmeldung für eine andere Plattform der Gruppe (309) */
.anmelde-oder { text-align: center; color: var(--text-3); font-size: 12px; margin: 2px 0 -2px; }
.anmelde-karte p.unter { text-align: center; color: var(--text-2); margin: 0 0 22px; font-size: 14px; }
.anmelde-karte form { display: flex; flex-direction: column; gap: 12px; }
.anmelde-karte .feld { min-height: 42px; font-size: 15px; }
.anmelde-karte .knopf.primaer { min-height: 42px; font-size: 15px; }
.code-feld { text-align: center; font-size: 26px !important; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; font-weight: 600; }
.qr { display: block; margin: 6px auto 12px; width: 190px; height: 190px; border-radius: 12px; background: #fff; padding: 6px; }
.geheimnis { font-family: var(--mono); text-align: center; font-size: 13px; color: var(--text-2); word-spacing: 4px; margin-bottom: 8px; user-select: all; }
.fehlertext { color: var(--rot-text); font-size: 13px; text-align: center; min-height: 18px; }
.anmelde-fuss { margin-top: 18px; text-align: center; font-size: 12px; color: var(--text-3); }

/* Net D Raster ------------------------------------------------------------------------------------ */
.raster-huelle { overflow: auto; background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); }
.raster { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.raster th, .raster td { padding: 6px 8px; border-bottom: 0.5px solid var(--linie); white-space: nowrap; }
.raster th { position: sticky; top: 0; background: var(--hg-2); z-index: 2; font-size: 12px; color: var(--text-2); font-weight: 600; text-align: center; }
.raster th.links, .raster td.links { text-align: left; }
.raster td.adr { position: sticky; left: 0; background: var(--hg-2); z-index: 1; min-width: 210px; }
.raster th.intern { color: var(--text-3); background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--hg-4) 5px 10px); }
.raster th .einheit { display: block; font-size: 11px; font-weight: 500; color: var(--text-2); }
.lv-langtext { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.raster td.m { text-align: center; padding: 3px 4px; }
.zelle {
  min-width: 38px; height: 28px; border-radius: 7px; border: 0; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px;
  background: none; color: var(--text-3);
}
.zelle:hover { box-shadow: inset 0 0 0 1.5px var(--akzent); }
.zelle.neu { background: #d6ebff; color: #0050a8; }   /* rote Linie 02.11.2026: neu blau, angenommen grün */
.zelle.eingereicht { background: #fff1c2; color: #7a5600; }
.zelle.angenommen { background: #d9f7e3; color: #136a34; }
.zelle.abgelehnt { background: #ffd9d6; color: #a3150b; }
.zelle.vorkasse { background: #ecdcff; color: #6a2aa0; }
.zelle.abgerechnet { background: var(--hg-4); color: var(--text-2); }
.zelle.intern { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 8px); }
:root[data-theme="dark"] .zelle.neu { background: rgba(10, 132, 255, 0.24); color: #7cc0ff; }
:root[data-theme="dark"] .zelle.eingereicht { background: rgba(255, 214, 10, 0.2); color: #ffd84d; }
:root[data-theme="dark"] .zelle.angenommen { background: rgba(48, 209, 88, 0.22); color: #6ee7a0; }
:root[data-theme="dark"] .zelle.abgelehnt { background: rgba(255, 69, 58, 0.24); color: #ff8a80; }
:root[data-theme="dark"] .zelle.vorkasse { background: rgba(191, 90, 242, 0.24); color: #dcb0ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zelle.neu { background: rgba(10, 132, 255, 0.24); color: #7cc0ff; }
  :root:not([data-theme="light"]) .zelle.eingereicht { background: rgba(255, 214, 10, 0.2); color: #ffd84d; }
  :root:not([data-theme="light"]) .zelle.angenommen { background: rgba(48, 209, 88, 0.22); color: #6ee7a0; }
  :root:not([data-theme="light"]) .zelle.abgelehnt { background: rgba(255, 69, 58, 0.24); color: #ff8a80; }
  :root:not([data-theme="light"]) .zelle.vorkasse { background: rgba(191, 90, 242, 0.24); color: #dcb0ff; }
}
.legende { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.legende .zelle { min-width: 0; padding: 0 9px; height: 24px; cursor: default; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.legende .zelle:hover { box-shadow: none; }
.projekt-liste .ue-punkt .ort { font-size: 11.5px; color: var(--text-3); }
.zelle.plan { background: var(--hg); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
/* Gebäude mit aufklappbaren Wohnungen (wie die Zeilen der Freigabe-Tabelle) */
.netd-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.netd-werkzeuge .suche { flex: 1 1 260px; max-width: 420px; }
.netd-raster tbody.gebaeude.offen .geb-zeile td { background: var(--hg-3); }
.netd-raster tbody.gebaeude.offen .geb-zeile td.adr { background: var(--hg-3); }
.netd-raster .geb-kopf, .netd-raster .wo-kopf { display: flex; align-items: center; gap: 6px; }
.netd-raster .geb-text { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.netd-raster .geb-text > * { overflow: hidden; text-overflow: ellipsis; }
.netd-raster .aufklappen { width: 24px; height: 24px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.netd-raster .aufklappen:hover { background: var(--hg-hover); color: var(--akzent-text); }
.netd-raster .aufklappen-platz { width: 24px; flex: none; }
.netd-raster .wo-zeile td.adr { padding-left: 38px; }
.netd-raster .wo-zeile td { border-bottom-color: transparent; }
.netd-raster .wo-zeile:last-child td { border-bottom-color: var(--linie); }
.netd-raster .wo-id { font-family: var(--mono); font-size: 12px; color: var(--text); }
/* Dib-Kom je Wohnung (Etage, Lage): auf schmalen Bildschirmen gekürzt, ganz im Hinweis beim Darüberfahren */
.netd-raster .wo-dib { min-width: 0; max-width: min(240px, 32vw); overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-2); }
.netd-raster td.we { color: var(--text-2); font-size: 12px; }
.netd-raster .mini-symbol { border: 0; background: none; color: var(--akzent-text); cursor: pointer; padding: 2px; border-radius: 5px; display: inline-flex; }
.netd-raster .mini-symbol:hover { background: var(--akzent-hg); }
.klein-pille { font-size: 11px; line-height: 18px; padding: 0 7px; white-space: nowrap; }
.zelle.summe { outline: 1.5px dashed currentColor; outline-offset: -4px; font-weight: 500; }
.zelle.gemischt { background: var(--hg-3); color: var(--text-2); }
.zelle.vorschlag { background: none; color: var(--orange-text); outline: 1.5px dashed var(--orange); outline-offset: -4px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 6px; }
span.zelle.vorschlag { cursor: help; font-size: 11px; font-weight: 600; }
.blaettern { justify-content: center; margin-top: 12px; }
/* Änderungen aus der Plattform (Migration 343): Punkt = steht noch nicht in der Mastertabelle; gestrichen; abgeleitet (14a + 14b → 14) */
.zelle.korr { position: relative; }
.zelle.korr::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 1.5px var(--hg-2); }
.legende .zelle.korr { padding-left: 20px; }
.legende .zelle.korr::after { left: 8px; right: auto; top: 50%; margin-top: -3px; }
.zelle.gestrichen { background: none; color: var(--text-3); text-decoration: line-through; outline: 1.5px dashed var(--orange); outline-offset: -4px; }
.zelle.abgeleitet { background: none; color: var(--text); outline: 1.5px dashed var(--text-3); outline-offset: -4px; font-weight: 600; }
.legende .zelle.abgeleitet { outline-offset: -3px; }
.tabelle td .unter.orange-text { color: var(--orange-text); white-space: normal; }
.netd-herkunft ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; overflow-wrap: anywhere; }
.netd-verlauf ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.netd-verlauf li { padding: 8px 10px; border-radius: 10px; background: var(--hg-3); display: flex; flex-direction: column; gap: 3px; }
/* Großes Raster scrollt in sich, damit Kopfzeile (Positionen) und Adressspalte stehen bleiben */
.raster-huelle.fest { max-height: calc(100dvh - 150px); overscroll-behavior: contain; }
.netd-raster .geb-text .klein-pille { display: inline-block; margin-top: 2px; }
@media (max-width: 760px) {
  .netd-raster td.adr { min-width: 0; max-width: 52vw; padding-left: 4px; }
  .netd-raster .geb-text { max-width: 38vw; }
  .netd-raster .wo-zeile td.adr { padding-left: 30px; }
  .netd-raster td.we, .netd-raster th { padding-left: 4px; padding-right: 4px; }
  .raster-huelle.fest { max-height: calc(100dvh - 190px); }
}

/* Rechnung (Vorschau im Browser) ---------------------------------------------------------------- */
.papier { background: #fff; color: #111; border-radius: 6px; box-shadow: var(--schatten-hoch); padding: 26px 30px 30px 34px; font-size: 12.5px;
  position: relative; color-scheme: light; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.papier .wasserzeichen { position: absolute; top: 18px; left: 34px; color: #c41e14; border: 1.5px solid #c41e14; border-radius: 4px; padding: 1px 8px; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; opacity: 0.8; }
.papier .kopf-logo { display: flex; justify-content: flex-end; min-height: 34px; }
.papier .kopf-logo img { width: 190px; height: auto; }
.papier .kopf-logo b { font-size: 16px; }
.papier .kopf-zeile { display: flex; justify-content: space-between; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.papier .absender { font-size: 10px; color: #6b6b6b; margin-bottom: 3px; }
.papier .anschrift { line-height: 1.38; font-size: 13px; min-height: 70px; }
.papier .info { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 1px; margin: 26px 0 0; font-size: 12.5px; align-self: flex-end; }
.papier .info dt, .papier .info dd { margin: 0; }
.papier .titel { font-size: 19px; font-weight: 700; margin: 14px 0 12px; }
.papier p { margin: 0 0 10px; line-height: 1.35; }
.papier table { width: 100%; border-collapse: collapse; margin-top: 6px; table-layout: fixed; }
.papier th:nth-child(1) { width: 6%; } .papier th:nth-child(2) { width: 9%; } .papier th:nth-child(3) { width: 9%; }
.papier th:nth-child(4) { width: 15%; } .papier th:nth-child(6), .papier th:nth-child(7) { width: 15%; }
.papier { container-type: inline-size; }
.papier th .kurz { display: none; }
@container (max-width: 560px) {
  .papier th .lang { display: none; }
  .papier th .kurz { display: inline; }
  .papier table { font-size: 10.5px; }
  .papier th { font-size: 10px; padding: 5px 3px; }
  .papier td { padding: 4px 3px 5px; }
  .papier tr.rg-gruppe td { font-size: 12px; }
}
.papier th { text-align: left; font-weight: 400; font-size: 12px; background: #d9d9d9; padding: 6px 4px; }
.papier td { padding: 5px 4px 6px; border-bottom: 0.5px solid #c8c8c8; vertical-align: top; }
.papier td.artikel { white-space: normal; width: 74px; overflow-wrap: anywhere; }
.papier td.z, .papier th.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.papier tr.rg-gruppe td { font-size: 14px; padding-top: 10px; }
.papier .summen { margin-top: 2px; }
.papier .summen div { display: flex; justify-content: space-between; padding: 5px 4px; }
.papier .summen div.abstand { margin-top: 8px; }
.papier .summen .gesamt { font-weight: 700; background: #d9d9d9; margin-bottom: 8px; }
.pruefliste { display: flex; flex-direction: column; gap: 8px; }
.pruefpunkt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.pruefpunkt .zeichen { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.pruefpunkt .zeichen svg { width: 13px; height: 13px; stroke-width: 2.6; }
.pruefpunkt.ok .zeichen { background: var(--gruen-hg); color: var(--gruen-text); }
.pruefpunkt.orange .zeichen { background: var(--orange-hg); color: var(--orange-text); }
.pruefpunkt.rot .zeichen { background: var(--rot-hg); color: var(--rot-text); }
.pruefpunkt b { font-weight: 600; display: block; }
.pruefpunkt span { color: var(--text-2); font-size: 12.5px; }
.pruefpunkt .was { display: block; margin-top: 3px; color: var(--text-1); }
.pruefpunkt .was b { display: inline; }
.papier tr.markiert.orange td { background: rgba(255, 149, 0, 0.16); }
.papier tr.markiert.rot td { background: rgba(255, 59, 48, 0.12); }
.papier tr.markiert td:first-child { box-shadow: inset 3px 0 0 #ff9500; }
.papier tr.markiert.rot td:first-child { box-shadow: inset 3px 0 0 #ff3b30; }
.auswahl-karte { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); }
.auswahl-karte:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent-hg); }
.auswahl-karte input { accent-color: var(--akzent); margin-top: 3px; }
.auswahl-karte b { display: block; font-weight: 600; font-size: 13.5px; }
.auswahl-karte.gross { padding: 14px 14px; align-items: center; background: var(--hg-2); box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.auswahl-karte.gross input { width: 24px; height: 24px; margin: 0; flex: none; }
.auswahl-karte.gross span { display: block; }
.aktionsleiste {
  position: sticky; bottom: 12px; z-index: 30; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--glas); box-shadow: var(--schatten-blatt);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-weight: 600;
}
.anleitung { margin: 0 0 14px; padding-left: 20px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
textarea.feld.intern-feld { background: var(--notiz-hg); box-shadow: inset 0 0 0 1px var(--notiz-rand); }
.auswahl-karte span { font-size: 12.5px; color: var(--text-2); }

/* Diagramme --------------------------------------------------------------------------------------- */
.balken-diagramm { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 170px; padding-top: 10px; }
.balken-gruppe { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.balken-saeulen { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.balken { width: 11px; border-radius: 4px 4px 2px 2px; background: var(--akzent); min-height: 2px; height: var(--h, 2px); transition: height 0.4s ease-out; }
.balken.gruen { background: var(--gruen); }
.balken.grau { background: #c7c7cc; }
.balken-gruppe .beschriftung { font-size: 11px; color: var(--text-3); }
.diagramm-legende { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.diagramm-legende span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--akzent); vertical-align: -1px; }
.diagramm-legende span.gruen::before { background: var(--gruen); }
.diagramm-legende span.grau::before { background: #c7c7cc; }
.fortschritt { height: 6px; background: var(--hg-3); border-radius: 3px; overflow: hidden; }
.fortschritt > div { height: 100%; background: var(--akzent); width: var(--w, 0%); border-radius: 3px; }

/* Stunden ------------------------------------------------------------------------------------------ */
.stempel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px; text-align: center; }
.stempel .uhr { font-family: var(--schrift-titel); font-size: 46px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.stempel .knopf.gross { min-width: 220px; }
/* Stunden wie in der Stunden-App */
.heute-karte { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; text-align: center; }
.heute-karte .uhr { font-family: var(--schrift-titel); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.heute-status { font-size: 15px; color: var(--text-2); }
.heute-status.laeuft { color: var(--gruen-text); font-weight: 600; }
.heute-knoepfe { justify-content: center; }
.heute-knoepfe .knopf { min-width: 170px; min-height: 44px; font-size: 15px; }
.monat-wahl { justify-content: center; gap: 6px; margin: 4px 0 12px; }
.monat-wahl b { min-width: 150px; text-align: center; font-size: 15px; }
.stunden-zahlen { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.stunden-zahlen .kachel { min-height: 0; padding: 11px 13px; }
.stunden-zahlen .kz { font-size: 22px; }
.zahl-feld { width: 74px; }
.stunden-monat .tabelle td { padding: 3px 6px; }
.stunden-monat .tabelle th { padding: 8px 6px; }
.stunden-monat td.tag { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.stunden-monat td.tag .ft-name { display: block; font-size: 11px; font-weight: 400; color: var(--lila-text); }
.stunden-monat tr.wochenende td { background: var(--hg-3); }
.stunden-monat tr.heute td { box-shadow: inset 0 1.5px 0 var(--akzent), inset 0 -1.5px 0 var(--akzent); }
.stunden-monat .feld.klein { min-height: 26px; padding: 2px 6px; }
.stunden-monat select.feld.klein { min-width: 112px; padding-right: 26px; }
.stunden-monat input[type="time"].feld.klein { width: 92px; }
.stunden-monat td:last-child .feld.klein { min-width: 140px; }
.stunden-monat tfoot td { font-weight: 600; padding: 9px 6px; }
.gruppe .zeile.wochenende { background: var(--hg-3); }
.gruppe .zeile.heute { box-shadow: inset 3px 0 0 var(--akzent); }
/* Urlaubskalender */
.kalender-raster { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.kalender-raster th, .kalender-raster td { border-bottom: 0.5px solid var(--linie); padding: 0; }
.kalender-raster .kal-name { position: sticky; left: 0; background: var(--hg-2); z-index: 1; text-align: left; padding: 6px 10px; white-space: nowrap; min-width: 150px; }
.kalender-raster tr.ich .kal-name { font-weight: 700; }
.kalender-raster .kal-tag { min-width: 26px; text-align: center; font-weight: 500; color: var(--text-2); padding: 4px 0; }
.kalender-raster .kal-tag span { display: block; font-size: 10px; }
.kalender-raster .kal-tag b { display: block; font-size: 12px; color: var(--text); }
.kalender-raster .frei { background: var(--hg-3); }
.kalender-raster .heute { box-shadow: inset 1.5px 0 0 var(--akzent), inset -1.5px 0 0 var(--akzent); }
.kalender-raster .kal-zelle { height: 26px; }
.kal-genehmigt { background: #34c759 !important; }
.kal-beantragt { background: repeating-linear-gradient(135deg, #ffcc80 0 5px, #ffe0b2 5px 10px) !important; }
.kal-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-muster { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.kal-liste { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.kal-liste li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kal-zeit { border-radius: 6px; padding: 1px 7px; font-size: 12px; }
.kal-zeit.genehmigt { background: var(--gruen-hg); color: var(--gruen-text); }
.kal-zeit.beantragt { background: var(--orange-hg); color: var(--orange-text); }
.tag-zeile { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; }
.kalender-tag.wochenende { color: var(--text-3); }

/* Rechte-Matrix ----------------------------------------------------------------------------------- */
.rechte-zeile { display: grid; grid-template-columns: minmax(170px, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; position: relative; }
.rechte-zeile + .rechte-zeile::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--linie); }
.rechte-zeile .name b { font-weight: 500; display: block; }
.rechte-zeile .name span { font-size: 12px; color: var(--text-2); }
.rechte-zeile .abweichend { color: var(--orange-text); font-size: 11.5px; font-weight: 600; margin-left: 6px; }
/* Bausteine (297): Gruppen nach Firmenteil; Bereiche nicht gebuchter Bausteine bleiben änderbar, gelten aber nicht */
.rechte-gruppe { padding: 12px 16px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); }
.rechte-zeile.nicht-gebucht .name b { color: var(--text-2); }
.rechte-zeile.nicht-gebucht .name span { color: var(--orange-text); }
/* Letzte Abwahl mit ihrer Sicherung (298) */
.rechte-zeile .name .abwahl { display: block; margin-top: 2px; color: var(--text-3); overflow-wrap: anywhere; }
.diff { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 520px; }
.diff .alt { color: var(--rot-text); text-decoration: line-through; }
.diff .neu { color: var(--gruen-text); }

/* Ausgangsrechnungen: Übersicht nach Monaten, Rechnung und Angebot von Hand (Sebastian 15.10.2026) ----------- */
.monate-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.monat-karte { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 10px; background: var(--hg-3); color: var(--text);
  text-decoration: none; min-width: 0; transition: background 0.12s; }
.monat-karte:hover { text-decoration: none; background: var(--hg-hover); }
.monat-karte.aktiv { background: var(--akzent-hg); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.monat-karte .mk-name { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.monat-karte b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-karte .mk-unter { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.monat-karte.leer b { color: var(--text-3); font-weight: 500; }
.uebersicht-detail .detail { position: static; max-height: none; overflow: visible; }
.editor-positionen { width: 100%; border-collapse: collapse; }
.editor-positionen th { text-align: left; font-size: 12px; color: var(--text-2); font-weight: 600; padding: 4px 6px; border-bottom: 0.5px solid var(--linie-stark); }
.editor-positionen th.z, .editor-positionen td.z { text-align: right; }
.editor-positionen td { padding: 4px 6px; vertical-align: top; border-bottom: 0.5px solid var(--linie); }
.editor-positionen td:nth-child(1) { width: 190px; }
.editor-positionen td:nth-child(3) { width: 90px; }
.editor-positionen td:nth-child(4) { width: 96px; }
.editor-positionen td:nth-child(5) { width: 124px; }
.editor-positionen td:nth-child(6) { width: 108px; padding-top: 9px; white-space: nowrap; }
.editor-positionen td:last-child { width: 40px; }
.editor-positionen textarea.feld { resize: vertical; min-height: 30px; width: 100%; }
.editor-positionen select.feld, .editor-positionen input.feld { width: 100%; }
.editor-positionen tr.text-zeile textarea { font-weight: 600; }
.editor-positionen td.zeile-werkzeug { white-space: nowrap; }
/* Anhänge einer Eingangsrechnung (Sebastian 16.10.2026) */
.anhang-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.anhang { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--hg-2); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.anhang:hover { border-color: var(--akzent-text); }
.anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; font-weight: 600; }
.anhang .unter { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.editor-leiste { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-leiste select.feld { width: auto; min-width: 230px; }
.feld.abweichend { box-shadow: inset 0 0 0 1.5px var(--orange-text); }
.tabelle td.einzeilig { white-space: nowrap; }
.editor-summen { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: 14px; padding: 6px 2px; }
.editor-summen b { font-size: 15.5px; }
@media (max-width: 760px) {
  .monate-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .geld-kacheln { grid-template-columns: 1fr; }
  .editor-positionen thead { display: none; }
  .editor-positionen tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 0.5px solid var(--linie); }
  .editor-positionen td { width: auto !important; border: 0; padding: 0 !important; }
  .editor-positionen td:nth-child(2), .editor-positionen tr.text-zeile td:first-child { grid-column: 1 / -1; }
}

/* Schriftverkehr Westconnect und Dateiansicht (Word/Excel in der Plattform, Sebastian 15.10.2026) ------------------- */
.anhang-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.anhang-knopf { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; padding: 3px 9px; border-radius: 7px; border: 0;
  background: var(--akzent-hg); color: var(--akzent-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.anhang-knopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-betreff { display: flex; flex-direction: column; gap: 3px; white-space: normal; min-width: 220px; max-width: 560px; }
.sv-betreff .anhang-liste { margin-top: 3px; }
.sv-betreff .anhang-knopf { max-width: 320px; }
.ha-liste { max-width: 230px; }
.anhang-knopf:hover { background: var(--akzent-hg-stark); }
.ha-liste { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.mail-text { font-size: 13.5px; line-height: 1.45; background: var(--hg-3); border-radius: 10px; padding: 10px 12px; max-height: 420px; overflow: auto; }
.datei-ansicht { min-height: 160px; }
.excel-huelle { overflow: auto; max-height: calc(100vh - 260px); border: 0.5px solid var(--linie-stark); border-radius: 8px; background: #fff; }
table.excel { border-collapse: collapse; font-size: 12px; color: #111; font-variant-numeric: tabular-nums; }
table.excel th { position: sticky; top: 0; background: #f2f2f2; color: #555; font-weight: 500; padding: 3px 8px; border: 0.5px solid #d6d6d6; z-index: 1; }
table.excel th.zeilennr { left: 0; z-index: 2; min-width: 34px; text-align: right; }
table.excel tbody th.zeilennr { position: sticky; left: 0; top: auto; z-index: 1; }
table.excel td { border: 0.5px solid #e2e2e2; padding: 3px 8px; white-space: pre-wrap; max-width: 420px; vertical-align: top; background: #fff; }
table.excel td.fett { font-weight: 600; }
.dokument-ansicht { background: #fff; color: #111; border-radius: 8px; padding: 18px 22px; max-height: calc(100vh - 240px); overflow: auto;
  font-size: 13.5px; line-height: 1.5; border: 0.5px solid var(--linie-stark); }
.dokument-ansicht h3 { margin: 14px 0 6px; font-size: 16px; }
.dokument-ansicht p { margin: 0 0 8px; }
table.dok-tabelle { border-collapse: collapse; margin: 6px 0 12px; font-size: 12.5px; }
table.dok-tabelle td { border: 0.5px solid #cfcfcf; padding: 4px 7px; vertical-align: top; }

/* Posteingang wie Apple Mail (Sebastian 15.10.2026): Postfächer links, Mails in der Mitte, Lesebereich rechts --------- */
.post-leiste .ue-punkt { align-items: center; }
.pf-name { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.pf-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-adresse { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-punkt.aktiv .pf-adresse { color: inherit; opacity: 0.8; }
/* Ordnerbaum je Postfach (Janik 26.10.2026): eingerückt, einklappbar; am Handy im Blatt mit großen Tippflächen */
.pf-knoten { display: flex; align-items: center; gap: 2px; min-width: 0; padding-left: calc(var(--ebene, 0) * 14px); }
.pf-knoten > .ue-punkt { flex: 1; min-width: 0; }
.pf-klapp, .pf-klapp-platz { width: 22px; flex: none; }
.pf-klapp { height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.pf-klapp:hover { background: var(--hg-hover); color: var(--text); }
.pf-klapp .ic { transition: transform 0.15s ease; }
.pf-klapp[aria-expanded="true"] .ic { transform: rotate(90deg); }
.pf-kinder { display: flex; flex-direction: column; gap: 2px; }
.pf-kinder[hidden] { display: none; }
.ue-punkt.pf-ordner { min-height: 30px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.ue-punkt .zahl.leise { color: var(--text-3); }
.ue-punkt.pf-ordner.weg { color: var(--text-3); font-style: italic; }
.mz-ordner { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--text-2); }
.mz-ordner > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-zeile.gewaehlt .mz-ordner { color: rgba(255, 255, 255, 0.85); }
/* Knopf zur Wahl am Handy: ein langer Ordnername wird gekürzt statt die Seite zu verbreitern */
.ue-leiste .ue-wahl-knopf { max-width: 100%; min-width: 0; }
.ue-leiste .ue-wahl-knopf > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .pf-klapp .ic { transition: none; } }
@media (max-width: 760px) {
  .pf-klapp, .pf-klapp-platz { width: 40px; }
  .pf-klapp { height: 42px; }
  .ue-punkt.pf-ordner { min-height: 42px; font-size: 15px; }
}
.mail-liste { background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.mail-zeile { display: flex; gap: 8px; padding: 10px 14px 10px 8px; border-bottom: 0.5px solid var(--linie); cursor: pointer; }
.mail-zeile:last-child { border-bottom: 0; }
.mail-zeile:hover { background: var(--hg-hover); }
.mail-zeile.gewaehlt { background: var(--akzent); color: #fff; }
.mail-zeile.gewaehlt .mz-auszug, .mail-zeile.gewaehlt .mz-zeit, .mail-zeile.gewaehlt .mz-postfach { color: rgba(255, 255, 255, 0.85); }
.mail-zeile.gewaehlt .pille { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mz-punkt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.mail-zeile.ungelesen .mz-punkt { background: var(--akzent); }
.mail-zeile.gewaehlt.ungelesen .mz-punkt { background: #fff; }
.mz-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mz-kopf { display: flex; align-items: baseline; gap: 8px; }
.mz-von { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mz-zeit { flex: none; font-size: 12px; color: var(--text-2); }
.mz-betreff { display: flex; align-items: center; gap: 4px; font-size: 13.5px; min-width: 0; }
.mz-betreff span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-zeile.ungelesen .mz-betreff { font-weight: 600; }
.mz-auszug { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-marken { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.mz-postfach { font-size: 11.5px; color: var(--text-2); }
.mail-kopf h2 { font-size: 21px; }
.mail-von { margin-top: 4px; font-size: 14px; }
.mail-text-karte .mail-text { background: none; padding: 0; max-height: none; font-size: 14px; }
.reiter-mit-post { flex-wrap: wrap; gap: 8px; }
.netd-aufmass-name { display: block; min-width: 180px; max-width: 340px; overflow-wrap: anywhere; font-weight: 600; }
.netd-knoepfe { align-items: flex-end; gap: 6px; }
.netd-nan-mengen { gap: 4px; max-width: 560px; }
.netd-nan-mengen .pille { white-space: nowrap; }
.tabelle td.einzeilig .unter { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.eingang-name { display: block; min-width: 150px; }
.postfach-chip .zahl { font-weight: 600; color: var(--akzent-text); }
.profil-wahl { min-width: 54px; }
.buchhaltung-filter .feld { width: auto; min-width: 180px; flex: 0 1 auto; }

/* Handy: Tableiste, Vollbild-Details -------------------------------------------------------------- */
.tableiste { display: none; }
@media (max-width: 1640px) {
  .arbeitsflaeche.mit-detail:not(.ohne-uebersicht) { grid-template-columns: 184px minmax(250px, 0.75fr) minmax(440px, 1.45fr); gap: 16px; }
  .arbeitsflaeche.mit-detail .uebersichten .ue-punkt { font-size: 13px; padding: 6px 8px; }
}
@media (max-width: 1280px) {
  .arbeitsflaeche.mit-detail:not(.ohne-uebersicht) { grid-template-columns: minmax(280px, 0.8fr) minmax(440px, 1.45fr); }
  .arbeitsflaeche.mit-detail .uebersichten { display: none; }
}
@media (max-width: 980px) {
  :root { --seitenleiste-breite: 72px; }
  .seitenleiste .marke-text, .seitenleiste .nav-titel, .nav-punkt span.text, .nav-punkt .zaehler, .person-knopf .wer, .demo-hinweis,
  .seiten-assistent { display: none; }
  .nav-punkt { justify-content: center; padding: 8px; }
  .nav-punkt .zaehler.wichtig { display: block; position: absolute; top: 2px; right: 4px; font-size: 10px; padding: 0 5px; line-height: 15px; }
  .marke { justify-content: center; }
  .arbeitsflaeche { grid-template-columns: 1fr; }
  .arbeitsflaeche .uebersichten { position: static; flex-direction: row; flex-wrap: wrap; }
  .arbeitsflaeche .uebersichten .ue-titel { display: none; }
  .arbeitsflaeche .uebersichten .ue-punkt { width: auto; background: var(--hg-3); border-radius: 16px; min-height: 28px; padding: 4px 11px; }
  .arbeitsflaeche .uebersichten .ue-punkt.aktiv { background: var(--akzent); color: #fff; }
  .arbeitsflaeche .uebersichten .ue-punkt.aktiv .zahl { color: #fff; }
  .arbeitsflaeche .uebersichten .ue-punkt .farbe { display: none; }
  .arbeitsflaeche.mit-detail, .arbeitsflaeche.mit-detail:not(.ohne-uebersicht) { grid-template-columns: 1fr; }
  .arbeitsflaeche.mit-detail > .liste-bereich { display: none; }
  .arbeitsflaeche > .uebersichten { display: none; }
  .ue-leiste { display: flex; }
  .detail { position: static; max-height: none; overflow: visible; }
  .zwei-spalten { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .huelle { grid-template-columns: 1fr; }
  .seitenleiste { display: none; }
  .kopfleiste { padding: 0 14px; }
  .kopfleiste .zurueck { display: inline-flex; }
  .seite { padding: 4px 16px 96px; }
  .seitenkopf h1 { font-size: 28px; }
  .seitenkopf .aktionen { margin-left: 0; width: 100%; }
  .tableiste {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tableiste a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--text-3); text-decoration: none; padding: 2px 0; position: relative; }
  .tableiste a .ic { width: 24px; height: 24px; }
  .tableiste a.aktiv { color: var(--akzent); }
  .tableiste a .zaehler { position: absolute; top: -2px; left: calc(50% + 6px); background: var(--rot); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 5px; line-height: 16px; font-weight: 600; }
  .blatt { border-radius: 18px 18px 0 0; align-self: end; max-height: 92vh; width: 100%; }
  .schleier { padding: 0; place-items: end center; }
  .tabelle-huelle.handy-karten { background: none; box-shadow: none; }
  .tabelle.handy-karten thead { display: none; }
  .tabelle.handy-karten, .tabelle.handy-karten tbody, .tabelle.handy-karten tr, .tabelle.handy-karten td { display: block; }
  .tabelle.handy-karten tr { background: var(--hg-2); border-radius: 12px; box-shadow: var(--schatten); margin-bottom: 10px; padding: 8px 4px; }
  .tabelle.handy-karten td { border: 0; padding: 3px 12px; }
  .tabelle.handy-karten td[data-titel]::before { content: attr(data-titel) ": "; color: var(--text-3); font-size: 12px; }
  .tabelle.handy-karten td.zahl { text-align: left; }
  .formular { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten-raster { grid-template-columns: 1fr; }
  /* Tippflächen nach Apple-Richtlinie (44 pt) und größere Schrift am Handy */
  .knopf { min-height: 44px; }
  .knopf.klein { min-height: 36px; }
  .knopf.rund { width: 44px; min-height: 44px; }
  .segmente button { min-height: 36px; padding: 6px 12px; }
  .chip { min-height: 36px; padding: 6px 13px; font-size: 14px; }
  .ue-punkt { min-height: 42px; }
  .feld { min-height: 44px; font-size: 16px; }
  .kontrollkaestchen input { width: 22px; height: 22px; }
  .kontrollkaestchen { font-size: 15px; gap: 12px; }
  .gruppe .zeile .haupt b { font-size: 15.5px; }
  .gruppe .zeile .haupt span, .liste-kompakt .zeile-k .haupt span, .tabelle td .unter { font-size: 14px; }
  .tabelle, .tabelle.handy-karten td { font-size: 15px; }
  .pille { font-size: 13px; line-height: 22px; }
  .klein, .v-eintrag .v-kopf { font-size: 13.5px; }
  .v-eintrag .v-text { font-size: 15px; }
  .kachel .kt { font-size: 15px; }
  .kachel .ku { font-size: 13.5px; }
  .daten-liste { font-size: 15px; }
  .mengen { font-size: 15px; }
  .hinweis { font-size: 15px; }
  .aktionsleiste { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .rechte-zeile { grid-template-columns: 1fr; }
  .segmente.stufen button { min-width: 0; padding: 4px 8px; }
}
@media print {
  .seitenleiste, .kopfleiste, .tableiste, .aktionen, .knopf { display: none !important; }
  .huelle { display: block; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Vonovia · Störungen (16.10.2026) */
.tabelle td .unter.warn-text { color: var(--orange-text); white-space: normal; }
.feld.klein-feld { width: 88px; text-align: right; }
.feld.gespeichert { border-color: var(--gruen-text); }
/* Ausbauquote als Balken (Vonovia · Ausbauten) */
.quote { position: relative; display: inline-block; width: 120px; height: 18px; border-radius: 9px; background: var(--hg-3); overflow: hidden; vertical-align: middle; }
.quote-fuell { position: absolute; inset: 0 auto 0 0; background: var(--akzent-hg); }
.quote-fuell.gruen { background: var(--gruen-hg); }
.quote-text { position: relative; display: block; text-align: center; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }

/* Liquid Glass wie auf dem iPhone (Sebastian 16.10.2026: „Liquid-Glas-Optik einfügen“, dann: „schau dir das Liquid Glass vom iPhone
   an, nimm das“) ----------------------------------------------------------------------------------------------------------------
   Vorbild iOS 26: Glas nur für die Bedienebene, die über dem Inhalt schwebt (Seitenleiste, Knöpfe, Reiter, Suchfelder, Tableiste,
   Blätter, Mitteilungen); Inhalte bleiben massiv. Das Glas ist klar und nur leicht unscharf, hat eine Lichtkante rundum (oben links am
   hellsten), einen feinen Glanz und bricht am Rand das Bild dahinter wie eine Linse (Lichtbrechung: js/glas.js, nur Chrome/Edge –
   Safari und Firefox zeigen dasselbe Glas ohne Brechung). Oben gibt es keine Leiste, nur schwebende Glasknöpfe und beim Blättern
   einen weichen Übergang. Gewählte Reiter und Tabs sind eine hellere Glaslinse; Knöpfe wachsen beim Antippen leicht.
   Ausschalten: Profil › Darstellung › „Schlicht“ (data-glas="aus"). „Transparenz reduzieren“/„Mehr Kontrast“ → undurchsichtig. */
:root {
  --lg-glas: rgba(255, 255, 255, 0.34);               /* klares Glas: Seitenleiste, Reiter, Knöpfe */
  --lg-glas-dicht: rgba(255, 255, 255, 0.6);          /* Tableiste über laufendem Inhalt */
  --lg-blatt: rgba(250, 250, 252, 0.8);               /* Blätter: viel Inhalt, also dichter */
  --lg-linse: rgba(255, 255, 255, 0.86);              /* gewählter Reiter/Tab/Eintrag: hellere Glaslinse */
  --lg-knopf: rgba(255, 255, 255, 0.5);
  --lg-hover: rgba(255, 255, 255, 0.72);
  --lg-hover-auf-weiss: rgba(118, 118, 128, 0.1);
  --lg-filter: blur(10px) saturate(190%) brightness(1.04);
  --lg-filter-leicht: blur(5px) saturate(180%) brightness(1.05);
  --lg-filter-blatt: blur(28px) saturate(180%);
  --lg-rand: inset 1.2px 1.2px 0 -0.3px rgba(255, 255, 255, 0.98), inset -1.2px -1.2px 0 -0.3px rgba(255, 255, 255, 0.55),
             inset 0 0 0 0.6px rgba(255, 255, 255, 0.5), inset 0 0 16px rgba(255, 255, 255, 0.22);
  --lg-rand-klein: inset 0.8px 0.8px 0 -0.2px rgba(255, 255, 255, 0.95), inset -0.8px -0.8px 0 -0.2px rgba(255, 255, 255, 0.5),
                   inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
  --lg-kante: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --lg-schatten: var(--lg-kante), 0 2px 6px rgba(20, 30, 70, 0.05), 0 12px 32px rgba(20, 30, 70, 0.1);
  --lg-schatten-hoch: var(--lg-kante), 0 6px 16px rgba(20, 30, 70, 0.09), 0 26px 64px rgba(20, 30, 70, 0.18);
  --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(20, 30, 70, 0.08), 0 4px 10px rgba(20, 30, 70, 0.05);
  --lg-glanz: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0) 48%,
              rgba(255, 255, 255, 0.04) 76%, rgba(255, 255, 255, 0.3) 100%);
  --lg-kante-oben: rgba(245, 245, 247, 0.92);          /* weicher Übergang oben beim Blättern */
  --lg-verlauf:
    radial-gradient(62vw 58vh at 0% 0%, rgba(0, 122, 255, 0.18), transparent 70%),
    radial-gradient(52vw 52vh at 100% 4%, rgba(175, 82, 222, 0.13), transparent 70%),
    radial-gradient(58vw 56vh at 86% 100%, rgba(52, 199, 89, 0.12), transparent 70%),
    radial-gradient(46vw 48vh at 6% 96%, rgba(255, 149, 0, 0.09), transparent 70%);
  --lg-feder: cubic-bezier(.34, 1.56, .64, 1);         /* federnd wie iOS */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-glas: rgba(36, 36, 40, 0.34);
    --lg-glas-dicht: rgba(28, 28, 32, 0.62);
    --lg-blatt: rgba(30, 30, 34, 0.82);
    --lg-linse: rgba(255, 255, 255, 0.17);
    --lg-knopf: rgba(255, 255, 255, 0.08);
    --lg-hover: rgba(255, 255, 255, 0.15);
    --lg-hover-auf-weiss: rgba(255, 255, 255, 0.12);
    --lg-filter: blur(10px) saturate(170%) brightness(0.92);
    --lg-filter-leicht: blur(5px) saturate(160%) brightness(0.95);
    --lg-rand: inset 1.2px 1.2px 0 -0.3px rgba(255, 255, 255, 0.42), inset -1.2px -1.2px 0 -0.3px rgba(255, 255, 255, 0.14),
               inset 0 0 0 0.6px rgba(255, 255, 255, 0.14), inset 0 0 16px rgba(255, 255, 255, 0.05);
    --lg-rand-klein: inset 0.8px 0.8px 0 -0.2px rgba(255, 255, 255, 0.38), inset -0.8px -0.8px 0 -0.2px rgba(255, 255, 255, 0.12),
                     inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --lg-kante: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --lg-schatten: var(--lg-kante), 0 2px 8px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
    --lg-schatten-hoch: var(--lg-kante), 0 8px 20px rgba(0, 0, 0, 0.42), 0 30px 72px rgba(0, 0, 0, 0.56);
    --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(0, 0, 0, 0.32);
    --lg-glanz: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 50%,
                rgba(255, 255, 255, 0.02) 76%, rgba(255, 255, 255, 0.09) 100%);
    --lg-kante-oben: rgba(22, 22, 24, 0.9);
    --lg-verlauf:
      radial-gradient(62vw 58vh at 0% 0%, rgba(10, 132, 255, 0.26), transparent 70%),
      radial-gradient(52vw 52vh at 100% 4%, rgba(191, 90, 242, 0.2), transparent 70%),
      radial-gradient(58vw 56vh at 86% 100%, rgba(48, 209, 88, 0.12), transparent 70%),
      radial-gradient(46vw 48vh at 6% 96%, rgba(255, 159, 10, 0.08), transparent 70%);
  }
}
:root[data-theme="dark"] {
  --lg-glas: rgba(36, 36, 40, 0.34);
  --lg-glas-dicht: rgba(28, 28, 32, 0.62);
  --lg-blatt: rgba(30, 30, 34, 0.82);
  --lg-linse: rgba(255, 255, 255, 0.17);
  --lg-knopf: rgba(255, 255, 255, 0.08);
  --lg-hover: rgba(255, 255, 255, 0.15);
  --lg-hover-auf-weiss: rgba(255, 255, 255, 0.12);
  --lg-filter: blur(10px) saturate(170%) brightness(0.92);
  --lg-filter-leicht: blur(5px) saturate(160%) brightness(0.95);
  --lg-rand: inset 1.2px 1.2px 0 -0.3px rgba(255, 255, 255, 0.42), inset -1.2px -1.2px 0 -0.3px rgba(255, 255, 255, 0.14),
             inset 0 0 0 0.6px rgba(255, 255, 255, 0.14), inset 0 0 16px rgba(255, 255, 255, 0.05);
  --lg-rand-klein: inset 0.8px 0.8px 0 -0.2px rgba(255, 255, 255, 0.38), inset -0.8px -0.8px 0 -0.2px rgba(255, 255, 255, 0.12),
                   inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --lg-kante: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --lg-schatten: var(--lg-kante), 0 2px 8px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
  --lg-schatten-hoch: var(--lg-kante), 0 8px 20px rgba(0, 0, 0, 0.42), 0 30px 72px rgba(0, 0, 0, 0.56);
  --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(0, 0, 0, 0.32);
  --lg-glanz: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 50%,
              rgba(255, 255, 255, 0.02) 76%, rgba(255, 255, 255, 0.09) 100%);
  --lg-kante-oben: rgba(22, 22, 24, 0.9);
  --lg-verlauf:
    radial-gradient(62vw 58vh at 0% 0%, rgba(10, 132, 255, 0.26), transparent 70%),
    radial-gradient(52vw 52vh at 100% 4%, rgba(191, 90, 242, 0.2), transparent 70%),
    radial-gradient(58vw 56vh at 86% 100%, rgba(48, 209, 88, 0.12), transparent 70%),
    radial-gradient(46vw 48vh at 6% 96%, rgba(255, 159, 10, 0.08), transparent 70%);
}
:root:not([data-glas="aus"]) { --radius: 18px; --radius-g: 30px; --kopf-hoehe: 60px; }

/* Hintergrund: ruhiger Farbverlauf hinter allem, damit das Glas etwas zu brechen hat */
:root:not([data-glas="aus"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--lg-verlauf);
}
/* Ablage der SVG-Filter für die Lichtbrechung (js/glas.js) – nicht display:none, sonst wirken die Filter nicht */
.lg-filter-ablage { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Glas: Grundrezept (Fläche, leichte Unschärfe, Lichtkante, Schatten) und Glanz als eigene Schicht hinter dem Inhalt */
:root:not([data-glas="aus"]) .seitenleiste,
:root:not([data-glas="aus"]) .segmente,
:root:not([data-glas="aus"]) .tableiste,
:root:not([data-glas="aus"]) .aktionsleiste,
:root:not([data-glas="aus"]) .anmelde-karte {
  background: var(--lg-glas); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  border: 0; box-shadow: var(--lg-rand), var(--lg-schatten); isolation: isolate;
}
:root:not([data-glas="aus"]) .segmente { position: relative; -webkit-backdrop-filter: var(--lg-filter-leicht); backdrop-filter: var(--lg-filter-leicht); }
:root:not([data-glas="aus"]) .seitenleiste::before,
:root:not([data-glas="aus"]) .segmente::before,
:root:not([data-glas="aus"]) .tableiste::before,
:root:not([data-glas="aus"]) .anmelde-karte::before,
:root:not([data-glas="aus"]) .blatt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--lg-glanz);
}
:root:not([data-glas="aus"]) .anmelde-karte, :root:not([data-glas="aus"]) .blatt { position: relative; }

/* Seitenleiste: schwebende, klare Glasfläche; der gewählte Punkt als hellere Glaslinse */
:root:not([data-glas="aus"]) .seitenleiste {
  top: 10px; height: calc(100vh - 20px); margin: 10px 0 10px 10px; border-radius: 30px; padding: 14px 10px 12px;
}
/* 04.11.2026: Glanz als Hintergrund der Leiste statt ::before – die ::before-Schicht scrollte mit, sobald die Leiste länger als das
   Fenster ist (der Kasten endete mitten in „Einstellungen“). Ein Hintergrund bleibt beim Scrollen stehen. */
:root:not([data-glas="aus"]) .seitenleiste::before { display: none; }
:root:not([data-glas="aus"]) .seitenleiste { background: var(--lg-glanz), linear-gradient(var(--lg-glas), var(--lg-glas)); }
:root:not([data-glas="aus"]) .nav-punkt { border-radius: 14px; transition: background 0.18s, box-shadow 0.18s, transform 0.3s var(--lg-feder); }
:root:not([data-glas="aus"]) .nav-punkt:hover { background: var(--lg-knopf); }
:root:not([data-glas="aus"]) .nav-punkt.aktiv {
  background: var(--lg-linse); color: var(--akzent-text); font-weight: 600; box-shadow: var(--lg-rand-klein), var(--lg-schatten-knopf);
}
:root:not([data-glas="aus"]) .nav-punkt:active { transform: scale(1.03); }
:root:not([data-glas="aus"]) .seitenleiste-fuss { border-top-color: transparent; }
:root:not([data-glas="aus"]) .seiten-assistent { border-radius: 999px; background: var(--lg-knopf); box-shadow: var(--lg-rand-klein); }
:root:not([data-glas="aus"]) .person-knopf { border-radius: 16px; }

/* Oben keine Leiste: nur schwebende Glasknöpfe; beim Blättern ein weicher Übergang (wie die Kante in iOS 26) */
:root:not([data-glas="aus"]) .kopfleiste {
  top: 0; height: 60px; margin: 0; border-radius: 0; padding: 0 18px 0 22px; background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate;
}
:root:not([data-glas="aus"]) .kopfleiste::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, var(--lg-kante-oben) 0%, var(--lg-kante-oben) 38%, transparent 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  transition: opacity 0.25s;
}
:root:not([data-glas="aus"]) .kopfleiste.mit-linie::before { opacity: 1; }
:root:not([data-glas="aus"]) .kopfleiste .knopf { -webkit-backdrop-filter: var(--lg-filter-leicht); backdrop-filter: var(--lg-filter-leicht); }

/* Knöpfe: Glaskapseln mit Lichtkante; wachsen beim Antippen leicht (federnd) */
:root:not([data-glas="aus"]) .knopf {
  border-radius: 999px; background: var(--lg-knopf); box-shadow: var(--lg-rand-klein), var(--lg-schatten-knopf);
  transition: background 0.15s, box-shadow 0.15s, transform 0.32s var(--lg-feder), filter 0.15s;
}
:root:not([data-glas="aus"]) .knopf:hover { background: var(--lg-hover); filter: none; }
:root:not([data-glas="aus"]) .karte .knopf:hover, :root:not([data-glas="aus"]) .blatt .knopf:hover,
:root:not([data-glas="aus"]) .tabelle .knopf:hover { background: var(--lg-hover-auf-weiss); }
:root:not([data-glas="aus"]) .knopf:active { transform: scale(1.04); filter: brightness(1.06); }
:root:not([data-glas="aus"]) .knopf.primaer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 52%), #0071e3; color: #fff;
  box-shadow: inset 1px 1px 0 -0.3px rgba(255, 255, 255, 0.55), inset -1px -1px 0 -0.3px rgba(255, 255, 255, 0.2), 0 3px 12px rgba(0, 113, 227, 0.3);
}
:root:not([data-glas="aus"]) .knopf.primaer:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 52%), #0a7af0; }
:root:not([data-glas="aus"]) .knopf.gruen {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 52%), #248a3d;
  box-shadow: inset 1px 1px 0 -0.3px rgba(255, 255, 255, 0.5), 0 3px 12px rgba(36, 138, 61, 0.26);
}
/* Ohne eigenen Hintergrund griff hier das halbtransparente Weiß aller Glas-Knöpfe: weiße Schrift auf Weiß (gefunden 22.10.2026) */
:root:not([data-glas="aus"]) .knopf.gefahr-voll {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 52%), var(--rot); color: #fff;
  box-shadow: inset 1px 1px 0 -0.3px rgba(255, 255, 255, 0.5), 0 3px 12px rgba(255, 59, 48, 0.26);
}
:root:not([data-glas="aus"]) .knopf.gefahr-voll:hover, :root:not([data-glas="aus"]) .knopf.gruen:hover { filter: brightness(1.06); }
:root:not([data-glas="aus"]) .knopf.gefahr-voll:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%), var(--rot); }
:root:not([data-glas="aus"]) .knopf.gruen:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%), #248a3d; }
:root:not([data-glas="aus"]) .knopf.getoent { background: var(--akzent-hg); }
:root:not([data-glas="aus"]) .knopf.gruen-getoent { background: var(--gruen-hg); }
:root:not([data-glas="aus"]) .knopf.orange-getoent { background: var(--orange-hg); }
:root:not([data-glas="aus"]) .knopf.gefahr { background: var(--rot-hg); }
:root:not([data-glas="aus"]) .knopf.getoent:hover, :root:not([data-glas="aus"]) .knopf.gruen-getoent:hover,
:root:not([data-glas="aus"]) .knopf.orange-getoent:hover, :root:not([data-glas="aus"]) .knopf.gefahr:hover { filter: brightness(1.05); }
:root:not([data-glas="aus"]) .knopf.schlicht, :root:not([data-glas="aus"]) .knopf.rot-text { background: none; box-shadow: none; }
:root:not([data-glas="aus"]) .knopf.schlicht:hover { background: var(--akzent-hg); }

/* Reiter (Segmente): klare Glasspur; der gewählte Reiter ist eine hellere Glaslinse, die beim Antippen wächst */
:root:not([data-glas="aus"]) .segmente { border-radius: 999px; padding: 3px; gap: 2px; }
:root:not([data-glas="aus"]) .segmente button {
  border-radius: 999px; padding: 4px 14px; transition: background 0.2s, box-shadow 0.2s, transform 0.32s var(--lg-feder);
}
:root:not([data-glas="aus"]) .segmente button:hover { background: var(--lg-knopf); }
:root:not([data-glas="aus"]) .segmente button.aktiv { background: var(--lg-linse); box-shadow: var(--lg-rand-klein), 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(20, 30, 70, 0.12); }
:root:not([data-glas="aus"]) .segmente button:active { transform: scale(1.06); }

/* Chips, Suchfelder, Eingaben */
:root:not([data-glas="aus"]) .chip { background: var(--lg-knopf); box-shadow: var(--lg-rand-klein), var(--lg-schatten-knopf); transition: transform 0.32s var(--lg-feder); }
:root:not([data-glas="aus"]) .chip:hover { background: var(--lg-hover); }
:root:not([data-glas="aus"]) .chip:active { transform: scale(1.05); }
:root:not([data-glas="aus"]) .chip.aktiv { background: var(--akzent); color: #fff; }
:root:not([data-glas="aus"]) .feld { border-radius: 12px; }
:root:not([data-glas="aus"]) .suche .feld {
  border-radius: 999px; background: var(--lg-knopf); box-shadow: var(--lg-rand-klein), var(--lg-schatten-knopf);
  -webkit-backdrop-filter: var(--lg-filter-leicht); backdrop-filter: var(--lg-filter-leicht);
}
:root:not([data-glas="aus"]) .suche .feld:focus { background: var(--hg-2); box-shadow: var(--fokus); }

/* Inhalte bleiben massiv – weichere Ecken, feine Lichtkante, ruhiger Schatten */
:root:not([data-glas="aus"]) .karte, :root:not([data-glas="aus"]) .tabelle-huelle, :root:not([data-glas="aus"]) .raster-huelle,
:root:not([data-glas="aus"]) .mail-liste, :root:not([data-glas="aus"]) .kachel { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.8), var(--lg-schatten); }
:root:not([data-glas="aus"]) a.kachel:hover, :root:not([data-glas="aus"]) button.kachel:hover { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.8), var(--lg-schatten-hoch); }
:root:not([data-glas="aus"]) .kachel.aktiv { box-shadow: inset 0 0 0 2px var(--akzent), var(--lg-schatten); }
:root:not([data-glas="aus"]) .ue-punkt { border-radius: 14px; }
:root:not([data-glas="aus"]) .ue-punkt:hover { background: var(--lg-knopf); }
:root:not([data-glas="aus"]) .ue-punkt.aktiv { background: var(--lg-linse); box-shadow: var(--lg-rand-klein), var(--lg-schatten-knopf); }
:root:not([data-glas="aus"]) .hinweis { border-radius: 16px; }

/* Blätter (Dialoge): Glas mit Lichtkante über dem leicht abgedunkelten Inhalt */
:root:not([data-glas="aus"]) .schleier { background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
:root:not([data-glas="aus"]) .blatt {
  background: var(--lg-blatt); -webkit-backdrop-filter: var(--lg-filter-blatt); backdrop-filter: var(--lg-filter-blatt);
  border: 0; border-radius: 30px; box-shadow: var(--lg-rand), var(--lg-schatten-hoch); isolation: isolate;
}
:root:not([data-glas="aus"]) .mitteilung {
  border-radius: 999px; background: rgba(28, 28, 32, 0.74); padding: 10px 18px;
  box-shadow: inset 1px 1px 0 -0.3px rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), var(--lg-schatten-hoch);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
}
:root:not([data-glas="aus"]) .aktionsleiste { border-radius: 26px; box-shadow: var(--lg-rand), var(--lg-schatten-hoch); }
:root:not([data-glas="aus"]) .anmelde-karte { border-radius: 34px; box-shadow: var(--lg-rand), var(--lg-schatten-hoch); }
:root:not([data-glas="aus"]) .anmeldung { background: radial-gradient(1200px 600px at 50% -10%, var(--akzent-hg), transparent 70%); }

/* Schmale Fenster: Seitenleiste nur mit Symbolen */
@media (max-width: 980px) {
  :root:not([data-glas="aus"]) .seitenleiste { padding: 12px 8px; border-radius: 26px; }
}
/* Handy: Tableiste als schwebende Glaskapsel (iOS 26), die beim Blättern nach unten schmaler wird; Blätter schweben mit Abstand */
@media (max-width: 760px) {
  :root:not([data-glas="aus"]) .kopfleiste { padding: 0 12px; }
  :root:not([data-glas="aus"]) .tableiste {
    left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 36px; padding: 5px; border-top: 0;
    background: var(--lg-glas-dicht); box-shadow: var(--lg-rand), var(--lg-schatten-hoch);
    transition: transform 0.35s var(--lg-feder), padding 0.25s;
  }
  :root:not([data-glas="aus"]) .tableiste a { border-radius: 30px; padding: 6px 0 5px; transition: background 0.2s, box-shadow 0.2s, transform 0.32s var(--lg-feder); }
  :root:not([data-glas="aus"]) .tableiste a.aktiv { background: var(--lg-linse); color: var(--akzent); box-shadow: var(--lg-rand-klein), 0 2px 8px rgba(20, 30, 70, 0.1); }
  :root:not([data-glas="aus"]) .tableiste a:active { transform: scale(1.06); }
  :root:not([data-glas="aus"]) .tableiste a span { transition: opacity 0.2s, max-height 0.25s; max-height: 16px; }
  :root:not([data-glas="aus"]) .tableiste.klein { transform: scale(0.9); transform-origin: 50% 100%; padding: 3px; }
  :root:not([data-glas="aus"]) .tableiste.klein a span { opacity: 0; max-height: 0; }
  :root:not([data-glas="aus"]) .seite { padding-bottom: 124px; }
  /* Reiter brechen am Handy oft um: dann weniger stark gerundet */
  :root:not([data-glas="aus"]) .segmente { border-radius: 24px; }
  :root:not([data-glas="aus"]) .segmente button { border-radius: 20px; }
  :root:not([data-glas="aus"]) .schleier { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  :root:not([data-glas="aus"]) .blatt { border-radius: 34px; max-height: calc(92vh - 8px); }
  :root:not([data-glas="aus"]) .aktionsleiste { bottom: calc(90px + env(safe-area-inset-bottom)); }
  :root:not([data-glas="aus"]) .mitteilungen { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Transparenz reduzieren, mehr Kontrast oder ohne Unschärfe: undurchsichtige Flächen, kein Verlauf, keine Brechung */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:not([data-glas="aus"]) { --lg-glas: var(--hg-2); --lg-glas-dicht: var(--hg-2); --lg-blatt: var(--hg-2); --lg-knopf: var(--hg-3);
    --lg-filter: none; --lg-filter-leicht: none; --lg-filter-blatt: none; --lg-kante-oben: var(--hg); }
  :root:not([data-glas="aus"]) body::before { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-glas="aus"]) { --lg-glas: rgba(255, 255, 255, 0.9); --lg-glas-dicht: var(--hg-2); --lg-blatt: var(--hg-2); }
}
@media print {
  body::before { display: none !important; }
}

/* Mails schreiben und senden (Sebastian 16.10.2026) */
.mail-schreiben-text { min-height: 170px; font: inherit; line-height: 1.45; resize: vertical; }
.anhang-wahl { display: inline-flex; align-items: center; gap: 2px; }

/* Prüfkarte und Ablauf im Bereich Westconnect (Janik 21.10.2026): drei Entscheidungen als große Flächen, jede mit ihrer Folge */
.pruef-karte { box-shadow: var(--schatten), inset 0 0 0 1.5px var(--akzent-hg-stark); margin-bottom: 14px; }
.pruef-karte .karte-kopf { margin-bottom: 4px; flex-wrap: wrap; }
.pruef-anleitung { margin: 0 0 12px; }
.pruef-wahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pruef-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 13px 14px; border: 0;
  border-radius: var(--radius); background: var(--hg-3); color: var(--text); font: inherit; cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease; }
.pruef-wahl:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); }
.pruef-wahl:active:not(:disabled) { transform: translateY(0); }
.pruef-wahl:focus-visible { outline: none; box-shadow: var(--fokus); }
.pruef-wahl:disabled { opacity: 0.6; cursor: not-allowed; }
.pruef-wahl-kopf { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pruef-wahl-kopf b { font-weight: 650; }
.pruef-wahl-text { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.pruef-wahl.gruen { background: var(--gruen-hg); }
.pruef-wahl.gruen .pruef-wahl-kopf { color: var(--gruen-text); }
.pruef-wahl.rot { background: var(--rot-hg); }
.pruef-wahl.rot .pruef-wahl-kopf { color: var(--rot-text); }
.pruef-wahl.blau { background: var(--akzent-hg); }
.pruef-wahl.blau .pruef-wahl-kopf { color: var(--akzent-text); }
.pruefliste { margin-top: 14px; padding-top: 10px; border-top: 0.5px solid var(--linie); }
.pruefliste ol { margin: 10px 0 6px; padding-left: 22px; columns: 2 260px; column-gap: 28px; font-size: 13px; }
.pruefliste li { margin: 0 0 5px; break-inside: avoid; }
.pruefliste summary, .ablauf summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.pruefliste summary::-webkit-details-marker, .ablauf summary::-webkit-details-marker { display: none; }
.pruefliste summary .ic, .ablauf summary .ic { color: var(--akzent-text); }
.ablauf { margin-bottom: 12px; }
.ablauf-schritte { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ablauf-schritte li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-k); background: var(--hg-4);
  font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.ablauf-schritte li b { color: var(--text); font-size: 13px; }
.ablauf-schritte li.aktiv { background: var(--akzent-hg); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.ablauf-schritte li.aktiv b { color: var(--akzent-text); }
.pruef-schritte { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }

/* Beleg scannen (21.10.2026): Seiten als Kacheln, große Knöpfe fürs Handy */
.scan-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.scan-kachel { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--hg-3);
  box-shadow: inset 0 0 0 1px var(--linie); display: flex; align-items: center; justify-content: center; }
.scan-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-nummer { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.scan-kachel .knopf.scan-weg { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; min-height: 0; background: rgba(0, 0, 0, 0.6);
  color: #fff; box-shadow: none; }
.scan-kachel .knopf.scan-weg svg { width: 14px; height: 14px; }
.scan-pdf, .scan-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; text-align: center; color: var(--text-2);
  word-break: break-word; }
.scan-leer { grid-column: 1 / -1; aspect-ratio: auto; min-height: 92px; justify-content: center; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--linie-stark); border: 0; }
.scan-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.scan-knoepfe .knopf { flex: 1 1 200px; min-height: 48px; justify-content: center; }
@media (max-width: 760px) { .scan-knoepfe .knopf { min-height: 56px; font-size: 16px; } }

/* Net D: Aufmaße der NAN prüfen (21.10.2026) – Mengen antippen: grün in Ordnung, rot nicht */
.netd-pruefung .karte { margin-top: 12px; }
.pruef-blatt-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pruef-blatt-kopf h3 { margin: 0; font-size: 15px; }
.pruef-blatt-kopf .knopf { margin-left: auto; }
.pruef-tabelle-huelle { overflow-x: auto; }
.pruef-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pruef-tabelle th { text-align: left; font-weight: 600; color: var(--text-2); padding: 6px 6px; border-bottom: 1px solid var(--linie);
  white-space: nowrap; }
.pruef-tabelle td { padding: 5px 4px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.pruef-tabelle th.zahl, .pruef-tabelle td.zahl { text-align: right; }
.pruef-tabelle tr.mit-rot td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
.pruef-ort { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 190px; }
.pruef-ort .feld { margin-top: 2px; max-width: 260px; }
.pz { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 46px; min-height: 30px; padding: 4px 9px;
  border: 0; border-radius: 8px; font: inherit; font-variant-numeric: tabular-nums; }
button.pz { cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease; }
button.pz:hover { filter: brightness(0.97); }
button.pz:active { transform: scale(0.96); }
button.pz:focus-visible { outline: none; box-shadow: var(--fokus); }
.pz.gruen { background: var(--gruen-hg); color: var(--gruen-text); }
.pz.rot { background: var(--rot-hg); color: var(--rot-text); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pz-schon { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); display: inline-block; }
/* Ticketsystem (Janik 22.10.2026): „Problem melden“ dezent unten links, Meldungen und IT-Support */
.support-zeile { display: flex; align-items: center; gap: 4px; }
.support-knopf { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 9px;
  background: none; color: var(--text-2); font-size: 12.5px; cursor: pointer; text-align: left; min-width: 0; }
.support-knopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-knopf:hover, .support-meine:hover { background: var(--hg-hover); color: var(--text); }
.support-knopf .zaehler { margin-left: auto; }
.support-meine { padding: 5px 8px; border-radius: 9px; font-size: 12px; color: var(--text-3); text-decoration: none; }
@media (max-width: 980px) {
  .support-zeile { justify-content: center; }
  .support-knopf { flex: none; justify-content: center; padding: 8px; }
  .support-knopf span, .support-meine { display: none; }
  .support-knopf .zaehler { position: absolute; top: 0; right: 0; font-size: 10px; padding: 0 5px; line-height: 15px; }
}
.support-bilder { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px; border: 1px dashed var(--linie); border-radius: 10px; }
.support-bild { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 4px 6px; border-radius: 8px; background: var(--hg-3); font-size: 12px; }
.support-bild img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; }
.support-bild .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-neu { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); display: inline-block; flex: none; }
.support-verlauf { display: flex; flex-direction: column; gap: 8px; }
.support-nachricht { padding: 9px 12px; border-radius: 12px; background: var(--hg-3); max-width: 88%; }
.support-nachricht.vom-support { background: var(--akzent-hg); align-self: flex-start; }
.support-nachricht.von-person { align-self: flex-end; }
.support-nachricht.intern { background: var(--lila-hg, rgba(175, 82, 222, 0.13)); border: 1px dashed var(--lila, #af52de); }
.support-nachricht.stand { background: none; border: 1px solid var(--linie); align-self: center; font-size: 12.5px; color: var(--text-2); }
.support-nachricht .kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; font-size: 12.5px; }
.support-technik summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.support-fehler { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.support-fehler li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.support-steuerung { padding: 12px; }

/* Anleitung (Janik 22.10.2026) */
.anleitung-inhalt { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.anleitung-inhalt a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 16px; background: var(--hg-3);
  color: var(--text); text-decoration: none; font-size: 13px; }
.anleitung-inhalt a:hover { background: var(--hg-hover); }
.karte.anleitung { margin-top: 12px; scroll-margin-top: 80px; }
.anleitung-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.anleitung-kopf h3 { margin: 0; font-size: 16px; flex: 1; min-width: 160px; }
.karte.anleitung ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; line-height: 1.45; }
.anleitung-konzept { margin: 6px 0 0; display: grid; gap: 4px 0; }
.anleitung-konzept dt { font-weight: 600; margin-top: 8px; }
.anleitung-konzept dd { margin: 0; color: var(--text-2); line-height: 1.45; }
/* von GMS korrigiert (Janik 22.10.2026: ändern, streichen, ersetzen wie bei Westconnect) */
.pz.gelb { background: var(--orange-hg); color: var(--orange-text); }
.pz s { opacity: 0.75; text-decoration-thickness: 1.5px; }
.pz .pz-plus { font-weight: 700; }
.pruef-tabelle tr.mit-korrektur td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.pruef-tabelle tr.mit-rot.mit-korrektur td:first-child { box-shadow: inset 3px 0 0 var(--rot), inset 6px 0 0 var(--orange); }
.pruef-korrektur { color: var(--orange-text); margin-top: 3px; }
.pruef-ort .zeile-flex { gap: 6px; flex-wrap: nowrap; }
.pruef-grund { min-width: 160px; color: var(--rot-text); font-size: 12.5px; }
.pruef-grund .knopf { margin-left: 4px; vertical-align: middle; }
.pruef-fuss { justify-content: flex-end; position: sticky; bottom: 12px; margin-top: 14px; }

/* Prüfung nicht bestanden: alle Mails derselben Rechnung untereinander (Original und Korrektur, 28.10.2026) */
.nb-mails { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.nb-neueste { margin: 4px 0; padding: 6px 9px; border-radius: 8px; background: var(--hg-4); }
/* Prüfauftrag an Lena („RG prüfen lassen“, 29.10.2026) */
.lena-stand { margin-top: 4px; color: var(--text-2); max-width: 520px; }
/* Prüfergebnis der Routine direkt in der Rechnungs-Mail (29.10.2026) */
.karte.mail-pruefung { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 3px 0 0 var(--rot), var(--schatten); }
.lena-stand.offen { color: var(--akzent-text); }
.lena-stand.rueckfrage { color: var(--orange-text); }
.nb-neueste.wieder-offen { background: var(--rot-hg); }
.nb-neueste.wieder-offen > b { color: var(--rot-text); }

/* Mitteilungszentrale wie macOS (Sebastian 28.10.2026): Datum und Uhrzeit oben rechts, Mitteilungen aufklappbar, Hinweise oben rechts */
.mz-uhr {
  display: inline-flex; align-items: center; gap: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  padding: 5px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; min-height: 30px;
}
.mz-uhr:hover { background: var(--hg-3); }
.mz-uhr.offen { background: var(--hg-3); }
.mz-uhr .mz-kurz { display: none; }
.mz-zahl {
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px;
  padding: 0 5px; margin-left: 7px; text-align: center; font-variant-numeric: tabular-nums;
}
.mz-schleier { position: fixed; inset: 0; z-index: 90; background: transparent; }
.mz-zentrale {
  position: fixed; top: calc(var(--kopf-hoehe) + 6px); right: 12px; z-index: 95; width: min(400px, calc(100vw - 24px));
  max-height: calc(100vh - var(--kopf-hoehe) - 20px); overflow: auto; overscroll-behavior: contain; padding: 12px 12px 14px;
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-radius: 18px; box-shadow: var(--schatten-blatt); animation: mz-rein 0.22s cubic-bezier(.2,.8,.3,1);
}
.mz-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px 8px; }
.mz-kopf h2 { margin: 0; font-size: 17px; }
.mz-kopf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-kopf-text span { font-size: 12.5px; color: var(--text-2); }
.mz-kopf .knopf.rund { margin-left: auto; }
.mz-leiste { display: flex; align-items: center; gap: 6px; padding: 0 4px 10px; }
.mz-filter { border: 0; background: var(--hg-3); color: var(--text); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.mz-filter.aktiv { background: var(--akzent); color: #fff; }
.mz-textknopf { border: 0; background: none; color: var(--akzent-text); font: inherit; font-size: 12.5px; cursor: pointer; padding: 3px 4px; }
/* Bereiche der Mitteilungen (Sebastian 03.11.2026: „nach bereichen sortieren“, Migration 347): Auswahl oben, Farbe je Bereich */
.b-westconnect { --b: var(--orange); }
.b-netd { --b: var(--akzent); }
.b-vonovia { --b: var(--lila); }
.b-buchhaltung { --b: var(--gruen); }
.b-technik { --b: #30b0c7; }
.b-allgemein { --b: var(--grau-text); }
.mz-bereiche { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; overflow-x: auto; scrollbar-width: none; }
.mz-bereiche::-webkit-scrollbar { display: none; }
.mz-bereiche-titel { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-right: 2px; }
.mz-bereich, .mz-ordnen {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); background: var(--hg-2); color: var(--text);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.mz-bereich.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.mz-bpunkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--b, var(--grau-text)); }
.mz-bereich.aktiv .mz-bpunkt { box-shadow: 0 0 0 1.5px #fff; }
.mz-banzahl {
  min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--hg-3); color: var(--text-2); font-size: 11px; font-weight: 600;
  line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
}
.mz-banzahl.neu { background: var(--akzent); color: #fff; }
.mz-bereich.aktiv .mz-banzahl { background: rgba(255, 255, 255, 0.25); color: #fff; }
.mz-ordnen { color: var(--akzent-text); }
.mz-ordnen.aktiv { background: var(--akzent-hg); border-color: transparent; }
.mz-btag { flex: none; font-weight: 600; color: var(--b); }
.mz-tag-bereich { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
/* Suche in den Mitteilungen, auch in den weggeklickten (Sebastian 02.11.2026) */
.mz-suche { padding: 0 2px 10px; }
.mz-suche .feld { width: 100%; }
.mz-hinweiszeile { font-size: 12px; color: var(--text-2); margin: -2px 6px 10px; }
.mz-windows {
  display: flex; align-items: center; gap: 8px; background: var(--akzent-hg); border-radius: 12px; padding: 8px 10px; margin: 0 2px 10px; font-size: 12.5px;
}
.mz-windows > .ic { color: var(--akzent-text); flex: none; }
.mz-windows .knopf { margin-left: auto; flex: none; }
.mz-liste { display: flex; flex-direction: column; gap: 6px; }
.mz-tag { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 8px 6px 1px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mz-tag:first-child { margin-top: 0; }
.mz-tag .mz-textknopf { font-weight: 500; font-size: 12px; }
/* Schließen wie macOS: X oben links an der Mitteilung, beim Darüberfahren (Sebastian 29.10.2026) */
.mz-karte .mz-weg { position: absolute; left: -6px; top: -6px; background: var(--hg-2); box-shadow: var(--schatten-hoch); z-index: 1; }
.mz-karte:hover .mz-weg, .mz-karte:focus-within .mz-weg { opacity: 1; }
.mz-karte.geht { animation: mz-raus 0.16s ease-in forwards; }
.mz-karte {
  position: relative; display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit;
  color: var(--text); background: var(--hg-2); border-radius: 14px; padding: 10px 12px 10px 14px; box-shadow: var(--schatten); transition: box-shadow 0.12s;
}
.mz-karte:hover { box-shadow: var(--schatten-hoch); }
.mz-karte.wichtig { box-shadow: inset 3px 0 0 var(--rot), var(--schatten); }
.mz-symbol { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--akzent-hg); color: var(--akzent-text); }
.mz-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mz-karte-kopf { display: flex; gap: 8px; font-size: 11.5px; color: var(--text-2); }
.mz-herkunft { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-zeit { flex: none; font-variant-numeric: tabular-nums; }
.mz-titel { font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.mz-karte.neu .mz-titel { font-weight: 650; }
.mz-vorschau, .mz-hinweis-text {
  font-size: 12.5px; color: var(--text-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mz-karte .pille { align-self: flex-start; margin-top: 3px; }
.mz-punkt { position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--akzent); }
.mz-hinweise {
  position: fixed; top: calc(var(--kopf-hoehe) + 8px); right: 12px; z-index: 150; display: flex; flex-direction: column; gap: 8px;
  width: min(370px, calc(100vw - 24px)); pointer-events: none;
}
.mz-hinweis {
  pointer-events: auto; position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; font: inherit; color: var(--text);
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-radius: 16px; box-shadow: var(--schatten-blatt); padding: 10px 12px 11px; cursor: pointer; animation: mz-rein 0.28s cubic-bezier(.2,.8,.3,1);
}
.mz-hinweis.wichtig { box-shadow: inset 3px 0 0 var(--rot), var(--schatten-blatt); }
.mz-hinweis.geht { animation: mz-raus 0.26s ease-in forwards; }
.mz-hinweis-kopf { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.mz-app { display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; font-size: 10.5px; }
.mz-app .ic { color: var(--akzent); }
.mz-hinweis-zeit { margin-left: auto; font-variant-numeric: tabular-nums; }
.mz-weg {
  border: 0; background: var(--hg-3); color: var(--text-2); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center;
  cursor: pointer; padding: 0; opacity: 0; transition: opacity 0.15s;
}
.mz-weg .ic { width: 12px; height: 12px; }
.mz-hinweis:hover .mz-weg, .mz-hinweis:focus-within .mz-weg { opacity: 1; }
.mz-hinweis-titel { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mz-mehr { font-size: 12.5px; color: var(--akzent-text); font-weight: 500; align-items: center; }
@keyframes mz-rein { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mz-raus { to { opacity: 0; transform: translateX(26px); } }
.mz-detail { display: flex; flex-direction: column; gap: 12px; }
.mz-aktionen { gap: 6px; }
.mz-inhalt { font-size: 14px; line-height: 1.5; overflow-x: auto; background: var(--hg); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
.mz-inhalt p { margin: 0 0 8px; }
.mz-inhalt ul, .mz-inhalt ol { margin: 4px 0 8px; padding-left: 22px; }
.mz-inhalt li { margin: 2px 0; }
.mz-inhalt table { border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; overflow-wrap: normal; }
.mz-inhalt th, .mz-inhalt td { border: 0.5px solid var(--linie-stark); padding: 4px 8px; vertical-align: top; text-align: left; }
.mz-inhalt th { background: var(--hg-4); font-weight: 600; }
.mz-inhalt blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--linie-stark); color: var(--text-2); }
.mz-inhalt pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; }
.mz-inhalt h1, .mz-inhalt h2, .mz-inhalt h3, .mz-inhalt h4 { font-size: 15px; margin: 10px 0 6px; }
/* Antworten an Lena im Verlauf einer Mitteilung (Sebastian 29.10.2026) */
.mz-verlauf { display: flex; flex-direction: column; gap: 8px; }
.mz-verlauf-titel { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mz-antwort { display: flex; flex-direction: column; gap: 4px; background: var(--akzent-hg); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.mz-antwort-lena { background: var(--hg); border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
.mz-inhalt hr { border: 0; border-top: 0.5px solid var(--linie); margin: 10px 0; }
.mz-inhalt a { color: var(--akzent-text); }
@media (hover: none) { .mz-weg { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-zentrale, .mz-hinweis, .mz-hinweis.geht { animation: none; } }
@media (max-width: 760px) {
  .mz-uhr { padding: 5px 6px; min-height: 44px; }
  .mz-uhr .mz-lang { display: none; }
  .mz-uhr .mz-kurz { display: inline; }
  .mz-zentrale { left: 8px; right: 8px; width: auto; top: calc(var(--kopf-hoehe) + 4px); max-height: calc(100vh - var(--kopf-hoehe) - 96px); }
  .mz-hinweise { left: 8px; right: 8px; width: auto; }
}

/* Desktop-App (js/desktop_app.js, 04.11.2026): im Hinweis der Startseite stehen beide Knöpfe zusammen rechts */
.desktop-knoepfe { margin-left: auto; flex: none; }
.hinweis .desktop-knoepfe .knopf { margin-left: 0; }
@media (max-width: 1100px) { .desktop-hinweis .hinweis { flex-wrap: wrap; } }

/* Net D › Qualitätsprüfung (Bastian Gans 04.11.2026 12:07/12:08): „Was in der Prüfung steht“ mit Zeilenumbruch, Leiste für die Auswahl in Gruppen */
.tabelle td.q-angaben-spalte { min-width: 260px; max-width: 460px; white-space: normal; }
.tabelle td.q-bearbeitung-spalte { min-width: 160px; max-width: 280px; white-space: normal; }
.q-angaben, .knopf.q-angaben { white-space: normal; height: auto; min-height: 0; text-align: left; align-items: flex-start; }
.q-angaben .klein, .q-angaben b { white-space: normal; overflow-wrap: anywhere; }
.q-angaben .unter { white-space: normal; max-width: none; }
.q-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.q-gruppe { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-k); background: var(--hg-2);
  box-shadow: inset 0 0 0 0.5px var(--linie); }
.q-gruppe .feld { width: auto; min-width: 190px; max-width: 260px; min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: 12.5px; }
.q-gruppe-titel { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* Net D › Termine der Teams: Stand je Termin als kleine Auswahl in der Farbe des Stands (Bastian Gans 04.11.2026) */
.feld.stand-wahl { width: auto; min-width: 118px; min-height: 26px; padding: 2px 26px 2px 10px; font-size: 12.5px; font-weight: 600; border-radius: 999px; }
.feld.stand-wahl.stand-offen { background-color: var(--orange-hg); color: var(--orange-text); }
.feld.stand-wahl.stand-in_arbeit { background-color: var(--blau-hg, var(--akzent-hg)); color: var(--blau-text, var(--akzent)); }
.feld.stand-wahl.stand-erledigt { background-color: var(--gruen-hg); color: var(--gruen-text); }

/* Licht im Hintergrund (Sebastian 05.11.2026: „das Licht im Hintergrund ist genehmigt das bauen wir überall ein“):
   zwei weiche Lichtflächen, die langsam wandern; die Farbe folgt dem Bereich (data-bereich am <html>, gesetzt in js/app.js). */
:root { --licht-a: 10, 132, 255; --licht-b: 255, 138, 61; --licht-staerke: 0.14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --licht-staerke: 0.26; } }
:root[data-theme="dark"] { --licht-staerke: 0.26; }
:root[data-bereich="westconnect"] { --licht-a: 55, 182, 255; }
:root[data-bereich="netd"], :root[data-bereich="netd_tag"] { --licht-a: 34, 211, 166; }
:root[data-bereich="vonovia"] { --licht-a: 255, 138, 61; --licht-b: 10, 132, 255; }
:root[data-bereich="buchhaltung"] { --licht-a: 132, 204, 22; }
body::after {
  content: ""; position: fixed; inset: -12vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 20% 16%, rgba(var(--licht-a), var(--licht-staerke)), transparent 70%),
    radial-gradient(32vmax 32vmax at 84% 88%, rgba(var(--licht-b), calc(var(--licht-staerke) * 0.75)), transparent 70%);
  animation: licht-wandern 40s ease-in-out infinite alternate;
}
@keyframes licht-wandern { from { transform: translate3d(-3vmax, -2vmax, 0); } to { transform: translate3d(3vmax, 2vmax, 0); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), print { body::after { display: none; } }
:root[data-glas="aus"] body::after { display: none; }

/* Startseite (Sebastian 05.11.2026): kurze Erklärung in Alltagssprache, Diagramm-Titel, „Monat im Minus“, Umschalter der Bereiche */
.erklaerung { font-size: 13px; color: var(--text-2); margin: -4px 0 12px; max-width: 980px; line-height: 1.45; }
.diagramm-titel { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.balken.rot { background: var(--rot, #ff3b30); }
.diagramm-legende span.rot::before { background: var(--rot, #ff3b30); }
.seitenkopf .start-bereiche { align-self: center; }
/* Was bleibt übrig? – zwei Zeitraum-Karten + offene Posten (Sebastian 05.11.2026) */
.bilanz-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(220px, 0.8fr); gap: 14px; }
.bilanz-karte { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bilanz-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.bilanz-kopf b { color: var(--text); font-weight: 600; }
.bilanz-raster > .karte + .karte { margin-top: 0; }   /* sonst rutscht die zweite Karte 14px tiefer */
.bilanz-werte { display: flex; flex-direction: column; gap: 2px; }
.bilanz-wert { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "name zahl" "unter unter"; column-gap: 12px; align-items: baseline; color: inherit; text-decoration: none; border-radius: 10px; padding: 5px 8px; margin: 0 -8px; }
.bilanz-wert .bilanz-name { grid-area: name; } .bilanz-wert .bilanz-zahl { grid-area: zahl; text-align: right; } .bilanz-wert .bilanz-unter { grid-area: unter; }
.bilanz-wert.rest, .bilanz-wert.minus { border-top: 1px solid var(--linie-stark, rgba(255,255,255,.25)); border-radius: 0 0 10px 10px; padding-top: 8px; margin-top: 2px; }
.bilanz-wert:hover { background: var(--hg-hover); text-decoration: none; }
.bilanz-name { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.bilanz-zahl { font-size: 20px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.bilanz-wert.rest .bilanz-zahl, .bilanz-wert.minus .bilanz-zahl { font-size: 26px; }
.bilanz-unter { font-size: 12px; color: var(--text-3); }
.bilanz-wert.umsatz .bilanz-zahl { color: var(--akzent-text); }
.bilanz-wert.rest .bilanz-zahl { color: var(--gruen-text); }
.bilanz-wert.minus .bilanz-zahl { color: var(--rot-text); }
.bilanz-balken { height: 8px; border-radius: 99px; background: rgba(199, 199, 204, .45); overflow: hidden; }
.bilanz-balken .rest { display: block; height: 100%; border-radius: 99px; background: var(--gruen); box-shadow: 0 0 12px color-mix(in srgb, var(--gruen) 60%, transparent); transition: width .6s ease-out; }
.bilanz-balken .rest.minus { background: var(--rot, #ff3b30); }
.bilanz-hinweis { font-size: 12px; color: var(--orange-text); }
.bilanz-offen .kz { font-size: clamp(20px, 1.8vw, 28px); white-space: nowrap; }
.orange-text { color: var(--orange-text); }
@media (max-width: 1100px) { .bilanz-raster { grid-template-columns: 1fr 1fr; } .bilanz-offen { grid-column: 1 / -1; } }
@media (max-width: 700px) { .bilanz-raster { grid-template-columns: 1fr; } }
/* Dashboard lebendig (Sebastian 05.11.2026): Einblenden nacheinander, Balken wachsen, Karten heben sich beim Darüberfahren */
.dash .dash-ein { animation: dash-ein .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes dash-ein { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.dash .balken { transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.dash .kachel, .dash .bilanz-karte { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.dash a.kachel:hover, .dash .bilanz-karte:hover, .dash .kachel:hover { transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .07), 0 0 28px rgba(var(--licht-a, 10, 132, 255), .22); }
.dash .bilanz-balken .rest { transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .15s; }
@media (prefers-reduced-motion: reduce) { .dash .dash-ein { animation: none; } .dash .kachel:hover, .dash .bilanz-karte:hover { transform: none; } }

/* Leuchtende Symbole (Sebastian 05.11.2026: „kannst du diese simbole beleuchten?“ – Seitenleiste und Kopfleiste): leichtes Glühen in der eigenen
   Farbe, stärker beim Darüberfahren, das aktive Symbol glimmt langsam. Bereiche in ihrer Faserfarbe wie das Hintergrundlicht. */
.nav-punkt[data-nav="aufmass"] .ic { color: #37b6ff; }
.nav-punkt[data-nav="netd"] .ic { color: #22d3a6; }
.nav-punkt[data-nav="vonovia"] .ic { color: #ff8a3d; }
.nav-punkt[data-nav="buchhaltung"] .ic { color: #5ed36f; }
.nav-punkt .ic, .kopfleiste .ic {
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, currentColor 70%, transparent)) drop-shadow(0 0 7px color-mix(in srgb, currentColor 35%, transparent));
  transition: filter .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.nav-punkt:hover .ic, .kopfleiste button:hover .ic, .kopfleiste a:hover .ic {
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px color-mix(in srgb, currentColor 60%, transparent));
  transform: scale(1.1);
}
.nav-punkt.aktiv .ic { animation: ic-glimmen 3.4s ease-in-out infinite; }
@keyframes ic-glimmen {
  0%, 100% { filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 9px color-mix(in srgb, currentColor 45%, transparent)); }
  50% { filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 16px color-mix(in srgb, currentColor 70%, transparent)); }
}
/* Sebastian 05.11.2026: „das im tag es normal ist und im dunklen beleuchtet“ – im hellen Modus kein Leuchten */
:root[data-theme="light"] .nav-punkt .ic, :root[data-theme="light"] .kopfleiste .ic { filter: none !important; animation: none !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav-punkt .ic, :root:not([data-theme="dark"]) .kopfleiste .ic { filter: none !important; animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-punkt.aktiv .ic { animation: none; } .nav-punkt:hover .ic { transform: none; } }
:root[data-glas="aus"] .nav-punkt .ic, :root[data-glas="aus"] .kopfleiste .ic { filter: none; animation: none; }

/* Korrektur wieder freigeben: zwei große Wahlknöpfe (Dominik/Sebastian 05.11.2026) */
.korrektur-wahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.korrektur-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--linie); }
.korrektur-wahl:hover { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.korrektur-wahl .ic { width: 22px; height: 22px; color: var(--akzent); }
@media (max-width: 600px) { .korrektur-wahlen { grid-template-columns: 1fr; } }

/* Leuchtende Diagramme und Zahlen (Sebastian 05.11.2026: „beleuchte diese farbigen darstellungen mal mal sehen ob das gut aussieht“) –
   nur im dunklen Modus: Balken glühen in ihrer Farbe (grau dezent), farbige Beträge mit weichem Schein */
:root[data-theme="dark"] .balken { box-shadow: 0 0 10px color-mix(in srgb, var(--akzent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--akzent) 25%, transparent); }
:root[data-theme="dark"] .balken.gruen { box-shadow: 0 0 10px color-mix(in srgb, var(--gruen) 60%, transparent), 0 0 22px color-mix(in srgb, var(--gruen) 28%, transparent); }
:root[data-theme="dark"] .balken.rot { box-shadow: 0 0 10px rgba(255, 59, 48, .6), 0 0 22px rgba(255, 59, 48, .28); }
:root[data-theme="dark"] .balken.grau { box-shadow: 0 0 8px rgba(199, 199, 204, .22); }
:root[data-theme="dark"] .bilanz-wert.umsatz .bilanz-zahl, :root[data-theme="dark"] .kachel.blau .kz { text-shadow: 0 0 14px color-mix(in srgb, var(--akzent) 55%, transparent); }
:root[data-theme="dark"] .bilanz-wert.rest .bilanz-zahl, :root[data-theme="dark"] .kachel.gruen .kz { text-shadow: 0 0 14px color-mix(in srgb, var(--gruen) 55%, transparent); }
:root[data-theme="dark"] .bilanz-wert.minus .bilanz-zahl, :root[data-theme="dark"] .kachel.rot .kz { text-shadow: 0 0 14px rgba(255, 59, 48, .55); }
:root[data-theme="dark"] .kachel.orange .kz, :root[data-theme="dark"] .bilanz-offen .kz { text-shadow: 0 0 14px rgba(255, 159, 10, .55); }
:root[data-theme="dark"] .diagramm-legende span::before { box-shadow: 0 0 6px currentColor; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .balken { box-shadow: 0 0 10px color-mix(in srgb, var(--akzent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--akzent) 25%, transparent); }
  :root:not([data-theme="light"]) .balken.gruen { box-shadow: 0 0 10px color-mix(in srgb, var(--gruen) 60%, transparent), 0 0 22px color-mix(in srgb, var(--gruen) 28%, transparent); }
  :root:not([data-theme="light"]) .balken.rot { box-shadow: 0 0 10px rgba(255, 59, 48, .6), 0 0 22px rgba(255, 59, 48, .28); }
  :root:not([data-theme="light"]) .balken.grau { box-shadow: 0 0 8px rgba(199, 199, 204, .22); }
  :root:not([data-theme="light"]) .bilanz-wert.umsatz .bilanz-zahl, :root:not([data-theme="light"]) .kachel.blau .kz { text-shadow: 0 0 14px color-mix(in srgb, var(--akzent) 55%, transparent); }
  :root:not([data-theme="light"]) .bilanz-wert.rest .bilanz-zahl, :root:not([data-theme="light"]) .kachel.gruen .kz { text-shadow: 0 0 14px color-mix(in srgb, var(--gruen) 55%, transparent); }
  :root:not([data-theme="light"]) .bilanz-wert.minus .bilanz-zahl, :root:not([data-theme="light"]) .kachel.rot .kz { text-shadow: 0 0 14px rgba(255, 59, 48, .55); }
  :root:not([data-theme="light"]) .kachel.orange .kz, :root:not([data-theme="light"]) .bilanz-offen .kz { text-shadow: 0 0 14px rgba(255, 159, 10, .55); }
}