/* WellBase Patient App - Global Styles */
/* Works alongside MudBlazor for a consistent healthcare questionnaire experience */

/* ==========================================
   Manrope — self-hosted (no external CDN)
   Served same-origin from /fonts via MapStaticAssets (fingerprinted, brotli,
   immutable caching). No third-party request / patient IP leak (GDPR).
   Variable font (weight axis 200–800), so every used weight incl. 600
   renders as a true instance. Subsets: latin + latin-ext (unicode-range).
   Font: Manrope by Mikhail Sharanda, SIL Open Font License 1.1.
   ========================================== */
@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Variable-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Variable-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Environment indicator banner - shown only when Environment:DisplayName is set */
.environment-banner {
    background-color: #e67e22;
    color: #fff;
    text-align: center;
    padding: 4px 0;
    font-size: var(--wb-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    z-index: 1100;
}

/* ==========================================
   Design Tokens - CSS Custom Properties
   Single source of truth for all design values
   Synced with Theme/DesignTokens.cs
   ========================================== */

:root {
    /* Brand Colors - Doctrinus brand (black for default theme) */
    --wb-color-brand: #000000;
    --wb-color-brand-banner: #F5F5F5;

    /* Colors - Primary (Black - Bold, Professional - Doctrinus design) */
    --wb-color-primary: #000000;
    --wb-color-primary-dark: #000000;
    --wb-color-primary-light: #333333;
    --wb-color-primary-lighter: #666666;
    --wb-color-primary-lightest: #F5F5F5;
    --wb-color-primary-bg-hover: #F5F5F5;
    --wb-color-primary-contrast: #FFFFFF;
    --wb-color-primary-alpha-8: rgba(0, 0, 0, 0.08);
    --wb-color-primary-alpha-20: rgba(0, 0, 0, 0.2);

    /* Colors - Accent (Green for status/trust - from doctrinus.de) */
    --wb-color-accent: #006400;
    --wb-color-accent-light: #10B981;
    --wb-color-accent-lightest: #ECFDF5;

    /* Colors - Secondary (Gray - from doctrinus.de) */
    --wb-color-secondary: #333333;
    --wb-color-secondary-dark: #1A1A1A;
    --wb-color-secondary-light: #666666;
    --wb-color-secondary-lighter: #999999;
    --wb-color-secondary-lightest: #DFDFDF;
    --wb-color-secondary-contrast: #FFFFFF;

    /* Colors - Tertiary (use accent green) */
    --wb-color-tertiary: #006400;
    --wb-color-tertiary-dark: #004D00;
    --wb-color-tertiary-contrast: #FFFFFF;

    /* Colors - Semantic */
    --wb-color-success: #10B981;
    --wb-color-success-dark: #059669;
    --wb-color-success-light: #34D399;
    --wb-color-success-contrast: #FFFFFF;

    --wb-color-info: #3B82F6;
    --wb-color-info-dark: #2563EB;
    --wb-color-info-light: #60A5FA;
    --wb-color-info-contrast: #FFFFFF;

    --wb-color-warning: #F59E0B;
    --wb-color-warning-dark: #D97706;
    --wb-color-warning-light: #FBBF24;
    --wb-color-warning-contrast: #FFFFFF;

    --wb-color-error: #EF4444;
    --wb-color-error-dark: #DC2626;
    --wb-color-error-light: #F87171;
    --wb-color-error-contrast: #FFFFFF;

    /* Colors - Trust Badges (semantic colors for trust indicators) */
    --wb-color-trust-green: #4CAF50;
    --wb-color-trust-green-dark: #388E3C;
    --wb-color-trust-purple: #9C27B0;
    --wb-color-trust-purple-dark: #7B1FA2;
    --wb-color-trust-blue: #2196F3;
    --wb-color-trust-blue-dark: #1976D2;

    /* RGB values for gradient overlays (use with rgba()) */
    --wb-overlay-rgb: 0, 0, 0;
    /* Black for overlays - Doctrinus design */
    --wb-white-rgb: 255, 255, 255;
    --wb-black-rgb: 0, 0, 0;

    /* Colors - Background & Surface (Pure white - Doctrinus design) */
    --wb-color-background: #FFFFFF;
    --wb-color-background-page: #FFFFFF;
    --wb-color-surface: #FFFFFF;
    --wb-color-surface-hover: #F5F5F5;

    /* Colors - Text (Doctrinus) */
    --wb-color-text-primary: #1A1A1A;
    --wb-color-text-secondary: #666666;
    --wb-color-text-disabled: #999999;
    --wb-color-text-faint: #C8C8C8;
    --wb-color-text-inverse: #FFFFFF;

    /* Colors - Borders (Light gray - from doctrinus.de) */
    --wb-color-border: #DFDFDF;
    --wb-color-border-light: #EFEFEF;

    /* Colors - Overlay */
    --wb-color-overlay-dark: rgba(30, 41, 59, 0.5);
    --wb-color-overlay-light: rgba(255, 255, 255, 0.5);

    /* Colors - Chat (Future Feature) */
    --wb-color-chat-bubble-sent: #000000;
    --wb-color-chat-bubble-received: #F5F5F5;
    --wb-color-chat-text-sent: #FFFFFF;
    --wb-color-chat-text-received: #1A1A1A;
    --wb-color-chat-timestamp: #999999;
    --wb-color-chat-online: #006400;
    --wb-color-chat-offline: #999999;
    --wb-color-chat-typing: #666666;

    /* Colors - Video (Future Feature) */
    --wb-color-video-background: #0A0A0A;
    --wb-color-video-controls-bg: rgba(0, 0, 0, 0.8);
    --wb-color-video-controls-text: #FFFFFF;
    --wb-color-video-mute: #EF4444;
    --wb-color-video-end-call: #DC2626;
    --wb-color-video-pip-border: #000000;

    /* Spacing Scale */
    --wb-space-0: 0;
    --wb-space-px: 1px;
    --wb-space-0-5: 0.125rem;
    --wb-space-1: 0.25rem;
    --wb-space-1-5: 0.375rem;
    --wb-space-2: 0.5rem;
    --wb-space-2-5: 0.625rem;
    --wb-space-3: 0.75rem;
    --wb-space-3-5: 0.875rem;
    --wb-space-4: 1rem;
    --wb-space-5: 1.25rem;
    --wb-space-6: 1.5rem;
    --wb-space-7: 1.75rem;
    --wb-space-8: 2rem;
    --wb-space-9: 2.25rem;
    --wb-space-10: 2.5rem;
    --wb-space-11: 2.75rem;
    --wb-space-12: 3rem;
    --wb-space-14: 3.5rem;
    --wb-space-16: 4rem;
    --wb-space-20: 5rem;
    --wb-space-24: 6rem;
    --wb-space-28: 7rem;
    --wb-space-32: 8rem;
    --wb-space-36: 9rem;
    --wb-space-40: 10rem;

    /* Border Radius */
    --wb-radius-none: 0;
    --wb-radius-sm: 0.125rem;
    --wb-radius-md: 0.375rem;
    --wb-radius-lg: 0.5rem;
    --wb-radius-xl: 0.75rem;
    --wb-radius-2xl: 1rem;
    --wb-radius-3xl: 1.5rem;
    --wb-radius-full: 9999px;

    /* Doctrinus-specific radius values */
    --wb-radius-button: 100px;
    /* Pill-shaped buttons (doctrinus.de style) */
    --wb-radius-input: 4px;
    /* Input fields (doctrinus.de style) */

    /* Typography - Font Family */
    --wb-font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Typography - Font Sizes
       Verbindliche Skala (ADO #325): Schriftgrößen ausschließlich über diese Tokens
       setzen, keine px/rem-Literale in Komponenten-CSS. rem statt px, damit Text mit
       Browser-Zoom/Root-Schriftgröße skaliert (WCAG 1.4.4).
       Normalisierung von Alt-Werten auf die Skala:
         ≤11.5px → 2xs · 12–13px → xs · 13.5–14.5px → sm · 15–16px → md ·
         17–18px → lg · 19–21px → xl · 22–25px → 2xl · 26–31px → 3xl ·
         32–38px → 4xl · ≥40px statisch → 5xl · responsive Titel → display* */
    --wb-font-size-2xs: 0.6875rem;
    --wb-font-size-xs: 0.75rem;
    --wb-font-size-sm: 0.875rem;
    --wb-font-size-md: 1rem;
    --wb-font-size-lg: 1.125rem;
    --wb-font-size-xl: 1.25rem;
    --wb-font-size-2xl: 1.5rem;
    --wb-font-size-3xl: 1.875rem;
    --wb-font-size-4xl: 2.25rem;
    --wb-font-size-5xl: 3rem;

    /* Typography - Responsive Display/Hero (rem-Grenzen, damit Zoom weiter wirkt) */
    --wb-font-size-display-sm: clamp(1.75rem, 3.4vw, 2.5rem);
    --wb-font-size-display: clamp(2.125rem, 4.6vw, 3.25rem);
    --wb-font-size-display-lg: clamp(2.5rem, 6vw, 4rem);

    /* Typography - Line Heights */
    --wb-line-height-none: 1;
    --wb-line-height-tight: 1.25;
    --wb-line-height-snug: 1.375;
    --wb-line-height-normal: 1.5;
    --wb-line-height-relaxed: 1.625;
    --wb-line-height-loose: 2;

    /* Typography - Font Weights */
    --wb-font-weight-thin: 100;
    --wb-font-weight-light: 300;
    --wb-font-weight-normal: 400;
    --wb-font-weight-medium: 500;
    --wb-font-weight-semibold: 600;
    --wb-font-weight-bold: 700;
    --wb-font-weight-extrabold: 800;
    --wb-font-weight-black: 900;

    /* Shadows */
    --wb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --wb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --wb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --wb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --wb-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --wb-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --wb-shadow-none: none;

    /* Doctrinus shadow (subtle, 15% opacity - from doctrinus.de) */
    --wb-shadow-doctrinus: 0px 4px 20px rgba(0, 0, 0, 0.15);

    /* Doctrinus focus ring */
    --wb-shadow-focus: 0 0 0 1.5px #000000;

    /* Transitions */
    --wb-transition-fast: 150ms;
    --wb-transition-normal: 200ms;
    --wb-transition-slow: 300ms;
    --wb-transition-slower: 500ms;
    --wb-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --wb-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --wb-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --wb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --wb-z-dropdown: 1000;
    --wb-z-sticky: 1020;
    --wb-z-fixed: 1030;
    --wb-z-modal-backdrop: 1040;
    --wb-z-modal: 1050;
    --wb-z-popover: 1060;
    --wb-z-tooltip: 1070;
    --wb-z-toast: 1080;

    /* Breakpoints (for reference in CSS) */
    --wb-breakpoint-xs: 0;
    --wb-breakpoint-sm: 600px;
    --wb-breakpoint-md: 960px;
    --wb-breakpoint-lg: 1280px;
    --wb-breakpoint-xl: 1920px;

    /* Dark Section Colors (Footer, Newsletter - from doctrinus.de) */
    --wb-color-dark-bg: #1a1a1a;
    --wb-color-dark-surface: #3a3a3a;
    --wb-color-dark-text: #FFFFFF;
    --wb-color-dark-text-muted: rgba(255, 255, 255, 0.7);
    --wb-color-dark-text-faint: rgba(255, 255, 255, 0.5);
    --wb-color-dark-border: rgba(255, 255, 255, 0.1);
    --wb-color-dark-heading: #828282;

    /* Card Radius (used in footer contact card - larger rounded corners) */
    --wb-radius-card: 20px;

    /* Component Sizes - Icons */
    --wb-size-icon-sm: 1.25rem;
    /* 20px */
    --wb-size-icon-md: 2.5rem;
    /* 40px */
    --wb-size-icon-lg: 3rem;
    /* 48px */
    --wb-size-icon-xl: 3.5rem;
    /* 56px */

    /* Component Sizes - Form Elements */
    --wb-size-checkbox: 1.5rem;
    /* 24px */

    /* Component Heights - Buttons */
    --wb-height-button-lg: 3.5rem;
    /* 56px */

    /* Layout Spacing - Logo balance (for centering logo with back button) */
    --wb-space-logo-balance: 5rem;
    /* 80px */
    --wb-space-logo-balance-mobile: 3.75rem;
    /* 60px */

    /* Selection Button States (for medication pills, option cards, etc.) */
    --wb-color-selection-default-bg: #FFFFFF;
    /* White background (default state) */
    --wb-color-selection-default-text: #000000;
    /* Black text (default state) */
    --wb-color-selection-hover-bg: #F5F5F5;
    /* Light grey background (hover state) */
    --wb-color-selection-hover-text: #000000;
    /* Black text (hover state) */
    --wb-color-selection-selected-bg: #000000;
    /* Black background (selected state) */
    --wb-color-selection-selected-text: #FFFFFF;
    /* White text (selected state) */
    --wb-radius-selection-button: 12px;
    /* Border radius for selection buttons */

    /* Landing services palette ("classic" is historical naming — NOT tied to
       [data-theme="classic"]; only DoctrinusServicesSection uses these) */
    --wb-color-classic-primary: #0B1E11;
    --wb-color-classic-primary-light: #42804C;
    --wb-color-classic-primary-dark: #07120B;

    /* ==========================================
       Sprechstunde-Booking palette
       Mirrors DesignTokens.Booking. Re-skinned 2026-04-30 from the original
       indigo-navy handover onto the Doctrinus black-primary brand so the
       /checkout/review → /checkout/booking flow reads continuously with the
       rest of the checkout (black CTAs, slate-grey neutrals).
       Slot names are roles (Primary/PrimaryDeep/...), not colors — recolor
       in one place if a future theme variant needs a different brand.
       ========================================== */
    --wb-booking-primary: #000000;
    --wb-booking-primary-deep: #1A1A1A;
    --wb-booking-primary-tint: #F5F5F5;
    --wb-booking-primary-soft: #FAFAFA;
    --wb-booking-accent: #E8855C;
    --wb-booking-accent-soft: #FBE9DD;
    --wb-booking-ink: #0F172A;
    --wb-booking-text: #1E293B;
    --wb-booking-muted: #64748B;
    --wb-booking-line: #E2E8F0;
    --wb-booking-line-soft: #F1F5F9;
    --wb-booking-surface: #FFFFFF;
    --wb-booking-canvas: #FBFBFD;
    --wb-booking-card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 18px rgba(0, 0, 0, .06);
    --wb-booking-footer-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
}

/* Dark mode support - only applies when .dark class is added to html/body */
/* Removed prefers-color-scheme to keep light mode as default */
/* To enable dark mode, add class="dark" to <html> element */
.dark {
    --wb-color-background: #0F172A;
    --wb-color-surface: #1E293B;
    --wb-color-surface-hover: #334155;
    --wb-color-text-primary: #F8FAFC;
    --wb-color-text-secondary: #94A3B8;
    --wb-color-text-disabled: #475569;
    --wb-color-text-faint: #334155;
    --wb-color-border: #334155;
    --wb-color-border-light: #1E293B;
    --wb-color-chat-bubble-received: #1E293B;
    --wb-color-chat-text-received: #F8FAFC;
}

/* Classic theme - Navy Blue (original WellBase design) */
/* Applied when data-theme="classic" is set on html element */
[data-theme="classic"],
.theme-classic {
    /* Brand Colors */
    --wb-color-brand: #002366;
    --wb-color-brand-banner: #d0e6ff;

    /* Primary Colors - Navy Blue */
    --wb-color-primary: #002366;
    --wb-color-primary-dark: #001A4D;
    --wb-color-primary-light: #003A99;
    --wb-color-primary-lighter: #3366CC;
    --wb-color-primary-lightest: #d0e6ff;
    --wb-color-primary-bg-hover: #F0F4FA;
    --wb-color-primary-alpha-8: rgba(0, 35, 102, 0.08);
    --wb-color-primary-alpha-20: rgba(0, 35, 102, 0.2);

    /* Secondary Colors - Slate */
    --wb-color-secondary: #475569;
    --wb-color-secondary-dark: #334155;
    --wb-color-secondary-light: #64748B;

    /* Tertiary Colors - Amber */
    --wb-color-tertiary: #F59E0B;
    --wb-color-tertiary-dark: #D97706;

    /* Background & Surface */
    --wb-color-background: #FFFFFF;
    --wb-color-background-page: #f2f5fa;
    --wb-color-surface-hover: #F1F5F9;

    /* Text */
    --wb-color-text-primary: #1E293B;
    --wb-color-text-secondary: #64748B;
    --wb-color-text-disabled: #94A3B8;
    --wb-color-text-faint: #CBD5E1;

    /* Borders */
    --wb-color-border: #E2E8F0;
    --wb-color-border-light: #F1F5F9;

    /* Button radius - original rounded (not pill) */
    --wb-radius-button: 12px;
    --wb-radius-input: 8px;

    /* RGB values for gradient overlays */
    --wb-overlay-rgb: 0, 35, 102;

    /* Chat Colors - Navy themed */
    --wb-color-chat-bubble-sent: #002366;
    --wb-color-chat-bubble-received: #FFFFFF;

    /* Focus ring with navy color */
    --wb-shadow-focus: 0 0 0 3px rgba(0, 35, 102, 0.4);
}

/* Rose theme - Feminine, warm aesthetic */
/* Applied when data-theme="rose" is set on html element */
/* Using Pink 700 (#C2185B) as primary for better WCAG AA contrast (5.3:1) */
[data-theme="rose"],
.theme-rose {
    /* Primary Colors - Rose Pink (accessibility-improved) */
    --wb-color-primary: #C2185B;
    --wb-color-primary-dark: #AD1457;
    --wb-color-primary-light: #F06292;
    --wb-color-primary-lighter: #F8BBD9;
    --wb-color-primary-lightest: #FCE4EC;
    --wb-color-primary-contrast: #FFFFFF;
    --wb-color-primary-alpha-8: rgba(194, 24, 91, 0.08);
    --wb-color-primary-alpha-20: rgba(194, 24, 91, 0.2);
    --wb-color-primary-bg-hover: #FFF0F5;

    /* Secondary Colors - Mauve */
    --wb-color-secondary: #7B1FA2;
    --wb-color-secondary-dark: #6A1B9A;
    --wb-color-secondary-light: #AB47BC;
    --wb-color-secondary-lighter: #CE93D8;
    --wb-color-secondary-contrast: #FFFFFF;

    /* Tertiary Colors - Coral */
    --wb-color-tertiary: #FF7043;
    --wb-color-tertiary-dark: #E64A19;
    --wb-color-tertiary-light: #FFAB91;
    --wb-color-tertiary-contrast: #FFFFFF;

    /* Background & Surface - Rose tinted */
    --wb-color-background: #FFF8FA;
    --wb-color-surface-hover: #FFF0F5;

    /* Border Focus */
    --wb-color-border-focus: #C2185B;

    /* RGB values for gradient overlays (use with rgba()) */
    --wb-overlay-rgb: 194, 24, 91;
    /* Rose for overlays */

    /* Chat Colors - Rose themed */
    --wb-color-chat-bubble-sent: #C2185B;
    --wb-color-chat-bubble-received: #FFF0F5;

    /* Focus ring with rose color */
    --wb-shadow-focus: 0 0 0 3px rgba(194, 24, 91, 0.4);

    /* Pill buttons like Doctrinus */
    --wb-radius-button: 100px;
    --wb-radius-input: 4px;
}

/* ==========================================
   Landing-Design v3 — app-weite Tokens & Utilities
   Designsprache seit 2026-07-21 (Kundenfeedback): überwiegend WEISS,
   Fließtext Anthrazit, Headlines dunkles Grün-Schwarz. Das Grün
   (#42804C / #ADD0B3, institute.doctrinus.de) wird nur noch DEZENT
   und gezielt eingesetzt: Eyebrows, Trennlinien, Icon-Akzente. Flächige
   Hervorhebung übernehmen wenige dunkelgrüne Verlaufs-Sektionen
   (--wb-landing-highlight-grad, Muster „hers-radial-dark" der
   institute-Seite). Theme-unabhängig, gilt für ALLE Seiten.
   ========================================== */
:root {
    /* Inhaltsspalte — eine Quelle für Header, Footer und Seiteninhalt. */
    --wb-content-max: 1280px;

    /* "Mein Bereich"-Lesespalte — eine Quelle für alle privaten Hub-Seiten
       (Portal-Hub, Termine, Bestellungen, Profil, REMI, Therapien, Nach-
       bestellen). Bewusst schmaler als die Marketing-Seite (--wb-content-max):
       einspaltige Listen-/Formular-/Karteninhalte lesen sich auf einer
       schmalen Spalte besser. Hier ändern = alle Hub-Seiten einheitlich. */
    --wb-portal-max: 720px;

    /* Typo-Farben: Headlines dunkles Grün-Schwarz (= H1-Farbe der institute-
       Seite), Fließtext Anthrazit — Kundenwunsch 2026-07-21: „schwarz oder
       Anthrazit, Anthrazit wirkt freundlicher". Kontrast auf Weiß ≈ 10:1. */
    --wb-landing-heading: #0B1E11;
    --wb-landing-body: #3A403C;

    /* Marken-Icons (CSS-mask über Vollfarbe) folgen der Heading-Farbe. */
    --wb-landing-icon: var(--wb-landing-heading);

    /* Panel-Fläche (Newsletter u. ä.) + Footer-Sockel: seit v3 fast weiß —
       Flächen tragen keine Farbe mehr, Struktur kommt aus Hairlines. */
    --wb-landing-panel: #F5F7F5;
    --landing-foot-blue: #FFFFFF;

    /* Sektions-Bänder: nur noch ein Hauch Grün-Grau über Weiß (v3) —
       Unterseiten behalten ihre Zonen-Struktur, ohne grün zu wirken. */
    --wb-landing-wash-top: #F7FAF8;
    --wb-landing-wash-bottom: #EFF4F0;

    /* Akzent-Palette (institute.doctrinus.de): kräftiger Grün-Akzent für
       Eyebrows/Icons + Salbei-Fläche für kleine Chips. Bewusst sparsam. */
    --wb-landing-accent-surface: #ADD0B3;
    --wb-landing-accent: #42804C;

    /* Trennlinien: blasses Salbeigrün (institute-Seite: border #C2D6C5) —
       der vom Kunden gewünschte grüne Wiedererkennungswert an Hairlines. */
    --wb-landing-divider: #C7D9CB;

    /* Dunkelgrüne Highlight-Sektion (institute „hers-radial-dark"): tiefes
       Grün mit salbeigrünem Radial-Glow oben rechts. Für die wenigen bewusst
       hervorgehobenen Flächen (LabSpotlight, Footer-Kontakt, Hero-Kontakt). */
    --wb-landing-highlight-bg: #08170D;
    --wb-landing-highlight-grad:
        radial-gradient(80% 90% at 100% 50%, rgba(159, 209, 167, 0.4), rgba(0, 0, 0, 0) 65%),
        linear-gradient(180deg, #091A0F 0%, #07120B 100%);

    /* Legacy (v2): animierter Shimmer — seit v3 nicht mehr im Einsatz auf
       der Landing; Token bleibt für den Palette-Tester definiert. */
    --wb-gradient-shimmer: linear-gradient(90deg, #C2E0C7, #83B98C, #C2E0C7);
}

/* Signature-Shimmer: wandernder Verlauf (institute.doctrinus.de) — auf
   Elementen mit background-size: 200% 100% einsetzen. */
@keyframes wb-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---- Eyebrow: getrackte Uppercase-Zeile über einer Section-Headline —
   grüner Akzent (institute-Muster), einer der wenigen gezielten Grün-Orte. ---- */
.wb-eyebrow {
    margin: 0 0 14px;
    font-size: var(--wb-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--wb-landing-accent, #42804C);
}

/* ---- Section-H2 — identische Skala wie "Unsere Therapien" ---- */
.wb-section-title {
    margin: 0;
    font-size: var(--wb-font-size-display-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--wb-landing-heading);
}

/* ---- Seiten-H1 — eine Stufe unter dem Landing-Hero (Unterseiten-Maß) ---- */
.wb-page-title {
    margin: 0;
    font-size: var(--wb-font-size-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--wb-landing-heading);
}

/* Zweifarbige Headline: dunkle Hauptzeile + ruhige grüne Folgezeile. Seit v3
   OHNE Shimmer-Verlauf (Kundenfeedback „viel zu grün/zu viel Bewegung") —
   die Folgezeile trägt den Grün-Akzent als einzige Farbe in der Headline. */
.wb-title-soft {
    color: var(--wb-landing-accent, #42804C);
}

/* ---- Fließtext-Lede unter einer Headline ---- */
.wb-lede {
    margin: 18px 0 0;
    max-width: 560px;
    font-size: var(--wb-font-size-lg);
    line-height: 1.6;
    color: var(--wb-landing-body);
}

/* Ledes auf Phones eine Stufe runter — konsistent mit dem übrigen
   14–16px-Fließtext der Landing (ADO #325). */
@media (max-width: 599px) {
    .wb-lede {
        font-size: var(--wb-font-size-md);
    }
}

/* ---- Pill-CTA + Ghost-Variante — seit v3 ruhige, dunkle Vollfläche
   (statt Shimmer-Verlauf): gleiche Sprache wie die Hero-/Footer-CTAs. ---- */
.wb-pill-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--wb-landing-heading, #0B1E11);
    color: #FFFFFF;
    font-size: var(--wb-font-size-md);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.45);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease, background 0.25s ease;
}

.wb-pill-cta:hover {
    transform: translateY(-2px);
    background: #16351F;
    color: #FFFFFF;
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.5);
}

.wb-pill-cta:focus-visible {
    outline: 2px solid var(--wb-color-primary);
    outline-offset: 3px;
}

.wb-pill-cta--ghost {
    background: rgba(255, 255, 255, 0.7);
    animation: none;
    color: var(--wb-landing-heading);
    border: 1.5px solid rgba(11, 30, 17, 0.22);
    box-shadow: none;
}

.wb-pill-cta--ghost:hover {
    background: var(--wb-landing-wash-top);
    filter: none;
    color: var(--wb-landing-heading);
    border-color: rgba(11, 30, 17, 0.4);
    box-shadow: none;
}

/* ---- Weiße Karte auf Wall-Band — Grundbaustein der Unterseiten ---- */
.wb-card {
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 20px;
    box-shadow: 0 18px 40px -28px rgba(11, 30, 17, 0.35);
}

/* ---- Scroll-Lock: liegt auf <html>, solange ein Overlay (MenuDrawer) offen
   ist — verhindert, dass die Seite dahinter mitscrollt. !important schlägt
   das overflow-y: overlay der html-Basisregel. ---- */
.wb-scroll-lock {
    overflow: hidden !important;
}

/* ---- Wall-Band: full-bleed blaugraue Sektionsfläche mit weich
   ein-/ausblendender Maske (Muster der Therapy-Section). Auf eine <section>
   mit eigener vertikaler Polsterung legen; das Band lebt im ::before und
   bleibt hinter dem Inhalt. ---- */
.wb-wall {
    position: relative;
    isolation: isolate;
}

.wb-wall::before {
    content: "";
    position: absolute;
    inset: -1.5cm 0 -1.5cm;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(180deg, var(--wb-landing-wash-top) 0%, var(--wb-landing-wash-bottom) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.4cm, #000 calc(100% - 1.6cm), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 1.4cm, #000 calc(100% - 1.6cm), transparent 100%);
    z-index: -1;
    /* Rein dekoratives Band: die -1.5cm-Übergröße ragt über benachbarte Toolbars
       (z.B. die Labortests-Filter-/View-Toggle-Leiste) und fing dort Klicks ab
       → "muss man viel klicken, bis er reagiert" (#926). Klicks müssen durch. */
    pointer-events: none;
}

/* ==========================================
   Reset & Base
   ========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--wb-font-size-md);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Prevent layout shift when scrollbar appears/disappears between routes.
       overlay = scrollbar floats over content (no space taken, like macOS default).
       Fallback to scrollbar-gutter: stable for browsers that don't support overlay. */
    overflow-y: overlay;
    scrollbar-gutter: stable;
    /* overflow-x: hidden on html only (not body) — setting it on body causes
       overflow-y to compute to 'auto', making body a scroll container that
       breaks position: sticky for descendant elements. */
    overflow-x: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    font-family: var(--wb-font-family);
    background-color: var(--wb-color-background);
    color: var(--wb-color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ensure all form elements use Manrope font */
button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

/* ADO #373 — Grundsicherung gegen den Fokus-Zoom von iOS Safari.
   Mobiles Safari zoomt beim Antippen JEDES Eingabefelds mit weniger als 16px
   Schriftgröße automatisch in die Seite hinein (~1,6x) und bleibt danach gezoomt —
   Buttons liegen dann ausserhalb des Sichtbereichs. Früher unterdrückte
   `maximum-scale=1.0` im Viewport-Meta das; das Tag ist raus (WCAG 1.4.4, siehe
   App.razor), also muss die Ursache weg: >= 16px.

   Warum `any-pointer: coarse` und nicht generell?
   - Das Problem existiert ausschliesslich auf Touch-Geräten. Desktop-Layouts (teils
     bewusst kompakte 14px-Formulare) bleiben so unangetastet.
   - `any-pointer` statt `pointer`: ein iPad mit Trackpad meldet `pointer: fine`,
     hat aber weiterhin einen Touchscreen und zoomt beim Tippen trotzdem.

   Warum Element-Selektoren ohne `!important`?
   Die Regel ist bewusst schwach (Spezifität 0,0,1). Sie greift damit als Netz für
   Felder OHNE eigene Schriftgrössen-Regel — und die sind der gefährlichste Fall:
   ein ungestyltes <input> erbt keine Schriftgrösse, sondern bekommt vom Browser
   ~13,3px und zoomt garantiert. Für künftige neue Felder gilt das automatisch.
   Felder MIT eigener Klassenregel gewinnen weiterhin — dort wurde die Anhebung
   einzeln in der jeweiligen .razor.css nachgezogen (nach demselben Muster).
   Eine breite `!important`-Regel wäre robuster, würde aber auch bewusst GRÖSSERE
   Felder (z.B. .search-page__input mit 18px) auf 16px herunterziehen. */
@media (any-pointer: coarse) {
    input,
    select,
    textarea {
        font-size: var(--wb-font-size-md);
    }
}

/* Focus styles for accessibility */
h1:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--wb-color-primary);
    outline-offset: 2px;
}

/* Links */
a {
    color: var(--wb-color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--wb-color-primary-dark);
    text-decoration: underline;
}

/* Search highlight - override Bootstrap's yellow mark background */
mark.search-highlight,
.search-highlight {
    background-color: transparent;
    color: inherit;
    font-weight: 700;
    padding: 0;
}

/* Form validation states (for non-MudBlazor forms) */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--wb-color-success);
    outline-offset: -1px;
}

.invalid {
    outline: 2px solid var(--wb-color-error);
    outline-offset: -1px;
}

.validation-message {
    color: var(--wb-color-error);
    font-size: var(--wb-font-size-sm);
    margin-top: var(--wb-space-1);
}

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7;
    border-top: 2px solid var(--wb-color-warning);
    bottom: 0;
    box-shadow: var(--wb-shadow-lg);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--wb-space-4) var(--wb-space-6);
    position: fixed;
    width: 100%;
    z-index: var(--wb-z-toast);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--wb-space-4);
    top: var(--wb-space-3);
    font-size: var(--wb-font-size-xl);
    opacity: 0.7;
}

