/*
 * onOffice Terminbuchung — Buchungs-Widget („Blatt"-Design).
 * Alle Farben/Schrift/Radien kommen als CSS-Custom-Properties vom Wrapper
 * (includes/Frontend.php::design_tokens). Hier keine fest verdrahteten Farben.
 *
 * Größensystem: ALLE Schriftgrößen, Feld-/Zellenhöhen und Abstände sind Vielfache
 * der Basisgröße --ootb-fs. Ändert man die Grundschriftgröße in den Einstellungen,
 * zoomt das gesamte Widget proportional mit. Desktop/Mobil getrennt einstellbar.
 */

.ootb-booking {
    /* Basisgröße (Desktop). Mobil-Override siehe Media-Query unten. */
    --ootb-fs: var(--ootb-font-size, 17px);

    /* Schriftgrößen-Skala (relativ zur Basis) */
    --ootb-fs-title:   calc(var(--ootb-fs) * 1.9);
    --ootb-fs-result:  calc(var(--ootb-fs) * 1.6);
    --ootb-fs-h3:      calc(var(--ootb-fs) * 1.35);
    --ootb-fs-month:   calc(var(--ootb-fs) * 1.15);
    --ootb-fs-cardttl: calc(var(--ootb-fs) * 1.1);
    --ootb-fs-lead:    calc(var(--ootb-fs) * 1.02);
    --ootb-fs-body:    var(--ootb-fs);
    --ootb-fs-num:     calc(var(--ootb-fs) * 0.98);
    --ootb-fs-sm:      calc(var(--ootb-fs) * 0.9);
    --ootb-fs-meta:    calc(var(--ootb-fs) * 0.85);
    --ootb-fs-label:   calc(var(--ootb-fs) * 0.8);
    --ootb-fs-kicker:  calc(var(--ootb-fs) * 0.76);

    /* Steuerhöhen & Maße */
    --ootb-control-h: calc(var(--ootb-fs) * 2.55);
    --ootb-day-h:     calc(var(--ootb-fs) * 2.7);
    --ootb-icon-btn:  calc(var(--ootb-fs) * 2.5);
    --ootb-check:     calc(var(--ootb-fs) * 1.25);
    --ootb-result-ic: calc(var(--ootb-fs) * 2.9);

    /* Abstände (skalieren mit) */
    --ootb-pad:      calc(var(--ootb-fs) * 1.75);
    --ootb-gap-lg:   calc(var(--ootb-fs) * 1.5);
    --ootb-gap-md:   calc(var(--ootb-fs) * 1.1);
    --ootb-gap-sm:   calc(var(--ootb-fs) * 0.85);

    /* Abgeleitete Farbtokens (nur aus konfigurierbaren Basiswerten). */
    --ootb-primary-hover:  color-mix(in srgb, var(--ootb-primary) 88%, #000);
    --ootb-primary-active: color-mix(in srgb, var(--ootb-primary) 76%, #000);
    --ootb-primary-soft:   color-mix(in srgb, var(--ootb-primary) 10%, transparent);
    --ootb-primary-tint:   color-mix(in srgb, var(--ootb-primary) 6%, transparent);
    --ootb-text-faint:     color-mix(in srgb, var(--ootb-text) 40%, var(--ootb-bg));
    --ootb-danger-text:    color-mix(in srgb, var(--ootb-danger) 68%, #000);
    --ootb-danger-soft:    color-mix(in srgb, var(--ootb-danger) 8%, var(--ootb-surface));
    --ootb-skeleton:       color-mix(in srgb, var(--ootb-text) 12%, var(--ootb-bg));
    --ootb-hover-neutral:  color-mix(in srgb, var(--ootb-text) 7%, transparent);

    /* Farb-Fallbacks (defensiv). */
    --ootb-primary:    var(--ootb-primary, #5980a6);
    --ootb-on-primary: var(--ootb-on-primary, #ffffff);
    --ootb-text:       var(--ootb-text, #1d1f20);
    --ootb-text-muted: var(--ootb-text-muted, #5d5d60);
    --ootb-bg:         var(--ootb-bg, #ffffff);
    --ootb-surface:    var(--ootb-surface, #f5f5f8);
    --ootb-border:     var(--ootb-border, #d4d4d7);
    --ootb-danger:     var(--ootb-danger, #a4666b);
    --ootb-radius:     var(--ootb-radius, 0px);

    color: var(--ootb-text);
    background: transparent;
    font-family: var(--ootb-font, inherit);
    font-size: var(--ootb-fs);
    line-height: 1.55;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    /* Das Widget füllt immer die volle Breite seines Containers. */
    width: 100%;
    max-width: 100%;
}

/* Mobile Basisgröße (Fallback: Desktop-Wert, sonst 16px). */
@media (max-width: 768px) {
    .ootb-booking {
        --ootb-fs: var(--ootb-font-size-mobile, var(--ootb-font-size, 16px));
    }
}

.ootb-booking *,
.ootb-booking *::before,
.ootb-booking *::after { box-sizing: border-box; }

/* Schrift überall erben lassen — Formularelemente erben sonst nicht. */
.ootb-booking input,
.ootb-booking select,
.ootb-booking textarea,
.ootb-booking button {
    font-family: var(--ootb-font, inherit);
}

.ootb-booking [hidden] { display: none !important; }

.ootb-booking a { color: var(--ootb-primary); text-underline-offset: 3px; }
.ootb-booking a:hover { color: var(--ootb-primary-active); }

.ootb-booking :focus-visible {
    outline: 2px solid var(--ootb-primary);
    outline-offset: 2px;
}

/* — Grundgerüst — */
.ootb-frame {
    border: 1px solid var(--ootb-border);
    background: var(--ootb-bg);
    padding: var(--ootb-pad);
    display: flex;
    flex-direction: column;
    gap: var(--ootb-gap-lg);
}

.ootb-loading {
    padding: var(--ootb-pad);
    color: var(--ootb-text-muted);
    font-size: var(--ootb-fs-body);
}

/* — Kopf — */
.ootb-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ootb-gap-md);
    flex-wrap: wrap;
}
.ootb-kicker {
    font-size: var(--ootb-fs-kicker);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ootb-primary);
}
.ootb-title {
    font-size: var(--ootb-fs-title);
    line-height: 1.1;
    letter-spacing: -.01em;
    font-weight: 600;
    margin: 4px 0 0;
    color: var(--ootb-text);
}
.ootb-note {
    font-size: var(--ootb-fs-meta);
    color: var(--ootb-text-muted);
    text-align: right;
    max-width: 42ch;
}

/* — Schritt-Ticker — */
.ootb-ticker {
    display: flex;
    align-items: center;
    gap: calc(var(--ootb-fs) * 2.2);
    flex-wrap: wrap;
    padding-bottom: var(--ootb-gap-md);
    border-bottom: 1px solid var(--ootb-border);
}
.ootb-step { display: flex; align-items: center; gap: calc(var(--ootb-fs) * 0.55); }
.ootb-step__num {
    width: calc(var(--ootb-fs) * 1.65); height: calc(var(--ootb-fs) * 1.65);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ootb-fs-label); letter-spacing: .04em; font-weight: 600;
    border: 1px solid var(--ootb-border);
    background: transparent;
    color: var(--ootb-text-muted);
    border-radius: var(--ootb-radius);
}
.ootb-step__label {
    font-weight: 600; font-size: var(--ootb-fs-sm); letter-spacing: .01em;
    color: var(--ootb-text-muted);
}
.ootb-step.is-active .ootb-step__num { background: var(--ootb-primary); border-color: var(--ootb-primary); color: var(--ootb-on-primary); }
.ootb-step.is-active .ootb-step__label { color: var(--ootb-text); }
.ootb-step.is-past .ootb-step__num { border-color: var(--ootb-primary); color: var(--ootb-primary); }
.ootb-step.is-past .ootb-step__label { color: var(--ootb-primary); }

/* — Zweispaltiges Layout — */
.ootb-body { display: flex; flex-wrap: wrap; gap: var(--ootb-gap-lg); align-items: flex-start; }
.ootb-content { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--ootb-gap-md); }

/* Schritt-Container: senkrechter Abstand zwischen den Blöcken. */
.ootb-step1 { display: flex; flex-direction: column; gap: var(--ootb-gap-sm); }
.ootb-step3 { display: flex; flex-direction: column; gap: var(--ootb-gap-md); }

/* — Schritt 1: Terminart — */
.ootb-typehead h3 { font-size: var(--ootb-fs-h3); margin: 0; font-weight: 600; color: var(--ootb-text); }
.ootb-typehead p { margin: 4px 0 0; font-size: var(--ootb-fs-lead); color: var(--ootb-text-muted); }
.ootb-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--ootb-gap-sm); }
.ootb-type {
    min-width: 0;
    display: flex; flex-direction: column; gap: calc(var(--ootb-fs) * 0.42);
    text-align: left; cursor: pointer;
    padding: calc(var(--ootb-fs) * 1) calc(var(--ootb-fs) * 1.1);
    background: transparent;
    color: var(--ootb-text);
    border: 1px solid var(--ootb-border);
    border-radius: var(--ootb-radius);
    transition: background .12s ease, border-color .12s ease;
}
.ootb-type:hover { background: var(--ootb-primary-tint); border-color: var(--ootb-primary); }
.ootb-type.is-selected {
    border-color: var(--ootb-type-color, var(--ootb-primary));
    background: color-mix(in srgb, var(--ootb-type-color, var(--ootb-primary)) 10%, transparent);
}
.ootb-type__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ootb-gap-sm); min-width: 0; }
.ootb-type__title { font-weight: 600; font-size: var(--ootb-fs-cardttl); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.ootb-type__dur {
    font-size: var(--ootb-fs-label); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ootb-type-color, var(--ootb-primary)); white-space: nowrap;
}
.ootb-type__desc { font-size: var(--ootb-fs-sm); line-height: 1.5; color: var(--ootb-text-muted); }

/* — Schritt 2: Datum & Uhrzeit — */
.ootb-datetime { display: flex; flex-wrap: wrap; gap: var(--ootb-gap-lg); align-items: flex-start; }
.ootb-cal { flex: 1 1 280px; min-width: 0; max-width: 420px; }
.ootb-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ootb-gap-sm); margin-bottom: var(--ootb-gap-md); }
.ootb-cal__month { font-weight: 600; font-size: var(--ootb-fs-month); letter-spacing: .02em; }
.ootb-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.ootb-weekday { text-align: center; font-size: var(--ootb-fs-kicker); letter-spacing: .08em; color: var(--ootb-text-muted); }
.ootb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ootb-day {
    display: flex; align-items: center; justify-content: center;
    height: var(--ootb-day-h); padding: 0;
    font-size: var(--ootb-fs-num); font-variant-numeric: tabular-nums;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ootb-radius);
    color: var(--ootb-text-faint);
    cursor: default;
}
.ootb-day.is-blank { visibility: hidden; }
.ootb-day.is-free { color: var(--ootb-text); border-color: var(--ootb-border); cursor: pointer; }
.ootb-day.is-free:hover { background: var(--ootb-primary-tint); border-color: var(--ootb-primary); }
.ootb-day.is-selected { color: var(--ootb-on-primary); background: var(--ootb-primary); border-color: var(--ootb-primary); font-weight: 700; cursor: pointer; }
.ootb-day.is-full { color: var(--ootb-text-muted); border: 1px dashed var(--ootb-text-faint); cursor: pointer; }
.ootb-day:disabled { color: var(--ootb-text-faint); cursor: default; }

