/* ============================================================
   Booking Plugin – Frontend Styles
   ============================================================ */

:root {
    --bp-primary:     #2563eb;
    --bp-primary-dark:#1d4ed8;
    --bp-success:     #16a34a;
    --bp-error:       #dc2626;
    --bp-gray-50:     #f9fafb;
    --bp-gray-100:    #f3f4f6;
    --bp-gray-200:    #e5e7eb;
    --bp-gray-400:    #9ca3af;
    --bp-gray-700:    #374151;
    --bp-gray-900:    #111827;
    --bp-radius:      12px;
    --bp-shadow:      0 4px 24px rgba(0,0,0,.08);
    --bp-transition:  .2s ease;
}

.bp-booking-form-wrap {
    width: 100%;
    max-width: var(--bp-form-max-width, 1000px);
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--bp-gray-900);
}

/* ─── Steps ─────────────────────────────────────────────── */
.bp-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 4px;
}
.bp-steps.bp-steps-sticky {
    position: sticky;
    top: var(--bp-steps-top, 0px);
    z-index: 20;
    background: var(--bp-step-bar-bg, #fff);
    padding: 12px 0;
    box-shadow: 0 1px 0 var(--bp-gray-200);
}
.bp-steps.bp-steps-fixed { position: fixed !important; z-index: 9999; margin: 0 !important; box-sizing: border-box; }
body.admin-bar .bp-steps.bp-steps-sticky { top: calc(var(--bp-steps-top, 0px) + 32px); }
@media (max-width: 782px) {
    body.admin-bar .bp-steps.bp-steps-sticky { top: calc(var(--bp-steps-top, 0px) + 46px); }
}
.bp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.bp-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bp-step-pending-bg, var(--bp-gray-200));
    color: var(--bp-step-pending-text, var(--bp-gray-400));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    transition: var(--bp-transition);
}
.bp-step.bp-step-active .bp-step-number {
    background: var(--bp-step-active-bg, var(--bp-primary));
    color: var(--bp-step-active-text, #fff);
}
.bp-step.bp-step-done .bp-step-number {
    background: var(--bp-step-done-bg, var(--bp-success));
    color: var(--bp-step-done-text, #fff);
}
.bp-step-label {
    font-size: .7rem;
    color: var(--bp-step-pending-label, var(--bp-gray-400));
    font-weight: 500;
}
.bp-step.bp-step-active .bp-step-label { color: var(--bp-step-active-label, var(--bp-step-active-bg, var(--bp-primary))); }
.bp-step.bp-step-done .bp-step-label   { color: var(--bp-step-done-label, var(--bp-step-done-bg, var(--bp-success))); }
.bp-step-line {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: var(--bp-step-line, var(--bp-gray-200));
    margin-bottom: 16px;
    margin-top: 0;
}
/* Verbindung hinter einem erledigten Schritt */
.bp-step.bp-step-done + .bp-step-line { background: var(--bp-step-line-done, var(--bp-step-line, var(--bp-gray-200))); }

/* ─── Service Grid ───────────────────────────────────────── */
.bp-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--bp-card-min-width, 200px), 1fr));
    gap: var(--bp-card-gap, 16px);
    margin-bottom: 24px;
}
.bp-service-group-title {
    grid-column: 1 / -1;
    margin: 20px 0 2px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--bp-gray-700);
}
.bp-service-group-title:first-child { margin-top: 0; }
.bp-service-card {
    border: var(--bp-card-border-width, 2px) solid var(--bp-card-border-color, var(--bp-gray-200));
    border-radius: var(--bp-card-radius, var(--bp-radius));
    overflow: hidden;
    cursor: pointer;
    transition: var(--bp-transition);
    background: var(--bp-card-bg, #fff);
    box-shadow: var(--bp-card-shadow, none);
}
.bp-service-card:hover,
.bp-service-card.bp-selected {
    border-color: var(--bp-primary);
    box-shadow: var(--bp-card-hover-shadow, var(--bp-shadow));
    transform: var(--bp-card-hover-transform, translateY(-2px));
}
.bp-service-card.bp-selected { background: var(--bp-card-selected-bg, #eff6ff); }
.bp-service-color-bar {
    height: var(--bp-card-bar-height, 5px);
    display: var(--bp-card-bar-display, block);
}
.bp-service-card-body { padding: var(--bp-card-padding, 14px 16px); }
.bp-service-title-row { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.bp-service-title-row h4 { margin: 0 !important; }
.bp-service-icon {
    display: var(--bp-card-icon-display, none);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: calc(var(--bp-card-title-size, 16px) * 1.3);
    line-height: 1;
}
.bp-service-card-body h4 {
    margin: 0 0 6px;
    font-size: var(--bp-card-title-size, 1rem);
    font-weight: var(--bp-card-title-weight, 600);
    color: var(--bp-card-title-color, var(--bp-gray-900));
}
.bp-service-card-body p  {
    margin: 0 0 10px;
    font-size: var(--bp-card-desc-size, .85rem);
    color: var(--bp-card-desc-color, var(--bp-gray-700));
    display: var(--bp-card-desc-display, block);
}
.bp-service-meta {
    display: flex;
    gap: 12px;
    font-size: var(--bp-card-meta-size, .82rem);
    color: var(--bp-gray-700);
    flex-wrap: wrap;
}
.bp-meta-duration { display: var(--bp-card-duration-display, inline-flex); align-items: center; gap: 4px; }
.bp-meta-icon .bp-meta-svg { width: 1.2em; height: 1.2em; vertical-align: -.25em; display: inline-block; flex: none; }
.bp-meta-price    { display: var(--bp-card-price-display, inline-flex); align-items: center; gap: 4px; }
.bp-free { color: var(--bp-success); font-weight: 600; }

/* Layout-Varianten */
.bp-service-grid.bp-layout-list { grid-template-columns: 1fr; }
.bp-service-grid.bp-layout-list .bp-service-card { display: flex; align-items: stretch; }
.bp-service-grid.bp-layout-list .bp-service-color-bar { width: var(--bp-card-bar-height, 5px); height: auto; flex-shrink: 0; }
.bp-service-grid.bp-layout-list .bp-service-card-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; padding: 12px 18px; }
.bp-service-grid.bp-layout-list .bp-service-card-body > div:first-child { flex: 1; }
.bp-service-grid.bp-layout-list h4 { margin: 0 0 2px; }
.bp-service-grid.bp-layout-list p { margin: 0; }
.bp-service-grid.bp-layout-list .bp-service-meta { flex-direction: column; gap: 2px; align-items: flex-end; flex-shrink: 0; }

.bp-service-grid.bp-layout-compact .bp-service-card-body { padding: 10px 12px; }
.bp-service-grid.bp-layout-compact h4 { font-size: .9rem; margin-bottom: 2px; }
.bp-service-grid.bp-layout-compact p { display: none; }
.bp-service-grid.bp-layout-compact .bp-service-meta { font-size: .76rem; }

/* ─── Aufklappbare Gruppen-Cards (wie im Admin-Bereich) ──── */
.bp-sgc {
    background: #fff;
    border: 1px solid var(--bp-gray-200);
    border-radius: var(--bp-radius);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.bp-sgc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--bp-gray-100);
    transition: background var(--bp-transition);
}
.bp-sgc-header:hover { background: var(--bp-gray-50); }
.bp-sgc-header:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(37,99,235,.25); }
.bp-sgc-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    font-size: 1.05rem;
}
.bp-sgc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-sgc-title { min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.bp-sgc-desc { font-size: .85rem; line-height: 1.4; color: var(--bp-gray-500); white-space: pre-line; }
.bp-sgc-name { font-size: 1rem; font-weight: 700; color: var(--bp-gray-900); line-height: 1.3; }
.bp-sgc-count { font-size: .72rem; font-weight: 600; color: var(--bp-gray-500); background: var(--bp-gray-100); border-radius: 20px; padding: 2px 9px; flex-shrink: 0; }
.bp-sgc-chevron { font-size: 1.1rem; color: var(--bp-gray-400); transition: transform .2s; }
.bp-sgc.bp-sgc-collapsed .bp-sgc-chevron { transform: rotate(-90deg); }
.bp-sgc.bp-sgc-collapsed .bp-sgc-header { border-bottom-color: transparent; }
.bp-sgc-body { padding: 16px 18px; background: var(--bp-gray-50); }
.bp-sgc-body .bp-service-grid { margin-bottom: 0; }

/* ─── Staff Grid ─────────────────────────────────────────── */
.bp-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.bp-staff-card {
    border: 2px solid var(--bp-gray-200);
    border-radius: var(--bp-radius);
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
    transition: var(--bp-transition);
    background: #fff;
}
.bp-staff-card:hover,
.bp-staff-card.bp-selected {
    border-color: var(--bp-primary);
    box-shadow: var(--bp-shadow);
    background: #eff6ff;
}
.bp-staff-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bp-gray-200);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.bp-staff-card h4 { margin: 0 0 4px; font-size: .95rem; }
.bp-staff-card p  { margin: 0; font-size: .8rem; color: var(--bp-gray-400); }