#blazor-error-ui .dismiss:hover {
    opacity: 1;
}

#blazor-error-ui .reload {
    color: var(--wb-color-primary);
    font-weight: var(--wb-font-weight-semibold);
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-left: 4px solid var(--wb-color-error);
    padding: var(--wb-space-6) var(--wb-space-6) var(--wb-space-6) var(--wb-space-4);
    color: #991B1B;
    border-radius: var(--wb-radius-lg);
    margin: var(--wb-space-4);
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten. Bitte lade die Seite neu.";
}

/* ==========================================
   Branded Splash Screen / Loading Indicator
   Matches SplashScreen.razor.css for consistent UX
   ========================================== */

#loading-container {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    z-index: 1000;
}

/* Global Persistent Loading Overlay */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.global-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Logo - flies in from top (matches SplashScreen.razor) */
.loading-logo,
.global-loading-logo {
    animation: logoSlideDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    text-align: center;
    width: auto;
    min-width: max-content;
    opacity: 0;
}

.loading-logo-img,
.global-loading-logo-img {
    height: 48px;
    width: auto;
    display: block;
}

@keyframes logoSlideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bars - fly in from bottom (matches SplashScreen.razor) */
.loading-bars,
.global-loading-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 76px;
    animation: barsSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    opacity: 0;
}