.ootb-legend { display: flex; gap: var(--ootb-gap-md); margin-top: var(--ootb-gap-md); font-size: var(--ootb-fs-meta); color: var(--ootb-text-muted); flex-wrap: wrap; }
.ootb-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.ootb-legend__swatch { width: calc(var(--ootb-fs) * 0.8); height: calc(var(--ootb-fs) * 0.8); display: block; }
.ootb-legend__swatch--free { border: 1px solid var(--ootb-border); }
.ootb-legend__swatch--sel  { background: var(--ootb-primary); }
.ootb-legend__swatch--full { border: 1px dashed var(--ootb-text-faint); }

.ootb-times { flex: 1 1 240px; min-width: 0; }
.ootb-pickday {
    border: 1px dashed var(--ootb-border);
    padding: var(--ootb-gap-md); font-size: var(--ootb-fs-sm); color: var(--ootb-text-muted); line-height: 1.5;
}
.ootb-times__inner { display: flex; flex-direction: column; gap: var(--ootb-gap-sm); }
.ootb-times__date { font-weight: 600; font-size: var(--ootb-fs-cardttl); color: var(--ootb-text); }

.ootb-loading-slots { display: flex; flex-direction: column; gap: var(--ootb-gap-sm); }
.ootb-loading-slots__label { font-size: var(--ootb-fs-meta); color: var(--ootb-text-muted); display: flex; align-items: center; gap: 8px; }
.ootb-spinner {
    width: calc(var(--ootb-fs) * 0.8); height: calc(var(--ootb-fs) * 0.8); flex: none;
    border: 2px solid var(--ootb-primary);
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: ootbSpin .7s linear infinite;
}
.ootb-skeletons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(90px, 100%), 1fr)); gap: 8px; }
.ootb-skeleton { height: var(--ootb-control-h); background: var(--ootb-skeleton); animation: ootbShimmer 1.2s ease-in-out infinite; }