/* ─── Datum & Slots ─────────────────────────────────────── */
.bp-datetime-picker {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    margin-bottom: 24px;
    align-items: start;
}
@media (max-width: 600px) {
    .bp-datetime-picker { grid-template-columns: 1fr; }
}

/* Inline-Kalender stylen */
.bp-calendar-container .flatpickr-calendar {
    box-shadow: none !important;
    border: 2px solid var(--bp-calendar-border) !important;
    border-radius: var(--bp-radius) !important;
    font-family: inherit !important;
}
.bp-calendar-container .flatpickr-calendar {
    background: var(--bp-calendar-bg) !important;
    color: var(--bp-calendar-text) !important;
}
/* ─── Kalender-Ladeanzeige ───────────────────────────────── */
.bp-calendar-container {
    position: relative;
}

.bp-calendar-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    min-width: 280px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .92);
    border-radius: var(--bp-radius);
    text-align: center;
}

.bp-calendar-loading-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid var(--bp-gray-200);
    border-top-color: var(--bp-primary);
    border-radius: 50%;
    animation: bp-calendar-spin .8s linear infinite;
}

.bp-calendar-loading-text {
    color: var(--bp-gray-700);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
}

.bp-calendar-loading-error {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .96);
    border: 2px solid var(--bp-error);
    border-radius: var(--bp-radius);
    color: var(--bp-error);
    text-align: center;
    font-size: .9rem;
    line-height: 1.5;
}

@keyframes bp-calendar-spin {
    to { transform: rotate(360deg); }
}

.bp-calendar-container .flatpickr-day {
    color: var(--bp-calendar-text) !important;
}
.bp-calendar-container .flatpickr-day.selected,
.bp-calendar-container .flatpickr-day.selected:hover {
    background: var(--bp-calendar-selected) !important;
    border-color: var(--bp-calendar-selected) !important;
}
.bp-calendar-container .flatpickr-day:hover {
    background: var(--bp-calendar-hover) !important;
}
.bp-calendar-container .flatpickr-months {
    background: var(--bp-calendar-header-bg) !important;
    border-radius: calc(var(--bp-radius) - 2px) calc(var(--bp-radius) - 2px) 0 0 !important;
    padding: 4px 0 !important;
}
.bp-calendar-container .flatpickr-month,
.bp-calendar-container .flatpickr-prev-month,
.bp-calendar-container .flatpickr-next-month,
.bp-calendar-container .flatpickr-current-month,
.bp-calendar-container .flatpickr-current-month input,
.bp-calendar-container .flatpickr-current-month .numInputWrapper span,
.bp-calendar-container span.cur-month {
    color: var(--bp-calendar-header-text) !important;
    fill: var(--bp-calendar-header-text) !important;
}
.bp-calendar-container .flatpickr-prev-month:hover svg,
.bp-calendar-container .flatpickr-next-month:hover svg {
    fill: color-mix(in srgb, var(--bp-calendar-header-text) 75%, transparent) !important;
}
.bp-calendar-container .flatpickr-weekday {
    color: var(--bp-calendar-weekday) !important;
    font-weight: 600 !important;
}
.bp-calendar-container .flatpickr-day.today:not(.selected) {
    border-color: var(--bp-calendar-today) !important;
    color: var(--bp-calendar-today) !important;
    font-weight: 700 !important;
}
.bp-calendar-container .flatpickr-day.flatpickr-disabled {
    color: var(--bp-calendar-disabled) !important;
}

#bp-date-picker {
    display: none; /* wird von Flatpickr inline ersetzt */
}

.bp-slots-hint { color: var(--bp-gray-400); font-size: .9rem; }

.bp-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.bp-slot-btn {
    padding: 10px 6px;
    border: 2px solid var(--bp-btn-slot-border, var(--bp-gray-200));
    border-radius: 8px;
    background: var(--bp-btn-slot-bg, #fff);
    color: var(--bp-btn-slot-text, inherit);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
    transition: var(--bp-transition);
    text-align: center;
}
.bp-slot-btn:hover  { border-color: var(--bp-btn-slot-hover, var(--bp-primary)); color: var(--bp-btn-slot-hover, var(--bp-primary)); }
.bp-slot-btn.bp-selected { border-color: var(--bp-btn-slot-sel-bg, var(--bp-primary)); background: var(--bp-btn-slot-sel-bg, var(--bp-primary)); color: var(--bp-btn-slot-sel-text, #fff); }

/* ─── Kundendaten ────────────────────────────────────────── */
.bp-booking-summary {
    background: var(--bp-gray-50);
    border: 1px solid var(--bp-gray-200);
    border-radius: var(--bp-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: .9rem;
    line-height: 1.8;
}
.bp-price-struck { text-decoration: line-through; color: var(--bp-gray-400); }

.bp-voucher-box { margin-bottom: 24px; }
.bp-voucher-input-row { display: flex; gap: 8px; }
.bp-voucher-input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--bp-gray-200);
    border-radius: var(--bp-radius);
    font-size: .9rem;
    text-transform: uppercase;
}
.bp-voucher-input-row input:focus { outline: none; border-color: var(--bp-primary); }
.bp-btn-secondary {
    padding: 10px 18px;
    border: 1px solid var(--bp-primary);
    border-radius: var(--bp-radius);
    background: #fff;
    color: var(--bp-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}
.bp-btn-secondary:hover { background: var(--bp-primary); color: #fff; }
.bp-btn-secondary:disabled { opacity: .6; cursor: not-allowed; }
.bp-voucher-feedback { margin: 8px 0 0; font-size: .85rem; min-height: 1.2em; }
.bp-voucher-feedback.bp-voucher-ok { color: #16a34a; }
.bp-voucher-feedback.bp-voucher-error { color: #dc2626; }

.bp-field-group {
    margin-bottom: 18px;
}
.bp-field-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .9rem;
}
.bp-field-group input,
.bp-field-group select,
.bp-field-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bp-gray-200);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: var(--bp-transition);
    box-sizing: border-box;
}
.bp-field-group input:focus,
.bp-field-group select:focus,
.bp-field-group textarea:focus { border-color: var(--bp-primary); }

/* ─── Buttons ────────────────────────────────────────────── */
.bp-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.bp-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--bp-transition);
}
.bp-btn-primary {
    background: var(--bp-btn-next-bg, var(--bp-primary));
    color: var(--bp-btn-next-text, #fff);
    flex: 1;
}
.bp-btn-primary:hover { background: var(--bp-btn-next-hover, var(--bp-btn-next-bg, var(--bp-primary-dark))); }
.bp-btn-back {
    background: var(--bp-btn-back-bg, var(--bp-gray-100));
    color: var(--bp-btn-back-text, var(--bp-gray-700));
}
.bp-btn-back:hover { background: var(--bp-btn-back-hover, var(--bp-btn-back-bg, var(--bp-gray-200))); }
.bp-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Payment ────────────────────────────────────────────── */
.bp-payment-methods { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bp-payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid var(--bp-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--bp-transition);
}
.bp-payment-option .bp-pay-icon { width: 1.5em; height: 1.5em; vertical-align: -.4em; margin-right: 2px; }
.bp-payment-option:has(input:checked) { border-color: var(--bp-primary); background: #eff6ff; }
#bp-stripe-card-element {
    padding: 14px;
    border: 2px solid var(--bp-gray-200);
    border-radius: 8px;
    margin-bottom: 12px;
}

/* ─── Error / Success ────────────────────────────────────── */
.bp-error {
    background: #fef2f2;
    color: var(--bp-error);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin-top: 12px;
    font-size: .9rem;
}
.bp-success-step { text-align: center; padding: 40px 20px; }
#bp-verify-code-input {
    font-size: 1.6rem;
    letter-spacing: .5em;
    text-align: center;
    font-weight: 600;
    padding: 12px 10px 12px 16px;
}
#bp-verify-resend-link { color: var(--bp-primary); text-decoration: none; }
#bp-verify-resend-link:hover { text-decoration: underline; }
.bp-success-icon { font-size: 4rem; margin-bottom: 16px; }
.bp-success-step h2 { color: var(--bp-success); margin-bottom: 12px; }
.bp-success-step .bp-success-variant p { margin: 0 0 12px; }
.bp-confirmed-details {
    background: var(--bp-gray-50);
    border-radius: var(--bp-radius);
    padding: 20px;
    margin: 20px auto;
    max-width: 400px;
    text-align: left;
    line-height: 2;
}
.bp-loading { color: var(--bp-gray-400); font-style: italic; padding: 20px 0; }

/* ─── Pflichtfeld-Stern ──────────────────────────────────── */
.bp-required { color: #dc2626; margin-left: 2px; }

/* ─── Outline-Button (Erfolgsseite) ─────────────────────── */
.bp-btn-outline {
    background: transparent;
    border: 2px solid var(--bp-primary);
    color: var(--bp-primary);
}
.bp-btn-outline:hover { background: var(--bp-primary); color: #fff; }

/* ─── Absende-Hinweis ────────────────────────────────────── */
.bp-submit-hint {
    margin-top: 10px;
    font-size: .82rem;
    color: var(--bp-gray-400);
    text-align: center;
}

/* ─── Abgeschlossene Steps sind klickbar ─────────────────── */
.bp-step.bp-step-done {
    cursor: pointer;
}
.bp-step.bp-step-done:hover .bp-step-number {
    filter: brightness(.9);
    transform: scale(1.1);
    transition: var(--bp-transition);
}
.bp-step.bp-step-done:hover .bp-step-label {
    filter: brightness(.9);
}

/* ─── PayPal Abbruch-Hinweis ─────────────────────────────── */
.bp-paypal-cancel-notice {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: var(--bp-radius);
    padding: 14px 18px;
    font-size: .9rem;
    color: #92400e;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ─── Select-Feld ────────────────────────────────────────── */
.bp-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bp-gray-200);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    box-sizing: border-box;
    transition: border-color .2s;
}
.bp-select:focus { border-color: var(--bp-primary); }

/* ─── Checkbox-Feld ──────────────────────────────────────── */
.bp-checkbox-field {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .95rem;
    padding: 10px 0;
}
.bp-checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bp-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.bp-marketing-optin { margin-bottom: 14px; font-size: .85rem; color: var(--bp-gray-500); }


/* ============================================================
   Mobile Optimierung
   ============================================================ */

/* Touch allgemein: kein Doppeltipp-Zoom-Verzögerung, saubere Tap-Flächen */
.bp-booking-form-wrap button,
.bp-booking-form-wrap .bp-service-card,
.bp-booking-form-wrap .bp-staff-card,
.bp-booking-form-wrap .bp-payment-option,
.bp-booking-form-wrap .bp-step { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bp-booking-form-wrap { box-sizing: border-box; overflow-wrap: anywhere; }
.bp-booking-form-wrap *, .bp-booking-form-wrap *::before, .bp-booking-form-wrap *::after { box-sizing: inherit; }

/* Service-Kacheln: Mindestbreite darf den Container nie überschreiten */
.bp-service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bp-card-min-width, 200px)), 1fr)); }

