/* =============================================================================
   praxis-theme.css — Farbwelt des Praxis-Verticals ("Green Juice")

   Palette:      #4CBB17 (Hellgruen/Akzent)   #437F28 (Primaer, AA: 4,88:1 zu Weiss)
                 #39542C (Dunkelgruen/Hover)  #293325 (Tiefgruen/Text/Nav)

   Wirkungsweise: ueberschreibt die globalen CURAIQ-Brand-Tokens (--cq-*, --bs-*)
   fuer alle Elemente unterhalb von body.theme-praxis. Die Klasse setzt das
   Layout automatisch, sobald das Arztpraxis-Vertical aktiv ist (eingeloggt:
   TenantCategory=ARZTPRAXIS; anonym: praxis.curaiq.app). Pflege-Tenants und
   alle anderen Bereiche bleiben unveraendert Navy/Teal.

   Dark Mode (Audit P1-1): curaiq-darkmode.css setzt die Tokens auf
   :root[data-cq-theme="dark"]. Damit die hellen Praxis-Tokens die Dark-Tokens
   nicht ueberschreiben, ist JEDE Regel hier auf
   :root:not([data-cq-theme="dark"]) gescoped (Light-Guard). _AuthLayout setzt
   data-cq-theme genauso wie _Layout; fuer die Login-Seite im Dark Mode gibt
   es einen eigenen Block nach den Auth-Light-Regeln. Fuer den Dark Mode der
   App gibt es am Dateiende einen bewusst schmalen Akzent-Block (helleres
   Gruen statt Cyan).
   ============================================================================= */

