@charset "UTF-8";
/* Pro Academy CRM — globales Stylesheet „Keynote Navy" (Welle 2, 01.10.2026).
   Verbindlich: docs/design/KEYNOTE_SPEC.md (B Leitsätze · C Typo/Trefferflächen/Bewegung · D Komponenten).
   Tokens stehen NUR in static/css/tokens.css (vorher eingebunden) — hier keine Token-Definitionen,
   keine Hex-Literale, keine Schrift-Literale. Eine Definition je Komponente (Schicht A „Revolut-Sweep"
   und Schicht B „Modern" zusammengeführt). !important nur in den 6 Ausnahmen aus Spec D
   (Blur-Regel Handy · style=-Auffangregeln · Stufen-Pille/Avatare · #id[hidden] · Übergangsregeln · reduced-motion).
   Gliederung: 1 Basis · 2 Typo · 3 Shell · 4 Blatt/Dialog/Toast · 5 Komponenten · 6 Bestand · 7 Bewegung ·
   8 Auffangregeln · 9 Handy/Trefferflächen · 10 Druck. */

/* ═══ 1 · BASIS ═══════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
    font-family: var(--font-ui);
    font-size: 16px; line-height: 1.5; letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums lining-nums;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; font-variant-numeric: inherit; }
code, kbd, pre, samp { font-family: var(--font-ui); font-size: 0.95em; }
pre, code { background: var(--surface-2); color: var(--text); border-radius: 6px; }
pre { padding: 12px; overflow-x: auto; }
img, video, svg, iframe { max-width: 100%; height: auto; }
.card, .pa-hero, p, h1, h2, h3 { overflow-wrap: anywhere; }

/* Links: Navy führt (nie Gold). Komponenten-Links (mit Klasse) ohne Unterstrich. */
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:where([class]) { text-decoration: none; }

/* Fokus (WCAG 2.4.7): 2 px --link, 7,4–8,6:1 */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--link); outline-offset: 2px;
}
.skip-link {
    position: absolute; left: 8px; top: -56px; z-index: 100000;
    background: var(--primary); color: var(--on-primary); padding: 10px 16px;
    border-radius: 10px; font-size: 14px; font-weight: 600;
    transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* Sofort-Reaktion: kein 300-ms-Tap-Delay, Druck = scale(.97) in --dur-fast */
button, a, .btn, .nav-link, [role="button"], input[type="submit"], label { touch-action: manipulation; }
button:active, .btn:active, [role="button"]:active, input[type="submit"]:active, a.btn:active,
.akt-btn-gold:active, .akt-btn-ghost:active { transform: scale(0.97); }
/* Lade-Zustand nach dem Klick: sichtbar „es arbeitet" + kein Doppel-Klick */
.is-busy { opacity: 0.6; pointer-events: none; cursor: progress; position: relative; }
.is-busy::after {
    content: ""; position: absolute; right: 10px; top: 50%; left: auto; bottom: auto;
    width: 14px; height: 14px; margin-top: -7px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: ntpro-busy-spin 0.6s linear infinite;
}
@keyframes ntpro-busy-spin { to { transform: rotate(360deg); } }

/* Icons: nur Lucide (static/js/icons.js), Strich 1,75, currentColor */
[data-lucide] { display: inline-block; vertical-align: text-bottom; }
svg.lucide, .icon { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ 2 · TYPO-SKALA (Spec C) ═════════════════════════════════════════════
   Large Title 34/41 · Title 22/28 · Headline 17/22 · Body 16/24 · Callout 14/20 ·
   Footnote 13/18 (nur Desktop) · Caption 12/16 · Hero-Zahl · Kennzahl 28/32 */
h1, h2 { font-family: var(--font-display); }
h1, h2, h3, h4 { color: var(--text); font-weight: 600; }
h1 { font-size: 22px; line-height: 28px; letter-spacing: -0.016em; }
h2 { font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
h3 { font-size: 16px; line-height: 22px; letter-spacing: -0.005em; }
h4 { font-size: 14px; line-height: 20px; }
.content p { line-height: 1.5; }
small { font-size: 14px; line-height: 20px; }
.content small { color: var(--text-muted); }
@media (min-width: 769px) and (pointer: fine) { small { font-size: 13px; line-height: 18px; } }

.pa-large-title {
    font-family: var(--font-display); font-size: 34px; line-height: 41px; font-weight: 700;
    letter-spacing: -0.022em; color: var(--text); margin: 4px 0 16px;
}
.pa-large-title-sub { display: block; font-family: var(--font-ui); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.005em; color: var(--text-muted); margin-top: 2px; }
.pa-title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); }
.pa-headline { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pa-callout { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-muted); }

/* Hero-Zahl: genau 1 pro Bildschirm. Einheit („EH") 0,4em/500 gedämpft. */
.pa-hero-num {
    display: inline-flex; align-items: baseline; gap: 0.12em;
    font-family: var(--font-display); font-size: clamp(52px, 6vw, 72px); line-height: 1;
    font-weight: 600; letter-spacing: -0.035em; color: var(--text);
    font-variant-numeric: tabular-nums lining-nums;
}
.pa-hero-num small, .pa-hero-num .unit, .pa-hero-unit {
    font-size: 0.4em; line-height: 1; font-weight: 500; letter-spacing: 0; color: var(--text-muted);
}
/* Kennzahl: Label 14/500 über der Zahl 28/600 — höchstens 3 Nebenwerte */
.pa-kennzahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-kennzahl-l { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.pa-kennzahl-v { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.pa-kennzahl-v small { font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 2px; }
.pa-kennzahlen { display: flex; flex-wrap: wrap; gap: 16px 32px; }

/* ═══ 3 · SHELL ═══════════════════════════════════════════════════════════ */
/* — Splash (nur App-Start, sessionStorage-Gate in base.html) — */
#appSplash {
    position: fixed; inset: 0; z-index: 9999; background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
#appSplash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pa-splash-mark { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); }
.pa-splash-dot, .pa-brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; flex: none; }

/* — Sidebar: 248 px, --bg-2, Haarlinie, kein Blur, nur 1 Gold (aktiver Punkt) — */
.sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-w);
    height: 100vh; height: 100dvh;
    padding: env(safe-area-inset-top, 0px) 0 0 env(safe-area-inset-left, 0px);   /* Home-Bildschirm-App: unter Statusleiste/Notch */
    background: var(--bg-2); border-right: 1px solid var(--hairline);
    z-index: 100; display: flex; flex-direction: column;
}
.sidebar-logo { padding: 12px 16px 4px; }
.sidebar-logo .brand-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sidebar-logo .brand-icon {
    width: 28px; height: 28px; border-radius: 8px; overflow: hidden; flex: none;
    background: var(--primary); color: var(--on-primary);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.sidebar-logo .brand-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.sidebar-logo .brand-main { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.sidebar-close {
    display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center;
}
.sidebar-close svg { width: 20px; height: 20px; }
/* Kopf: EINE Zeile „{Monat} · X EH (+Y offen)" → /stand */
.sb-stand {
    display: flex; align-items: center; gap: 0 5px; flex-wrap: wrap;  /* lange Zahlen: „(+272 offen)" bricht um statt den Monat abzuschneiden */
    margin: 0 8px 8px; padding: 8px; min-height: 44px; border-radius: 10px;
    font-size: 14px; line-height: 20px; color: var(--text-muted); text-decoration: none;
}
.sb-stand:hover { background: var(--select); }
.sb-stand b { color: var(--text); font-weight: 600; white-space: nowrap; }
.sb-stand .sb-stand-o { white-space: nowrap; }
@media (min-width: 769px) { .sb-stand { letter-spacing: -0.01em; } .sb-stand .sb-stand-o { font-size: 13px; } }
.sb-stand .sb-stand-m { white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 8px 8px 16px; overflow-y: auto; border-top: 1px solid var(--hairline); }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.nav-link {
    position: relative; display: flex; align-items: center; gap: 10px;
    min-height: 32px; padding: 6px 10px 6px 20px; margin-bottom: 1px; border-radius: 8px;
    color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-link:hover { background: var(--select); color: var(--text); }
.nav-link.active { background: var(--select); color: var(--text); font-weight: 600; }
.nav-link.active::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--gold-text);
}
[data-theme="dark"] .nav-link.active::before { background: var(--gold); }
.nav-icon { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-link.active .nav-icon { color: var(--text); }
.nav-badge { margin-left: auto; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); min-width: 20px; text-align: right; }
.nav-badge.rot { color: var(--red); }
.nav-group { margin-top: 12px; }
.nav-group + .nav-link, .nav-group + .nav-admin-label { margin-top: 12px; }
.nav-group > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 32px; padding: 6px 10px; border-radius: 8px;
    font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
    content: ""; width: 6px; height: 6px; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--dur) var(--ease-out);
}
.nav-group:not([open]) > summary::after { transform: rotate(-45deg); }
.nav-group > summary:hover { background: var(--select); color: var(--text); }
.nav-group-items { padding-top: 2px; }
.nav-admin-label { margin: 16px 10px 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
/* Fuß: 56 px Avatar + Name + Stufe als Wort */
.sidebar-footer { padding: 4px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); }
.sb-user { display: flex; align-items: center; gap: 4px; min-height: 56px; }
.sb-user-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.sb-user-link:hover { background: var(--select); }
.sb-user-body { min-width: 0; display: flex; flex-direction: column; }
.sb-user-name { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-stufe { font-size: 13px; line-height: 18px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logout { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--text-muted); }
.sb-logout:hover { background: var(--select); color: var(--text); }
.sb-logout svg { width: 18px; height: 18px; }
.sb-admin { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; flex-wrap: wrap; }
.sb-admin form { margin: 0; flex: 1; min-width: 0; }
.sb-admin .btn { width: 100%; }
.sb-admin-chip { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
.sb-footlinks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 4px 8px 0; font-size: 13px; line-height: 18px; color: var(--text-soft); }
.sb-footlinks a { color: var(--text-soft); text-decoration: none; }
.sb-footlinks a:hover { color: var(--text); }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 99; background: var(--scrim); }
/* Avatar (Initialen, neutral) — Sidebar-Fuß + Topbar */
.sb-avatar, .tb-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--select); color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.sb-avatar img, .tb-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* — Main + Topbar: eine Zeile 52/60 px, --bg, ab 769 px Transparenz-Material (N10) —
   viewport-fit=cover (base.html): In der Home-Bildschirm-App liegt die Seite unter der Statusleiste
   (black-translucent) → die Topbar wächst um env(safe-area-inset-top) und schiebt ihre Zeile darunter.
   Im Browser ist der Wert 0 → nichts ändert sich. */