/* Kein „klebendes“ Hover auf Touch-Geräten */
@media (hover: none) {
    .bp-sgc-header:hover { background: transparent; }
    .bp-service-card:hover:not(.bp-selected) { transform: none; box-shadow: var(--bp-card-shadow, none); border-color: var(--bp-card-border-color, var(--bp-gray-200)); }
    .bp-staff-card:hover:not(.bp-selected) { box-shadow: none; background: #fff; border-color: var(--bp-gray-200); }
    .bp-slot-btn:hover:not(.bp-selected) { border-color: var(--bp-gray-200); color: inherit; }
    .bp-btn-primary:hover { background: var(--bp-primary); }
}

@media (max-width: 782px) {
    .bp-datetime-picker { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bp-calendar-container { width: 100%; }
    /* Inline-Kalender füllt die Breite, größere Tage zum Antippen */
    .bp-calendar-container .flatpickr-calendar.inline,
    .bp-calendar-container .flatpickr-calendar { width: 100% !important; max-width: 100% !important; }
    .bp-calendar-container .flatpickr-innerContainer,
    .bp-calendar-container .flatpickr-rContainer,
    .bp-calendar-container .flatpickr-days,
    .bp-calendar-container .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
    .bp-calendar-container .flatpickr-day { max-width: none; height: 42px; line-height: 42px; border-radius: 10px; }
    .bp-calendar-container .flatpickr-prev-month,
    .bp-calendar-container .flatpickr-next-month { padding: 12px 14px; }
    .bp-calendar-loading, .bp-calendar-loading-error { min-width: 0; }
}

@media (max-width: 600px) {
    .bp-sgc { margin-bottom: 12px; }
    .bp-sgc-header { padding: 12px 14px; min-height: 56px; }
    .bp-sgc-body { padding: 12px; }
    /* Fortschrittsanzeige: nur Nummern, Label nur beim aktiven Schritt */
    .bp-steps { position: relative; margin-bottom: 22px; padding-bottom: 20px; flex-wrap: nowrap; gap: 2px; }
    .bp-steps.bp-steps-sticky { position: sticky; padding: 10px 0 24px; }
    .bp-step { flex: 0 0 auto; min-width: 0; }
    .bp-step.bp-step-active { position: static; }
    .bp-step-number { width: 30px; height: 30px; font-size: .8rem; }
    .bp-step-label { display: none; }
    .bp-step.bp-step-active .bp-step-label { display: block; position: absolute; left: 0; right: 0; top: 36px; text-align: center; font-size: .75rem; }
    .bp-step-line { min-width: 8px; margin-bottom: 0; }

    .bp-form-step h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 16px; }

    /* Listen-Layout: Preis/Dauer unter den Text statt daneben */
    .bp-service-grid.bp-layout-list .bp-service-card-body { flex-direction: column; align-items: flex-start; gap: 6px; }
    .bp-service-grid.bp-layout-list .bp-service-meta { flex-direction: row; gap: 12px; align-items: center; }
    .bp-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bp-staff-card { padding: 16px 10px; }

    /* Zeit-Slots: gut treffbar */
    .bp-slots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .bp-slot-btn { min-height: 46px; padding: 10px 4px; font-size: .92rem; }

    /* Formularfelder: ≥16px verhindert den automatischen iOS-Zoom beim Fokussieren */
    .bp-field-group input,
    .bp-field-group textarea,
    .bp-select,
    .bp-voucher-input-row input { font-size: 16px; min-height: 48px; }
    .bp-field-group textarea { min-height: 96px; }
    .bp-checkbox-field { padding: 12px 0; align-items: flex-start; }
    .bp-checkbox-field input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; }

    .bp-booking-summary { padding: 14px 16px; font-size: .92rem; }
    .bp-voucher-input-row { flex-direction: column; }
    .bp-voucher-input-row .bp-btn-secondary { min-height: 48px; width: 100%; }

    /* Zahlungsarten untereinander, volle Breite */
    .bp-payment-methods { flex-direction: column; gap: 10px; }
    .bp-payment-option { width: 100%; min-height: 52px; padding: 12px 16px; }
    .bp-payment-option input { width: 20px; height: 20px; flex-shrink: 0; }

    /* Aktionsbuttons: Hauptaktion oben, volle Breite, große Tapfläche */
    .bp-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .bp-btn { min-height: 50px; padding: 12px 20px; width: 100%; }
    .bp-btn-primary { flex: none; }
    .bp-form-step > .bp-btn-back { width: 100%; margin-top: 8px; }

    /* Bestätigungscode & Erfolgsseite */
    #bp-verify-code-input { font-size: 1.4rem; letter-spacing: .35em; }
    .bp-success-step { padding: 28px 8px; }
    .bp-success-icon { font-size: 3rem; }
    .bp-confirmed-details { padding: 16px; }
    .bp-paypal-cancel-notice { padding: 12px 14px; }
}

