/* convi Booking – Frontend (Buchungswidget + Verwaltungsseite Stornieren/Umbuchen).
 *
 * DESIGNSYSTEM
 * Drei Ebenen, bewusst getrennt:
 *   1. --cbk-*        = die fünf im Backend (Reiter "Design") einstellbaren Werte. Sie werden zur
 *                       Laufzeit als Inline-Style NACH dieser Datei ausgegeben (siehe
 *                       CBK_Shortcode::design_css()); die Werte hier sind nur Fallbacks.
 *   2. --cnv-booking-* = der ÖFFENTLICHE, ZUGESICHERTE Vertrag (ab 1.9.0). Vollständige Achsen für
 *                       Farbe, Radius, Schatten, Abstand und Bedienelementgröße. Vorbelegt aus
 *                       Ebene 1, damit eine bestehende Installation optisch unverändert bleibt.
 *                       Dies ist die Ebene, an der ein Theme andockt.
 *   3. --cb-*         = die INTERNEN, abgeleiteten Werte, mit denen die Komponenten arbeiten.
 *                       Nicht Teil des Vertrags, können sich ändern.
 *
 * THEME-ADAPTER
 * Ein Theme überschreibt ausschließlich Ebene 2, auf der Wurzelklasse .cnv-booking. Weil die
 * Vorbelegung auf demselben Element steht, braucht der Adapter eine höhere Spezifität (ein
 * vorangestelltes body genügt) - ausdrücklich KEIN !important:
 *   body .cnv-booking {
 *       --cnv-booking-color-primary: var(--meine-markenfarbe);
 *       --cnv-booking-color-on-primary: #ffffff;
 *       --cnv-booking-radius-md: 10px;
 *   }
 * Es wird KEINE Kundenfarbe in dieser Datei hinterlegt - die Vorbelegung ist immer der im
 * Backend eingestellte Wert.
 *
 * SCOPING
 * Jede Regel in dieser Datei beginnt mit ".cbk-widget" - dem Wurzel-Element beider Views
 * (includes/views/widget.php und includes/views/manage.php). Es gibt keine ungescopten
 * Element-Regeln (kein button{}, input{}, select{}, label{}, table{}), das Plugin kann also weder
 * Formulare noch Buttons noch Kalender der einbindenden Website beeinflussen. Der zusätzliche
 * Wurzel-Selektor hebt zugleich die Spezifität so weit an, dass generische Theme-Regeln
 * (Elementor, Divi, Block-Themes) die Komponenten nicht versehentlich überschreiben - ohne dafür
 * !important zu benötigen.
 *
 * FUNKTIONALE SELEKTOREN
 * Klassen, die assets/js/frontend.js setzt oder liest, dürfen nicht umbenannt werden:
 * .cbk-calendar-cell, .cbk-calendar-day, .is-today, .is-selected, .cbk-slot-row,
 * .cbk-slot-button, .cbk-slot-confirm-button, .cbk-slot-empty, .cbk-has-time-panel,
 * .cbk-contact-mode, .cbk-is-wide - ebenso sämtliche data-cbk-*-Attribute.
 *
 * WURZELKLASSEN
 * .cbk-widget ist die bisherige Wurzel und bleibt unverändert die Grundlage aller Regeln hier.
 * .cnv-booking ist die zusätzliche öffentliche Wurzel (ab 1.9.0, siehe views/widget.php) und
 * trägt den Token-Vertrag. Beide stehen gemeinsam am selben Element; die Altklasse wird nicht
 * entfernt, damit kein bestehendes Theme-CSS und keine JS-Funktion bricht. */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