.ootb-empty {
    border: 1px solid var(--ootb-border);
    padding: var(--ootb-gap-md); font-size: var(--ootb-fs-sm); line-height: 1.55; color: var(--ootb-text-muted);
}
.ootb-empty b { color: var(--ootb-text); }

.ootb-slotgroup { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ootb-slotgroup__label { font-size: var(--ootb-fs-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--ootb-text-muted); }
.ootb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(90px, 100%), 1fr)); gap: 8px; }
.ootb-slot {
    height: var(--ootb-control-h); padding: 0 6px;
    font-size: var(--ootb-fs-num); font-variant-numeric: tabular-nums;
    cursor: pointer;
    background: transparent; color: var(--ootb-text);
    border: 1px solid var(--ootb-border);
    border-radius: var(--ootb-radius);
    transition: border-color .12s ease, background .12s ease;
}
.ootb-slot:hover { border-color: var(--ootb-primary); }
.ootb-slot.is-selected { background: var(--ootb-primary); color: var(--ootb-on-primary); border-color: var(--ootb-primary); font-weight: 700; }

/* — Schritt 2 (Leistungen): Ausleihdauer + Zeitraum — */
.ootb-day.is-range { color: var(--ootb-text); background: var(--ootb-primary-tint); border-color: var(--ootb-primary); }
/* — KI-Terminassistent (1:1 nach Design-Handoff „Buchung KI-Assistent") — */
/* Umschalt-Button oben rechts: geschlossen gefüllt, offen Outline; eckig, fällt durch Farbe auf. */
.ootb-ki-launch {
    display: inline-flex; align-items: center; gap: 9px; flex: none; max-width: 100%;
    min-height: 40px; padding: 9px 14px; cursor: pointer;
    font-weight: 700; font-size: calc(var(--ootb-fs) * 0.82); letter-spacing: .01em; white-space: nowrap;
    color: var(--ootb-on-primary); background: var(--ootb-primary);
    border: 1px solid var(--ootb-primary); border-radius: var(--ootb-radius);
    transition: background .12s ease, border-color .12s ease;
}
.ootb-ki-launch:hover { background: var(--ootb-primary-active); border-color: var(--ootb-primary-active); }
.ootb-ki-launch.is-open { background: transparent; color: var(--ootb-primary-active); }
.ootb-ki-launch.is-open:hover { background: var(--ootb-primary-tint); }
.ootb-ki-launch__sq { width: 7px; height: 7px; background: currentColor; flex: none; display: block; }
.ootb-ki-launch__title { line-height: 1; }
.ootb-btn--sm { min-height: auto; padding: calc(var(--ootb-fs) * 0.3) calc(var(--ootb-fs) * 0.7); font-size: var(--ootb-fs-sm); }