@media (max-width: 360px) {
    .bp-slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bp-staff-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   Designs der Dienstleistungs-Auswahl (Buchungsdesigner → Karten-Stil → Design)
   Wrapper-Klassen: bp-design-{classic|photo|gradient|row}
   ═══════════════════════════════════════════════════════════ */
.bp-service-card { --sc: var(--bp-service-color, var(--bp-primary)); position: relative; }
.bp-service-media { display: none; position: relative; overflow: hidden; color: #fff; }
.bp-sm-photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.bp-sm-glyph { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 42px; line-height: 1; z-index: 1; color: #fff; }
.bp-sm-glyph svg { width: 48px; height: 48px; opacity: .92; }
.bp-sm-badge { display: none; position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.24); color: #fff; backdrop-filter: blur(4px); }
.bp-sm-check { display: none; position: absolute; right: 12px; top: 12px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--bp-primary); color: #fff; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.bp-service-choose { display: none; }
.bp-check-on .bp-service-card.bp-selected .bp-sm-check { display: flex; }

/* Foto-Verlauf (Hintergrund von Foto-Karten ohne Foto, Premium-Liste) */
.bp-design-photo .bp-service-media,
.bp-design-row .bp-service-media {
    background-color: var(--sc);
    background-image: linear-gradient(var(--bp-grad-angle, 135deg), var(--sc), var(--sc));
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .bp-design-photo .bp-service-media,
    .bp-design-row .bp-service-media,
    .bp-booking-form-wrap.bp-design-gradient .bp-service-card {
        background-image: linear-gradient(var(--bp-grad-angle, 135deg), color-mix(in srgb, var(--sc) 78%, #fff) 0%, color-mix(in srgb, var(--sc) var(--bp-grad-end, 65%), #000) 100%);
    }
}

/* ── B · Foto-Karten ── */
.bp-design-photo .bp-service-color-bar { display: none; }
.bp-design-photo .bp-service-media { display: block; height: var(--bp-media-height, 180px); }
.bp-design-photo .bp-service-media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,var(--bp-media-overlay, .45)), rgba(0,0,0,0));
}
.bp-design-photo .bp-sm-badge { z-index: 2; }
.bp-design-photo.bp-badge-on .bp-sm-badge { display: block; }
.bp-design-photo.bp-badge-on .bp-meta-duration { display: none; }
.bp-design-photo.bp-glyph-on.bp-pf-gradient .bp-service-card:not(.bp-has-photo) .bp-sm-glyph { display: flex; }
.bp-design-photo .bp-service-card:not(.bp-has-photo).bp-selected .bp-sm-glyph { opacity: .9; }
.bp-booking-form-wrap.bp-design-photo .bp-service-card-body { padding-top: calc(var(--bp-card-padding-v, 14px) + 2px); }
.bp-booking-form-wrap.bp-design-photo .bp-meta-price { margin-left: auto; font-weight: 700; color: var(--bp-primary); }

/* ── C · Farbverlauf ── */
.bp-booking-form-wrap.bp-design-gradient .bp-service-card {
    border: 0; color: #fff; min-height: var(--bp-tile-height, 150px);
    background-color: var(--sc);
    display: flex; flex-direction: column; justify-content: space-between;
}
.bp-booking-form-wrap.bp-design-gradient .bp-service-card.bp-selected {
    background-color: var(--sc);
    box-shadow: 0 0 0 3px var(--bp-card-bg, #fff), 0 0 0 5px var(--sc), 0 10px 24px rgba(0,0,0,.18);
}
.bp-design-gradient .bp-service-color-bar { display: none; }
.bp-design-gradient .bp-service-media { display: flex; align-items: flex-start; justify-content: space-between; overflow: visible; padding: var(--bp-card-padding, 14px 16px); padding-bottom: 0; }
.bp-design-gradient .bp-sm-glyph { position: static; inset: auto; display: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.2); font-size: 22px; }
.bp-design-gradient .bp-sm-glyph svg { width: 24px; height: 24px; }
.bp-design-gradient.bp-glyph-on .bp-sm-glyph { display: flex; }
.bp-design-gradient .bp-sm-badge { position: static; margin-left: auto; }
.bp-design-gradient.bp-badge-on .bp-sm-badge { display: inline-block; }
.bp-design-gradient.bp-badge-on .bp-meta-duration { display: none; }
.bp-design-gradient .bp-service-card.bp-selected .bp-sm-badge { margin-right: 34px; }
.bp-design-gradient .bp-sm-check { top: 12px; right: 12px; background: #fff; color: var(--sc); }
.bp-booking-form-wrap.bp-design-gradient .bp-service-card-body { padding-top: 10px; }
.bp-booking-form-wrap.bp-design-gradient .bp-service-card-body h4,
.bp-booking-form-wrap.bp-design-gradient .bp-service-meta,
.bp-booking-form-wrap.bp-design-gradient .bp-meta-price { color: #fff; }
.bp-booking-form-wrap.bp-design-gradient .bp-service-card-body p { color: rgba(255,255,255,.85); }
.bp-booking-form-wrap.bp-design-gradient .bp-service-meta { justify-content: space-between; }
.bp-booking-form-wrap.bp-design-gradient .bp-meta-price { font-size: 1.25em; font-weight: 700; margin-left: auto; }
.bp-design-gradient .bp-service-card:hover { filter: saturate(1.08); }

/* ── E · Premium-Liste ── */
.bp-booking-form-wrap.bp-design-row .bp-service-grid { grid-template-columns: 1fr; }
.bp-design-row .bp-service-color-bar { display: none; }
.bp-design-row .bp-service-card { display: flex; align-items: center; gap: 18px; padding: 14px; }
.bp-design-row .bp-service-media {
    display: block; flex: 0 0 var(--bp-row-img-w, 120px); width: var(--bp-row-img-w, 120px);
    height: calc(var(--bp-row-img-w, 120px) * .8); border-radius: max(0px, calc(var(--bp-card-radius, 10px) - 4px)); align-self: center;
}
.bp-design-row.bp-glyph-on .bp-service-card:not(.bp-has-photo) .bp-sm-glyph { display: flex; font-size: 30px; }
.bp-design-row .bp-sm-glyph svg { width: 32px; height: 32px; }
.bp-design-row .bp-sm-check { display: none !important; }
.bp-design-row .bp-service-card-body { flex: 1; min-width: 0; padding: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; align-items: center; }
.bp-design-row .bp-service-title-row { grid-column: 1; margin: 0; }
.bp-design-row .bp-service-card-body p { grid-column: 1; margin: 0; }
.bp-design-row .bp-service-meta { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; gap: 8px; flex-wrap: nowrap; }
.bp-design-row .bp-meta-price { order: 1; font-size: 1.35em; font-weight: 700; color: var(--bp-gray-900); }
.bp-design-row .bp-meta-duration { order: 2; font-size: .9em; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.05); }
@supports (color: color-mix(in srgb, red 50%, white)) {
    .bp-design-row .bp-meta-duration { background: color-mix(in srgb, var(--bp-primary) 12%, #fff); color: var(--bp-primary); }
}
.bp-design-row .bp-service-choose { order: 3; }
.bp-design-row.bp-rowbtn-on .bp-service-choose {
    display: inline-block; border: 2px solid var(--bp-btn-border, var(--bp-primary)); color: var(--bp-btn-color, var(--bp-primary)); background: var(--bp-btn-bg, transparent);
    padding: 6px 16px; border-radius: 10px; font-weight: 600; font-size: .85rem; line-height: 1.2; transition: var(--bp-transition);
}
.bp-design-row.bp-rowbtn-on .bp-service-card.bp-selected .bp-service-choose,
.bp-design-row.bp-rowbtn-on .bp-service-card:hover .bp-service-choose { background: var(--bp-btn-bg-hover, var(--bp-primary)); color: var(--bp-btn-color-hover, #fff); border-color: var(--bp-btn-border-hover, var(--bp-btn-border, var(--bp-primary))); }

/* ═══ Gruppen-Ansicht passend zum Design ═══
   Eigene Werte aus dem Designer überschreiben die Designvorgaben
   (--bp-sgc-header-bg / --bp-sgc-header-text / --bp-sgc-radius). */
.bp-booking-form-wrap { --sgc-d-bg: #fff; --sgc-d-text: var(--bp-gray-900); --sgc-d-radius: var(--bp-radius); }
.bp-booking-form-wrap .bp-sgc { border-radius: var(--bp-sgc-radius, var(--sgc-d-radius)); }
.bp-booking-form-wrap .bp-sgc-header { background: var(--bp-sgc-header-bg, var(--sgc-d-bg)); color: var(--bp-sgc-header-text, var(--sgc-d-text)); }
.bp-booking-form-wrap .bp-sgc-header:hover { background: var(--bp-sgc-header-bg, var(--sgc-d-bg)); filter: brightness(.97); }
.bp-booking-form-wrap .bp-sgc-name { color: inherit; }

.bp-booking-form-wrap:not(.bp-design-classic) .bp-sgc-desc { color: inherit; opacity: .8; }
.bp-booking-form-wrap:not(.bp-design-classic) .bp-sgc-chevron { color: inherit; opacity: .75; }
.bp-booking-form-wrap:not(.bp-design-classic) .bp-sgc-count { background: rgba(127,127,127,.18); color: inherit; }
.bp-booking-form-wrap:not(.bp-design-classic) .bp-sgc-icon { background: rgba(127,127,127,.16); }

/* Foto-Karten: weiche Schatten, großzügige Köpfe */
.bp-design-photo { --sgc-d-radius: 18px; }
.bp-design-photo .bp-sgc { border: 0; box-shadow: 0 1px 3px rgba(17,24,39,.08), 0 8px 24px rgba(17,24,39,.06); }
.bp-design-photo .bp-sgc-header { padding: 18px 22px; border-bottom-color: transparent; }
.bp-design-photo .bp-sgc-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; }
.bp-design-photo .bp-sgc-name { font-size: 1.1rem; }
.bp-design-photo .bp-sgc-body { background: #fff; padding: 4px 22px 22px; }

/* Farbverlauf: Kopf mit Akzent-Verlauf */
.bp-design-gradient { --sgc-d-text: #fff; --sgc-d-radius: 18px; --sgc-d-bg: linear-gradient(135deg, var(--bp-primary), var(--bp-primary)); }
@supports (color: color-mix(in srgb, red 50%, white)) {
    .bp-design-gradient { --sgc-d-bg: linear-gradient(var(--bp-grad-angle, 135deg), color-mix(in srgb, var(--bp-primary) 82%, #fff), color-mix(in srgb, var(--bp-primary) 62%, #000)); }
}
.bp-design-gradient .bp-sgc { border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.bp-design-gradient .bp-sgc-header { padding: 18px 22px; border-bottom-color: transparent; }
.bp-design-gradient .bp-sgc-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.22); }
.bp-design-gradient .bp-sgc-count { background: rgba(255,255,255,.24); }
.bp-design-gradient .bp-sgc-body { background: var(--bp-gray-50); padding: 18px 22px 22px; }


/* Premium-Liste: flache Abschnitte statt Karten */
.bp-design-row { --sgc-d-radius: 0px; --sgc-d-bg: transparent; }
.bp-design-row .bp-sgc { border: 0; box-shadow: none; background: transparent; margin-bottom: 26px; overflow: visible; }
.bp-design-row .bp-sgc-header { padding: 6px 2px 12px; border-bottom: 2px solid var(--bp-gray-200); }
.bp-design-row .bp-sgc-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; }
.bp-design-row .bp-sgc-name { font-size: 1.05rem; letter-spacing: .01em; }
.bp-design-row .bp-sgc-body { background: transparent; padding: 16px 0 0; }

@media (max-width: 640px) {
    .bp-design-row .bp-service-card { gap: 12px; padding: 10px; }
    .bp-design-row .bp-service-media { flex-basis: min(var(--bp-row-img-w, 120px), 88px); width: min(var(--bp-row-img-w, 120px), 88px); height: 76px; }
    .bp-design-row .bp-service-card-body { grid-template-columns: 1fr; }
    .bp-design-row .bp-service-meta { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
    .bp-design-photo .bp-sgc-body, .bp-design-gradient .bp-sgc-body { padding-left: 14px; padding-right: 14px; }
    .bp-design-photo .bp-sgc-header, .bp-design-gradient .bp-sgc-header { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .bp-design-gradient .bp-service-card:hover { filter: none; } }

/* ── Zeit-Auswahl (mehrere Zeiten pro Dienstleistung) ───────────────────── */
.bp-service-grid-bare { margin-bottom: 14px; }
.bp-variant-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.bp-variant-chip {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
    padding: 7px 13px; border-radius: 999px; border: 2px solid #d1d5db; background: #fff; color: #374151;
    transition: background .15s, border-color .15s, color .15s;
}
.bp-variant-chip:hover { border-color: var(--bp-primary); }
.bp-variant-chip:focus-visible { outline: 2px solid var(--bp-primary); outline-offset: 2px; }
.bp-variant-chip.bp-active { background: var(--bp-primary); border-color: var(--bp-primary); color: #fff; }
.bp-design-gradient .bp-variant-chip { background: rgba(255,255,255,.22); border-color: transparent; color: inherit; }
.bp-design-gradient .bp-variant-chip.bp-active { background: #fff; color: var(--bp-primary); }
.bp-design-row .bp-variant-picker { grid-column: 1; gap: 0; display: inline-flex; align-self: start; justify-self: start; border: 2px solid #e5e7eb; border-radius: 999px; padding: 3px; background: #fff; }
.bp-design-row .bp-variant-chip { border: 0; padding: 5px 13px; }
@media (max-width: 600px) {
    .bp-design-row .bp-variant-picker { grid-column: 1; display: flex; width: 100%; gap: 6px; border: 0; padding: 0; background: transparent; }
    .bp-design-row .bp-variant-chip { flex: 1; border: 2px solid #d1d5db; border-radius: 10px; }
    .bp-design-row .bp-variant-chip.bp-active { border-color: var(--bp-primary); }
}

/* „Am beliebtesten“: Badge über dem Zeit-Chip (Text/Farben aus dem Designer) */
.bp-variant-picker.bp-has-pop { margin-top: 24px; gap: 10px; }
.bp-variant-chip { position: relative; }
.bp-variant-chip.bp-popular { border-color: #f59e0b; }
.bp-variant-chip.bp-popular.bp-active { border-color: var(--bp-primary); }
.bp-pop-badge {
    position: absolute; left: 50%; top: -11px; transform: translateX(-50%); z-index: 1;
    display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5; letter-spacing: .01em;
    pointer-events: none; box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.bp-design-gradient .bp-variant-chip.bp-popular { border-color: transparent; }
.bp-design-row .bp-variant-picker.bp-has-pop { margin-top: 24px; }
.bp-design-row .bp-variant-picker .bp-pop-badge { top: -22px; }
/* Foto-Karten: mehr Luft zwischen „Beliebt“-Badge und Preis/Titel darüber */
.bp-design-photo .bp-variant-picker.bp-has-pop { margin-top: 34px; }
.bp-design-photo .bp-variant-picker.bp-has-pop .bp-pop-badge { top: -13px; }
@media (max-width: 600px) {
    .bp-variant-picker.bp-has-pop { margin-top: 26px; gap: 6px; }
    .bp-design-row .bp-variant-picker.bp-has-pop { margin-top: 26px; }
    .bp-design-row .bp-variant-picker .bp-pop-badge { top: -11px; }
    .bp-pop-badge { max-width: 150px; }
}

/* Karten mit mehreren Zeiten: eigene „Auswählen“-Schaltfläche (alle Designs, auch mobil) */
.bp-has-variants { cursor: default; }
.bp-has-variants .bp-service-choose { display: none !important; }
.bp-variant-select, .bp-card-btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; box-sizing: border-box;
    width: 100%; margin-top: 12px; padding: 11px 16px; border-radius: 10px;
    border: 2px solid var(--bp-btn-border, var(--bp-primary));
    background: var(--bp-btn-bg, var(--bp-primary)); color: var(--bp-btn-color, #fff); transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.bp-card-btn { display: none; }
.bp-btnstatic-on:not(.bp-design-row) .bp-service-card:not(.bp-has-variants) .bp-card-btn { display: block; }
.bp-variant-select:disabled { background: transparent; color: var(--bp-btn-border, var(--bp-primary)); opacity: .45; cursor: not-allowed; }
.bp-variant-select:not(:disabled):hover,
.bp-service-card:hover .bp-card-btn,
.bp-service-card.bp-selected .bp-card-btn,
.bp-has-variants.bp-selected .bp-variant-select {
    opacity: 1;
    background: var(--bp-btn-bg-hover, var(--bp-btn-bg, var(--bp-primary)));
    color: var(--bp-btn-color-hover, var(--bp-btn-color, #fff));
    border-color: var(--bp-btn-border-hover, var(--bp-btn-border, var(--bp-primary)));
}
.bp-variant-select:not(:disabled):hover:not(:where(.x)) { opacity: .92; }
.bp-variant-select:focus-visible { outline: 2px solid var(--bp-primary); outline-offset: 2px; }
.bp-variant-picker.bp-need-choice .bp-variant-chip { border-color: #dc2626; animation: bp-shake .3s; }
@keyframes bp-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.bp-design-gradient .bp-variant-select, .bp-design-gradient .bp-card-btn { background: var(--bp-btn-bg, #fff); color: var(--bp-btn-color, var(--bp-primary)); border-color: var(--bp-btn-border, #fff); }
.bp-design-gradient .bp-variant-select:disabled { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; opacity: 1; }
.bp-design-gradient.bp-booking-form-wrap .bp-has-variants.bp-selected .bp-variant-select,
.bp-design-gradient.bp-booking-form-wrap .bp-service-card:hover .bp-card-btn,
.bp-design-gradient.bp-booking-form-wrap .bp-service-card.bp-selected .bp-card-btn { background: var(--bp-btn-bg-hover, var(--bp-btn-bg, #fff)); color: var(--bp-btn-color-hover, var(--bp-btn-color, var(--bp-primary))); border-color: var(--bp-btn-border-hover, var(--bp-btn-border, #fff)); }
.bp-design-row .bp-variant-select { grid-column: 1; grid-row: auto; justify-self: start; width: auto; margin-top: 10px; min-width: 150px; }
@media (max-width: 600px) {
    .bp-design-row .bp-variant-select { justify-self: stretch; width: 100%; }
    .bp-variant-select { padding: 13px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bp-variant-picker.bp-need-choice .bp-variant-chip { animation: none; } }

/* Mehrere Gutscheine: angewendete Codes als Chips */
.bp-voucher-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bp-voucher-applied:empty { display: none; }
.bp-voucher-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 99px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .85rem; font-weight: 600; font-family: ui-monospace, monospace; letter-spacing: .04em; }
.bp-voucher-chip-x { border: 0; background: transparent; color: #047857; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ── Button unten, einheitliche Kartenhöhe (alle Designs außer Premium-Liste/Listen-Layout) ── */
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card { display: flex; flex-direction: column; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body { flex: 1; display: flex; flex-direction: column; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-variant-select,
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-card-btn { margin-top: auto; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-service-meta { margin-bottom: 12px; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-variant-picker { flex: 0 0 auto; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-service-meta { margin-top: auto; }
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-service-meta ~ .bp-variant-select,
.bp-booking-form-wrap:not(.bp-design-row) .bp-service-grid:not(.bp-layout-list) .bp-service-card-body > .bp-service-meta ~ .bp-card-btn { margin-top: 0; }

/* ── Position des Dauer-Badges (Foto-Karten, Farbverlauf) ── */
.bp-design-photo .bp-sm-badge { left: auto; right: auto; top: auto; bottom: auto; }
.bp-design-photo.bp-badge-bl .bp-sm-badge { left: 12px; bottom: 10px; }
.bp-design-photo.bp-badge-br .bp-sm-badge { right: 12px; bottom: 10px; }
.bp-design-photo.bp-badge-tl .bp-sm-badge { left: 12px; top: 10px; }
.bp-design-photo.bp-badge-tr .bp-sm-badge { right: 12px; top: 10px; }
.bp-design-photo.bp-check-on.bp-badge-tr .bp-service-card.bp-selected .bp-sm-badge { right: 48px; }
.bp-design-gradient .bp-service-media { position: static; }
.bp-design-gradient .bp-sm-badge { position: absolute; margin: 0 !important; left: auto; right: auto; top: auto; bottom: auto; }
.bp-design-gradient.bp-badge-tl .bp-sm-badge, .bp-design-gradient.bp-badge-bl .bp-sm-badge { left: 16px; top: 14px; }
.bp-design-gradient.bp-badge-tr .bp-sm-badge, .bp-design-gradient.bp-badge-br .bp-sm-badge { right: 16px; top: 14px; }
.bp-design-gradient.bp-glyph-on.bp-badge-tl .bp-sm-badge, .bp-design-gradient.bp-glyph-on.bp-badge-bl .bp-sm-badge { left: 70px; }
.bp-design-gradient.bp-check-on.bp-badge-tr .bp-service-card.bp-selected .bp-sm-badge, .bp-design-gradient.bp-check-on.bp-badge-br .bp-service-card.bp-selected .bp-sm-badge { right: 50px; }

/* Eingebaute Icons als Dienstleistungs-/Gruppen-Symbol */
.bp-service-icon svg { width: 1em; height: 1em; }
.bp-sgc-icon svg { width: 22px; height: 22px; }

/* Hinweis-Popup (z. B. „Bitte fülle alle Pflichtfelder aus.“) am oberen Bildschirmrand */
.bp-toast { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -20px); z-index: 2147483000; max-width: min(92vw, 520px); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--bp-toast-bg, #fef2f2); color: var(--bp-toast-text, #b91c1c); border: 1px solid #fecaca; box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: .95rem; line-height: 1.35; cursor: pointer; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.bp-toast.bp-toast-in { opacity: 1; transform: translate(-50%, 0); }
.bp-toast .bp-toast-close { border: 0; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
@media (prefers-reduced-motion: reduce) { .bp-toast { transition: none; } }

/* ============================================================
   Formular-Layouts (Buchungsdesigner → Formular-Layout)
   Nur Anordnung – Farben, Schrift und Buttons kommen aus den
   übrigen Design-Einstellungen (CSS-Variablen --bp-*).
   .bp-fl-m = schmale Darstellung (Smartphone), per JS nach
   der Breite des Formulars gesetzt (form-layout.js).
   ============================================================ */
.bp-fl-panel { display: contents; }
.bp-fl-brand, .bp-fl-contact, .bp-mprog, .bp-aside, .bp-mbar { display: none; }
.bp-fl-chip {
    display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--bp-primary) 10%, #fff); color: var(--bp-primary-dark, var(--bp-primary));
    font-size: .8rem; font-weight: 600;
}
.bp-fl-default .bp-fl-chip, .bp-fl-side .bp-fl-chip { display: none !important; }

/* Fortschritt als Text + Segmente (Smartphone) */
.bp-mprog-t { display: block; font-size: .78rem; font-weight: 600; color: var(--bp-gray-700); margin-bottom: 8px; }
.bp-mprog-bar { display: flex; gap: 5px; }
.bp-mprog-bar i { flex: 1; height: 5px; border-radius: 5px; background: var(--bp-gray-200); }
.bp-mprog-bar i.on { background: var(--bp-primary); }

/* Zusammenfassung / feste Leiste */
.bp-aside { background: var(--bp-card-bg, #fff); border: 1.5px solid var(--bp-gray-200); border-radius: var(--bp-radius); padding: 18px; }
.bp-aside h4 { margin: 0 0 8px; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.bp-aside-row { padding: 10px 0; border-top: 1px solid var(--bp-gray-100); }
.bp-aside-row small { display: block; color: var(--bp-gray-400); font-size: .72rem; }
.bp-aside-row b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.bp-aside-row em { display: block; font-style: normal; color: var(--bp-gray-700); font-size: .8rem; line-height: 1.35; }
.bp-aside-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--bp-gray-900); margin-top: 6px; padding-top: 12px; font-size: 1rem; }
.bp-aside-total b { font-size: 1.05rem; font-weight: 800; }
.bp-mbar { align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-top: 1px solid var(--bp-gray-200); box-shadow: 0 -6px 16px rgba(15,23,42,.07); position: sticky; bottom: 0; z-index: 30; }
.bp-mbar-sum { flex: 1; min-width: 0; }
.bp-mbar-sum small { display: block; color: var(--bp-gray-400); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-mbar-sum b { font-size: 1.05rem; font-weight: 800; }
.bp-mbar .bp-btn { margin: 0; width: auto; white-space: nowrap; }

/* ─── Layout A: Seitenleiste mit Zusammenfassung ─────────── */
.bp-fl-side { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 24px; align-items: start; }
.bp-fl-side .bp-steps { grid-column: 1 / -1; grid-row: 1; justify-content: center; margin-bottom: 22px; padding: 16px 20px; background: var(--bp-card-bg, #fff); border: 1.5px solid var(--bp-gray-200); border-radius: var(--bp-radius); }
.bp-fl-side .bp-step { flex-direction: row; gap: 8px; }
.bp-fl-side .bp-step-label { font-size: .82rem; font-weight: 600; }
.bp-fl-side .bp-step-line { flex: none; width: 36px; min-width: 0; margin: 0 8px; }
.bp-fl-side > .bp-form-step { grid-column: 1 / -1; grid-row: 2; }
.bp-fl-side.bp-has-aside > .bp-form-step:not(.bp-success-step) { grid-column: 1; background: var(--bp-card-bg, #fff); border: 1.5px solid var(--bp-gray-200); border-radius: var(--bp-radius); padding: 24px; }
.bp-fl-side.bp-has-aside > .bp-aside { display: block; grid-column: 2; grid-row: 2; position: sticky; top: 20px; }
.bp-fl-side > .bp-mprog { display: none; }

/* ─── Layout B: Split mit Fortschritts-Panel ─────────────── */
.bp-fl-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1.5px solid var(--bp-gray-200); border-radius: var(--bp-radius); background: #fff; box-shadow: var(--bp-shadow); overflow: hidden; }
.bp-fl-split .bp-fl-panel {
    display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / span 40; padding: 30px 24px; color: #fff;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bp-primary) 82%, #000), color-mix(in srgb, var(--bp-primary) 52%, #000));
    --bp-step-active-bg: #fff; --bp-step-active-text: var(--bp-primary-dark, var(--bp-primary)); --bp-step-active-label: #fff;
    --bp-step-done-bg: rgba(255,255,255,.88); --bp-step-done-text: var(--bp-primary-dark, var(--bp-primary)); --bp-step-done-label: rgba(255,255,255,.88);
    --bp-step-pending-bg: transparent; --bp-step-pending-text: rgba(255,255,255,.75); --bp-step-pending-label: rgba(255,255,255,.7);
}
.bp-fl-split .bp-fl-brand { display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 30px; letter-spacing: .2px; }
.bp-fl-split .bp-fl-contact:empty { display: none; }
.bp-fl-split .bp-fl-contact { display: block; margin-top: auto; padding-top: 20px; font-size: .78rem; line-height: 1.6; opacity: .8; }
.bp-fl-split .bp-steps { flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0; gap: 0; background: none; box-shadow: none; padding: 0; }
.bp-fl-split .bp-step { flex-direction: row; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 26px; }
.bp-fl-split .bp-step:last-of-type { padding-bottom: 0; }
.bp-fl-split .bp-step-number { flex: none; width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.4); box-sizing: border-box; }
.bp-fl-split .bp-step.bp-step-active .bp-step-number, .bp-fl-split .bp-step.bp-step-done .bp-step-number { border-color: transparent; }
.bp-fl-split .bp-step-label { font-size: .86rem; padding-top: 5px; }
.bp-fl-split .bp-step.bp-step-active .bp-step-label { font-weight: 700; }
.bp-fl-split .bp-step-line { display: none; }
.bp-fl-split .bp-step:not(:last-of-type):after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: rgba(255,255,255,.28); }
.bp-fl-split > .bp-form-step { grid-column: 2; padding: 34px 38px; }

/* ─── Smartphone-Anordnung (beide Layouts) ───────────────── */
.bp-fl-m.bp-fl-side, .bp-fl-m.bp-fl-split { display: block; }
.bp-fl-m.bp-fl-side .bp-steps { display: none; }
.bp-fl-m.bp-fl-side > .bp-mprog, .bp-fl-m.bp-fl-side .bp-fl-panel > .bp-mprog { display: block; margin-bottom: 16px; }
.bp-fl-m.bp-fl-side.bp-has-aside > .bp-form-step:not(.bp-success-step) { background: none; border: none; padding: 0; }
.bp-fl-m.bp-fl-side.bp-has-aside > .bp-aside { display: none; }
.bp-fl-m.bp-fl-split .bp-fl-panel { display: block; padding: 18px 18px 16px; }
.bp-fl-m.bp-fl-split .bp-steps, .bp-fl-m.bp-fl-split .bp-fl-contact { display: none; }
.bp-fl-m.bp-fl-split .bp-fl-brand { margin-bottom: 8px; font-size: .95rem; }
.bp-fl-m.bp-fl-split .bp-mprog { display: block; }
.bp-fl-m.bp-fl-split .bp-mprog-t { color: #fff; margin-bottom: 10px; }
.bp-fl-m.bp-fl-split .bp-mprog-bar i { background: rgba(255,255,255,.28); }
.bp-fl-m.bp-fl-split .bp-mprog-bar i.on { background: #fff; }
.bp-fl-m.bp-fl-split > .bp-form-step { padding: 18px 16px; }
/* Schritt-Schaltflächen übernimmt die feste Leiste */
.bp-fl-m.bp-has-mbar:not(.bp-fl-default) .bp-mbar { display: flex; }
.bp-fl-m.bp-has-mbar:not(.bp-fl-default) .bp-form-step .bp-form-actions,
.bp-fl-m.bp-has-mbar:not(.bp-fl-default) .bp-form-step > .bp-btn-back { display: none; }
.bp-fl-m.bp-fl-side .bp-mbar-back { display: none !important; }
.bp-fl-m.bp-fl-split .bp-mbar-back { flex: 0 0 auto; }
.bp-fl-m.bp-fl-split .bp-mbar-sum { display: none; }
.bp-fl-m.bp-fl-split .bp-mbar .bp-btn { flex: 1; }

/* ── Preisdarstellung in der Dienstleistungs-Karte (price_style, Aktionspreise, Zeit-Chips) ── */
.bp-meta-price { flex-wrap: wrap; row-gap: 0; }
.bp-meta-price-text { white-space: normal; }
.bp-meta-price-text > span { white-space: nowrap; }
.bp-meta-price .bp-meta-icon { flex: 0 0 auto; }
.bp-pf-old { display: none; }
.bp-sale-strike-on .bp-pf-old { display: inline; text-decoration: line-through; opacity: .55; font-weight: 400; font-size: .85em; margin-right: 6px; }
.bp-pf-badge { display: none; }
.bp-sale-badge-on .bp-pf-badge { display: inline-block; margin-left: 8px; background: #dc2626; color: #fff; font-size: .62em; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 99px; vertical-align: middle; letter-spacing: 0; }
.bp-pf-note::after { content: var(--bp-price-note, ""); }
.bp-pf-note { flex-basis: 100%; font-size: .72em; font-weight: 400; opacity: .65; line-height: 1.3; }
.bp-pf-salenote { display: none; }
.bp-sale-note-on .bp-on-sale .bp-pf-salenote { display: block; flex-basis: 100%; font-size: .72em; font-weight: 600; color: #b91c1c; line-height: 1.3; }
.bp-sale-note-on .bp-on-sale .bp-pf-note { display: none; }
.bp-design-gradient .bp-sale-note-on .bp-on-sale .bp-pf-salenote, .bp-design-gradient.bp-sale-note-on .bp-on-sale .bp-pf-salenote { color: #fff; }

/* A · Typografisch */
.bp-ps-typo .bp-meta-price-text { display: inline-block; }
.bp-ps-typo .bp-pf-int { font-size: 1.9em; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.bp-ps-typo .bp-pf-cents { font-size: .8em; font-weight: 700; vertical-align: .7em; }
.bp-ps-typo .bp-pf-cur { font-size: .8em; font-weight: 600; opacity: .75; }
.bp-ps-typo .bp-pf-pre { font-size: .75em; font-weight: 500; opacity: .7; }

/* B · Preis-Pille (Badge auf Nicht-Bild-Karten ebenfalls) */
.bp-ps-pill .bp-meta-price,
.bp-ps-badge.bp-design-classic .bp-meta-price,
.bp-ps-badge.bp-design-row .bp-meta-price,
.bp-ps-badge.bp-design-gradient .bp-meta-price { background: color-mix(in srgb, var(--bp-primary) 12%, #fff); color: var(--bp-primary); padding: 5px 13px; border-radius: 999px; font-weight: 700; }
.bp-booking-form-wrap.bp-ps-pill.bp-design-gradient .bp-meta-price, .bp-booking-form-wrap.bp-ps-badge.bp-design-gradient .bp-meta-price { background: rgba(255,255,255,.22); color: #fff; }

/* C · Preisleiste (nicht in der Premium-Liste) */
.bp-ps-bar:not(.bp-design-row) .bp-service-meta { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 14px; align-items: center; }
.bp-ps-bar:not(.bp-design-row) .bp-service-meta .bp-meta-price { order: -1; margin-right: auto; margin-left: 0; font-size: 1.1em; font-weight: 700; color: var(--bp-gray-900, #111827); }
.bp-ps-bar.bp-design-gradient .bp-service-meta { background: rgba(255,255,255,.18); border-color: transparent; }
.bp-booking-form-wrap.bp-ps-bar.bp-design-gradient .bp-service-meta .bp-meta-price { color: #fff; }
.bp-ps-bar.bp-design-photo .bp-service-meta .bp-meta-price { margin-left: 0; }

/* D · Preis-Badge auf dem Bild (Foto-/Verlauf-Karten) */
.bp-sm-price { display: none; }
.bp-ps-badge.bp-design-photo .bp-sm-price {
    display: block; position: absolute; z-index: 2; right: 12px; bottom: 10px; background: #fff; color: var(--bp-primary);
    font-size: 14px; font-weight: 700; line-height: 1.2; padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); white-space: nowrap;
}
.bp-ps-badge.bp-design-photo.bp-badge-br .bp-sm-price { right: auto; left: 12px; }
.bp-ps-badge.bp-design-photo .bp-meta-price { display: none; }
.bp-sm-price .bp-pf-int { font-size: 1.15em; }
.bp-sm-price .bp-pf-badge { margin-left: 6px; }
.bp-sm-price .bp-pf-old { display: none !important; }

/* E · Preis in den Zeit-Chips und „Gewählt“-Zeile */
.bp-chip-price { display: none; }
.bp-chipprice-on .bp-variant-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.25; }
.bp-chipprice-on .bp-chip-price { display: block; font-size: .82em; font-weight: 600; opacity: .85; }
.bp-chip-price .bp-pf-badge { display: none !important; }
.bp-variant-total { display: none; }
.bp-vtotal-on .bp-variant-total:not([hidden]) { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 2px; padding: 8px 12px; background: #f3f4f6; border-radius: 8px; font-size: .88em; color: #374151; }
.bp-design-gradient .bp-vtotal-on .bp-variant-total:not([hidden]), .bp-design-gradient.bp-vtotal-on .bp-variant-total:not([hidden]) { background: rgba(255,255,255,.2); color: inherit; }
.bp-vt-label { opacity: .7; }
.bp-vt-price .bp-pf-badge { display: none !important; }
/* in Chips und „Gewählt“-Zeile keine Typo-Größen */
.bp-chip-price .bp-pf-int, .bp-chip-price .bp-pf-cents, .bp-chip-price .bp-pf-cur, .bp-chip-price .bp-pf-old,
.bp-vt-price .bp-pf-int, .bp-vt-price .bp-pf-cents, .bp-vt-price .bp-pf-cur, .bp-vt-price .bp-pf-old { font-size: 1em; vertical-align: baseline; letter-spacing: 0; font-weight: inherit; opacity: 1; }
.bp-chip-price .bp-pf-old, .bp-vt-price .bp-pf-old { font-size: .9em; opacity: .6; }
.bp-chip-price { white-space: nowrap; font-size: 12px; }
.bp-chipprice-on .bp-variant-chip { border-radius: 14px; padding: 6px 14px; }
.bp-vtotal-on .bp-variant-total:not([hidden]) { font-size: 13px; line-height: 1.4; gap: 4px 6px; flex-wrap: nowrap; align-items: center; }
.bp-variant-total .bp-vt-label, .bp-variant-total strong, .bp-variant-total .bp-vt-sep { font-size: 13px; font-weight: 400; line-height: 1.4; }
.bp-variant-total strong { font-weight: 700; }
.bp-variant-total .bp-vt-price { margin-left: auto; }
.bp-variant-total .bp-vt-price span { font-size: inherit; }

.bp-vtotal-on .bp-variant-total:not([hidden]) { flex-wrap: wrap; }
.bp-variant-total > * { white-space: nowrap; }

/* ── Slider für Dienstleistungs-Karten (slider = mobile | always) ── */
.bp-sl-nav { display: none; }
.bp-booking-form-wrap { --bp-sl-cur: var(--bp-sl-n, 3); --bp-sl-pk: 0px; }
.bp-booking-form-wrap.bp-fl-m { --bp-sl-cur: var(--bp-sl-nm, 1); }
.bp-booking-form-wrap.bp-sl-peek { --bp-sl-pk: 36px; }
.bp-booking-form-wrap.bp-sl-always .bp-service-grid,
.bp-booking-form-wrap.bp-sl-mobile.bp-fl-m .bp-service-grid {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain; margin-bottom: 8px;
    padding: 14px var(--bp-sl-inset, 12px) 20px; scroll-padding-inline: var(--bp-sl-inset, 12px); box-sizing: border-box;
}
.bp-booking-form-wrap.bp-sl-always .bp-service-grid::-webkit-scrollbar,
.bp-booking-form-wrap.bp-sl-mobile.bp-fl-m .bp-service-grid::-webkit-scrollbar { display: none; }
.bp-booking-form-wrap.bp-sl-always .bp-service-grid > .bp-service-card,
.bp-booking-form-wrap.bp-sl-mobile.bp-fl-m .bp-service-grid > .bp-service-card {
    flex: 0 0 calc((100% - (var(--bp-sl-cur) - 1) * var(--bp-card-gap, 16px) - var(--bp-sl-pk)) / var(--bp-sl-cur));
    min-width: 0; scroll-snap-align: start;
}
.bp-booking-form-wrap.bp-sl-always .bp-service-grid > .bp-service-group-title,
.bp-booking-form-wrap.bp-sl-mobile.bp-fl-m .bp-service-grid > .bp-service-group-title { flex: 0 0 100%; }
.bp-booking-form-wrap.bp-sl-always .bp-service-grid.bp-layout-list,
.bp-booking-form-wrap.bp-sl-mobile.bp-fl-m .bp-service-grid.bp-layout-list { flex-direction: row; }
.bp-sl-nav.bp-sl-has { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 20px; }
.bp-sl-dots { display: none; gap: 7px; align-items: center; }
.bp-sl-dots-on .bp-sl-dots { display: inline-flex; }
.bp-sl-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; cursor: pointer; transition: all .2s; }
.bp-sl-dot.bp-on { background: var(--bp-primary); width: 22px; border-radius: 99px; }
.bp-sl-prev, .bp-sl-next { display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.bp-sl-arrows-on .bp-sl-prev, .bp-sl-arrows-on .bp-sl-next { display: inline-flex; }
.bp-sl-prev:disabled, .bp-sl-next:disabled { opacity: .35; cursor: default; }
.bp-sl-prev:not(:disabled):hover, .bp-sl-next:not(:disabled):hover { border-color: var(--bp-primary); color: var(--bp-primary); }
/* nur Smartphone-Slider: kein Nav ohne Slider-Modus */
.bp-booking-form-wrap.bp-sl-off .bp-sl-nav { display: none !important; }
.bp-booking-form-wrap.bp-sl-mobile:not(.bp-fl-m) .bp-sl-nav { display: none !important; }