/*
 * booking-erfahre.css — Erfahre-Stil-Overrides fuer das BikeGPT-Core
 * Booking-Embed-Widget (Klassen .bk-*).
 *
 * Wird im embed-wrapper.blade.php NACH dem Embed-CSS geladen, damit
 * gleiche Specificity-Tie zugunsten Erfahre gewinnt. Bei hoeherer
 * Embed-Specificity nutzen wir explizite Selektoren oder !important
 * (sparsam — nur wo absolut noetig).
 *
 * Ziel: Booking-Widget soll sich nahtlos in Erfahre-Layout einfuegen —
 * gleiche Schrift (Inter + DM Serif Display), gleiche Farben, gleiche
 * Button-Form, gleiche Spacing.
 *
 * Stand 16.05.2026 — initial. Wird ueber QA mit Bernd iterativ verfeinert.
 */

/* ============================================================
 * Wrapper-Page-Styling: schmaler Hero ueber dem Embed
 * ============================================================ */
.ap-buchen-embed-hero {
    padding: 32px 22px 16px;
    background: var(--c-bg, #fff);
    text-align: center;
}
@media (min-width: 768px) {
    .ap-buchen-embed-hero { padding: 48px 32px 16px; }
}
.ap-buchen-back {
    margin-top: 12px;
    color: var(--c-muted);
    font-size: 14px;
}
.ap-buchen-back .ef-link { color: var(--c-muted); }
.ap-buchen-back .ef-link:hover { color: var(--c-text); }

.ap-buchen-embed-section { padding-top: 24px; padding-bottom: 64px; }
.ap-buchen-embed-host {
    background: var(--c-bg, #fff);
    border-radius: 22px;
    padding: 24px 16px;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .ap-buchen-embed-host { padding: 40px 32px; }
}

.ap-buchen-embed-fallback {
    text-align: center;
    padding: 48px 16px;
    color: var(--c-muted);
}

/* ============================================================
 * Werkstatt-Widget .bk-* Overrides (tools/booking/embed.blade.php)
 *
 * Identisch strukturiert zum .cb-*-Block weiter unten — beide Embeds
 * sollen optisch nicht unterscheidbar sein. Unterschiede zum Beratungs-
 * Widget:
 *   - State-Klassen heissen .active (statt .filled) bei Progress-Steps
 *   - .bgpt-btn ist DEFAULT-Primary (kein -primary Suffix), .bgpt-btn-secondary outline
 *   - Auswahl-Cards heissen .bgpt-bk-option / .bgpt-card / .bgpt-bk-service-card
 *   - Zeit-Slots .bgpt-time-slot
 *
 * Klassen-Inventar aus resources/views/tools/booking/embed.blade.php:
 *   Widget:    .bgpt-widget, .bgpt-logo-wrap, .bgpt-container, .bgpt-step
 *   Title:     .bgpt-title, .bgpt-subtitle
 *   Progress:  .bgpt-progress, .bgpt-progress-step (+ .active)
 *   Cards:     .bgpt-bk-option, .bgpt-card, .bgpt-bk-service-card (+ .selected)
 *   Buttons:   .bgpt-btn (default = primary), .bgpt-btn-secondary, .bgpt-btn-sm,
 *              .bgpt-btn--centered, .bgpt-flex-1 (flex-grow Helper)
 *   Form:      .bgpt-form, .bgpt-form-group, .bgpt-input, .bgpt-select, .bgpt-textarea
 *   Calendar:  .bgpt-calendar, .bgpt-time-slot
 *   Error/OK:  .bgpt-error, .bgpt-error-box, .bgpt-success, .bgpt-confirmation
 *   Modal:     .bgpt-modal-overlay, .bgpt-modal (siehe weiter unten)
 * ============================================================ */

/* Hide-Helper wie bei .cb-* — kein display:flex !important soll d-none stechen */
.bgpt-widget .d-none,
.bgpt-widget [hidden] { display: none !important; }

/* Container — transparent, faellt in Erfahre-Host-Card */
.bgpt-widget {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--c-text);
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    max-width: none !important;
    padding: 0 !important;
}

.bgpt-logo-wrap { display: none !important; }

.bgpt-container {
    max-width: none !important;
    padding: 0 !important;
}

/* Typografie */
.bgpt-title {
    font-family: var(--font-display, 'DM Serif Display', serif) !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--c-text) !important;
    text-align: center !important;
    margin: 0 0 8px !important;
}
.bgpt-subtitle {
    color: var(--c-muted) !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto 28px !important;
    max-width: 520px !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
}