.cbk-widget {
    /* -- Ebene 1: Backend-gesteuert (Fallbacks, siehe Kopfkommentar) -- */
    --cbk-primary: #4f46e5;
    --cbk-text: #0f172a;
    --cbk-card-bg: #ffffff;
    --cbk-border: #e2e8f0;
    --cbk-radius: 16px;

    /* =====================================================================
       Ebene 2: ÖFFENTLICHER VERTRAG --cnv-booking-*
       Vorbelegung ausschließlich aus Ebene 1 bzw. aus den bisherigen festen Werten - die
       Darstellung einer bestehenden Installation ändert sich dadurch an keiner Stelle.
       ===================================================================== */
    --cnv-booking-color-primary: var(--cbk-primary);
    /* --cnv-booking-color-primary-hover wird weiter unten in einem @supports-Block belegt, weil
       der bisherige Wert eine color-mix()-Berechnung ist. Eine Custom Property mit einer vom
       Browser nicht unterstützten Funktion wäre erst bei ihrer VERWENDUNG ungültig und würde die
       betroffene Eigenschaft dann ganz entwerten - deshalb bleibt sie hier absichtlich ungesetzt
       und wird immer mit einem var()-Ersatzwert gelesen. */
    --cnv-booking-color-on-primary: #ffffff;

    --cnv-booking-color-text: var(--cbk-text);
    --cnv-booking-color-muted: rgba(15, 23, 42, 0.62);

    --cnv-booking-color-border: var(--cbk-border);

    --cnv-booking-color-surface: var(--cbk-card-bg);
    --cnv-booking-color-surface-soft: rgba(15, 23, 42, 0.03);

    --cnv-booking-color-success: #15803d;
    /* Noch von keiner Komponente benutzt: der Warnzustand entsteht erst mit der Unterscheidung
       "technisch nicht prüfbar" gegenüber "ausgebucht". Der Token gehört bereits jetzt in den
       Vertrag, damit ein Theme ihn nicht später nachziehen muss. */
    --cnv-booking-color-warning: #b54708;
    --cnv-booking-color-danger: #b42318;
    --cnv-booking-color-focus: var(--cnv-booking-color-primary);

    --cnv-booking-radius-sm: 8px;
    --cnv-booking-radius-md: 12px;
    --cnv-booking-radius-lg: 16px;

    --cnv-booking-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);

    --cnv-booking-space-xs: 4px;
    --cnv-booking-space-sm: 8px;
    --cnv-booking-space-md: 16px;
    --cnv-booking-space-lg: 24px;

    /* Höhe der Bedienelemente (Eingabefelder, Uhrzeiten, Buttons) und Zielgröße für
       Berührungsflächen. */
    --cnv-booking-control-height: 48px;
    --cnv-booking-touch-min: 44px;

    /* =====================================================================
       Ebene 3: interne, abgeleitete Werte
       ===================================================================== */

    /* -- Marke -- */
    --cb-primary: var(--cnv-booking-color-primary);
    /* Weiche Markentöne werden an der jeweiligen Stelle per color-mix() erzeugt, immer mit einer
       neutralen Fallback-Deklaration davor - so bekommen ältere Browser eine ruhige graue Fläche
       statt gar keiner. Bewusst NICHT als Custom Property abgelegt: eine nicht unterstützte
       color-mix()-Funktion wäre in einer Custom Property erst bei der Verwendung ungültig und
       würde die Eigenschaft dann komplett entwerten. */

    /* -- Flächen -- */
    --cb-surface: var(--cnv-booking-color-surface);
    --cb-surface-alt: var(--cnv-booking-color-surface-soft);
    --cb-surface-hover: rgba(15, 23, 42, 0.05);

    /* -- Text -- */
    --cb-text: var(--cnv-booking-color-text);
    --cb-text-muted: var(--cnv-booking-color-muted);
    --cb-text-faint: rgba(15, 23, 42, 0.42);

    /* -- Rahmen -- */
    --cb-border: var(--cnv-booking-color-border);
    --cb-border-hover: rgba(15, 23, 42, 0.22);

    /* -- Status -- */
    --cb-success: var(--cnv-booking-color-success);
    --cb-success-bg: #ecfdf3;
    --cb-danger: var(--cnv-booking-color-danger);
    --cb-danger-bg: #fef3f2;

    /* -- Radien: der äußere Kartenradius bleibt backend-gesteuert (--cbk-radius), die inneren
          Bausteine verwenden diese feste Staffel. --cb-radius-xl wird derzeit von keiner Komponente
          benutzt und ist bewusst als oberste Stufe der Staffel definiert, damit eine Kundenwebsite
          die Rundungen des Widgets geschlossen über vier Stufen nachjustieren kann. -- */
    --cb-radius-sm: var(--cnv-booking-radius-sm);
    --cb-radius-md: var(--cnv-booking-radius-md);
    --cb-radius-lg: var(--cnv-booking-radius-lg);
    --cb-radius-xl: 20px;

    /* -- Tiefe: sehr zurückhaltend, gestaffelt -- */
    --cb-shadow-sm: var(--cnv-booking-shadow-sm);
    --cb-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.07);

    /* -- Abstände: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 -- */
    --cb-space-1: var(--cnv-booking-space-xs);
    --cb-space-2: var(--cnv-booking-space-sm);
    --cb-space-3: 12px;
    --cb-space-4: var(--cnv-booking-space-md);
    --cb-space-5: 20px;
    --cb-space-6: var(--cnv-booking-space-lg);
    --cb-space-7: 32px;
    --cb-space-8: 40px;
    --cb-space-9: 48px;

    /* -- Bewegung: einheitlich und knapp -- */
    --cb-transition: 0.18s ease;

    position: relative;
    width: 100%;
    /* Löst genau das Problem, für das bis 1.10.0 eine JS-Funktion die ELTERNELEMENTE der
       einbindenden Seite per Inline-Style verändert hat: Viele Page-Builder bauen ihre Spalten als
       flex/grid mit align-items bzw. justify-items auf "center"/"flex-start" statt "stretch". Ein
       Kind ohne eigene Stretch-Angabe schrumpft dort auf seine Inhaltsbreite, obwohl width:100%
       gesetzt ist. align-self/justify-self ist die Eigenschaft, mit der sich ein EINZELNES Element
       aus dieser Ausrichtung löst - hier gesetzt vom Widget auf sich selbst, ohne ein einziges
       fremdes Element anzufassen. In einem Nicht-Flex/Grid-Kontext sind beide Angaben wirkungslos,
       das Verhalten ändert sich dort also nicht. */
    align-self: stretch;
    justify-self: stretch;
    max-width: 900px;
    /* Reine Sicherheitsuntergrenze (fester Pixelwert, absichtlich kein Prozentwert) für den
       äußerst seltenen Fall, dass das Widget in einer wirklich pathologischen Umgebung (z. B. ein
       CSS-Grid-Elternelement mit rein inhaltsbasierten "auto"-Spuren, ohne jede fr-/prozentuale
       Spur) landet, wo selbst normale, ungehinderte Breitenvererbung keine sinnvolle Breite liefern
       kann. Im Normalfall greift diese Untergrenze gar nicht - siehe die ausführliche Erklärung
       beim RESPONSIVE-Block weiter unten, warum die Breakpoint-Entscheidung per JavaScript (statt
       per CSS Container Query) getroffen wird, gerade damit diese Breitenvererbung nicht blockiert
       wird. */
    min-width: 280px;
    margin: 0 auto;
    background: var(--cb-surface);
    color: var(--cb-text);
    border: 1px solid var(--cb-border);
    border-radius: var(--cbk-radius);
    box-shadow: var(--cb-shadow-md);
    overflow: hidden;
    /* font-family bewusst geerbt: das Widget uebernimmt automatisch die Schrift der jeweiligen
       Website. Die Schriftgroesse ist dagegen bewusst FEST auf 16px gesetzt (alle Groessen im
       Widget sind em-Werte und leiten sich davon ab) - so sieht das Buchungssystem auf jeder
       Website gleich aus, unabhaengig davon, ob das Theme 13px oder 19px Basisgroesse setzt, und
       Eingabefelder bleiben zugleich sicher ueber der 16px-Grenze, ab der iOS Safari beim
       Fokussieren automatisch hineinzoomt. */
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    /* Sicherheitsnetz gegen einzelne, sehr lange Wörter/Werte ohne Umbruchmöglichkeit (z. B. eine
       lange E-Mail-Adresse oder ein langes Zusatzfeld-Label ohne Leerzeichen) - verhindert, dass
       SOLCHER Text über den Rand hinausläuft und (wegen overflow:hidden oben) abgeschnitten wird.
       Bewusst NUR overflow-wrap und NICHT zusätzlich word-break:break-word - letzteres bricht
       Wörter auch dann zeichenweise um, wenn genug Platz da wäre, und hätte in sehr schmalen
       Spalten Überschriften wie "Datum & Uhrzeit wählen" in senkrecht gestapelte Buchstaben
       zerlegt. overflow-wrap vererbt sich, muss also nur einmal hier gesetzt werden. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
.cbk-widget * {
    box-sizing: border-box;
}
.cbk-widget svg {
    display: inline-block;
    vertical-align: middle;
}

/* Belegt --cnv-booking-color-primary-hover mit genau dem Wert, den die Hover-Zustände bisher
   direkt berechnet haben. Der @supports-Rahmen ist notwendig, damit in Browsern ohne color-mix()
   die Variable ungesetzt BLEIBT - dort greift dann der var()-Ersatzwert an der Verwendungsstelle
   und das Verhalten ist unverändert wie vor 1.9.0. Ein Theme kann den Token jederzeit mit einer
   ganz normalen Farbe überschreiben, dann gilt diese in allen Browsern. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .cbk-widget {
        --cnv-booking-color-primary-hover: color-mix(in srgb, var(--cnv-booking-color-primary) 86%, #000);
    }
}

/* =========================================================================
   2. convi MEDIA Branding (Free-Version)
   Ab 1.11.0 kein diagonales Band mehr über der Kartenecke, sondern ein ruhiger, neutraler
   Hinweis in der Fußzeile der Karte - dieselbe Stelle wie der Datenschutz-Link.

   FUNKTIONAL UNVERÄNDERT: das Branding wird weiterhin ausschließlich über
   design_show_branding ein-/ausgeblendet (Free zeigt es, Pro kann es abschalten); an diesem
   Gating ist nichts geändert. Geändert ist nur die Darstellung.

   Der Klassenname .cbk-ribbon bleibt bewusst erhalten - eine bestehende Theme- oder
   Kundenregel, die ihn adressiert, läuft dadurch nicht ins Leere.
   ========================================================================= */
.cbk-widget .cbk-ribbon {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-space-2);
    padding: var(--cb-space-1) var(--cb-space-2);
    border-radius: var(--cb-radius-sm);
    color: var(--cb-text-faint);
    text-decoration: none;
    line-height: 1;
    /* Bewusst eine feste, neutrale System-Schriftart: das Wort "by" steht unmittelbar neben
       einem Markenlogo und soll auf jeder Website gleich aussehen. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: color var(--cb-transition);
}
.cbk-widget .cbk-ribbon:hover,
.cbk-widget .cbk-ribbon:focus-visible {
    color: var(--cb-text-muted);
    text-decoration: none;
}
.cbk-widget .cbk-ribbon:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
.cbk-widget .cbk-ribbon-by {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
/* Doppelte Absicherung der Logogröße (max-width/max-height UND object-fit), damit das Logo
   unabhängig von den Abmessungen der Bilddatei nie größer als vorgesehen erscheint. */
.cbk-widget .cbk-ribbon-logo {
    display: block;
    flex: none;
    width: 72px;
    height: auto;
    max-width: 72px;
    /* Die Hoehe muss zum Seitenverhaeltnis der Datei passen (74x29, also 2,55:1).
       Bis 1.14.0 stand hier max-height:14px - das war die BINDENDE Begrenzung und hat die
       Wortmarke auf rund 36x14px gedrueckt, also auf gut die Haelfte der angegebenen Breite.
       Lesbar war sie damit nicht mehr. Jetzt begrenzt die Breite, die Hoehe laesst sie zu. */
    max-height: 28px;
    object-fit: contain;
    /* Das Logo ist eine dunkle Wortmarke auf hellem Grund - dieselbe Zurückhaltung wie beim
       übrigen Fußzeileninhalt, ohne das Logo selbst einzufärben. Etwas weniger gedaempft als
       bis 1.14.0, sonst bleibt die Marke trotz richtiger Groesse schwer zu lesen. */
    opacity: 0.8;
}
.cbk-widget .cbk-ribbon:hover .cbk-ribbon-logo,
.cbk-widget .cbk-ribbon:focus-visible .cbk-ribbon-logo {
    opacity: 1;
}

/* =========================================================================
   3. Typografie
   ========================================================================= */
.cbk-widget .cbk-step-title {
    margin: 0 0 var(--cb-space-5);
    font-size: 1.0625em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cb-text);
}

/* =========================================================================
   4. Hinweise / Meldungen
   ========================================================================= */