.main { margin-left: var(--sidebar-w); min-height: 100vh; }
:where(.main) > .topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 8px;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(32px, calc((100% - var(--w-wide)) / 2)) 0;
    background: var(--bg); border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out);
}
:where(.main) > .topbar.is-scrolled { border-bottom-color: var(--hairline); }
.topbar-title {
    flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-ui); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
    transition: opacity var(--dur) var(--ease-out);
}
.topbar.has-lt .topbar-title { opacity: 0; }
.topbar.has-lt.lt-gone .topbar-title { opacity: 1; }
.topbar-actions { position: relative; display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap; }
.tb-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tb-page-actions:empty { display: none; }
.tb-page-actions > form { margin: 0; display: inline-flex; }
.tb-icon-btn {
    width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.tb-icon-btn:hover { background: var(--select); }
.tb-icon-btn svg { width: 18px; height: 18px; }
.tb-lang { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; }
.tb-avatar { width: 32px; height: 32px; font-size: 13px; }
.tb-avatar:hover { background: var(--border-strong); }
.tb-more { display: none; }
/* Hat die Seite oben schon ihre eigene Hauptaktion (z. B. „Neuer Termin"), tritt „Eintragen" zurück —
   sonst stehen zwei Navy-Knöpfe nebeneinander (eine Hauptaktion pro Bildschirm). */
.topbar:not(.tb-collapsed) .topbar-actions:has(.tb-page-actions :is(.btn-primary, .btn-gold)) .tb-entry {
    background: var(--surface); border-color: var(--hairline); color: var(--text);
}
.topbar.tb-collapsed .tb-page-actions { display: none; }
.topbar.tb-collapsed .tb-more { display: inline-flex; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.hamburger-btn {
    display: none; width: 44px; height: 44px; flex: none; margin-left: -10px;
    border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer;
    align-items: center; justify-content: center; padding: 0;
}
.hamburger-btn:hover { background: var(--select); }
.hamburger-btn .hb-lines { width: 18px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger-btn .hb-lines span { display: block; height: 1.75px; background: currentColor; border-radius: 2px; }
/* Sprach-Menü (Desktop) */
.tb-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 9999; min-width: 200px; padding: 6px;
    background: var(--surface-3); border-radius: 14px; box-shadow: var(--shadow-2);
}
.tb-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px;
    border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer;
    font-size: 14px; line-height: 20px; text-align: left;
}
.tb-menu button:hover { background: var(--select); }
.tb-menu .tb-menu-code { width: 24px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tb-menu .tb-menu-on { margin-left: auto; color: var(--link); display: inline-flex; }
.tb-menu .tb-menu-on svg { width: 16px; height: 16px; }
@media (min-width: 769px) {
    :where(.main) > .topbar {
        background: color-mix(in srgb, var(--bg) 85%, transparent);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    }
    .main { padding-right: env(safe-area-inset-right, 0px); }   /* iPhone quer: Notch rechts */
}

/* — Inhalt — */
.content {
    max-width: calc(var(--w-wide) + 64px); margin: 0 auto;
    padding: 24px 32px 48px; animation: fadeInUp var(--dur-slow) var(--ease-out);
}
.content:focus { outline: none; }
/* Leseseiten (Heute, Eingabe, Rangliste, Profil) begrenzen ihre Blöcke selbst: */
.pa-read { max-width: var(--w-read); }

/* — Modus-Leisten (Arbeiten als … / Mitglied-Ansicht) — */
.pa-modebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px max(16px, calc((100% - var(--w-wide)) / 2)); min-height: 52px;
    background: var(--surface-2); border-bottom: 1px solid var(--hairline);
    font-size: 14px; line-height: 20px; color: var(--text);
}
.pa-modebar form { margin: 0; }
.pa-modebar .pa-modebar-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pa-modebar .pa-modebar-t svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.main > .pa-modebar:first-child { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }   /* ganz oben: unter die Statusleiste */

/* — Hinweis im Fluss (Inaktiv-Banner) — */
.pa-inline-note {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
}
#inactiveBanner[hidden] { display: none !important; }
.pa-inline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.pa-inline-body { flex: 1 1 220px; min-width: 0; }
.pa-inline-t { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-inline-s { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-inline-acts { display: flex; gap: 4px; flex-wrap: wrap; }

/* — EH-Hinweis (Produktionsschluss): sonst EINE 44-px-Zeile, volle Form nur per Opt-in — */
.prodeh { background: var(--surface); border-radius: 14px; margin: 0 0 16px; }
/* Desktop: die Ein-Zeilen-Form ist eine kompakte Kapsel links (nicht über die volle Breite) — die Seiten
   haben unterschiedliche Inhaltsbreiten (720/880/1080), ein vollbreiter Streifen stand rechts über. */
@media (min-width: 769px) {
    .prodeh:not(.is-voll) { width: fit-content; max-width: 100%; }
    .prodeh:not(.is-voll) .prodeh-line { gap: 10px; padding-right: 4px; }
    .prodeh:not(.is-voll) .prodeh-go { margin-left: 16px; }
}
.prodeh-line {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 8px 10px 14px;
    border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left;
    font-size: 14px; line-height: 20px; border-radius: 14px;
}
.prodeh-line b { font-weight: 600; }
.prodeh-line-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .prodeh-vom { display: none; } }
.prodeh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.prodeh-go { margin-left: auto; color: var(--link); font-weight: 600; white-space: nowrap; }
.prodeh-row { display: flex; align-items: center; }
.prodeh-row .prodeh-line { flex: 1; min-width: 0; }
.prodeh-x {
    width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: transparent;
    color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.prodeh-x:hover { color: var(--text); background: var(--select); }
.prodeh-x svg { width: 18px; height: 18px; }
.prodeh-panel { padding: 4px 16px 16px; }
#prodehPanel[hidden] { display: none !important; }
.prodeh.is-voll .prodeh-panel { padding-top: 16px; }
.prodeh-head { display: flex; align-items: flex-start; gap: 8px; }
.prodeh-body { flex: 1; min-width: 0; }
.prodeh-t { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.prodeh-t b { color: var(--text); font-weight: 600; }
.prodeh-q { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); margin-top: 2px; }
.prodeh-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.prodeh-form input { flex: 0 1 160px; min-width: 0; text-align: right; }
.prodeh-form .btn { align-self: stretch; }   /* gleiche Höhe wie das Feld daneben (Desktop-Knopf wäre 36) */
.prodeh-unit { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.prodeh-done { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--text); }
.prodeh-done svg { width: 18px; height: 18px; color: var(--green); }

/* — Tab-Leiste (Handy): 64 px + Safe Area, deckend, kein Blur, kein Gold — Regeln im Handy-Block (≤ 768 px) — */
.mobile-tabbar { display: none; }

/* ═══ 4 · BLATT · DIALOG · TOAST · EINBLENDUNGEN ═══════════════════════════ */
/* Blatt (dialog .pa-entry: #paEntry, #paMore, #nlQuick): Handy Bottom-Sheet, Desktop Dialog max. 520 px.
   Kein Griff (kein Wischen) → oben rechts „Fertig". Backdrop ohne Blur. */
.pa-entry {
    border: 0; border-radius: 20px; background: var(--surface); color: var(--text);
    padding: 0; width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 48px);
    margin: auto; box-shadow: var(--shadow-2); overflow: auto;
}
[data-theme="dark"] .pa-entry { background: var(--surface-3); }
.pa-entry::backdrop { background: var(--scrim); }
.pa-entry[open] { animation: pa-sheet-in var(--dur-slow) var(--ease-sheet); }
@keyframes pa-sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.pa-entry-in { padding: 8px 20px 20px; }   /* Padding INNEN — Tipp auf den Rand darf das Blatt nicht schließen */
.pa-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-bottom: 8px; }
.pa-entry-k { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-entry-h:focus { outline: none; }
.pa-entry-h { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); margin: 0; }
/* „Fertig" (ersetzt das ×). .pa-entry-x bleibt kompatibel (Kundenliste #nlQuick) und zeigt ebenfalls „Fertig". */
.pa-sheet-done, .pa-entry-x {
    min-height: 44px; min-width: 44px; padding: 0 4px 0 12px; margin-right: -4px; flex: none;
    border: 0; background: transparent; cursor: pointer;
    font-size: 17px; line-height: 22px; font-weight: 600; color: var(--link);
}
.pa-entry-x { font-size: 0; }
.pa-entry-x > * { display: none; }
.pa-entry-x::after { content: "Fertig"; font-size: 17px; line-height: 22px; font-weight: 600; }
.pa-entry-list { background: var(--surface-2); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
[data-theme="dark"] .pa-entry-list { background: var(--surface-2); }
.pa-entry-list .pa-row { position: relative; border-radius: 0; padding: 10px 12px 10px 14px; min-height: 60px; }
.pa-entry-list .pa-row + .pa-row { border-top: 0; }
.pa-entry-list .pa-row + .pa-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--hairline); }
.pa-entry-list .pa-row:hover { background: var(--select); }
.pa-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }   /* Bestand (alte Raster-Variante) */
.pa-entry-opt small { font-size: 14px; color: var(--text-muted); }
/* Serien-Schnelleingabe (#paEntry oben, #nlQuick — 02.10.): Name, Enter, der nächste. Hinweis/Bestätigung
   steht ÜBER dem Namensfeld, damit sie am Handy über der Tastatur sichtbar bleibt; darunter die letzten 3. */
