@import '_content/wellbase.patient.shared/wellbase.patient.shared.mtzxm3whvb.bundle.scp.css';

/* /Components/Dev/PaletteTesterButton.razor.rz.scp.css */
/* Schwebender Dev-Starter am rechten Rand — unten über dem FAQ-Assistent-FAB statt vertikal
   mittig: die Mittenposition lag exakt über dem rechten Pfeil des Team-Karussells und hat
   dessen Klicks geschluckt (ADO #242). Die Slider-Leiste unten bleibt frei genug. */
.wb-palette-launch[b-sk2dk3dned] {
    position: fixed;
    bottom: 96px;
    right: 0;
    z-index: 2147483646;
    display: inline-flex;
    align-items: center;
    background: #0f1115;
    color: #fff;
    border: none;
    border-radius: 10px 0 0 10px;
    padding: 11px 13px;
    font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    opacity: 0.82;
    transition: opacity 0.15s ease, padding-right 0.15s ease;
}

.wb-palette-launch:hover[b-sk2dk3dned] {
    opacity: 1;
    padding-right: 18px;
}
/* /Components/Layout/BlankLayout.razor.rz.scp.css */
/* BlankLayout - minimal layout for questionnaire pages */
/* Styling handled by global app.css overrides */
/* /Components/Pages/AngebotCheckoutPage.razor.rz.scp.css */
.payment-page[b-dcnord87vh] {
    min-height: 100vh;
    background: var(--mud-palette-background, #fafafa);
    padding: 24px 16px;
}

.payment-container[b-dcnord87vh] {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.logo-header[b-dcnord87vh] {
    text-align: center;
    margin-bottom: 24px;
}

.logo-image[b-dcnord87vh] {
    max-width: 200px;
    height: auto;
}

.payment-title[b-dcnord87vh] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.payment-subtitle[b-dcnord87vh] {
    color: var(--mud-palette-text-secondary, #555);
    margin: 0 0 24px;
}

.payment-hint[b-dcnord87vh] {
    color: var(--mud-palette-text-secondary, #555);
    margin: 0 0 24px;
    line-height: 1.6;
}

.seller-block[b-dcnord87vh] {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
}

.seller-row[b-dcnord87vh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.seller-address[b-dcnord87vh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seller-name[b-dcnord87vh] {
    font-weight: 600;
    font-size: 1.1rem;
}

.seller-logo[b-dcnord87vh] {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
}

.legal-footer[b-dcnord87vh] {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.legal-links[b-dcnord87vh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
}

.legal-links a[b-dcnord87vh] {
    color: var(--wb-color-primary, #0B1E11);
    text-decoration: none;
}

.legal-links a:hover[b-dcnord87vh] {
    text-decoration: underline;
}

.legal-separator[b-dcnord87vh] {
    color: var(--mud-palette-text-secondary, #999);
}

.legal-eu-logo img[b-dcnord87vh] {
    width: 110px;
    height: auto;
    display: block;
}

.section-title[b-dcnord87vh] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 16px 0 8px;
}

.order-summary[b-dcnord87vh] {
    margin-bottom: 24px;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.summary-line[b-dcnord87vh] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.summary-total[b-dcnord87vh] {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,.1);
    font-weight: 600;
}

.stripe-payment-section[b-dcnord87vh] {
    margin: 24px 0 16px;
}

.stripe-element-container[b-dcnord87vh] {
    margin: 12px 0 16px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
    background: white;
}

.stripe-error-message[b-dcnord87vh] {
    color: var(--mud-palette-error, #c62828);
    margin-bottom: 12px;
    font-size: .9rem;
}

.primary-button[b-dcnord87vh] {
    width: 100%;
    padding: 14px;
    background: var(--wb-color-primary, #0B1E11);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin: 8px 0;
}

.primary-button:disabled[b-dcnord87vh] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/AppointmentsPage.razor.rz.scp.css */
/* "Meine Termine" — Landing-Design v2, gleicher Header-Aufbau wie die übrigen
   Mein-Bereich-Unterseiten (Back-Pill + Eyebrow + navy H1 + Lede), damit der
   Übergang von /mein-bereich → /appointments visuell konsistent bleibt.
   Hero/Reihen-Komponenten (AppointmentHero, AppointmentRow, …) behalten ihr
   eigenes Scoped-CSS. */
.appointments-page[b-ssdaje5685] {
    min-height: 100vh;
    background: #ffffff;
    font-family: var(--wb-font-family, 'Manrope', system-ui, sans-serif);
    color: var(--wb-booking-text, #1E293B);
}

.appointments-page__content[b-ssdaje5685] {
    max-width: var(--wb-portal-max, 720px);
    margin: 0 auto;
    padding: var(--wb-space-4, 16px);
    padding-bottom: var(--wb-space-12, 48px);
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4, 16px);
}

/* ---- Editorial-Header ---- */
.appointments-page__header[b-ssdaje5685] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0 4px;
}

/* Back-Pill: Ghost-CTA-Sprache aus dem Landing-Hero. */
.appointments-page__back[b-ssdaje5685] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(11, 30, 17, 0.18);
    border-radius: 100px;
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
    margin-bottom: 26px;
}

.appointments-page__back:hover[b-ssdaje5685] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border-color: rgba(11, 30, 17, 0.4);
}

.appointments-page__back:focus-visible[b-ssdaje5685] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: 3px;
}

.appointments-page__title[b-ssdaje5685] {
    margin: 0;
    font-size: clamp(30px, 4.5vw, 40px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--wb-landing-heading, #0B1E11);
}

.appointments-page__subtitle[b-ssdaje5685] {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.appointments-page__loading[b-ssdaje5685] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-3, 12px);
    padding: var(--wb-space-6, 24px);
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 14px;
}

.appointments-page__error[b-ssdaje5685] {
    margin: 0;
}

.appointments-page__section[b-ssdaje5685] {
    margin-top: var(--wb-space-4, 16px);
}

/* Sektions-Überschrift in der getrackten Eyebrow-Sprache der Landing. */
.appointments-page__section-title[b-ssdaje5685] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11, 30, 17, 0.55);
}

.appointments-page__section-count[b-ssdaje5685] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    background: #e9f4ec;
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 700px) {
    .appointments-page__header[b-ssdaje5685] {
        padding-top: 16px;
    }
}

/* ─── Bezahlt, Termin noch offen (ADO #356) ──────────────────────────────────
   Ruhig gehalten, aber ganz oben: der Fall ist selten und soll nicht wie ein
   bevorstehender Termin aussehen — er ist eine offene Aufgabe bzw. (wenn der
   Befund nie freigegeben wird) der sichtbar gemachte Lückenfall. */

.pending-consultation[b-ssdaje5685] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 30, 17, 0.12);
    background: #ffffff;
}

.pending-consultation__body[b-ssdaje5685] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pending-consultation__title[b-ssdaje5685] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
}

.pending-consultation__hint[b-ssdaje5685] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.pending-consultation__cta[b-ssdaje5685] {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--wb-landing-heading, #0B1E11);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pending-consultation__cta:hover[b-ssdaje5685] {
    background: #07120b;
}

@media (max-width: 599px) {
    .pending-consultation[b-ssdaje5685] {
        flex-direction: column;
        align-items: stretch;
    }
    .pending-consultation__cta[b-ssdaje5685] {
        width: 100%;
    }
}
/* /Components/Pages/BmiRechnerPage.razor.rz.scp.css */
/* BMI Rechner Page - Exact Doctrinus Design */
/* Matches https://www.doctrinus.de/pages/bmi-rechner */

/* Design tokens from Doctrinus */
:root[b-b026iiv357] {
    --bmi-bg: #f7fbff;
    --bmi-card: #ffffff;
    --bmi-ink: #0d2013;
    --bmi-muted: #6e8a76;
    --bmi-accent: #3b82f6;
    --bmi-healthy: #10b981;
    --bmi-warn: #fbbf24;
    --bmi-danger: #ef4444;
    --bmi-underweight: #60a5fa;
    --bmi-radius: 20px;
}

.bmi-page[b-b026iiv357] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bmi-bg);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.bmi-page__content[b-b026iiv357] {
    flex: 1;
    padding: 24px 16px 48px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* BMI Calculator Card */
.bmi-calculator[b-b026iiv357] {
    background: var(--bmi-card);
    border-radius: var(--bmi-radius);
    padding: 32px 24px;
    box-shadow: 0 4px 24px rgba(15, 29, 58, 0.06);
}

.bmi-calculator__subtitle[b-b026iiv357] {
    font-size: 15px;
    color: var(--bmi-muted);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 28px 0;
}

/* Input Fields */
.bmi-field[b-b026iiv357] {
    margin-bottom: 20px;
}

.bmi-label[b-b026iiv357] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--bmi-ink);
    margin-bottom: 8px;
}

.bmi-input[b-b026iiv357] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--bmi-ink);
    background: #f3f8ff;
    border: 1px solid #dfeee2;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.bmi-input[b-b026iiv357]::placeholder {
    color: #94a3b8;
}

.bmi-input:focus[b-b026iiv357] {
    border-color: var(--bmi-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
}

/* Remove number input spinners */
.bmi-input[type="number"][b-b026iiv357]::-webkit-outer-spin-button,
.bmi-input[type="number"][b-b026iiv357]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bmi-input[type="number"][b-b026iiv357] {
    -moz-appearance: textfield;
}

/* BMI Output Display */
.bmi-output[b-b026iiv357] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bmi-accent);
    text-align: center;
    margin: 28px 0 12px;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Category Badge */
.bmi-category[b-b026iiv357] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin: 0 auto 20px;
    width: fit-content;
    display: flex;
    justify-content: center;
}

/* Qualification Notice Box */
.bmi-notice[b-b026iiv357] {
    background: #eef6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--bmi-ink);
    line-height: 1.5;
    text-align: center;
}

.bmi-notice strong[b-b026iiv357] {
    font-weight: 700;
    color: var(--bmi-accent);
}

/* BMI Slider */
.bmi-slider-container[b-b026iiv357] {
    margin-top: 8px;
    padding: 0 4px;
}

.bmi-slider-track[b-b026iiv357] {
    position: relative;
    height: 12px;
    background: linear-gradient(to right,
            var(--bmi-underweight) 0%,
            var(--bmi-healthy) 28%,
            var(--bmi-warn) 50%,
            var(--bmi-danger) 67%,
            var(--bmi-danger) 100%);
    border-radius: 999px;
}



/* CTA Card - Hero style with text overlay on image */
.bmi-cta-card[b-b026iiv357] {
    display: block;
    position: relative;
    border-radius: var(--bmi-radius);
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    margin-top: 24px;
    min-height: 480px;
}

.bmi-cta-card__image[b-b026iiv357] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform 0.4s ease;
}

.bmi-cta-card:hover .bmi-cta-card__image[b-b026iiv357] {
    transform: scale(1.03);
}

.bmi-cta-card__content[b-b026iiv357] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
    z-index: 1;
}

.bmi-cta-card__text[b-b026iiv357] {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bmi-cta-card__button[b-b026iiv357] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #ffffff;
    color: #000000;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bmi-cta-card:hover .bmi-cta-card__button[b-b026iiv357] {
    background: #f8f8f8;
    transform: scale(1.02);
}

/* Responsive adjustments */
@media (min-width: 600px) {
    .bmi-page__content[b-b026iiv357] {
        padding: 40px 24px 60px;
    }

    .bmi-calculator[b-b026iiv357] {
        padding: 40px 36px;
    }

    .bmi-output[b-b026iiv357] {
        font-size: 3.5rem;
    }
}

@media (min-width: 800px) {
    .bmi-page__content[b-b026iiv357] {
        max-width: 520px;
    }

    .bmi-calculator[b-b026iiv357] {
        padding: 48px 44px;
    }
}
/* /Components/Pages/BookPaidConsultationPage.razor.rz.scp.css */
/* ─── Nachbuchung einer bezahlten Sprechstunde (ADO #356) ────────────────────
   Bewusst dieselbe Formsprache wie /checkout/booking: der Patient landet aus einer SMS direkt
   hier, und die Seite soll aussehen wie der Buchungsschritt, den er aus dem Checkout kennt.
   Die Klassen sind dupliziert statt geteilt, weil Scoped-CSS nicht über die Komponentengrenze
   greift (gleiche Begründung wie in CheckoutBookingLockedCard.razor.css). */

.booking-checkout-page[b-hkcbrs8vyh] {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--wb-landing-wash-top, #f1f7f2) 0%, #ffffff 480px);
    padding: 24px 16px 64px;
}

.booking-checkout-container[b-hkcbrs8vyh] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.logo-header[b-hkcbrs8vyh] {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.logo-image[b-hkcbrs8vyh] {
    height: 32px;
    width: auto;
}

.booking-checkout__back[b-hkcbrs8vyh] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 8px 0;
    color: var(--wb-landing-heading, #0B1E11);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.booking-checkout__back:hover[b-hkcbrs8vyh] {
    color: #07120b;
}

.booking-checkout__back svg[b-hkcbrs8vyh] {
    flex: 0 0 auto;
}

.booking-checkout__loading[b-hkcbrs8vyh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.loading-spinner[b-hkcbrs8vyh] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(11, 30, 17, 0.12);
    border-top-color: var(--wb-landing-heading, #0B1E11);
    border-radius: 50%;
    animation: book-paid-spin-b-hkcbrs8vyh 0.8s linear infinite;
}

@keyframes book-paid-spin-b-hkcbrs8vyh {
    to { transform: rotate(360deg); }
}

/* Sperre: informierend, kein CTA — es gibt nichts zu tun außer zu warten. */
.booking-locked[b-hkcbrs8vyh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 30, 17, 0.12);
    background: var(--wb-landing-wash-top, #f1f7f2);
    text-align: left;
}

.booking-locked__icon[b-hkcbrs8vyh] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--wb-landing-heading, #0B1E11);
}

.booking-locked__body[b-hkcbrs8vyh] {
    flex: 1;
    min-width: 0;
}

.booking-locked__body h3[b-hkcbrs8vyh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem;
}

.booking-locked__body p[b-hkcbrs8vyh] {
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.45;
}

/* „Bereits bezahlt" — beantwortet die erste Frage, die der Patient hier hat. */
.booking-paid-note[b-hkcbrs8vyh] {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 30, 17, 0.12);
    background: #ffffff;
}

.booking-paid-note h3[b-hkcbrs8vyh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem;
}