/* Chat-Container (einspaltig, fluid — volle Breite des Widgets, kein eigenes Mobil-Layout). */
.ootb-ki { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.ootb-ki-rule { height: 1px; background: var(--ootb-border); }
.ootb-ki-messages { display: flex; flex-direction: column; gap: 14px; }
.ootb-ki-msg { display: flex; }
.ootb-ki-msg--user { justify-content: flex-end; }
.ootb-ki-msg--bot { justify-content: flex-start; }
.ootb-ki-bubble { border-radius: var(--ootb-radius); animation: ootb-ki-fade .18s ease-out; }
.ootb-ki-msg--bot .ootb-ki-bubble { max-width: min(92%, 52ch); min-width: 0; border: 1px solid var(--ootb-border); background: var(--ootb-bg); padding: 14px 16px; }
.ootb-ki-msg--user .ootb-ki-bubble { max-width: min(92%, 44ch); min-width: 0; border: 1px solid var(--ootb-primary); background: color-mix(in srgb, var(--ootb-primary) 10%, transparent); padding: 12px 14px; }
.ootb-ki-text { font-size: calc(var(--ootb-fs) * 0.82); line-height: 1.55; color: var(--ootb-text); white-space: pre-wrap; word-break: break-word; }
@keyframes ootb-ki-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Terminvorschläge — bordered Zeilen (eigener Rahmen) in der Sprechblase; Datum/Meta gestapelt, „Auswählen" rechts. */
.ootb-ki-slots { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.ootb-ki-slot {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 13px;
    border: 1px solid var(--ootb-border); border-radius: var(--ootb-radius); background: transparent;
    font: inherit; text-align: left; color: var(--ootb-text); cursor: pointer; transition: border-color .12s ease;
}
.ootb-ki-slot:hover { border-color: var(--ootb-primary); }
.ootb-ki-slot__info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ootb-ki-slot__tag { font-size: calc(var(--ootb-fs) * 0.88); font-weight: 500; line-height: 1.2; }
.ootb-ki-slot__meta { font-size: calc(var(--ootb-fs) * 0.7); color: var(--ootb-text-muted); line-height: 1.4; }
.ootb-ki-slot__action { font-size: calc(var(--ootb-fs) * 0.76); color: var(--ootb-primary-active); white-space: nowrap; flex: none; }

/* Übergabe-CTA in der Sprechblase. */
.ootb-ki-cta { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ootb-ki-ctabtn { flex: none; max-width: 100%; padding: 11px 16px; font-size: calc(var(--ootb-fs) * 0.82); white-space: normal; text-align: left; line-height: 1.3; }
.ootb-ki-ctanote { font-size: calc(var(--ootb-fs) * 0.7); line-height: 1.45; color: var(--ootb-text-muted); }

/* Tipp-Indikator: rotierender Spinner + Text (ohne Sprechblasen-Rahmen). */
.ootb-ki-typing { display: flex; align-items: center; gap: 9px; font-size: calc(var(--ootb-fs) * 0.7); color: var(--ootb-text-muted); }
.ootb-ki-spinner { width: 12px; height: 12px; border: 2px solid var(--ootb-primary); border-right-color: transparent; border-radius: 50%; display: block; animation: ootb-ki-spin .7s linear infinite; }
@keyframes ootb-ki-spin { to { transform: rotate(360deg); } }

/* Schnellantworten — eckige Chips (Border, transparent), keine Pillen. */
.ootb-ki-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ootb-ki-quickchip {
    border: 1px solid var(--ootb-border); background: transparent; border-radius: var(--ootb-radius);
    padding: 7px 12px; font: inherit; font-size: calc(var(--ootb-fs) * 0.76); color: var(--ootb-text);
    text-align: left; cursor: pointer; transition: border-color .12s ease;
}
.ootb-ki-quickchip:hover { border-color: var(--ootb-primary); }

/* Eingabezeile: Spalte mit Trennlinie oben; Textfeld + quadratischer 50×50-Pfeil-Button. */
.ootb-ki-inputrow { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ootb-border); padding-top: 14px; }
.ootb-ki-inputbar { display: flex; gap: 8px; align-items: stretch; }
.ootb-ki-input { flex: 1 1 auto; min-width: 0; }
textarea.ootb-ki-input { height: 50px; min-height: 50px; max-height: 120px; resize: none; line-height: 1.45; font-size: 15px; padding: 12px; }
.ootb-ki-send { flex: none; width: 50px; min-width: 50px; height: 50px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ootb-ki-send:disabled { opacity: .45; cursor: default; filter: none; }
.ootb-ki-send svg { width: 20px; height: 20px; display: block; }
.ootb-ki-belowinput { display: flex; flex-direction: column; gap: 5px; font-size: calc(var(--ootb-fs) * 0.65); line-height: 1.45; color: var(--ootb-text-muted); }
.ootb-ki-privacylink { color: var(--ootb-text-muted); text-decoration: underline; }
.ootb-ki-self { align-self: flex-start; padding-left: 0; }
.ootb-ki-error { font-size: calc(var(--ootb-fs) * 0.82); color: var(--ootb-danger); }

/* Kopfzeile umbruchsicher (alle Breiten): Titel schrumpft, Umschalt-Button rutscht darunter. */
.ootb-head__main { flex: 1 1 200px; min-width: 0; }

/* — Kontakt-Vorbefüllung aus onOffice (?uuid=) — */
.ootb-prefill-loading {
    display: flex; align-items: center; gap: calc(var(--ootb-fs) * 0.5);
    margin: 0 0 var(--ootb-gap-md); font-size: var(--ootb-fs-sm); color: var(--ootb-text-muted);
}
.ootb-prefill-note {
    display: flex; align-items: flex-start; gap: calc(var(--ootb-fs) * 0.55);
    margin: 0 0 var(--ootb-gap-md); padding: calc(var(--ootb-fs) * 0.7) calc(var(--ootb-fs) * 0.9);
    font-size: var(--ootb-fs-sm); line-height: 1.5; color: var(--ootb-text);
    background: var(--ootb-primary-tint);
    border: 1px solid color-mix(in srgb, var(--ootb-primary) 28%, transparent);
    border-radius: var(--ootb-radius);
}
.ootb-prefill-note__icon { flex: 0 0 auto; }

.ootb-service-durs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; margin-top: calc(var(--ootb-fs) * 0.3); }
.ootb-service-dur {
    height: var(--ootb-control-h); padding: 0 10px;
    font-size: var(--ootb-fs-num); font-weight: 600;
    cursor: pointer; background: transparent; color: var(--ootb-text);
    border: 1px solid var(--ootb-border); border-radius: var(--ootb-radius);
    transition: border-color .12s ease, background .12s ease;
}
.ootb-service-dur:hover:not([disabled]) { border-color: var(--ootb-primary); }
.ootb-service-dur.is-selected { background: var(--ootb-primary); color: var(--ootb-on-primary); border-color: var(--ootb-primary); font-weight: 700; }
.ootb-service-dur[disabled] { opacity: .4; cursor: not-allowed; }
.ootb-service-range {
    margin-top: var(--ootb-gap-md); padding: calc(var(--ootb-fs) * 0.7) calc(var(--ootb-fs) * 0.9);
    font-size: var(--ootb-fs-lead); font-weight: 600; color: var(--ootb-text);
    background: var(--ootb-primary-tint); border-radius: var(--ootb-radius);
    border: 1px solid color-mix(in srgb, var(--ootb-primary) 30%, transparent);
}

/* — Bestätigung (Leistung): Warnhinweis + Vertrags-Download — */
.ootb-warnbox {
    display: flex; gap: calc(var(--ootb-fs) * 0.6); align-items: flex-start;
    margin-top: var(--ootb-gap-md); padding: calc(var(--ootb-fs) * 0.75) calc(var(--ootb-fs) * 0.9);
    font-size: var(--ootb-fs-body); line-height: 1.5; color: var(--ootb-text);
    background: color-mix(in srgb, var(--ootb-danger) 8%, transparent);
    border-left: 3px solid var(--ootb-danger); border-radius: var(--ootb-radius);
}
.ootb-warnbox__icon {
    flex: 0 0 auto; width: calc(var(--ootb-fs) * 1.4); height: calc(var(--ootb-fs) * 1.4);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--ootb-on-primary); background: var(--ootb-danger);
    border-radius: 50%; font-size: var(--ootb-fs-sm);
}
.ootb-download { margin-top: var(--ootb-gap-md); }
.ootb-download__label { font-size: var(--ootb-fs-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ootb-text-muted); margin-bottom: calc(var(--ootb-fs) * 0.4); }

/* — Schritt 3: Kontaktdaten — */
.ootb-contacthead h3 { font-size: var(--ootb-fs-h3); margin: 0; font-weight: 600; color: var(--ootb-text); }
.ootb-contacthead p { margin: 4px 0 0; font-size: var(--ootb-fs-lead); color: var(--ootb-text-muted); }
.ootb-errorsummary {
    border-left: 3px solid var(--ootb-danger);
    padding: calc(var(--ootb-fs) * 0.6) calc(var(--ootb-fs) * 0.85); font-size: var(--ootb-fs-sm);
    background: color-mix(in srgb, var(--ootb-danger) 8%, transparent);
    color: var(--ootb-danger-text);
}
.ootb-fields { display: flex; flex-wrap: wrap; gap: var(--ootb-gap-sm); }
.ootb-field { min-width: 0; }
.ootb-field__label {
    display: block; font-size: var(--ootb-fs-label); letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 5px; color: var(--ootb-text-muted);
}
.ootb-req { color: var(--ootb-primary); }
.ootb-input {
    width: 100%; min-height: var(--ootb-control-h); padding: calc(var(--ootb-fs) * 0.45) calc(var(--ootb-fs) * 0.65);
    font-size: var(--ootb-fs-body); color: var(--ootb-text); caret-color: var(--ootb-primary);
    background: var(--ootb-surface);
    border: 1px solid var(--ootb-border);
    border-radius: var(--ootb-radius);
}
.ootb-input:hover { border-color: color-mix(in srgb, var(--ootb-text) 45%, transparent); }
.ootb-input:focus-visible { border-color: var(--ootb-primary); outline-offset: 0; }
textarea.ootb-input { min-height: calc(var(--ootb-fs) * 5); resize: vertical; line-height: 1.5; }
.ootb-input.is-error { border-color: var(--ootb-danger); background: color-mix(in srgb, var(--ootb-danger) 6%, var(--ootb-surface)); }
.ootb-field__error { font-size: var(--ootb-fs-label); margin-top: 4px; color: var(--ootb-danger-text); }

.ootb-consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: var(--ootb-fs-sm); line-height: 1.5; cursor: pointer; color: var(--ootb-text);
}
.ootb-consent__box {
    width: var(--ootb-check); height: var(--ootb-check); flex: none; margin-top: 2px;
    accent-color: var(--ootb-primary);
    border-radius: var(--ootb-radius);
}
.ootb-consent__box.is-error { outline: 2px solid var(--ootb-danger); outline-offset: 2px; }