.pa-qadd { margin: 0 0 20px; }
.pa-qadd-seg { display: flex; width: 100%; }
.pa-qadd-seg button { flex: 1 1 0; }
.pa-qadd-msg { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 12px 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-qadd-msg svg { width: 16px; height: 16px; flex: none; stroke-width: 2.25; }
.pa-qadd-msg b { font-weight: 600; }
.pa-qadd-msg > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* eine Zeile: das Feld darunter springt nicht */
.pa-qadd-msg.is-err > span { white-space: normal; }
.pa-qadd-msg.is-ok { color: var(--text); animation: pa-qadd-in var(--dur) var(--ease-out); }
.pa-qadd-msg.is-ok svg { color: var(--green); }
.pa-qadd-msg.is-err { color: var(--red); font-weight: 500; }
.pa-qadd-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.pa-qadd-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-qadd-f--name { grid-column: 1 / -1; }
.pa-qadd-f input { width: 100%; }
.pa-qadd-grid > .pa-qadd-btn { min-width: 120px; min-height: 44px; }   /* gleich hoch wie das Feld daneben (Desktop-Knopf wäre 36) */
@media (min-width: 769px) and (pointer: fine) { .pa-qadd-grid > .pa-qadd-btn { min-height: 40px; } }
.pa-qadd-recent { list-style: none; margin: 12px 0 0; padding: 0; background: var(--surface-2); border-radius: 12px; overflow: hidden; }
.pa-qadd-recent li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; }
.pa-qadd-recent li + li::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--hairline); }
.pa-qadd-recent li.is-new { animation: pa-qadd-in var(--dur-slow) var(--ease-out); }
.pa-qadd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); }
a.pa-qadd-name::after { content: ""; position: absolute; inset: 0; }   /* ganze Zeile tippt auf den Kontakt */
a.pa-qadd-name:hover { color: var(--link); }
.pa-qadd-tag { flex: none; font-size: 14px; line-height: 20px; color: var(--text-muted); }
@keyframes pa-qadd-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 768px) { .pa-qadd-grid > .pa-qadd-btn { min-width: 0; padding: 0 20px; } }
.pa-icon-tile {
    width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--select); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
}
.pa-icon-tile svg { width: 20px; height: 20px; }
/* „…"-Blatt: Seitenaktionen + Darstellung + Sprache + Aktualisieren */
.pa-more-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pa-more-actions[hidden] { display: none; }
.pa-more-actions > .btn, .pa-more-actions > form, .pa-more-actions > form > .btn, .pa-more-actions > a { width: 100%; }
.pa-more-actions > form { margin: 0; display: block; }
.pa-more-actions .btn { min-height: 48px; justify-content: center; font-size: 16px; }
.pa-more-seg { margin-left: auto; }

/* Dialog (Formular-Fenster, Trophäe, Mein Warum, Suche) — JS schaltet style.display */
.pa-modal {
    position: fixed; inset: 0; z-index: 11500; padding: 16px;
    align-items: center; justify-content: center; background: var(--scrim);
}
.pa-modal-card {
    position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--surface); color: var(--text); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-2);
    animation: pa-sheet-in var(--dur-slow) var(--ease-sheet);
}
[data-theme="dark"] .pa-modal-card { background: var(--surface-3); }
.pa-modal-k { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pa-modal-k svg { width: 16px; height: 16px; }
.pa-modal-h { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); margin: 0 0 8px; }
.pa-modal-p { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-bottom: 16px; }
.pa-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.pa-modal-actions .btn { flex: 1 1 auto; }
.pa-modal-group { background: var(--surface-2); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.pa-modal-group label { display: block; margin-bottom: 6px; }
.pa-modal-group input, .pa-modal-group select, .pa-modal-group textarea { width: 100%; }
.pa-modal-hint { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 6px; }
.pa-modal-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; padding: 4px 0; }
.pa-modal-sum span:first-child { color: var(--text-muted); }
.pa-modal-sum b { font-weight: 600; color: var(--text); }
.pa-modal-sum.is-total { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 8px; }
.pa-form-error { padding: 10px 14px; background: var(--red-soft); color: var(--red); border-radius: 10px; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; }
/* Mein Warum */
.pa-warum { text-align: center; padding: 32px 24px 24px; }
.pa-warum-q { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); margin: 8px 0 24px; }
.pa-warum-f { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
/* Trophäe: ruhig, Gold-Ring 0,5 s statt Konfetti */
.pa-trophy-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.pa-trophy-ic {
    position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1;
    background: var(--gold-soft);
}
.pa-trophy-ic::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.pa-trophy-ic.is-burst::after { animation: pa-gold-ring 0.5s var(--ease-out) 1; }
@keyframes pa-gold-ring { 0% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
.pa-trophy-n { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); }
.pa-trophy-tier { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.pa-trophy-tier:empty { display: none; }
.pa-trophy-tier::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tier, var(--text-soft)); }
.pa-trophy-d { font-size: 16px; line-height: 24px; color: var(--text-muted); margin-top: 16px; }
.pa-trophy-c { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
/* Suche (⌘K) */
.pa-search { align-items: flex-start; padding-top: 72px; }
.pa-search-card { width: 100%; max-width: 640px; background: var(--surface-3); border-radius: 20px; box-shadow: var(--shadow-2); overflow: hidden; animation: pa-sheet-in var(--dur) var(--ease-out); }
.pa-search-head { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--hairline); }
.pa-search-head > svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.pa-search-head input {
    flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; box-shadow: none;
    padding: 0; font-size: 17px; line-height: 22px; color: var(--text);
}
.pa-search-head input:focus { box-shadow: none; }
.pa-search-res { max-height: min(480px, 60vh); overflow-y: auto; padding: 6px; }
.pa-search-empty { padding: 32px 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-search-grp { padding: 10px 12px 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
.pa-search-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.pa-search-ic { width: 32px; flex: none; text-align: center; font-size: 17px; }
.pa-search-main { flex: 1; min-width: 0; }
.pa-search-t { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-search-s { font-size: 14px; line-height: 20px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-search-b { font-size: 12px; line-height: 16px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
.pa-search-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-muted); }
.pa-search-foot kbd { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; }
.pa-mark { background: var(--gold-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Toasts: Handy über der Tab-Leiste, Desktop unten rechts, nie über der Topbar.
   Hell Navy/Weiß, dunkel --surface-3. Erfolg 4 s, Undo 9 s, Fehler bleiben bis zum Tipp. */
.pa-toasts {
    position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 13000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    width: min(400px, calc(100% - 32px)); pointer-events: none;
}
.pa-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 12px 8px 12px 16px; border-radius: 14px; box-shadow: var(--shadow-2);
    background: var(--primary); color: var(--on-primary);
    font-size: 16px; line-height: 22px; font-weight: 500;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
[data-theme="dark"] .pa-toast { background: var(--surface-3); color: var(--text); }
.pa-toast.is-in { opacity: 1; transform: none; }
.pa-toast-ic { flex: none; width: 20px; height: 22px; display: inline-flex; align-items: center; }
.pa-toast-ic svg { width: 20px; height: 20px; }
.pa-toast-body { flex: 1; min-width: 0; padding-top: 0; }
.pa-toast-undo {
    display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; padding: 0 12px;
    border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.pa-toast-x {
    flex: none; width: 36px; height: 36px; margin-top: -7px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; opacity: 0.7; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pa-toast-x:hover { opacity: 1; }
.pa-toast-x svg { width: 16px; height: 16px; }

/* Einblendungen unten (App-Installation, Push-Frage) — eine pro Seitenaufruf (window.paOverlay) */
.pa-banner {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 11000;
    width: calc(100% - 32px); max-width: 520px; padding: 16px; border-radius: 20px;
    background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-2);
    animation: pa-banner-in var(--dur-slow) var(--ease-sheet);
}
@keyframes pa-banner-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.pa-banner-row { display: flex; align-items: flex-start; gap: 12px; }
.pa-banner-body { flex: 1; min-width: 0; }
.pa-banner-t { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-banner-s { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 2px; }
.pa-banner-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Pull-to-Refresh: 20-px-Spinner, kein Text */
.pa-ptr {
    position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 9999; width: 36px; height: 36px; margin-left: -18px;
    border-radius: 50%; background: var(--surface-3); box-shadow: var(--shadow-2);
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-60px); opacity: 0; pointer-events: none;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.pa-ptr-spin {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--text-soft); border-top-color: transparent;
}
.pa-ptr.is-ready .pa-ptr-spin { border-color: var(--text); border-top-color: transparent; }
.pa-ptr.is-loading .pa-ptr-spin { animation: ntpro-busy-spin 0.7s linear infinite; }

/* App-Tour */
#tourOverlay { position: fixed; inset: 0; z-index: 10500; background: var(--scrim); }
#tourSpotlight {
    position: fixed; z-index: 10501; pointer-events: none; border-radius: 14px; border: 2px solid var(--gold);
    box-shadow: 0 0 0 9999px var(--scrim);
    transition: top var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}
#tourCard {
    position: fixed; z-index: 10502; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 400px; padding: 20px;
    border-radius: 20px; background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-2);
}
.pa-tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pa-tour-step { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--select); color: var(--text); font-size: 14px; font-weight: 600; }
.pa-tour-t { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-tour-c { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.pa-tour-text { font-size: 16px; line-height: 24px; color: var(--text-muted); margin-bottom: 16px; }
.pa-tour-acts { display: flex; gap: 8px; align-items: center; }

/* ═══ 5 · KOMPONENTEN ═════════════════════════════════════════════════════ */
/* — Karte: --surface, Radius 14, ohne Rahmen und Schatten, innen 16/20 — */
.card {
    background: var(--surface); border: 0; border-radius: 14px; box-shadow: none;
    padding: 20px; margin-bottom: 16px; content-visibility: auto; contain-intrinsic-size: auto 200px;
}
.card-title {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
    margin-bottom: 12px; border: 0;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.pa-card { background: var(--surface); border: 0; border-radius: 14px; padding: 20px; box-shadow: none; }
.ck-card { background: var(--surface); border: 0; border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: none; }

/* — Bühne (Keynote): höchstens 1 pro Bildschirm. Gold nur über .is-reached oder .btn-gold — */
.pa-stage {
    position: relative; background: var(--stage); color: var(--on-stage);
    border-radius: 20px; padding: 24px; margin-bottom: 24px; overflow: hidden;
}
.pa-stage h1, .pa-stage h2, .pa-stage h3, .pa-stage .pa-title, .pa-stage .pa-headline { color: var(--on-stage); }
.pa-stage .pa-hero-num, .pa-stage .pa-kennzahl-v { color: var(--on-stage); }
.pa-stage .pa-hero-num small, .pa-stage .pa-hero-num .unit, .pa-stage .pa-hero-unit,
.pa-stage .pa-kennzahl-l, .pa-stage .pa-kennzahl-v small, .pa-stage-muted, .pa-stage .pa-callout { color: var(--stage-muted); }
.pa-stage.is-reached .pa-hero-num, .pa-stage .is-reached { color: var(--stage-gold); }
.pa-stage a:not(.btn) { color: var(--on-stage); }
.pa-stage .btn-gold { background: var(--stage-gold); border-color: var(--stage-gold); color: var(--on-gold); }
.pa-stage .btn-secondary, .pa-stage .btn-ghost {
    background: color-mix(in srgb, var(--on-stage) 12%, transparent); border-color: transparent; color: var(--on-stage);
}
.pa-stage .btn-primary { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); }
.pa-stage .pa-ring-track { stroke: color-mix(in srgb, var(--on-stage) 14%, transparent); }
.pa-stage .pa-ring-fill { stroke: var(--on-stage); }
.pa-stage.is-reached .pa-ring-fill { stroke: var(--stage-gold); }
.pa-stage-sentence { font-size: 16px; line-height: 24px; color: var(--stage-muted); margin-top: 8px; }
.pa-stage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* — Kennzahl-Karten (Bestand: .kpi-card, .ck-kpi, .pa-stat-tile) — */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { position: relative; background: var(--surface); border: 0; border-radius: 14px; padding: 16px; box-shadow: none; overflow: hidden; }
.kpi-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.kpi-value { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 4px 0 2px; }
.kpi-sub { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.ck-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.ck-kpi { background: var(--surface); border: 0; border-radius: 14px; padding: 16px; box-shadow: none; color: var(--text); }
.ck-kpi .kv { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.ck-kpi .kv span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 3px; }
.ck-kpi .kl { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); margin-top: 6px; }
.ck-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.ck-sub { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--text-muted); max-width: 52ch; }
.ck-klabel { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
.ck-klabel svg { width: 16px; height: 16px; }
.num, .kpi-value, .metric .num, [data-num], .money { font-variant-numeric: tabular-nums lining-nums; }
.money { font-weight: 600; }

/* — Knöpfe: Radius 12, 44 px Handy / 36 px Desktop, 16/600 bzw. 14/600 — */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px;
    background: var(--surface-2); color: var(--text);
    font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--on-primary)); border-color: color-mix(in srgb, var(--primary) 88%, var(--on-primary)); }
.btn-secondary { background: var(--surface-2); border-color: var(--hairline); color: var(--text); }
.btn-secondary:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-2) 92%, var(--text)); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); box-shadow: none; }
.btn-gold:hover { background: color-mix(in srgb, var(--gold) 90%, var(--on-gold)); border-color: color-mix(in srgb, var(--gold) 90%, var(--on-gold)); }
.btn-danger { background: var(--red-soft); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red-soft) 85%, var(--red)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--link); padding: 0 12px; }
.btn-ghost:hover { background: var(--select); }
.btn-sm { position: relative; min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; gap: 5px; }
.btn-sm::after { content: ""; position: absolute; inset: -4px; }
.btn-sm.is-busy::after { inset: auto; }