.cbk-widget .cbk-notice {
    display: flex;
    margin: var(--cb-space-6);
    padding: var(--cb-space-4) var(--cb-space-5);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    background: var(--cb-surface-alt);
    font-size: 0.9375em;
    line-height: 1.55;
    color: var(--cb-text);
}
.cbk-widget .cbk-notice-success {
    border-color: rgba(21, 128, 61, 0.22);
    background: var(--cb-success-bg);
    color: var(--cb-success);
}
.cbk-widget .cbk-notice-error {
    border-color: rgba(180, 35, 24, 0.22);
    background: var(--cb-danger-bg);
    color: var(--cb-danger);
}

/* =========================================================================
   5. Schritt 1 (nur bei mehreren Terminarten): Terminart wählen
   Die Terminarten sind <button>-Elemente (siehe includes/views/widget.php) und werden hier als
   Auswahl-Karten dargestellt.
   ========================================================================= */
.cbk-widget .cbk-step-type {
    padding: var(--cb-space-6);
    /* Explizit statt nur "durchscheinend" (background ist keine vererbte CSS-Eigenschaft) - siehe
       ausführliche Begründung bei den Panels weiter unten. */
    background: var(--cb-surface);
}
.cbk-widget .cbk-type-list {
    display: flex;
    flex-direction: column;
    gap: var(--cb-space-3);
}
.cbk-widget .cbk-type-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cb-space-1);
    width: 100%;
    min-height: var(--cnv-booking-touch-min);
    margin: 0;
    padding: var(--cb-space-4) var(--cb-space-5);
    text-align: left;
    font-family: inherit;
    font-size: 1em;
    color: var(--cb-text);
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    /* Der farbige Streifen links trägt die im Backend je Terminart hinterlegte Farbe (Inline-Style
       im Markup) - deshalb hier nur die Breite, nicht die Farbe setzen. */
    border-left-width: 4px;
    border-radius: var(--cb-radius-md);
    cursor: pointer;
    transition: border-color var(--cb-transition), box-shadow var(--cb-transition),
                background-color var(--cb-transition);
}
.cbk-widget .cbk-type-option:hover {
    border-top-color: var(--cb-border-hover);
    border-right-color: var(--cb-border-hover);
    border-bottom-color: var(--cb-border-hover);
    box-shadow: var(--cb-shadow-sm);
}
.cbk-widget .cbk-type-option:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
.cbk-widget .cbk-type-name {
    font-size: 1em;
    font-weight: 650;
    line-height: 1.35;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.cbk-widget .cbk-type-duration {
    font-size: 0.8125em;
    font-weight: 500;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-type-description {
    margin-top: var(--cb-space-1);
    font-size: 0.875em;
    line-height: 1.5;
    color: var(--cb-text-muted);
}

/* =========================================================================
   6. Buchungs-Ansicht: Info | Kalender | Uhrzeiten
   Mobile-first: die BASIS (ohne .cbk-is-wide) ist bewusst die schmale, einspaltige Ansicht - das
   ist die Grundlage, auf der jede Widget-Breite aufbaut. Die mehrspaltige Ansicht kommt erst über
   die Klasse .cbk-is-wide weiter unten hinzu (reagiert auf die per JS gemessene tatsächliche
   Widget-Breite statt auf die Fensterbreite).
   ========================================================================= */
.cbk-widget .cbk-booking-grid {
    display: grid;
    grid-template-columns: 1fr;
}
/* Verhindert das klassische CSS-Grid-"Blowout": Grid-Elemente haben per Default eine implizite
   Mindestbreite in Höhe ihres eigenen Inhalts (min-width:auto), NICHT 0. Ist dieser Inhalt (z. B.
   "Datum & Uhrzeit wählen") breiter als die zugewiesene Spaltenbreite, wird das gesamte Grid
   breiter als der verfügbare Platz gezogen - und weil .cbk-widget overflow:hidden hat, wird der
   Überstand mitten im Wort abgeschnitten statt umzubrechen. Mit min-width:0 dürfen die Panels
   stattdessen schrumpfen und ihr Text bricht normal um. */
.cbk-widget .cbk-info-panel,
.cbk-widget .cbk-calendar-panel,
.cbk-widget .cbk-time-panel,
.cbk-widget .cbk-contact-panel {
    min-width: 0;
    /* Explizit statt nur "durchscheinend": "background" ist KEINE vererbte CSS-Eigenschaft, ein
       transparenter Panel-Hintergrund zeigt normalerweise zwar den Karten-Hintergrund darunter
       durch, ist aber anfällig dafür, dass eine externe Theme-Regel (z. B. generisch auf "div")
       hier eine andere Fläche einfärbt. Direkt an der Ursache behoben, indem jedes Panel seinen
       Hintergrund selbst setzt. */
    background: var(--cb-surface);
}

.cbk-widget .cbk-contact-panel {
    position: relative;
    padding: var(--cb-space-6);
}
.cbk-widget .cbk-contact-panel form {
    max-width: 440px;
}

/* -------------------------------------------------------------------------
   SCHRITTSTEUERUNG (.cbk-view-date / .cbk-view-time / .cbk-view-contact)
   Genau EINE Klasse am .cbk-booking-grid sagt, welcher Schritt der aktuelle ist. Was daraus
   sichtbar wird, entscheidet die Breite:

   SCHMAL (Grundzustand, mobile-first): es ist immer nur EIN Schritt zu sehen -
   Datum -> Uhrzeit -> Angaben. Ein neuer Schritt erscheint dadurch nie mehrere hundert Pixel
   unterhalb des vorherigen; das Info-Panel bleibt als kompakte Zusammenfassung darüber stehen.

   BREIT (.cbk-is-wide, weiter unten): unverändert das bewährte Muster Info | Kalender | Uhrzeiten
   nebeneinander; nur der Kontakt-Schritt ersetzt die beiden rechten Spalten.

   Das :not([hidden]) in den Einblend-Regeln ist Absicht: das hidden-Attribut muss immer gewinnen
   (das Uhrzeiten-Panel ist vor der ersten Datumswahl ausgeblendet), und eine Klassenregel hätte
   sonst die höhere Spezifität.
   ------------------------------------------------------------------------- */
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid .cbk-calendar-panel,
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid .cbk-time-panel,
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid .cbk-contact-panel {
    display: none;
}
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid.cbk-view-date .cbk-calendar-panel:not([hidden]),
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid.cbk-view-time .cbk-time-panel:not([hidden]),
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid.cbk-view-contact .cbk-contact-panel:not([hidden]) {
    display: block;
}
/* Der letzte sichtbare Schritt trägt keine Trennlinie nach unten - sonst steht mitten in der
   Karte ein Strich ohne etwas dahinter. */
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid .cbk-calendar-panel,
.cbk-widget:not(.cbk-is-wide) .cbk-booking-grid .cbk-time-panel {
    border-bottom: none;
}

/* Breites Widget: der Kontakt-Schritt ersetzt Kalender und Uhrzeiten, das Info-Panel links
   bleibt durchgehend stehen (wie bei Calendly). */
.cbk-widget.cbk-is-wide .cbk-booking-grid .cbk-contact-panel {
    display: none;
}
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-view-contact .cbk-calendar-panel,
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-view-contact .cbk-time-panel {
    display: none;
}
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-view-contact .cbk-contact-panel:not([hidden]) {
    display: block;
}
/* Der Zurück-Textlink über dem jeweiligen Schritt ist nur im schmalen Schritt-für-Schritt-Ablauf
   nötig; breit sind Kalender und Uhrzeiten ohnehin gleichzeitig sichtbar. */
.cbk-widget.cbk-is-wide .cbk-time-panel .cbk-step-back {
    display: none;
}
.cbk-widget .cbk-step-back {
    margin-bottom: var(--cb-space-4);
}

/* -- Info-Panel links -- */
.cbk-widget .cbk-info-panel {
    display: flex;
    flex-direction: column;
    padding: var(--cb-space-6);
    border-bottom: 1px solid var(--cb-border);
    background: var(--cb-surface-alt);
}
.cbk-widget .cbk-business-logo {
    display: block;
    max-width: 100%;
    max-height: 40px;
    margin: 0 0 var(--cb-space-5);
    object-fit: contain;
}
.cbk-widget .cbk-business-name {
    margin: 0 0 var(--cb-space-4);
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cb-text-muted);
}
/* Ansprechpartner-Karte (Pro): Avatar + Name der Person, mit der der Termin stattfindet. */
.cbk-widget .cbk-host {
    display: flex;
    align-items: center;
    gap: var(--cb-space-3);
    margin: 0 0 var(--cb-space-4);
    min-width: 0;
}
/* .cbk-widget-Präfix erhöht hier zusätzlich die Spezifität, damit ein generisches Theme-CSS
   (z. B. "img{border-radius:4px}" oder ".entry-content img{...}"), das je nach Theme NACH diesem
   Stylesheet geladen wird, den Kreis-Zuschnitt nicht überschreiben kann - ohne !important. */
.cbk-widget .cbk-host-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: block;
}
.cbk-widget .cbk-host-name {
    font-size: 0.9375em;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cbk-widget .cbk-event-title {
    margin: 0 0 var(--cb-space-3);
    font-size: 1.375em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--cb-text);
    /* Zusammengesetzte deutsche Wörter ("Kraftfahrzeughaftpflichtversicherungsberatung") passen in
       eine 260px-Spalte nicht in eine Zeile. Mit hyphens:auto trennt der Browser sie anhand der
       Sprache der Seite an einer sinnvollen Stelle MIT Trennstrich, statt sie über das
       Sicherheitsnetz overflow-wrap mitten im Wort ohne Trennstrich zu zerschneiden. */
    hyphens: auto;
    -webkit-hyphens: auto;
}
.cbk-widget .cbk-event-duration {
    display: flex;
    align-items: center;
    gap: var(--cb-space-2);
    margin: 0 0 var(--cb-space-4);
    font-size: 0.9375em;
    font-weight: 500;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-icon {
    width: 18px;
    height: 18px;
    flex: none;
}
.cbk-widget .cbk-event-description {
    margin: 0 0 var(--cb-space-5);
    font-size: 0.9375em;
    line-height: 1.6;
    color: var(--cb-text-muted);
    white-space: pre-line;
}

/* -- Footer ganz unten an der Karte: eigenes Geschwister-Element von
   .cbk-step-type/.cbk-step-booking/.cbk-step-success, daher unabhängig vom aktuell sichtbaren
   Schritt immer sichtbar (wie bei Calendly). -- */
.cbk-widget .cbk-widget-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cb-space-2) var(--cb-space-4);
    padding: var(--cb-space-3) var(--cb-space-6);
    font-size: 0.75em;
    border-top: 1px solid var(--cb-border);
    background: var(--cb-surface-alt);
}
/* Steht das Branding allein in der Fußzeile (keine Datenschutzseite hinterlegt), rückt es an den
   rechten Rand statt in die Mitte - dieselbe Stelle wie sonst auch. */
