/* ============================================================
   29-beratung.css
   Open Flowing Layout – Luxurious · Airy · Breathable
   ============================================================ */

.beratung-page {
    background-color: var(--ivory);
    color: var(--dark-grey);
    --beratung-side-pad: clamp(1.2rem, 5vw, 2rem);
    /* contain: paint entfernt – bricht position: sticky auf .step-indicator
       und position: fixed auf .liquid-sticky-bar (beide werden innerhalb
       des neuen Containing-Blocks gefangen und funktionieren nicht mehr).
       Performance-Containment stattdessen auf einzelne Zonen angewandt. */
}

/* Banner */
.beratung-banner {
    background-color: var(--gold);
    color: var(--white);
    text-align: center;
    padding: clamp(0.8rem, 2vw, 1.2rem) var(--container-padding);
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    font-family: var(--font-accent);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    position: relative;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(196, 161, 105, 0.15);
}

.sticky-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1005;
    width: 100%;
}


.beratung-page .header {
    background-color: var(--ivory);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.beratung-page main:not(.hero):not(.ophyr-hero) {
    padding-top: 0;
}

/* ─── Page Header ─── */
.beratung-header {
    text-align: center;
    padding: clamp(3rem, 6vw, 4rem) var(--beratung-side-pad) clamp(1rem, 2vw, 1.5rem);
}

.beratung-header .legal-title {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    color: var(--text-color);
    font-size: calc(var(--fs-display) * 1.125);
}

@media (max-width: 47.99rem) {
    .beratung-header .legal-title {
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        font-size: calc(var(--fs-display) * 0.9);
    }
}

.beratung-intro {
    font-size: clamp(0.85rem, 2.2vw, 1rem);
    color: var(--text-light);
    letter-spacing: 0.08em;
    font-weight: 300;
    margin: 0;
    line-height: 1.7;
}

.beratung-header .news-intro {
    text-align: left;
}

.beratung-header .news-lead {
    text-align: left;
}

/* ─── Step Hints – Minimalistische Schrittanweisungen ─── */
.beratung-step-hint {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto clamp(1.8rem, 4vw, 2.5rem);
    padding: 0 var(--beratung-side-pad);
}

.beratung-step-label {
    font-family: var(--font-accent);
    font-size: clamp(0.88rem, 2.2vw, 1.04rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 300;
    margin: 0 0 clamp(0.6rem, 1.5vw, 0.8rem);
}

.beratung-step-title {
    font-family: var(--font-accent);
    font-size: clamp(1.44rem, 3.6vw, 1.92rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--dark-grey);
    margin: 0 0 clamp(0.8rem, 2vw, 1.2rem);
    line-height: 1.25;
}

.beratung-step-text {
    font-family: var(--font-primary);
    font-size: clamp(0.65rem, 1.6vw, 0.78rem);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dark-grey);
    margin: 0;
    padding: 0;
    border-left: none;
}


/* ============================================================
   VALUE-BRIDGE – Vertrauensbrücke zwischen Intro und Booking
   ============================================================ */

.beratung-value-bridge {
    padding: clamp(1.5rem, 4vw, 2.5rem) var(--beratung-side-pad);
    margin-bottom: clamp(1rem, 3vw, 2rem);
    border-top: 1px solid rgba(196, 161, 105, 0.15);
    border-bottom: 1px solid rgba(196, 161, 105, 0.15);
}

/* ============================================================
   STEP-INDICATOR – SVG-Based Wizard Progress Bar
   Bulletproof: Kreise + Linien in einem SVG-Koordinatensystem
   = pixel-perfekt auf jedem Viewport, DPR und Browser.
   Keine calc()-Rundungsfehler, keine ::after-Positionierung.
   ============================================================ */

.step-indicator {
    position: sticky;
    /* --sticky-header-h wird per JS (ResizeObserver) exakt auf die
       gemessene Höhe des sticky-nav-wrapper gesetzt.
       Fallback: --nav-height (berechnet), dann 3.4rem (CSS-Fallback). */
    top: var(--sticky-header-h, var(--nav-height, 3.4rem));
    z-index: 100;
    background: rgba(240, 240, 240, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(1.2rem, 3.5vw, 2rem) var(--beratung-side-pad);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    border-bottom: 1px solid rgba(196, 161, 105, 0.12);
}

/* ── SVG Grafik: Einzige Quelle der Wahrheit für Geometrie ── */
.step-indicator__svg {
    display: block;
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    height: auto;
    /* Maximal 3.2rem hoch auf Mobile, skaliert flüssig */
    max-height: clamp(2.4rem, 6vw, 3.2rem);
}

/* ── Verbindungslinien ── */
.step-svg-line {
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: stroke 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Kreise (Default: grauer Rand, transparent) ── */
.step-svg-circle {
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1.5;
    transition:
        fill 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        stroke 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        r 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Zahlen im Kreis ── */
.step-svg-num {
    font-family: var(--font-accent);
    font-size: 0.6875rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    fill: rgba(0, 0, 0, 0.35);
    transition: fill 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}

/* ── Checkmarks (Standard: unsichtbar) ── */
.step-svg-check {
    font-size: 0.8125rem;
    font-weight: 600;
    fill: #fff;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ════════════════════════════════════════════════════
   ZUSTANDS-STEUERUNG via data-Attribute (JS-gesteuert)
   ════════════════════════════════════════════════════ */

/* ── Aktiver Kreis: Gold-Rand, Glow ── */
.step-svg-circle.is-active {
    stroke: var(--gold, #c4a169);
    stroke-width: 2;
    fill: rgba(196, 161, 105, 0.06);
}

.step-svg-num.is-active {
    fill: var(--gold, #c4a169);
    font-weight: 400;
}

/* ── Erledigter Kreis: Gold-Füllung + Checkmark ── */
.step-svg-circle.is-done {
    stroke: var(--gold, #c4a169);
    fill: var(--gold, #c4a169);
}

.step-svg-num.is-done {
    opacity: 0;
}

.step-svg-check.is-done {
    opacity: 1;
}

/* ── Erledigte Linie: Gold ── */
.step-svg-line.is-done {
    stroke: var(--gold, #c4a169);
}

/* ════════════════════════════════════════════════════
   LABELS (HTML <ol> – für Accessibility + Textumbruch)
   ════════════════════════════════════════════════════ */

.step-indicator__list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: clamp(0.35rem, 1vw, 0.5rem) auto 0;
    padding: 0;
    max-width: 42rem;
}

.step-indicator__item {
    flex: 1;
    text-align: center;
}

/* Label */
.step-indicator__label {
    font-family: var(--font-accent);
    font-size: clamp(0.52rem, 1.4vw, 0.65rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 400;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* white-space: nowrap entfernt – verhinderte Umbruch auf Mobile */
    white-space: normal;
    /* FIX: word-break:break-word + hyphens:auto entfernt.
       Erbt globale Baseline → keine Einzelbuchstaben-Trennung.
       overflow-wrap:break-word als Notfall-Umbruch für lange Labels. */
    overflow-wrap: break-word;
    line-height: 1.3;
}

.step-indicator__item.is-active .step-indicator__label {
    color: var(--gold);
    font-weight: 500;
}

.step-indicator__item.is-done .step-indicator__label {
    color: var(--gold);
}

/* Mobile: Volle Breite mit korrekten Seitenmargins + Fluid Label Fix */
@media (max-width: 42rem) {
    .step-indicator {
        padding-inline: var(--beratung-side-pad);
    }

    .step-indicator__list {
        max-width: 100%;
    }

    .step-indicator__label {
        font-size: clamp(0.45rem, 2.2vw, 0.6rem);
        letter-spacing: 0.08em;
    }
}

/* Sehr schmale Viewports: Noch aggressivere Skalierung */
@media (max-width: 22rem) {
    .step-indicator__label {
        font-size: clamp(0.38rem, 2vw, 0.5rem);
        letter-spacing: 0.04em;
    }
}

/* ============================================================
   FLOWING CONTENT CONTAINER
   ============================================================ */

.booking-flow {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 0 clamp(5rem, 12vw, 8rem);
}

/* ============================================================
   BOOKING ZONES – Großzügig atmende Sektionen
   ============================================================ */

.booking-zone {
    padding: clamp(2.8rem, 6vw, 3.8rem) clamp(1.5rem, 5vw, 3.5rem);
    border-radius: 0;
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    contain: paint;
    /* Performance-Containment auf Zone-Level statt Page-Level */
}

/* ─── Alternating Backgrounds: hell → dunkler → hell ─── */
.booking-zone--datum {
    background: #FBF9F5;
}

.booking-zone-uhrzeit-inner {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.booking-zone--sprache {
    background: #F3EDE3;
}

.booking-zone--kanal {
    background: #F7F3ED;
}

.booking-zone-kanal-inner {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.booking-zone--summary {
    background: transparent;
    padding: 0;
}

.booking-zone--daten {
    background: #FBF9F5;
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

/* Desktop: Zones als abgerundete Karten mit großzügigerem Padding */
@media (min-width: 42rem) {
    .booking-zone {
        border-radius: 0.5rem;
        margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
        padding: clamp(3.2rem, 5vw, 4.2rem) clamp(3rem, 6vw, 4.5rem);
    }
}

/* ─── Section Divider ─── */
.section-divider {
    text-align: center;
    padding: clamp(0.5rem, 1.2vw, 0.8rem) 0 clamp(1.2rem, 3vw, 1.8rem);
}

.section-title {
    font-size: clamp(0.65rem, 1.6vw, 0.78rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--dark-grey);
    margin: 0 0 clamp(0.5rem, 1.2vw, 0.7rem) 0;
}

/* #dateSectionTitle – erbt jetzt identische Formatierung von .section-title */

.section-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 161, 105, 0.3), transparent);
    border: none;
    margin: 0;
}

.section-subtitle {
    font-size: clamp(0.65rem, 1.6vw, 0.78rem);
    color: var(--dark-grey);
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1.7;
    text-transform: uppercase;
    margin: clamp(0.6rem, 1.5vw, 1rem) 0 0 0;
}

/* ============================================================
   BERATERINNEN GRID – Gleichwertige Profilkarten
   ============================================================ */

.beraterinnen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(0.6rem, 2vw, 1.3rem) clamp(1.5rem, 5vw, 3.5rem);
    contain: paint;
    /* Performance-Containment auf Grid-Level */
}

@media (min-width: 42rem) {
    .beraterinnen-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        padding: clamp(0.6rem, 2vw, 1.3rem) clamp(3rem, 6vw, 4.5rem);
    }
}

/* ─── Single Card ─── */
.beraterin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: clamp(1.2rem, 3vw, 2rem);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: #fff;
    scroll-margin-top: 6rem;
    /* Abstand zum sticky Header beim Auto-Scroll */
    transition:
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.5s;
    /* KEINE Transitions auf max-height, padding, margin → verhindert Layout-Shifts */
}

.beraterin-card:hover {
    border-color: rgba(196, 161, 105, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.beraterin-card.is-active {
    border-color: rgba(196, 161, 105, 0.35);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06),
        0 4px 15px rgba(196, 161, 105, 0.1);
    transform: scale(1);
    will-change: transform, opacity;
}

/* ─── Inactive cards: smaller + muted ─── */
.beraterin-card:not(.is-active) {
    transform: scale(0.92);
    opacity: 0.7;
}

.beraterin-card:not(.is-active) .beraterin-name,
.beraterin-card:not(.is-active) .beraterin-role {
    opacity: 0.6;
}

/* ─── Photo ─── */
.beraterin-photo {
    width: clamp(12rem, 40vw, 16rem);
    height: clamp(13rem, 44vw, 18rem);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06),
        0 3px 10px rgba(196, 161, 105, 0.08);
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.beraterin-card:hover .beraterin-photo {
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.08),
        0 5px 16px rgba(196, 161, 105, 0.12);
    transform: translateY(-1px);
}

.beraterin-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) blur(1.5px);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* will_change: filter entfernt – nur während .is-active nötig */
}

.beraterin-card.is-active .beraterin-photo img {
    filter: grayscale(0%) blur(0px);
    will-change: opacity;
    /* filter ist ein Main-Thread-Property → kein will_change nötig */
}

.beraterin-card.is-active .beraterin-photo {
    transform: scale(1.04);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.08),
        0 5px 18px rgba(196, 161, 105, 0.14);
}

/* ============================================================
   SELECT BUTTON – Inside active steckbrief
   ============================================================ */

.btn-beraterin-select {
    display: block;
    width: 100%;
    background: var(--gold);
    border: 1.5px solid var(--gold);
    color: #fff;
    font-family: var(--font-accent);
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    border-radius: 2rem;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
    padding: 0.65rem 2rem;
    box-shadow: 0 4px 14px rgba(196, 161, 105, 0.2);
}

.beraterin-card.is-active .btn-beraterin-select {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .btn-beraterin-select:hover {
        background: transparent;
        color: var(--gold);
        box-shadow: none;
    }
}

/* ── BOOKED STATE: 120Hz Smooth Collapse ── */
/* Architektur: Zero Layout-Shift auf Desktop, Smooth Collapse auf Mobile.
   KEINE grid-template-columns Änderung, KEIN display:none.
   Alles über GPU-composited opacity + CSS-transitioned height. */

/* Desktop: Nur visuelles Fade (Grid bleibt stabil bei repeat(3,1fr)) */
.beraterinnen-grid.is-booked .beraterin-card:not(.is-selected-final) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.95);
}

/* Mobile: Zusätzlich vertikaler Smooth-Collapse */
@media (max-width: 41.99rem) {
    .beraterinnen-grid.is-booked .beraterin-card:not(.is-selected-final) {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        margin-top: 0;
        margin-bottom: 0;
        overflow: hidden;
        /* Verhindert Content-Bleed bei Collapse */
    }
}

/* Gewählte Karte: Stabil und sichtbar */
.beraterinnen-grid.is-booked .beraterin-card.is-selected-final {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition:
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

.beraterinnen-grid.is-booked .beraterin-card.is-selected-final .btn-beraterin-select {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: none;
}

/* ─── Change-Link (entfernt – Button-Toggle in Karte) ─── */
.btn-beraterin-change {
    display: none !important;
}

/* ─── Name ─── */
.beraterin-name {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-family: var(--font-accent);
    font-weight: 200;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 0.3rem 0;
    line-height: 1.2;
}

/* ─── Role ─── */
.beraterin-role {
    font-size: clamp(0.55rem, 1.3vw, 0.65rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin: 0 0 0.5rem 0;
}

/* ─── Steckbrief (immer sichtbar, Blur-Reveal für 120Hz) ─── */
.beraterin-steckbrief {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.beraterin-steckbrief-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0.3;
    filter: blur(1.5px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* will_change entfernt – GPU-Layer nur bei .is-active nötig */
}

.beraterin-card.is-active .beraterin-steckbrief-inner {
    opacity: 1;
    filter: blur(0px);
    will-change: opacity;
    /* filter ist ein Main-Thread-Property → kein will_change nötig */
}

/* ─── Bio ─── */
.beraterin-bio {
    font-size: clamp(0.76rem, 1.8vw, 0.85rem);
    color: var(--text-light);
    font-weight: 300;
    line-height: 1.75;
    font-style: normal;
    text-align: left;
    margin: clamp(0.3rem, 0.8vw, 0.5rem) 0;
    padding: 0 0.5rem;
}

/* ─── „Mögliche Sprachen" Label ─── */
.beraterin-lang-label {
    font-size: clamp(0.5rem, 1.2vw, 0.58rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 500;
    margin: clamp(1rem, 2.5vw, 1.5rem) 0 0.4rem 0;
    text-align: center;
}

/* ─── Language Tags (vergrößert) ─── */
.beraterin-languages {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}

/* Language tags */
.lang-tag {
    font-size: clamp(0.65rem, 1.6vw, 0.72rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(196, 161, 105, 0.3);
    border-radius: 2rem;
    padding: 0.3rem 0.6rem;
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.lang-tag:hover {
    background-color: rgba(196, 161, 105, 0.08);
}

/* ============================================================
   CALENDAR WIDGET – Monthly Grid (Mo–Fr)
   ============================================================ */

.calendar-widget {
    max-width: 28rem;
    margin: 0 auto;
    padding: clamp(0.8rem, 2vw, 1.2rem) 0 clamp(0.5rem, 1.5vw, 0.8rem);
}

/* ─── Month Header ─── */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.2rem, 4vw, 2rem);
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem);
}

.calendar-month-label {
    font-family: var(--font-accent);
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark-grey);
    min-width: 8rem;
    text-align: center;
}

.calendar-nav {
    flex-shrink: 0;
    width: clamp(2rem, 6vw, 2.4rem);
    height: clamp(2rem, 6vw, 2.4rem);
    border: 1.5px solid rgba(196, 161, 105, 0.35);
    border-radius: 50%;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-nav svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--gold);
    transition: stroke 0.3s ease;
}

.calendar-nav:hover {
    border-color: var(--gold);
    background: var(--gold);
}

.calendar-nav:hover svg {
    stroke: #fff;
}

.calendar-nav:disabled {
    opacity: 0.15;
    cursor: default;
    pointer-events: none;
}

/* ─── Weekday Headers ─── */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.calendar-weekdays span {
    text-align: center;
    font-size: clamp(0.5rem, 1.3vw, 0.58rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    padding: 0.4rem 0;
}

/* ─── Calendar Grid ─── */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
}

/* ─── Day Cell ─── */
.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(196, 161, 105, 0.2);
    background: #F5F0E8;
    cursor: pointer;
    transition:
        background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding: clamp(0.5rem, 1.5vw, 0.7rem) 0;
    min-height: clamp(3.2rem, 10vw, 3.8rem);
    -webkit-tap-highlight-color: transparent;
}

/* ─── Inner Labels ─── */
.cal-label {
    font-size: clamp(0.42rem, 1.1vw, 0.48rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.cal-label--day {
    color: var(--dark-grey);
}

.cal-label--month {
    color: var(--gold);
    font-weight: 500;
    opacity: 0.7;
}

.cal-num {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    font-weight: 300;
    font-family: var(--font-accent);
    color: var(--dark-grey);
    line-height: 1;
}

/* Selected state – all labels white */
.calendar-day.is-selected .cal-label,
.calendar-day.is-selected .cal-num {
    color: #fff;
}

/* Today state – gold accent */
.calendar-day.is-today:not(.is-selected) .cal-label--day,
.calendar-day.is-today:not(.is-selected) .cal-num {
    color: var(--gold);
}

/* Past state */
.calendar-day.is-past .cal-label,
.calendar-day.is-past .cal-num {
    color: inherit;
}

.calendar-day--empty {
    border: none;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

/* Hover */
.calendar-day:not(.calendar-day--empty):not(.is-past):not(.is-selected):not(.is-booked):hover {
    border-color: rgba(196, 161, 105, 0.5);
    box-shadow: 0 4px 14px rgba(196, 161, 105, 0.12);
    transform: translateY(-1px);
}

.calendar-day.is-booked:not(.calendar-day--empty):hover {
    border-color: rgba(196, 161, 105, 0.4);
    box-shadow: 0 4px 14px rgba(196, 161, 105, 0.12);
    transform: translateY(-1px);
}

/* Selected */
.calendar-day.is-selected {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 6px 20px rgba(196, 161, 105, 0.3);
    font-weight: 400;
}

/* Today */
.calendar-day.is-today:not(.is-selected) {
    border-color: var(--gold);
    border-width: 2px;
    color: var(--gold);
    font-weight: 500;
}

/* Past / out-of-range */
.calendar-day.is-past {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(196, 161, 105, 0.1);
}

/* ─── Slide Animation (Month Transition) ─── */
.calendar-grid.slide-out-left {
    animation: calSlideOutLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.calendar-grid.slide-out-right {
    animation: calSlideOutRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.calendar-grid.slide-in-left {
    animation: calSlideInLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.calendar-grid.slide-in-right {
    animation: calSlideInRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes calSlideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes calSlideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes calSlideInLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes calSlideInRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

/* ============================================================
   TIME SLOTS
   ============================================================ */

.time-group {
    margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
}

.time-group:last-child {
    margin-bottom: 0;
}

.time-label {
    text-align: center;
    font-size: clamp(0.48rem, 1.2vw, 0.55rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.7rem) 0;
    font-weight: 500;
}

.time-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.4rem, 1.2vw, 0.5rem);
}

.time-slot {
    background: #fff;
    border: 1px solid rgba(196, 161, 105, 0.15);
    color: var(--dark-grey);
    border-radius: 2rem;
    padding: clamp(0.5rem, 1.5vw, 0.55rem) clamp(1rem, 3vw, 1.2rem);
    font-size: clamp(0.72rem, 1.8vw, 0.78rem);
    letter-spacing: 0.1em;
    font-family: var(--font-accent);
    cursor: pointer;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 300;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.time-slot:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}

.time-slot.is-selected {
    border-color: var(--gold);
    background-color: var(--gold);
    color: #fff;
    box-shadow: 0 6px 18px rgba(196, 161, 105, 0.2);
}

/* ============================================================
   OPTION BUTTONS (Sprache / Kanal)
   ============================================================ */

.options-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.8rem) 0;
}

.option-btn {
    background: #fff;
    border: 1px solid rgba(196, 161, 105, 0.15);
    color: var(--dark-grey);
    border-radius: 2rem;
    padding: clamp(0.6rem, 1.5vw, 0.65rem) clamp(1.4rem, 4vw, 1.8rem);
    font-size: clamp(0.65rem, 1.6vw, 0.75rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
    cursor: pointer;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.option-btn:hover {
    border-color: var(--gold);
}

.option-btn.is-selected {
    border-color: var(--gold);
    background-color: var(--gold);
    color: #fff;
    box-shadow: 0 6px 18px rgba(196, 161, 105, 0.18);
}

/* ─── Option Buttons mit Icons ─── */
.option-btn--icon {
    gap: clamp(0.4rem, 1vw, 0.6rem);
}

.option-icon {
    width: clamp(1rem, 2.5vw, 1.2rem);
    height: clamp(1rem, 2.5vw, 1.2rem);
    flex-shrink: 0;
    color: var(--gold);
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.option-btn.is-selected .option-icon {
    color: #fff;
}

/* ─── Kanal Phone Hint ─── */
.kanal-phone-hint {
    text-align: center;
    font-size: clamp(0.85rem, 2.2vw, 1rem);
    color: var(--gold);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.08em;
    line-height: 1.7;
    margin: clamp(0.6rem, 1.5vw, 1rem) 0 0 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.kanal-phone-hint.is-visible {
    opacity: 1;
    max-height: 3rem;
    transform: translateY(0);
}

/* ============================================================
   FORM (Checkout-Design)
   ============================================================ */

.booking-form {
    max-width: 100%;
    padding: 0;
}

.booking-form .form-group {
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
}

.booking-form .form-group label {
    font-family: var(--font-accent);
    font-size: clamp(0.55rem, 1.4vw, 0.65rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-dimmed);
    margin-bottom: clamp(0.4rem, 1vw, 0.6rem);
}

.booking-form .form-group label .optional {
    font-size: clamp(0.55rem, 1.4vw, 0.65rem);
    font-weight: 500;
    color: var(--text-dimmed);
    opacity: 0.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.booking-form .form-group input {
    width: 100%;
    padding: clamp(0.7rem, 2vw, 0.8rem) clamp(0.8rem, 2vw, 1rem);
    border: none;
    background: white;
    font-family: var(--font-accent);
    font-size: clamp(0.88rem, 2.2vw, 1rem);
    color: var(--text-secondary);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.booking-form .form-group input::placeholder {
    color: var(--text-dimmed);
    font-weight: 300;
}

.booking-form .form-group input:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(196, 161, 105, 0.3);
}

/* Checkout Form Row (side-by-side Name-Fields) */
.booking-form .checkout-form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 30rem) {
    .booking-form .checkout-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
}

.booking-form .radio-group {
    flex-direction: row;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--dark-grey);
    cursor: pointer;
    font-weight: 300;
    letter-spacing: 0.08em;
}

.radio-custom {
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(196, 161, 105, 0.35);
    display: inline-block;
    position: relative;
    border-radius: 50%;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
}

.radio-label input {
    display: none;
}

.radio-label input:checked+.radio-custom {
    border-color: var(--gold);
}

.radio-label input:checked+.radio-custom::after {
    content: '';
    position: absolute;
    inset: 0.1875rem;
    background-color: var(--gold);
    border-radius: 50%;
}

/* Phone Input Group (Monolith-Checkout-Style) */
.booking-form .phone-input-group {
    display: flex;
    align-items: center;
    background: var(--white);
    height: clamp(2.8rem, 8vw, 3.4rem);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: text;
}

.booking-form .phone-input-group:focus-within {
    box-shadow: 0 0 20px rgba(196, 161, 105, 0.2);
    border-color: rgba(196, 161, 105, 0.4);
}

.booking-form .phone-input-group .phone-box {
    width: auto;
    background: transparent;
    border: none;
    height: 100%;
    font-family: var(--font-accent);
    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
    color: var(--text-secondary);
    padding: 0 clamp(0.5rem, 1.5vw, 1rem);
    letter-spacing: 0.1em;
    transition: color 0.3s ease, background-color 0.3s ease;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.booking-form .phone-input-group .phone-box--country {
    width: clamp(3.5rem, 12vw, 5.3rem);
    color: var(--text-secondary);
    font-weight: 400;
    text-align: center;
    position: relative;
}

.booking-form .phone-input-group .phone-box--area {
    width: clamp(3rem, 10vw, 5.6rem);
    text-align: center;
    font-weight: 400;
    position: relative;
}

.booking-form .phone-input-group .phone-box--number {
    flex: 1;
    width: 100%;
    text-align: left;
    padding-left: clamp(0.8rem, 2vw, 1.5rem);
    font-weight: 400;
}

.booking-form .phone-input-group .phone-box:focus {
    outline: none;
    color: var(--black);
    background: transparent;
}

.booking-form .phone-box::placeholder {
    color: var(--text-dimmed);
    font-weight: 200;
    letter-spacing: 0.2em;
}

/* Subtile interne Trenner im Telefon-Feld */
.booking-form .phone-input-group .phone-box--country::after,
.booking-form .phone-input-group .phone-box--area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Validation States */
.booking-form .form-group input.is-valid,
.booking-form .phone-input-group.is-valid {
    border-left: 3px solid var(--gold-light);
}

.booking-form .form-group input.is-invalid,
.booking-form .phone-input-group.is-invalid {
    border-left: 3px solid var(--error);
}

/* Error Hint Tooltips */
.booking-form .error-hint {
    font-family: var(--font-accent);
    font-size: clamp(0.6rem, 1.5vw, 0.68rem);
    color: var(--error);
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.booking-form .error-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-bottom: 0.5rem;
}

/* Chrome/Safari Autofill Override */
.booking-form input:-webkit-autofill,
.booking-form input:-webkit-autofill:hover,
.booking-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Submit Button */
.btn-submit-booking {
    display: block;
    width: 100%;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    background: var(--gold);
    border: none;
    color: #fff;
    height: clamp(3rem, 8vw, 3.8rem);
    font-family: var(--font-accent);
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 25px rgba(196, 161, 105, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
    .btn-submit-booking:hover {
        background: var(--gold-dark);
        box-shadow: 0 12px 30px rgba(196, 161, 105, 0.35);
        letter-spacing: 0.3em;
    }
}

/* Shimmer Sweep Effect (Liquid Gold – identisch zum Store) */
.beratung-page .shimmer-sweep {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.beratung-page .shimmer-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.15) 55%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg) translate3d(0, 0, 0);
    animation: beratung-shimmer 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes beratung-shimmer {
    0% {
        transform: translateX(-100%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    60% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translateX(150%) skewX(-25deg) translate3d(0, 0, 0);
        opacity: 0;
    }
}

/* ============================================================
   SUMMARY – Gold Header Box
   ============================================================ */

.summary-box {
    border-radius: 0;
    overflow: hidden;
    border: none;
}

.summary-box-header {
    background: linear-gradient(135deg, #c4a169, #a6854e);
    padding: clamp(1rem, 2.5vw, 1.4rem) var(--beratung-side-pad);
    text-align: center;
}

.summary-box-title {
    font-size: clamp(0.6rem, 1.5vw, 0.72rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

.summary-box-body {
    padding: clamp(1rem, 2.5vw, 1.5rem) var(--beratung-side-pad);
    background: #fff;
}

/* Desktop: Summary-Box bekommt den Zone-Radius */
@media (min-width: 42rem) {
    .booking-zone--summary {
        padding: 0;
        background: transparent;
    }

    .summary-box {
        border-radius: 0.5rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(0.5rem, 1.2vw, 0.7rem) 0;
    border-bottom: 1px solid rgba(196, 161, 105, 0.08);
}

.summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-label {
    font-size: clamp(0.5rem, 1.3vw, 0.58rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    text-align: right;
}

.summary-value {
    font-size: clamp(0.78rem, 2.2vw, 0.88rem);
    color: var(--dark-grey);
    text-align: left;
    font-weight: 300;
    letter-spacing: 0.04em;
}

/* Mobile: Summary-Rows enger */
@media (max-width: 26rem) {
    .summary-row {
        gap: clamp(0.5rem, 2vw, 1rem);
    }
}

/* ============================================================
   BOOKED / UNAVAILABLE STATES – Vereinfachtes 3-Stufen-System
   Frei = Gold-Ivory | Nicht verfügbar = Warm-Dimm | Ausgewählt = Gold
   ============================================================ */

/* Calendar – nicht verfügbar (Beraterin kann nicht) → Warmes Dimming */
.calendar-day.is-booked {
    background: #EDEAE6;
    border-color: rgba(196, 161, 105, 0.12);
    opacity: 0.7;
    cursor: pointer;
    position: relative;
}

.calendar-day.is-booked .cal-label--day,
.calendar-day.is-booked .cal-num {
    color: rgba(120, 110, 95, 0.6);
}

.calendar-day.is-booked .cal-label--month {
    color: rgba(196, 161, 105, 0.4);
}

/* Alternative Beraterin möglich → Gleiches Dimming, aber Gold-Punkt als Signal */
.calendar-day.is-booked.has-alternative {
    opacity: 0.8;
}

/* Gold-Punkt-Indikator: Signalisiert "Alternative verfügbar" */
.calendar-day.is-booked.has-alternative::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 0.35rem;
    height: 0.35rem;
    background: rgba(196, 161, 105, 0.85);
    border-radius: 50%;
    animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Time slots – booked */
.time-slot.is-booked {
    opacity: 0.3;
    text-decoration: line-through;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   BOOKING CONFIRMATION – Inline
   ============================================================ */

.booking-confirmation {
    text-align: center;
    padding: clamp(2rem, 5vw, 3rem) var(--beratung-side-pad);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(1rem);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-confirmation.is-visible {
    opacity: 1;
    max-height: 30rem;
    transform: translateY(0);
}

.confirmation-icon {
    margin: 0 auto clamp(1rem, 3vw, 1.5rem);
}

.confirmation-icon svg {
    width: clamp(2.5rem, 7vw, 3.2rem);
    height: clamp(2.5rem, 7vw, 3.2rem);
}

.confirmation-greeting {
    font-family: var(--font-accent);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--dark-grey);
    margin: 0 0 0.8rem 0;
}

.confirmation-message {
    font-size: clamp(0.78rem, 2vw, 0.88rem);
    color: var(--text-light);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin: 0 0 1.2rem 0;
}

.confirmation-email-note {
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    color: var(--text-light);
    font-weight: 300;
    letter-spacing: 0.06em;
    margin: 0 0 0.3rem 0;
}

.confirmation-email {
    font-size: clamp(0.82rem, 2vw, 0.92rem);
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin: 0 0 1.5rem 0;
}

.confirmation-divider {
    width: 4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 161, 105, 0.4), transparent);
    margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
}

.confirmation-signature {
    font-size: clamp(0.65rem, 1.6vw, 0.75rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    font-weight: 400;
    margin: 0;
}

/* ============================================================
   PROGRESSIVE DISCLOSURE – Zone Reveal System
   Booking-Zones sind initial komplett versteckt und werden
   erst nach Abschluss des vorherigen Schritts mit einer
   butterweichen, edlen Animation eingeblendet.
   ============================================================ */

/* ── Basis-State: Booking-Zone versteckt ── */
.booking-zone.is-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-color: transparent;
    pointer-events: none;
    transform: translateY(1.5rem);
    transition:
        max-height 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
        padding 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reveal-State: Zone sichtbar ── */
.booking-zone:not(.is-hidden) {
    max-height: 250rem;
    /* Großzügiger Wert, der nie erreicht wird */
    opacity: 1;
    overflow: visible;
    /* MUSS visible sein – overflow:hidden blockiert Touch-Scroll auf Mobile */
    pointer-events: auto;
    transform: none;
    transition:
        max-height 1s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        padding 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
        margin 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
        border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Inner Sub-Zones (Uhrzeit, Kanal): Lock-System bleibt ── */
/* Gesperrte Sub-Zone: Inhalt gedämpft, nicht klickbar */
.booking-zone.is-locked .calendar-widget,
.booking-zone.is-locked .time-group,
.booking-zone.is-locked .time-slots,
.booking-zone.is-locked .options-grid,
.booking-zone.is-locked .kanal-options,
.booking-zone.is-locked .kanal-phone-hint,
.booking-zone.is-locked .booking-form,
.booking-zone.is-locked .radio-group,
.booking-zone-uhrzeit-inner.is-locked .time-group,
.booking-zone-uhrzeit-inner.is-locked .time-slots,
.booking-zone-kanal-inner.is-locked .options-grid,
.booking-zone-kanal-inner.is-locked .kanal-options,
.booking-zone-kanal-inner.is-locked .kanal-phone-hint {
    opacity: 0.18;
    pointer-events: none;
    filter: blur(1.5px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Überschriften in gesperrter Zone leicht dimmen */
.booking-zone.is-locked .section-title,
.booking-zone.is-locked .section-subtitle,
.booking-zone-uhrzeit-inner.is-locked .section-title,
.booking-zone-uhrzeit-inner.is-locked .section-subtitle,
.booking-zone-kanal-inner.is-locked .section-title,
.booking-zone-kanal-inner.is-locked .section-subtitle {
    opacity: 0.5;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entriegelungs-Transition: Sanftes Aufblenden */
.booking-zone:not(.is-locked) .calendar-widget,
.booking-zone:not(.is-locked) .time-group,
.booking-zone:not(.is-locked) .time-slots,
.booking-zone:not(.is-locked) .options-grid,
.booking-zone:not(.is-locked) .kanal-options,
.booking-zone:not(.is-locked) .booking-form,
.booking-zone:not(.is-locked) .radio-group,
.booking-zone-uhrzeit-inner:not(.is-locked) .time-group,
.booking-zone-uhrzeit-inner:not(.is-locked) .time-slots,
.booking-zone-kanal-inner:not(.is-locked) .options-grid,
.booking-zone-kanal-inner:not(.is-locked) .kanal-options,
.booking-zone-kanal-inner:not(.is-locked) .kanal-phone-hint {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-zone:not(.is-locked) .section-title,
.booking-zone:not(.is-locked) .section-subtitle,
.booking-zone-uhrzeit-inner:not(.is-locked) .section-title,
.booking-zone-uhrzeit-inner:not(.is-locked) .section-subtitle,
.booking-zone-kanal-inner:not(.is-locked) .section-title,
.booking-zone-kanal-inner:not(.is-locked) .section-subtitle {
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Lock Hint Text ─── */
.zone-lock-hint {
    text-align: center;
    font-size: clamp(0.85rem, 2.2vw, 1rem);
    color: var(--gold);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.7;
    margin: clamp(0.5rem, 1.2vw, 0.8rem) 0;
    padding: 0;
    opacity: 1;
    max-height: 3rem;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hint verschwindet wenn Zone entriegelt */
.booking-zone:not(.is-locked) .zone-lock-hint,
.booking-zone-uhrzeit-inner:not(.is-locked) .zone-lock-hint,
.booking-zone-kanal-inner:not(.is-locked) .zone-lock-hint {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}

/* ============================================================
   FORM FREEZE STATE
   ============================================================ */

.booking-flow.is-frozen .booking-form input,
.booking-flow.is-frozen .booking-form .phone-input-group {
    opacity: 0.5;
    pointer-events: none;
}

.booking-flow.is-frozen .radio-group {
    opacity: 0.5;
    pointer-events: none;
}

.booking-flow.is-frozen .booking-zone,
.booking-flow.is-frozen .calendar-widget,
.booking-flow.is-frozen .time-group,
.booking-flow.is-frozen .options-grid,
.booking-flow.is-frozen .kanal-options {
    opacity: 0.5;
    pointer-events: none;
}

.booking-flow.is-frozen .beraterinnen-grid,
.booking-flow.is-frozen .btn-beraterin-change {
    opacity: 0.5;
    pointer-events: none;
}

.booking-flow.is-frozen .btn-submit-booking {
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================
   VALUE ICONS
   ============================================================ */

.beratung-value-icons .value-icon-number {
    font-family: var(--font-accent);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--gold);
}

/* ============================================================
   MOBILE PERFECTION – Touch & Fluid Refinements
   ============================================================ */

@media (max-width: 42rem) {

    /* Booking-Zones: Großzügiger vertikaler Atemraum */
    .booking-zone {
        padding-block: clamp(2.5rem, 6vw, 3.2rem);
    }

    /* Beraterinnen-Grid: Enger */
    .beraterinnen-grid {
        gap: clamp(1rem, 3vw, 1.5rem);
        padding-block: clamp(0.5rem, 1.5vw, 0.8rem);
    }

    /* Karten: Kompakter auf kleinen Screens + Smooth-Collapse-ready */
    .beraterin-card {
        padding: clamp(1rem, 3vw, 1.5rem);
        max-height: 50rem;
        /* Basis für max-height Transition */
        overflow: hidden;
        transition:
            border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s linear 0.5s,
            max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
            padding 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
            margin 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
            border-width 0s linear 0.45s;
    }

    /* Photos: Breiter relativ zum Container */
    .beraterin-photo {
        width: clamp(10rem, 55vw, 14rem);
        height: clamp(11rem, 60vw, 15rem);
    }

    /* Change-Button: Touch-optimiert */
    .btn-beraterin-change {
        margin: clamp(0.8rem, 2vw, 1.2rem) auto;
        padding: clamp(0.6rem, 1.5vw, 0.65rem) clamp(1.5rem, 4vw, 2rem);
        min-height: 2.6rem;
    }

    /* Calendar: Touch-optimierte Cells */
    .calendar-grid {
        gap: clamp(0.2rem, 0.8vw, 0.3rem);
    }

    .calendar-day {
        min-height: clamp(3rem, 9vw, 3.5rem);
        -webkit-tap-highlight-color: transparent;
    }

    /* Summary: Kompakteres vertikales Padding */
    .summary-box-header {
        padding-block: clamp(0.8rem, 2.5vw, 1.2rem);
    }

    .summary-box-body {
        padding-block: clamp(0.8rem, 2.5vw, 1.2rem);
    }

    /* Form: Touch-optimierte Radio-Buttons */
    .radio-group {
        gap: clamp(1rem, 3vw, 1.5rem);
    }

    .radio-label {
        min-height: 2.4rem;
        display: flex;
        align-items: center;
    }

    /* Submit Button: Volle Breite, touch-freundlich */
    .btn-submit-booking {
        min-height: 3rem;
    }

    /* Confirmation: Kompakt */
    .booking-confirmation {
        padding-block: clamp(1.5rem, 4vw, 2rem);
    }
}

/* ============================================================
   SMART AVAILABILITY MODAL
   Luxury Glassmorphism Mini-Modal:
   Erscheint zentriert über dem Kalender wenn ein komplett
   geblockter Tag mit verfügbaren Alternativen angeklickt wird.
   ============================================================ */

/* Backdrop */
.avail-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 28, 25, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s;
    padding: clamp(1rem, 4vw, 2rem);
}

.avail-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Modal Card */
.avail-modal {
    position: relative;
    max-width: 24rem;
    width: 100%;
    background: rgba(245, 241, 236, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 161, 105, 0.15);
    border-radius: 1rem;
    padding: clamp(1.8rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.06);
    transform: scale(0.92) translateY(0.5rem);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.avail-modal-backdrop.is-visible .avail-modal {
    transform: scale(1) translateY(0);
}

/* Close button */
.avail-modal__close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.25s ease, color 0.25s ease;
    padding: 0;
}

.avail-modal__close:hover {
    opacity: 1;
    color: var(--gold);
}

.avail-modal__close svg {
    width: 1rem;
    height: 1rem;
}

/* Date display */
.avail-modal__date {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.3rem;
}

/* Context: "ist bei Frau X nicht möglich" */
.avail-modal__context {
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* Divider */
.avail-modal__divider {
    width: 2.5rem;
    height: 1px;
    background: var(--gold);
    opacity: 0.3;
    margin: 0 auto 1rem;
}

/* Available alternatives text */
.avail-modal__text {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.avail-modal__text strong {
    font-weight: 500;
    color: var(--gold-dark);
}

/* CTA Button */
.avail-modal__btn {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 0.35rem;
    padding: 0.65rem 1.8rem;
    cursor: pointer;
    transition: background 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

.avail-modal__btn:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-1px);
}

.avail-modal__btn:active {
    transform: translateY(0);
}