@keyframes barsSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-bar,
.global-loading-bar {
    width: 8px;
    background-color: #000000;
    border-radius: 4px;
    animation: bar-jump 1s ease-in-out infinite;
}

.loading-bar:nth-child(1),
.global-loading-bar:nth-child(1) {
    height: 28px;
    animation-delay: 0s;
}

.loading-bar:nth-child(2),
.global-loading-bar:nth-child(2) {
    height: 42px;
    animation-delay: 0.1s;
}

.loading-bar:nth-child(3),
.global-loading-bar:nth-child(3) {
    height: 56px;
    animation-delay: 0.2s;
}

.loading-bar:nth-child(4),
.global-loading-bar:nth-child(4) {
    height: 42px;
    animation-delay: 0.3s;
}

.loading-bar:nth-child(5),
.global-loading-bar:nth-child(5) {
    height: 28px;
    animation-delay: 0.4s;
}

@keyframes bar-jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .loading-logo,
    .global-loading-logo {
        animation: none;
        opacity: 1;
    }

    .loading-bars,
    .global-loading-bars {
        animation: none;
        opacity: 1;
    }

    .loading-bar,
    .global-loading-bar {
        animation: none;
    }
}

@keyframes wbSplashBarsSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wb-splash-message {
    color: #64748b;
    font-size: var(--wb-font-size-sm);
    font-weight: 500;
    text-align: center;
    animation: wbSplashMessageSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    opacity: 0;
}