.cbk-widget .cbk-widget-footer > :only-child {
    margin-left: auto;
}
.cbk-widget .cbk-footer-link {
    color: var(--cb-text-muted);
    text-decoration: none;
    min-height: var(--cnv-booking-touch-min);
    display: inline-flex;
    align-items: center;
}
.cbk-widget .cbk-footer-link:hover,
.cbk-widget .cbk-footer-link:focus-visible {
    color: var(--cb-text);
    text-decoration: underline;
}

/* -- Textlink-Button ("Andere Terminart wählen") -- */
.cbk-widget .cbk-button-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--cb-space-1);
    margin: 0;
    /* Auch Textlinks sind Bedienelemente: die Zielgroesse von 44px gilt hier genauso wie fuer
       Knoepfe (Zurueck-Wege im Schritt-fuer-Schritt-Ablauf). */
    min-height: var(--cnv-booking-touch-min);
    padding: var(--cb-space-2) 0;
    background: none;
    border: none;
    color: var(--cb-primary);
    font-family: inherit;
    font-size: 0.875em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--cb-transition);
}
.cbk-widget .cbk-button-link:hover {
    text-decoration: underline;
}
.cbk-widget .cbk-button-link:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
    border-radius: var(--cb-radius-sm);
}

/* =========================================================================
   7. Kalender
   ========================================================================= */
.cbk-widget .cbk-calendar-panel {
    padding: var(--cb-space-6);
    border-bottom: 1px solid var(--cb-border);
}
.cbk-widget .cbk-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cb-space-3);
    margin-bottom: var(--cb-space-4);
}
.cbk-widget .cbk-calendar-month-label {
    font-size: 1em;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--cb-text);
}
.cbk-widget .cbk-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* Berührungsfläche: mindestens 44x44 px (vorher 36x36). */
    width: var(--cnv-booking-touch-min);
    height: var(--cnv-booking-touch-min);
    padding: 0;
    border-radius: var(--cb-radius-sm);
    border: 1px solid var(--cb-border);
    background: var(--cb-surface);
    color: var(--cb-text-muted);
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--cb-transition), border-color var(--cb-transition),
                color var(--cb-transition);
}
.cbk-widget .cbk-calendar-nav:hover:not(:disabled) {
    border-color: var(--cb-border-hover);
    background: var(--cb-surface-hover);
    color: var(--cb-text);
}
.cbk-widget .cbk-calendar-nav:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
.cbk-widget .cbk-calendar-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.cbk-widget .cbk-calendar-weekdays,
.cbk-widget .cbk-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cbk-widget .cbk-calendar-weekdays {
    margin-bottom: var(--cb-space-2);
}
.cbk-widget .cbk-calendar-weekdays span {
    padding: var(--cb-space-1) 0;
    text-align: center;
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cb-text-faint);
}
/* Tageszellen: bewusst KEIN aspect-ratio (das zwang die Zellenhöhe früher an die - bei einer
   großzügig breiten Kalenderspalte entsprechend große - Zellenbreite). Die Zelle ist stattdessen
   nur ein Flex-Container mit fester Mindesthöhe (min-height statt height, damit eine größere
   System-Schriftgröße die Zeile noch wachsen lassen kann statt Inhalt abzuschneiden); die
   Spaltenbreite bleibt davon unabhängig - der Kalender darf also breit bleiben, ohne dass die
   Zeilen mitwachsen. Der eigentliche Tages-Marker (.cbk-calendar-day) bekommt eine eigene, von der
   Zellenbreite unabhängige feste Größe und wird per Flexbox zentriert. */
.cbk-widget .cbk-calendar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}
.cbk-widget .cbk-calendar-day {
    position: relative;
    flex: none;
    /* 44px ist die Zielgröße (Touch-Target), aber nie mehr als die Spalte hergibt: in einem sehr
       schmalen Widget sind die sieben Spalten nur ~42px breit, ein fester 44px-Kreis würde dort in
       die Nachbarspalte ragen und die Kreise sichtbar aneinanderstoßen lassen. */
    width: 100%;
    max-width: var(--cnv-booking-touch-min);
    height: var(--cnv-booking-touch-min);
    padding: 0;
    border: 1px solid transparent;
    background: none;
    border-radius: 50%;
    font-family: inherit;
    font-size: 0.875em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--cb-text);
    cursor: pointer;
    transition: background-color var(--cb-transition), color var(--cb-transition),
                border-color var(--cb-transition);
}
/* Verfügbarer Tag: ruhig getönte Fläche, damit auswählbare Tage sich klar von gesperrten abheben,
   ohne dass die Markenfarbe den ganzen Kalender dominiert. */
.cbk-widget .cbk-calendar-day:not(:disabled) {
    background: var(--cb-surface-alt);
    font-weight: 600;
}
.cbk-widget .cbk-calendar-day:hover:not(:disabled) {
    background: rgba(15, 23, 42, 0.09); /* Fallback ohne color-mix() */
    background: color-mix(in srgb, var(--cb-primary) 12%, transparent);
    border-color: rgba(15, 23, 42, 0.14);
    border-color: color-mix(in srgb, var(--cb-primary) 28%, transparent);
}
.cbk-widget .cbk-calendar-day:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
/* Gesperrt / vergangen / ausgebucht: eindeutig deaktiviert, keine Hover-Reaktion. */
.cbk-widget .cbk-calendar-day:disabled {
    background: none;
    color: var(--cb-text-faint);
    font-weight: 400;
    cursor: default;
}
.cbk-widget .cbk-calendar-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cb-primary);
}
.cbk-widget .cbk-calendar-day.is-selected,
.cbk-widget .cbk-calendar-day.is-selected:hover {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: var(--cnv-booking-color-on-primary);
    font-weight: 700;
}
/* Der Heute-Punkt sitzt auf der Markenfarbe - er MUSS deshalb dieselbe Kontrastfarbe verwenden
   wie der Text darauf, sonst verschwindet er bei einer hellen Primärfarbe. */