/* — Schritt 4/5: Ergebnis — */
.ootb-result { display: flex; flex-direction: column; gap: var(--ootb-gap-md); align-items: flex-start; width: 100%; }
.ootb-result__icon {
    width: var(--ootb-result-ic); height: var(--ootb-result-ic); flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ootb-primary); color: var(--ootb-primary);
}
.ootb-result__icon svg { display: block; width: 62%; height: 62%; }
.ootb-result__icon--fail { border-color: var(--ootb-danger); color: var(--ootb-danger); font-size: var(--ootb-fs-result); line-height: 1; font-weight: 600; }
.ootb-result__title { font-size: var(--ootb-fs-result); margin: 0; font-weight: 600; color: var(--ootb-text); }
.ootb-result__text { margin: 6px 0 0; font-size: var(--ootb-fs-body); line-height: 1.6; color: var(--ootb-text-muted); }
.ootb-result__text b { color: var(--ootb-text); }

.ootb-summary {
    border: 1px solid var(--ootb-border);
    padding: var(--ootb-gap-md) var(--ootb-gap-lg); width: 100%;
    display: flex; flex-direction: column; gap: var(--ootb-gap-sm);
}
.ootb-summary__row {
    display: flex; justify-content: space-between; gap: var(--ootb-gap-md);
    font-size: var(--ootb-fs-sm); padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--ootb-text) 8%, transparent);
}
.ootb-summary__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ootb-summary__k { color: var(--ootb-text-muted); letter-spacing: .04em; }
.ootb-summary__v { font-weight: 500; text-align: right; }