@keyframes wbSplashMessageSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .wb-splash-logo,
    .wb-splash-bars,
    .wb-splash-message {
        animation: none;
        opacity: 1;
    }

    .wb-splash-bar {
        animation: none;
    }

    .wb-splash-screen {
        transition: none;
    }
}

/* Authorizing screen - matches splash screen for seamless flow */
.auth-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: radial-gradient(ellipse at center, #ADD0B3 0%, #ffffff 70%);
    gap: var(--wb-space-6, 1.5rem);
}

/* ==========================================
   Questionnaire Layout
   ========================================== */

/* Mobile-first questionnaire container */
/* Note: Layout-specific styles are in QuestionnaireTake.razor.css (scoped) */
/* This provides only basic resets that don't conflict with scoped styles */
.questionnaire-container {
    box-sizing: border-box;
}

/* Question card styling */
/* Note: Layout-specific styles (padding, margin, flex) are in QuestionnaireTake.razor.css (scoped) */
.question-card {
    background: var(--wb-color-surface);
    box-sizing: border-box;
}

/* Progress bar area */
.progress-area {
    padding: var(--wb-space-4) 0;
    position: sticky;
    top: 0;
    background: var(--wb-color-background);
    z-index: var(--wb-z-sticky);
}

/* Navigation buttons area */
.navigation-area {
    padding: var(--wb-space-4) 0;
    margin-top: auto;
    display: flex;
    gap: var(--wb-space-4);
    justify-content: space-between;
}