:root:not([data-cq-theme="dark"]) body.theme-praxis {
    /* Brand-Tokens (site.css) */
    --cq-brand-dark: #293325;
    --cq-brand-teal: #48872B;
    --cq-brand-teal-light: #4CBB17;
    --cq-brand-teal-pale: #CDEBB8;
    --cq-brand-bg: #F4F7F1;

    /* Surfaces & Backgrounds */
    --cq-bg: #F4F7F1;
    --cq-bg-2: #EAF0E4;

    /* Text */
    --cq-text: #293325;
    --cq-text-soft: #33402E;
    --cq-muted: #56624F;
    --cq-muted-2: #6B7763;

    /* Primary — #437F28 statt #48872B (Audit P1-2): Weiss auf #48872B lag bei
       4,40:1 und verfehlte AA; Weiss auf #437F28 = 4,88:1. */
    --cq-primary: #437F28;
    --cq-primary-strong: #39542C;
    --cq-primary-soft: #E4F2D8;
    --cq-primary-soft-2: rgba(72, 135, 43, 0.14);
    --cq-accent: #4CBB17;

    /* Borders & Shadows (auf Tiefgruen abgestimmt) */
    --cq-border: rgba(41, 51, 37, 0.12);
    --cq-border-strong: rgba(41, 51, 37, 0.22);
    --cq-shadow-sm: 0 8px 24px rgba(41, 51, 37, 0.06);
    --cq-shadow-md: 0 14px 40px rgba(41, 51, 37, 0.10);
    --cq-shadow-lg: 0 22px 60px rgba(41, 51, 37, 0.16);

    /* Bridge-Tokens (curaiq-bootstrap-bridge.css) */
    --cq-primary-600: #39542C;
    --cq-primary-50: #EEF6E6;
    --cq-brand-dark-soft: #39542C;
    --cq-border-soft: rgba(41, 51, 37, 0.06);
    --cq-bg-soft: rgba(41, 51, 37, 0.025);
    --cq-shadow-card: 0 1px 2px rgba(41, 51, 37, 0.04), 0 1px 3px rgba(41, 51, 37, 0.03);
    --cq-shadow-card-hover: 0 2px 8px rgba(41, 51, 37, 0.06), 0 1px 3px rgba(41, 51, 37, 0.04);

    /* Verlaeufe & Fokus (site.css) */
    --cq-gradient-brand: linear-gradient(135deg, #293325 0%, #48872B 100%);
    --cq-gradient-brand-soft: linear-gradient(135deg, rgba(41, 51, 37, 0.04) 0%, rgba(72, 135, 43, 0.10) 100%);
    --cq-focus-ring: 0 0 0 3px rgba(72, 135, 43, 0.4);

    /* Bootstrap-Variablen — Primaer/Success ebenfalls #437F28 (AA, s. o.).
       Link-Hover war #48872B (4,40:1) und ist auf #437F28 (4,88:1) gezogen. */
    --bs-primary: #437F28;
    --bs-primary-rgb: 67, 127, 40;
    --bs-link-color: #39542C;
    --bs-link-hover-color: #437F28;
    --bs-success: #437F28;
    --bs-success-rgb: 67, 127, 40;
    --bs-body-color: #293325;
}

/* Seitenhintergrund: gruener Schimmer statt Teal (site.css body-Gradient) */
:root:not([data-cq-theme="dark"]) body.theme-praxis {
    background: radial-gradient(70rem 40rem at -10% -15%, rgba(76, 187, 23, 0.12), transparent 58%),
                radial-gradient(55rem 34rem at 110% -5%, rgba(72, 135, 43, 0.14), transparent 52%),
                linear-gradient(180deg, #fcfdfb 0%, var(--cq-bg) 40%, var(--cq-bg-2) 100%);
}

/* Feste Teal-Schatten/Fokusringe der Bridge auf Gruen umziehen */
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-primary,
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-success {
    box-shadow: 0 1px 1px rgba(72, 135, 43, 0.10);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-primary:focus,
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-success:focus,
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-primary:focus-visible,
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-success:focus-visible {
    box-shadow: 0 0 0 3px rgba(72, 135, 43, 0.25);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-outline-primary {
    color: #39542C;
    border-color: #437F28;
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .btn-outline-primary:hover {
    background-color: #437F28;
    border-color: #437F28;
    color: #fff;
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .form-check-input:checked {
    background-color: #437F28;
    border-color: #437F28;
}
/* Fokus-Border #48872B statt #4CBB17 (Audit P3-16, SC 1.4.11: 4,40:1 >= 3:1
   statt 2,49:1); der helle Fokus-Ring darf bleiben. */
:root:not([data-cq-theme="dark"]) body.theme-praxis .form-control:focus,
:root:not([data-cq-theme="dark"]) body.theme-praxis .form-select:focus {
    border-color: #48872B;
    box-shadow: 0 0 0 .25rem rgba(76, 187, 23, 0.18);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .badge.text-bg-info {
    background-color: #E4F2D8 !important;
    color: #39542C !important;
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .badge.bg-success,
:root:not([data-cq-theme="dark"]) body.theme-praxis .badge.text-bg-success {
    background-color: #437F28 !important;
    color: #fff !important;
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .nav-pills .nav-link.active {
    background-color: #437F28;
}

/* Seitennavigation: aktive Pille / Hover-Tints auf Gruen (sidenav-v3) */
:root:not([data-cq-theme="dark"]) body.theme-praxis .cq-nav-link.active {
    background: rgba(72, 135, 43, 0.16);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .cq-nav-pin:hover,
:root:not([data-cq-theme="dark"]) body.theme-praxis .cq-nav-pin:focus-visible {
    background: rgba(72, 135, 43, 0.10);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .cq-rail-toggle:hover,
:root:not([data-cq-theme="dark"]) body.theme-praxis .cq-rail-toggle:focus-visible {
    background: rgba(72, 135, 43, 0.08);
}

/* Auth-/Login-Seite (auth.css nutzt eigene --auth-*-Tokens).
   Light-Guard wie ueberall; der Dark-Gegenpart folgt direkt danach. */
:root:not([data-cq-theme="dark"]) body.theme-praxis {
    --auth-brand-dark: #293325;
    --auth-brand-teal: #48872B;
    --auth-brand-light: #4CBB17;
    --auth-text: #293325;
    --auth-border: rgba(41, 51, 37, 0.12);
    --auth-shadow: 0 18px 48px rgba(41, 51, 37, 0.18);
    --auth-shadow-soft: 0 10px 28px rgba(41, 51, 37, 0.08);
    --auth-glow: rgba(76, 187, 23, 0.40);
    --auth-glow-strong: rgba(76, 187, 23, 0.62);
    --auth-aurora-a: rgba(76, 187, 23, 0.45);
    --auth-aurora-b: rgba(72, 135, 43, 0.55);
}

/* Hartkodierte Teal-Verlaeufe/Fokusringe der Auth-Seite auf Gruen umziehen */
:root:not([data-cq-theme="dark"]) body.theme-praxis .auth__right {
    background-image:
        radial-gradient(50rem 32rem at 12% 18%, rgba(76, 187, 23, 0.38), transparent 55%),
        radial-gradient(40rem 28rem at 100% 100%, rgba(72, 135, 43, 0.40), transparent 50%),
        linear-gradient(160deg, #293325 0%, #33402E 60%, #39542C 100%);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .auth__logo,
:root:not([data-cq-theme="dark"]) body.theme-praxis .auth__right img {
    filter: drop-shadow(0 18px 38px rgba(76, 187, 23, 0.28));
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .auth__input:focus {
    box-shadow: 0 0 0 4px rgba(72, 135, 43, 0.18);
}
:root:not([data-cq-theme="dark"]) body.theme-praxis .auth__btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(72, 135, 43, 0.4);
}

/* Auth-/Login-Seite im Dark Mode: _AuthLayout setzt data-cq-theme inzwischen
   (wie _Layout), daher eigener Dark-Block mit dem helleren Praxis-Gruen
   (Werte/Kontraste wie im Dark-Akzent-Block unten: #7BC85A auf #0f172a > 7:1). */
:root[data-cq-theme="dark"] body.theme-praxis {
    --auth-brand-teal: #7BC85A;
    --auth-brand-light: #8FD972;
    --auth-ring: rgba(95, 175, 61, 0.30);
    --auth-glow: rgba(76, 187, 23, 0.40);
    --auth-glow-strong: rgba(76, 187, 23, 0.62);
    --auth-aurora-a: rgba(76, 187, 23, 0.45);
    --auth-aurora-b: rgba(72, 135, 43, 0.55);
}
:root[data-cq-theme="dark"] body.theme-praxis .auth__right {
    background-image:
        radial-gradient(50rem 32rem at 12% 18%, rgba(76, 187, 23, 0.30), transparent 55%),
        radial-gradient(40rem 28rem at 100% 100%, rgba(72, 135, 43, 0.34), transparent 50%),
        linear-gradient(160deg, #1d251a 0%, #273222 60%, #2e4620 100%);
}
/* Weiss auf der Verlaufsmitte ~6:1 */
:root[data-cq-theme="dark"] body.theme-praxis .auth__btn--primary {
    background: linear-gradient(135deg, #2E4620 0%, #437F28 100%);
}
:root[data-cq-theme="dark"] body.theme-praxis .auth__btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(95, 175, 61, 0.45);
}
:root[data-cq-theme="dark"] body.theme-praxis .auth-praxis__brandtag,
:root[data-cq-theme="dark"] body.theme-praxis .auth-praxis__register a {
    color: #7BC85A;
}

/* =============================================================================
   Dark Mode (Audit P1-1): schmaler Akzent-Block — die Praxis behaelt ihren
   gruenen Akzent statt Cyan, ohne die Dark-Flaechen/Texte aus
   curaiq-darkmode.css anzutasten (dort bleiben --cq-bg/--cq-text/Surfaces usw.
   unveraendert). Kontraste (WCAG, nachgerechnet):
     #7BC85A auf #0b1220 = 9,14:1 · auf #1e293b = 7,14:1   (Links, AA+)
     #8FD972 auf #0b1220 = 11,0:1 · auf #1e293b = 8,59:1   (Link-Hover)
     #5FAF3D auf #0b1220 = 6,85:1 · auf #1e293b = 5,35:1   (Akzent/Borders)
   Hinweis: Auf #5FAF3D-Flaechen dunklen Text (#0b1220 = 6,85:1) verwenden —
   Weiss waere nur 2,73:1 (siehe .pxs-tile-primary in Praxis/Start.cshtml).
   ============================================================================= */
:root[data-cq-theme="dark"] body.theme-praxis {
    --cq-primary: #5FAF3D;
    --cq-primary-strong: #7BC85A;
    --cq-primary-soft: rgba(95, 175, 61, 0.16);
    --cq-primary-soft-2: rgba(95, 175, 61, 0.24);
    --cq-accent: #6ECC44;
    --cq-focus-ring: 0 0 0 3px rgba(95, 175, 61, 0.45);
    --bs-primary: #5FAF3D;
    --bs-primary-rgb: 95, 175, 61;
    --bs-link-color: #7BC85A;
    --bs-link-hover-color: #8FD972;
}

/* =============================================================================
   Praxis-Navigation (Enterprise Variante A) — Sidebar-Pro-Styling
   Quelle: docs/konzepte/praxis-navigation-enterprise.md §2/§5 + Mockup
   praxis-nav-enterprise-mockup.html. Adaptiert die Mockup-Werte auf die
   BESTEHENDE Sidenav-v3-Markupstruktur (.cq-sidebar / .cq-nav-*) — die
   Accordion-/Rail-/Favoriten-/Offcanvas-Mechanik bleibt unveraendert, hier
   wird nur gestylt. Guard-Muster der Datei: Token-Zuweisungen je Theme
   (Light-Guard :not([data-cq-theme="dark"]) bzw. Dark-Block), strukturelle
   Regeln einmal unter body.theme-praxis via var(--px-*).
   ============================================================================= */

/* ---- Design-Tokens (Konzept §2, "Green Juice" verfeinert) — Light ---------- */
:root:not([data-cq-theme="dark"]) body.theme-praxis {
    --px-ink: #22301F;
    --px-muted: #5B6852;
    --px-primary: #437F28;
    --px-deep: #2E4620;
    --px-accent: #4CBB17;
    --px-bg: #F5F8F2;
    --px-surface: #FFFFFF;
    --px-surface-2: #FAFCF8;
    --px-line: rgba(34, 48, 31, 0.12);
    --px-line-soft: rgba(34, 48, 31, 0.07);
    --px-active-bg: rgba(67, 127, 40, 0.13);
    --px-hover-bg: rgba(67, 127, 40, 0.07);
    --px-badge-bg: #E4F2D8;
    --px-badge-ink: #2E4620;
    --px-warn-bg: #FBEED7;
    --px-warn-ink: #9A5B08;
    --px-shadow: 0 1px 2px rgba(34, 48, 31, 0.05), 0 8px 28px rgba(34, 48, 31, 0.09);
    --px-veil: rgba(16, 21, 15, 0.4);
    --px-r-item: 10px;
    --px-r-panel: 14px;
}

/* ---- Design-Tokens — Dark (Guard-Muster der Datei fortgefuehrt) ------------ */
:root[data-cq-theme="dark"] body.theme-praxis {
    --px-ink: #E8EFE3;
    --px-muted: #9DAA92;
    --px-primary: #6BBE45;
    --px-deep: #7BC85A;
    --px-accent: #4CBB17;
    --px-bg: #10150F;
    --px-surface: #181F16;
    --px-surface-2: #1D2519;
    --px-line: rgba(232, 239, 227, 0.13);
    --px-line-soft: rgba(232, 239, 227, 0.07);
    --px-active-bg: rgba(107, 190, 69, 0.18);
    --px-hover-bg: rgba(107, 190, 69, 0.09);
    --px-badge-bg: #2A3823;
    --px-badge-ink: #A8D98B;
    --px-warn-bg: #3A2E14;
    --px-warn-ink: #E4B15E;
    --px-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 32px rgba(0, 0, 0, 0.45);
    --px-veil: rgba(0, 0, 0, 0.55);
    --px-r-item: 10px;
    --px-r-panel: 14px;
}

/* ---- Sidebar-Flaeche (Desktop + Offcanvas) --------------------------------- */
body.theme-praxis .cq-sidebar,
body.theme-praxis .cq-offcanvas {
    background: var(--px-surface);
    border-right: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-ink);
}

/* ---- Gruppenlabels (Accordion-Toggles der Sidenav v3) ----------------------
   Mockup .grp-label: 11px, Versalien, +0.08em Letterspacing, Muted. Die
   Toggle-Buttons bleiben Buttons (Accordion), sehen aber wie Labels aus. */
body.theme-praxis .cq-nav-toggle {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.69rem;
    font-weight: 800;
    color: var(--px-muted);
    border-radius: var(--px-r-item);
    transition: background 0.13s ease, color 0.13s ease;
}
body.theme-praxis .cq-nav-toggle:hover,
body.theme-praxis .cq-nav-toggle:focus-visible,
body.theme-praxis .cq-nav-toggle[aria-expanded="true"] {
    color: var(--px-deep);
    background: transparent;
}
body.theme-praxis .cq-nav-toggle:hover {
    background: var(--px-hover-bg);
}
body.theme-praxis .cq-nav-toggle .cq-nav-section-icon,
body.theme-praxis .cq-nav-toggle .cq-nav-chevron {
    color: var(--px-muted);
}
body.theme-praxis .cq-nav-toggle[aria-expanded="true"] .cq-nav-section-icon {
    color: var(--px-primary);
}

/* ---- Nav-Items (Mockup .item) ---------------------------------------------- */
body.theme-praxis .cq-nav-link {
    position: relative;
    border-radius: var(--px-r-item);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--px-ink);
    transition: background 0.13s ease, color 0.13s ease;
}
body.theme-praxis .cq-nav-link .cq-icon {
    color: var(--px-muted);
    transition: color 0.13s ease;
}
body.theme-praxis .cq-nav-link:hover {
    background: var(--px-hover-bg);
    color: var(--px-ink);
}
body.theme-praxis .cq-nav-link:hover .cq-icon {
    color: var(--px-deep);
}

/* Aktiv: gruene Flaeche + 3-px-Marker links + Icon/Text in Primaerfarbe */
body.theme-praxis .cq-nav-link.active,
body.theme-praxis .cq-nav-link[aria-current="page"] {
    background: var(--px-active-bg);
    color: var(--px-primary);
    font-weight: 800;
}
body.theme-praxis .cq-nav-link.active .cq-icon,
body.theme-praxis .cq-nav-link[aria-current="page"] .cq-icon {
    color: var(--px-primary);
}
body.theme-praxis .cq-nav-link.active::before,
body.theme-praxis .cq-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 20%;
    bottom: 20%;
    transform: none; /* site.css zentriert via translateY — hier top/bottom */
    width: 3px;
    height: auto;
    border-radius: 3px;
    background: var(--px-primary);
}
html.cq-rail body.theme-praxis .cq-nav-link.active::before,
html.cq-rail body.theme-praxis .cq-nav-link[aria-current="page"]::before {
    left: -0.4rem;
}

/* ---- Badges (Warenkorb-Positionen, offene Genehmigungen) ------------------- */
body.theme-praxis .cq-nav-badge {
    background: var(--px-badge-bg);
    color: var(--px-badge-ink);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

/* Pin-Aktion (Favoriten-Mechanik der v3) in Praxis-Farben */
body.theme-praxis .cq-nav-pin {
    color: var(--px-muted);
    border-radius: 6px;
}
body.theme-praxis .cq-nav-pin:hover,
body.theme-praxis .cq-nav-pin:focus-visible {
    background: var(--px-hover-bg);
    color: var(--px-primary);
}

/* ---- Suche-Button (Command-Palette-Trigger, Mockup .sb-search) ------------- */
body.theme-praxis .px-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--px-line);
    background: var(--px-surface-2);
    border-radius: 9px;
    padding: 0.42rem 0.6rem;
    color: var(--px-muted);
    cursor: pointer;
    font-size: 0.84rem;
    text-align: left;
    transition: border-color 0.15s ease, color 0.15s ease;
}
body.theme-praxis .px-search-btn:hover {
    border-color: var(--px-primary);
    color: var(--px-ink);
}
body.theme-praxis .px-search-btn .px-search-icon {
    width: 15px;
    height: 15px;
    flex: none;
}
body.theme-praxis .px-search-btn .px-search-lbl {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-praxis .px-search-kbd {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    background: var(--px-badge-bg);
    color: var(--px-badge-ink);
    border-radius: 5px;
    padding: 0.12rem 0.35rem;
}
/* Rail-Modus: nur das Lupen-Icon (v3 blendet .cq-search-kbd bereits aus) */
html.cq-rail body.theme-praxis .px-search-btn {
    justify-content: center;
    padding: 0.42rem;
}
html.cq-rail body.theme-praxis .px-search-btn .px-search-lbl {
    display: none;
}

/* ---- Breadcrumbs (Bereich › Seite › Detail) --------------------------------- */
body.theme-praxis .px-crumbs {
    margin-bottom: 0.9rem;
}
body.theme-praxis .px-crumbs ol {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
    min-width: 0;
}
body.theme-praxis .px-crumbs a {
    color: var(--px-muted);
    text-decoration: none;
    white-space: nowrap;
}
body.theme-praxis .px-crumbs a:hover {
    color: var(--px-deep);
    text-decoration: underline;
}
body.theme-praxis .px-crumbs .px-crumb-group {
    color: var(--px-muted);
    white-space: nowrap;
}
body.theme-praxis .px-crumbs .px-crumb-sep .cq-icon {
    width: 14px;
    height: 14px;
    color: var(--px-muted);
    opacity: 0.7;
    display: block;
}
body.theme-praxis .px-crumbs [aria-current="page"] .px-crumb-current {
    font-weight: 800;
    color: var(--px-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Command-Palette (Suche, Strg/Cmd+K) ------------------------------------ */
body.theme-praxis .px-palette-veil {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--px-veil);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 9vh;
}
body.theme-praxis .px-palette-veil[hidden] {
    display: none;
}
body.theme-praxis .px-palette {
    width: 520px;
    max-width: 92%;
    background: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-panel);
    box-shadow: var(--px-shadow);
    overflow: hidden;
}
body.theme-praxis .px-palette input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--px-ink);
    outline: none;
    border-bottom: 1px solid var(--px-line);
}
body.theme-praxis .px-palette input::placeholder {
    color: var(--px-muted);
}
body.theme-praxis .px-pal-sec {
    padding: 0.45rem 0.6rem 0.6rem;
    max-height: 300px;
    overflow-y: auto;
}
body.theme-praxis .px-pal-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--px-muted);
    padding: 0.3rem 0.45rem 0.15rem;
}
body.theme-praxis .px-pal-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    text-decoration: none;
    padding: 0.48rem 0.5rem;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--px-ink);
}
body.theme-praxis .px-pal-item .cq-icon {
    color: var(--px-muted);
    width: 17px;
    height: 17px;
    flex: none;
}
body.theme-praxis .px-pal-item .px-pal-grp {
    margin-left: auto;
    color: var(--px-muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
body.theme-praxis .px-pal-item:hover,
body.theme-praxis .px-pal-item.sel {
    background: var(--px-active-bg);
    color: var(--px-ink);
}
body.theme-praxis .px-pal-item.sel .cq-icon {
    color: var(--px-primary);
}
body.theme-praxis .px-pal-empty {
    color: var(--px-muted);
    padding: 0.8rem 0.6rem;
    font-size: 0.85rem;
}
body.theme-praxis .px-pal-foot {
    border-top: 1px solid var(--px-line);
    padding: 0.45rem 0.9rem;
    color: var(--px-muted);
    font-size: 0.7rem;
    display: flex;
    gap: 0.9rem;
}
body.theme-praxis .px-pal-foot kbd {
    background: var(--px-badge-bg);
    color: var(--px-badge-ink);
    border-radius: 4px;
    padding: 0.06rem 0.3rem;
    font-weight: 800;
    font-family: inherit;
    font-size: inherit;
}

/* ---- Fokus-Ringe (WCAG 2.2, Akzent — Konzept §5) ---------------------------- */
body.theme-praxis .cq-nav-link:focus-visible,
body.theme-praxis .cq-nav-toggle:focus-visible,
body.theme-praxis .cq-nav-pin:focus-visible,
body.theme-praxis .px-search-btn:focus-visible,
body.theme-praxis .px-pal-item:focus-visible,
body.theme-praxis .px-palette input:focus-visible {
    outline: 3px solid var(--px-accent);
    outline-offset: 2px;
}

/* ---- Reduced Motion: Uebergaenge der Praxis-Nav abschalten ------------------ */
@media (prefers-reduced-motion: reduce) {
    body.theme-praxis .cq-nav-link,
    body.theme-praxis .cq-nav-toggle,
    body.theme-praxis .cq-nav-pin,
    body.theme-praxis .px-search-btn,
    body.theme-praxis .px-pal-item,
    body.theme-praxis .px-palette-veil {
        transition: none !important;
        animation: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* =============================================================================
   Gemeinsame Statusflaechen fuer Shop und Checkout (Go-Live-Review 23b)

   Warn-, Fehler- und Erfolgsfarben standen zweimal identisch im Code: einmal
   als --sh-* in praxis-shop.css, einmal als --co-* im <style>-Block des
   Checkouts. Jede Aenderung musste an zwei Stellen nachgezogen werden. Jetzt
   gibt es sie einmal; beide Dateien verweisen darauf.

   Bewusst NICHT an body.theme-praxis gebunden: dieselben Flaechen gelten im
   Pflege-Vertical.
   ============================================================================= */
:root {
    --cq-fs-warn-bg: #FBEED7;
    --cq-fs-warn-ink: #9A5B08;
    --cq-fs-err-bg: #F9E3E0;
    --cq-fs-err-ink: #A33325;
    --cq-fs-ok: #2E7D32;
}

:root[data-cq-theme="dark"] {
    /* Pastellflaechen wuerden im Dunkeln blenden — getoente Transparenzen mit
       heller Schrift erreichen dort >= 4.5:1 (WCAG AA). */
    --cq-fs-warn-bg: rgba(251, 191, 36, 0.16);
    --cq-fs-warn-ink: var(--cq-warning, #fbbf24);
    --cq-fs-err-bg: rgba(248, 113, 113, 0.16);
    --cq-fs-err-ink: var(--cq-danger, #f87171);
    --cq-fs-ok: #4ade80;
}