.ootb-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ootb-failphone { font-size: var(--ootb-fs-sm); color: var(--ootb-text-muted); }

/* — Navigation — */
.ootb-nav {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    padding-top: var(--ootb-gap-md); border-top: 1px solid var(--ootb-border);
}
.ootb-nav__spacer { flex: 1 1 auto; }

/* — Buttons — */
.ootb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-decoration: none;
    font-weight: 600; font-size: var(--ootb-fs-sm); line-height: 1.2;
    color: var(--ootb-text);
    background: transparent;
    border: 1px solid transparent;
    padding: calc(var(--ootb-fs) * 0.62) calc(var(--ootb-fs) * 0.95);
    border-radius: var(--ootb-radius);
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
    white-space: nowrap;
}
.ootb-btn:disabled { opacity: .45; cursor: not-allowed; }
.ootb-btn--primary { background: var(--ootb-primary); color: var(--ootb-on-primary); border-color: var(--ootb-primary); padding: calc(var(--ootb-fs) * 0.62) calc(var(--ootb-fs) * 1.1); font-size: var(--ootb-fs-body); }
.ootb-btn--primary:not(:disabled):hover { background: var(--ootb-primary-hover); border-color: var(--ootb-primary-hover); }
.ootb-btn--primary:not(:disabled):active { background: var(--ootb-primary-active); border-color: var(--ootb-primary-active); }
.ootb-btn--secondary { border-color: var(--ootb-border); }
.ootb-btn--secondary:not(:disabled):hover { background: var(--ootb-hover-neutral); }
.ootb-btn--ghost { color: var(--ootb-primary); border-color: transparent; }
.ootb-btn--ghost:not(:disabled):hover { background: var(--ootb-primary-soft); }
.ootb-btn--icon { width: var(--ootb-icon-btn); height: var(--ootb-icon-btn); padding: 0; }
.ootb-btn .ootb-spinner { border-color: currentColor; border-right-color: transparent; margin-right: 4px; }