/* Large touch targets for mobile */
.touch-target {
    min-height: 48px;
    min-width: 48px;
}

/* ==========================================
   Selection Cards (Radio/Checkbox Options)
   ========================================== */

.selection-card {
    border: 2px solid var(--wb-color-border);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-4);
    cursor: pointer;
    transition: all var(--wb-transition-fast) var(--wb-ease-default);
    background: var(--wb-color-surface);
}

.selection-card:hover {
    border-color: var(--wb-color-primary);
    background: var(--wb-color-primary-bg-hover);
}

.selection-card.selected {
    border-color: var(--wb-color-primary);
    background: var(--wb-color-primary-lightest);
}

.selection-card:focus-within {
    outline: 2px solid var(--wb-color-primary);
    outline-offset: 2px;
}

/* ==========================================
   Chat Components (Future Feature)
   ========================================== */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--wb-color-background);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--wb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
}

.chat-bubble {
    max-width: 80%;
    padding: var(--wb-space-3) var(--wb-space-4);
    border-radius: var(--wb-radius-2xl);
    position: relative;
}

.chat-bubble--sent {
    background: var(--wb-color-chat-bubble-sent);
    color: var(--wb-color-chat-text-sent);
    align-self: flex-end;
    border-bottom-right-radius: var(--wb-radius-sm);
}

