@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   booking.css · Theme-Adapter für convi Booking
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css, Abschnitt 01)
   Andockt an: den öffentlichen Token-Vertrag des Plugins auf .cnv-booking
   Präfix    : kh-  ·  Scope: ausschliesslich .cnv-booking bzw. .kh-location-booking
   --------------------------------------------------------------------------
   WAS DIESE DATEI IST
   Eine Übersetzung von Designsystem-Tokens in Plugin-Tokens. Sie enthält bewusst
   KEINE Kopie des Plugin-CSS, KEINE Layoutregeln und KEINE Komponentenlogik:
   Abstände, Raster, Responsive-Verhalten und die Accessibility-Struktur kommen
   unverändert aus dem Plugin (B3) und dürfen hier nicht nachgebaut werden.

   WARUM "body" VORAN
   Das Plugin belegt dieselben Tokens auf demselben Element (.cnv-booking). Ein
   vorangestelltes body hebt die Spezifität um genau eine Stufe an - das ist der
   im Plugin dokumentierte Weg und macht eine Wichtigkeitsmarkierung überflüssig.

   ROT IST EIN WERKZEUG, KEIN ANSTRICH
   --cnv-booking-color-primary steuert im Plugin genau drei Flächen: den primären
   Button, den ausgewählten Kalendertag und die ausgewählte Uhrzeit. Alle übrigen
   Flächen bleiben weiss/neutral. Es wird hier bewusst keine weitere Fläche
   eingefärbt.
   ========================================================================== */


/* ==========================================================
   01. TOKENS — Designsystem → Plugin-Vertrag
   ========================================================== */

body .cnv-booking {

    /* ---------- Marke ------------------------------------------------ */
    --cnv-booking-color-primary: var(--kh-color-primary-500);
    --cnv-booking-color-primary-hover: var(--kh-color-primary-600);
    --cnv-booking-color-on-primary: var(--kh-color-primary-contrast);

    /* ---------- Text -------------------------------------------------- */
    --cnv-booking-color-text: var(--kh-color-ink-900);
    --cnv-booking-color-muted: var(--kh-color-ink-500);

    /* ---------- Flächen und Linien ------------------------------------ */
    --cnv-booking-color-surface: var(--kh-color-surface-000);
    --cnv-booking-color-surface-soft: var(--kh-color-surface-050);
    --cnv-booking-color-border: var(--kh-color-line-200);

    /* ---------- Signale ------------------------------------------------
       Der Fokus ist ausdrücklich NICHT die Markenfarbe: das Designsystem
       verwendet dafür ein eigenes Petrol, damit der Fokus auf roten Flächen
       sichtbar bleibt. Das Plugin belegt --cnv-booking-color-focus ab Werk
       mit der Primärfarbe - genau deshalb steht die Zeile hier. */
    --cnv-booking-color-focus: var(--kh-color-focus);
    --cnv-booking-color-success: var(--kh-color-success);
    --cnv-booking-color-warning: var(--kh-color-warning);
    /* Fehlertexte sind Schrift, nicht Fläche: das dunklere Rot des
       Designsystems für rote Schrift unter 24px. */
    --cnv-booking-color-danger: var(--kh-color-danger);

    /* ---------- Radien ------------------------------------------------ */
    --cnv-booking-radius-sm: var(--kh-radius-xs);
    --cnv-booking-radius-md: var(--kh-radius-sm);
    --cnv-booking-radius-lg: var(--kh-radius-md);

    /* ---------- Schatten ---------------------------------------------- */
    --cnv-booking-shadow-sm: var(--kh-shadow-sm);

    /* ---------- Abstände · 4-px-Raster -------------------------------- */
    --cnv-booking-space-xs: var(--kh-space-xs);
    --cnv-booking-space-sm: var(--kh-space-sm);
    --cnv-booking-space-md: var(--kh-space-md);
    --cnv-booking-space-lg: var(--kh-space-lg);

    /* ---------- Bedienelemente ---------------------------------------- */
    --cnv-booking-control-height: var(--kh-control-height);
    --cnv-booking-touch-min: var(--kh-tap-min);

    /* ---------- Schrift ------------------------------------------------
       Keine zusätzliche Schriftdatei, kein Webfont-Aufruf: Arimo ist bereits
       über Elementor lokal eingebunden. Hier wird nur darauf verwiesen. */
    font-family: var(--kh-font-sans);
}


/* ==========================================================
   02. ZUSTÄNDE OHNE EIGENEN TOKEN
   ========================================================== */

/*
 * Active (#820000) hat im Token-Vertrag des Plugins keine Entsprechung - der
 * Vertrag kennt Primary und Hover, aber keinen gedrückten Zustand. Deshalb hier
 * als einzige Ausnahme ein gescopter Selektor statt eines Tokens. Der
 * vorangestellte body reicht für die Spezifität.
 */
body .cnv-booking .cbk-button-primary:active,
body .cnv-booking .cbk-slot-confirm-button:active {
    background: var(--kh-color-primary-700);
    border-color: var(--kh-color-primary-700);
}

/*
 * Fokusring in der Formensprache des Designsystems (weisser Absatz, dann Ring).
 * :focus-visible, nicht :focus - ein Mausklick soll keinen Ring hinterlassen.
 * Die Sichtbarkeit selbst kommt weiterhin aus dem Plugin; hier ändert sich nur
 * das Aussehen des Rings.
 */
body .cnv-booking :focus-visible {
    outline: 2px solid var(--kh-color-focus);
    outline-offset: 2px;
    box-shadow: var(--kh-shadow-focus);
}


/* ==========================================================
   03. EINBETTUNG IN DIE STANDORTSEITE
   ========================================================== */