.cbk-widget .cbk-calendar-day.is-selected.is-today::after {
    background: var(--cnv-booking-color-on-primary);
}
.cbk-widget .cbk-timezone-label {
    display: flex;
    align-items: center;
    margin: var(--cb-space-6) 0 0;
    padding-top: var(--cb-space-4);
    border-top: 1px solid var(--cb-border);
    font-size: 0.75em;
    color: var(--cb-text-faint);
}

/* =========================================================================
   8. Uhrzeiten-Panel
   ========================================================================= */
.cbk-widget .cbk-time-panel {
    padding: var(--cb-space-6);
    border-bottom: 1px solid var(--cb-border);
    max-height: 460px;
    overflow-y: auto;
}
.cbk-widget .cbk-time-panel-date {
    margin: 0 0 var(--cb-space-4);
    font-size: 0.9375em;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--cb-text);
}
/* Die Uhrzeiten liegen als gleich große Kacheln in einem auto-fill-Raster: ~2 Spalten in der
   schmalen Desktop-Sidebar, ~3 bei breiteren Containern - ohne JS-Messung, ohne Container Query.
   Ab 1.11.0 sind die Buttons selbst die Rasterelemente (vorher lag eine Zwischenzeile dazwischen,
   die sich beim Auswählen auf volle Breite zog und dadurch alle folgenden Uhrzeiten versprang). */
.cbk-widget .cbk-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--cb-space-2);
}
.cbk-widget .cbk-slots:empty {
    display: none;
}
/* Auswählbare Uhrzeit: neutral gerahmt, die Markenfarbe erscheint erst bei Hover/Auswahl. */
.cbk-widget .cbk-slot-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: var(--cnv-booking-control-height);
    padding: var(--cb-space-3) var(--cb-space-3);
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    color: var(--cb-text);
    border-radius: var(--cb-radius-md);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9375em;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--cb-transition), color var(--cb-transition),
                border-color var(--cb-transition), box-shadow var(--cb-transition);
}
.cbk-widget .cbk-slot-button:hover {
    border-color: var(--cb-primary);
    background: rgba(15, 23, 42, 0.04); /* Fallback ohne color-mix() */
    background: color-mix(in srgb, var(--cb-primary) 8%, transparent);
    color: var(--cb-primary);
    box-shadow: var(--cb-shadow-sm);
}
.cbk-widget .cbk-slot-button:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
/* Ausgewählte Uhrzeit: bleibt ein echtes <button> mit aria-pressed="true" und behält exakt
   seine Abmessungen - die Auswahl färbt nur, sie verschiebt nichts. */
.cbk-widget .cbk-slot-button.is-selected,
.cbk-widget .cbk-slot-button.is-selected:hover {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: var(--cnv-booking-color-on-primary);
    box-shadow: none;
}
/* Bestätigungsleiste: liegt AUSSERHALB des Slot-Rasters und klebt am unteren Rand des
   Uhrzeiten-Bereichs. Dadurch ist sie auch nach einer langen Uhrzeitenliste sofort erreichbar,
   ohne dass die Auswahl das Raster umbaut. */
.cbk-widget .cbk-slot-confirm-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cb-space-3);
    margin-top: var(--cb-space-5);
    padding-top: var(--cb-space-4);
    border-top: 1px solid var(--cb-border);
    background: var(--cb-surface);
}
.cbk-widget .cbk-slot-confirm-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875em;
    font-weight: 600;
    color: var(--cb-text);
}
.cbk-widget .cbk-slot-confirm-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 132px;
}
/* Leer-/Ladezustand im Uhrzeiten-Panel und im Kalender-Grid. */
.cbk-widget .cbk-slot-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--cb-space-5);
    border: 1px dashed var(--cb-border);
    border-radius: var(--cb-radius-md);
    background: var(--cb-surface-alt);
    text-align: center;
    font-size: 0.875em;
    color: var(--cb-text-muted);
}

/* =========================================================================
   9. Kontakt-Schritt: Formular
   ========================================================================= */
/* Zusammenfassung des gewählten Termins über dem Formular - dieselbe Maximalbreite wie das
   Formular darunter, damit beide bündig stehen. */
.cbk-widget .cbk-selected-slot-label {
    max-width: 440px;
    margin: 0 0 var(--cb-space-5);
    padding: var(--cb-space-4) var(--cb-space-5);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    background: var(--cb-surface-alt);
    font-size: 0.9375em;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cb-text);
}

/* Feld (ab 1.11.0) = <div class="cbk-field"> mit eigenem <label for>, dem Eingabefeld und einem
   Platz für die feldbezogene Fehlermeldung. Die Umstellung von einem umschließenden <label> auf
   ein verknüpftes label[for] war nötig, damit jedes Feld eine eigene id hat - erst dadurch können
   aria-describedby (Fehlermeldung) und ein gezielter Fokus auf das fehlerhafte Feld greifen. */
.cbk-widget .cbk-field {
    display: block;
    margin-bottom: var(--cb-space-5);
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cb-text);
}
.cbk-widget .cbk-field-label {
    display: block;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cb-text);
}
/* Das Sternchen ist NUR die optische Kurzform - die Pflichtangabe selbst steht im required- bzw.
   aria-required-Attribut und zusätzlich als vorlesbarer Text daneben. */
.cbk-widget .cbk-required-mark {
    color: var(--cb-danger);
    font-weight: 700;
}
/* Feldbezogene Fehlermeldung: per aria-describedby mit genau diesem Feld verknüpft, im
   Ruhezustand über das hidden-Attribut ohne Platzbedarf. */
.cbk-widget .cbk-field-error {
    margin: var(--cb-space-2) 0 0;
    font-size: 0.8125em;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cb-danger);
}
.cbk-widget .cbk-field--invalid .cbk-field-label {
    color: var(--cb-danger);
}
.cbk-widget .cbk-field--invalid input[type="text"],
.cbk-widget .cbk-field--invalid input[type="email"],
.cbk-widget .cbk-field--invalid input[type="tel"],
.cbk-widget .cbk-field--invalid textarea {
    border-color: var(--cb-danger);
}
.cbk-widget .cbk-field input[type="text"],
.cbk-widget .cbk-field input[type="email"],
.cbk-widget .cbk-field input[type="tel"],
.cbk-widget .cbk-field textarea {
    display: block;
    width: 100%;
    margin-top: var(--cb-space-2);
    min-height: var(--cnv-booking-control-height);
    padding: var(--cb-space-3) var(--cb-space-4);
    font-family: inherit;
    font-weight: 400;
    /* Bewusst ein absoluter Wert und KEIN em: das umgebende <label class="cbk-field"> setzt bereits
       0.875em, ein "1em" hier ergäbe also nur 14px - und unter 16px zoomt iOS Safari beim
       Fokussieren eines Feldes automatisch in die Seite hinein. */
    font-size: 16px;
    line-height: 1.45;
    color: var(--cb-text);
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    box-shadow: none;
    transition: border-color var(--cb-transition), box-shadow var(--cb-transition);
}
.cbk-widget .cbk-field textarea {
    min-height: 104px;
    padding-top: var(--cb-space-3);
    resize: vertical;
}
.cbk-widget .cbk-field input::placeholder,
.cbk-widget .cbk-field textarea::placeholder {
    color: var(--cb-text-faint);
    opacity: 1;
}
.cbk-widget .cbk-field input[type="text"]:hover,
.cbk-widget .cbk-field input[type="email"]:hover,
.cbk-widget .cbk-field input[type="tel"]:hover,
.cbk-widget .cbk-field textarea:hover {
    border-color: var(--cb-border-hover);
}
/* Bewusst KEIN "outline:none": ein transparenter Outline bleibt im Windows-Kontrastmodus
   (forced-colors) sichtbar, weil das Betriebssystem ihm dort eine echte Farbe gibt - der
   sichtbare Ersatz im Normalfall ist der farbige Rahmen plus der Ring darunter. */
.cbk-widget .cbk-field input[type="text"]:focus-visible,
.cbk-widget .cbk-field input[type="email"]:focus-visible,
.cbk-widget .cbk-field input[type="tel"]:focus-visible,
.cbk-widget .cbk-field textarea:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--cb-primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.28); /* Fallback ohne color-mix() */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary) 38%, transparent);
}
/* Ungültige Felder erst NACH einem Absendeversuch markieren (novalidate + :user-invalid), damit
   niemand beim bloßen Tippen rot angeschrien wird. */