.booking-paid-note p[b-hkcbrs8vyh] {
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 599px) {
    .booking-checkout-page[b-hkcbrs8vyh] {
        padding: 12px 0 48px;
    }
    .booking-checkout-container[b-hkcbrs8vyh] {
        gap: 12px;
        padding: 0 12px;
    }
}
/* /Components/Pages/CheckoutBookingPage.razor.rz.scp.css */
.booking-checkout-page[b-gozg1d1vzc] {
    min-height: 100vh;
    /* Blaugrauer Landing-Wash, nach unten in Weiß auslaufend. */
    background: linear-gradient(180deg, var(--wb-landing-wash-top, #f1f7f2) 0%, #ffffff 480px);
    padding: 24px 16px 64px;
}

.booking-checkout-container[b-gozg1d1vzc] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.logo-header[b-gozg1d1vzc] {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.logo-image[b-gozg1d1vzc] {
    height: 32px;
    width: auto;
}

.booking-checkout__back[b-gozg1d1vzc] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 8px 0;
    color: var(--wb-landing-heading, #0B1E11);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.booking-checkout__back:hover[b-gozg1d1vzc] {
    color: #07120b;
}

.booking-checkout__back svg[b-gozg1d1vzc] {
    flex: 0 0 auto;
}

.booking-checkout__loading[b-gozg1d1vzc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.loading-spinner[b-gozg1d1vzc] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(11, 30, 17, 0.12);
    border-top-color: var(--wb-landing-heading, #0B1E11);
    border-radius: 50%;
    animation: booking-checkout-spin-b-gozg1d1vzc 0.8s linear infinite;
}

@keyframes booking-checkout-spin-b-gozg1d1vzc {
    to { transform: rotate(360deg); }
}

@media (max-width: 599px) {
    .booking-checkout-page[b-gozg1d1vzc] {
        padding: 12px 0 48px;
    }
    .booking-checkout-container[b-gozg1d1vzc] {
        gap: 12px;
        padding: 0 12px;
    }
}
/* /Components/Pages/CheckoutLabAppointmentPage.razor.rz.scp.css */
/* Scoped styles of the venous appointment step. The container and the action row mirror the other
   checkout step pages; the sections only need vertical rhythm. */

.checkout-lab-appointment-page[b-cmb9o6770b] {
    width: 100%;
}

.checkout-lab-appointment-page .checkout-step-actions[b-cmb9o6770b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
/* /Components/Pages/CheckoutPaymentPage.razor.rz.scp.css */
.payment-page[b-khj0o3dava] {
    min-height: 100vh;
    /* Blaugrauer Landing-Wash statt Mud-Grau. */
    background: linear-gradient(180deg, var(--wb-landing-wash-top, #f1f7f2) 0%, #ffffff 70%);
    padding: 24px 16px;
}

.payment-container[b-khj0o3dava] {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 24px;
    background: white;
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 70px -42px rgba(11, 30, 17, 0.4);
}

.logo-header[b-khj0o3dava] {
    text-align: center;
    margin-bottom: 24px;
}

.logo-image[b-khj0o3dava] {
    max-width: 200px;
    height: auto;
}

.payment-title[b-khj0o3dava] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 8px;
}

.payment-subtitle[b-khj0o3dava] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0 0 24px;
}

.section-title[b-khj0o3dava] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 16px 0 8px;
}

.order-summary[b-khj0o3dava] {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--wb-landing-wash-top, #f1f7f2);
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 12px;
}

.summary-line[b-khj0o3dava] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.summary-total[b-khj0o3dava] {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(11, 30, 17, 0.1);
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

/* Paketpreis-Disclaimer — small-print under the total, mirroring the product
   detail page footnote (#857). Inside the washed order-summary card, so a touch
   darker than on the white review sidebar to keep contrast. */
.summary-note[b-khj0o3dava] {
    margin: 10px 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.62));
}

.stripe-payment-section[b-khj0o3dava] {
    margin: 24px 0 16px;
}

.stripe-element-container[b-khj0o3dava] {
    margin: 12px 0 16px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
    background: white;
}

.stripe-error-message[b-khj0o3dava] {
    color: var(--mud-palette-error, #c62828);
    margin-bottom: 12px;
    font-size: .9rem;
}

.primary-button[b-khj0o3dava] {
    width: 100%;
    padding: 14px;
    /* Landing-Navy-Pille mit weichem Schatten (Hero-CTA-Sprache). */
    background: var(--wb-landing-heading, #0B1E11);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease, background 0.25s ease;
    margin: 8px 0;
}

.primary-button:hover:not(:disabled)[b-khj0o3dava] {
    background: #07120b;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.6);
}

.primary-button:disabled[b-khj0o3dava] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.secondary-button[b-khj0o3dava] {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: rgba(11, 30, 17, 0.55);
    border: none;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 8px;
}

.secondary-button:hover[b-khj0o3dava] {
    color: var(--wb-landing-heading, #0B1E11);
}
/* /Components/Pages/CheckoutReviewPage.razor.rz.scp.css */
.review-page[b-1isdqob92p] {
    min-height: 100vh;
    /* Blaugrauer Landing-Wash, nach unten in Weiß auslaufend (Wall-Band-Gefühl). */
    background: linear-gradient(180deg, var(--wb-landing-wash-top, #f1f7f2) 0%, #ffffff 480px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.review-container[b-1isdqob92p] {
    max-width: 1180px;
    width: 100%;
}

.logo-header[b-1isdqob92p] {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-image[b-1isdqob92p] {
    height: 24px;
    width: auto;
    display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Two-column desktop layout
 *
 * Desktop ≥ 960px: main content (left, scrolls) + sticky sidebar (right,
 * 360px). Sidebar holds the cart summary, booking status, the primary CTA
 * and legal footer so the "Weiter zur Zahlung" button is always in view
 * while the customer scrolls through profile selection, upsells and address.
 *
 * Below 960px: single column, sidebar drops below main content (cart-after-
 * content is the convention on mobile checkouts since the customer reads
 * top-down).
 * ------------------------------------------------------------------------ */
.checkout-grid[b-1isdqob92p] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.checkout-main[b-1isdqob92p] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checkout-main > section[b-1isdqob92p],
.checkout-main > div[b-1isdqob92p] {
    margin: 0;
}

.checkout-sidebar[b-1isdqob92p] {
    min-width: 0;
}

.checkout-sidebar__sticky[b-1isdqob92p] {
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(11, 30, 17, 0.06);
}

@media (min-width: 960px) {
    .checkout-grid[b-1isdqob92p] {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 2rem;
    }

    /* Sticky needs (a) the grid cell to stretch to row height — guaranteed
       by grid's default align-items: stretch — and (b) no overflow:hidden on
       any ancestor. The inner wrapper sticks within the (now tall) grid cell
       as the customer scrolls through the left column. */
    .checkout-sidebar__sticky[b-1isdqob92p] {
        position: sticky;
        top: 1.5rem;
    }
}

/* Loading */
.loading-state[b-1isdqob92p] {
    text-align: center;
    padding: 4rem 0;
}

.loading-spinner[b-1isdqob92p] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(11, 30, 17, 0.12);
    border-top: 3px solid var(--wb-landing-heading, #0B1E11);
    border-radius: 50%;
    animation: spin-b-1isdqob92p 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-1isdqob92p {
    to {
        transform: rotate(360deg);
    }
}

.loading-state p[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

/* Error */
.error-state[b-1isdqob92p] {
    text-align: center;
    padding: 2rem 0;
}

.error-icon[b-1isdqob92p] {
    color: #ef4444;
    margin-bottom: 1rem;
}

.error-state h2[b-1isdqob92p] {
    font-size: 1.25rem;
    color: var(--wb-landing-heading, #0B1E11);
    margin-bottom: 0.5rem;
}

.error-state p[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin-bottom: 1.5rem;
}

/* Review Content */
.review-content[b-1isdqob92p] {
    text-align: left;
}

/* ---------------------------------------------------------------------------
 * Compact hero. Replaces the giant green check + "Fragebogen abgeschlossen"
 * confirmation pattern (which set the wrong mental anchor — this page is the
 * start of checkout, not the end of a flow). The completion fact is reduced
 * to a small badge so the customer's focus lands on the actual decisions
 * below (choose a profile, review cart, proceed to payment).
 * ------------------------------------------------------------------------ */
.review-hero[b-1isdqob92p] {
    margin: 0 0 1.5rem;
}

.review-hero__badge[b-1isdqob92p] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    border-radius: 999px;
    padding: 0.25rem 0.65rem 0.25rem 0.5rem;
    letter-spacing: 0.01em;
}

.review-hero__badge svg[b-1isdqob92p] {
    flex: 0 0 auto;
}

.review-hero__title[b-1isdqob92p] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0.75rem 0 0.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.review-hero__subtitle[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    max-width: 560px;
}

/* Requirements */
.requirements-section[b-1isdqob92p] {
    margin-bottom: 2rem;
    text-align: left;
}

.section-title[b-1isdqob92p] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem;
}

.section-description[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.85rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.requirement-card[b-1isdqob92p] {
    border: 2px solid rgba(11, 30, 17, 0.12);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    transition: border-color 0.2s;
}

.requirement-card.added[b-1isdqob92p] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.requirement-card.optional[b-1isdqob92p] {
    border-color: rgba(11, 30, 17, 0.12);
    border-style: dashed;
}

.requirement-card.blood-test-required[b-1isdqob92p] {
    border-color: rgba(11, 30, 17, 0.12);
}

.requirement-info[b-1isdqob92p] {
    flex: 1;
}

.requirement-info h3[b-1isdqob92p] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem;
}

.requirement-info p[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.blood-test-required-section[b-1isdqob92p] {
    margin: 1.5rem 0;
}

.blood-test-expiry-note[b-1isdqob92p] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #fff4d6;
    border: 1px solid #f0d97a;
    border-radius: 8px;
    color: #5a4710;
    font-size: 0.9rem;
    line-height: 1.4;
}

.blood-test-note[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(11, 30, 17, 0.12);
    line-height: 1.4;
    flex-basis: 100%;
}

.requirement-badge[b-1isdqob92p] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.25rem;
}

.requirement-badge.required[b-1isdqob92p] {
    background: #fef2f2;
    color: #dc2626;
}

.requirement-badge.optional[b-1isdqob92p] {
    background: #eff6ff;
    color: #2563eb;
}

.requirement-price[b-1isdqob92p] {
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 0.9rem;
}

.add-button[b-1isdqob92p] {
    background: var(--wb-landing-heading, #0B1E11);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

.add-button:hover[b-1isdqob92p] {
    background: #07120b;
}

.remove-button[b-1isdqob92p] {
    background: transparent;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    border: 1px solid rgba(11, 30, 17, 0.25);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms ease;
}

.remove-button:hover[b-1isdqob92p] {
    color: #dc2626;
    border-color: #dc2626;
}

.added-badge[b-1isdqob92p] {
    color: #22c55e;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Cart summary styles live in Sections/CheckoutCartSummary.razor.css —
   scoped CSS from the parent does not reach the child component. */

/* Buttons */
.checkout-button[b-1isdqob92p] {
    display: block;
    width: 100%;
    background: var(--wb-landing-heading, #0B1E11);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease, background 0.25s ease;
    margin: 0;
}

.checkout-button:hover:not(:disabled)[b-1isdqob92p] {
    background: #07120b;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.6);
}

.checkout-button:disabled[b-1isdqob92p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkout-blocked-hint[b-1isdqob92p] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.4;
}

.checkout-blocked-hint svg[b-1isdqob92p] {
    flex-shrink: 0;
    color: #f59e0b;
}

.checkout-blocked-hint a[b-1isdqob92p] {
    color: #92400e;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.checkout-blocked-hint a:hover[b-1isdqob92p] {
    color: #78350f;
}

.secondary-button[b-1isdqob92p] {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    border: none;
    padding: 0.25rem;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin: 0;
}

.secondary-button:hover[b-1isdqob92p] {
    color: var(--wb-landing-heading, #0B1E11);
}

/* ---------------------------------------------------------------------------
 * Shipping address section.
 *
 * Summary view is the happy path — collapsed read-only card with a single
 * "Adresse ändern" link. The edit view matches Stripe Payment Element's
 * outlined-input style (8px radius, thin neutral border, label above field)
 * so the section stays visually consistent when the Stripe Element mounts on
 * the same page. All colours come from the existing palette on this page.
 * ------------------------------------------------------------------------ */
/* Shipping address lives inside the sticky sidebar card alongside the cart
   summary and CTA. A top divider visually separates it from the cart above
   so the two sections feel like rows of one panel rather than nested cards. */
.shipping-address-section[b-1isdqob92p] {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 30, 17, 0.12);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shipping-address-section .section-title[b-1isdqob92p] {
    margin: 0;
    font-size: 1rem;
}

.shipping-address-section--summary[b-1isdqob92p] {
    /* Flat in sidebar — no nested card chrome. */
}

.shipping-address-section .section-description[b-1isdqob92p] {
    margin: 0;
}

/* Arzneimittel-Lieferung (ADO #192) — sits directly above the CTA. Same sidebar-row
   chrome as the shipping-address section: a top divider, no nested card. */
.delivery-choice[b-1isdqob92p] {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 30, 17, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.delivery-choice .section-title[b-1isdqob92p] {
    margin: 0;
    font-size: 1rem;
}

.shipping-address-summary[b-1isdqob92p] {
    color: var(--wb-landing-heading, #0B1E11);
    line-height: 1.5;
}

.shipping-address-summary__line[b-1isdqob92p] {
    font-size: 0.95rem;
}

.shipping-address-summary__edit[b-1isdqob92p] {
    align-self: flex-start;
    background: transparent;
    color: #0B1E11;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.shipping-address-summary__edit:hover[b-1isdqob92p] {
    color: #07120b;
}

/* ----- Edit form ----- */

.shipping-form[b-1isdqob92p] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shipping-form__row--split[b-1isdqob92p] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 0.75rem;
}

.shipping-form__row--split.shipping-form__row--split-even[b-1isdqob92p] {
    grid-template-columns: 1fr 2fr;
}

/* PLZ + Stadt row: 1:2 split. Relies on the shared class + a field modifier. */
.shipping-form__row--split:has(.shipping-form__field--zip)[b-1isdqob92p] {
    grid-template-columns: 1fr 2fr;
}

.shipping-form__field[b-1isdqob92p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shipping-form__label[b-1isdqob92p] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    letter-spacing: 0.01em;
}

.shipping-form__optional[b-1isdqob92p] {
    /* Lifted from slate-400 (2.6:1) to slate-500 (4.1:1) — stays a quiet
       "(optional)" marker but no longer disappears for low-vision users. */
    color: rgba(11, 30, 17, 0.55);
    font-weight: 400;
}

.shipping-form__error[b-1isdqob92p] {
    font-size: 0.8125rem;
    color: var(--wb-color-error, #c62828);
}

.shipping-form__input[b-1isdqob92p] {
    font: inherit;
    font-size: 0.95rem;
    color: #07120b;
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* ADO #373: >= 16px auf Touch-Geräten — darunter zoomt mobiles Safari beim
   Fokussieren automatisch in die Seite hinein und bleibt danach gezoomt (im
   Checkout heisst das: der "Weiter"-Button liegt ausserhalb des Sichtbereichs).
   Nur `any-pointer: coarse`, damit das Desktop-Formular unverändert bleibt.
   Ausführliche Begründung: app.css. */
@media (any-pointer: coarse) {
    .shipping-form__input[b-1isdqob92p] {
        font-size: var(--wb-font-size-md, 1rem);
    }
}

.shipping-form__input[b-1isdqob92p]::placeholder {
    color: rgba(11, 30, 17, 0.55);
}

.shipping-form__input:hover:not(:focus)[b-1isdqob92p] {
    border-color: rgba(11, 30, 17, 0.25);
}

.shipping-form__input:focus[b-1isdqob92p] {
    outline: none;
    border-color: #0B1E11;
    box-shadow: 0 0 0 3px rgba(11, 30, 17, 0.12);
}

.shipping-form__input--select[b-1isdqob92p] {
    padding-right: 2.25rem;
    /* Chevron — same stroke colour the Stripe Element uses for selects. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    cursor: pointer;
}

/* ----- Action row (Abbrechen / Übernehmen) ----- */

.shipping-address-actions[b-1isdqob92p] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.shipping-address-actions__cancel[b-1isdqob92p],
.shipping-address-actions__confirm[b-1isdqob92p] {
    flex: 1;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shipping-address-actions__cancel[b-1isdqob92p] {
    background: transparent;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    border: 1px solid rgba(11, 30, 17, 0.12);
}

.shipping-address-actions__cancel:hover[b-1isdqob92p] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border-color: rgba(11, 30, 17, 0.25);
    color: var(--wb-landing-heading, #0B1E11);
}

.shipping-address-actions__confirm[b-1isdqob92p] {
    background: #0B1E11;
    color: #ffffff;
    border: 1px solid #0B1E11;
}

.shipping-address-actions__confirm:hover:not(:disabled)[b-1isdqob92p] {
    background: #07120b;
    border-color: #07120b;
}

.shipping-address-actions__confirm:disabled[b-1isdqob92p] {
    background: rgba(11, 30, 17, 0.25);
    border-color: rgba(11, 30, 17, 0.25);
    color: var(--wb-landing-wash-top, #f1f7f2);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Saved-address picker (ADO #246 — Lieferadressen-Adressbuch).
 *
 * Only rendered once the patient has ≥1 saved address; replaces the summary/
 * form block above entirely for that case. Radio-card styling mirrors the
 * existing Arzneimittel-delivery-choice radio group elsewhere in the app
 * (MedicationDeliveryChoice.razor.css) so the picker feels like a native part
 * of this page rather than a bolted-on control.
 * ------------------------------------------------------------------------ */
.address-option-list[b-1isdqob92p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.address-option[b-1isdqob92p] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.address-option:hover[b-1isdqob92p] {
    border-color: rgba(11, 30, 17, 0.35);
}

.address-option--selected[b-1isdqob92p] {
    border-color: var(--wb-landing-heading, #0B1E11);
    background: var(--wb-landing-wash-top, #f1f7f2);
}

.address-option--disabled[b-1isdqob92p] {
    opacity: 0.55;
    cursor: not-allowed;
}

.address-option__radio[b-1isdqob92p] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--wb-landing-heading, #0B1E11);
}

.address-option__body[b-1isdqob92p] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.address-option__label[b-1isdqob92p] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.address-option__detail[b-1isdqob92p] {
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    line-height: 1.4;
}

.address-option__badge[b-1isdqob92p] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}

.address-option-opt-in[b-1isdqob92p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    cursor: pointer;
}

.address-option-opt-in input[type="checkbox"][b-1isdqob92p] {
    accent-color: var(--wb-landing-heading, #0B1E11);
}

/* Debug section - only visible in DEBUG builds */
.debug-section[b-1isdqob92p] {
    text-align: center;
}

.debug-button[b-1isdqob92p] {
    display: block;
    width: 100%;
    background: #fef3c7;
    color: #92400e;
    border: 2px dashed #f59e0b;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}

.debug-button:hover[b-1isdqob92p] {
    background: #fde68a;
}

.debug-button:disabled[b-1isdqob92p] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .review-page[b-1isdqob92p] {
        padding: 1.25rem 1rem 3rem;
    }

    .review-hero__title[b-1isdqob92p] {
        font-size: 1.4rem;
    }

    .checkout-sidebar__sticky[b-1isdqob92p] {
        padding: 1rem;
    }

    .requirement-card[b-1isdqob92p] {
        flex-direction: column;
        align-items: flex-start;
    }

    .add-button[b-1isdqob92p] {
        align-self: flex-end;
    }
}


/* Stripe Payment Section */
.stripe-payment-section[b-1isdqob92p] {
    text-align: left;
    margin-bottom: 1.5rem;
}

.stripe-payment-section .section-title[b-1isdqob92p] {
    margin-bottom: 1rem;
}

.stripe-element-container[b-1isdqob92p] {
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    min-height: 100px;
    background: #ffffff;
}

.stripe-error-message[b-1isdqob92p] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

.legal-footer-section[b-1isdqob92p] {
    padding-top: 0.75rem;
    margin: 0;
    border-top: 1px solid rgba(11, 30, 17, 0.1);
}

/* ─── Booking status card ────────────────────────────────────────────────
   Styles moved to the subcomponent's own scoped CSS
   (Sections/CheckoutBookingStatusCard.razor.css). Page-scoped CSS cannot
   reach the child component's markup without ::deep, so keeping them here
   left the card unstyled. */

/* ─── Therapy legal notes (collapsed-by-default, full width at page end) ── */

.therapy-legal[b-1isdqob92p] {
    margin-top: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 14px;
    /* No overflow:hidden here — it would clip the global :focus-visible outline
       (outline-offset: 2px, drawn outside the button). The toggle rounds its own
       corners instead so the hover background still matches the card. */
    box-shadow: 0 1px 2px rgba(11, 30, 17, 0.06);
}

.therapy-legal__toggle[b-1isdqob92p] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    /* Full radius when collapsed (button is the only child); top-only when open
       so the hover fill stays inside the card's rounded corners. */
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: background-color 150ms ease;
}

.therapy-legal__toggle--open[b-1isdqob92p] {
    border-radius: 14px 14px 0 0;
}

.therapy-legal__toggle:hover[b-1isdqob92p] {
    background: var(--wb-landing-wash-top, #f1f7f2);
}

.therapy-legal__title[b-1isdqob92p] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
}

[b-1isdqob92p] .therapy-legal__chevron {
    flex-shrink: 0;
    font-size: 20px !important;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.therapy-legal__content[b-1isdqob92p] {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #e9f4ec;
}

.therapy-legal__content p[b-1isdqob92p] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0.75rem 0 0;
}
/* /Components/Pages/HealthInfoPage.razor.rz.scp.css */
/* ============================================
   Health-Info (Checkout-Vorstufe) — Landing-Design v2.
   Zentrierte weiße Karte auf blaugrauem Wash, navy Editorial-Typo,
   navy Pill-CTA. Markup/Texte unverändert (Golden-Master-Flow).
   Hinweis: Vorher stand hier ein ungültiges "@@media" (Razor-Escape in
   einer reinen CSS-Datei) — die Mobile-Regeln griffen dadurch nie.
   ============================================ */

.health-info-page[b-e1t5i656vh] {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--wb-landing-wash-top, #f1f7f2) 0%, #ffffff 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.health-info-container[b-e1t5i656vh] {
    max-width: 560px;
    width: 100%;
    padding: 2.25rem 2rem;
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 70px -42px rgba(11, 30, 17, 0.4);
}

.logo-header[b-e1t5i656vh] {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-image[b-e1t5i656vh] {
    height: 32px;
    width: auto;
}

.info-content[b-e1t5i656vh] {
    text-align: center;
}

.info-title[b-e1t5i656vh] {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.info-description[b-e1t5i656vh] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.info-steps[b-e1t5i656vh] {
    text-align: left;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-step[b-e1t5i656vh] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.step-number[b-e1t5i656vh] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wb-landing-heading, #0B1E11);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.step-content h3[b-e1t5i656vh] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem 0;
}

.step-content p[b-e1t5i656vh] {
    font-size: 0.875rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.5;
}

.info-error[b-e1t5i656vh] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.info-error p[b-e1t5i656vh] {
    color: #dc2626;
    margin: 0;
    font-size: 0.875rem;
}

/* ---- Trust / Datensicherheit: hellblaue Landing-Fläche statt Grün ---- */
.trust-section[b-e1t5i656vh] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border: 1px solid rgba(11, 30, 17, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.trust-badges[b-e1t5i656vh] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.trust-badge[b-e1t5i656vh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(11, 30, 17, 0.72);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.trust-badge svg[b-e1t5i656vh] {
    flex-shrink: 0;
    color: var(--wb-landing-icon, #0B1E11);
}

.trust-details-toggle[b-e1t5i656vh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    border-radius: 999px;
    transition: background-color 150ms ease;
}

.trust-details-toggle:hover[b-e1t5i656vh] {
    background: rgba(11, 30, 17, 0.06);
}

.trust-chevron[b-e1t5i656vh] {
    transition: transform 200ms ease;
}

.trust-chevron-open[b-e1t5i656vh] {
    transform: rotate(180deg);
}

.trust-details[b-e1t5i656vh] {
    text-align: left;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid rgba(11, 30, 17, 0.1);
    padding-top: 1rem;
}

.trust-detail-item h4[b-e1t5i656vh] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem 0;
}

.trust-detail-item p[b-e1t5i656vh] {
    font-size: 0.8rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.5;
}

/* ---- Warenkorb-Zusammenfassung ---- */
.info-cart-summary[b-e1t5i656vh] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    text-align: left;
}

.info-cart-summary h3[b-e1t5i656vh] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(11, 30, 17, 0.55);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cart-summary-item[b-e1t5i656vh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(11, 30, 17, 0.1);
}

.item-name-group[b-e1t5i656vh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-e1t5i656vh] {
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 0.9rem;
    font-weight: 500;
}

.item-price[b-e1t5i656vh] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.9rem;
    font-weight: 600;
}

.cart-summary-total[b-e1t5i656vh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

/* ---- Primär-CTA: navy Pille (Hero-CTA-Sprache) ---- */
.continue-button[b-e1t5i656vh] {
    width: 100%;
    background: var(--wb-landing-heading, #0B1E11);
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease, background 0.25s ease;
    margin-bottom: 1.5rem;
}

.continue-button:hover:not(:disabled)[b-e1t5i656vh] {
    transform: translateY(-2px);
    background: #07120b;
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.6);
}

.continue-button:focus-visible[b-e1t5i656vh] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: 3px;
}

.continue-button:disabled[b-e1t5i656vh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.back-button[b-e1t5i656vh] {
    width: 100%;
    background: none;
    border: none;
    color: rgba(11, 30, 17, 0.55);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 150ms ease;
}

.back-button:hover[b-e1t5i656vh] {
    color: var(--wb-landing-heading, #0B1E11);
}

@media (max-width: 480px) {
    .health-info-container[b-e1t5i656vh] {
        padding: 1.5rem 1rem;
        border-radius: 20px;
    }

    .info-title[b-e1t5i656vh] {
        font-size: 1.35rem;
    }
}

.legal-footer-section[b-e1t5i656vh] {
    padding: var(--wb-space-3, 0.75rem) 0;
    margin-top: var(--wb-space-6, 1.5rem);
    border-top: 1px solid rgba(11, 30, 17, 0.1);
}
/* /Components/Pages/Impressum.razor.rz.scp.css */
/* Impressum - Legal notice page styles (Figma design) */
/* Uses design tokens from app.css (--wb-*) */

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

.impressum-container[b-gwm0n8up81] {
    width: 100%;
    flex: 1;
    background-color: var(--wb-color-surface);
}

.impressum-content[b-gwm0n8up81] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--wb-space-16) var(--wb-space-8);
}

.impressum-title[b-gwm0n8up81] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4) 0;
}

.impressum-subtitle[b-gwm0n8up81] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 22.4px;
    color: var(--wb-color-text-secondary);
    margin: 0 0 var(--wb-space-10) 0;
}

.impressum-section[b-gwm0n8up81] {
    margin-top: var(--wb-space-8);
    padding-bottom: var(--wb-space-6);
    border-bottom: 1px solid var(--wb-color-border);
}

.impressum-section:last-child[b-gwm0n8up81] {
    border-bottom: none;
}

.impressum-section h2[b-gwm0n8up81] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4) 0;
}

.impressum-section p[b-gwm0n8up81] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 22.4px;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4) 0;
}

.impressum-section p:last-child[b-gwm0n8up81] {
    margin-bottom: 0;
}

.impressum-section a[b-gwm0n8up81] {
    color: var(--wb-color-text-primary);
    text-decoration: underline;
}

.impressum-section a:hover[b-gwm0n8up81] {
    color: var(--wb-color-primary);
}

.impressum-section strong[b-gwm0n8up81] {
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .impressum-content[b-gwm0n8up81] {
        padding: var(--wb-space-8) var(--wb-space-4);
    }

    .impressum-title[b-gwm0n8up81] {
        font-size: 36px;
    }

    .impressum-section h2[b-gwm0n8up81] {
        font-size: 18px;
    }
}
/* /Components/Pages/Kontakt.razor.rz.scp.css */
/* Kontakt - Contact Information page styles (Figma design) */
/* Uses design tokens from app.css (--wb-*) */

.kontakt-page[b-2tcdhvtt2n] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--wb-color-surface);
}

.kontakt-container[b-2tcdhvtt2n] {
    width: 100%;
    flex: 1;
    background-color: var(--wb-color-surface);
}

.kontakt-content[b-2tcdhvtt2n] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--wb-space-16) var(--wb-space-8);
}

.kontakt-title[b-2tcdhvtt2n] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-2) 0;
}

/* Stand-Zeile — spiegelt .legal-prose__updated auf /agb und /widerruf */
.kontakt-updated[b-2tcdhvtt2n] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 22.4px;
    color: var(--wb-color-text-secondary);
    margin: 0 0 var(--wb-space-8) 0;
}

.kontakt-address[b-2tcdhvtt2n] {
    margin-bottom: var(--wb-space-6);
}

.kontakt-address p[b-2tcdhvtt2n] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 22.4px;
    color: var(--wb-color-text-primary);
    margin: 0;
}

.kontakt-section[b-2tcdhvtt2n] {
    margin-top: var(--wb-space-6);
}

.kontakt-section:first-of-type[b-2tcdhvtt2n] {
    margin-top: 0;
}

.kontakt-section p[b-2tcdhvtt2n] {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 22.4px;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4) 0;
}

.kontakt-section a[b-2tcdhvtt2n] {
    color: var(--wb-color-text-primary);
    text-decoration: underline;
}

.kontakt-section a:hover[b-2tcdhvtt2n] {
    color: var(--wb-color-primary);
}

.kontakt-section strong[b-2tcdhvtt2n] {
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kontakt-content[b-2tcdhvtt2n] {
        padding: var(--wb-space-8) var(--wb-space-4);
    }

    .kontakt-title[b-2tcdhvtt2n] {
        font-size: 26px;
    }
}
/* /Components/Pages/LaborTestDetailPage.razor.rz.scp.css */
/* ============================================
   Labortest-Detailseite — Landing-Design v2.
   Bild auf blaugrauer Wash-Fläche links, Editorial-Spalte rechts (Eyebrow +
   navy H1 + Preis + Pill-CTA), Versprechen-Karten auf Wall-Band, Akkordeons
   als mittige weiße Karten-Spalten, "Mehr als"-Pastellkarten.
   Typo-/Farbtokens kommen aus app.css (:root).
   ============================================ */

.labortest-detail[b-ymvvaiu5or] {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* #20 (b): the shared landing body token (rgba navy @ 0.66 ≈ 5:1) reads as faint grey
       on white — the FAQ answers, descriptions and feature copy were hard to read. Re-define
       the token page-locally to a stronger 0.82 (≈ 7.6:1, comfortably WCAG AA) without
       touching the global token (used across the in-flight landing redesign). The eyebrow
       keeps its own literal 0.75 from #929 and is unaffected. */
    --wb-landing-body: rgba(11, 30, 17, 0.82);
}

.labortest-detail__loading[b-ymvvaiu5or] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.labortest-detail__not-found[b-ymvvaiu5or] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
}

.labortest-detail__not-found h2[b-ymvvaiu5or] {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
}

.labortest-detail__not-found p[b-ymvvaiu5or] {
    margin: 0;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.labortest-detail__content[b-ymvvaiu5or] {
    flex: 0 0 auto;
    max-width: var(--wb-content-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--wb-space-4);
    width: 100%;
}

/* Sticky-footer slack (siehe ProductDetailPage): Footer schluckt Resthöhe. */
.labortest-detail[b-ymvvaiu5or]  .doctrinus-footer {
    flex-grow: 1;
}

/* ---- Breadcrumb ---- */
.labortest-detail__breadcrumb[b-ymvvaiu5or] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px 0 0;
    font-size: 14px;
    /* #20 (b): 0.55 (≈ 3.7:1) failed WCAG AA → 0.7 (≈ 5.8:1). */
    color: rgba(11, 30, 17, 0.7);
}

.breadcrumb-link[b-ymvvaiu5or] {
    color: rgba(11, 30, 17, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover[b-ymvvaiu5or] {
    color: var(--wb-landing-heading, #0B1E11);
}

.breadcrumb-current[b-ymvvaiu5or] {
    color: var(--wb-landing-heading, #0B1E11);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Produkt-Hero — Bildfläche links, Editorial rechts
   ============================================ */
.labortest-detail__product[b-ymvvaiu5or] {
    display: grid;
    grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
    gap: 56px;
    /* start statt center: bei langen Beschreibungen bleibt das Bild oben
       neben Headline/Preis statt irgendwo in der Textmitte zu schweben. */
    align-items: start;
    padding: 32px 0 56px;
}

/* Bild klebt beim Scrollen durch lange Beschreibungen oben (Desktop). */
@media (min-width: 1025px) {
    .product-image[b-ymvvaiu5or] {
        position: sticky;
        top: 24px;
    }
}

.product-image[b-ymvvaiu5or] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border-radius: 28px;
    padding: clamp(24px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    box-shadow: 0 30px 70px -42px rgba(11, 30, 17, 0.4);
}

.product-image img[b-ymvvaiu5or] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    /* Produktfotos sind JPGs mit weißem Studio-Hintergrund. Auf dem leicht blauen
       Wash-Container (--wb-landing-wash-top) wirkte das Weiß als harte Kante. multiply
       lässt das Weiß in den blauen Untergrund verschmelzen, ohne die Box zu verändern. */
    mix-blend-mode: multiply;
}

.product-info[b-ymvvaiu5or] {
    min-width: 0;
    max-width: 640px;
}

.product-title[b-ymvvaiu5or] {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--wb-landing-heading, #0B1E11);
}

.product-price[b-ymvvaiu5or] {
    margin: 16px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wb-landing-heading, #0B1E11);
}

.product-description[b-ymvvaiu5or] {
    margin: 18px 0 0;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.65;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.product-description strong[b-ymvvaiu5or],
.product-description b[b-ymvvaiu5or] {
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

/* Markdown-Liste kommt als MarkupString — ::deep nötig (kein Isolation-Scope). */
.product-description[b-ymvvaiu5or]  ul {
    margin: 0.75rem 0 0;
    padding-left: 1.5rem;
}

.product-description[b-ymvvaiu5or]  li {
    margin-bottom: 0.4rem;
}

/* ---- Kauf-CTA (wb-pill-cta, global) ---- */
.product-buy-btn[b-ymvvaiu5or] {
    width: 100%;
    max-width: 400px;
    margin-top: 28px;
    padding: 17px 34px;
}

.product-buy-btn:hover .product-buy-btn__arrow[b-ymvvaiu5or] {
    transform: translateX(4px);
}

.product-buy-btn__arrow[b-ymvvaiu5or] {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-buy-btn:disabled[b-ymvvaiu5or] {
    opacity: 0.7;
    transform: none;
    cursor: default;
}

/* ============================================
   Versprechen — Eyebrow-Divider + weiße Karten auf Wall-Band
   ============================================ */
.labortest-detail__section-divider[b-ymvvaiu5or] {
    /* Über das dekorative .wb-wall::before-Band heben: das Band ragt -1.5cm nach oben
       (siehe app.css) und legt sonst seinen halbtransparenten Wash ÜBER den Eyebrow,
       wodurch er ausgewaschen/unlesbar wirkt (#929). */
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 8px;
}

.section-divider__label[b-ymvvaiu5or] {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(11, 30, 17, 0.75);
}

.labortest-detail__features[b-ymvvaiu5or] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 24px 0 40px;
}

.feature-card[b-ymvvaiu5or] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 22px;
    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);
}

.feature-icon[b-ymvvaiu5or] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #e9f4ec;
    color: var(--wb-landing-icon, #0B1E11);
}

.feature-icon svg[b-ymvvaiu5or] {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.feature-title[b-ymvvaiu5or] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--wb-landing-heading, #0B1E11);
}

.feature-description[b-ymvvaiu5or] {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

/* ============================================
   Akkordeons (Ablauf + Rechtliches) — mittige Karten-Spalte
   ============================================ */
.labortest-detail__accordions[b-ymvvaiu5or] {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.accordion-item[b-ymvvaiu5or] {
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 34px -28px rgba(11, 30, 17, 0.35);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.accordion-item--expanded[b-ymvvaiu5or] {
    box-shadow: 0 20px 44px -26px rgba(11, 30, 17, 0.4);
}

.accordion-header[b-ymvvaiu5or] {
    width: 100%;
    padding: 18px 22px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    text-align: left;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.accordion-header:hover[b-ymvvaiu5or] {
    opacity: 0.85;
}

.accordion-header:focus-visible[b-ymvvaiu5or] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: -2px;
    border-radius: 16px;
}

/* Chevron-Disc: Plus → Minus. */
.accordion-chevron-disc[b-ymvvaiu5or] {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #eef3fb;
}

.accordion-chevron-disc[b-ymvvaiu5or]::before,
.accordion-chevron-disc[b-ymvvaiu5or]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--wb-landing-heading, #0B1E11);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.accordion-chevron-disc[b-ymvvaiu5or]::before {
    transform: translate(-50%, -50%);
}

.accordion-chevron-disc[b-ymvvaiu5or]::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item--expanded .accordion-chevron-disc[b-ymvvaiu5or]::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.accordion-content[b-ymvvaiu5or] {
    padding: 0 22px 18px;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 14.5px;
    line-height: 1.7;
    animation: accordion-slideDown-b-ymvvaiu5or 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.accordion-content p[b-ymvvaiu5or] {
    margin: 0;
}

.accordion-content strong[b-ymvvaiu5or],
.accordion-content b[b-ymvvaiu5or] {
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

@keyframes accordion-slideDown-b-ymvvaiu5or {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* Prozess-Schritte innerhalb des Akkordeons */
.process-step[b-ymvvaiu5or] {
    margin-bottom: 14px;
}

.process-step:last-child[b-ymvvaiu5or] {
    margin-bottom: 0;
}

.process-step h4[b-ymvvaiu5or] {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

.process-step p[b-ymvvaiu5or] {
    margin: 0;
}

/* ============================================
   "Mehr als" — Pastellkarten im Landing-Ton
   ============================================ */
.labortest-detail__mehr-als[b-ymvvaiu5or] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 0 64px;
}

.mehr-als-card[b-ymvvaiu5or] {
    background: var(--wb-landing-wash-top, #f1f7f2);
    border-radius: 24px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.mehr-als-card:hover[b-ymvvaiu5or] {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -28px rgba(11, 30, 17, 0.35);
}

.mehr-als-card__title[b-ymvvaiu5or] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* #20 (b): 0.55 (≈ 3.7:1) failed WCAG AA → 0.75 (≈ 6.9:1), matching the #929 eyebrow. */
    color: rgba(11, 30, 17, 0.75);
}

.mehr-als-card__subtitle[b-ymvvaiu5or] {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
}

.mehr-als-card__image[b-ymvvaiu5or] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25rem 0;
}

.mehr-als-card__image-circle[b-ymvvaiu5or] {
    width: 170px;
    height: 170px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mehr-als-card__image-circle img[b-ymvvaiu5or] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mehr-als-card__text[b-ymvvaiu5or] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .labortest-detail__product[b-ymvvaiu5or] {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px 0 44px;
    }

    .product-image[b-ymvvaiu5or] {
        max-width: 520px;
    }

    .labortest-detail__features[b-ymvvaiu5or] {
        grid-template-columns: repeat(2, 1fr);
    }

    .labortest-detail__mehr-als[b-ymvvaiu5or] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .labortest-detail__content[b-ymvvaiu5or] {
        padding: 0 1rem;
    }

    .product-buy-btn[b-ymvvaiu5or] {
        max-width: none;
    }

    .labortest-detail__mehr-als[b-ymvvaiu5or] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 36px 0 48px;
    }
}

@media (max-width: 560px) {
    .labortest-detail__features[b-ymvvaiu5or] {
        grid-template-columns: 1fr;
    }

    .product-image[b-ymvvaiu5or] {
        aspect-ratio: 5 / 4;
        max-width: none;
    }

    .product-price[b-ymvvaiu5or] {
        font-size: 24px;
    }

    .accordion-header[b-ymvvaiu5or] {
        padding: 16px 18px;
        font-size: 15px;
    }

    .accordion-content[b-ymvvaiu5or] {
        padding: 0 18px 16px;
        font-size: 14px;
    }
}
/* /Components/Pages/LabortestsPage.razor.rz.scp.css */
/* ============================================
   Labortests — Katalogseite im Landing-Design v2.
   Weiße Seite, Editorial-Header (Eyebrow + navy H1 + Lede + Trust-Zeile),
   Pill-Filterleiste, Karten-Raster auf blaugrauem Wall-Band (.wb-wall, global),
   hellblauer Light-Footer. Typo-/Farbtokens kommen aus app.css (:root).
   ============================================ */
.labor-tests-page[b-8knz7e9rpt] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    /* Diese Seite ist bewusst weiß. Den Header-/Surface-Hintergrund hier auf Weiß
       pinnen, damit er nicht im Rose-Theme (--wb-color-background: #FFF8FA) rosa
       gegen die weiße Seite absticht. */
    --wb-color-background: #FFFFFF;
}

.labor-tests-page__content[b-8knz7e9rpt] {
    flex: 1;
    padding: 0 var(--wb-space-4) var(--wb-space-12, 4rem);
    max-width: var(--wb-content-max, 1280px);
    margin: 0 auto;
    width: 100%;
}

/* ---- Editorial-Header ---- */
.labor-tests-page__header[b-8knz7e9rpt] {
    padding: 56px 0 8px;
    max-width: 720px;
}

/* ---- Trust-Zeile unter der Lede: drei ruhige Punkte mit navy Häkchen ---- */
.labor-tests-page__trust[b-8knz7e9rpt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    margin: 26px 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid rgba(11, 30, 17, 0.1);
    font-size: 15px;
    color: rgba(11, 30, 17, 0.72);
}

.labor-tests-page__trust-item[b-8knz7e9rpt] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Häkchen als reine CSS-Grafik — kein Asset nötig, färbt über die Token-Farbe. */
.labor-tests-page__trust-item[b-8knz7e9rpt]::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 12px;
    margin-top: -3px;
    border-right: 2px solid var(--wb-landing-icon, #0B1E11);
    border-bottom: 2px solid var(--wb-landing-icon, #0B1E11);
    transform: rotate(45deg);
}

/* ---- Filter-/Sortierleiste: ruhige Pill-Sprache statt Utility-Bar ---- */
.labor-tests-page__filters[b-8knz7e9rpt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--wb-space-4, 1rem);
    padding: 26px 0 30px;
}

.filters-left[b-8knz7e9rpt] {
    display: flex;
    gap: var(--wb-space-3, 0.75rem);
    flex-wrap: wrap;
}

.filters-right[b-8knz7e9rpt] {
    display: flex;
    align-items: flex-end;
    gap: var(--wb-space-4, 1rem);
    flex-wrap: wrap;
}

.filter-dropdown[b-8knz7e9rpt],
.sort-dropdown[b-8knz7e9rpt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Labels als getrackte Mini-Eyebrows — gleiche Sprache wie die Gruppen-Header. */
.filter-dropdown label[b-8knz7e9rpt],
.sort-dropdown label[b-8knz7e9rpt] {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(11, 30, 17, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Selects als weiße Pillen mit navy Rahmen (Hero-Ghost-CTA-Sprache). */
.filter-select[b-8knz7e9rpt],
.sort-select[b-8knz7e9rpt] {
    padding: 10px 38px 10px 18px;
    border-radius: 100px;
    border: 1.5px solid rgba(11, 30, 17, 0.18);
    background: #FFFFFF;
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23002366' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    min-width: 150px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* ADO #373: >= 16px auf Touch-Geräten — darunter zoomt mobiles Safari beim
   Fokussieren automatisch in die Seite hinein und bleibt danach gezoomt. Nur
   `any-pointer: coarse`, damit die kompakten Desktop-Pillen unverändert bleiben.
   Ausführliche Begründung: app.css. */
@media (any-pointer: coarse) {
    .filter-select[b-8knz7e9rpt],
    .sort-select[b-8knz7e9rpt] {
        font-size: var(--wb-font-size-md, 1rem);
    }
}

.filter-select:hover[b-8knz7e9rpt],
.sort-select:hover[b-8knz7e9rpt] {
    border-color: rgba(11, 30, 17, 0.4);
    background-color: var(--wb-landing-wash-top, #f1f7f2);
}

.filter-select:focus-visible[b-8knz7e9rpt],
.sort-select:focus-visible[b-8knz7e9rpt] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: 3px;
    border-color: rgba(11, 30, 17, 0.4);
}

.product-count[b-8knz7e9rpt] {
    font-size: 14px;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    white-space: nowrap;
    padding-bottom: 11px;
}

/* ---- Ansicht-Umschalter: weiße Pille mit navy aktivem Thumb (therapy-filter-Sprache) ---- */
.view-toggle[b-8knz7e9rpt] {
    display: flex;
    gap: 0;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 100px;
    padding: 4px;
    background: #FFFFFF;
}

.view-toggle__btn[b-8knz7e9rpt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: none;
    background: transparent;
    color: rgba(11, 30, 17, 0.55);
    cursor: pointer;
    border-radius: 100px;
    transition: background 0.3s ease, color 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.view-toggle__btn:hover[b-8knz7e9rpt] {
    color: var(--wb-landing-heading, #0B1E11);
}

.view-toggle__btn--active[b-8knz7e9rpt] {
    background: var(--wb-landing-heading, #0B1E11);
    color: #FFFFFF;
}

.view-toggle__btn:focus-visible[b-8knz7e9rpt] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: 2px;
}

.view-toggle__btn svg[b-8knz7e9rpt] {
    width: 18px;
    height: 18px;
}

/* ---- Karten-Raster (Wall-Band liefert die globale .wb-wall) ---- */
.labortest-grid[b-8knz7e9rpt] {
    display: grid;
    gap: var(--wb-space-4, 1rem);
    /* Eigene vertikale Luft, damit das Wall-Band Raum zum Ein-/Ausblenden hat. */
    padding: 18px 0 28px;
}

/* Grid view (default) — Mobile: zwei kompakte Karten pro Reihe (statt einer
   überdimensionierten), damit das Raster auch auf dem Handy katalogartig wirkt. */
.labortest-grid--grid[b-8knz7e9rpt] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wb-space-3, 0.75rem);
}

@media (min-width: 768px) {
    .labortest-grid--grid[b-8knz7e9rpt] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--wb-space-5, 1.25rem);
    }
}

@media (min-width: 1024px) {
    .labortest-grid--grid[b-8knz7e9rpt] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* List view */
.labortest-grid--list[b-8knz7e9rpt] {
    grid-template-columns: 1fr;
    gap: var(--wb-space-3, 0.75rem);
}

/* Loading state */
.labor-tests-page__loading[b-8knz7e9rpt] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* Error state */
.labor-tests-page__error[b-8knz7e9rpt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: var(--wb-space-6);
    text-align: center;
}

.labor-tests-page__error .mud-alert[b-8knz7e9rpt] {
    max-width: 400px;
}

/* Empty state */
.labor-tests-page__empty[b-8knz7e9rpt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-4, 1rem);
    padding: var(--wb-space-8, 2rem);
    text-align: center;
    min-height: 200px;
}

.labor-tests-page__empty p[b-8knz7e9rpt] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: var(--wb-font-size-md, 1rem);
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .labor-tests-page__content[b-8knz7e9rpt] {
        padding: 0 var(--wb-space-3, 0.75rem) var(--wb-space-8, 2rem);
    }

    .labor-tests-page__header[b-8knz7e9rpt] {
        padding: 36px 0 4px;
    }

    .labor-tests-page__trust[b-8knz7e9rpt] {
        gap: 10px 24px;
        font-size: 14px;
    }

    .labor-tests-page__filters[b-8knz7e9rpt] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wb-space-3, 0.75rem);
        padding: 20px 0 22px;
    }

    .filters-left[b-8knz7e9rpt],
    .filters-right[b-8knz7e9rpt] {
        width: 100%;
    }

    .filter-dropdown[b-8knz7e9rpt],
    .sort-dropdown[b-8knz7e9rpt] {
        flex: 1;
    }

    .filter-select[b-8knz7e9rpt],
    .sort-select[b-8knz7e9rpt] {
        width: 100%;
        min-width: unset;
    }

    .filters-right[b-8knz7e9rpt] {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toggle[b-8knz7e9rpt] {
        order: -1;
        align-self: flex-end;
    }

    .product-count[b-8knz7e9rpt] {
        text-align: center;
        padding-bottom: 0;
    }
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */
.landing-page[b-gbqqm079qx] {
    /* Die Landing-Design-Tokens (--wb-content-max, --wb-landing-heading/-body/-icon,
       --wb-landing-panel, --landing-foot-blue, --wb-landing-wash-*) wurden im Zuge des
       app-weiten Rollouts nach :root in wwwroot/css/app.css promotet — siehe Abschnitt
       "Landing-Design v2". Hier nichts mehr lokal überschreiben, damit alle Seiten
       dieselbe Quelle teilen. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    /* Eigener Stacking-Context, damit .landing-page__lower (z-index:-1) hinter dem
       Seiteninhalt, aber über dem weißen Seitenhintergrund liegt. */
    isolation: isolate;
}

/* ADO #433/#445: Auf der Startseite bleiben Announcement-Streifen UND Menüleiste beim
   Scrollen stehen (Kundenwunsch „Menü-Banner fixieren"). Zwei gestapelte Sticky-Ebenen:
   der Streifen klebt bei 0, die Menüleiste direkt darunter (top = Streifenhöhe 40px,
   36px auf schmalen Phones — Werte aus AnnouncementBanner.razor.css). Bewusst nur hier
   (::deep, landing-scoped): auf den ~22 anderen Seiten mit dem Header scrollt der
   Streifen weiter weg. Anker-Ziele bekommen die Streifenhöhe als zusätzlichen
   scroll-margin, sonst verschwindet die Überschrift hinter der Kopfzone. */
.landing-page[b-gbqqm079qx]  .announcement-wrapper {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.landing-page[b-gbqqm079qx]  .mobile-header {
    top: 40px;
}

.landing-page[b-gbqqm079qx]  [id] {
    scroll-margin-top: 120px;
}

@media (max-width: 480px) {
    .landing-page[b-gbqqm079qx]  .mobile-header {
        top: 36px;
    }

    .landing-page[b-gbqqm079qx]  [id] {
        scroll-margin-top: 116px;
    }
}

.landing-page__content[b-gbqqm079qx] {
    flex: 1;
    /* The page content column. Width comes from the --wb-content-max token (set on
       .landing-page) so content, header and footer all share one source of truth for
       horizontal alignment. Every section below inherits these edges and must NOT add
       its own max-width or horizontal padding on top — that was the cause of the
       "Über Doctrinus" misalignment. */
    /* Kein Bottom-Padding mehr: Newsletter ist in .landing-page__lower umgezogen,
       sodass er sich mit dem Footer den hellblauen Sockel teilt. */
    padding: 0 var(--wb-space-4) 0;
    max-width: var(--wb-content-max, 1520px);
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   Unterer Bereich — Newsletter + Footer auf Weiß (v3)
   ============================================ */
.landing-page__lower[b-gbqqm079qx] {
    position: relative;
    /* v3: kein Sockel-Verlauf mehr (.landing-page__lower-wash entfernt) —
       der untere Bereich steht auf Weiß. z-index bleibt neutral. */
    isolation: isolate;
}

/* Inhaltsspalte für das Newsletter (Footer zentriert sich selbst). */
.landing-page__lower-inner[b-gbqqm079qx] {
    position: relative;
    z-index: 1;
    max-width: var(--wb-content-max, 1520px);
    margin: 0 auto;
    padding: 0 var(--wb-space-4);
}

/* ============================================
   Therapy section — Lede + Pill filter + card grid
   ============================================ */

.therapy-section[b-gbqqm079qx] {
    position: relative;
    isolation: isolate;
    /* v3: das frühere salbeigrüne Full-bleed-„Wall"-Band (::before) ist entfernt —
       die Sektion steht auf Weiß, ohne eigene Trennlinie (die Hero-Trust-Hairline
       darüber trennt bereits). */
    padding: 44px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    /* Compensate sticky MobileHeader (~68px) when anchor-navigating to #therapien
       from the "Über Doctrinus"-Karten so the headline isn't hidden behind it. */
    scroll-margin-top: 80px;
}

/* ---- Header row: editorial lede on the left, filter pills on the right ---- */
.therapy-section__header[b-gbqqm079qx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

/* ---- Lede ---- */
.therapy-lede[b-gbqqm079qx] {
    max-width: 560px;
}

.therapy-lede__title[b-gbqqm079qx] {
    margin: 0;
    /* Shared section-H2 scale — kept identical to .about-panel__title so both
       section headlines ("Therapieprüfung jetzt starten" / "Wer steckt hinter Doctrinus?") read
       as the same level. */
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--wb-landing-heading, #0B1E11);
}

/* ---- Filter pills ---- */
.therapy-filter[b-gbqqm079qx] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 1px solid rgba(11, 30, 17, 0.12);
    border-radius: 100px;
    padding: 5px;
    gap: 0;
    isolation: isolate;
}

/* Sliding indicator — solid navy thumb; uses --indicator-index (0/1) to translate. */
.therapy-filter__indicator[b-gbqqm079qx] {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 2);
    /* Brand navy thumb (the token resolved to near-black before) so the active pill
       matches the navy pill text and the rest of the landing accent language. */
    background: var(--wb-landing-heading, #0B1E11);
    border-radius: 100px;
    transform: translateX(calc(var(--indicator-index, 0) * 100%));
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 0;
}

.therapy-filter__pill[b-gbqqm079qx] {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 11px 30px;
    font-size: 14px;
    font-weight: 600;
    /* 0.62 (not the old 0.55) so the resting pill label clears WCAG AA 4.5:1 on white
       — at 14px bold this counts as normal text, not large. Hover/active stay darker. */
    color: rgba(11, 30, 17, 0.62);
    cursor: pointer;
    border-radius: 100px;
    transition: color 0.3s ease;
    font-family: inherit;
    min-width: 104px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.therapy-filter__pill:hover[b-gbqqm079qx] {
    color: rgba(11, 30, 17, 0.85);
}

/* Active pill sits on the navy thumb → white text. */
.therapy-filter__pill.is-active[b-gbqqm079qx] {
    color: #FFFFFF;
}

.therapy-filter__pill:focus-visible[b-gbqqm079qx] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: 3px;
}

/* ---- Therapy grid ---- */
/* ADO #431: Der kachelübergreifende hellgrüne Verlauf liegt IN den Kacheln (nicht als Panel
   dahinter — die Zwischenräume bleiben weiß). Jede Kachel zeigt den Ausschnitt EINES über das
   ganze Raster gespannten Verlaufs; die Lage liefert therapyGrid.js als CSS-Variablen
   (--grid-w/--grid-h am Raster, --tile-x/--tile-y je Kachel), die Kachel-CSS in
   TherapyPreviewTile.razor.css setzt background-size/-position daraus. Die langsame Drift läuft
   über die registrierte Eigenschaft --therapy-drift (animierbar, vererbt sich auf die Kacheln);
   bei prefers-reduced-motion oder ohne @property-Support steht der Verlauf still. */
@property --therapy-drift {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.therapy-grid[b-gbqqm079qx] {
    position: relative;   /* offsetParent der Kacheln für therapyGrid.js */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(104px, auto);
    gap: 16px;
    /* 0…1 = Anteil der Rasterbreite, um den das (doppelt breite) Verlaufsbild verschoben ist. */
    --therapy-drift: 0;
    animation: therapy-grid-drift-b-gbqqm079qx 24s ease-in-out infinite alternate;
}

@keyframes therapy-grid-drift-b-gbqqm079qx {
    from { --therapy-drift: 0; }
    to   { --therapy-drift: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .therapy-grid[b-gbqqm079qx] {
        animation: none;
        --therapy-drift: 0.5;
    }
}

.therapy-grid__cell[b-gbqqm079qx] {
    /* Stagger fly-in on initial render and on filter change (cells are re-keyed) */
    animation: tile-flyIn-b-gbqqm079qx 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.therapy-grid__cell:nth-child(1)[b-gbqqm079qx] { animation-delay: 0.04s; }
.therapy-grid__cell:nth-child(2)[b-gbqqm079qx] { animation-delay: 0.10s; }
.therapy-grid__cell:nth-child(3)[b-gbqqm079qx] { animation-delay: 0.16s; }
.therapy-grid__cell:nth-child(4)[b-gbqqm079qx] { animation-delay: 0.22s; }
.therapy-grid__cell:nth-child(5)[b-gbqqm079qx] { animation-delay: 0.28s; }
.therapy-grid__cell:nth-child(6)[b-gbqqm079qx] { animation-delay: 0.34s; }
.therapy-grid__cell:nth-child(7)[b-gbqqm079qx] { animation-delay: 0.40s; }
.therapy-grid__cell:nth-child(8)[b-gbqqm079qx] { animation-delay: 0.46s; }
.therapy-grid__cell:nth-child(9)[b-gbqqm079qx] { animation-delay: 0.52s; }
.therapy-grid__cell:nth-child(10)[b-gbqqm079qx] { animation-delay: 0.58s; }
.therapy-grid__cell:nth-child(11)[b-gbqqm079qx] { animation-delay: 0.64s; }
.therapy-grid__cell:nth-child(12)[b-gbqqm079qx] { animation-delay: 0.70s; }
.therapy-grid__cell:nth-child(13)[b-gbqqm079qx] { animation-delay: 0.76s; }

@keyframes tile-flyIn-b-gbqqm079qx {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Tablet (3 columns) ---- */
@media (max-width: 1000px) {
    .therapy-grid[b-gbqqm079qx] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Small tablet (2 columns) ---- */
@media (max-width: 760px) {
    .therapy-section[b-gbqqm079qx] {
        gap: 28px;
    }

    .therapy-section__header[b-gbqqm079qx] {
        align-items: stretch;
        gap: 18px;
    }

    .therapy-filter[b-gbqqm079qx] {
        align-self: flex-start;
    }

    .therapy-grid[b-gbqqm079qx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ---- Mobile (single column, compact list rows) ---- */
@media (max-width: 599px) {
    .therapy-section[b-gbqqm079qx] {
        padding: 24px 0 32px;
        gap: 22px;
    }

    .therapy-filter__pill[b-gbqqm079qx] {
        padding: 10px 20px;
        font-size: 13px;
        min-width: 84px;
    }

    .therapy-grid[b-gbqqm079qx] {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 10px;
    }
}
/* /Components/Pages/ProductDetailPage.razor.rz.scp.css */
/* ============================================
   Produkt-Detailseite (Bescheinigung / Arztsprechstunde) — Landing-Design v2.
   Links Editorial-Spalte (Eyebrow + navy H1 + Beschreibung + Preis + Pill-CTA
   + Trust-Zeile), rechts Feature-Akkordeons als weiße Karte.
   Typo-/Farbtokens kommen aus app.css (:root).
   ============================================ */

.product-detail[b-wsxrt86886] {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.product-detail__loading[b-wsxrt86886] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.product-detail__not-found[b-wsxrt86886] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
}

.product-detail__not-found h2[b-wsxrt86886] {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
}

.product-detail__not-found p[b-wsxrt86886] {
    margin: 0;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.product-detail__content[b-wsxrt86886] {
    /* Natural height — do NOT flex-grow. Growing this (white) area is what produced a large
       white gap above the footer on tall/zoomed-out viewports once the page got shorter
       (Mehr-als section removed). The footer absorbs the leftover height instead (below). */
    flex: 0 0 auto;
    max-width: var(--wb-content-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--wb-space-4);
    width: 100%;
}

/* Sticky-footer slack: let the footer fill any leftover viewport height under the
   min-height:100vh wrapper, so short pages never show a gap between content and footer.
   ::deep because DoctrinusFooter is a child component (its root carries no isolation scope). */
.product-detail[b-wsxrt86886]  .doctrinus-footer {
    flex-grow: 1;
}

/* ============================================
   Produkt-Hero — zweispaltig wie der Landing-Hero
   ============================================ */
.product-hero[b-wsxrt86886] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 56px;
    align-items: start;
    padding: 56px 0 64px;
}

/* Ohne Feature-Karte: eine ruhige Spalte. */
.product-hero--single[b-wsxrt86886] {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

.product-hero__main[b-wsxrt86886] {
    min-width: 0;
    max-width: 720px;
}

.product-title[b-wsxrt86886] {
    margin: 0;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--wb-landing-heading, #0B1E11);
}

.product-subtitle[b-wsxrt86886] {
    margin: 10px 0 0;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--wb-landing-heading, #0B1E11);
}

.product-description[b-wsxrt86886] {
    margin: 22px 0 0;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.65;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.product-description strong[b-wsxrt86886],
.product-description b[b-wsxrt86886] {
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

/* Bullet list in description — ::deep is required because the list is injected as a
   MarkupString (raw HTML) and therefore does not receive the component's CSS-isolation
   scope attribute; ::deep scopes the ancestor instead. */
.product-description[b-wsxrt86886]  ul {
    margin: 0.75rem 0 1rem;
    padding-left: 1.5rem;
}

.product-description[b-wsxrt86886]  li {
    margin-bottom: 0.4rem;
}

.product-supply-hint[b-wsxrt86886] {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
}

.product-supply-hint strong[b-wsxrt86886],
.product-supply-hint b[b-wsxrt86886] {
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

/* ---- Preiszeile ---- */
.product-priceline[b-wsxrt86886] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 26px;
}

.product-price-label[b-wsxrt86886] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11, 30, 17, 0.55);
}

.price-fn[b-wsxrt86886] {
    font-size: 0.7em;
    vertical-align: super;
}

.product-price[b-wsxrt86886] {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wb-landing-heading, #0B1E11);
}

/* Price footnote / disclaimer — small print sitting directly above the CTA button */
.product-price-note[b-wsxrt86886] {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(11, 30, 17, 0.5);
}

/* ---- Kauf-CTA: navy Pille (wb-pill-cta, global) in Produktbreite ---- */
.product-buy-btn[b-wsxrt86886] {
    width: 100%;
    max-width: 400px;
    margin-top: 26px;
    padding: 17px 34px;
}

.product-buy-btn:hover .product-buy-btn__arrow[b-wsxrt86886] {
    transform: translateX(4px);
}

.product-buy-btn__arrow[b-wsxrt86886] {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-buy-btn--disabled[b-wsxrt86886],
.product-buy-btn--disabled:hover[b-wsxrt86886] {
    background: rgba(11, 30, 17, 0.08);
    color: rgba(11, 30, 17, 0.45);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Disabled während des Questionnaire-Starts (Re-Entrancy-Guard) — ruhig halten. */
.product-buy-btn:disabled[b-wsxrt86886] {
    opacity: 0.7;
    transform: none;
    cursor: default;
}

/* ---- Trust-Zeile (Hero-Muster) ---- */
.product-trust[b-wsxrt86886] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(11, 30, 17, 0.1);
    font-size: 15px;
    color: rgba(11, 30, 17, 0.72);
}

.product-trust__item[b-wsxrt86886] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
}

.product-trust__item strong[b-wsxrt86886] {
    color: var(--wb-landing-heading, #0B1E11);
    font-weight: 700;
}

.product-trust__ico[b-wsxrt86886] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--wb-landing-icon, #0B1E11);
}

.product-trust__ico svg[b-wsxrt86886] {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   Feature-Karte rechts ("Gut zu wissen")
   ============================================ */
.product-hero__aside[b-wsxrt86886] {
    min-width: 0;
}

.product-features[b-wsxrt86886] {
    padding: 26px 28px 14px;
}

.product-features__title[b-wsxrt86886] {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--wb-landing-heading, #0B1E11);
}

/* ---- Akkordeon-Grundform (Features: Hairline-Zeilen in der Karte) ---- */
.accordion-item[b-wsxrt86886] {
    border-top: 1px solid rgba(11, 30, 17, 0.08);
}

.product-accordions .accordion-item:first-child[b-wsxrt86886] {
    border-top: none;
}

.accordion-header[b-wsxrt86886] {
    width: 100%;
    padding: 16px 0;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    text-align: left;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.accordion-header:hover[b-wsxrt86886] {
    opacity: 0.85;
}

.accordion-header:focus-visible[b-wsxrt86886] {
    outline: 2px solid var(--wb-color-primary, #E11D48);
    outline-offset: -2px;
    border-radius: 10px;
}

/* Chevron-Disc: Plus wird zum Minus. */
.accordion-chevron-disc[b-wsxrt86886] {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #eef3fb;
}

.accordion-chevron-disc[b-wsxrt86886]::before,
.accordion-chevron-disc[b-wsxrt86886]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--wb-landing-heading, #0B1E11);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.accordion-chevron-disc[b-wsxrt86886]::before {
    transform: translate(-50%, -50%);
}

.accordion-chevron-disc[b-wsxrt86886]::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item--expanded .accordion-chevron-disc[b-wsxrt86886]::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.accordion-content[b-wsxrt86886] {
    padding: 0 0 18px;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 14.5px;
    line-height: 1.7;
    animation: accordion-slideDown-b-wsxrt86886 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.accordion-content p[b-wsxrt86886] {
    margin: 0;
    white-space: pre-line;
}

.accordion-content strong[b-wsxrt86886],
.accordion-content b[b-wsxrt86886] {
    font-weight: 700;
    color: var(--wb-landing-heading, #0B1E11);
}

.accordion-content ul[b-wsxrt86886] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.accordion-content li[b-wsxrt86886] {
    margin-bottom: 0.25rem;
}

@keyframes accordion-slideDown-b-wsxrt86886 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .product-hero[b-wsxrt86886] {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 0 48px;
    }

    .product-hero__main[b-wsxrt86886] {
        max-width: none;
    }

    .product-hero__aside[b-wsxrt86886] {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .product-detail__content[b-wsxrt86886] {
        padding: 0 1rem;
    }

    .product-hero[b-wsxrt86886] {
        padding: 32px 0 40px;
    }

    .product-buy-btn[b-wsxrt86886] {
        max-width: none;
    }

    .product-trust[b-wsxrt86886] {
        gap: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .product-price[b-wsxrt86886] {
        font-size: 26px;
    }

    .product-features[b-wsxrt86886] {
        padding: 20px 20px 10px;
    }
}
/* /Components/Pages/ReorderStepPage.razor.rz.scp.css */
/* Reorder Step Page — außerordentliche Nachbestellung (CR2 #863) */
/* Uses design tokens from wellbase.Shared.Theme.DesignTokens */

.reorder-page[b-20qv0npxk8] {
    min-height: 100vh;
    background: var(--doctrinus-bg-subtle, #f8f9fa);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.reorder-container[b-20qv0npxk8] {
    width: 100%;
    max-width: var(--wb-portal-max, 720px);
    background: var(--doctrinus-surface, #ffffff);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

.logo-header[b-20qv0npxk8] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.logo-image[b-20qv0npxk8] {
    height: 36px;
    width: auto;
}

.reorder-title[b-20qv0npxk8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--doctrinus-text-primary, #1a1a2e);
    margin: 0 0 0.5rem;
}

.reorder-subtitle[b-20qv0npxk8] {
    color: var(--doctrinus-text-secondary, #6c757d);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

.reorder-error[b-20qv0npxk8] {
    background: var(--doctrinus-error-lighter, #fff5f5);
    border: 1px solid var(--doctrinus-error, #e53e3e);
    border-radius: 8px;
    color: var(--doctrinus-error-dark, #c53030);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.reorder-section[b-20qv0npxk8] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--doctrinus-border, #e9ecef);
}

.reorder-section:last-of-type[b-20qv0npxk8] {
    border-bottom: none;
}

.reorder-section__title[b-20qv0npxk8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--doctrinus-text-primary, #1a1a2e);
    margin: 0 0 0.25rem;
}

.reorder-section__description[b-20qv0npxk8] {
    color: var(--doctrinus-text-secondary, #6c757d);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */

.reorder-field[b-20qv0npxk8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.reorder-field__label[b-20qv0npxk8] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--doctrinus-text-primary, #1a1a2e);
}

.reorder-field__label--optional[b-20qv0npxk8] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.reorder-field__optional[b-20qv0npxk8] {
    font-size: 0.8rem;
    color: var(--doctrinus-text-muted, #9ca3af);
    font-weight: 400;
}

.reorder-field__select[b-20qv0npxk8],
.reorder-field__textarea[b-20qv0npxk8] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--doctrinus-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--doctrinus-text-primary, #1a1a2e);
    background: var(--doctrinus-surface, #ffffff);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

/* ADO #373: >= 16px auf Touch-Geräten — darunter zoomt mobiles Safari beim
   Fokussieren automatisch in die Seite hinein und bleibt danach gezoomt. Nur
   `any-pointer: coarse`, damit das kompakte Desktop-Formular unverändert bleibt.
   Ausführliche Begründung: app.css. */
@media (any-pointer: coarse) {
    .reorder-field__select[b-20qv0npxk8],
    .reorder-field__textarea[b-20qv0npxk8] {
        font-size: var(--wb-font-size-md, 1rem);
    }
}

.reorder-field__select:focus[b-20qv0npxk8],
.reorder-field__textarea:focus[b-20qv0npxk8] {
    outline: none;
    border-color: var(--doctrinus-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.reorder-field__textarea[b-20qv0npxk8] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* ── Delivery channel ─────────────────────────────────────────────────────── */

.reorder-delivery[b-20qv0npxk8] {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reorder-delivery__legend[b-20qv0npxk8] {
    display: none; /* Visually hidden — section title serves as label */
}

.reorder-delivery__option[b-20qv0npxk8] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid var(--doctrinus-border, #d1d5db);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.reorder-delivery__option:has(input:checked)[b-20qv0npxk8] {
    border-color: var(--doctrinus-primary, #3b82f6);
    background: var(--doctrinus-primary-lighter, #eff6ff);
}

.reorder-delivery__option--disabled[b-20qv0npxk8] {
    opacity: 0.55;
    cursor: not-allowed;
}

.reorder-delivery__radio[b-20qv0npxk8] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--doctrinus-primary, #3b82f6);
}

.reorder-delivery__label[b-20qv0npxk8] {
    font-size: 0.9rem;
    color: var(--doctrinus-text-primary, #1a1a2e);
    line-height: 1.4;
}

.reorder-delivery__hint[b-20qv0npxk8] {
    display: block;
    font-size: 0.8rem;
    color: var(--doctrinus-text-muted, #9ca3af);
    margin-top: 0.25rem;
}

/* ── Shipping form (mirrors CheckoutReviewPage shipping-form__* classes) ─── */

.shipping-form[b-20qv0npxk8] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.shipping-form__row[b-20qv0npxk8] {
    display: flex;
    gap: 0.75rem;
}

.shipping-form__row--split[b-20qv0npxk8] {
    align-items: flex-start;
}

.shipping-form__field[b-20qv0npxk8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.shipping-form__field--street[b-20qv0npxk8] {
    flex: 3;
}

.shipping-form__field--housenumber[b-20qv0npxk8] {
    flex: 1;
}

.shipping-form__field--zip[b-20qv0npxk8] {
    flex: 1;
}

.shipping-form__field--city[b-20qv0npxk8] {
    flex: 2;
}

.shipping-form__label[b-20qv0npxk8] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--doctrinus-text-primary, #1a1a2e);
}

.shipping-form__error[b-20qv0npxk8] {
    font-size: 0.8125rem;
    color: var(--wb-color-error, #c62828);
}

.shipping-form__label--optional[b-20qv0npxk8] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.shipping-form__optional[b-20qv0npxk8] {
    font-size: 0.8rem;
    color: var(--doctrinus-text-muted, #9ca3af);
    font-weight: 400;
}

.shipping-form__input[b-20qv0npxk8] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--doctrinus-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--doctrinus-text-primary, #1a1a2e);
    background: var(--doctrinus-surface, #ffffff);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}

/* ADO #373: >= 16px auf Touch-Geräten, siehe oben. */
@media (any-pointer: coarse) {
    .shipping-form__input[b-20qv0npxk8] {
        font-size: var(--wb-font-size-md, 1rem);
    }
}

.shipping-form__input:focus[b-20qv0npxk8] {
    outline: none;
    border-color: var(--doctrinus-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.shipping-form__input--select[b-20qv0npxk8] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.25rem;
}

/* ── Actions ──────────────────────────────────────────────────────────────── */

.reorder-actions[b-20qv0npxk8] {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
}

.reorder-submit-button[b-20qv0npxk8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--doctrinus-primary, #3b82f6);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    min-width: 220px;
}

.reorder-submit-button:hover:not(:disabled)[b-20qv0npxk8] {
    background: var(--doctrinus-primary-dark, #2563eb);
}

.reorder-submit-button:disabled[b-20qv0npxk8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .reorder-container[b-20qv0npxk8] {
        padding: 1.25rem;
    }

    .shipping-form__row--split[b-20qv0npxk8] {
        flex-direction: column;
    }

    .shipping-form__field--street[b-20qv0npxk8],
    .shipping-form__field--housenumber[b-20qv0npxk8],
    .shipping-form__field--zip[b-20qv0npxk8],
    .shipping-form__field--city[b-20qv0npxk8] {
        flex: unset;
    }

    .reorder-actions[b-20qv0npxk8] {
        justify-content: stretch;
    }

    .reorder-submit-button[b-20qv0npxk8] {
        width: 100%;
    }
}
/* /Components/Pages/RezeptBezahlLinkPage.razor.rz.scp.css */
/* Mirrors the shared checkout look (CheckoutPaymentPage/AngebotCheckoutPage) — scoped CSS
   does not cross components, so the handful of classes is repeated here. */
.payment-page[b-fgx72blmeu] {
    min-height: 100vh;
    background: var(--mud-palette-background, #fafafa);
    padding: 24px 16px;
}

.payment-container[b-fgx72blmeu] {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.logo-header[b-fgx72blmeu] {
    text-align: center;
    margin-bottom: 24px;
}

.logo-image[b-fgx72blmeu] {
    max-width: 200px;
    height: auto;
}

.payment-title[b-fgx72blmeu] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.payment-subtitle[b-fgx72blmeu] {
    color: var(--mud-palette-text-secondary, #555);
    margin: 0 0 24px;
}

.primary-button[b-fgx72blmeu] {
    width: 100%;
    padding: 14px;
    /* Landing-Navy-Pille mit weichem Schatten (Hero-CTA-Sprache). */
    background: var(--wb-landing-heading, #0B1E11);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease, background 0.25s ease;
    margin: 8px 0;
}

.primary-button:hover:not(:disabled)[b-fgx72blmeu] {
    background: #07120b;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.6);
}
/* /Components/Pages/SearchPage.razor.rz.scp.css */
/* Search Page - Standalone search results page */
.search-page[b-4yzrmg8v1d] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wb-color-background);
    overflow-x: hidden;
}

.search-page__content[b-4yzrmg8v1d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1520px;
    width: 100%;
    margin: 0 auto;
    padding: var(--wb-space-6) var(--wb-space-4) var(--wb-space-4);
    box-sizing: border-box;
}

/* Header section with search */
.search-page__header[b-4yzrmg8v1d] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
    margin-bottom: var(--wb-space-4);
    padding-top: var(--wb-space-2);
}

.search-page__title[b-4yzrmg8v1d] {
    font-size: var(--wb-font-size-2xl);
    font-weight: 700;
    color: var(--wb-color-text-primary);
    margin: 0;
}

.search-page__input-wrapper[b-4yzrmg8v1d] {
    display: flex;
    align-items: center;
    gap: var(--wb-space-2);
    background: var(--wb-color-surface);
    border: 2px solid var(--wb-color-border);
    border-radius: var(--wb-radius-full);
    padding: var(--wb-space-3) var(--wb-space-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-page__input-wrapper--focused[b-4yzrmg8v1d] {
    border-color: var(--wb-color-primary);
    box-shadow: 0 0 0 3px var(--wb-color-primary-light);
}

.search-page__search-icon[b-4yzrmg8v1d] {
    color: var(--wb-color-text-secondary);
    flex-shrink: 0;
}

.search-page__input[b-4yzrmg8v1d] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--wb-font-size-lg);
    color: var(--wb-color-text-primary);
    outline: none;
    min-width: 0;
}

.search-page__input[b-4yzrmg8v1d]::placeholder {
    color: var(--wb-color-text-disabled);
}

.search-page__clear-btn[b-4yzrmg8v1d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--wb-color-surface-hover);
    border: none;
    border-radius: var(--wb-radius-full);
    color: var(--wb-color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-page__clear-btn:hover[b-4yzrmg8v1d] {
    background: var(--wb-color-border);
    color: var(--wb-color-text-primary);
}

/* Filter buttons */
.search-page__filters[b-4yzrmg8v1d] {
    display: flex;
    gap: var(--wb-space-2);
    flex-wrap: wrap;
}

.search-page__filter[b-4yzrmg8v1d] {
    display: flex;
    align-items: center;
    gap: var(--wb-space-1);
    padding: var(--wb-space-2) var(--wb-space-3);
    background: var(--wb-color-surface);
    border: 1px solid var(--wb-color-border);
    border-radius: var(--wb-radius-full);
    font-size: var(--wb-font-size-sm);
    font-weight: 500;
    color: var(--wb-color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-page__filter:hover[b-4yzrmg8v1d] {
    border-color: var(--wb-color-primary-light);
    color: var(--wb-color-text-primary);
}

.search-page__filter--active[b-4yzrmg8v1d] {
    background: var(--wb-color-primary);
    border-color: var(--wb-color-primary);
    color: white;
}

.search-page__filter--active:hover[b-4yzrmg8v1d] {
    background: var(--wb-color-primary-dark);
    border-color: var(--wb-color-primary-dark);
    color: white;
}

/* Results area */
.search-page__results[b-4yzrmg8v1d] {
    flex: 1;
}

.search-page__loading[b-4yzrmg8v1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-4);
    padding: var(--wb-space-8);
    color: var(--wb-color-text-secondary);
}

.search-page__message[b-4yzrmg8v1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-8);
    color: var(--wb-color-text-secondary);
    text-align: center;
}

.search-page__empty[b-4yzrmg8v1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-8);
    text-align: center;
}

.search-page__empty h2[b-4yzrmg8v1d] {
    margin: 0;
    font-size: var(--wb-font-size-xl);
    color: var(--wb-color-text-primary);
}

.search-page__empty p[b-4yzrmg8v1d] {
    margin: 0;
    color: var(--wb-color-text-secondary);
}

.search-page__empty-tip[b-4yzrmg8v1d] {
    font-size: var(--wb-font-size-sm);
    color: var(--wb-color-text-disabled);
}

/* Initial state */
.search-page__initial[b-4yzrmg8v1d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-4);
    padding: var(--wb-space-8);
    text-align: center;
}

.search-page__initial-icon[b-4yzrmg8v1d] {
    color: var(--wb-color-primary-light);
    opacity: 0.5;
}

.search-page__initial h2[b-4yzrmg8v1d] {
    margin: 0;
    font-size: var(--wb-font-size-xl);
    color: var(--wb-color-text-primary);
}

.search-page__initial p[b-4yzrmg8v1d] {
    margin: 0;
    color: var(--wb-color-text-secondary);
    max-width: 400px;
}

.search-page__suggestions[b-4yzrmg8v1d] {
    margin-top: var(--wb-space-4);
}

.search-page__suggestions h3[b-4yzrmg8v1d] {
    font-size: var(--wb-font-size-sm);
    font-weight: 600;
    color: var(--wb-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--wb-space-2) 0;
}

.search-page__tags[b-4yzrmg8v1d] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wb-space-2);
}

.search-page__tag[b-4yzrmg8v1d] {
    padding: var(--wb-space-2) var(--wb-space-3);
    background: var(--wb-color-surface);
    border: 1px solid var(--wb-color-border);
    border-radius: var(--wb-radius-full);
    font-size: var(--wb-font-size-sm);
    color: var(--wb-color-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-page__tag:hover[b-4yzrmg8v1d] {
    background: var(--wb-color-surface-hover);
    border-color: var(--wb-color-primary-light);
}

/* Result grid */
.search-page__result-grid[b-4yzrmg8v1d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--wb-space-4);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .search-page__content[b-4yzrmg8v1d] {
        padding: var(--wb-space-3);
    }

    .search-page__title[b-4yzrmg8v1d] {
        font-size: var(--wb-font-size-xl);
    }

    .search-page__input-wrapper[b-4yzrmg8v1d] {
        padding: var(--wb-space-2) var(--wb-space-3);
    }

    .search-page__input[b-4yzrmg8v1d] {
        font-size: var(--wb-font-size-md);
    }

    .search-page__filters[b-4yzrmg8v1d] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--wb-space-2);
        -webkit-overflow-scrolling: touch;
    }

    .search-page__filter[b-4yzrmg8v1d] {
        flex-shrink: 0;
    }

    .search-page__result-grid[b-4yzrmg8v1d] {
        grid-template-columns: 1fr;
        gap: var(--wb-space-3);
    }
}
/* /Components/Pages/Sections/AdditionalBloodTestsCarousel.razor.rz.scp.css */
.upsell-carousel[b-wnks4r0sw2] {
    margin: 1.5rem 0;
}

.upsell-carousel__subtitle[b-wnks4r0sw2] {
    margin: 0.25rem 0 1rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* The track scrolls horizontally and the last visible card almost always
   spills past the right edge (card count rarely fits the column exactly).
   A right-edge mask-image fade makes the spill look intentional — it reads
   as "more available, scroll →" instead of "the card got cut off". */
.upsell-carousel__track[b-wnks4r0sw2] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
}

.upsell-carousel__track[b-wnks4r0sw2]::-webkit-scrollbar {
    height: 6px;
}

.upsell-carousel__track[b-wnks4r0sw2]::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}

.upsell-carousel__track[b-wnks4r0sw2]::-webkit-scrollbar-track {
    background: transparent;
}

.upsell-card[b-wnks4r0sw2] {
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* 16:10 media slot at the top of each card. object-fit:contain so labtest
   product imagery (often a transparent bottle/tube on white) isn't cropped;
   the soft #f8fafc background fills any letterboxing so all cards line up. */
.upsell-card__media[b-wnks4r0sw2] {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upsell-card__media img[b-wnks4r0sw2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.upsell-card:hover[b-wnks4r0sw2] {
    border-color: #b9c0c8;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.upsell-card--added[b-wnks4r0sw2] {
    border-color: #111;
    box-shadow: 0 0 0 1px #111 inset;
}

.upsell-card__body[b-wnks4r0sw2] {
    flex: 1;
    padding: 0.85rem 0.9rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.upsell-card__title[b-wnks4r0sw2] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

.upsell-card__price[b-wnks4r0sw2] {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
}

.upsell-card__toggle[b-wnks4r0sw2] {
    appearance: none;
    cursor: pointer;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
    border-radius: 7px;
    margin: 0 0.9rem 0.9rem;
    transition: background 120ms ease, color 120ms ease;
}

.upsell-card__toggle:hover[b-wnks4r0sw2] {
    background: #2a2a2a;
}

.upsell-card__toggle--remove[b-wnks4r0sw2] {
    background: #fff;
    color: #111;
}

.upsell-card__toggle--remove:hover[b-wnks4r0sw2] {
    background: #f4f4f4;
}

/* Expandable values list — mirrors the tier-comparison card's value list
   so the two carousels read as visually related. Collapsed by default to
   keep the carousel compact; patients who want to see what's measured tap
   to expand. */
.upsell-card__values[b-wnks4r0sw2] {
    border-top: 1px solid #f1f5f9;
    padding: 0 0.9rem 0.6rem;
}

.upsell-card__values-heading[b-wnks4r0sw2] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #555;
    margin: 0.6rem 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upsell-card__value-list[b-wnks4r0sw2] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.4rem;
}

.upsell-card__value[b-wnks4r0sw2] {
    font-size: 0.82rem;
    color: #333;
    padding: 0.15rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.upsell-card__value:last-child[b-wnks4r0sw2] {
    border-bottom: none;
}

.upsell-card__values-toggle[b-wnks4r0sw2] {
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    margin-top: 0.5rem;
    padding: 0.4rem 0 0.1rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #475569;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 120ms ease;
}

.upsell-card__values-toggle:hover[b-wnks4r0sw2] {
    color: #111;
}

.upsell-card__values-toggle-icon[b-wnks4r0sw2] {
    transition: transform 150ms ease;
}

.upsell-card__values-toggle-icon--open[b-wnks4r0sw2] {
    transform: rotate(180deg);
}
/* /Components/Pages/Sections/BloodTestProfileComparison.razor.rz.scp.css */
.profile-comparison[b-brwtbjt0i2] {
    margin: 1.5rem 0 1rem;
}

.profile-comparison__subtitle[b-brwtbjt0i2] {
    margin: 0.25rem 0 1rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

.profile-comparison__grid[b-brwtbjt0i2] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .profile-comparison__grid[b-brwtbjt0i2] {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }
}

/* Mobile: the three tiers don't fit side-by-side, so the grid becomes a
   horizontal snap carousel. It rests at its first snap point — the leftmost
   "Mindestprofil" tier (6 values) — and the patient swipes right to the larger
   profiles. The generous inline padding lets the neighbouring card peek in on
   the right — a visible cue that there's more to swipe through. The mask-image
   fades both edges so the peeking cards dissolve toward the edge (mirrors the
   upsell carousel below). padding-top clears each card's corner ribbon, which
   overflow-x:auto would otherwise clip. */
@media (max-width: 639px) {
    .profile-comparison__grid[b-brwtbjt0i2] {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0.9rem 17vw 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    }

    .profile-comparison__grid[b-brwtbjt0i2]::-webkit-scrollbar {
        display: none;
    }

    .profile-card[b-brwtbjt0i2] {
        flex: 0 0 66vw;
        scroll-snap-align: center;
    }
}

.profile-card[b-brwtbjt0i2] {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.profile-card:hover[b-brwtbjt0i2] {
    border-color: #b9c0c8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.profile-card--selected[b-brwtbjt0i2] {
    border-color: #111;
    box-shadow: 0 0 0 1px #111 inset;
}

.profile-card--premium[b-brwtbjt0i2] {
    background: linear-gradient(180deg, #fff 0%, #faf6ee 100%);
}

/* Corner ribbon shared by all three tiers. The base rule is layout only —
   each tier's modifier sets the colour, giving a deliberate three-step
   emphasis hierarchy (quiet info chip → green social proof → gold authority). */
.profile-card__ribbon[b-brwtbjt0i2] {
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
}

/* "Mindestprofil" — the baseline tier carries the mandatory blood values,
   so its badge is descriptive, not promotional: a quiet neutral chip that
   stays out of the way of the two recommendation badges. The border keeps it
   legible where the ribbon overhangs onto the white page background. */
.profile-card__ribbon--required[b-brwtbjt0i2] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e4e4e4;
}

/* "Meistgewählt" — social-proof nudge on the middle tier. Brand green reads
   as the positive default. */
.profile-card__ribbon--popular[b-brwtbjt0i2] {
    background: #1f7a3a;
    color: #fff;
}

/* "Empfehlung" — gold, matched to the premium card's cream gradient;
   the strongest badge, carrying authority on the top tier. */
.profile-card__ribbon--recommended[b-brwtbjt0i2] {
    background: #c79a3c;
    color: #fff;
}

/* Small product image at the top of each tier card — mirrors the media slot
   on the additional-blood-tests carousel cards below for visual consistency.
   object-fit:contain so the Gesundheitsprofil imagery isn't cropped; the soft
   background fills any letterboxing so all three cards line up. */
.profile-card__media[b-brwtbjt0i2] {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 0.75rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card__media img[b-brwtbjt0i2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.profile-card__header[b-brwtbjt0i2] {
    margin-bottom: 0.75rem;
}

.profile-card__title[b-brwtbjt0i2] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111;
}

.profile-card__tagline[b-brwtbjt0i2] {
    margin: 0 0 0.6rem;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.4;
}

.profile-card__meta[b-brwtbjt0i2] {
    display: flex;
    align-items: baseline;
}

.profile-card__price[b-brwtbjt0i2] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111;
}

.profile-card__toggle[b-brwtbjt0i2] {
    appearance: none;
    cursor: pointer;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.profile-card__toggle:hover[b-brwtbjt0i2] {
    background: #2a2a2a;
}

/* Selected state: a quieter "chip" look instead of the long
   "Ausgewählt — Entfernen" label that used to wrap onto two lines. The green
   check confirms the choice; the circular ✕ on the right is the deselect
   affordance — visible without hover, so it reads on touch too. */
.profile-card__toggle--selected[b-brwtbjt0i2],
.profile-card__toggle--selected:hover[b-brwtbjt0i2] {
    background: #fff;
    color: #111;
}

.profile-card__toggle-check[b-brwtbjt0i2] {
    display: inline-flex;
    color: #1f7a3a;
}

.profile-card__toggle-remove[b-brwtbjt0i2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f1f1;
    color: #555;
    transition: background 120ms ease, color 120ms ease;
}

.profile-card__toggle--selected:hover .profile-card__toggle-remove[b-brwtbjt0i2] {
    background: #f5d9d9;
    color: #c0392b;
}

.profile-card__values[b-brwtbjt0i2] {
    flex: 1;
}

.profile-card__values-heading[b-brwtbjt0i2] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-card__values-heading--new[b-brwtbjt0i2] {
    color: #1f7a3a;
    margin-top: 0.85rem;
}

.profile-card__value-list[b-brwtbjt0i2] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-card__value[b-brwtbjt0i2] {
    font-size: 0.88rem;
    color: #333;
    padding: 0.18rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.profile-card__value:last-child[b-brwtbjt0i2] {
    border-bottom: none;
}

.profile-card__value--new[b-brwtbjt0i2] {
    color: #1f7a3a;
    font-weight: 500;
}

.profile-card__value--new[b-brwtbjt0i2]::before {
    content: "+ ";
    color: #1f7a3a;
    font-weight: 700;
    margin-right: 0.15rem;
}

/* Collapsed-by-default values list. The toggle keeps cards short on first
   render so the three tiers are easy to compare; patients who want the full
   list expand on demand. */
.profile-card__values-toggle[b-brwtbjt0i2] {
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.85rem;
    padding: 0.6rem 0 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #475569;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 120ms ease;
}

.profile-card__values-toggle:hover[b-brwtbjt0i2] {
    color: #111;
}

.profile-card__values-toggle-icon[b-brwtbjt0i2] {
    transition: transform 150ms ease;
}

.profile-card__values-toggle-icon--open[b-brwtbjt0i2] {
    transform: rotate(180deg);
}

/* Trust note below the tier grid — sets expectations on lab turnaround and on
   what each profile physically includes, so nothing is a surprise post-checkout. */
.profile-comparison__assurance[b-brwtbjt0i2] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
}

.profile-comparison__assurance-item[b-brwtbjt0i2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.45;
}

.profile-comparison__assurance-icon[b-brwtbjt0i2] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #1f7a3a;
}
/* /Components/Pages/Sections/CheckoutBookingLockedCard.razor.rz.scp.css */
/* ─── Gesperrte Terminauswahl (ADO #356) ──────────────────────────────────
   Gleiche Formsprache wie die CheckoutBookingStatusCard, aber informierend
   statt handlungsauffordernd: kein CTA, ruhiger Akzent — der Patient soll die
   Erklärung lesen, nicht nach einem Button suchen, den es hier nicht gibt.
   Styles liegen neben dem Markup (Scoped-CSS greift nicht über die
   Komponentengrenze — siehe Kommentar in CheckoutBookingStatusCard.razor.css). */

.booking-locked[b-wixocwmig4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 30, 17, 0.12);
    background: var(--wb-landing-wash-top, #f1f7f2);
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    text-align: left;
}

.booking-locked__icon[b-wixocwmig4] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--wb-landing-heading, #0B1E11);
}

.booking-locked__body[b-wixocwmig4] {
    flex: 1;
    min-width: 0;
}

.booking-locked__body h3[b-wixocwmig4] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.25rem;
}

.booking-locked__body p[b-wixocwmig4] {
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.45;
}
/* /Components/Pages/Sections/CheckoutBookingStatusCard.razor.rz.scp.css */
/* ─── Booking status card (consultation in cart, three states) ──────────
   Diese Styles lebten früher im Scoped-CSS der CheckoutReviewPage. Da das
   Markup aber in DIESER Kind-Komponente steckt, griff das Seiten-Scoped-CSS
   nicht über die Komponentengrenze (kein ::deep) — die Karte wurde komplett
   ungestylt gerendert (wirkte wie roher Text). Die Styles gehören daher hier
   neben das Markup. */

.booking-status[b-qjozi9wqot] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 30, 17, 0.12);
    background: #ffffff;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    text-align: left;
}

.booking-status__icon[b-qjozi9wqot] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    background: #e9f4ec;
}

.booking-status__icon--ok[b-qjozi9wqot] {
    color: #ffffff;
    background: #22c55e;
}

.booking-status__body[b-qjozi9wqot] {
    flex: 1;
    min-width: 0;
}

.booking-status__body h3[b-qjozi9wqot] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
    margin: 0 0 0.15rem;
}

.booking-status__body p[b-qjozi9wqot] {
    font-size: 0.85rem;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    margin: 0;
    line-height: 1.4;
}

.booking-status__line[b-qjozi9wqot] {
    color: var(--wb-landing-heading, #0B1E11) !important;
    font-weight: 500;
}

.booking-status__meta[b-qjozi9wqot] {
    margin-top: 0.15rem !important;
}

.booking-status__countdown[b-qjozi9wqot] {
    margin-top: 0.4rem !important;
    font-size: 0.8rem !important;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66)) !important;
}

.booking-status--reserved[b-qjozi9wqot] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.booking-status--expired[b-qjozi9wqot] {
    border-color: #fecaca;
    background: #fef2f2;
}

.booking-status--expired .booking-status__icon[b-qjozi9wqot] {
    color: #ffffff;
    background: #dc2626;
}

.booking-status--expired .booking-status__body h3[b-qjozi9wqot] {
    color: #991b1b;
}

/* Hervorgehoben: solange noch KEIN Termin gewählt ist, ist das die nächste
   erforderliche Aktion im Checkout. Kräftiger Akzent-Rahmen + getönter
   Hintergrund + gefülltes Icon + dezente Elevation, damit die Karte deutlich
   aus der weißen Bestellübersicht heraussticht. */
.booking-status--pending[b-qjozi9wqot] {
    border: 1.5px solid var(--wb-landing-heading, #0B1E11);
    background: var(--wb-landing-wash-top, #f1f7f2);
    box-shadow: 0 2px 12px rgba(11, 30, 17, 0.10);
}

.booking-status--pending .booking-status__icon[b-qjozi9wqot] {
    color: #ffffff;
    background: var(--wb-landing-heading, #0B1E11);
}

.booking-status__cta[b-qjozi9wqot] {
    flex: 0 0 auto;
    background: var(--wb-landing-heading, #0B1E11);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

.booking-status__cta:hover[b-qjozi9wqot] {
    background: #07120b;
}

.booking-status__edit[b-qjozi9wqot] {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(11, 30, 17, 0.25);
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 150ms ease, color 150ms ease;
}

.booking-status__edit:hover[b-qjozi9wqot] {
    border-color: rgba(11, 30, 17, 0.4);
    color: var(--wb-landing-heading, #0B1E11);
}

@media (max-width: 480px) {
    .booking-status[b-qjozi9wqot] {
        flex-wrap: wrap;
    }
    .booking-status__cta[b-qjozi9wqot],
    .booking-status__edit[b-qjozi9wqot] {
        margin-left: auto;
    }
}
/* /Components/Pages/Sections/CheckoutCartSummary.razor.rz.scp.css */
/* Invoice-style cart summary used in the right sidebar of /checkout/review.
   Owned by the component (not the page) so Blazor CSS isolation reliably
   scopes the rules — previously these lived on the parent page and the
   scope attribute mismatch made them inert in some renders. */

.cart-summary-section[b-j58n354fdb] {
    text-align: left;
}

.cart-summary-section .section-title[b-j58n354fdb] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wb-landing-heading, #0B1E11);
}

/* One row per line item. Baseline alignment so badge / name / price all sit
   on the same typographic baseline like a printed invoice. The name column
   takes remaining space and wraps; the price is fixed on the right and
   never shrinks (flex-shrink: 0). */
.cart-summary-item[b-j58n354fdb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.cart-summary-item + .cart-summary-item[b-j58n354fdb] {
    border-top: 1px dashed rgba(11, 30, 17, 0.15);
}

.item-details[b-j58n354fdb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.item-name-group[b-j58n354fdb] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.item-name[b-j58n354fdb] {
    color: var(--wb-landing-heading, #0B1E11);
    font-size: 0.9rem;
    line-height: 1.35;
}

.item-qty[b-j58n354fdb] {
    /* Quantity is real information, not chrome — slate-400 (2.6:1) failed AA.
       slate-600 (5.85:1) keeps it secondary to the name but clearly legible. */
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: 0.85rem;
}

.item-price[b-j58n354fdb] {
    flex-shrink: 0;
    color: var(--wb-landing-heading, #0B1E11);
    font-weight: 500;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Total row — emphasised, separated from line items by a solid divider. */
.cart-summary-total[b-j58n354fdb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.7rem;
    margin-top: 0.4rem;
    border-top: 1px solid rgba(11, 30, 17, 0.25);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wb-landing-heading, #0B1E11);
}

.total-price[b-j58n354fdb] {
    color: var(--wb-landing-heading, #0B1E11);
    font-variant-numeric: tabular-nums;
}

/* Paketpreis-Disclaimer — small-print directly under the total, mirroring the
   `.product-price-note` footnote on the product detail page (#857). Dezent, klar
   als rechtlicher Hinweis lesbar, ohne die Checkout-Aktion zu überlagern. */
.cart-summary-note[b-j58n354fdb] {
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.6));
}

/* laender-bestellbarkeit (R2): Labortest-Position nicht in das Lieferadress-Land lieferbar */
.item-country-restricted[b-j58n354fdb] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--doctrinus-warning-text, #7a4d00);
    background: var(--doctrinus-warning-bg, #fff6e5);
    border: 1px solid var(--doctrinus-warning-border, #f0c36d);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    margin-top: 0.2rem;
}
/* /Components/Pages/TestosteronRechnerPage.razor.rz.scp.css */
/* Testosteron Rechner Page - Exact Doctrinus Design */
/* Matches https://www.doctrinus.de/pages/testosteron-rechner */

/* Design tokens from Doctrinus */
:root[b-8tb228anh4] {
    --testo-bg: #f7fbff;
    --testo-card: #ffffff;
    --testo-ink: #0d2013;
    --testo-muted: #6e8a76;
    --testo-accent: #3b82f6;
    --testo-ok: #10b981;
    --testo-ok-light: #6ee7b7;
    --testo-danger: #ef4444;
    --testo-orange: #f59e0b;
    --testo-radius: 20px;
    --testo-shadow: 0 8px 25px rgba(59, 130, 246, 0.08);
}

.testo-page[b-8tb228anh4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--testo-bg);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.testo-page__content[b-8tb228anh4] {
    flex: 1;
    padding: 24px 16px 48px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* Calculator Card */
.testo-calculator[b-8tb228anh4] {
    background: var(--testo-card);
    border-radius: var(--testo-radius);
    padding: 32px 24px;
    box-shadow: var(--testo-shadow);
    text-align: center;
}

.testo-calculator__subtitle[b-8tb228anh4] {
    font-size: 15px;
    color: var(--testo-muted);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 28px 0;
}

/* Input Fields */
.testo-field[b-8tb228anh4] {
    margin-bottom: 20px;
    text-align: left;
}

.testo-label[b-8tb228anh4] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--testo-muted);
    margin-bottom: 6px;
}

.testo-input[b-8tb228anh4],
.testo-select[b-8tb228anh4] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--testo-ink);
    background: #f3f8ff;
    border: 1px solid #dfeee2;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
    box-sizing: border-box;
}

.testo-input[b-8tb228anh4]::placeholder {
    color: #94a3b8;
}

.testo-input:focus[b-8tb228anh4],
.testo-select:focus[b-8tb228anh4] {
    border-color: var(--testo-accent);
    background: #eef6ff;
}

/* Remove number input spinners */
.testo-input[type="number"][b-8tb228anh4]::-webkit-outer-spin-button,
.testo-input[type="number"][b-8tb228anh4]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.testo-input[type="number"][b-8tb228anh4] {
    -moz-appearance: textfield;
}

/* Converted Value Display */
.testo-output[b-8tb228anh4] {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--testo-accent);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* --- Bar Display --- */
.testo-bar-wrap[b-8tb228anh4] {
    margin: 40px auto 20px;
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #e3f0e6;
}

.testo-bar-bg[b-8tb228anh4] {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            var(--testo-danger) 0%,
            var(--testo-danger) 24.0%,
            var(--testo-orange) 24.0%,
            var(--testo-orange) 40.0%,
            var(--testo-ok) 40.0%,
            var(--testo-ok) 56.0%,
            var(--testo-orange) 56.0%,
            var(--testo-orange) 72.0%,
            var(--testo-danger) 72.0%,
            var(--testo-danger) 100%);
    opacity: 0.3;
}

.testo-bar-fill[b-8tb228anh4] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--testo-accent);
    transition: width 0.5s ease;
}

/* Notice Box */
.testo-notice[b-8tb228anh4] {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    background: #eef6ff;
    border: 1px solid #dbeafe;
    color: #245231;
    text-align: center;
    line-height: 1.5;
}

/* Consult Button */
.testo-consult-btn[b-8tb228anh4] {
    display: inline-block;
    margin: 18px auto 0;
    background: var(--testo-accent);
    color: #ffffff;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding: 14px 26px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.testo-consult-btn:hover[b-8tb228anh4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.2);
    color: #ffffff;
}

/* CTA Card - Hero style with text overlay on image */
.testo-cta-card[b-8tb228anh4] {
    display: block;
    position: relative;
    border-radius: var(--testo-radius);
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    margin-top: 24px;
    min-height: 480px;
}

.testo-cta-card__image[b-8tb228anh4] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform 0.4s ease;
}

.testo-cta-card:hover .testo-cta-card__image[b-8tb228anh4] {
    transform: scale(1.03);
}

.testo-cta-card__content[b-8tb228anh4] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
    z-index: 1;
}

.testo-cta-card__text[b-8tb228anh4] {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.testo-cta-card__button[b-8tb228anh4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #ffffff;
    color: #000000;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s ease, transform 0.2s ease;
}

.testo-cta-card:hover .testo-cta-card__button[b-8tb228anh4] {
    background: #f8f8f8;
    transform: scale(1.02);
}

/* Responsive adjustments */
@media (min-width: 600px) {
    .testo-page__content[b-8tb228anh4] {
        padding: 40px 24px 60px;
    }

    .testo-calculator[b-8tb228anh4] {
        padding: 40px 36px;
    }

    .testo-output[b-8tb228anh4] {
        font-size: 2.5rem;
    }
}

@media (min-width: 800px) {
    .testo-page__content[b-8tb228anh4] {
        max-width: 520px;
    }

    .testo-calculator[b-8tb228anh4] {
        padding: 48px 44px;
    }
}
/* /Components/Pages/TherapieDetailPage.razor.rz.scp.css */
.therapie-hub-page[b-rijpqs6u83] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wb-color-surface);
}

.therapie-hub-page__content[b-rijpqs6u83] {
    flex: 1;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: var(--wb-space-10) var(--wb-space-5) var(--wb-space-14);
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-10);
}

.therapie-hub__loading[b-rijpqs6u83],
.therapie-hub__error[b-rijpqs6u83] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    gap: var(--wb-space-4);
}

.therapie-hub__header[b-rijpqs6u83] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4) 0 var(--wb-space-2);
}

.therapie-hub__eyebrow[b-rijpqs6u83] {
    font-size: var(--wb-font-size-xs);
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.therapie-hub__title[b-rijpqs6u83] {
    margin: 0;
    font-size: var(--wb-font-size-4xl);
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 32rem;
}

.therapie-hub__accent[b-rijpqs6u83] {
    display: block;
    width: 3rem;
    height: 2px;
    margin: var(--wb-space-2) 0 var(--wb-space-1);
    background: linear-gradient(90deg,
            var(--wb-color-primary) 0%,
            var(--wb-color-primary-lighter, #42804C) 100%);
    border-radius: 2px;
}

.therapie-hub__subtitle[b-rijpqs6u83] {
    margin: 0;
    font-size: var(--wb-font-size-md);
    color: var(--wb-color-text-secondary);
    max-width: 28rem;
}

.therapie-hub-page__background[b-rijpqs6u83] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-10);
}

/* Mobile: tighten vertical rhythm so the hero doesn't dominate */
@media (max-width: 600px) {
    .therapie-hub-page__content[b-rijpqs6u83] {
        padding: var(--wb-space-6) var(--wb-space-4) var(--wb-space-10);
        gap: var(--wb-space-6);
    }

    .therapie-hub__header[b-rijpqs6u83] {
        padding: var(--wb-space-2) 0 0;
    }

    .therapie-hub__title[b-rijpqs6u83] {
        font-size: var(--wb-font-size-3xl);
    }
}
/* /Components/Pages/TherapieInfoPage.razor.rz.scp.css */
.info-hero[b-gsthapnfwh] {
    text-align: center;
    padding: var(--wb-space-8) var(--wb-space-4) var(--wb-space-4);
    max-width: 60rem;
    margin: 0 auto;
}

.info-hero--compact[b-gsthapnfwh] {
    padding: var(--wb-space-3) var(--wb-space-4) var(--wb-space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-2);
}

/* "So funktioniert es" is rendered as subtitle in the hero above; hide the
   component's built-in title so there's no duplicate heading once the
   sticky pack engages. The component's native scroll-sticky choreography
   (tall outer + pinned inner + per-step active class) is otherwise left
   intact — matches the master detail-page behavior. */
.category-detail[b-gsthapnfwh]  .how-it-works__title {
    display: none;
}

.info-hero__subtitle[b-gsthapnfwh] {
    margin: 0;
    font-size: var(--wb-font-size-md);
    color: var(--wb-color-text-secondary);
    font-weight: 500;
}

.info-hero__title[b-gsthapnfwh] {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 600;
    margin: 0;
    color: var(--wb-color-text);
    line-height: 1.15;
}

.info-hero__back[b-gsthapnfwh] {
    display: flex;
    justify-content: center;
}

.therapie-detail-page[b-gsthapnfwh] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    transition: background-color 0.3s ease;
}

/* Gender-specific backgrounds */
.therapie-detail-page--male[b-gsthapnfwh] {
    background: #FFFFFF;
}

.therapie-detail-page--female[b-gsthapnfwh] {
    background: #FFFFFF;
}

.therapie-detail-page__content[b-gsthapnfwh] {
    flex: 1;
    padding: 0 var(--wb-space-4) var(--wb-space-8);
    max-width: 1520px;
    margin: 0 auto;
    width: 100%;
}

.therapie-detail-page__loading[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* Skeleton loading styles */
.skeleton-card[b-gsthapnfwh] {
    background: var(--wb-color-surface);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-6);
}

.skeleton-pills[b-gsthapnfwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
}

.skeleton-pill[b-gsthapnfwh] {
    border-radius: var(--wb-radius-full);
}

.skeleton-guarantee-row[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
}

.skeleton-guarantee[b-gsthapnfwh] {
    border-radius: var(--wb-radius-lg);
}

.skeleton-cta[b-gsthapnfwh] {
    margin: 0 auto;
}

@media (min-width: 600px) {
    .skeleton-guarantee-row[b-gsthapnfwh] {
        flex-direction: row;
    }

    .skeleton-guarantee[b-gsthapnfwh] {
        flex: 1;
    }
}

.therapie-detail-page__error[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: var(--wb-space-6);
    text-align: center;
}

.therapie-detail-page__error .mud-alert[b-gsthapnfwh] {
    max-width: 400px;
}

/* Category Detail View */
.category-detail[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-6);
    padding-top: var(--wb-space-4);
    padding-bottom: var(--wb-space-8);
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn-b-gsthapnfwh 0.3s ease-out;
}

@keyframes fadeIn-b-gsthapnfwh {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.category-detail__hero[b-gsthapnfwh] {
    text-align: center;
    padding: var(--wb-space-6) var(--wb-space-4);
    background: transparent;
    margin-bottom: var(--wb-space-2);
}

.category-detail__title[b-gsthapnfwh] {
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-text-primary);
    margin-bottom: var(--wb-space-2);
}

.category-detail__loading[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wb-space-8);
    min-height: 120px;
}

.category-detail__actions[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-3);
    padding: var(--wb-space-2) 0;
}

.category-detail__start-btn[b-gsthapnfwh] {
    width: 100%;
    max-width: 25rem;
    padding: var(--wb-space-4) var(--wb-space-6);
    font-size: var(--wb-font-size-lg);
    font-weight: var(--wb-font-weight-semibold);
    text-transform: none;
    border-radius: var(--wb-radius-lg);
    box-shadow: var(--wb-shadow-lg);
}

.category-detail__start-btn:disabled[b-gsthapnfwh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Testosterone requirement note */
.testosteron-requirement-note[b-gsthapnfwh] {
    text-align: center;
    padding: 0 var(--wb-space-4);
    max-width: 32rem;
    margin: -1.5rem auto 0;
}

.testosteron-requirement-note p[b-gsthapnfwh] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0 0;
}

.testosteron-requirement-note p:last-child[b-gsthapnfwh] {
    margin-bottom: 0;
}

.testosteron-requirement-note .testosteron-rechner-link[b-gsthapnfwh] {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    border: 1px solid #a0a0a0;
    border-radius: var(--wb-radius-lg);
    padding: var(--wb-space-2) var(--wb-space-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.testosteron-requirement-note .testosteron-rechner-link:hover[b-gsthapnfwh] {
    border-color: #777;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

@media (min-width: 600px) {
    .category-detail[b-gsthapnfwh] {
        gap: var(--wb-space-8);
        padding-top: var(--wb-space-6);
    }

    .category-detail__hero[b-gsthapnfwh] {
        padding: var(--wb-space-10) var(--wb-space-6);
    }

    .category-detail__actions[b-gsthapnfwh] {
        padding: var(--wb-space-3) 0;
    }
}

/* Upsell cards container - side by side on desktop */
.upsell-cards-container[b-gsthapnfwh] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
}

@media (min-width: 800px) {
    .upsell-cards-container[b-gsthapnfwh] {
        flex-direction: row;
        align-items: stretch;
    }

    .upsell-cards-container> :global(*)[b-gsthapnfwh] {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Style overrides for category components */
.category-detail :deep(.medication-selector-card)[b-gsthapnfwh] {
    background: var(--wb-color-surface);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-6);
}

.category-detail :deep(.how-it-works)[b-gsthapnfwh] {
    background: var(--wb-color-surface);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-6);
}

/* Newsletter section wrapper - break out of 800px parent to match TrtBehandlungsplanSection width */
.category-detail__newsletter-breakout[b-gsthapnfwh] {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    max-width: 1440px;
}

.category-detail :deep(.mud-expansion-panel)[b-gsthapnfwh] {
    background: var(--wb-color-background);
    border-radius: var(--wb-radius-md);
    margin-bottom: var(--wb-space-2);
}

/* Section Divider */
.therapie-detail__section-divider[b-gsthapnfwh] {
    display: flex;
    align-items: center;
    gap: var(--wb-space-4, 1rem);
    margin: var(--wb-space-2, 0.5rem) 0 0;
}

.therapie-detail__section-divider[b-gsthapnfwh]::before,
.therapie-detail__section-divider[b-gsthapnfwh]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c7d5e3 40%, #c7d5e3 60%, transparent);
}

.section-divider__label[b-gsthapnfwh] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #14301c;
    white-space: nowrap;
    padding: 0 var(--wb-space-2, 0.5rem);
}

/* "Mehr als" Promotional Cards Section - breakout to match TestosteronInfoSection width */
.therapie-detail__mehr-als[b-gsthapnfwh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 2rem 0;
    margin-bottom: var(--wb-space-4, 1rem);
    /* Break out of 800px parent to match TestosteronInfoSection width */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    max-width: 1440px;
}

@media (min-width: 640px) {
    .therapie-detail__mehr-als[b-gsthapnfwh] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mehr-als-card[b-gsthapnfwh] {
    background: #e1edf5;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-height: 380px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mehr-als-card:hover[b-gsthapnfwh] {
    transform: translateY(-4px);
}

.mehr-als-card__title[b-gsthapnfwh] {
    font-size: 28px;
    font-weight: 500;
    color: #42804c;
    margin: 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.mehr-als-card__subtitle[b-gsthapnfwh] {
    font-size: 22px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.81);
    margin: 0.25rem 0 1rem;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.mehr-als-card__image[b-gsthapnfwh] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}

.mehr-als-card__image-circle[b-gsthapnfwh] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.mehr-als-card__image-circle img[b-gsthapnfwh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mehr-als-card__text[b-gsthapnfwh] {
    font-size: 13.5px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 639px) {
    .mehr-als-card[b-gsthapnfwh] {
        min-height: 320px;
        padding: 1.5rem;
    }

    .mehr-als-card__image-circle[b-gsthapnfwh] {
        width: 150px;
        height: 150px;
    }
}
/* /Components/Pages/UeberUns.razor.rz.scp.css */
/* UeberUns - About Us page styles */
/* Uses design tokens from app.css (--wb-*) */

.about-container[b-yu6pvaw6ax] {
    min-height: 100vh;
    background-color: var(--wb-color-surface);
    padding: var(--wb-space-8) var(--wb-space-4);
    display: flex;
    justify-content: center;
}

.about-content[b-yu6pvaw6ax] {
    max-width: 900px;
    width: 100%;
}

.back-button[b-yu6pvaw6ax] {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-2-5) var(--wb-space-5);
    background-color: var(--wb-color-surface);
    border: 1px solid var(--wb-color-border);
    border-radius: var(--wb-radius-lg);
    color: var(--wb-color-secondary);
    font-size: var(--wb-font-size-sm);
    font-weight: var(--wb-font-weight-medium);
    cursor: pointer;
    transition: all var(--wb-transition-normal) var(--wb-ease-default);
    margin-bottom: var(--wb-space-8);
}

.back-button:hover[b-yu6pvaw6ax] {
    background-color: var(--wb-color-background);
    border-color: var(--wb-color-secondary-light);
}

.about-title[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-4xl);
    font-weight: var(--wb-font-weight-bold);
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-2) 0;
}

.about-subtitle[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-md);
    color: var(--wb-color-text-secondary);
    margin: 0 0 var(--wb-space-6) 0;
}

.about-highlight[b-yu6pvaw6ax] {
    display: flex;
    align-items: flex-start;
    gap: var(--wb-space-4);
    background: linear-gradient(135deg, var(--wb-color-primary-light) 0%, var(--wb-color-surface) 100%);
    border: 1px solid var(--wb-color-primary);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-6);
    margin-bottom: var(--wb-space-8);
}

.highlight-icon[b-yu6pvaw6ax] {
    flex-shrink: 0;
    width: var(--wb-size-icon-lg);
    height: var(--wb-size-icon-lg);
    background-color: var(--wb-color-primary);
    border-radius: var(--wb-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wb-color-primary-contrast);
}

.highlight-content strong[b-yu6pvaw6ax] {
    display: block;
    font-size: var(--wb-font-size-lg);
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-text-primary);
    margin-bottom: var(--wb-space-2);
}

.highlight-content p[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-sm);
    color: var(--wb-color-secondary);
    margin: 0;
    line-height: var(--wb-line-height-relaxed);
}

.about-section[b-yu6pvaw6ax] {
    margin-bottom: var(--wb-space-8);
    padding-bottom: var(--wb-space-8);
    border-bottom: 1px solid var(--wb-color-border);
}

.about-section:last-child[b-yu6pvaw6ax] {
    border-bottom: none;
}

.about-section h2[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-xl);
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4) 0;
}

.about-section p[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    color: var(--wb-color-secondary);
    margin: 0 0 var(--wb-space-4) 0;
}

.about-section p:last-child[b-yu6pvaw6ax] {
    margin-bottom: 0;
}

.about-section ul[b-yu6pvaw6ax] {
    margin: var(--wb-space-4) 0;
    padding-left: var(--wb-space-6);
}

.about-section li[b-yu6pvaw6ax] {
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    color: var(--wb-color-secondary);
    margin-bottom: var(--wb-space-2);
}

.about-section li:last-child[b-yu6pvaw6ax] {
    margin-bottom: 0;
}

.about-section strong[b-yu6pvaw6ax] {
    color: var(--wb-color-text-primary);
}

/* Team Grid — Karten mit eingebranntem Namen/Rolle (ADO #242), feste Reihenfolge */
.team-grid[b-yu6pvaw6ax] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wb-space-4);
    margin-top: var(--wb-space-6);
}

.team-card[b-yu6pvaw6ax] {
    background: var(--wb-color-background);
    border-radius: var(--wb-radius-lg);
    overflow: hidden;
    transition: transform var(--wb-transition-fast) var(--wb-ease-default),
                box-shadow var(--wb-transition-fast) var(--wb-ease-default);
}

.team-card:hover[b-yu6pvaw6ax] {
    transform: translateY(-4px);
    box-shadow: var(--wb-shadow-lg);
}

.team-photo[b-yu6pvaw6ax] {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* CTA Section */
.about-section--cta[b-yu6pvaw6ax] {
    text-align: center;
    background: var(--wb-color-background);
    border-radius: var(--wb-radius-xl);
    padding: var(--wb-space-8);
    border-bottom: none;
}

.cta-button[b-yu6pvaw6ax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wb-space-3) var(--wb-space-6);
    background-color: var(--wb-color-primary);
    color: var(--wb-color-primary-contrast);
    font-size: var(--wb-font-size-sm);
    font-weight: var(--wb-font-weight-semibold);
    border-radius: var(--wb-radius-button);
    text-decoration: none;
    transition: background-color var(--wb-transition-fast) var(--wb-ease-default);
    margin-top: var(--wb-space-4);
}

.cta-button:hover[b-yu6pvaw6ax] {
    background-color: var(--wb-color-primary-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .about-container[b-yu6pvaw6ax] {
        padding: var(--wb-space-6) var(--wb-space-4);
    }

    .about-title[b-yu6pvaw6ax] {
        font-size: var(--wb-font-size-3xl);
    }

    .about-highlight[b-yu6pvaw6ax] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-section h2[b-yu6pvaw6ax] {
        font-size: var(--wb-font-size-lg);
    }

    .about-section p[b-yu6pvaw6ax],
    .about-section li[b-yu6pvaw6ax] {
        font-size: var(--wb-font-size-sm);
    }

}

@media (max-width: 640px) {
    .team-grid[b-yu6pvaw6ax] {
        grid-template-columns: 1fr;
        gap: var(--wb-space-3);
    }
}

@media (max-width: 480px) {

    .about-section--cta[b-yu6pvaw6ax] {
        padding: var(--wb-space-6);
    }
}
/* /Components/Pages/UnifiedQuestionnaire.razor.rz.scp.css */
/* UnifiedQuestionnaire Page Styles - Doctrinus Aesthetic */

/* Page wrapper - full viewport questionnaire layout */
.page-wrapper[b-7q6j0qt8pa] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* Force a clean white page background for the unified questionnaire
       to avoid the surrounding grey area from the global theme */
    background-color: #ffffff !important;
    overflow: hidden;
}

.page-fade-in[b-7q6j0qt8pa] {
    animation: fadeIn-b-7q6j0qt8pa 0.3s ease-out;
}

@keyframes fadeIn-b-7q6j0qt8pa {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Main container */
.questionnaire-container[b-7q6j0qt8pa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: var(--wb-space-4) var(--wb-space-6);
    padding-bottom: 0;
    overflow: hidden;
    min-height: 0;
    /* Important for flex child to allow shrinking */
}

/* ADO #250: scrollable region for the profile-review ("Willkommen zurück") step — see the
   matching comment in UnifiedQuestionnaire.razor. Mirrors .scrollable-content below (flex
   child that can shrink + scrolls its own overflow) without the question flow's scroll-
   indicator/JS-listener machinery, which this simpler step doesn't need. */
.profile-review-scroll[b-7q6j0qt8pa] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollable content wrapper - contains scrollable area and indicator */
.scrollable-content-wrapper[b-7q6j0qt8pa] {
    flex: 1;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable content area */
.scrollable-content[b-7q6j0qt8pa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--wb-space-4);
    min-height: 0;
}

/* Progress indicator */
.progress-container[b-7q6j0qt8pa] {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--wb-space-6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-bar[b-7q6j0qt8pa] {
    height: 100%;
    /* Landing-Navy statt Schwarz — gleiche Markensprache wie die Pill-CTAs. */
    background: var(--wb-landing-heading, #0B1E11);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(11, 30, 17, 0.25);
    position: relative;
}

.progress-bar[b-7q6j0qt8pa]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer-b-7q6j0qt8pa 2s infinite;
}

@keyframes shimmer-b-7q6j0qt8pa {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Sticky header container - fixed at top of questionnaire */
.sticky-header[b-7q6j0qt8pa] {
    flex-shrink: 0;
    z-index: var(--wb-z-sticky, 100);
    background-color: #ffffff;
    padding-top: var(--wb-space-4);
    margin-left: calc(-1 * var(--wb-space-6));
    margin-right: calc(-1 * var(--wb-space-6));
    padding-left: var(--wb-space-6);
    padding-right: var(--wb-space-6);
}

/* Header row with logo and settings */
.header-row[b-7q6j0qt8pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wb-space-2) 0;
    margin-bottom: var(--wb-space-2);
}

/* Logo header - sized to content only */
.logo-header[b-7q6j0qt8pa] {
    display: inline-block;
    padding: var(--wb-space-1) var(--wb-space-2);
    border-radius: var(--wb-radius-md);
}

.logo-image[b-7q6j0qt8pa] {
    height: 32px;
    width: auto;
    display: block;
}

/* Review mode banner */
.review-mode-banner[b-7q6j0qt8pa] {
    display: flex;
    align-items: center;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4) var(--wb-space-5);
    background: var(--wb-color-accent-lightest);
    border: 1px solid var(--wb-color-accent-light);
    border-radius: var(--wb-radius-2xl);
    margin-bottom: var(--wb-space-4);
    font-size: var(--wb-font-size-sm);
    color: var(--wb-color-text-primary);
    box-shadow: var(--wb-shadow-sm);
}

.exit-review-btn[b-7q6j0qt8pa] {
    margin-left: auto;
    padding: var(--wb-space-2) var(--wb-space-5);
    background: var(--wb-color-accent);
    color: white;
    border: none;
    border-radius: var(--wb-radius-button);
    font-size: var(--wb-font-size-xs);
    font-weight: var(--wb-font-weight-semibold);
    cursor: pointer;
    transition: all var(--wb-transition-normal) var(--wb-ease-default);
    touch-action: manipulation;
    min-height: 32px;
}

.exit-review-btn:hover[b-7q6j0qt8pa] {
    background: var(--wb-color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--wb-shadow-sm);
}

/* Question card — weiße Karte mit navy-getöntem Schatten (Landing-Kartensprache) */
.question-card[b-7q6j0qt8pa] {
    background: #ffffff;
    border: 1px solid rgba(11, 30, 17, 0.08);
    box-shadow:
        0 1px 3px rgba(11, 30, 17, 0.04),
        0 4px 12px rgba(11, 30, 17, 0.06),
        0 16px 32px rgba(11, 30, 17, 0.05);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



.card-content[b-7q6j0qt8pa] {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Slide-in animations for question transitions */
.slide-in-right[b-7q6j0qt8pa] {
    animation: slideInRight-b-7q6j0qt8pa 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left[b-7q6j0qt8pa] {
    animation: slideInLeft-b-7q6j0qt8pa 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-out-left[b-7q6j0qt8pa] {
    animation: slideOutLeft-b-7q6j0qt8pa 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}

.slide-out-right[b-7q6j0qt8pa] {
    animation: slideOutRight-b-7q6j0qt8pa 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Slide in from right (next question) */
@keyframes slideInRight-b-7q6j0qt8pa {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Slide in from left (previous question) */
@keyframes slideInLeft-b-7q6j0qt8pa {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Slide out to left (going to next) */
@keyframes slideOutLeft-b-7q6j0qt8pa {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

/* Slide out to right (going to previous) */
@keyframes slideOutRight-b-7q6j0qt8pa {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Question title — navy Editorial-Typo (Landing) */
.question-title[b-7q6j0qt8pa] {
    font-size: var(--wb-font-size-xl);
    font-weight: var(--wb-font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
    line-height: var(--wb-line-height-tight);
    margin-top: var(--wb-space-4);
    margin-bottom: var(--wb-space-3);
}

/* Help text — hellblaue Landing-Fläche mit navy Akzentkante (statt Grün) */
.question-help[b-7q6j0qt8pa] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    margin-bottom: var(--wb-space-6);
    padding: var(--wb-space-3) var(--wb-space-4);
    background: var(--wb-landing-wash-top, #f1f7f2);
    border-left: 3px solid rgba(11, 30, 17, 0.35);
    border-radius: var(--wb-radius-md);
}

/* Hint section - text + example image side by side */
.question-hint-section[b-7q6j0qt8pa] {
    display: flex;
    align-items: flex-start;
    gap: var(--wb-space-4);
    margin-bottom: var(--wb-space-6);
    padding: var(--wb-space-4);
    background: var(--wb-color-surface-hover, #f8fafc);
    border-radius: var(--wb-radius-lg);
    border: 1px solid var(--wb-color-border, #e5e7eb);
}

.question-hint-text[b-7q6j0qt8pa] {
    flex: 1;
    min-width: 0;
}

.question-hint-text__intro[b-7q6j0qt8pa] {
    margin: 0 0 var(--wb-space-2) 0;
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    color: var(--wb-color-text-secondary);
}

.question-hint-text__heading[b-7q6j0qt8pa] {
    margin: 0 0 var(--wb-space-1) 0;
    font-size: var(--wb-font-size-sm);
    font-weight: 600;
    color: var(--wb-color-text-primary);
}

.question-hint-text__list[b-7q6j0qt8pa] {
    margin: 0;
    padding-left: var(--wb-space-5, 20px);
    font-size: var(--wb-font-size-sm);
    line-height: var(--wb-line-height-relaxed);
    color: var(--wb-color-text-secondary);
}

/* Hint/example image - clickable thumbnail */
.question-hint-image[b-7q6j0qt8pa] {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.question-hint-image:hover[b-7q6j0qt8pa] {
    transform: scale(1.03);
    box-shadow: var(--wb-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.question-hint-image img[b-7q6j0qt8pa] {
    width: 120px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--wb-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--wb-shadow-sm);
    display: block;
}

.question-hint-image__zoom-icon[b-7q6j0qt8pa] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border-radius: var(--wb-radius-full, 9999px);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 150ms ease;
}

.question-hint-image:hover .question-hint-image__zoom-icon[b-7q6j0qt8pa] {
    opacity: 1;
}

/* Hint image overlay / lightbox */
.hint-overlay[b-7q6j0qt8pa] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wb-space-4);
    animation: hint-overlay-fadein-b-7q6j0qt8pa 200ms ease;
}

@keyframes hint-overlay-fadein-b-7q6j0qt8pa {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hint-overlay__backdrop[b-7q6j0qt8pa] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.hint-overlay__content[b-7q6j0qt8pa] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-4);
    z-index: 1;
}

.hint-overlay__close[b-7q6j0qt8pa] {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: var(--wb-radius-full, 9999px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.hint-overlay__close:hover[b-7q6j0qt8pa] {
    background: rgba(255, 255, 255, 0.3);
}

.hint-overlay__image[b-7q6j0qt8pa] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--wb-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hint-overlay__caption[b-7q6j0qt8pa] {
    margin: 0;
    font-size: var(--wb-font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    max-width: 500px;
    line-height: var(--wb-line-height-relaxed);
}

.hint-overlay__caption-intro[b-7q6j0qt8pa] {
    margin: 0 0 var(--wb-space-2) 0;
    color: rgba(255, 255, 255, 0.85);
}

.hint-overlay__caption-heading[b-7q6j0qt8pa] {
    margin: 0 0 var(--wb-space-1) 0;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.hint-overlay__caption-list[b-7q6j0qt8pa] {
    margin: 0;
    padding-left: var(--wb-space-5, 20px);
}

/* Mobile: stack text and image vertically */
@media (max-width: 480px) {
    .question-hint-section[b-7q6j0qt8pa] {
        flex-direction: column;
        align-items: center;
    }

    .question-hint-image img[b-7q6j0qt8pa] {
        width: 140px;
        height: 180px;
    }
}

/* Scroll indicator - positioned as overlay at bottom of scrollable area */
.scroll-indicator[b-7q6j0qt8pa] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-3) var(--wb-space-4);
    color: var(--wb-color-text-tertiary);
    font-size: var(--wb-font-size-sm);
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 60%,
            rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

.scroll-indicator-text[b-7q6j0qt8pa] {
    font-weight: var(--wb-font-weight-medium);
}

.scroll-indicator-icon[b-7q6j0qt8pa] {
    opacity: 0.8;
}

@keyframes bounce-b-7q6j0qt8pa {

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

    40% {
        transform: translateY(6px);
    }

    60% {
        transform: translateY(3px);
    }
}

/* Sticky footer for navigation */
.sticky-footer[b-7q6j0qt8pa] {
    flex-shrink: 0;
    background: linear-gradient(to top,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 70%,
            rgba(255, 255, 255, 0.95) 85%,
            rgba(255, 255, 255, 0) 100%);
    padding: var(--wb-space-6);
    padding-top: var(--wb-space-8);
    z-index: var(--wb-z-sticky, 100);
    margin-left: calc(-1 * var(--wb-space-6));
    margin-right: calc(-1 * var(--wb-space-6));
    padding-left: var(--wb-space-6);
    padding-right: var(--wb-space-6);
}

/* Navigation buttons */
.navigation-buttons[b-7q6j0qt8pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-4);
    max-width: 100%;
}

.nav-spacer[b-7q6j0qt8pa] {
    flex: 1;
}

/* Buttons - Pill-shaped Doctrinus style */
.btn[b-7q6j0qt8pa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-3) var(--wb-space-8);
    border-radius: var(--wb-radius-button);
    /* 100px - pill-shaped */
    font-weight: var(--wb-font-weight-semibold);
    font-size: var(--wb-font-size-md);
    border: none;
    cursor: pointer;
    transition: all var(--wb-transition-normal) var(--wb-ease-default);
    min-height: 44px;
    /* Touch-friendly */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:disabled[b-7q6j0qt8pa] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primär-/Sekundär-Buttons: navy Pillen mit weichem navy Schatten (Hero-CTA-Sprache) */
.btn-primary[b-7q6j0qt8pa] {
    background-color: var(--wb-landing-heading, #0B1E11);
    color: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(11, 30, 17, 0.55);
}

.btn-primary:hover:not(:disabled)[b-7q6j0qt8pa] {
    background-color: #07120b;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(11, 30, 17, 0.6);
}

.btn-primary:active:not(:disabled)[b-7q6j0qt8pa] {
    background-color: #07120b;
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 4px rgba(11, 30, 17, 0.2);
}

.btn-secondary[b-7q6j0qt8pa] {
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--wb-landing-heading, #0B1E11);
    border: 1.5px solid rgba(11, 30, 17, 0.22);
    border-radius: 999px;
    padding: var(--wb-space-3) var(--wb-space-8);
    font-weight: var(--wb-font-weight-semibold);
    cursor: pointer;
}

.btn-secondary:hover:not(:disabled)[b-7q6j0qt8pa] {
    background-color: var(--wb-landing-wash-top, #f1f7f2);
    border-color: rgba(11, 30, 17, 0.4);
    transform: translateY(-2px);
    box-shadow: none;
}

.btn-secondary:active:not(:disabled)[b-7q6j0qt8pa] {
    background-color: var(--wb-landing-wash-top, #f1f7f2);
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

/* Focus states for accessibility */
.btn:focus-visible[b-7q6j0qt8pa] {
    outline: 2px solid var(--wb-color-primary);
    outline-offset: 2px;
}

/* Error state */
.error-container[b-7q6j0qt8pa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wb-space-12);
    text-align: center;
}

.error-icon[b-7q6j0qt8pa] {
    color: var(--wb-color-error);
    margin-bottom: var(--wb-space-4);
    width: 64px;
    height: 64px;
}

.error-title[b-7q6j0qt8pa] {
    font-size: var(--wb-font-size-2xl);
    font-weight: var(--wb-font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--wb-landing-heading, #0B1E11);
    margin-bottom: var(--wb-space-2);
}

.error-message[b-7q6j0qt8pa] {
    color: var(--wb-landing-body, rgba(11, 30, 17, 0.66));
    font-size: var(--wb-font-size-md);
    line-height: var(--wb-line-height-relaxed);
    margin-bottom: var(--wb-space-6);
    max-width: 400px;
}

/* Responsive adjustments */
@media (min-width: 600px) {
    .questionnaire-container[b-7q6j0qt8pa] {
        padding: var(--wb-space-6) var(--wb-space-8);
        padding-bottom: 0;
    }

    .card-content[b-7q6j0qt8pa] {
        padding: var(--wb-space-8);
    }

    .question-title[b-7q6j0qt8pa] {
        font-size: var(--wb-font-size-2xl);
    }

    .sticky-header[b-7q6j0qt8pa] {
        margin-left: calc(-1 * var(--wb-space-8));
        margin-right: calc(-1 * var(--wb-space-8));
        padding-left: var(--wb-space-8);
        padding-right: var(--wb-space-8);
    }

    .sticky-footer[b-7q6j0qt8pa] {
        margin-left: calc(-1 * var(--wb-space-8));
        margin-right: calc(-1 * var(--wb-space-8));
        padding-left: var(--wb-space-8);
        padding-right: var(--wb-space-8);
    }
}

@media (min-width: 960px) {
    .questionnaire-container[b-7q6j0qt8pa] {
        padding: var(--wb-space-8);
        padding-bottom: 0;
    }

    .card-content[b-7q6j0qt8pa] {
        padding: var(--wb-space-10);
    }

    .question-title[b-7q6j0qt8pa] {
        font-size: var(--wb-font-size-3xl);
    }

    .sticky-header[b-7q6j0qt8pa] {
        margin-left: calc(-1 * var(--wb-space-8));
        margin-right: calc(-1 * var(--wb-space-8));
        padding-left: var(--wb-space-8);
        padding-right: var(--wb-space-8);
    }

    .sticky-footer[b-7q6j0qt8pa] {
        margin-left: calc(-1 * var(--wb-space-8));
        margin-right: calc(-1 * var(--wb-space-8));
        padding-left: var(--wb-space-8);
        padding-right: var(--wb-space-8);
    }
}

/* Legal footer at the very bottom of the questionnaire */
.legal-footer-section[b-7q6j0qt8pa] {
    flex-shrink: 0;
    padding: var(--wb-space-3) var(--wb-space-6);
    border-top: 1px solid rgba(11, 30, 17, 0.1);
    background: var(--wb-landing-wash-top, #f1f7f2);
    margin-left: calc(-1 * var(--wb-space-6));
    margin-right: calc(-1 * var(--wb-space-6));
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .legal-footer-section[b-7q6j0qt8pa] {
        margin-left: calc(-1 * var(--wb-space-8));
        margin-right: calc(-1 * var(--wb-space-8));
        padding-left: var(--wb-space-8);
        padding-right: var(--wb-space-8);
    }
}

/* Medication-Experience-Step (Hub-Flow: shown after the symptoms question). */
.med-step-options[b-7q6j0qt8pa] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    margin-top: var(--wb-space-4);
}

.med-step-option[b-7q6j0qt8pa] {
    display: flex;
    align-items: center;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4);
    border: 1px solid var(--wb-color-border, #e5e7eb);
    border-radius: var(--wb-radius-lg);
    cursor: pointer;
    background: var(--wb-color-surface, #ffffff);
    transition: border-color 120ms ease, background-color 120ms ease;
    font-size: var(--wb-font-size-md);
    color: var(--wb-color-text-primary);
}

.med-step-option:hover[b-7q6j0qt8pa] {
    border-color: rgba(11, 30, 17, 0.4);
    background: var(--wb-landing-wash-top, #f1f7f2);
}

.med-step-option--selected[b-7q6j0qt8pa] {
    border-color: var(--wb-landing-heading, #0B1E11);
    background: var(--wb-landing-wash-top, #f1f7f2);
}

.med-step-option input[type="radio"][b-7q6j0qt8pa] {
    accent-color: var(--wb-landing-heading, #0B1E11);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.med-step-dropdown[b-7q6j0qt8pa] {
    /* Tight against the "Ich präferiere…"-Option above: cancel the parent's flex
       gap with a negative margin, indent so the dropdown reads as belonging to
       that option rather than as a third sibling between the two radios. */
    margin-top: calc(-1 * var(--wb-space-2));
    margin-left: var(--wb-space-7);
    width: calc(100% - var(--wb-space-7));
    padding: var(--wb-space-3) var(--wb-space-4);
    font-size: var(--wb-font-size-md);
    font-family: inherit;
    color: var(--wb-color-text-primary);
    background: var(--wb-color-surface, #ffffff);
    border: 1px solid var(--wb-color-border, #e5e7eb);
    border-radius: var(--wb-radius-lg);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--wb-space-4) center;
    padding-right: var(--wb-space-8);
}

.med-step-dropdown:focus[b-7q6j0qt8pa] {
    outline: none;
    border-color: var(--wb-landing-heading, #0B1E11);
    box-shadow: 0 0 0 3px rgba(11, 30, 17, 0.15);
}

.error-message[b-7q6j0qt8pa] {
    color: var(--wb-color-danger, #b91c1c);
    margin-top: var(--wb-space-3);
    font-size: var(--wb-font-size-sm);
}

/* Visually hidden but exposed to assistive technology — used to label the
   medication dropdown without echoing the radio's text on screen (the radio
   already conveys it visually). */
.visually-hidden[b-7q6j0qt8pa] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/VideoCallPage.razor.rz.scp.css */
.video-call-page[b-6hain753zu] {
    /* Pin the call to the viewport. position:fixed escapes any ancestor offset
       (MudMainContent padding, the dev environment banner) that would otherwise
       push the bottom of the page below the fold and make the whole document
       scroll. */
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /* 100dvh = the *dynamic* (visible) viewport height. Plain 100vh measures the
       larger layout viewport that sits BEHIND the mobile browser's URL/toolbar
       chrome, so the ACS pre-call screen laid its "Anruf beginnen" button out
       below the visible fold — the patient saw the camera preview, assumed the
       call had started, and had to scroll to find the hidden start button
       (ADO #27). dvh shrinks with the chrome so the start button stays on screen.
       The 100vh line is the fallback for engines without dvh support. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: #000;
    color: #fff;
    overflow: hidden;
    /* Sit above the global CartDrawer (z-index 1200, also rendered in BlankLayout
       so it shares this stacking context) — equal z-indexes would let DOM order
       decide and the drawer could paint over the call. Still below MudBlazor
       dialogs (1400) so the consent MudDialog stays on top. */
    z-index: 1300;
}

.video-call-header[b-6hain753zu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex: 0 0 auto;
}

.video-call-header .status-text[b-6hain753zu] {
    color: rgba(255, 255, 255, 0.7);
}

.video-call-loading[b-6hain753zu],
.video-call-error[b-6hain753zu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px;
    color: #fff;
}

/* Anchors the loading overlay and gives #acs-container a real, sized box so the
   CallComposite's WebRTC renderer never mounts into a zero-size/hidden element. */
.video-call-content[b-6hain753zu] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.acs-container[b-6hain753zu] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Loading spinner shown ON TOP of the (already laid-out) ACS container during
   initialization, instead of hiding the container with display:none. */
.video-call-loading--overlay[b-6hain753zu] {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 2;
}

/* Remote (doctor) video must show the WHOLE frame, not a cropped slice.
   The ACS Calling SDK renders every video stream with its default 'Crop'
   scaling mode — inline object-fit: cover on the <video> element. On a phone in
   PORTRAIT the doctor's landscape camera feed gets scaled to fill the tall tile,
   so the left/right of the frame (often half the doctor's face) is sliced off;
   in LANDSCAPE the tile is wide enough that little is lost, which is why the
   patient reported "Querformat geht" (ADO #26). Forcing object-fit: contain
   letterboxes the feed instead so the doctor is always fully visible.

   !important is required: the SDK sets object-fit inline (un-flagged), and a
   flagged stylesheet rule is the only thing that outranks an inline declaration.
   ::deep reaches past Blazor's CSS-scope attribute into the React-rendered
   CallComposite DOM, which carries no scope marker. */
.acs-container[b-6hain753zu]  video {
    object-fit: contain !important;
    /* Paint the letterbox gaps (left by object-fit: contain on a landscape feed in a
       portrait tile) solid black instead of the tile's theme background, so the doctor
       reads as a normal letterboxed video rather than a small image on a coloured card.
       Pairs with the dark fluentTheme passed to the CallComposite in acs-call.js. */
    background-color: #000 !important;
}

/* ...but keep the patient's own small self-view (the floating PiP, and the
   grid local tile on desktop) filled with 'cover' — a letterboxed thumbnail of
   yourself looks broken, and the local portrait camera matches that tile anyway.
   More specific than the rule above, so it wins for the local tiles only. */
.acs-container[b-6hain753zu]  [data-ui-id="floating-local-video-host"] video,
.acs-container[b-6hain753zu]  [data-ui-id="local-video-tile"] video {
    object-fit: cover !important;
}

.permission-alert[b-6hain753zu] {
    max-width: 560px;
}

.permission-steps[b-6hain753zu] {
    margin: 12px 0 4px;
    padding-left: 20px;
    text-align: left;
    line-height: 1.6;
}

.permission-note[b-6hain753zu] {
    display: block;
    opacity: 0.95;
}
/* /Components/Pages/Willkommen.razor.rz.scp.css */
/* Willkommen — registration consent gate (issue #586) */
/* Uses design tokens from app.css (--wb-*) and global .legal-prose */

.willkommen-page[b-hs42j000ex] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: var(--wb-color-surface);
    padding: var(--wb-space-8) var(--wb-space-4);
}

.willkommen-container[b-hs42j000ex] {
    width: 100%;
    max-width: 720px;
}

.willkommen-content[b-hs42j000ex] {
    background-color: var(--wb-color-background);
    border-radius: var(--wb-radius-lg, 16px);
    padding: var(--wb-space-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.willkommen-title[b-hs42j000ex] {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-3) 0;
}

.willkommen-lead[b-hs42j000ex] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--wb-color-text-secondary);
    margin: 0 0 var(--wb-space-6) 0;
}

.willkommen-docs[b-hs42j000ex] {
    margin-bottom: var(--wb-space-6);
}

.willkommen-panels[b-hs42j000ex] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wb-color-divider, rgba(0, 0, 0, 0.1));
}

.willkommen-panel[b-hs42j000ex]  .mud-expand-panel-text {
    /* Constrain the long legal text inside the panel so the dialog stays a
       reasonable size; user can still scroll. */
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--wb-space-4) var(--wb-space-5);
}

.willkommen-panel__title[b-hs42j000ex] {
    display: flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--wb-color-text-primary);
}

.willkommen-checkboxes[b-hs42j000ex] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
    margin-bottom: var(--wb-space-4);
}

.willkommen-error[b-hs42j000ex] {
    margin-top: var(--wb-space-4);
}

.willkommen-actions[b-hs42j000ex] {
    margin-top: var(--wb-space-6);
}

@media (max-width: 600px) {
    .willkommen-content[b-hs42j000ex] {
        padding: var(--wb-space-6) var(--wb-space-4);
    }
    .willkommen-title[b-hs42j000ex] {
        font-size: 24px;
    }
    .willkommen-panel[b-hs42j000ex]  .mud-expand-panel-text {
        max-height: 40vh;
    }
}
/* /Components/Questionnaire/MedicationSelector.razor.rz.scp.css */
/* MedicationSelector - Medication selection component styles */
/* Uses design tokens from app.css (--wb-*) */

.medication-selector-container[b-tlofjw4agk] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--wb-space-12) var(--wb-space-4);
    background-color: var(--wb-color-background);
}

.medication-card[b-tlofjw4agk] {
    width: 100%;
    max-width: 600px;
    background-color: var(--wb-color-surface);
}

.medication-item[b-tlofjw4agk] {
    background-color: var(--wb-color-background);
    border: 2px solid transparent;
    border-radius: var(--wb-radius-lg);
    cursor: pointer;
    transition: all var(--wb-transition-normal) var(--wb-ease-default);
}

.medication-item:hover[b-tlofjw4agk] {
    background-color: var(--wb-color-surface);
    border-color: var(--wb-color-primary);
    transform: translateY(-2px);
}
/* /Components/Questionnaire/ReviewModePrompt.razor.rz.scp.css */
/* ReviewModePrompt - Doctrinus Aesthetic */

.review-prompt-overlay[b-4o7rf8gijq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Simple overlay, no gradient */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wb-space-4);
    z-index: 1000;
}

.review-prompt-container[b-4o7rf8gijq] {
    background: var(--wb-color-background);
    border-radius: var(--wb-radius-3xl);
    /* 1.5rem */
    padding: var(--wb-space-10);
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: var(--wb-shadow-2xl);
    animation: slideUp-b-4o7rf8gijq 0.3s ease-out;
}

@keyframes slideUp-b-4o7rf8gijq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.review-prompt-icon[b-4o7rf8gijq] {
    width: 80px;
    height: 80px;
    background: var(--wb-color-accent);
    /* Dark green, no gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--wb-space-6);
    color: white;
}

.review-prompt-title[b-4o7rf8gijq] {
    font-size: var(--wb-font-size-3xl);
    font-weight: var(--wb-font-weight-bold);
    color: var(--wb-color-text-primary);
    margin: 0 0 var(--wb-space-4);
    line-height: var(--wb-line-height-tight);
}

.review-prompt-message[b-4o7rf8gijq] {
    font-size: var(--wb-font-size-md);
    color: var(--wb-color-text-secondary);
    line-height: var(--wb-line-height-relaxed);
    margin: 0 0 var(--wb-space-8);
}

.review-prompt-message strong[b-4o7rf8gijq] {
    color: var(--wb-color-text-primary);
    font-weight: var(--wb-font-weight-semibold);
}

.review-prompt-actions[b-4o7rf8gijq] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    margin-bottom: var(--wb-space-6);
}

.review-prompt-actions .btn[b-4o7rf8gijq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-4) var(--wb-space-6);
    font-size: var(--wb-font-size-md);
    font-weight: var(--wb-font-weight-semibold);
    border-radius: var(--wb-radius-button);
    /* 100px - pill-shaped */
    cursor: pointer;
    transition: all var(--wb-transition-normal) var(--wb-ease-default);
    border: none;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.review-prompt-actions .btn-primary[b-4o7rf8gijq] {
    background: var(--wb-doctrinus-primary, #000000);
    color: var(--wb-text-inverse, #FFFFFF);
    box-shadow: none;
}

.review-prompt-actions .btn-primary:hover[b-4o7rf8gijq] {
    background: var(--wb-doctrinus-primary-light, #333333);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
}

.review-prompt-actions .btn-primary:active[b-4o7rf8gijq] {
    background: var(--wb-doctrinus-secondary-dark, #1a1a1a);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ghost button style (outline) for back/secondary actions */
.review-prompt-actions .btn-ghost[b-4o7rf8gijq] {
    background: transparent;
    color: var(--wb-color-text-primary);
    border: 2px solid var(--wb-color-border);
}

.review-prompt-actions .btn-ghost:hover[b-4o7rf8gijq] {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--wb-color-primary);
    transform: translateY(-1px);
    box-shadow: var(--wb-shadow-sm);
}

.review-prompt-actions .btn-ghost:active[b-4o7rf8gijq] {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(0);
    box-shadow: none;
}

/* Focus states for accessibility */
.review-prompt-actions .btn:focus-visible[b-4o7rf8gijq] {
    outline: 2px solid var(--wb-color-primary);
    outline-offset: 2px;
}

.review-prompt-hint[b-4o7rf8gijq] {
    font-size: var(--wb-font-size-sm);
    color: var(--wb-color-text-faint);
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .review-prompt-container[b-4o7rf8gijq] {
        padding: var(--wb-space-6);
    }

    .review-prompt-icon[b-4o7rf8gijq] {
        width: 64px;
        height: 64px;
    }

    .review-prompt-icon svg[b-4o7rf8gijq] {
        width: 36px;
        height: 36px;
    }

    .review-prompt-title[b-4o7rf8gijq] {
        font-size: var(--wb-font-size-2xl);
    }

    .review-prompt-message[b-4o7rf8gijq] {
        font-size: var(--wb-font-size-sm);
    }
}
/* /Components/Shared/AppErrorBoundary.razor.rz.scp.css */
/* AppErrorBoundary - Global error display styles */
/* Uses design tokens from app.css (--wb-*) */

.error-boundary-container[b-dqr0on4yn3] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--wb-space-5);
    background-color: var(--wb-color-background);
}

.error-card[b-dqr0on4yn3] {
    background: var(--wb-color-surface);
    border-radius: var(--wb-radius-2xl);
    padding: var(--wb-space-10);
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: var(--wb-shadow-md);
}

.error-icon[b-dqr0on4yn3] {
    color: var(--wb-color-error);
    margin-bottom: var(--wb-space-5);
}

.error-card h2[b-dqr0on4yn3] {
    color: var(--wb-color-text-primary);
    margin-bottom: var(--wb-space-4);
    font-size: var(--wb-font-size-2xl);
}

.error-message[b-dqr0on4yn3] {
    color: var(--wb-color-text-secondary);
    margin-bottom: var(--wb-space-6);
}

.error-details[b-dqr0on4yn3] {
    background: var(--wb-color-background);
    border-radius: var(--wb-radius-lg);
    padding: var(--wb-space-4);
    margin-bottom: var(--wb-space-6);
    text-align: left;
    overflow-x: auto;
}

.error-details code[b-dqr0on4yn3] {
    color: var(--wb-color-error);
    font-size: var(--wb-font-size-sm);
    word-break: break-word;
}

.error-actions[b-dqr0on4yn3] {
    display: flex;
    gap: var(--wb-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn[b-dqr0on4yn3] {
    min-width: 140px;
}
/* /Components/Shared/CategoryNotFound.razor.rz.scp.css */
/* CategoryNotFound - Error page when category doesn't exist */
/* Uses design tokens from app.css (--wb-*) */

.category-not-found[b-bv3hxlkwyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--wb-color-background);
    padding: var(--wb-space-6);
}

.error-card[b-bv3hxlkwyr] {
    max-width: 28rem;
    width: 100%;
    background-color: var(--wb-color-surface);
    box-shadow: var(--wb-shadow-lg);
    border-radius: var(--wb-radius-lg);
    padding: var(--wb-space-8);
    text-align: center;
}

.logo-wrapper[b-bv3hxlkwyr] {
    margin-bottom: var(--wb-space-6);
}

.error-icon[b-bv3hxlkwyr] {
    margin-bottom: var(--wb-space-6);
    margin-left: auto;
    margin-right: auto;
    height: 6rem;
    width: 6rem;
    color: var(--wb-color-error);
}

.error-title[b-bv3hxlkwyr] {
    font-size: var(--wb-font-size-2xl);
    line-height: var(--wb-line-height-normal);
    font-weight: var(--wb-font-weight-bold);
    color: var(--wb-color-text-primary);
    margin-bottom: var(--wb-space-4);
}

.error-message[b-bv3hxlkwyr] {
    color: var(--wb-color-text-secondary);
    margin-bottom: var(--wb-space-6);
}

.btn-primary[b-bv3hxlkwyr] {
    width: 100%;
    background-color: var(--wb-color-primary);
    color: var(--wb-color-primary-contrast);
    border: none;
    padding: var(--wb-space-3) var(--wb-space-6);
    font-size: var(--wb-font-size-md);
    border-radius: var(--wb-radius-md);
    cursor: pointer;
    transition: background-color var(--wb-transition-normal) var(--wb-ease-default);
}

.btn-primary:hover[b-bv3hxlkwyr] {
    background-color: var(--wb-color-primary-dark);
}

.brand-logo[b-bv3hxlkwyr] {
    font-size: var(--wb-font-size-3xl);
    font-weight: var(--wb-font-weight-bold);
    color: var(--wb-color-brand); /* Doctrinus brand navy - never changes with theme */
}