.chat-bubble--received {
    background: var(--wb-color-chat-bubble-received);
    color: var(--wb-color-chat-text-received);
    align-self: flex-start;
    border-bottom-left-radius: var(--wb-radius-sm);
    box-shadow: var(--wb-shadow-sm);
}

.chat-timestamp {
    font-size: var(--wb-font-size-xs);
    color: var(--wb-color-chat-timestamp);
    margin-top: var(--wb-space-1);
}

.chat-input-area {
    padding: var(--wb-space-4);
    background: var(--wb-color-surface);
    border-top: 1px solid var(--wb-color-border);
}

.chat-typing-indicator {
    color: var(--wb-color-chat-typing);
    font-size: var(--wb-font-size-sm);
    padding: var(--wb-space-2) var(--wb-space-4);
}

.chat-status--online {
    color: var(--wb-color-chat-online);
}

.chat-status--offline {
    color: var(--wb-color-chat-offline);
}

/* ==========================================
   Video Call Components (Future Feature)
   ========================================== */

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--wb-color-video-background);
    border-radius: var(--wb-radius-xl);
    overflow: hidden;
}

.video-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-pip {
    position: absolute;
    bottom: var(--wb-space-4);
    right: var(--wb-space-4);
    width: 120px;
    height: 90px;
    border-radius: var(--wb-radius-lg);
    border: 2px solid var(--wb-color-video-pip-border);
    box-shadow: var(--wb-shadow-lg);
    overflow: hidden;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--wb-space-6);
    background: var(--wb-color-video-controls-bg);
    display: flex;
    justify-content: center;
    gap: var(--wb-space-4);
}