/* — Aside „Ihre Auswahl" — */
.ootb-aside {
    flex: 1 1 260px; min-width: 0;
    border: 1px solid var(--ootb-border);
    padding: var(--ootb-gap-md);
    display: flex; flex-direction: column; gap: var(--ootb-gap-sm);
}
.ootb-aside__kicker { font-size: var(--ootb-fs-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--ootb-primary); }
/* Wert UNTER dem Label (gestapelt) — so laufen lange Werte wie „Immobilienbewertung" nicht
   aus der schmalen Box, und Label + Wert bleiben sauber untereinander. */
.ootb-aside__row { display: flex; flex-direction: column; gap: 1px; font-size: var(--ootb-fs-sm); line-height: 1.4; }
.ootb-aside__k { color: var(--ootb-text-muted); }
.ootb-aside__v { word-break: break-word; }
.ootb-aside__v.is-set { font-weight: 600; color: var(--ootb-text); }
.ootb-aside__v.is-empty { color: var(--ootb-text-faint); }
.ootb-aside__div { height: 1px; background: var(--ootb-border); margin: 4px 0; }
.ootb-aside__note { font-size: var(--ootb-fs-meta); line-height: 1.5; color: var(--ootb-text-muted); }

/* — Schritt 3: Ansprechpartner — */
.ootb-person { display: flex; flex-direction: column; gap: var(--ootb-gap-md); }
.ootb-mark {
    width: calc(var(--ootb-fs) * 0.95); height: calc(var(--ootb-fs) * 0.95); flex: none; margin-top: 3px; display: block;
    border: 1px solid var(--ootb-text-faint); background: transparent;
}
.ootb-mark.is-on { border-color: var(--ootb-primary); background: var(--ootb-primary); box-shadow: inset 0 0 0 3px var(--ootb-bg); }
.ootb-tag {
    display: inline-flex; align-items: center; flex: none; align-self: flex-start;
    font-size: var(--ootb-fs-kicker); letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; background: var(--ootb-primary-soft); color: var(--ootb-primary-active);
}
.ootb-tag--sm { margin-left: 2px; }
.ootb-person-auto {
    display: flex; align-items: center; gap: var(--ootb-gap-sm);
    padding: calc(var(--ootb-fs) * 0.95) calc(var(--ootb-fs) * 1.1);
    background: transparent; color: var(--ootb-text); text-align: left; cursor: pointer;
    border: 1px solid var(--ootb-border); border-radius: var(--ootb-radius);
    transition: background .12s ease, border-color .12s ease;
}
.ootb-person-auto:hover { border-color: var(--ootb-primary); }
.ootb-person-auto.is-selected { border-color: var(--ootb-primary); background: var(--ootb-primary-soft); }
.ootb-person-auto__body { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; flex: 1 1 auto; }
.ootb-person-auto__title { font-weight: 600; font-size: var(--ootb-fs-cardttl); }