/*
 * Standort OHNE Buchungskalender: der gesamte Abschnitt verschwindet.
 *
 * Das Plugin rendert in diesem Fall korrekt nichts (siehe CBK_Shortcode::render_widget()).
 * Übrig bliebe sonst aber die Überschrift „Termin online vereinbaren" mit nichts darunter —
 * also genau der leere Rahmen, den es nicht geben soll. Weil die Überschrift zum Template
 * gehört und nicht zum Plugin, wird das hier gelöst und nicht dort.
 *
 * :has() prüft, ob das Widget tatsächlich gerendert wurde. Ein Browser ohne :has() zeigt die
 * Überschrift weiterhin an — eine harmlose Verschlechterung gegenüber einer JavaScript-Lösung,
 * die dafür auf jeder Standortseite mitliefe.
 *
 * Der Hinweis für Redakteure (.cbk-admin-hint, nur für angemeldete Benutzer mit
 * manage_options) bleibt ausdrücklich sichtbar: sonst fiele im Backend niemandem auf, dass
 * dem Standort ein Kalender fehlt.
 */
.kh-location-booking:not(:has(.cnv-booking)):not(:has(.cbk-admin-hint)) {
    display: none;
}


/*
 * Sprungziel #termin.
 *
 * Der Header ist sticky (--kh-z-header). Ohne Korrektur verschwände die
 * Überschrift beim Anspringen darunter. scroll-margin-top löst das rein in CSS -
 * kein JavaScript, kein Scroll-Hijacking, das normale Ankerverhalten des
 * Browsers bleibt erhalten (und damit auch die Tastaturbedienung danach).
 */
.kh-location-booking {
    scroll-margin-top: calc(var(--kh-header-height) + var(--kh-space-md));
}

@media (min-width: 1024px) {
    .kh-location-booking {
        scroll-margin-top: calc(var(--kh-header-height-lg) + var(--kh-space-lg));
    }
}

/*
 * Sehr schmale Geräte (unter 360px).
 *
 * Das Widget hat aus B3 eine Mindestbreite von 280px - eine Untergrenze, die verhindert, dass es
 * in einem Elternelement ohne sinnvolle Breitenvererbung in sich zusammenfällt. Zusammen mit dem
 * regulären Seitenrand von 2x16px bleiben bei 320px genau 8px Luft; kommt eine sichtbare
 * Bildlaufleiste hinzu, reicht es nicht mehr und der Abschnitt scrollt waagerecht.
 *
 * Korrigiert wird das HIER und nicht im Plugin: der Seitenrand gehört dem Template, die
 * Mindestbreite ist ein Vertrag aus B3. Betroffen ist ausschliesslich der Buchungsabschnitt -
 * alle übrigen Abschnitte der Standortseite behalten ihren Rand.
 */
@media (max-width: 359px) {
    .kh-location-booking .kh-container {
        padding-inline: var(--kh-space-xs);
    }
}

/*
 * Das Widget folgt der Inhaltsbreite des Templates. Ausdrücklich KEINE
 * Vollbildbreite, kein 100vw, keine negativen Ränder: die Container-Responsivität
 * aus B3 misst die tatsächliche Breite des Elternelements und würde durch einen
 * solchen Eingriff falsch messen.
 */
.kh-location-booking .cnv-booking {
    width: 100%;
    max-width: 100%;
}


/*
 * Service-PIN-Hinweis: EINER von zweien, nie beide.
 *
 * Der Hinweis steht im Template zweimal (Elementor 251: kh-booking-hint--before über dem
 * Widget, --after darunter), weil er vor der Buchung und danach an unterschiedlichen Stellen
 * gebraucht wird. Gleichzeitig sichtbar wären es zwei identische Absätze auf einem Bildschirm.
 *
 * Unterschieden wird am Zustand des Widgets. Das Signal ist das hidden-Attribut des
 * Erfolgsschritts [data-cbk-step="success"], das showStep() im Plugin umschaltet - aber
 * BEOBACHTET wird es von assets/js/booking.js, das daraus die Klasse kh-booking-done am
 * Abschnitt setzt. Hier steht deshalb kein :has() mehr.
 *
 * Warum nicht mehr rein in CSS: die vorherige :has()-Fassung war nach Markup,
 * Verschachtelung, Spezifität und Auslieferung korrekt - geprüft bis in die ausgelieferte
 * Datei - und hat im echten Browser nach einer echten Buchung dennoch nicht gegriffen. Die
 * verbleibenden Erklärungen liegen beide auf der Clientseite und sind serverseitig nicht
 * messbar. Eine Zustandsklasse, die sichtbar im DOM steht, ist in dieser Lage das ehrlichere
 * Mittel als eine Regel, deren Zutreffen man nicht nachsehen kann.
 *
 * Ohne JavaScript bleibt der obere Hinweis sichtbar und der untere verborgen - also
 * weiterhin genau einer, nie zwei.
 */
.kh-location-booking .kh-booking-hint--after {
    display: none;
}

.kh-location-booking.kh-booking-done .kh-booking-hint--before {
    display: none;
}

/*
 * Wiederherstellen, nicht neu erfinden: .kh-card setzt display:flex (global.css).
 *
 * height:auto ist der zweite Teil des Fixes. global.css setzt für Karten, die selbst ein
 * Widget sind, .elementor-widget.kh-card { height: 100% } - gedacht für Karten in einem
 * Raster gleicher Höhe. Dieser Hinweis steht aber allein in einem Container ohne feste Höhe;
 * dort kann die Prozenthöhe auf 0 zusammenfallen, und die Karte wäre zwar angezeigt, aber
 * ohne Fläche (.kh-card hat overflow:hidden). Die Höhe kommt hier aus dem Inhalt.
 */
.kh-location-booking.kh-booking-done .kh-booking-hint--after {
    display: flex;
    height: auto;
}