.video-control-btn {
    width: 56px;
    height: 56px;
    border-radius: var(--wb-radius-full);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--wb-transition-fast) var(--wb-ease-default);
}

.video-control-btn:hover {
    transform: scale(1.1);
}

.video-control-btn--mute {
    background: var(--wb-color-video-mute);
    color: var(--wb-color-video-controls-text);
}

.video-control-btn--end {
    background: var(--wb-color-video-end-call);
    color: var(--wb-color-video-controls-text);
}

.video-control-btn--default {
    background: rgba(255, 255, 255, 0.2);
    color: var(--wb-color-video-controls-text);
}

/* ==========================================
   Animations & Transitions
   ========================================== */

/* Smooth page transitions */
.page-transition {
    animation: fadeIn var(--wb-transition-normal) var(--wb-ease-out);
}

/* Page transition classes for navigation */
.page-fade-out {
    opacity: 0;
    transition: opacity var(--wb-transition-normal) var(--wb-ease-out);
}

.page-fade-in {
    animation: pageFadeIn var(--wb-transition-normal) var(--wb-ease-out);
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s var(--wb-ease-in-out) infinite;
}

/* ==========================================
   Utility Classes
   ========================================== */

/* Button Reset - removes all default button styling for custom card buttons */
.btn-reset {
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Pillbox button shape - overrides MudBlazor button radius */
.pillbox,
.mud-button-root.pillbox {
    border-radius: 9999px !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-1 {
    margin-top: var(--wb-space-1);
}

.mt-2 {
    margin-top: var(--wb-space-2);
}

.mt-3 {
    margin-top: var(--wb-space-4);
}

.mt-4 {
    margin-top: var(--wb-space-6);
}

.mb-1 {
    margin-bottom: var(--wb-space-1);
}

.mb-2 {
    margin-bottom: var(--wb-space-2);
}

.mb-3 {
    margin-bottom: var(--wb-space-4);
}

.mb-4 {
    margin-bottom: var(--wb-space-6);
}

.gap-1 {
    gap: var(--wb-space-1);
}

.gap-2 {
    gap: var(--wb-space-2);
}

.gap-3 {
    gap: var(--wb-space-4);
}

.gap-4 {
    gap: var(--wb-space-6);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ==========================================
   Questionnaire Layout - Full screen, no borders
   Override MudBlazor defaults for clean questionnaire UI
   ========================================== */
.mud-layout,
.mud-main-content {
    background-color: var(--wb-color-surface) !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 100vh;
}

.mud-layout {
    display: flex;
    flex-direction: column;
}

/* ADO #373 — Der Chat misst seine Höhe selbst; die Hüllen um ihn dürfen dann keine
   volle Viewport-Höhe mehr FORDERN. Nur solange die Messung aktiv ist
   (html.wb-chat-measured setzt und entfernt chatScrollHelper.observeViewportHeight),
   also ausschliesslich auf /nachrichten und nur mit funktionierendem JS.

   Zwei unabhängige Quellen für den Überhang, beide hier abgeräumt:

   1. Was ÜBER der Seite liegt. Am deployten uat gemessen: die Seite sass korrekt
      (Oberkante 20px unter dem Deployment-Banner, Höhe 725 = 745 − 20, Unterkante exakt
      am Viewport-Rand) — aber das Dokument war 765px hoch und liess sich um genau diese
      20px scrollen, weil .mud-main-content UNTER dem Banner nochmals 100vh reservierte.
      Das Banner steckt in .mud-layout ÜBER .mud-main-content (BlankLayout.razor), der
      Überhang ist also exakt seine Höhe. Auf Produktion gibt es das Banner nicht — dieser
      Punkt allein wäre dort ein No-Op.

   2. Der Unterschied zwischen 100vh und dem sichtbaren Bereich. `vh` löst in Safari und
      Chrome gegen den GROSSEN Viewport auf (Adressleiste eingefahren) — genau der Grund,
      aus dem es dvh/svh überhaupt gibt. Auf einem iPhone mit sichtbaren Leisten ist
      100vh damit um deren Höhe grösser als der sichtbare Bereich, ganz ohne Banner. Das
      ist der Teil, der in Produktion trägt — und er hängt an html/body genauso wie an
      den drei Hüllen darunter: bliebe `html, body { min-height: 100vh }` stehen, wäre
      der Scrollweg unverändert da und die Regel wirkungslos.

   Warum das auf iOS mehr ist als Kosmetik: Safari SCROLLT beim Fokussieren das Dokument,
   um das Eingabefeld sichtbar zu machen, und dafür genügt ihm jeder noch so kleine
   Überhang. Ein Dokument ohne Scrollweg kann es nicht verschieben. Der eigentliche Schutz
   bleibt position:fixed am Tastatur-Zustand (ChatPage.razor.css) — das hier schliesst das
   Fenster davor, in dem die Seite noch im Fluss liegt.

   min-height NIMMT nur eine Untergrenze, es deckelt nichts: wo der Inhalt (z. B. im
   Tablet-Band, wo .nachrichten-page weiter min-height:100vh trägt) mehr Höhe braucht,
   wächst die Hülle unverändert mit. */
html.wb-chat-measured,
html.wb-chat-measured body,
html.wb-chat-measured .mud-layout,
html.wb-chat-measured .mud-main-content,
html.wb-chat-measured #app {
    min-height: 0;
}

.mud-main-content {
    flex: 1;
}

.questionnaire-container,
.question-card,
.card-content {
    background-color: var(--wb-color-surface) !important;
    border: none !important;
    box-shadow: none !important;
}

/* MudBlazor input adornment - faint unit text (cm, kg, etc.) */
.mud-input-adornment-text,
.mud-input-adornment-end .mud-typography,
p.mud-input-adornment-text {
    color: var(--wb-color-text-faint) !important;
    font-size: var(--wb-font-size-sm) !important;
    font-weight: 400 !important;
}

/* ==========================================
   Help List Styles (for MarkupString content)
   Global styles needed because help-list is rendered
   via MarkupString and doesn't get CSS isolation scope
   ========================================== */
.question-help .help-list {
    margin: var(--wb-space-2) 0 var(--wb-space-4) 0;
    padding-left: 0;
    list-style-type: disc;
    list-style-position: inside;
}

.question-help .help-list li {
    margin-bottom: var(--wb-space-1);
    padding-left: 0;
}

/* ==========================================
   MudBlazor Component Overrides
   ========================================== */

/* Buttons - pill shape using design token */
.mud-button-root {
    border-radius: var(--wb-radius-button) !important;
}

/* Popovers/menus - small radius */
.mud-popover {
    border-radius: 4px !important;
}

.mud-menu-list {
    border-radius: 4px !important;
}

.mud-list-item,
.mud-menu-item {
    border-radius: 0 !important;
}

/* Body scroll lock while Therapie-Hub overlay is mounted */
html.therapie-hub-overlay-lock,
html.therapie-hub-overlay-lock body {
    overflow: hidden !important;
}

/* ==========================================================================
   Legal-document page chrome — shared between /agb, /datenschutz, /widerruf
   and /einwilligung. The content itself comes from the *Content.razor
   components which use .legal-prose below.
   ========================================================================== */

.legal-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--wb-color-surface);
}