/* — Formulare: Feld 44 px, Radius 10, --field-line, Fokus-Ring --link, Schrift 16 (kein iOS-Zoom) — */
label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([type="hidden"])),
:where(select), :where(textarea) {
    min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--field-line); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font-size: 16px; line-height: 22px; box-shadow: none;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([type="hidden"])),
[data-theme="dark"] :where(select), [data-theme="dark"] :where(textarea) { background-color: var(--surface-2); }   /* nur Farbe: sonst löscht „background" den Select-Pfeil */
:where(input, select, textarea):focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px var(--link); }
:where(textarea) { resize: vertical; min-height: 90px; }
:where(select:not([multiple]):not([size]):not([style*="background"])) {
    -webkit-appearance: none; appearance: none; padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select option { background: var(--surface); color: var(--text); }
::placeholder { color: var(--text-soft); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--link); }
:where(input, select, textarea):disabled { background: var(--surface-2); color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); opacity: 1; }

/* — Tabellen: th 13/600 gedämpft (keine Versalien), td 14/20, Haarlinien — */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
th {
    padding: 10px 16px; text-align: left; white-space: nowrap; background: transparent;
    font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--hairline);
}
td { padding: 12px 16px; vertical-align: middle; color: var(--text); border-bottom: 1px solid var(--hairline); transition: background-color var(--dur-fast); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: 14px; }
.table-wrap table { width: 100%; margin: 0; }
@media (min-width: 769px) {
    /* Zellen nie buchstabenweise brechen — wird's eng, scrollt .table-wrap */
    th, td { overflow-wrap: normal; word-break: normal; }
    td a[href^="tel:"] { white-space: nowrap; }
}

/* — Status: Punkt + Wort; Füllung nur bei „überfällig" — */
.status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-muted); white-space: nowrap;
}
.status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, currentColor); flex: none; }
.status-badge.is-overdue, .status-badge.ueberfaellig { background: var(--red-soft); color: var(--red); padding: 2px 8px; border-radius: 999px; --dot: var(--red); }
.status-neu, .status-geplant, .status-angebot { --dot: var(--link); }
.status-kontakt, .status-offen { --dot: var(--amber); }
.status-gewonnen, .status-abgeschlossen, .status-erledigt { --dot: var(--green); }
.status-verloren, .status-storniert, .status-abgesagt { --dot: var(--red); }
.status-pill { min-height: 48px; }
/* Stufen-Pille und Avatare neutral — Ausnahme 3 (Inline-Farben aus app.py-Daten) */
.stufe-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 13px; line-height: 18px; font-weight: 600;
    background: var(--surface-2) !important; color: var(--text-muted) !important; border-color: transparent !important; box-shadow: none !important;
}
.pa-avatar {
    width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; font-size: 13px; font-weight: 600;
    background: var(--surface-2) !important; color: var(--text) !important;
}
.pa-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* — Chips / Pills / Segment — */
.pa-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-pill {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
    background: var(--select); color: var(--text-muted); font-size: 14px; line-height: 20px; font-weight: 500;  /* --surface-2 war auf --bg im Hellen unsichtbar */
}
.pa-pill::after { content: ""; position: absolute; inset: -4px 0; }
.pa-pill:hover { color: var(--text); }
.pa-pill.on, .pa-pill[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); font-weight: 600; }
/* Dunkel: --shadow-1 ist „none" → als Liste ungültig; aktiver Chip bekommt eine eigene, sichtbare Kante */
[data-theme="dark"] .pa-pill.on, [data-theme="dark"] .pa-pill[aria-pressed="true"] { background: var(--surface-3); box-shadow: 0 0 0 1px var(--border-strong); }
.pa-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.pa-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; min-height: 36px; border-radius: 10px; background: var(--select); border: 0; }
/* Hell: --surface-2 ist auf dem Papier-Grund (--bg) unsichtbar (1,01:1) → Spur/Chip in --select (Navy 8 %),
   sichtbar auf Papier UND auf weißen Karten; der aktive Eintrag bleibt weiß mit Schatten wie in iOS. */
:where(html:not([data-theme="dark"])) .pa-pill, :where(html:not([data-theme="dark"])) .pa-seg { background: var(--select); }
.pa-seg button, .pa-seg a {
    position: relative; min-height: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; color: var(--text-muted); cursor: pointer; text-decoration: none;
    font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
.pa-seg button::after, .pa-seg a::after { content: ""; position: absolute; inset: -6px 0; }
.pa-seg .on, .pa-seg [aria-pressed="true"], .pa-seg [aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
[data-theme="dark"] .pa-seg .on, [data-theme="dark"] .pa-seg [aria-pressed="true"], [data-theme="dark"] .pa-seg [aria-current="page"] { background: var(--surface-3); }
.pa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--surface-2); color: var(--text-muted); }
.pa-chip.green { background: var(--green-soft); color: var(--green); }
.pa-chip.gold { background: var(--gold-soft); color: var(--gold-text); }
.pa-chip.red { background: var(--red-soft); color: var(--red); }
.pa-chip.blue { background: var(--select); color: var(--link); }
.pa-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--surface-2); color: var(--text-muted); }

/* — Listen (iOS): .pa-list/.pa-row kompatibel erweitert, ≥ 44 px (Handy 52) — */
.pa-list { padding: 0; }
.pa-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color var(--dur-fast) var(--ease-out); }
:is(a, button, label).pa-row { cursor: pointer; }
:is(a, button).pa-row:hover { background: var(--surface-2); }
button.pa-row { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; }
.pa-row + .pa-row { border-top: 1px solid var(--hairline); }
.pa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pa-row-val { margin-left: auto; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pa-row-sub-val { color: var(--text-muted); font-weight: 400; }
.pa-row-go { flex: none; display: inline-flex; color: var(--text-soft); }
.pa-row-go svg { width: 18px; height: 18px; }
.pa-r-title { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pa-r-sub { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 1px; }
.pa-time-pill { width: 56px; flex: none; text-align: center; padding: 6px 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 20px; font-weight: 600; }
.pa-perf-val { min-width: 60px; flex: none; text-align: right; font-size: 14px; font-weight: 600; color: var(--text); }
.pa-sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-soft); }
.pa-sdot.on { background: var(--green); }
.pa-sdot.warn { background: var(--amber); }
.pa-sdot.low { background: var(--red); }
.pa-st { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.pa-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-soft)); }
.pa-st.aktiv, .pa-st.policiert, .pa-st.gruen { --dot: var(--green); }
.pa-st.offen, .pa-st.pruefung, .pa-st.gelb { --dot: var(--amber); }
.pa-st.termin, .pa-st.blau { --dot: var(--link); }
.pa-st.storno, .pa-st.rot { --dot: var(--red); }

/* — Seitenkopf / Kartenkopf / Hinweis / Legende — */
.pa-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-sec-head h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: var(--text); }
.pa-sec-head p { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 2px; }
.pa-p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; }
.pa-p-head h3 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pa-p-head .p-sub { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 1px; }
.pa-link { color: var(--link); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; text-decoration: none; }
.pa-note { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text-muted); font-size: 14px; line-height: 20px; }
.pa-note b { color: var(--text); font-weight: 600; }
.pa-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.pa-legend span { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-muted); }