.cbk-widget .cbk-field input:user-invalid,
.cbk-widget .cbk-field textarea:user-invalid {
    border-color: var(--cb-danger);
}

/* -- Checkbox (Zusatzfelder vom Typ "checkbox") --
   Die Berührungsfläche ist das GESAMTE Label, nicht nur das 22px-Kästchen: mit min-height 44px
   ist die Zielgröße erfüllt, ohne das Kästchen selbst unproportioniert groß zu zeichnen. */
.cbk-widget .cbk-field-checkbox {
    display: flex;
    align-items: center;
    gap: var(--cb-space-3);
    min-height: var(--cnv-booking-touch-min);
    padding: var(--cb-space-2) 0;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
.cbk-widget .cbk-field-checkbox-label {
    min-width: 0;
}
/* Die native Checkbox bleibt erhalten (Name, Value, required, Tastaturbedienung, Screenreader) -
   sie wird nur neu gezeichnet, nicht ersetzt oder versteckt. */
.cbk-widget .cbk-field-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cb-border-hover);
    border-radius: 6px;
    background-color: var(--cb-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    cursor: pointer;
    transition: background-color var(--cb-transition), border-color var(--cb-transition),
                box-shadow var(--cb-transition);
}
.cbk-widget .cbk-field-checkbox input[type="checkbox"]:hover {
    border-color: var(--cb-primary);
}
.cbk-widget .cbk-field-checkbox input[type="checkbox"]:checked {
    background-color: var(--cb-primary);
    border-color: var(--cb-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4l3 3 6-6' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cbk-widget .cbk-field-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}

/* -- Telefon/Teams-Auswahl am Ende des Formulars (nur sichtbar, wenn im Backend unter
   "Integrationen" aktiviert). Die nativen Radios bleiben funktional erhalten und nur optisch
   verborgen; die Karte ist das <label> darum herum. -- */
.cbk-widget .cbk-meeting-type-field {
    margin-bottom: var(--cb-space-5);
}
.cbk-widget .cbk-field-label-standalone {
    display: block;
    margin-bottom: var(--cb-space-3);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--cb-text);
}
.cbk-widget .cbk-meeting-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cb-space-3);
}
.cbk-widget .cbk-meeting-type-option {
    position: relative;
    flex: 1 1 130px;
    /* Verhindert dasselbe Blowout-Problem wie bei den Grid-Panels oben, nur für Flexbox: ohne
       min-width:0 könnte "Teams-Meeting" die Karte auf sehr schmalen Bildschirmen breiter ziehen,
       als der verfügbare Platz erlaubt, statt normal umzubrechen. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cb-space-2);
    min-height: 88px;
    padding: var(--cb-space-4) var(--cb-space-3);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    background: var(--cb-surface);
    cursor: pointer;
    font-size: 0.875em;
    font-weight: 600;
    text-align: center;
    transition: border-color var(--cb-transition), box-shadow var(--cb-transition),
                background-color var(--cb-transition);
}
.cbk-widget .cbk-meeting-type-option:hover {
    border-color: var(--cb-border-hover);
    background: var(--cb-surface-alt);
}
.cbk-widget .cbk-meeting-type-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Aktive Karte hervorheben - primär über :has(), zusätzlich über die JS-Klasse .is-selected
   (assets/js/frontend.js) für Browser ohne :has()-Unterstützung. */
.cbk-widget .cbk-meeting-type-option:has(input:checked),
.cbk-widget .cbk-meeting-type-option.is-selected {
    border-color: var(--cb-primary);
    box-shadow: inset 0 0 0 1px var(--cb-primary);
    background: rgba(15, 23, 42, 0.03); /* Fallback ohne color-mix() */
    background: color-mix(in srgb, var(--cb-primary) 6%, transparent);
}
.cbk-widget .cbk-meeting-type-option:has(input:checked) .cbk-meeting-type-icon,
.cbk-widget .cbk-meeting-type-option.is-selected .cbk-meeting-type-icon {
    color: var(--cb-primary);
    opacity: 1;
}
.cbk-widget .cbk-meeting-type-option:has(input:focus-visible) {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
.cbk-widget .cbk-meeting-type-icon {
    width: 24px;
    height: 24px;
    color: var(--cb-text-muted);
    opacity: 0.85;
}
.cbk-widget .cbk-meeting-type-icon svg {
    width: 100%;
    height: 100%;
}
.cbk-widget .cbk-meeting-type-label {
    line-height: 1.3;
}

.cbk-widget .cbk-privacy-notice {
    margin: 0 0 var(--cb-space-5);
    font-size: 0.8125em;
    line-height: 1.6;
    font-weight: 400;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-privacy-notice a {
    color: var(--cb-primary);
    text-decoration: underline;
}
/* Zusammenfassende Meldung über dem Absende-Button: nimmt im Ruhezustand keinen Platz ein.
   Die Ansage für Screenreader läuft NICHT über dieses Element, sondern über die eigene
   role="alert"-Zeile am Ende des Widgets - sonst würde jede Zwischenänderung mitgesprochen. */
.cbk-widget .cbk-form-message {
    margin: 0;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cb-danger);
}
.cbk-widget .cbk-form-message:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
    border-radius: var(--cb-radius-sm);
}
.cbk-widget .cbk-form-message:not(:empty) {
    margin-bottom: var(--cb-space-4);
    padding: var(--cb-space-3) var(--cb-space-4);
    border: 1px solid rgba(180, 35, 24, 0.22);
    border-radius: var(--cb-radius-md);
    background: var(--cb-danger-bg);
}

/* =========================================================================
   10. Buttons
   ========================================================================= */
.cbk-widget .cbk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cnv-booking-control-height);
    padding: var(--cb-space-3) var(--cb-space-6);
    border-radius: var(--cb-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--cb-transition), border-color var(--cb-transition),
                color var(--cb-transition), box-shadow var(--cb-transition);
}
.cbk-widget .cbk-button:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
}
.cbk-widget .cbk-button-primary {
    width: 100%;
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: var(--cnv-booking-color-on-primary);
}
.cbk-widget .cbk-button-primary:hover:not(:disabled) {
    background: var(--cnv-booking-color-primary-hover, color-mix(in srgb, var(--cb-primary) 86%, #000));
    box-shadow: var(--cb-shadow-sm);
}
/* Auch der Ladezustand ("Wird gesendet …", von assets/js/frontend.js gesetzt) läuft über
   :disabled - er ist damit eindeutig als nicht bedienbar erkennbar. */
.cbk-widget .cbk-button:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}
.cbk-widget .cbk-button-secondary {
    background: var(--cb-surface);
    border-color: var(--cb-border);
    color: var(--cb-text);
}
.cbk-widget .cbk-button-secondary:hover {
    border-color: var(--cb-border-hover);
    background: var(--cb-surface-alt);
    color: var(--cb-text);
}
.cbk-widget .cbk-button-danger {
    background: var(--cb-surface);
    border-color: rgba(180, 35, 24, 0.35);
    color: var(--cb-danger);
}
.cbk-widget .cbk-button-danger:hover {
    background: var(--cb-danger-bg);
    border-color: var(--cb-danger);
    color: var(--cb-danger);
}
.cbk-widget .cbk-button-danger:focus-visible {
    outline-color: var(--cb-danger);
}

/* =========================================================================
   11. Erfolgs-Schritt
   ========================================================================= */
/* WICHTIG: Hier bewusst KEINE display-Eigenschaft setzen. Dieser Schritt wird - wie
   .cbk-step-type und .cbk-step-booking - allein ueber das hidden-Attribut ein- und ausgeblendet
   (siehe showStep() in assets/js/frontend.js). "hidden" wirkt aber nur ueber die Regel
   [hidden]{display:none} aus dem Browser-Stylesheet, und Autoren-CSS schlaegt Browser-CSS immer -
   ein display hier wuerde den Erfolgs-Schritt also dauerhaft sichtbar machen. Die Zentrierung
   laeuft deshalb ueber text-align (das SVG ist per .cbk-widget svg inline-block). Zusaetzlich
   abgesichert durch die [hidden]-Regel ganz am Ende dieser Datei. */
.cbk-widget .cbk-step-success {
    padding: var(--cb-space-9) var(--cb-space-6);
    text-align: center;
    color: var(--cb-text);
}
.cbk-widget .cbk-success-icon {
    width: 32px;
    height: 32px;
    padding: 12px;
    margin-bottom: var(--cb-space-5);
    box-sizing: content-box;
    border-radius: 50%;
    background: var(--cb-success-bg);
    color: var(--cb-success);
}
.cbk-widget .cbk-success-message {
    max-width: 420px;
    margin: 0 auto;
    font-size: 1.0625em;
    font-weight: 600;
    line-height: 1.55;
}

/* =========================================================================
   12. Zustände, Ladeanzeige und unsichtbare Textausgaben
   ========================================================================= */
/* Nur für Screenreader: Statuszeilen (role="status"/role="alert") und ergänzende Hinweise wie
   "(Pflichtfeld)". Bewusst NICHT display:none - unsichtbarer Inhalt wird sonst gar nicht
   vorgelesen. */
.cbk-widget .cbk-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Erklärter Zustand eines Bereichs. Drei klar getrennte Ausprägungen, weil ein technischer
   Fehler ausdrücklich NICHT wie "ausgebucht" aussehen darf:
     (ohne)                 neutraler Hinweis
     --empty                gültiger Tag/Monat ohne freie Zeiten - freundlich, kein Fehler
     --error                technisch nicht prüfbar / Verbindung gestört - sichtbar ein Problem */
.cbk-widget .cbk-panel-state {
    margin: var(--cb-space-4) 0 0;
    padding: var(--cb-space-4) var(--cb-space-5);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    background: var(--cb-surface-alt);
    text-align: center;
    font-size: 0.875em;
    line-height: 1.55;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-panel-state--empty {
    border-style: dashed;
}
.cbk-widget .cbk-panel-state--error {
    border-color: rgba(181, 71, 8, 0.28);
    background: #fffaf5;
    color: var(--cnv-booking-color-warning);
    text-align: left;
    font-weight: 600;
}

/* Ladezustand: ruhige Platzhalterflächen in der Form des späteren Inhalts. Bewusst kein
   wanderndes Glanzlicht, nur ein sehr langsames Auf- und Abblenden. */
.cbk-widget .cbk-skeleton {
    background: var(--cb-surface-alt);
    border-radius: var(--cb-radius-md);
    animation: cbk-skeleton-pulse 1.8s ease-in-out infinite;
}
.cbk-widget .cbk-skeleton-day {
    width: 100%;
    max-width: var(--cnv-booking-touch-min);
    height: var(--cnv-booking-touch-min);
    margin: 0 auto;
    border-radius: 50%;
}
.cbk-widget .cbk-skeleton-slot {
    min-height: var(--cnv-booking-control-height);
}
@keyframes cbk-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Aufklappbare Beschreibung der Terminart (siehe includes/views/widget.php). Auf einem breiten
   Widget öffnet das JavaScript sie dauerhaft; die Aufklappzeile wird dort ausgeblendet. */
.cbk-widget .cbk-event-details {
    margin: 0 0 var(--cb-space-5);
}
.cbk-widget .cbk-event-details-summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--cnv-booking-touch-min);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--cb-primary);
    cursor: pointer;
    list-style: none;
}
.cbk-widget .cbk-event-details-summary::-webkit-details-marker {
    display: none;
}
.cbk-widget .cbk-event-details-summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: var(--cb-space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--cb-transition);
}
.cbk-widget .cbk-event-details[open] .cbk-event-details-summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.cbk-widget .cbk-event-details-summary:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 2px;
    border-radius: var(--cb-radius-sm);
}
.cbk-widget .cbk-event-details .cbk-event-description {
    margin: var(--cb-space-2) 0 0;
}
/* Breites Widget: die Beschreibung steht dauerhaft da, die Aufklappzeile entfällt. */
.cbk-widget.cbk-is-wide .cbk-event-details-summary {
    display: none;
}

