/* Eigene Buchung & Slot-Uhr (Website) */

.ssp-bk {
    --bk-navy: #00024f;
    --bk-navy-2: #1b1f7a;
    --bk-ice: #eef4ff;
    --bk-ice-2: #dbe7ff;
    --bk-text: #1d2333;
    --bk-muted: #3b4357;
    --bk-line: #e4e7ec;
    --bk-green: #12b76a;
    position: relative;
    left: 50%;
    width: min(1120px, calc(100vw - 32px));
    transform: translateX(-50%);
    margin-bottom: 32px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
}
.ssp-bk a { color: inherit; }
.ssp-bk h3 { margin: 0 0 12px; font-size: 19px; color: var(--bk-navy); }

.ssp-bk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ssp-bk-title { margin: 0; font-size: 30px; line-height: 1.2; }
.ssp-bk-sub { margin: 4px 0 0; opacity: .9; }
.ssp-bk-note { padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.12); }

.ssp-bk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #dbe7ff; }
.ssp-bk-steps li { display: flex; align-items: center; gap: 8px; }
.ssp-bk-steps i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); font-weight: 700; font-size: 13px; }
.ssp-bk-steps .is-on { color: #fff; font-weight: 700; }
.ssp-bk-steps .is-on i { background: #fff; color: var(--bk-navy); border-color: #fff; }
.ssp-bk-steps .is-done i { background: var(--bk-green); border-color: var(--bk-green); color: #fff; }

.ssp-bk-card { background: #fff; color: var(--bk-text); border-radius: 16px; padding: 22px; }
.ssp-bk-card a { color: var(--bk-navy); font-weight: 700; }
.ssp-bk-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ssp-bk-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ssp-bk-summary { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }

.ssp-bk-error { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fee4e2; color: #7a271a; }
.ssp-bk-error a { color: #7a271a; font-weight: 700; }
.ssp-bk-ok { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #dcfae6; color: #054f31; }
.ssp-bk-small { margin: 0; font-size: 13px; color: var(--bk-muted); }
.ssp-bk-center { text-align: center; }

/* Kalender: Monat + Tag (Desktop nebeneinander, Handy untereinander) */
.ssp-bk-cal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ssp-bk-month { display: flex; flex-direction: column; gap: 14px; }
.ssp-bk-monthnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ssp-bk-monthtitle { margin: 0; font-size: 22px; font-weight: 700; color: var(--bk-navy); }
.ssp-bk-round { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bk-navy); color: #fff !important; font-size: 22px; text-decoration: none; flex-shrink: 0; }
.ssp-bk-round.is-off { opacity: .25; }
.ssp-bk-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ssp-bk-mhead { text-align: center; font-size: 12px; font-weight: 700; color: #667085; padding-bottom: 2px; }
.ssp-bk-mday { position: relative; overflow: hidden; height: 74px; padding: 8px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--bk-line); background: #fff; color: var(--bk-text) !important; text-decoration: none; font-weight: 400 !important; display: flex; flex-direction: column; justify-content: space-between; }
.ssp-bk-mday b { font-size: 16px; }
.ssp-bk-mday small { font-size: 11px; line-height: 1.2; color: #98a2b3; }
a.ssp-bk-mday:hover, a.ssp-bk-mday:focus-visible { border-color: var(--bk-navy); box-shadow: 0 0 0 1px var(--bk-navy); }
.ssp-bk-mday.is-off { background: #fafbfc; color: #98a2b3 !important; }
.ssp-bk-mday.is-today { border: 2px solid var(--bk-navy); }
.ssp-bk-mday.is-on { background: var(--bk-navy); border-color: var(--bk-navy); color: #fff !important; }
.ssp-bk-mday.is-on small { color: #dbe7ff; }
.ssp-bk-mday.is-ferien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fdb022; opacity: .55; }
.ssp-bk-mday.is-holiday::before { content: ""; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #fdb022; }
.ssp-bk-dots { display: flex; flex-wrap: wrap; gap: 3px; min-height: 8px; }
.ssp-bk-dots i, .ssp-bk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-green); }
.ssp-bk-dots .is-few, .ssp-bk-legend .is-few { background: #f79009; }
.ssp-bk-dots .is-full, .ssp-bk-legend .is-full { background: #98a2b3; }
.ssp-bk-dots .is-soon { background: transparent; box-shadow: inset 0 0 0 1.5px #98a2b3; }
.ssp-bk-mday.is-on .ssp-bk-dots i { box-shadow: 0 0 0 1.5px #fff; }
.ssp-bk-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--bk-muted); }
.ssp-bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ssp-bk-legend .is-ferien { width: 16px; height: 4px; border-radius: 2px; background: #fdb022; opacity: .55; }
.ssp-bk-legend .is-holiday { width: 7px; height: 7px; background: #fdb022; }

.ssp-bk-dayview { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.ssp-bk-overline { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
.ssp-bk .ssp-bk-daytitle { margin: 0; font-size: 26px; line-height: 1.2; color: var(--bk-navy); }
.ssp-bk-dayview .ssp-bk-sub { margin: 0 0 6px; color: var(--bk-muted); }
.ssp-bk-daynote { margin: 0; padding: 10px 12px; border-radius: 10px; background: #ebe9fe; color: #3e1c96; font-size: 14px; }
.ssp-bk-slotlist { display: flex; flex-direction: column; gap: 10px; }
.ssp-bk-slotcard { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--bk-ice-2); background: #fff; color: var(--bk-text) !important; text-decoration: none; font-weight: 400 !important; }
a.ssp-bk-slotcard:hover, a.ssp-bk-slotcard:focus-visible { border-color: var(--bk-navy); background: var(--bk-ice); }
.ssp-bk-slotcard b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ssp-bk-slotcard__state { font-size: 14px; font-weight: 700; color: #067647; }
.ssp-bk-slotcard.is-few .ssp-bk-slotcard__state { color: #b54708; }
.ssp-bk-slotcard.is-full, .ssp-bk-slotcard.is-past, .ssp-bk-slotcard.is-soon { background: #f2f4f7; border-color: #f2f4f7; color: #667085 !important; }
.ssp-bk-slotcard.is-full .ssp-bk-slotcard__state, .ssp-bk-slotcard.is-past .ssp-bk-slotcard__state, .ssp-bk-slotcard.is-soon .ssp-bk-slotcard__state { color: #667085; }
.ssp-bk-meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e4e7ec; overflow: hidden; }
.ssp-bk-meter i { display: block; height: 100%; border-radius: 3px; background: var(--bk-green); }
.ssp-bk-slotcard.is-few .ssp-bk-meter i { background: #f79009; }
.ssp-bk-slotcard.is-full .ssp-bk-meter i { background: #98a2b3; }

@media (max-width: 860px) {
    .ssp-bk-cal { grid-template-columns: 1fr; gap: 14px; }
    .ssp-bk-month { padding: 14px; gap: 10px; }
    .ssp-bk-mgrid { gap: 4px; }
    .ssp-bk-mday { height: 50px; padding: 5px 2px; align-items: center; justify-content: center; gap: 4px; }
    .ssp-bk-mday b { font-size: 15px; }
    .ssp-bk-mday small { display: none; }
    .ssp-bk-mday.is-off { border-color: transparent; background: transparent; }
    .ssp-bk-mday.is-on { background: var(--bk-navy); border-color: var(--bk-navy); }
    .ssp-bk-mday.is-holiday::before { right: 4px; top: 4px; width: 6px; height: 6px; }
    .ssp-bk-mday.is-ferien::after { left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 2px; }
    .ssp-bk-dots { gap: 2px; justify-content: center; min-height: 5px; }
    .ssp-bk-dots i { width: 5px; height: 5px; }
    .ssp-bk-legend { font-size: 12px; gap: 4px 12px; }
    .ssp-bk-dayview { scroll-margin-top: 70px; }
    .ssp-bk .ssp-bk-daytitle { font-size: 21px; }
    .ssp-bk-slotcard { padding: 14px 16px; }
    .ssp-bk-slotcard b { font-size: 18px; }
    .ssp-bk-card { padding: 16px; }
    .ssp-bk-title { font-size: 25px; }
    .ssp-bk-summary { position: static; }
}

/* Tickets */
.ssp-bk-ticket { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f4; }
.ssp-bk-ticket:first-of-type { border-top: 0; }
.ssp-bk-ticket.is-extra { background: var(--bk-ice); margin: 8px -12px 0; padding: 12px; border-radius: 12px; border: 0; }
.ssp-bk-ticket__name { flex: 1; min-width: 0; }
.ssp-bk-ticket__name b { display: block; }
.ssp-bk-ticket__name span { display: block; font-size: 13px; color: var(--bk-muted); }
.ssp-bk-ticket__name em { font-style: normal; font-weight: 700; color: var(--bk-navy); font-size: 14px; }
.ssp-bk-stepper { display: inline-flex; align-items: center; border: 1px solid #d0d5dd; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #fff; }
.ssp-bk-stepper button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--bk-navy); font-size: 22px; cursor: pointer; }
.ssp-bk-stepper button:hover { background: var(--bk-ice); }
.ssp-bk-stepper input { width: 36px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 700; font-size: 17px; color: var(--bk-text); -moz-appearance: textfield; }
.ssp-bk-stepper input::-webkit-outer-spin-button, .ssp-bk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ssp-bk-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fef0c7; color: #93370d; font-size: 14px; }

.ssp-bk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ssp-bk-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ssp-bk-field label { font-size: 14px; font-weight: 700; }
.ssp-bk-field input { height: 48px; border: 1px solid #d0d5dd; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--bk-text); background: #fff; }
.ssp-bk-field input:focus { outline: 2px solid var(--bk-navy); outline-offset: 1px; border-color: var(--bk-navy); }
.ssp-bk-field small { font-size: 12px; color: var(--bk-muted); }
.ssp-bk-field small.is-ok { color: #067647; font-weight: 700; }
.ssp-bk-field small.is-bad { color: #b42318; font-weight: 700; }
.ssp-bk-mandate { margin: 14px 0; border: 1px solid #d0d5dd; border-radius: 12px; padding: 12px 14px; background: #fafbfc; font-size: 13px; color: var(--bk-muted); }
.ssp-bk-mandate summary { cursor: pointer; font-weight: 700; color: var(--bk-text); font-size: 14px; }
.ssp-bk-mandate p { margin: 8px 0 0; }
.ssp-bk-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.ssp-bk-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bk-navy); flex-shrink: 0; }
.ssp-bk-terms { color: #fff; }
.ssp-bk-terms a { color: #fff; font-weight: 700; }

.ssp-bk-slotbox { background: var(--bk-ice); border-radius: 12px; padding: 14px 16px; }
.ssp-bk-slotbox p { margin: 0; }
.ssp-bk-slotbox__date { font-size: 19px; font-weight: 700; color: var(--bk-navy); }
.ssp-bk-slotbox__time span { color: var(--bk-muted); }
.ssp-bk-slotbox a { display: inline-block; margin-top: 4px; font-size: 14px; }
.ssp-bk-lines { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 15px; }
.ssp-bk-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ssp-bk-total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--bk-navy); padding-top: 10px; }
.ssp-bk-total b { font-size: 26px; color: var(--bk-navy); }
.ssp-bk-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--bk-navy); color: #fff !important; font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.ssp-bk-btn:hover { background: var(--bk-navy-2); }
.ssp-bk-btn.is-line { width: auto; background: #fff; border: 2px solid var(--bk-navy); color: var(--bk-navy) !important; min-height: 44px; font-size: 14px; }
.ssp-bk-btn.is-danger { background: #b42318; }
.ssp-bk-timer { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fef0c7; color: #7a2e0e; font-size: 14px; }
.ssp-bk-timer.is-expired { background: #fee4e2; color: #7a271a; }

/* Ticket */
.ssp-bk-done { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ssp-bk-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--bk-green); font-size: 28px; font-weight: 700; flex-shrink: 0; }
.ssp-bk-ticketcard { flex: 999 1 520px; min-width: 0; display: flex; flex-wrap: wrap; background: #fff; color: var(--bk-text); border-radius: 16px; overflow: hidden; }
.ssp-bk-ticketcard.is-cancelled { opacity: .7; }
.ssp-bk-ticketcard__info { flex: 1 1 300px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.ssp-bk-ticketcard__info p { margin: 0; }
.ssp-bk-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.ssp-bk-ticketcard__date { font-size: 26px; font-weight: 700; color: var(--bk-navy); }
.ssp-bk-ticketcard__time { font-size: 20px; }
.ssp-bk-ticketcard__qr { flex: 0 1 250px; min-width: 220px; background: var(--bk-ice); border-left: 2px dashed var(--bk-ice-2); padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.ssp-bk-ticketcard__qr svg { width: 190px; height: 190px; border-radius: 8px; }
.ssp-bk-ticketcard__qr p { margin: 0; font-size: 13px; color: var(--bk-muted); }
.ssp-bk-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.ssp-bk-kv dt { color: var(--bk-muted); }
.ssp-bk-kv dd { margin: 0; font-weight: 700; }
.ssp-bk-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Slot-Uhr auf der Startseite */
.ssp-clock { display: flex; flex-wrap: wrap; margin: 0 0 32px; background: #fff; color: #1d2333; border-radius: 16px; overflow: hidden; text-align: left; }
.ssp-clock__main { flex: 999 1 380px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ssp-clock p { margin: 0; }
.ssp-clock__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3b4357; }
.ssp-clock__dot { width: 10px; height: 10px; border-radius: 50%; background: #12b76a; flex-shrink: 0; }
.ssp-clock__dot.is-off { background: #98a2b3; }
.ssp-clock__label { font-size: 17px; color: #3b4357; }
.ssp-clock__digits { font-size: clamp(52px, 11vw, 84px); line-height: 1; font-weight: 700; color: #00024f; font-variant-numeric: tabular-nums; }
.ssp-clock__slot { font-size: 18px; }
.ssp-clock__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px !important; }
.ssp-clock__actions .button { margin: 0; }
.ssp-clock__actions .button:not(.dark) { background: #fff; color: #00024f; border: 2px solid #00024f; }
.ssp-clock__today { flex: 1 1 260px; background: #eef4ff; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ssp-clock__today h3 { margin: 0; font-size: 15px; color: #00024f; }
.ssp-clock__slotrow { background: #fff; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ssp-clock__slotrow p { display: flex; justify-content: space-between; gap: 8px; }
.ssp-clock__slotrow span { font-size: 13px; color: #3b4357; }
.ssp-clock__slotrow.is-running span { color: #067647; font-weight: 700; }
.ssp-clock__slotrow.is-over { opacity: .55; }
.ssp-clock__bar { height: 6px; border-radius: 3px; background: #dbe7ff; overflow: hidden; }
.ssp-clock__bar span { display: block; height: 100%; background: #00024f; }
.ssp-clock__small { font-size: 13px; color: #3b4357; }
.ssp-bk-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ssp-bk-tip[hidden] { display: none; }
.ssp-bk-tip p { margin: 0; flex: 1 1 260px; }
.ssp-bk-tipbtn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: #93370d; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ssp-bk-tipbtn:hover { background: #7a2e0e; }

.ssp-bk-rentalnote { margin-top: 4px; color: #1b1f7a !important; font-weight: 700; }