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

/* /Components/Dev/PaletteTesterButton.razor.rz.scp.css */
/* Schwebender Dev-Starter am rechten Rand — sitzt vertikal mittig, damit er weder das obere
   Banner noch die unten eingeblendete Slider-Leiste überdeckt. */
.wb-palette-launch[b-sk2dk3dned] {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    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/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, 'Satoshi', 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(0, 35, 102, 0.18);
    border-radius: 100px;
    color: var(--wb-landing-heading, #002366);
    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, #f2f6fc);
    border-color: rgba(0, 35, 102, 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, #002366);
}

.appointments-page__subtitle[b-ssdaje5685] {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 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(0, 35, 102, 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: #e7f0fb;
    color: var(--wb-landing-heading, #002366);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 700px) {
    .appointments-page__header[b-ssdaje5685] {
        padding-top: 16px;
    }
}
/* /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: #0f1d3a;
    --bmi-muted: #5e7290;
    --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: 'Inter', -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 #dce8ff;
    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: 'Satoshi', 'Inter', -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/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, #f2f6fc) 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, #002366);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

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

.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(0, 35, 102, 0.66));
}

.loading-spinner[b-gozg1d1vzc] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 35, 102, 0.12);
    border-top-color: var(--wb-landing-heading, #002366);
    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/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, #f2f6fc) 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(0, 35, 102, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 70px -42px rgba(0, 35, 102, 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, #002366);
    margin: 0 0 8px;
}

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

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

.order-summary[b-khj0o3dava] {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--wb-landing-wash-top, #f2f6fc);
    border: 1px solid rgba(0, 35, 102, 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(0, 35, 102, 0.1);
    font-weight: 700;
    color: var(--wb-landing-heading, #002366);
}

/* 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(0, 35, 102, 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, #002366);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(0, 35, 102, 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: #001a4d;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(0, 35, 102, 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(0, 35, 102, 0.55);
    border: none;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 8px;
}

.secondary-button:hover[b-khj0o3dava] {
    color: var(--wb-landing-heading, #002366);
}
/* /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, #f2f6fc) 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(0, 35, 102, 0.12);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0, 35, 102, 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(0, 35, 102, 0.12);
    border-top: 3px solid var(--wb-landing-heading, #002366);
    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(0, 35, 102, 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, #002366);
    margin-bottom: 0.5rem;
}

.error-state p[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #002366);
    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(0, 35, 102, 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, #002366);
    margin: 0 0 0.25rem;
}

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

.requirement-card[b-1isdqob92p] {
    border: 2px solid rgba(0, 35, 102, 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(0, 35, 102, 0.12);
    border-style: dashed;
}

.requirement-card.blood-test-required[b-1isdqob92p] {
    border-color: rgba(0, 35, 102, 0.12);
}

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

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

.requirement-info p[b-1isdqob92p] {
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 0.66));
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 35, 102, 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, #002366);
    font-size: 0.9rem;
}

.add-button[b-1isdqob92p] {
    background: var(--wb-landing-heading, #002366);
    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: #001a4d;
}

.remove-button[b-1isdqob92p] {
    background: transparent;
    color: var(--wb-landing-body, rgba(0, 35, 102, 0.66));
    border: 1px solid rgba(0, 35, 102, 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, #002366);
    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(0, 35, 102, 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: #001a4d;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(0, 35, 102, 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(0, 35, 102, 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, #002366);
}

/* ---------------------------------------------------------------------------
 * 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(0, 35, 102, 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;
}

.shipping-address-summary[b-1isdqob92p] {
    color: var(--wb-landing-heading, #002366);
    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: #002366;
    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: #001a4d;
}

/* ----- 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(0, 35, 102, 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(0, 35, 102, 0.55);
    font-weight: 400;
}

.shipping-form__input[b-1isdqob92p] {
    font: inherit;
    font-size: 0.95rem;
    color: #001a4d;
    background: #ffffff;
    border: 1px solid rgba(0, 35, 102, 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;
}

.shipping-form__input[b-1isdqob92p]::placeholder {
    color: rgba(0, 35, 102, 0.55);
}

.shipping-form__input:hover:not(:focus)[b-1isdqob92p] {
    border-color: rgba(0, 35, 102, 0.25);
}

.shipping-form__input:focus[b-1isdqob92p] {
    outline: none;
    border-color: #002366;
    box-shadow: 0 0 0 3px rgba(0, 35, 102, 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(0, 35, 102, 0.66));
    border: 1px solid rgba(0, 35, 102, 0.12);
}

.shipping-address-actions__cancel:hover[b-1isdqob92p] {
    background: var(--wb-landing-wash-top, #f2f6fc);
    border-color: rgba(0, 35, 102, 0.25);
    color: var(--wb-landing-heading, #002366);
}

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

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

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

/* 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(0, 35, 102, 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(0, 35, 102, 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(0, 35, 102, 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(0, 35, 102, 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, #f2f6fc);
}

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

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

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

.therapy-legal__content p[b-1isdqob92p] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #f2f6fc) 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(0, 35, 102, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 70px -42px rgba(0, 35, 102, 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, #002366);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.info-description[b-e1t5i656vh] {
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #002366);
    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, #002366);
    margin: 0 0 0.25rem 0;
}

.step-content p[b-e1t5i656vh] {
    font-size: 0.875rem;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #f2f6fc);
    border: 1px solid rgba(0, 35, 102, 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(0, 35, 102, 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, #002366);
}

.trust-details-toggle[b-e1t5i656vh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--wb-landing-heading, #002366);
    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(0, 35, 102, 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(0, 35, 102, 0.1);
    padding-top: 1rem;
}

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

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

/* ---- Warenkorb-Zusammenfassung ---- */
.info-cart-summary[b-e1t5i656vh] {
    background: var(--wb-landing-wash-top, #f2f6fc);
    border: 1px solid rgba(0, 35, 102, 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(0, 35, 102, 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(0, 35, 102, 0.1);
}

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

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

.item-price[b-e1t5i656vh] {
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #002366);
}

/* ---- Primär-CTA: navy Pille (Hero-CTA-Sprache) ---- */
.continue-button[b-e1t5i656vh] {
    width: 100%;
    background: var(--wb-landing-heading, #002366);
    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(0, 35, 102, 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: #001a4d;
    box-shadow: 0 20px 38px -14px rgba(0, 35, 102, 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(0, 35, 102, 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, #002366);
}

@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(0, 35, 102, 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: 'Satoshi', 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: 'Satoshi', 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: 'Satoshi', 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: 'Satoshi', 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: 'Satoshi', 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-8) 0;
}

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

.kontakt-address p[b-2tcdhvtt2n] {
    font-family: 'Satoshi', 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: 'Satoshi', 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
   und FAQ 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(0, 35, 102, 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, #002366);
}

.labortest-detail__not-found p[b-ymvvaiu5or] {
    margin: 0;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 0.7);
}

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

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

.breadcrumb-current[b-ymvvaiu5or] {
    color: var(--wb-landing-heading, #002366);
    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, #f2f6fc);
    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(0, 35, 102, 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, #002366);
}

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

.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(0, 35, 102, 0.66));
}

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

/* 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(0, 35, 102, 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(0, 35, 102, 0.08);
    border-radius: 20px;
    box-shadow: 0 18px 40px -28px rgba(0, 35, 102, 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: #e7f0fb;
    color: var(--wb-landing-icon, #002366);
}

.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, #002366);
}

.feature-description[b-ymvvaiu5or] {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 34px -28px rgba(0, 35, 102, 0.35);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.accordion-item--expanded[b-ymvvaiu5or] {
    box-shadow: 0 20px 44px -26px rgba(0, 35, 102, 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, #002366);
    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 (LandingFaqSection-Muster). */
.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, #002366);
    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(0, 35, 102, 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, #002366);
}

@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, #002366);
}

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

/* ============================================
   FAQ — mittige Karten-Spalte
   ============================================ */
.labortest-detail__faqs[b-ymvvaiu5or] {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 0 24px;
    width: 100%;
}

.faqs-head[b-ymvvaiu5or] {
    text-align: center;
    margin-bottom: 32px;
}

.faqs-list[b-ymvvaiu5or] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================
   "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, #f2f6fc);
    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(0, 35, 102, 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(0, 35, 102, 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, #002366);
}

.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(0, 35, 102, 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;
    }

    .labortest-detail__faqs[b-ymvvaiu5or] {
        padding: 36px 0 16px;
    }
}

@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(0, 35, 102, 0.1);
    font-size: 15px;
    color: rgba(0, 35, 102, 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, #002366);
    border-bottom: 2px solid var(--wb-landing-icon, #002366);
    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(0, 35, 102, 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(0, 35, 102, 0.18);
    background: #FFFFFF;
    color: var(--wb-landing-heading, #002366);
    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;
}

.filter-select:hover[b-8knz7e9rpt],
.sort-select:hover[b-8knz7e9rpt] {
    border-color: rgba(0, 35, 102, 0.4);
    background-color: var(--wb-landing-wash-top, #f2f6fc);
}

.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(0, 35, 102, 0.4);
}

.product-count[b-8knz7e9rpt] {
    font-size: 14px;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 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(0, 35, 102, 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, #002366);
}

.view-toggle__btn--active[b-8knz7e9rpt] {
    background: var(--wb-landing-heading, #002366);
    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(0, 35, 102, 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;
}

.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 gemeinsamem Hellblau-Sockel
   ============================================ */
.landing-page__lower[b-gbqqm079qx] {
    position: relative;
    /* Hinter dem Seiteninhalt: erlaubt dem Verlauf, hinter der transparenten
       DoctrinusServicesSection nach oben zu ziehen, ohne die Team-Karten zu überlagern. */
    z-index: -1;
    isolation: isolate;
}

/* Full-bleed Verlauf: transparent oben → hellblau unten. Reicht per negativem
   top etwas über das Newsletter hinaus nach oben und blendet vor den Team-Fotos aus. */
.landing-page__lower-wash[b-gbqqm079qx] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * clamp(56px, 9vw, 150px));
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--landing-foot-blue) 42%);
}

/* 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;
    padding: 28px 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;
}

/* Full-width "wall" band behind the therapy block so the near-white tiles lift off
   the page and the section reads as its own zone. Bled to the viewport edges via the
   calc(50% - 50vw) trick (same as .hero::before); overflow-x is already guarded by the
   page so the 100vw width won't add a horizontal scrollbar.
   The fill is a soft cool blue-grey gradient (lighter at the top, a touch deeper at the
   bottom — the requested Abstufung). The top tint (#f2f6fc) is shared with the hero wash
   (.hero::before in LandingHero.razor.css) so both zones match — keep them in sync.
   A vertical mask feathers the band in at the top
   and out at the bottom so there are no hard seams against the white hero above or the
   white "Wer steckt hinter Doctrinus" block below. */
.therapy-section[b-gbqqm079qx]::before {
    content: "";
    position: absolute;
    /* The band is extended ~1.5cm beyond the content top and bottom so the feather has
       dedicated empty space to fade across — the fade lives in the margin, not over the
       tiles. Top/bottom extensions match the fixed feather lengths below. */
    inset: -1.5cm 0 -1.5cm;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(180deg, #f2f6fc 0%, #e7edf7 100%);
    /* Fixed-length feather (~1.5cm) instead of a percentage so the fade-in/out is a
       slow, consistent ramp regardless of section height. The bottom feather is a touch
       wider (1.6cm vs 1.4cm) to compensate for the slightly deeper tone at the bottom of
       the background gradient, so both edges read as an equally soft fade. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.4cm, #000 calc(100% - 1.6cm), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 1.4cm, #000 calc(100% - 1.6cm), transparent 100%);
    z-index: -1;
}

/* ---- 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 ("Unsere Therapien" / "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, #002366);
}

/* ---- Filter pills ---- */
.therapy-filter[b-gbqqm079qx] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 1px solid rgba(0, 35, 102, 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, #002366);
    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(0, 35, 102, 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(0, 35, 102, 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 ---- */
.therapy-grid[b-gbqqm079qx] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(104px, auto);
    gap: 16px;
}

.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. FAQ darunter als
   mittige Karten-Spalte auf blaugrauem Wall-Band (.wb-wall, global).
   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, #002366);
}

.product-detail__not-found p[b-wsxrt86886] {
    margin: 0;
    color: var(--wb-landing-body, rgba(0, 35, 102, 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, #002366);
}

.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(0, 35, 102, 0.66));
}

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

/* 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(0, 35, 102, 0.66));
}

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

/* ---- 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(0, 35, 102, 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, #002366);
}

/* 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(0, 35, 102, 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(0, 35, 102, 0.08);
    color: rgba(0, 35, 102, 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(0, 35, 102, 0.1);
    font-size: 15px;
    color: rgba(0, 35, 102, 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, #002366);
    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, #002366);
}

.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, #002366);
}

/* ---- Akkordeon-Grundform (Features: Hairline-Zeilen in der Karte) ---- */
.accordion-item[b-wsxrt86886] {
    border-top: 1px solid rgba(0, 35, 102, 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, #002366);
    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 (gleiches Muster wie LandingFaqSection). */
.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, #002366);
    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(0, 35, 102, 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, #002366);
}

.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);
    }
}

/* ============================================
   FAQ — mittige Karten-Spalte auf Wall-Band
   ============================================ */
.product-detail__faqs[b-wsxrt86886] {
    padding: 48px 0 72px;
    max-width: 760px;
    margin: 0 auto;
}

.faqs-head[b-wsxrt86886] {
    text-align: center;
    margin-bottom: 32px;
}

.faqs-list[b-wsxrt86886] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* FAQ-Items als eigenständige weiße Karten (vs. Hairline-Zeilen in der Feature-Karte). */
.faqs-list .accordion-item[b-wsxrt86886] {
    background: #ffffff;
    border: 1px solid rgba(0, 35, 102, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 34px -28px rgba(0, 35, 102, 0.35);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.faqs-list .accordion-item--expanded[b-wsxrt86886] {
    box-shadow: 0 20px 44px -26px rgba(0, 35, 102, 0.4);
}

.faqs-list .accordion-header[b-wsxrt86886] {
    padding: 18px 22px;
    font-size: 16px;
}

.faqs-list .accordion-content[b-wsxrt86886] {
    padding: 0 22px 18px;
}

/* ============================================
   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;
    }

    .product-detail__faqs[b-wsxrt86886] {
        padding: 36px 0 56px;
    }
}

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

    .product-features[b-wsxrt86886] {
        padding: 20px 20px 10px;
    }

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

    .faqs-list .accordion-content[b-wsxrt86886] {
        padding: 0 18px 16px;
        font-size: 14px;
    }
}
/* /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;
}

.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__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;
}

.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/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/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(0, 35, 102, 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(0, 35, 102, 0.66));
    background: #e7f0fb;
}

.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, #002366);
    margin: 0 0 0.15rem;
}

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

.booking-status__line[b-qjozi9wqot] {
    color: var(--wb-landing-heading, #002366) !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(0, 35, 102, 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, #002366);
    background: var(--wb-landing-wash-top, #f2f6fc);
    box-shadow: 0 2px 12px rgba(0, 35, 102, 0.10);
}

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

.booking-status__cta[b-qjozi9wqot] {
    flex: 0 0 auto;
    background: var(--wb-landing-heading, #002366);
    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: #001a4d;
}

.booking-status__edit[b-qjozi9wqot] {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(0, 35, 102, 0.25);
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 0.4);
    color: var(--wb-landing-heading, #002366);
}

@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, #002366);
}

/* 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(0, 35, 102, 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, #002366);
    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(0, 35, 102, 0.66));
    font-size: 0.85rem;
}

.item-price[b-j58n354fdb] {
    flex-shrink: 0;
    color: var(--wb-landing-heading, #002366);
    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(0, 35, 102, 0.25);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wb-landing-heading, #002366);
}

.total-price[b-j58n354fdb] {
    color: var(--wb-landing-heading, #002366);
    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(0, 35, 102, 0.6));
}
/* /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: #0f1d3a;
    --testo-muted: #5e7290;
    --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: 'Inter', -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 #dce8ff;
    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 #e0e7ff;
}

.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: #0b3b8a;
    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: 'Satoshi', 'Inter', -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, #3366CC) 100%);
    border-radius: 2px;
}

.therapie-hub__subtitle[b-rijpqs6u83] {
    margin: 0;
    font-size: var(--wb-font-size-base);
    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-base);
    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);
}

/* FAQ section wrapper - break out of 800px parent to match other full-width sections */
.category-detail__faq-breakout[b-gsthapnfwh] {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    max-width: 1440px;
}

/* 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: #1a365d;
    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: #0053b4;
    margin: 0;
    line-height: 1.2;
    font-family: 'Satoshi', 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: 'Satoshi', 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 */
.team-grid[b-yu6pvaw6ax] {
    display: grid;
    grid-template-columns: repeat(4, 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%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.team-info[b-yu6pvaw6ax] {
    padding: var(--wb-space-3);
    text-align: center;
}

.team-name[b-yu6pvaw6ax] {
    display: block;
    font-size: var(--wb-font-size-sm);
    font-weight: var(--wb-font-weight-semibold);
    color: var(--wb-color-text-primary);
}

.team-role[b-yu6pvaw6ax] {
    display: block;
    font-size: var(--wb-font-size-xs);
    color: var(--wb-color-text-secondary);
    margin-top: var(--wb-space-1);
}

/* 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);
    }

    .team-grid[b-yu6pvaw6ax] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .team-grid[b-yu6pvaw6ax] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wb-space-3);
    }

    .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 */
}

/* 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, #002366);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(0, 35, 102, 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(0, 35, 102, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 35, 102, 0.04),
        0 4px 12px rgba(0, 35, 102, 0.06),
        0 16px 32px rgba(0, 35, 102, 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, #002366);
    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(0, 35, 102, 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, #f2f6fc);
    border-left: 3px solid rgba(0, 35, 102, 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, #002366);
    color: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(0, 35, 102, 0.55);
}

.btn-primary:hover:not(:disabled)[b-7q6j0qt8pa] {
    background-color: #001a4d;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(0, 35, 102, 0.6);
}

.btn-primary:active:not(:disabled)[b-7q6j0qt8pa] {
    background-color: #001a4d;
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 35, 102, 0.2);
}

.btn-secondary[b-7q6j0qt8pa] {
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--wb-landing-heading, #002366);
    border: 1.5px solid rgba(0, 35, 102, 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, #f2f6fc);
    border-color: rgba(0, 35, 102, 0.4);
    transform: translateY(-2px);
    box-shadow: none;
}

.btn-secondary:active:not(:disabled)[b-7q6j0qt8pa] {
    background-color: var(--wb-landing-wash-top, #f2f6fc);
    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, #002366);
    margin-bottom: var(--wb-space-2);
}

.error-message[b-7q6j0qt8pa] {
    color: var(--wb-landing-body, rgba(0, 35, 102, 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(0, 35, 102, 0.1);
    background: var(--wb-landing-wash-top, #f2f6fc);
    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(0, 35, 102, 0.4);
    background: var(--wb-landing-wash-top, #f2f6fc);
}

.med-step-option--selected[b-7q6j0qt8pa] {
    border-color: var(--wb-landing-heading, #002366);
    background: var(--wb-landing-wash-top, #f2f6fc);
}

.med-step-option input[type="radio"][b-7q6j0qt8pa] {
    accent-color: var(--wb-landing-heading, #002366);
    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, #002366);
    box-shadow: 0 0 0 3px rgba(0, 35, 102, 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] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.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;
}

.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: 'Satoshi', 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: 'Satoshi', 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 */
}