/* — Leerzustand: Icon 28 · Headline · ein Satz · ein Knopf (keine gestrichelten Kästen) — */
.pa-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; }
.pa-empty > svg, .pa-empty-ic svg, .pa-empty-ic { width: 28px; height: 28px; color: var(--text-soft); }
.pa-empty-t { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-empty-s { font-size: 14px; line-height: 20px; color: var(--text-muted); max-width: 40ch; }
.pa-empty .btn { margin-top: 8px; }

/* — Diagramme: Ring (Strich 12, runde Enden) + Säulen (28 px, oben Radius 6) — */
.pa-ring { position: relative; display: inline-grid; place-items: center; }
.pa-ring svg { transform: rotate(-90deg); display: block; }
.pa-ring-track { fill: none; stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: 12; }
.pa-ring-fill { fill: none; stroke: var(--primary); stroke-width: 12; stroke-linecap: round; animation: pa-ring-draw var(--dur-chart) var(--ease-out) 1; }
.pa-ring-soll { fill: none; stroke: var(--text-soft); stroke-width: 2; }
[data-theme="dark"] .pa-ring-track { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
[data-theme="dark"] .pa-ring-fill { stroke: var(--text); }
.pa-ring.is-reached .pa-ring-fill { stroke: var(--gold-text); }
[data-theme="dark"] .pa-ring.is-reached .pa-ring-fill { stroke: var(--gold); }
.pa-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
@keyframes pa-ring-draw { from { stroke-dasharray: 0 1000; } }
.pa-cols { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.pa-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pa-col-bar { width: 28px; max-width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--primary); transform-origin: bottom; animation: pa-col-grow var(--dur-chart) var(--ease-out) both; }
[data-theme="dark"] .pa-col-bar { background: var(--text); }
.pa-col.is-reached .pa-col-bar { background: var(--gold-text); }
[data-theme="dark"] .pa-col.is-reached .pa-col-bar { background: var(--gold); }
.pa-col-lbl { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.pa-col.is-current .pa-col-lbl { color: var(--text); font-weight: 600; }
.pa-cols-soll { position: absolute; left: 0; right: 0; height: 1px; background: var(--text-soft); pointer-events: none; }
@keyframes pa-col-grow { from { transform: scaleY(0); } }
.progress-bar { height: 8px; border-radius: 999px; overflow: hidden; background: var(--select); border: 0; }
.progress-fill { height: 100%; border-radius: 999px; background-color: var(--primary); transition: width var(--dur-chart) var(--ease-out); }
[data-theme="dark"] .progress-fill { background-color: var(--text); }
.progress-gold, .progress-navy { background-color: var(--primary); }
[data-theme="dark"] .progress-gold, [data-theme="dark"] .progress-navy { background-color: var(--text); }
.progress-green { background-color: var(--green); }
.progress-blue { background-color: var(--link); }
.level-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--text-soft); }

/* — Raster — */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.chart-container { position: relative; height: 260px; }

/* — Hinweis-Box (Bestand .flash: login, passwort_aendern) — */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; line-height: 20px; font-weight: 500; background: var(--surface-2); color: var(--text); }
.flash-success { background: var(--green-soft); color: var(--green); }
.flash-error { background: var(--red-soft); color: var(--red); }
.flash-info { background: var(--select); color: var(--text); }

/* ═══ 6 · BESTANDS-KOMPONENTEN (Vorlage 12.07., ruhig gestellt) ═══════════ */
/* — Hero (flach: keine Verläufe, kein Leuchtschein, ::before/::after entfernt) — */
.pa-hero {
    position: relative; background: var(--hero-bg); color: var(--hero-text);
    border-radius: 20px; padding: 24px; margin-bottom: 24px; box-shadow: none;
}
.pa-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-size: 14px; line-height: 20px; font-weight: 500; color: var(--hero-eyebrow-color);
}
.pa-hero-title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; color: inherit; margin: 0 0 8px; }
.pa-hero-title.is-gradient { background: none; -webkit-text-fill-color: currentColor; }
.pa-hero-sub { font-size: 16px; line-height: 24px; color: var(--text-muted); max-width: 60ch; margin-bottom: 12px; }
.pa-hero-stats { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 12px 0; }
.pa-hero-stat { min-width: 0; }
.pa-hero-stat-num { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.pa-hero-stat-num small { font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 3px; }
.pa-hero-stat-lbl { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.pa-hero-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px;
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
    background: var(--hero-cta-bg); color: var(--hero-cta-text); font-size: 16px; line-height: 20px; font-weight: 600;
    transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pa-hero-cta:hover { background: color-mix(in srgb, var(--hero-cta-bg) 88%, var(--hero-cta-text)); }
.pa-hero-progress { position: relative; height: 8px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: var(--hero-progress-bg); }
.pa-hero-progress-fill { height: 100%; border-radius: 999px; background: var(--hero-progress-fill); transition: width var(--dur-chart) var(--ease-out); }
.pa-hero-chip {
    position: absolute; top: 20px; right: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    background: var(--hero-chip-bg); color: var(--hero-chip-text); font-size: 13px; line-height: 18px; font-weight: 500;
}
.pa-hero--gold .pa-hero-stat-num { color: var(--gold-text); }
/* — Karriere-Karte (Grundseminar) — */
.pa-career { position: relative; background: var(--surface); border: 0; border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: none; }
.pa-career .c-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.pa-career h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--text); margin: 6px 0 12px; }
/* — KPI-Kachel mit Icon (Push-Admin) — */
.pa-kpi { display: block; background: var(--surface); border: 0; border-radius: 14px; padding: 16px; box-shadow: none; text-decoration: none; color: inherit; cursor: pointer; transition: background-color var(--dur) var(--ease-out); }
.pa-kpi:hover { background: color-mix(in srgb, var(--surface) 94%, var(--text)); }
.pa-kpi .k-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pa-kpi .k-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--select); color: var(--text); }
.pa-kpi .k-ico svg { width: 18px; height: 18px; }
.pa-kpi .k-val { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.pa-kpi .k-val small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.pa-kpi .k-lab { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
/* — Stat-Kacheln (Seitenkopf-Zahlen) — */
.pa-stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pa-stat-tile { background: var(--surface); border: 0; border-radius: 14px; padding: 16px; box-shadow: none; }
.pa-stat-tile .stv { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.pa-stat-tile .stv small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.pa-stat-tile .stl { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
/* — Trichter-Balken (einfarbig Navy) — */
.pa-funnel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.pa-fn-row { display: flex; align-items: center; gap: 12px; }
.pa-fn-label { width: 110px; flex: none; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-fn-track { flex: 1; height: 28px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pa-fn-bar { height: 100%; min-width: 28px; border-radius: 8px; display: flex; align-items: center; padding-left: 10px; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 600; }
/* — Team: Stufen-Reihen + Partner-Karten — */
.pa-tier { margin-bottom: 24px; }
.pa-tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pa-tier-tag { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; line-height: 18px; font-weight: 600; border: 0; }
.pa-tier-tag.me { background: var(--primary); color: var(--on-primary); }
.pa-tier-line { flex: 1; height: 1px; background: var(--hairline); }
.pa-tier-count { font-size: 13px; color: var(--text-muted); }
.pa-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pa-pcard { display: block; background: var(--surface); border: 0; border-radius: 14px; padding: 16px; box-shadow: none; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow var(--dur) var(--ease-out); }
.pa-pcard:hover { box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); }
.pa-pc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pa-pc-name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-pc-meta { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pa-pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pa-pc-stat { background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; }
.pa-pc-stat .v { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }
.pa-pc-stat .l { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.pa-pc-goal { display: flex; align-items: center; gap: 8px; }
.pa-pc-goal .bar { flex: 1; height: 6px; border-radius: 999px; overflow: hidden; background: var(--select); }
.pa-pc-goal .bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
[data-theme="dark"] .pa-pc-goal .bar > span { background: var(--text); }
.pa-pc-goal .pg { font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* — Aktivitäts-Heatmap (Navy-Stufen statt Gold) — */
.pa-heat { overflow-x: auto; }
.pa-heat table { border-collapse: separate; border-spacing: 4px; }
.pa-heat td, .pa-heat th { padding: 0; border: 0; }
.pa-heat th { padding: 2px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.pa-heat tbody tr:hover td { background: transparent; }
.pa-heat .hname { padding-right: 10px; text-align: left; white-space: nowrap; font-size: 14px; color: var(--text-muted); }
.pa-hc { width: 32px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.pa-hc.h0 { background: var(--surface-2); color: var(--text-muted); }
.pa-hc.h1 { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--text); }
.pa-hc.h2 { background: color-mix(in srgb, var(--primary) 50%, transparent); color: var(--text); }
.pa-hc.h3 { background: var(--primary); color: var(--on-primary); }
.pa-hc.h4 { background: var(--green); color: var(--on-status); }
/* — Datei-Export unter einer Liste (nlExport in base.html) — */
.nl-export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 4px 2px; margin-top: 10px; border-top: 1px solid var(--hairline); }
.nl-export-t { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
.nl-export .fc { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.nl-export-sub { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.nl-export .is-busy, .topbar-actions .is-busy { opacity: 0.55; pointer-events: none; }
/* — Auto-Speichern (form.auto-save, Skript in base.html): Status als Zeile im Fluss, Punkt + Wort — */
.autosave-status {
    order: 99; flex: 1 0 100%; grid-column: 1 / -1;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted);
}
.autosave-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--as-dot, var(--text-soft)); }
.autosave-status[hidden] { display: none; }
/* — Passwort ändern (Einstellungen + Profil) — */
.pa-pw-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pa-pw-form input[type="password"] { flex: 1 1 170px; min-width: 0; font-size: 16px; }
/* — Vorschläge (Bestand revo-*: vorschlag, admin_vorschlaege, admin_tagesaktion, webhook_setup) — */
.revo-list { display: flex; flex-direction: column; }
.revo-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; }
.revo-item:last-child { border-bottom: 0; }
.revo-item-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--select); color: var(--text-muted); font-size: 13px; font-weight: 600; }
.revo-item-ic.gold, .revo-item-ic.green, .revo-item-ic.red { background: var(--select); color: var(--text); }
.revo-item-name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.revo-item-sub { font-size: 14px; line-height: 20px; color: var(--text-muted); margin-top: 1px; }
.revo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-muted); }
.revo-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-soft)); }
.revo-pill.on { --dot: var(--green); }
.revo-pill.off { --dot: var(--red); }
.revo-pill.warn { --dot: var(--amber); }
.revo-section-h { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-muted); }
.revo-section-h a { font-size: 14px; color: var(--link); font-weight: 600; text-decoration: none; }
/* — Bestand Umsatzliste/Termine/Cockpit: Vorlagen-Zeilen — */
.pa-r-title + .pa-r-sub { margin-top: 0; }
@media (max-width: 1150px) { .pa-stat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pa-stat-tiles { gap: 10px; } }