/* Progress-Bar mit Erfahre-Akzentfarbe */
.bgpt-progress {
    display: flex !important;
    gap: 6px !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: 480px !important;
    height: auto !important;
    border-radius: 0 !important;
}
.bgpt-progress-step {
    flex: 1 !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    background: var(--c-line, #e5e5e7) !important;
    border-radius: 2px !important;
    transition: background 0.3s !important;
}
.bgpt-progress-step.active,
.bgpt-progress > * { /* fallback wenn JS noch keinen .active setzt */
    background: var(--c-line, #e5e5e7) !important;
}
.bgpt-progress-step.active { background: var(--c-link, #0066cc) !important; }

/* Form-Inputs */
.bgpt-input,
.bgpt-select,
.bgpt-textarea,
.bgpt-widget input[type="text"],
.bgpt-widget input[type="email"],
.bgpt-widget input[type="tel"],
.bgpt-widget input[type="number"],
.bgpt-widget input[type="date"],
.bgpt-widget input[type="search"],
.bgpt-widget select,
.bgpt-widget textarea {
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font: inherit !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.bgpt-input:focus,
.bgpt-select:focus,
.bgpt-textarea:focus,
.bgpt-widget input:focus,
.bgpt-widget select:focus,
.bgpt-widget textarea:focus {
    outline: none !important;
    border-color: var(--c-link, #0066cc) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-link, #0066cc) 18%, transparent) !important;
}

.bgpt-form-group { margin-bottom: 16px !important; }
.bgpt-form-group label,
.bgpt-check-label,
.bgpt-checkbox-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--c-text) !important;
}

/* ============================================================
 * Buttons — exakt wie .ef-btn aus Erfahre-Core
 * .bgpt-btn ist DEFAULT-Primary (Bernds bestehendes Markup hat oft nur
 * "bk-btn" ohne -primary Suffix). Wenn -secondary explizit gesetzt
 * ist, schaltet auf Outline um.
 * ============================================================ */
.bgpt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    gap: 6px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border-radius: var(--radius-pill, 980px) !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.022em !important;
    border: 1px solid var(--c-link, #0066cc) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s, transform 0.08s !important;
    white-space: nowrap !important;
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}
.bgpt-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-link, #0066cc) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--c-link, #0066cc) 88%, #000) !important;
}
.bgpt-btn:active { transform: scale(0.98) !important; }
.bgpt-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Secondary = outline, blauer Border + Text */
.bgpt-btn-secondary {
    background: transparent !important;
    color: var(--c-link, #0066cc) !important;
    border: 1px solid var(--c-link, #0066cc) !important;
}
.bgpt-btn-secondary:hover:not(:disabled) {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}

/* Small-Variante (z.B. AGB-Toggle) */
.bgpt-btn-sm {
    min-height: 36px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
}

/* Flex-1 Helper (Step-Nav: Zurueck + Weiter) → je 50% */
.bgpt-flex-1 { flex: 1 1 0 !important; min-width: 0 !important; }

/* Container fuer Step-Nav-Row (Zurueck + Weiter)
   .bgpt-nav ist der echte Container im Werkstatt-Markup. Buttons immer
   nebeneinander (kein column-stack auf mobile), je 50% wenn zwei drin,
   100% wenn nur einer drin (flex:1 macht beides). */
.bgpt-nav,
.bgpt-actions-row,
.bgpt-step .bgpt-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin-top: 28px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.bgpt-nav .bgpt-btn,
.bgpt-actions-row .bgpt-btn,
.bgpt-step .bgpt-actions .bgpt-btn { flex: 1 1 0 !important; min-width: 0 !important; }

/* ============================================================
 * Auswahl-Cards (Service / Option / Service-Card)
 * ============================================================ */
.bgpt-bk-option,
.bgpt-card,
.bgpt-bk-service-card,
.bgpt-bk-service-option {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 18px !important;
    background: var(--c-bg, #fff) !important;
    cursor: pointer !important;
    transition: border-color 120ms ease, background 120ms ease !important;
    text-align: left !important;
}
.bgpt-bk-option:hover,
.bgpt-card:hover,
.bgpt-bk-service-card:hover,
.bgpt-bk-service-option:hover {
    border-color: var(--c-link, #0066cc) !important;
    background: color-mix(in srgb, var(--c-link, #0066cc) 4%, var(--c-bg, #fff)) !important;
}
.bgpt-bk-option.selected,
.bgpt-card.selected,
.bgpt-bk-service-card.selected,
.bgpt-bk-service-option.selected {
    border-color: var(--c-link, #0066cc) !important;
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}
.bgpt-bk-option.selected *,
.bgpt-card.selected *,
.bgpt-bk-service-card.selected *,
.bgpt-bk-service-option.selected * { color: #fff !important; }

/* ============================================================
 * Zeit-Slot-Pills (Werkstatt-Werkstatttermin-Auswahl)
 * ============================================================ */
.bgpt-bk-slot,
.bgpt-time-slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-pill, 980px) !important;
    padding: 10px 14px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    min-height: 40px !important;
    transition: all 120ms ease !important;
}
.bgpt-bk-slot:hover:not(.disabled),
.bgpt-time-slot:hover:not(.disabled) { border-color: var(--c-text) !important; }
.bgpt-bk-slot.selected,
.bgpt-bk-slot.active,
.bgpt-time-slot.selected,
.bgpt-time-slot.active {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-bk-slot.disabled,
.bgpt-time-slot.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* ============================================================
 * Werkstatt-Kalender (.bgpt-cal-day in tools/booking/embed.blade.php)
 * Spiegel der Beratung-Kalender-Optik — selected = blau, today = blauer
 * Border, freie Tage neutral, voll/gesperrt rot/grau.
 * ============================================================ */
.bgpt-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
}
.bgpt-cal-day {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    transition: border-color 100ms ease, background 100ms ease !important;
}
.bgpt-cal-day:hover:not(.disabled) { border-color: var(--c-text) !important; background: var(--c-bg, #fff) !important; }
.bgpt-cal-day.today { border-color: var(--c-link, #0066cc) !important; }
.bgpt-cal-day.selected,
.bgpt-cal-day.active {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
    font-weight: 600 !important;
}
.bgpt-cal-day.selected .bgpt-bk-cap,
.bgpt-cal-day.selected .bgpt-bk-cal-cap { color: rgba(255,255,255,0.9) !important; }
.bgpt-cal-day.disabled,
.bgpt-cal-day.other-month {
    color: var(--c-muted) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: transparent !important;
}
.bgpt-cal-day.disabled.full,
.bgpt-cal-day.disabled.holiday { color: #b91c1c !important; opacity: 1 !important; }
.bgpt-cal-day .bgpt-bk-cap,
.bgpt-cal-day .bgpt-bk-cal-cap {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    color: var(--c-muted) !important;
}

/* ============================================================
 * Error + Success Boxen
 * Hinweis: .bgpt-confirmation ist NICHT diese Klasse — das ist der ganze
 * Confirmation-Screen-Container (siehe weiter unten). Hier nur kleine
 * Inline-Hinweise.
 * ============================================================ */
.bgpt-error,
.bgpt-error-box {
    background: color-mix(in srgb, #dc2626 8%, var(--c-bg, #fff)) !important;
    color: #991b1b !important;
    border: 1px solid color-mix(in srgb, #dc2626 22%, transparent) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    margin: 12px 0 !important;
}
.bgpt-success {
    background: color-mix(in srgb, #16a34a 8%, var(--c-bg, #fff)) !important;
    color: #15803d !important;
    border: 1px solid color-mix(in srgb, #16a34a 22%, transparent) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
}

/* ============================================================
 * Confirmation-Screen (Termin gebucht)
 * Bernds Vorgabe: nicht alles in einem grossen gruenen Card. Spiegel
 * der Beratungs-Optik: kleine gruene Success-Box mit Icon + Headline
 * oben, dann Daten als neutrale Liste darunter.
 * ============================================================ */
.bgpt-confirmation {
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--c-text) !important;
    margin: 0 !important;
}
.bgpt-confirmation .bgpt-title {
    color: var(--c-text) !important;
    margin-top: 8px !important;
}
.bgpt-confirmation .bgpt-subtitle {
    color: var(--c-muted) !important;
    margin-bottom: 24px !important;
}
.bgpt-confirmation-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, #16a34a 12%, var(--c-bg, #fff)) !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* Summary-Sections (Kontaktdaten / Fahrrad / Service & Kosten / Termin) */
.bgpt-bk-summary {
    text-align: left !important;
    margin: 24px 0 !important;
    color: var(--c-text) !important;
}
.bgpt-bk-summary-section {
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--c-line, #d2d2d7) !important;
    color: var(--c-text) !important;
    background: transparent !important;
}
.bgpt-bk-summary-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.bgpt-bk-summary-title {
    color: var(--c-text) !important;
    text-transform: none !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
}
.bgpt-bk-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    color: var(--c-text) !important;
    border-bottom: none !important;       /* original hat surface-line, wir lassen sauber */
}
.bgpt-bk-summary-row > :first-child { color: var(--c-muted) !important; }
.bgpt-bk-summary-row > :last-child { font-weight: 500 !important; text-align: right !important; }
.bgpt-bk-summary-total {
    background: var(--c-bg-alt, #f5f5f7) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-top: 16px !important;
    color: var(--c-text) !important;
    font-weight: 400 !important;     /* normal Default — nur h4 ist bold */
}
.bgpt-bk-summary-total h4 {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.bgpt-bk-cost-approval-detail,
.bgpt-bk-dialog-hint,
.bgpt-bk-dialog-hint--summary {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--c-muted) !important;
    margin-top: 10px !important;
    line-height: 1.5 !important;
}
.bgpt-bk-cost-approval-detail strong,
.bgpt-bk-dialog-hint strong {
    color: var(--c-text) !important;
    font-weight: 600 !important;
}

/* Inline-Cards waehrend des Booking-Flows */
.bgpt-bk-price-card,
.bgpt-bk-price-confirm,
.bgpt-bk-good-to-know {
    background: var(--c-bg-alt, #f5f5f7) !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 16px 18px !important;
    margin: 16px 0 !important;
    color: var(--c-text) !important;
}
.bgpt-bk-good-to-know-title {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--c-text) !important;
    margin-bottom: 8px !important;
}
.bgpt-bk-good-to-know-item {
    font-size: 13px !important;
    color: var(--c-text) !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}
.bgpt-bk-good-to-know-item:last-child { margin-bottom: 0 !important; }

.bgpt-bk-cost-hint {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    margin: 8px 0 16px !important;
    text-align: left !important;
}
.bgpt-bk-early-notify {
    text-align: center !important;
    margin-top: 16px !important;
}

/* Service-Confirm-Box (z.B. "Standardannahme"-Checkmark-Card) — subtle */
.bgpt-bk-service-confirm-box {
    background: color-mix(in srgb, #16a34a 6%, var(--c-bg, #fff)) !important;
    border: 1px solid color-mix(in srgb, #16a34a 18%, transparent) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 14px 16px !important;
    margin: 12px 0 !important;
    color: var(--c-text) !important;
}
.bgpt-bk-service-confirm-icon {
    color: #16a34a !important;
    flex: 0 0 24px !important;
}
.bgpt-bk-service-confirm-text { color: var(--c-text) !important; }

/* "Weiteren Termin buchen" Button — soll mittig + nicht-volle-Breite */
.bgpt-bk-new-booking-wrap {
    text-align: center !important;
    margin: 24px 0 16px !important;
}
.bgpt-btn--centered {
    flex: 0 0 auto !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}

/* ============================================================
 * Bike-Cards (Dashboard "Willkommen zurueck" — Rad-Auswahl)
 * Bernds Vorgabe: Pills (E-Bike/Intern) unter dem Namen sauber, nicht
 * inline. Selected-Color = Erfahre-Blau (bereits oben).
 * ============================================================ */
.bgpt-bk-bikes-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 16px 0 !important;
}
.bgpt-bk-bike-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 16px 18px !important;
    background: var(--c-bg, #fff) !important;
    cursor: pointer !important;
    color: var(--c-text) !important;
    transition: border-color 120ms ease, background 120ms ease !important;
}
.bgpt-bk-bike-card:hover {
    border-color: var(--c-link, #0066cc) !important;
    background: color-mix(in srgb, var(--c-link, #0066cc) 4%, var(--c-bg, #fff)) !important;
}
.bgpt-bk-bike-card.selected {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-bk-bike-card.selected .bgpt-card-label,
.bgpt-bk-bike-card.selected .bgpt-card-sub { color: #fff !important; }
.bgpt-bk-bike-card.selected .bgpt-bk-badge {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* "+ Neues Fahrrad"-Card — dashed border */
.bgpt-bk-bike-card.bgpt-bk-add-bike {
    border-style: dashed !important;
    align-items: center !important;
    text-align: center !important;
    color: var(--c-muted) !important;
    min-height: 120px !important;
    justify-content: center !important;
}
.bgpt-bk-bike-card.bgpt-bk-add-bike .bgpt-card-icon {
    font-size: 28px !important;
    color: var(--c-muted) !important;
}

/* Header-Row: Bike-Name + Edit-Icon */
.bgpt-bk-bike-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.bgpt-bk-bike-card .bgpt-card-label {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--c-text) !important;
    line-height: 1.3 !important;
    flex: 1 !important;
}
.bgpt-bk-bike-card .bgpt-card-sub {
    font-size: 13px !important;
    color: var(--c-muted) !important;
    margin: 0 !important;
}

/* Pill-Badges UNTER dem Namen (E-Bike / Intern) */
.bgpt-bk-bike-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
}
.bgpt-bk-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill, 980px) !important;
    background: var(--c-bg-alt, #f5f5f7) !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    color: var(--c-muted) !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
}
.bgpt-bk-badge-green {
    background: color-mix(in srgb, #16a34a 12%, var(--c-bg, #fff)) !important;
    color: #15803d !important;
    border-color: color-mix(in srgb, #16a34a 25%, transparent) !important;
}

/* Edit-Gear-Icon (rechts in der Header-Row) — Bernds Hinweis "klemmt"
   = war zu dezent (opacity 0.4). Jetzt klar sichtbar + grossere Click-Area. */
.bgpt-icon-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    color: var(--c-muted) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease !important;
}
.bgpt-icon-btn:hover {
    border-color: var(--c-text) !important;
    color: var(--c-text) !important;
    background: var(--c-bg, #fff) !important;
}
.bgpt-bk-bike-card.selected .bgpt-icon-btn {
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.4) !important;
}
.bgpt-bk-bike-card.selected .bgpt-icon-btn:hover {
    color: #fff !important;
    border-color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
}
.bgpt-icon-btn svg { width: 18px !important; height: 18px !important; }

/* ============================================================
 * Vehicle-Edit-Modal: Radiobuttons, Datepicker, Checkboxen
 * Bernds Hinweis: "brechen seitlich aus", "viel zu gross", "nicht inline"
 * ============================================================ */
.bgpt-widget input[type="date"] {
    max-width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 44px !important;
}
.bgpt-widget input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--c-link, #0066cc) !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
}
/* ============================================================
 * Checkbox-Groups (AGB, Datenschutz, Radio-Pair)
 * Bernds Wunsch: Checkbox und Radio-Button sauber inline mit Text.
 * ============================================================ */
.bgpt-checkbox-group,
.bgpt-check-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;     /* Box + Text vertikal mittig */
    gap: 10px !important;
    background: var(--c-bg-alt, #f5f5f7) !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    margin-bottom: 8px !important;
}
.bgpt-check-group input[type="checkbox"],
.bgpt-check-group input[type="radio"],
.bgpt-checkbox-group input[type="checkbox"],
.bgpt-checkbox-group input[type="radio"] {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--c-link, #0066cc) !important;
}
.bgpt-check-label,
.bgpt-checkbox-label {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--c-text) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex: 1 !important;
}

/* ============================================================
 * Werkstatt-Service-Cards UNTEREINANDER (Bernd: nicht 2-spaltig).
 * Greift nur Werkstatt-Service-Auswahl (#bgpt-bk-services), Beratung
 * (.bgpt-grid generic) bleibt 2-spaltig.
 * ============================================================ */
#bgpt-bk-services {
    grid-template-columns: 1fr !important;
}
.bgpt-widget input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--c-link, #0066cc) !important;
}

@media print {
    .bgpt-widget { color: #000 !important; }
}
/* ============================================================
 * Modal-Zentrierung & Stabilitaet (Hotfix 16.05.2026)
 * Bernd-Feedback: "Fenster muss zentriert bleiben. Das springt sehr viel."
 *
 * Ursache: Booking-Embed-Modal nutzt position:fixed, aber im Embed-Standalone-
 * Layout. Wenn der Parent-Container (ap-buchen-embed-host) eine
 * transform/filter/will-change-Property haette, wuerde position:fixed dem
 * Parent folgen (W3C-Spec) statt Viewport. Daher Pin-Reset und explizite
 * Centering-Werte direkt am Modal.
 * ============================================================ */

.bgpt-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    align-items: center !important;    /* vertikal zentriert (war flex-start) */
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 24px !important;
    overflow-y: auto !important;
    /* Body-Scroll lock fuer iOS */
    -webkit-overflow-scrolling: touch !important;
}

.bgpt-modal-overlay.hidden {
    display: none !important;
}

.bgpt-modal {
    background: var(--c-bg, #fff) !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    max-width: 520px !important;
    width: 100% !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important;
    margin: 0 auto !important;             /* horizontal centering wenn flex versagt */
    /* Anti-Jump: kein Transform-Wechsel auf Hover oder Click */
    transform: none !important;
}

@media (min-width: 768px) {
    .bgpt-modal { padding: 36px 32px !important; }
}

.bgpt-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: 0.55 !important;
    background: transparent !important;
    border: none !important;
    color: var(--c-text) !important;
    padding: 4px 8px !important;
    border-radius: 50% !important;
}
.bgpt-modal-close:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.05) !important; }

.bgpt-modal-title {
    font-family: var(--font-display, 'DM Serif Display', serif) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: var(--c-text) !important;
    margin: 0 0 16px 0 !important;
    padding-right: 32px !important;     /* Raum fuer Close-Button */
}

/* Wenn Modal offen ist: Body-Scroll lock vermeiden dass Erfahre-Page
   und Modal gleichzeitig scrollen (sonst Jump-Effekt). */
body:has(.bgpt-modal-overlay:not(.hidden)) {
    overflow: hidden !important;
}

/* ============================================================
 * Beratung-Widget .cb-* Overrides (consultation/embed.blade.php)
 *
 * Spiegelt den Erfahre-Stil aus public/css/web/web.css (ef-btn, ef-link,
 * ap-service, theme tokens) ins Consultation-Embed. Buttons sind blau
 * (var(--c-link) = Erfahre-Accent), Cards rechteckig 18px Radius (--radius-card),
 * Pill-Buttons (--radius-pill = 980px), Inter 17px für Buttons, DM Serif für Titel.
 *
 * Actual class names from public/js/consultation/embed.js + embed.blade.php:
 *  Widget:    .bgpt-widget, .bgpt-logo, .bgpt-container
 *  Title:     .bgpt-title, .bgpt-subtitle, .bgpt-section-title
 *  Progress:  .bgpt-progress, .bgpt-progress-step (+ .filled = active)
 *  Steps:     .bgpt-step (+ .active = visible)
 *  Cards:     .bgpt-grid, .bgpt-card (+ .selected), .bgpt-card-label, .bgpt-card-desc
 *  Buttons:   .bgpt-btn (+ .bgpt-btn-primary | .bgpt-btn-secondary | .bgpt-btn-danger)
 *  Form:      .bgpt-form, .bgpt-form-group, .bgpt-input, .bgpt-label, .bgpt-optional
 *  Calendar:  .bgpt-calendar, .bgpt-cal-header, .bgpt-cal-month, .bgpt-cal-nav,
 *             .bgpt-cal-grid, .bgpt-cal-weekdays, .bgpt-cal-day (+ .selected/.today/.disabled),
 *             .bgpt-cal-hint (+ --low/--ok)
 *  Time:      .bgpt-time-section, .bgpt-time-slots, .bgpt-time-slot (+ .selected/.disabled), .bgpt-slots-hint
 *  Loading:   .bgpt-loading, .bgpt-spinner
 *  Confirm:   .bgpt-confirmation, .bgpt-success-box, .bgpt-success-icon, .bgpt-conf-row, .bgpt-conf-label, .bgpt-conf-value, .bgpt-conf-actions, .bgpt-conf-email-hint
 *  Privacy:   .bgpt-datenschutz-section, .bgpt-datenschutz-check-row, .bgpt-datenschutz-checkbox, .bgpt-datenschutz-label
 *  Toast:     .bgpt-toast
 * ============================================================ */

/* WICHTIG: Hide-Helper hat hoechste Spezifitaet damit unsere display:flex
   !important Rules .d-none nicht ueberbiegen ("Termine werden geladen..."
   blieb sichtbar weil .bgpt-loading display:flex !important > .d-none gewann). */
.bgpt-widget .d-none,
.bgpt-widget [hidden] { display: none !important; }

/* Auswahl-aendern-Backlink (Hero im embed-wrapper.blade.php) hat schon ein
   fuehrendes '<' im Markup — der globale .ef-link::after-Pfeil ist hier
   doppelt. Wir suppressen das trailing › nur in diesem Kontext. */
.ap-buchen-back .ef-link::after { content: none !important; }

/* Container — kein eigener Hintergrund, faellt in Erfahre-Host-Card */
.bgpt-widget {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--c-text);
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    max-width: none !important;
    padding: 0 !important;
}

.bgpt-logo { display: none !important; }

.bgpt-container {
    max-width: none !important;
    padding: 0 !important;
}

/* Typografie */
.bgpt-title {
    font-family: var(--font-display, 'DM Serif Display', serif) !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;        /* DM Serif ist eh fett genug */
    letter-spacing: -0.02em !important;
    color: var(--c-text) !important;
    text-align: center !important;
    margin: 0 0 8px !important;
}
.bgpt-subtitle {
    color: var(--c-muted) !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto 28px !important;
    max-width: 520px !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
}
.bgpt-section-title {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--c-text) !important;
    margin: 24px 0 12px !important;
    text-align: left !important;
}

/* ----- Progress-Bar mit Erfahre-Akzentfarbe ----- */
.bgpt-progress {
    display: flex !important;
    gap: 6px !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: 480px !important;
}
.bgpt-progress-step {
    flex: 1 !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    background: var(--c-line, #e5e5e7) !important;
    border-radius: 2px !important;
    transition: background 0.3s !important;
}
.bgpt-progress-step.filled {
    background: var(--c-link, #0066cc) !important;
}

/* ----- Form-Inputs (Erfahre-clean, kein massives Padding) ----- */
.bgpt-input,
.bgpt-widget input[type="text"],
.bgpt-widget input[type="email"],
.bgpt-widget input[type="tel"],
.bgpt-widget input[type="number"],
.bgpt-widget input[type="date"],
.bgpt-widget input[type="search"],
.bgpt-widget select,
.bgpt-widget textarea {
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font: inherit !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.bgpt-input:focus,
.bgpt-widget input:focus,
.bgpt-widget select:focus,
.bgpt-widget textarea:focus {
    outline: none !important;
    border-color: var(--c-link, #0066cc) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-link, #0066cc) 18%, transparent) !important;
}

.bgpt-form-group { margin-bottom: 16px !important; }
.bgpt-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--c-text) !important;
}
.bgpt-optional {
    color: var(--c-muted) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    margin-left: 4px !important;
}

/* ============================================================
 * Buttons — exakt wie .ef-btn aus public/css/web/web.css
 * WICHTIG: NUR .bgpt-btn-* explizit targeten, NICHT alle Buttons im Widget,
 * sonst werden Calendar-Nav-Pfeile + Close-Buttons + Step-Indikatoren
 * faelschlicherweise wie Primary-Buttons gerendert.
 * ============================================================ */
.bgpt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;            /* original .bgpt-btn hatte flex:1 = streckt */
    gap: 6px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border-radius: var(--radius-pill, 980px) !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.022em !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s, transform 0.08s !important;
    white-space: nowrap !important;
}
.bgpt-btn:active { transform: scale(0.98) !important; }
.bgpt-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Primary = Erfahre-Akzent (blau) — "Weiter", "Termin buchen" */
.bgpt-btn-primary {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-link, #0066cc) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--c-link, #0066cc) 88%, #000) !important;
}

/* Secondary = transparent + blauer Border — "Zurueck" */
.bgpt-btn-secondary {
    background: transparent !important;
    color: var(--c-link, #0066cc) !important;
    border: 1px solid var(--c-link, #0066cc) !important;
}
.bgpt-btn-secondary:hover:not(:disabled) {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}

/* Danger = rot fuer Cancel-Aktionen (selten genutzt) */
.bgpt-btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.bgpt-btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Step-Navigation-Row (Zurueck + Weiter) am unteren Rand des Widgets.
   Bernd-Wunsch: Buttons sollen volle Breite nutzen, je 50% nebeneinander. */
.bgpt-nav {
    display: flex !important;
    gap: 12px !important;
    margin: 28px 0 16px !important;
    padding: 0 !important;
    width: 100% !important;
}
.bgpt-nav .bgpt-btn { flex: 1 1 0 !important; min-width: 0 !important; }

/* Confirmation-Actions (auf der Erfolgsseite) bleiben flex aber mit
   Auto-Sizing — typischerweise nur ein Button. */
.bgpt-conf-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
    justify-content: center !important;
}
.bgpt-conf-actions .bgpt-btn { margin-bottom: 0 !important; }

/* ============================================================
 * Service-Cards (Step 1: Welche Beratung)
 * Erfahre-Look: einheitliche Hoehe, 18px Radius, klare Selection
 * ============================================================ */
.bgpt-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
}
.bgpt-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 96px !important;          /* einheitliche Hoehe alle Cards */
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 18px 14px !important;
    background: var(--c-bg, #fff) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: border-color 120ms ease, background 120ms ease !important;
}
.bgpt-card:hover {
    border-color: var(--c-link, #0066cc) !important;
    background: color-mix(in srgb, var(--c-link, #0066cc) 4%, var(--c-bg, #fff)) !important;
}
.bgpt-card.selected {
    border-color: var(--c-link, #0066cc) !important;
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}
.bgpt-card.selected .bgpt-card-label,
.bgpt-card.selected .bgpt-card-desc { color: #fff !important; }
.bgpt-card.selected .bgpt-card-icon svg { stroke: #fff !important; }

.bgpt-card-icon { width: 32px !important; height: 32px !important; margin-bottom: 8px !important; }
.bgpt-card-icon svg { width: 100% !important; height: 100% !important; stroke: var(--c-text) !important; }
.bgpt-card-label {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--c-text) !important;
    line-height: 1.25 !important;
}
.bgpt-card-desc {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    line-height: 1.35 !important;
}

/* ============================================================
 * Kalender (Step 2: Wann passt es)
 * ============================================================ */
.bgpt-calendar { margin: 0 0 20px !important; }
.bgpt-cal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
}
.bgpt-cal-month {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: var(--c-text) !important;
    text-align: center !important;
    flex: 1 !important;
}

/* Cal-Nav: kleine subtile Circle-Buttons mit sichtbarem Pfeil (NICHT primary!) */
.bgpt-cal-nav {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    background: var(--c-bg-alt, #f5f5f7) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 0 0 36px !important;
    font: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
}
.bgpt-cal-nav:hover {
    background: var(--c-bg, #fff) !important;
    border-color: var(--c-text) !important;
}
.bgpt-cal-nav:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
.bgpt-cal-nav svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.bgpt-cal-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    color: var(--c-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
}
.bgpt-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
}

/* Calendar-Day: subtile Squares, selected = blue */
.bgpt-cal-day {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    transition: border-color 100ms ease, background 100ms ease !important;
}
.bgpt-cal-day:hover:not(.disabled):not(.empty) { border-color: var(--c-text) !important; }
.bgpt-cal-day.today {
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-cal-day.selected {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-cal-day.selected .bgpt-cal-hint { color: rgba(255,255,255,0.9) !important; }
.bgpt-cal-day.disabled,
.bgpt-cal-day.empty {
    color: var(--c-muted) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

.bgpt-cal-hint {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    line-height: 1 !important;
}
.bgpt-cal-hint--low { color: #c2410c !important; }
.bgpt-cal-hint--ok  { color: #15803d !important; }

/* ============================================================
 * Zeit-Slots (Step 2: nach Datum-Wahl)
 * ============================================================ */
.bgpt-time-section { margin-top: 18px !important; }
.bgpt-slots-hint {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    margin: 0 0 8px !important;
}
.bgpt-time-slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
    gap: 8px !important;
}
.bgpt-time-slot {
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-pill, 980px) !important;
    padding: 10px 12px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    min-height: 40px !important;
}
.bgpt-time-slot:hover:not(.disabled) { border-color: var(--c-text) !important; }
.bgpt-time-slot.selected {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}
.bgpt-time-slot.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}

/* ============================================================
 * Loading + Spinner
 * ============================================================ */
.bgpt-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: var(--c-muted) !important;
    padding: 16px !important;
    font-size: 15px !important;
}
.bgpt-spinner {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid color-mix(in srgb, var(--c-link, #0066cc) 25%, transparent) !important;
    border-top-color: var(--c-link, #0066cc) !important;
    border-radius: 50% !important;
    animation: cb-spin 800ms linear infinite !important;
    flex: 0 0 18px !important;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * Datenschutz-Checkbox
 * ============================================================ */
.bgpt-datenschutz-section { margin: 18px 0 !important; }
.bgpt-datenschutz-check-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    background: var(--c-bg-alt, #f5f5f7) !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
}
.bgpt-datenschutz-checkbox {
    margin-top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--c-link, #0066cc) !important;
    flex: 0 0 18px !important;
}
.bgpt-datenschutz-label {
    color: var(--c-text) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.bgpt-datenschutz-label a { color: var(--c-link, #0066cc) !important; }

/* ============================================================
 * Confirmation-Step (Step 5)
 * ============================================================ */
.bgpt-confirmation { text-align: left !important; }
.bgpt-success-box {
    text-align: center !important;
    background: color-mix(in srgb, #16a34a 8%, var(--c-bg, #fff)) !important;
    border: 1px solid color-mix(in srgb, #16a34a 22%, transparent) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 28px 20px !important;
    margin: 0 0 20px !important;
}
.bgpt-success-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
}
.bgpt-success-icon svg {
    width: 100% !important;
    height: 100% !important;
    stroke: #16a34a !important;
}
.bgpt-conf-row {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--c-line, #d2d2d7) !important;
    align-items: baseline !important;
}
.bgpt-conf-row:last-of-type { border-bottom: none !important; }
.bgpt-conf-label {
    color: var(--c-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.bgpt-conf-value {
    color: var(--c-text) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}
.bgpt-conf-email-hint {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
    margin: 16px 0 !important;
    line-height: 1.5 !important;
}

/* ============================================================
 * Toast (eingebauter Embed-Toast fuer Fehlermeldungen)
 * ============================================================ */
.bgpt-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--c-text) !important;
    color: var(--c-bg, #fff) !important;
    padding: 12px 22px !important;
    border-radius: var(--radius-pill, 980px) !important;
    z-index: 10000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

@media print {
    .bgpt-widget { color: #000 !important; }
}

/* ============================================================
 * Body-Reset-Schutz: das original consultation-embed.css setzt am
 * Stylesheet-Anfang `body { background: var(--cb-bg); font-family: var(--cb-font); }`
 * — das wuerde die Erfahre-Seite auf weiss + Montserrat zwingen. Wir
 * korrigieren das hier zurueck.
 * ============================================================ */
body {
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
}

/* ============================================================
 * Telefon-Embed-spezifische .tel-* Klassen
 *
 * Telefon-Embed nutzt zu 95% .cb-* (wie Beratung), aber hat zusaetzliche
 * .tel-* Klassen fuer die Choice-Cards "Möchtest du Anruf oder Termin?"
 * etc. — die kriegen den gleichen Erfahre-Look wie .bgpt-card.
 * ============================================================ */

/* Bernd v2.32.242: Telefon-Choice-Cards kompakter ohne Icons.
   Stil identisch zur /buchen-Auswahl-Page (ap-service-Card), aber 3 Cards
   passen auf einen Screen damit der User nicht scrollen muss. */
.tel-choices {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 16px 0 !important;
}

.tel-choice-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-card, 18px) !important;
    padding: 18px 20px !important;
    background: var(--c-bg, #fff) !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: border-color 120ms ease, background 120ms ease !important;
}
.tel-choice-card:hover {
    border-color: var(--c-link, #0066cc) !important;
    background: color-mix(in srgb, var(--c-link, #0066cc) 4%, var(--c-bg, #fff)) !important;
}
.tel-choice-card.selected,
.tel-choice-card:active {
    border-color: var(--c-link, #0066cc) !important;
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
}
.tel-choice-card.selected *,
.tel-choice-card:active * { color: #fff !important; }

/* Icons sind aktuell aus Markup raus (v2.32.242). Falls jemand sie wieder
   reinpackt: minimal-Width damit Layout nicht bricht. */
.tel-choice-icon { display: none !important; }

.tel-choice-label {
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: var(--c-text) !important;
    line-height: 1.2 !important;
}
.tel-choice-desc {
    color: var(--c-muted) !important;
    font-size: 14px !important;
    margin-top: 0 !important;
    line-height: 1.4 !important;
}

/* Quick-Chip Pills (z.B. "Heute Vormittag", "Morgen", "Spaeter") */
.tel-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}
.tel-chip {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: var(--radius-pill, 980px) !important;
    padding: 8px 14px !important;
    background: var(--c-bg, #fff) !important;
    color: var(--c-text) !important;
    cursor: pointer !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.tel-chip:hover { border-color: var(--c-text) !important; }
.tel-chip.selected,
.tel-chip.active {
    background: var(--c-link, #0066cc) !important;
    color: #fff !important;
    border-color: var(--c-link, #0066cc) !important;
}

/* Greeting + Char-Count im Textarea-Footer */
.tel-greeting {
    color: var(--c-muted) !important;
    font-size: 14px !important;
    margin: 0 0 8px !important;
}
.tel-char-count {
    color: var(--c-muted) !important;
    font-size: 12px !important;
    text-align: right !important;
    margin-top: 4px !important;
}

/* ============================================================
 * Werkstatt-UX v2: Optional-Accordion
 * Genutzt fuer "Optionale Angaben zu Leasing & Versicherung" (Step 5)
 * und "Fotos oder Hinweise hinzufuegen" (Step 7).
 *
 * Bernds-Vorgabe: Default eingeklappt, dezenter Toggle-Look, kein
 * massives Card-Background damit weniger Lese-Druck.
 * ============================================================ */
.bgpt-bk-optional-details {
    margin: 16px 0 !important;
    border: 1px solid var(--c-line, #d2d2d7) !important;
    border-radius: 12px !important;
    background: var(--c-bg, #fff) !important;
    overflow: hidden !important;
}
.bgpt-bk-optional-details[open] {
    background: var(--c-bg-alt, #f5f5f7) !important;
}
.bgpt-bk-optional-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
    font-family: var(--font-text, 'Inter', sans-serif) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--c-text) !important;
    user-select: none !important;
    list-style: none !important;
}
.bgpt-bk-optional-summary::-webkit-details-marker { display: none !important; }
.bgpt-bk-optional-summary::marker { content: '' !important; }
.bgpt-bk-optional-summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    color: var(--c-muted, #888);
    line-height: 1;
    transition: transform 200ms ease;
}
.bgpt-bk-optional-details[open] .bgpt-bk-optional-summary::after {
    content: '−';
}
.bgpt-bk-optional-body {
    padding: 4px 18px 18px !important;
}

/* Werkstatt-UX v2: "Gut zu wissen" als saubere Stichpunkt-Liste */
.bgpt-bk-good-to-know-list {
    list-style: disc !important;
    padding-left: 22px !important;
    margin: 8px 0 0 !important;
}
.bgpt-bk-good-to-know-list li {
    color: var(--c-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}
.bgpt-bk-good-to-know-list li:last-child { margin-bottom: 0 !important; }

/* ============================================================
 * Hidden-Helper Universal-Override
 * .hidden ist Werkstatt-Standard (display:none) — muss IMMER greifen
 * auch wenn eine spaetere Rule display:flex/grid setzt. Sonst:
 * Doppel-Buttons sichtbar weil hidden-class kein Effekt hat.
 * ============================================================ */
.bgpt-embed .hidden,
.bgpt-embed [hidden] { display: none !important; }

/* ============================================================
 * Daypicker-Width-Fix (Bernds-Bug-Report v2.32.252)
 * Calendar-Grid lief seitlich raus weil container kein max-width
 * hatte und die Werkstatt-Inline-Day-Cells keine min-width Constraints.
 * ============================================================ */
.bgpt-embed .bgpt-calendar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.bgpt-embed .bgpt-cal-grid {
    width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.bgpt-embed .bgpt-cal-day {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}