/* Kompakte Zusammenfassung oben, solange das Widget schmal ist: Terminart und Dauer bleiben
   sichtbar, nehmen aber nur noch wenig Höhe ein - der eigentliche Buchungsschritt beginnt
   dadurch unmittelbar darunter statt mehrere hundert Pixel tiefer. */
.cbk-widget:not(.cbk-is-wide) .cbk-info-panel {
    padding: var(--cb-space-4) var(--cb-space-6);
}
.cbk-widget:not(.cbk-is-wide) .cbk-business-logo {
    max-height: 26px;
    margin-bottom: var(--cb-space-3);
}
.cbk-widget:not(.cbk-is-wide) .cbk-business-name {
    margin-bottom: var(--cb-space-2);
}
.cbk-widget:not(.cbk-is-wide) .cbk-host {
    margin-bottom: var(--cb-space-2);
}
.cbk-widget:not(.cbk-is-wide) .cbk-host-avatar {
    width: 32px;
    height: 32px;
}
.cbk-widget:not(.cbk-is-wide) .cbk-event-title {
    margin-bottom: var(--cb-space-1);
    font-size: 1.125em;
}
.cbk-widget:not(.cbk-is-wide) .cbk-event-duration {
    margin-bottom: var(--cb-space-2);
    font-size: 0.875em;
}
.cbk-widget:not(.cbk-is-wide) .cbk-event-details {
    margin-bottom: var(--cb-space-2);
}

/* =========================================================================
   13. Zusammenfassung eines Termins (Bestätigung + Verwaltungsseite)
   ========================================================================= */
.cbk-widget .cbk-success-summary,
.cbk-widget .cbk-booking-summary {
    margin: 0 0 var(--cb-space-5);
    padding: var(--cb-space-4) var(--cb-space-5);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-lg);
    background: var(--cb-surface-alt);
    text-align: left;
}
.cbk-widget .cbk-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cb-space-2) var(--cb-space-4);
    padding: var(--cb-space-2) 0;
}
.cbk-widget .cbk-summary-row + .cbk-summary-row {
    border-top: 1px solid var(--cb-border);
}
.cbk-widget .cbk-summary-row dt {
    flex: 0 0 auto;
    min-width: 96px;
    margin: 0;
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-summary-row dd {
    flex: 1 1 60%;
    min-width: 0;
    margin: 0;
    font-size: 0.9375em;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cb-text);
}
/*
 * Standortzeile: mehrzeilig, weil eine Anschrift mehrzeilig ist. Sie ist die einzige Zeile der
 * Zusammenfassung, die das ist - alle übrigen bleiben unverändert einzeilig, damit sich das
 * gewohnte Bild der Bestätigung nicht ändert (siehe B3).
 */
.cbk-widget .cbk-summary-row--location dd {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cbk-widget .cbk-summary-location-line {
    font-weight: 500;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-summary-location-route {
    align-self: flex-start;
    margin-top: var(--cb-space-1);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--cb-primary);
    /* 44px Zielgröße auch hier: der Link steht in einer Bestätigung, die häufig am Telefon
       geöffnet wird (siehe B3). */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.cbk-widget .cbk-success-summary {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.cbk-widget .cbk-success-title {
    margin: 0 0 var(--cb-space-4);
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cb-text);
}
.cbk-widget .cbk-success-title:focus-visible,
.cbk-widget .cbk-manage-title:focus-visible,
.cbk-widget .cbk-step-title:focus-visible,
.cbk-widget .cbk-event-title:focus-visible {
    outline: 2px solid var(--cnv-booking-color-focus);
    outline-offset: 4px;
    border-radius: var(--cb-radius-sm);
}

/* =========================================================================
   14. Verwaltungsseite (Stornieren/Umbuchen)
   Dieselbe Karte, dieselben Bedienelemente wie das Buchungswidget - kein zweites Design.
   ========================================================================= */
.cbk-widget.cbk-manage {
    max-width: 640px;
}
.cbk-widget.cbk-manage--reschedule {
    max-width: 860px;
}
.cbk-widget .cbk-manage-body {
    padding: var(--cb-space-6);
}
.cbk-widget .cbk-manage-title {
    margin: 0 0 var(--cb-space-5);
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cb-text);
}
.cbk-widget .cbk-manage-result {
    text-align: center;
}
.cbk-widget .cbk-manage-hint {
    margin: 0 0 var(--cb-space-5);
    font-size: 0.875em;
    line-height: 1.6;
    color: var(--cb-text-muted);
}
.cbk-widget .cbk-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cb-space-3);
    align-items: stretch;
}
.cbk-widget .cbk-manage-actions .cbk-manage-action {
    margin: 0;
    flex: 1 1 200px;
}
/* Auf einem schmalen Widget stehen die beiden Wege untereinander und nehmen jeweils die volle
   Breite ein - dieselbe Zielgröße wie jedes andere Bedienelement. */