.legal-page__container {
    width: 100%;
    flex: 1;
    background-color: var(--wb-color-surface);
}

.legal-page__container > .legal-prose {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--wb-space-16) var(--wb-space-8);
}

@media (max-width: 768px) {
    .legal-page__container > .legal-prose {
        padding: var(--wb-space-8) var(--wb-space-4);
    }
}

/* ==========================================================================
   Legal-document typography (AGB, Datenschutz, Widerruf, Einwilligung)
   Shared between standalone pages (/agb, /datenschutz, /widerruf,
   /einwilligung) and the registration consent dialog (/willkommen).
   Single source of truth so the four content components don't each ship
   their own scoped copy of the same typography.
   ========================================================================== */

.legal-prose {
    font-family: 'Manrope', sans-serif;
    color: var(--wb-color-text-primary);
}

.legal-prose .legal-prose__title {
    font-weight: 500;
    font-size: var(--wb-font-size-5xl);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 var(--wb-space-4) 0;
}

.legal-prose .legal-prose__updated {
    font-weight: 500;
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    color: var(--wb-color-text-secondary);
    margin: 0 0 var(--wb-space-10) 0;
}

.legal-prose .legal-prose__draft-banner {
    background-color: rgba(255, 196, 0, 0.12);
    border-left: 4px solid #d99500;
    padding: var(--wb-space-4) var(--wb-space-5);
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wb-font-size-sm);
    line-height: 1.5;
    margin: 0 0 var(--wb-space-8) 0;
}

.legal-prose section {
    margin-top: var(--wb-space-12);
}

.legal-prose section:first-of-type {
    margin-top: 0;
}

.legal-prose h2 {
    font-weight: 500;
    font-size: var(--wb-font-size-2xl);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--wb-space-4) 0;
}

.legal-prose h3 {
    font-weight: 500;
    font-size: var(--wb-font-size-lg);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: var(--wb-space-4) 0 var(--wb-space-2) 0;
}

.legal-prose p {
    font-weight: 500;
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    margin: 0 0 var(--wb-space-4) 0;
}

.legal-prose ul,
.legal-prose ol {
    font-weight: 500;
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    margin: 0 0 var(--wb-space-4) 0;
    padding-left: var(--wb-space-6);
}

.legal-prose li {
    margin-bottom: var(--wb-space-2);
}

.legal-prose a {
    color: var(--wb-color-text-primary);
    text-decoration: underline;
}

.legal-prose a:hover {
    color: var(--wb-color-primary);
}

.legal-prose strong {
    font-weight: 600;
}

/* When the prose renders inside a small dialog/expansion panel, shrink the
   title so it doesn't dwarf the surrounding UI. */
.legal-prose--compact .legal-prose__title {
    font-size: var(--wb-font-size-2xl);
}

.legal-prose--compact section {
    margin-top: var(--wb-space-6);
}

@media (max-width: 768px) {
    .legal-prose .legal-prose__title {
        font-size: var(--wb-font-size-3xl);
    }

    .legal-prose h2 {
        font-size: var(--wb-font-size-lg);
    }

    .legal-prose h3 {
        font-size: var(--wb-font-size-md);
    }
}

/* Route-level hide for the floating Trusted Shops badge. Toggled via
   trustbadgeInterop.setHiddenForRoute() (adds .wb-hide-trustbadge on <html>).
   The badge is injected asynchronously at body level, so a CSS rule — not an
   inline display:none on a node that may not exist yet — is the race-proof hide.
   Used on the video-call page, where the bottom-left badge overlaps the call
   controls (mic button). */
html.wb-hide-trustbadge [id*="trustbadge"] {
    display: none !important;
}

/* ADO #327 → ADO #373: on mobile /nachrichten the composer owns the bottom edge — the
   floating elements (Trusted Shops badge bottom-left, FAQ-assistant launcher bottom-right,
   feedback launcher/teaser where present) overlapped the input and send button. Messenger
   pattern: nothing floats over a composer.
   Still required after #373, and for a stronger reason than "they overlap": the chat is now
   a FULL-SCREEN view whose own header, history and composer fill the visible viewport, so a
   floating shop widget on top of it is a context break, not just a collision. The FAQ
   assistant is not lost — since #373 it has its own slim entry row directly above the
   composer (ChatPage.razor). The chat page's own chrome suppression (rating bar, shop header)
   lives in ChatPage.razor.css, where it is scoped to the page.
   Desktop is untouched (the composer sits inside the card there). :has() instead of a JS
   route toggle — race-proof against the async badge injection and no component lifecycle
   code. .nachrichten-page is unique to ChatPage; the breakpoint matches its mobile layout
   (ChatPage.razor.css). */
@media (max-width: 640px) {
    body:has(.nachrichten-page) .assistant-launcher,
    body:has(.nachrichten-page) .feedback-launcher,
    body:has(.nachrichten-page) .feedback-teaser,
    body:has(.nachrichten-page) [id*="trustbadge"] {
        display: none !important;
    }
}