.ootb-or { display: flex; align-items: center; gap: var(--ootb-gap-sm); }
.ootb-or__line { height: 1px; background: var(--ootb-border); flex: 1 1 auto; }
.ootb-or__label { font-size: var(--ootb-fs-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--ootb-text-muted); }

.ootb-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--ootb-gap-sm); }
.ootb-person-card {
    display: flex; align-items: flex-start; gap: var(--ootb-gap-sm);
    padding: calc(var(--ootb-fs) * 0.85) calc(var(--ootb-fs) * 0.95);
    text-align: left; color: var(--ootb-text); cursor: pointer;
    background: transparent; border: 1px solid var(--ootb-border); border-radius: var(--ootb-radius);
    transition: background .12s ease, border-color .12s ease;
}
.ootb-person-card:hover { border-color: var(--ootb-primary); }
.ootb-person-card.is-selected { border-color: var(--ootb-primary); background: var(--ootb-primary-soft); }
.ootb-person-card.is-off { opacity: .6; cursor: default; }
.ootb-person-photo {
    width: calc(var(--ootb-fs) * 3.4); height: calc(var(--ootb-fs) * 3.4); flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ootb-border); overflow: hidden;
    font-weight: 600; font-size: var(--ootb-fs-cardttl); color: var(--ootb-text-muted);
    background: var(--ootb-surface);
}
.ootb-person-photo__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; display: block; }
.ootb-person-mid { display: flex; flex-direction: column; gap: 3px; text-align: left; flex: 1 1 auto; min-width: 0; }
.ootb-person-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ootb-person-name { font-weight: 600; font-size: var(--ootb-fs-cardttl); }
.ootb-person-role { font-size: var(--ootb-fs-meta); color: var(--ootb-text-muted); line-height: 1.4; }
.ootb-person-slots { font-size: var(--ootb-fs-meta); color: var(--ootb-primary-active); margin-top: 2px; }
.ootb-person-slots.is-off { color: var(--ootb-text-muted); }

/* — Animationen — */
@keyframes ootbShimmer { 0% { opacity: .35 } 50% { opacity: .8 } 100% { opacity: .35 } }
@keyframes ootbSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
    .ootb-skeleton { animation: none; opacity: .5; }
    .ootb-spinner { animation-duration: 1.4s; }
}

.ootb-error {
    border: 1px solid var(--ootb-danger);
    background: var(--ootb-danger-soft);
    color: var(--ootb-danger-text);
    padding: 14px 16px; font-size: var(--ootb-fs-body);
}

/* ── Personen-Auswahl (mehrere Ansprechpartner je Terminart) ────────────── */
.ootb-persel { margin: 0 0 18px; }
.ootb-persel__label { font-size: .8em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ootb-text-muted); margin: 0 0 8px; }
.ootb-persel__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.ootb-persel__opt { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; padding: 9px 12px; background: var(--ootb-surface); border: 1px solid var(--ootb-border); border-radius: var(--ootb-radius); color: var(--ootb-text); cursor: pointer; font: inherit; transition: border-color .12s ease, box-shadow .12s ease; }
.ootb-persel__opt:hover { border-color: var(--ootb-primary); }
.ootb-persel__opt.is-selected { border-color: var(--ootb-primary); box-shadow: inset 0 0 0 1px var(--ootb-primary); }
.ootb-persel__photo { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ootb-persel__photo--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--ootb-primary); color: var(--ootb-on-primary); font-weight: 700; }
.ootb-persel__meta { display: flex; flex-direction: column; min-width: 0; }
.ootb-persel__name { font-weight: 600; overflow-wrap: anywhere; }
.ootb-persel__role { font-size: .82em; color: var(--ootb-text-muted); overflow-wrap: anywhere; }