/* ═══ 7 · BEWEGUNG (≤ 0,6 s, einmal; Seitenübergänge verbinden dieselbe Sache) ═══ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-sheet); }
::view-transition-group(root) { animation-duration: .18s; }
@supports (view-transition-class: x) { .content { animation: none; } }  /* nur Cross-Document-VT-Browser (Chrome 125+/Safari 18.2+) */
@keyframes pa-grow { from { transform: scaleX(0); } }
.ck-spark i, .sz-bar i, .ck-mtrack .fill { transform-origin: left center; animation: pa-grow var(--dur-chart) var(--ease-out) both; }
a.ck-kpi, a.ck-struktur, a.sz-strang, .ck-a { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease-out); }
a.ck-kpi:active, a.ck-struktur:active, a.sz-strang:active, .ck-a:active { transform: scale(.97); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes slideDownBanner { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulseGold { 0%, 100% { box-shadow: 0 0 0 0 var(--gold-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ═══ 8 · AUFFANGREGELN für style=-Attribute (Ausnahme 2, Abbau in Welle 4) ═══
   Fangen fest verdrahtete Inline-Farben ab. Erst löschen, wenn grep keinen Treffer mehr hat. */
/* Übergangsregeln (Ausnahme 5): Gold als Textfarbe → --gold-text, Navy-Text im Dunkeln → --text.
   Nur echte „color:"-Angaben (am Anfang oder nach ;/Leerzeichen), nicht border-/background-color. */
[style^="color:var(--gold)"], [style*=";color:var(--gold)"], [style*="; color:var(--gold)"], [style*=" color:var(--gold)"],
[style^="color: var(--gold)"], [style*=";color: var(--gold)"], [style*="; color: var(--gold)"], [style*=" color: var(--gold)"],
[style^="color:var(--gold-light)"], [style*=";color:var(--gold-light)"], [style*="; color:var(--gold-light)"], [style*=" color:var(--gold-light)"] {
    color: var(--gold-text) !important;
}
[data-theme="dark"] [style^="color:var(--navy)"], [data-theme="dark"] [style*=";color:var(--navy)"], [data-theme="dark"] [style*="; color:var(--navy)"], [data-theme="dark"] [style*=" color:var(--navy)"],
[data-theme="dark"] [style^="color: var(--navy)"], [data-theme="dark"] [style*=";color: var(--navy)"], [data-theme="dark"] [style*="; color: var(--navy)"], [data-theme="dark"] [style*=" color: var(--navy)"] {
    color: var(--text) !important;
}
/* Weiße Verläufe/Flächen im Dunkeln → Fläche */
[data-theme="dark"] [style*="linear-gradient(135deg,#fff"],
[data-theme="dark"] [style*="linear-gradient(135deg, #fff"],
[data-theme="dark"] [style*="linear-gradient(135deg,#ffffff"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #fff"] { background: var(--surface) !important; }
[data-theme="dark"] [style*="background:#faf6ec"],
[data-theme="dark"] [style*="background: #faf6ec"],
[data-theme="dark"] [style*="linear-gradient(135deg,#fff,#faf6ec"],
[data-theme="dark"] [style*="linear-gradient(135deg, #fff 0%, #faf6ec"],
[data-theme="dark"] [style*="linear-gradient(135deg,#fff 0%,#faf6ec"] { background: var(--gold-soft) !important; }
[data-theme="dark"] [style*="background:#fef3e7"],
[data-theme="dark"] [style*="background: #fef3e7"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background:#fef9c3"],
[data-theme="dark"] [style*="background:#fef0ee"] { background: var(--amber-soft) !important; }
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background:#ecfdf3"],
[data-theme="dark"] [style*="background:#dcfce7"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background:#fce7f3"],
[data-theme="dark"] [style*="background:#f3e8ff"],
[data-theme="dark"] [style*="background:#f4eefb"] { background: var(--select) !important; }
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="color:#3a1f10"],
[data-theme="dark"] [style*="color:#5a3a26"],
[data-theme="dark"] [style*="color:#1a0f08"],
[data-theme="dark"] [style*="color:#2a1810"],
[data-theme="dark"] [style*="color:#3d2818"],
[data-theme="dark"] [style*="color:#0a0e1a"],
[data-theme="dark"] [style*="color: #0a0e1a"],
[data-theme="dark"] [style*="color:#08101f"] { color: var(--text) !important; }
/* Navy-Verlauf-Karten im Hellen → helle Fläche (flach) */
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"],
[data-theme="light"] [style*="linear-gradient(135deg, #0f1c3f"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"],
[data-theme="light"] [style*="linear-gradient(135deg, #1a2c5b"],
[data-theme="light"] [style*="background:#0f1c3f"],
[data-theme="light"] [style*="background: #0f1c3f"],
[data-theme="light"] [style*="background:#1a2c5b"],
[data-theme="light"] [style*="background: #1a2c5b"],
[data-theme="light"] [style*="background:#0a132d"],
[data-theme="light"] [style*="background:#243059"] {
    background: var(--surface) !important; color: var(--text) !important; border: 0 !important;
}
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"] [style*="color:rgba(255"],
[data-theme="light"] [style*="linear-gradient(135deg, #0f1c3f"] [style*="color:rgba(255"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"] [style*="color:rgba(255"],
[data-theme="light"] [style*="background:#0f1c3f"] [style*="color:rgba(255"],
[data-theme="light"] [style*="background:#1a2c5b"] [style*="color:rgba(255"],
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"] [style*="color: rgba(255"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"] [style*="color: rgba(255"] { color: var(--text-muted) !important; }
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"] [style*="color:#fff"],
[data-theme="light"] [style*="linear-gradient(135deg, #0f1c3f"] [style*="color:#fff"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"] [style*="color:#fff"],
[data-theme="light"] [style*="background:#0f1c3f"] [style*="color:#fff"],
[data-theme="light"] [style*="background:#1a2c5b"] [style*="color:#fff"],
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"] [style*="color: #fff"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"] [style*="color: #fff"] { color: var(--text) !important; }
[data-theme="light"] [style*="linear-gradient(135deg,#0f1c3f"] [style*="border:1px solid rgba(255"],
[data-theme="light"] [style*="linear-gradient(135deg,#1a2c5b"] [style*="border:1px solid rgba(255"],
[data-theme="light"] [style*="background:#0f1c3f"] [style*="border:1px solid rgba(255"],
[data-theme="light"] [style*="background:#1a2c5b"] [style*="border:1px solid rgba(255"] { border-color: var(--hairline) !important; background: var(--surface-2) !important; }
[data-theme="light"] [style*="background:#1a2c5b;display"],
[data-theme="light"] [style*="background: #1a2c5b;display"] { background: var(--surface-2) !important; }
[data-theme="light"] [style*="background:rgba(0,0,0,0.25)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.25)"] { background: var(--surface-2) !important; color: var(--text) !important; }
/* Weiße Felder/Flächen im Dunkeln */
[data-theme="dark"] input[style*="background:#fff"],
[data-theme="dark"] input[style*="background: #fff"],
[data-theme="dark"] textarea[style*="background:#fff"],
[data-theme="dark"] select[style*="background:#fff"] { background: var(--surface-2) !important; color: var(--text) !important; }
[data-theme="dark"] [style*="border:1px solid #e0e3e8"],
[data-theme="dark"] [style*="border: 1px solid #e0e3e8"],
[data-theme="dark"] [style*="border:1.5px solid #e2e8f0"],
[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
[data-theme="dark"] [style*="border:1.5px solid #e8d59a"],
[data-theme="dark"] [style*="border:1px solid #c9eed7"],
[data-theme="dark"] [style*="border: 1px solid #c9eed7"],
[data-theme="dark"] [style*="border:1px solid #f5d4a0"],
[data-theme="dark"] [style*="border:1px solid #e8d59a"],
[data-theme="dark"] [style*="border:1px solid #ebeef4"],
[data-theme="dark"] [style*="border: 1px solid #ebeef4"],
[data-theme="dark"] [style*="border:1px solid #d1d5dc"],
[data-theme="dark"] [style*="border: 1px solid #d1d5dc"],
[data-theme="dark"] [style*="border:1px solid #f0f0f0"],
[data-theme="dark"] [style*="border:1px solid #e5e8ee"] { border-color: var(--hairline) !important; }
[data-theme="dark"] [style*="background:#fff"]:not([style*="rgba"]):not([style*="rgb("]),
[data-theme="dark"] [style*="background: #fff"]:not([style*="rgba"]):not([style*="rgb("]),
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff;border"]:not([style*="rgba"]) { background: var(--surface) !important; }
[data-theme="dark"] [style*="background:#fafbfc"],
[data-theme="dark"] [style*="background: #fafbfc"],
[data-theme="dark"] [style*="background:#fafbff"],
[data-theme="dark"] [style*="background:#f6f7fb"],
[data-theme="dark"] [style*="background: #f6f7fb"],
[data-theme="dark"] [style*="background:#fbfcfe"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f5f5f7"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"] { background: var(--surface-2) !important; }
[data-theme="dark"] [style*="color:#000"]:not([style*="rgba"]),
[data-theme="dark"] [style*="color: #000"]:not([style*="rgba"]),
[data-theme="dark"] [style*="color:#000000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#0f1c3f"],
[data-theme="dark"] [style*="color: #0f1c3f"],
[data-theme="dark"] [style*="color:#1a1f36"],
[data-theme="dark"] [style*="color: #1a1f36"],
[data-theme="dark"] [style*="color:#1a2c5b"],
[data-theme="dark"] [style*="color: #1a2c5b"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0a132d"] { color: var(--text) !important; }
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] { color: var(--text-muted) !important; }
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"] { color: var(--text-soft) !important; }
[data-theme="dark"] [style*="color:#7a5c1a"],
[data-theme="dark"] [style*="color: #7a5c1a"],
[data-theme="dark"] [style*="color:#7a3d0a"] { color: var(--gold-text) !important; }
[data-theme="dark"] [style*="background:linear-gradient(135deg,#fff,#faf6ec)"],
[data-theme="dark"] [style*="background:linear-gradient(135deg, #fff 0%, #faf6ec 100%)"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #fff 0%, #faf6ec 100%)"] { background: var(--gold-soft) !important; }
[data-theme="dark"] [style*="background:linear-gradient(135deg,#fff,#fef3e7)"],
[data-theme="dark"] [style*="background:linear-gradient(135deg, #fff, #fef3e7)"] { background: var(--amber-soft) !important; }
[data-theme="dark"] [style*="background:linear-gradient(135deg,#fff,#ecfdf3)"] { background: var(--green-soft) !important; }
[data-theme="dark"] tr[style*="background:var(--gold-soft)"] { background: var(--gold-soft) !important; }
/* Gold-Text auf Gold-Fläche im Hellen → dunkles Gold */
:root:not([data-theme="dark"]) [style*="background:rgba(212,168,67"] [style*="color:#f0c970"],
:root:not([data-theme="dark"]) [style*="background:rgba(212,168,67"] [style*="color:#d4a843"] { color: var(--gold-text) !important; }
/* Hero-Inhalte, die eine dunkle Fläche annehmen (weiß/halbtransparent) → im Hellen lesbar */
:root:not([data-theme="dark"]) .pa-hero a[style*="rgba(255,255,255"],
:root:not([data-theme="dark"]) .pa-hero button[style*="rgba(255,255,255"] { background: var(--select) !important; color: var(--text) !important; border-color: var(--hairline) !important; }
:root:not([data-theme="dark"]) .pa-hero [style*="color:rgba(255,255,255"] { color: var(--text-muted) !important; }
:root:not([data-theme="dark"]) .pa-hero [style*="color:#fff"],
:root:not([data-theme="dark"]) .pa-hero [style*="color: #fff"],
:root:not([data-theme="dark"]) .pa-hero [style*="color:#ffffff"] { color: var(--hero-text) !important; }

/* ═══ 9 · HANDY (≤ 768 px) + TREFFERFLÄCHEN ═══════════════════════════════ */
/* Alles Antippbare ≥ 44×44 px unter 768 px oder bei grobem Zeiger (Spec C „Trefferflächen") */
@media (max-width: 768px), (pointer: coarse) {
    :where(.btn, button, a.action, input[type="submit"]) { min-height: 44px; }
    .btn-sm { min-height: 36px; }
    .nav-link { min-height: 44px; font-size: 16px; line-height: 22px; }
    .nav-group > summary { min-height: 44px; }
    .tb-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
    .tb-icon-btn svg { width: 22px; height: 22px; }
    .tb-avatar { width: 44px; height: 44px; }
    .sb-footlinks { gap: 0 4px; }
    .sb-footlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
    .pa-more-seg button { min-width: 44px; }
}
@media (min-width: 769px) and (pointer: fine) {
    .btn { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
    .btn-sm { min-height: 32px; padding: 0 10px; font-size: 14px; border-radius: 8px; }
    .btn-sm::after { inset: 0; }
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([type="hidden"])),
    :where(select) { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .content { padding: 24px; }
    :where(.main) > .topbar { padding: env(safe-area-inset-top, 0px) 24px 0; }
}
@media (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior: smooth; }
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }   /* Leiste 64 + 12 Luft (Kreis ragt 16 darüber, .content hat 24 unten) */
    h1 { font-size: 22px; line-height: 28px; }
    label { font-size: 15px; line-height: 20px; color: var(--text); }
    .pa-large-title { font-size: 30px; line-height: 36px; margin-top: 0; }

    /* Sidebar = Schublade */
    .sidebar {
        width: min(320px, 86vw); transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease-sheet);
    }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-2); }
    .sidebar-backdrop.is-open { display: block; }
    .sidebar-close { display: inline-flex; }
    .nav-group > summary, .nav-admin-label { font-size: 14px; line-height: 20px; }
    /* Informationen am Handy nie unter 14 px (Footnote 13 nur Desktop) */
    .sb-user-stufe, .sb-footlinks, .nav-badge, .status-badge, .pa-legend span, .nl-export-t, .nl-export-sub, .nl-export .fc,
    .pa-hero-chip, .pa-search-grp, .pa-trophy-c, .pa-pc-goal .pg, .pa-tier-count, .revo-pill, .revo-section-h, .ck-klabel,
    .pa-modal-k, .prodeh-t { font-size: 14px; line-height: 20px; }
    .main { margin-left: 0; }

    /* Topbar: [Menü 44][Titel ≥ 200 px][Suche 44][… 44] */
    :where(.main) > .topbar {
        height: calc(52px + env(safe-area-inset-top, 0px)); gap: 8px;
        padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    }
    .hamburger-btn { display: inline-flex; margin-left: -8px; }
    .topbar-actions { gap: 8px; margin-right: -8px; }
    .tb-desk, .tb-page-actions { display: none; }
    .tb-more { display: inline-flex; }
    .tb-menu { display: none; }

    .content {
        padding: 16px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
    }
    .card { padding: 16px; margin-bottom: 12px; }
    .pa-hero, .pa-stage { padding: 20px; }
    .pa-hero-chip { position: static; margin-bottom: 12px; }
    .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ck-kpis { gap: 10px; }
    .pa-row { min-height: 52px; }
    .pa-crit-list { grid-template-columns: 1fr; }
    pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

    /* Tab-Leiste (Najib 02.10.: „pragmatischer, kräftiger, strammer"). Außenmaß = --tabbar-h (64) + Safe Area —
       dieselbe Rechnung wie termin_form/termin_outcome_modal. Unten mind. 8 px (Geräte ohne Home-Balken),
       sonst genau der Home-Balken. Hell --surface + weicher Schatten, dunkel --surface-2 + Haarlinie. */
    .mobile-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 max(4px, env(safe-area-inset-right, 0px)) max(env(safe-area-inset-bottom, 0px), 8px) max(4px, env(safe-area-inset-left, 0px));
        background: var(--surface); border-top: 1px solid var(--hairline); box-shadow: var(--shadow-bar);
    }
    [data-theme="dark"] .mobile-tabbar { background: var(--surface-2); }
    /* Zelle = Trefferfläche (≥ 78 × 56 px). Oben 6 px, Kapsel 32, 3 px, Beschriftung 16 → alle Wörter auf einer Linie */
    .mobile-tabbar .mt-item {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
        min-width: 0; min-height: 48px; padding: 6px 2px 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
        color: var(--text-muted); text-decoration: none; font-family: inherit; -webkit-appearance: none; appearance: none;
        touch-action: manipulation; user-select: none; -webkit-user-select: none;
        transition: color var(--dur-fast) var(--ease-out);
    }
    .mobile-tabbar .mt-item:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; border-radius: 12px; }
    .mobile-tabbar .mt-icon {
        width: 56px; height: 32px; flex: none; border-radius: 16px;
        display: flex; align-items: center; justify-content: center;
        transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    .mobile-tabbar .mt-icon svg { width: 25px; height: 25px; stroke-width: 2; }
    .mobile-tabbar .mt-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
    /* Aktiv: --text + ruhige Kapsel hinter dem Icon (aria-current steht im Template) · Tipp: dieselbe Kapsel */
    .mobile-tabbar .mt-item.is-active { color: var(--text); }
    .mobile-tabbar .mt-item.is-active .mt-icon,
    .mobile-tabbar .mt-item:not(.mt-add).is-pressed .mt-icon,
    .mobile-tabbar .mt-item:not(.mt-add):active .mt-icon { background: var(--select); }
    /* „Eintragen": 56-px-Kreis --primary mit weißem + (28 px, Strich 2,5), ragt 16 px über die Leiste.
       Flusshöhe wie die Kapsel (−22 / −2 px) → „Eintragen" steht auf derselben Linie wie die anderen Wörter. */
    .mobile-tabbar .mt-item.mt-add { color: var(--text-muted); }
    .mobile-tabbar .mt-item.mt-add .mt-icon {
        width: 56px; height: 56px; border-radius: 50%; margin: -22px 0 -2px;
        background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-fab);
    }
    .mobile-tabbar .mt-item.mt-add .mt-icon svg { width: 28px; height: 28px; stroke-width: 2.5; stroke: var(--on-primary); }
    .mobile-tabbar .mt-item.mt-add:active .mt-icon,
    .mobile-tabbar .mt-item.mt-add.is-pressed .mt-icon { transform: scale(.96); }
    .mobile-tabbar .mt-item.mt-add:focus-visible { outline: none; }
    .mobile-tabbar .mt-item.mt-add:focus-visible .mt-icon { outline: 2px solid var(--link); outline-offset: 3px; }

    /* Blatt = Bottom-Sheet, Radius 20 oben, 320 ms */
    .pa-entry {
        width: 100%; max-width: 100%; max-height: calc(100% - 24px - env(safe-area-inset-top, 0px)); margin: auto 0 0;
        border-radius: 20px 20px 0 0; box-shadow: none;
    }
    .pa-entry[open] { animation: pa-sheet-up var(--dur-slow) var(--ease-sheet); }
    @keyframes pa-sheet-up { from { transform: translateY(100%); } }
    .pa-entry-in { padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .pa-entry-grid { grid-template-columns: 1fr; }
    .pa-modal { align-items: flex-end; padding: 0; }
    .pa-modal-card { max-width: 100%; max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px)); border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: pa-sheet-up var(--dur-slow) var(--ease-sheet); }
    .pa-search { align-items: flex-start; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }
    .pa-search-card { border-radius: 16px; }
    .pa-search-foot { display: none; }

    /* Toasts/Einblendungen über der Tab-Leiste (64) UND dem Eintragen-Kreis (ragt bis 80) */
    .pa-toasts { left: 16px; right: 16px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
    .pa-banner { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
    #tourCard { left: 16px; right: 16px; width: auto; max-width: none; transform: none; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

    /* Tabellen → gruppierte Liste (nur Bildschirm) */
    .pa-stat-tiles { grid-template-columns: repeat(2, 1fr); }
    .pa-fn-label { width: 88px; }
    .pa-modebar { padding: 8px 16px; }
    .prodeh-form input { flex: 1 1 120px; }
}
@media screen and (max-width: 768px) {
    .table-wrap { overflow-x: visible; background: var(--surface); border-radius: 14px; }
    .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
    .table-wrap table { width: 100%; min-width: 0; margin: 0; }
    .table-wrap thead { position: absolute; left: -9999px; }   /* Spaltenköpfe für Screenreader */
    .table-wrap tbody tr { position: relative; padding: 12px 16px; margin: 0; border: 0; background: transparent; }
    .table-wrap tbody tr:not(:last-child)::after { content: ""; position: absolute; left: 16px; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
    .table-wrap tr[hidden], .table-wrap td[hidden] { display: none; }
    .table-wrap td {
        padding: 2px 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: normal;
        font-size: 14px; line-height: 20px; color: var(--text-muted);
    }
    .table-wrap td:first-child { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
    .table-wrap td[data-label]:not(:first-child) { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--text); }
    .table-wrap td[data-label]:not(:first-child)::before { content: attr(data-label); margin-right: auto; color: var(--text-muted); font-weight: 400; }
    .table-wrap tbody tr:hover td { background: transparent; }
    /* Auffangregeln (Ausnahme 2): Inline-Zellformate dürfen die Liste nicht sprengen */
    .table-wrap td[style*="white-space"] { white-space: normal !important; }
    .table-wrap td[style*="border"] { border: 0 !important; }
    .table-wrap td[style*="text-align"]:not([data-label]) { text-align: left !important; }
    /* iOS zoomt in Felder < 16 px — auch bei Inline-Größen */
    input[style*="font-size"], select[style*="font-size"], textarea[style*="font-size"] { font-size: 16px !important; }
    .form-grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    [style*="grid-template-columns:repeat(auto-fit,minmax(280px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(220px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(140px,1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
    /* Knopfreihen mit Inline-„flex-end" (ohne Umbruch) liefen am Handy links aus dem Bild → umbrechen */
    [style*="display:flex"][style*="justify-content:flex-end"] { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ═══ 9b · ATMOSPHÄRE (06.10.) — Licht hinter dem CRM, Tiefe, Mikro-Bewegung ═══
   Najib: „Hintergrund hinter dem CRM, nicht so trocken, Details wichtig". Rein dekorativ:
   Flächen bleiben --surface (Kontraste unverändert), Werte nur aus tokens.css (--atmo-*, --elev-*). */
body { background: transparent; }                       /* html trägt --bg; sonst deckt body die Lichtebene zu */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
    background:
        radial-gradient(75vw 70vh at 95% -10%, var(--atmo-glow-a), transparent 72%),
        radial-gradient(70vw 75vh at 22% -12%, var(--atmo-glow-b), transparent 72%),
        radial-gradient(90vw 60vh at 60% 110%, var(--atmo-glow-c), transparent 72%),
        radial-gradient(circle at 1px 1px, var(--atmo-dot) 1px, transparent 1.4px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.8) 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.8) 100%);
}
body::after {                                            /* feines Papierkorn statt Plastik-Fläche */
    opacity: var(--atmo-grain); mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--gold-soft); color: var(--text); }

/* Sidebar lässt das Licht durch (nur Desktop — <769 px bleibt sie massiv, Blur ist dort ohnehin aus) */
@media (min-width: 769px) {
    .sidebar { background: color-mix(in srgb, var(--bg-2) 55%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15); }
}

/* Navy-Kopfband (06.10.): Topbar ist auf jeder Seite Navy. Seiten mit Large Title bekommen das Band
   bis unter den Titel (base.html: .pa-band um den Block) — Topbar dort durchsichtig, bis gescrollt wird.
   Im Band nur Bühnen-Farben (--on-stage / --stage-muted, wie .pa-stage → gleiche Kontraste). */
.main { overflow-x: clip; }
:where(.main) > .topbar, :where(.main) > .topbar.is-scrolled {
    background: var(--band); border-bottom-color: transparent; color: var(--on-stage);
    transition: background-color var(--dur) var(--ease-out);
}
@media (min-width: 769px) {
    :where(.main) > .topbar.is-scrolled { background: color-mix(in srgb, var(--band) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
}
:where(.main) > .topbar.has-lt:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar .topbar-title, .topbar .tb-icon-btn, .topbar .hamburger-btn { color: var(--on-stage); }
.topbar .tb-icon-btn:hover, .topbar .hamburger-btn:hover { background: color-mix(in srgb, var(--on-stage) 12%, transparent); }
.topbar .tb-avatar { background: color-mix(in srgb, var(--on-stage) 14%, transparent); color: var(--on-stage); }
.topbar .tb-avatar:hover { background: color-mix(in srgb, var(--on-stage) 22%, transparent); }
.topbar .btn-primary { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); background-image: none; }
.topbar .btn-primary:hover { background: color-mix(in srgb, var(--on-stage) 88%, var(--stage)); }
.topbar .btn-secondary, .topbar .btn-ghost, .topbar:not(.tb-collapsed) .topbar-actions:has(.tb-page-actions :is(.btn-primary, .btn-gold)) .tb-entry {
    background: color-mix(in srgb, var(--on-stage) 12%, transparent); border-color: transparent; color: var(--on-stage);
}
.topbar .tb-menu { color: var(--text); }

.pa-band { position: relative; color: var(--on-stage); padding: 4px 0 28px; margin-bottom: 24px; }
.pa-band::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -480px; bottom: 0; left: -100vw; right: -100vw;
    background-color: var(--band);
    background-image:
        radial-gradient(40vw 340px at 85% 100%, var(--band-glow), transparent 70%),
        radial-gradient(45vw 420px at 20% 30%, var(--band-glow-2), transparent 70%),
        repeating-linear-gradient(118deg, color-mix(in srgb, var(--on-stage) 4%, transparent) 0 1px, transparent 1px 22px);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 35%, transparent);
}
.pa-band .pa-large-title, .pa-band h1 { color: var(--on-stage); margin-bottom: 0; }
.main .pa-band :is(p, small, .pa-large-title-sub, [class*="-sub"], [class*="-meta"]) { color: var(--stage-muted); }
.pa-band a:not(.btn) { color: var(--on-stage); }
.pa-band .btn-secondary, .pa-band .btn-ghost { background: color-mix(in srgb, var(--on-stage) 12%, transparent); border-color: transparent; color: var(--on-stage); }
.pa-band .btn-primary { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); background-image: none; }
.pa-band .pa-seg { background: color-mix(in srgb, var(--on-stage) 12%, transparent); }
.pa-band .pa-seg a, .pa-band .pa-seg button { color: var(--stage-muted); }
.pa-band .pa-seg .on, .pa-band .pa-seg [aria-current="page"] { background: var(--on-stage); color: var(--stage); }
/* Cockpit: die erste Karte überlappt das Band (Banking-App-Kante) */
.pa-band:has(.ck-lt) { padding-bottom: 76px; margin-bottom: -52px; }
.pa-band:has(.ck-lt) + * { position: relative; }
@media (max-width: 768px) {
    .pa-band { padding-bottom: 24px; }
    .pa-band:has(.ck-lt) { padding-bottom: 64px; margin-bottom: -44px; }
}

/* Karten-Köpfe mit Icon-Kapsel (Cockpit; für weitere Karten wiederverwendbar) */
.pa-hic {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px;
    color: var(--link); background: linear-gradient(135deg, color-mix(in srgb, var(--link) 16%, transparent), color-mix(in srgb, var(--link) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 14%, transparent);
}
.pa-hic svg { width: 17px; height: 17px; }
.ck .ck-card-head, .ck .ck-fk-head { gap: 10px; }
.ck .ck-card-head > .ck-h, .ck .ck-fk-head > .ck-h { margin-right: auto; }
.ck-monat.is-reached .pa-hic { color: var(--gold-text); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }

/* Lebendige Zahlen: Ring mit weichem Schatten */
.pa-ring-fill { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--link) 35%, transparent)); }
.pa-ring.is-reached .pa-ring-fill, .is-reached .pa-ring-fill { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 60%, transparent)); }

/* Flächen: eine Erhebung für alle Karten-Arten (vorher flach + randlos) */
.card, .pa-card, .ck-card, .kpi-card, .ck-kpis, .table-wrap, .pa-career, .pa-kpi, .pa-stat-tile, .pa-pcard,
.prodeh, .pa-deintag, .ck .ck-card, .ck .ck-row, .ck .ck-kpis { box-shadow: var(--elev-card); }
.ck .ck-kpi, .ck-kpis .ck-kpi { box-shadow: none; }
:is(a.card, a.pa-card, a.ck-card, .pa-pcard, .pa-kpi, .ck a.ck-card, .ck .ck-row) {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    :is(a.card, a.pa-card, a.ck-card, .pa-pcard, .pa-kpi, .ck a.ck-card, .ck .ck-row):hover { transform: translateY(-2px); box-shadow: var(--elev-hover); }
}

/* Bühne: Licht + feine Linien statt flachem Navy-Block */
.pa-stage {
    isolation: isolate; box-shadow: var(--stage-shadow);
    background-image:
        radial-gradient(70% 120% at 100% 0%, var(--stage-glow), transparent 60%),
        radial-gradient(60% 120% at 0% 100%, var(--stage-glow-2), transparent 60%);
}
.pa-stage::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(118deg, color-mix(in srgb, var(--on-stage) 8%, transparent) 0 1px, transparent 1px 18px);
    -webkit-mask-image: radial-gradient(80% 140% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(80% 140% at 100% 0%, #000, transparent 70%);
}

/* Knöpfe: leichter Glanz oben + Schatten, Hover hebt minimal an */
.btn-primary, .btn-gold, .mobile-tabbar .mt-item.mt-add .mt-icon { box-shadow: var(--elev-btn); }
.btn-primary, .btn-gold { background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%); }
.btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover, .btn-gold:hover { transform: translateY(-1px); }
}

/* Sidebar: aktiver Punkt bekommt einen weichen Schein */
.nav-link.active { box-shadow: inset 0 0 0 1px var(--border-soft); }
.nav-link.active::before { box-shadow: 0 0 0 3px var(--gold-soft); }

/* Seiteneinstieg: Blöcke kommen gestaffelt (≤ 0,4 s; reduzierte Bewegung → aus, s. Ausnahme 6) */
@keyframes pa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
:is(.content, .content > .ck) > :not(dialog, script, style, template, [hidden], .pa-entry, .pa-modal, .ck) {
    animation: pa-rise 360ms var(--ease-out) both;
}
:is(.content, .content > .ck) > :nth-child(2) { animation-delay: 30ms; }
:is(.content, .content > .ck) > :nth-child(3) { animation-delay: 60ms; }
:is(.content, .content > .ck) > :nth-child(4) { animation-delay: 90ms; }
:is(.content, .content > .ck) > :nth-child(5) { animation-delay: 120ms; }
:is(.content, .content > .ck) > :nth-child(n+6) { animation-delay: 150ms; }
.content { animation: none; }

@media print { body::before, body::after, .pa-stage::before, .pa-band::before { display: none; } .pa-stage { box-shadow: none; } .pa-band, .pa-band * { color: var(--text) !important; } }

/* Ausnahme 1: kein backdrop-filter unter 768 px — fängt auch Inline-Blur ab */
@media (max-width: 768px) { *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }
/* Ausnahme 6: reduzierte Bewegung — Übergänge 1 ms, kein Count-up (JS), keine View Transitions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
    button:active, .btn:active, [role="button"]:active { transform: none; }
    .is-busy::after, .pa-ptr.is-loading .pa-ptr-spin { animation: none; }
    .pa-trophy-ic.is-burst::after { animation: none; }
}

/* ═══ 10 · DRUCK — Tokens hell (tokens.css: Dunkel nur @media screen), ohne Sidebar/Tab-Leiste ═══ */
@media print {
    .sidebar, .sidebar-backdrop, .mobile-tabbar, .topbar-actions, .hamburger-btn, .pa-toasts, .pa-ptr,
    #appSplash, .pa-entry, .prodeh, #inactiveBanner, .pa-banner, .pa-modebar, .skip-link { display: none; }
    body { padding: 0; background: var(--surface); }
    .main { margin-left: 0; }
    :where(.main) > .topbar { position: static; height: auto; padding: 0 0 12px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
    .content { max-width: none; padding: 0; animation: none; }
    .card, .pa-stage, .pa-hero, .table-wrap { break-inside: avoid; }
    .card { content-visibility: visible; }
    a { color: var(--text); }
}