.cbk-widget .cbk-manage-actions .cbk-button {
    flex: 1 1 200px;
    width: 100%;
}
.cbk-widget .cbk-manage-back {
    margin: var(--cb-space-5) 0 0;
}
/* Die Meldungen der Verwaltungsseite stehen innerhalb des gepolsterten Bereichs und brauchen
   deshalb keinen eigenen Außenabstand mehr. */
.cbk-widget .cbk-manage-body .cbk-notice {
    margin: 0;
}
.cbk-widget .cbk-manage-body .cbk-booking-grid {
    margin: 0 calc(-1 * var(--cb-space-6));
    border-top: 1px solid var(--cb-border);
}
.cbk-widget .cbk-manage-body .cbk-booking-grid .cbk-calendar-panel {
    border-bottom: none;
}

/* =========================================================================
   15. RESPONSIVE (Mobile-First, per JS gemessene Widget-Breite)
   Alles oberhalb dieses Blocks ist die MOBILE Basisdarstellung (schmales Widget) - eine Spalte,
   alles untereinander, kompaktes Branding-Band. Ab hier folgt ausschließlich die Erweiterung für
   ein breiteres Widget, aktiviert über die Klasse .cbk-is-wide.

   Die Entscheidung "breit genug für die mehrspaltige Ansicht?" wird bewusst NICHT per CSS
   Container Query (@container) getroffen, sondern per JavaScript (siehe setupResponsiveWidth() in
   assets/js/frontend.js), das per ResizeObserver die TATSÄCHLICHE gerenderte Breite von
   .cbk-widget misst. Grund: @container erfordert CSS Containment (container-type: inline-size) auf
   einem Vorfahren - dieses Containment blockiert aber zugleich, dass das Widget seine natürliche
   Wunschbreite an eigene, sich am Inhalt orientierende Elternelemente weiterreichen kann (z. B.
   ein Elementor-Flex-Container mit "align-items:center" statt "stretch"). In genau so einem Fall
   kollabierte das Widget auf seine Mindestbreite, obwohl real deutlich mehr Platz da war. Per
   JavaScript gemessen bleibt die normale Breitenvererbung erhalten UND die
   Breakpoint-Entscheidung basiert weiterhin auf der echten Breite des Widgets selbst statt auf der
   Fensterbreite des Browsers (@media wäre hier wieder falsch).
   ========================================================================= */
/* Die Breite der Uhrzeiten-Spalte ist bewusst auf das Slot-Raster abgestimmt: 248px minus 2x32px
   Innenabstand = 184px Inhaltsbreite, dort passen genau zwei Slots à 88px mit 8px Abstand
   nebeneinander (siehe .cbk-slots weiter oben). Der Kalender behält dabei 1fr = mindestens 328px
   Inhaltsbreite und damit genug Platz für seine sieben 44px-Spalten. */
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-has-time-panel {
    grid-template-columns: 260px 1fr 248px;
}
/* Steht NACH der Regel oben und hat dieselbe Spezifität - im Kontakt-Schritt gilt daher immer
   dieses Zweispaltenraster, auch wenn das Uhrzeiten-Panel geladen ist. */
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-view-contact {
    grid-template-columns: 260px 1fr;
}
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-view-contact .cbk-contact-panel {
    grid-column: 2 / -1;
}
/* Umbuchen-Seite (kein Info-Panel): Kalender + Uhrzeiten nebeneinander. */
.cbk-widget.cbk-is-wide .cbk-booking-grid.cbk-manage-grid {
    grid-template-columns: 1fr 260px;
}
/* Normale Buchungsansicht (Info + Kalender, Uhrzeiten-Panel noch nicht sichtbar). Diese Regel hat
   NIEDRIGERE Spezifität als die drei Varianten oben (nur eine statt zwei Modifier-Klassen) und
   wird von diesen daher automatisch überschrieben, sobald eine davon gesetzt ist - unabhängig von
   der Reihenfolge im Stylesheet. Sie greift also nur, wenn KEINE der drei Varianten aktiv ist. */
.cbk-widget.cbk-is-wide .cbk-booking-grid {
    grid-template-columns: 260px 1fr;
}

.cbk-widget.cbk-is-wide .cbk-step-type,
.cbk-widget.cbk-is-wide .cbk-info-panel,
.cbk-widget.cbk-is-wide .cbk-calendar-panel,
.cbk-widget.cbk-is-wide .cbk-time-panel {
    padding: var(--cb-space-7);
}
.cbk-widget.cbk-is-wide .cbk-contact-panel {
    padding: var(--cb-space-7) var(--cb-space-8);
}
.cbk-widget.cbk-is-wide .cbk-widget-footer {
    padding: var(--cb-space-4) var(--cb-space-7);
}
.cbk-widget.cbk-is-wide .cbk-info-panel,
.cbk-widget.cbk-is-wide .cbk-calendar-panel {
    border-right: 1px solid var(--cb-border);
    border-bottom: none;
}
/* Kompakte Tageszellen: auf Desktop/Tablet etwas großzügiger als mobil, bleibt aber im
   Zielbereich von ca. 48-58px Zellenhöhe - unabhängig von der Breite der Kalenderspalte. */
.cbk-widget.cbk-is-wide .cbk-calendar-cell {
    min-height: 54px;
}
.cbk-widget.cbk-is-wide .cbk-calendar-day {
    max-width: var(--cnv-booking-touch-min);
    height: var(--cnv-booking-touch-min);
}
/* Uhrzeiten-Panel ist auf Desktop immer die letzte (rechte) Spalte - dort steht keine Trennlinie
   am unteren Rand. */
.cbk-widget.cbk-is-wide .cbk-time-panel {
    border-bottom: none;
}
/* In der schmalen Uhrzeiten-Spalte auf Desktop steht der Bestätigen-Knopf unter der
   Terminangabe statt daneben - nebeneinander bliebe für beides zu wenig Platz. */
.cbk-widget.cbk-is-wide .cbk-time-panel .cbk-slot-confirm-bar {
    flex-direction: column;
    align-items: stretch;
}
.cbk-widget.cbk-is-wide .cbk-time-panel .cbk-slot-confirm-button {
    width: 100%;
}
/* Auf Desktop steht der Absende-Button nicht mehr über die volle Kartenbreite, sondern nur über
   die des Formulars - dadurch wirkt der Kontakt-Schritt ruhiger. */
.cbk-widget.cbk-is-wide .cbk-contact-panel .cbk-button-primary {
    width: auto;
    min-width: 200px;
}

/* .cbk-has-ribbon bleibt als Klasse am Wurzelelement erhalten (Kompatibilität für bestehende
   Theme-Regeln), reserviert aber keinen Platz mehr oben in den Spalten: das Branding sitzt seit
   1.11.0 in der Fußzeile und überlagert nichts. */

/* =========================================================================
   16. Bewegungsreduzierung
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .cbk-widget,
    .cbk-widget *,
    .cbk-widget *::before,
    .cbk-widget *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    /* Die Ladeflächen blenden gar nicht mehr, statt in 0,01 ms auf einem zufälligen Wert
       stehenzubleiben - sie bleiben einfach ruhig sichtbar. */
    .cbk-widget .cbk-skeleton {
        animation: none !important;
        opacity: 1;
    }
}

/* =========================================================================
   17. Schutz fuer das hidden-Attribut
   Das Widget blendet Schritte und das Uhrzeiten-Panel ausschliesslich ueber das
   hidden-Attribut aus (showStep() / timePanel.hidden in assets/js/frontend.js). Dieses Attribut
   wirkt allein ueber [hidden]{display:none} aus dem Browser-Stylesheet - und JEDE
   display-Deklaration aus einem Autoren-Stylesheet schlaegt diese Browser-Regel, unabhaengig von
   der Spezifitaet. Ein spaeter ergaenztes "display" auf einer der betroffenen Komponenten wuerde
   den jeweiligen Bereich also dauerhaft sichtbar machen.
   Die Regel steht bewusst als LETZTE Regel der Datei und mit doppeltem Attributselektor
   (Spezifitaet 0-3-0): so gewinnt sie gegen jede Komponentenregel oben, ohne dass dafuer
   !important noetig ist.
   ========================================================================= */
.cbk-widget [hidden][hidden] {
    display: none;
}