/*
 * Buchung & Angebote — Grundlayout (Default-CSS der Extension).
 * Nutzt die Theme-Design-Tokens (--color-*, --space-* …) mit Fallbacks, damit die
 * Inhaltselemente auch OHNE Theme sauber aussehen. Das Projekt-Theme kann jede Regel
 * überschreiben (z. B. in public/theme/css/components.css).
 */

.angebot-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5, 32px); }
.angebot-filter__btn { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: .15s; }
.angebot-filter__btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-text, #1c2b28); }
.angebot-filter__btn.is-active { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.angebot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 32px); }
@media (max-width: 900px) { .angebot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .angebot-grid { grid-template-columns: 1fr; } }
.angebot { display: flex; flex-direction: column; background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); overflow: hidden; transition: .16s; }
.angebot:hover { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); transform: translateY(-3px); }
.angebot--highlight { border-color: var(--color-accent, #e08a2e); box-shadow: 0 0 0 1px var(--color-accent, #e08a2e); }
.angebot__media { position: relative; aspect-ratio: 3/2; }
.angebot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.angebot__cat { position: absolute; top: 10px; left: 10px; background: var(--color-primary, #0f766e); color: #fff; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); padding: 4px 10px; border-radius: 8px; }
.angebot__body { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding: var(--space-4, 24px); flex: 1; }
.angebot__title { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); margin: 0; }
.angebot__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__meta span { display: inline-block; min-width: 62px; color: var(--color-text-subtle, #85938d); }
.angebot__foot { margin-top: auto; padding-top: var(--space-3, 16px); }

/* Angebot: Interesse / Anmeldung / Zähler */
.angebot__signup { margin-top: auto; padding-top: var(--space-3, 16px); display: flex; flex-direction: column; gap: 8px; }
.angebot__free { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__free b { color: var(--color-text, #1c2b28); }
.angebot__meter-tx { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__meter-tx b { color: var(--color-accent, #e08a2e); }
.angebot__bar { height: 6px; border-radius: 999px; background: var(--color-surface-sunken, #e7edeb); overflow: hidden; margin-top: 4px; }
.angebot__bar i { display: block; height: 100%; background: var(--color-accent, #e08a2e); border-radius: 999px; transition: width .3s; }
.angebot__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.js-interest.is-done { color: var(--color-primary, #0f766e); border-color: var(--color-primary, #0f766e); }

/* Anmelde-Dialog */
.angebot-modal { position: fixed; inset: 0; background: rgba(20,28,25,.55); display: flex; align-items: center; justify-content: center; padding: var(--space-4, 24px); z-index: 100; }
.angebot-modal[hidden] { display: none; }
.angebot-modal__box { background: var(--color-surface, #ffffff); border-radius: var(--radius-lg, 16px); padding: var(--space-5, 32px); width: 100%; max-width: 460px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto; }
.angebot-modal__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--color-text-muted, #56655f); cursor: pointer; }
.angebot-modal__h { margin: 0 0 4px; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); }
.angebot-modal__for { margin: 0 0 var(--space-3, 16px); }
.angebot-form .field { margin-bottom: var(--space-3, 16px); }
.angebot-form .field label { display: block; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); margin-bottom: 4px; }
.angebot-form .input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, #dde5e2); border-radius: 8px; background: var(--color-surface, #ffffff); color: var(--color-text, #1c2b28); font: inherit; }
.angebot-form .input:focus { outline: 2px solid var(--color-primary, #0f766e); outline-offset: 1px; border-color: var(--color-primary, #0f766e); }
.angebot-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); margin: 4px 0 var(--space-3, 16px); }
.angebot-form__msg { padding: 10px 12px; border-radius: 8px; font-size: var(--fs-caption, 0.8125rem); margin-bottom: var(--space-3, 16px); }
.angebot-form__msg.is-ok { background: color-mix(in srgb, #16a34a 14%, var(--color-surface, #ffffff)); color: #15803d; }
.angebot-form__msg.is-error { background: color-mix(in srgb, #dc2626 12%, var(--color-surface, #ffffff)); color: #dc2626; }
.angebot-form__msg.is-warn { background: color-mix(in srgb, #e08a2e 16%, var(--color-surface, #ffffff)); color: #b45309; }
.angebot-form__pay { margin: 0 0 var(--space-3, 16px); }

/* Anmeldung/Buchung im Termin-Reader */
.event-booking { margin-top: var(--space-6, 48px); padding: var(--space-5, 32px); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); background: var(--color-surface-alt, #eef3f1); }
.event-booking__h { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.2rem; margin: 0 0 var(--space-2, 8px); }
.event-booking__info { color: var(--color-text-muted, #56655f); margin: 0 0 var(--space-3, 16px); }
.event-booking__status { font-size: 1rem; color: var(--color-text, #1c2b28); margin: 0 0 var(--space-4, 24px); }
.event-booking__form { max-width: 560px; }
.event-booking .beleg-pair { margin-bottom: 12px; }
.event-booking__flash { margin-bottom: var(--space-4, 24px); }

/* Rücksprung-Banner nach der PayPal-Zahlung */
.angebot-flash { padding: 14px 18px; border-radius: 12px; font-weight: 600; margin-bottom: var(--space-4, 24px); border: 1px solid transparent; }
.angebot-flash.is-ok { background: color-mix(in srgb, #16a34a 12%, var(--color-surface, #ffffff)); color: #15803d; border-color: color-mix(in srgb, #16a34a 35%, transparent); }
.angebot-flash.is-info { background: color-mix(in srgb, var(--color-primary, #0f766e) 10%, var(--color-surface, #ffffff)); color: var(--color-primary, #0f766e); border-color: color-mix(in srgb, var(--color-primary, #0f766e) 30%, transparent); }
.angebot-flash.is-error { background: color-mix(in srgb, #dc2626 10%, var(--color-surface, #ffffff)); color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, transparent); }

/* ===== Belegungsplan (Wochenraster) ===== */
.belegung__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4, 24px); }
.belegung__tab { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: .15s; }
.belegung__tab:hover { border-color: var(--color-primary, #0f766e); color: var(--color-text, #1c2b28); }
.belegung__tab.is-active { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.belegung__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.belegung__grid { display: grid; grid-template-columns: 52px repeat(7, minmax(84px, 1fr)); min-width: 640px; border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); overflow: hidden; background: var(--color-surface, #ffffff); }
.bg-col { border-left: 1px solid var(--color-border, #dde5e2); }
.bg-hline { border-top: 1px solid var(--color-border, #dde5e2); pointer-events: none; }
.bg-day { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); background: var(--color-surface-alt, #eef3f1); border-left: 1px solid var(--color-border, #dde5e2); border-bottom: 1px solid var(--color-border-strong, #c4d0cb); z-index: 3; }
.bg-hour { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 6px; font-size: 11px; color: var(--color-text-subtle, #85938d); transform: translateY(-7px); z-index: 3; }
.bg-block { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 5px; margin: 1px 2px; padding: 2px 6px; overflow: hidden; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.bg-block b { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-block span { font-size: 10.5px; color: var(--color-text-muted, #56655f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belegung__head { display: flex; align-items: center; gap: var(--space-4, 24px); margin-bottom: var(--space-4, 24px); flex-wrap: wrap; }
.belegung__foto { width: 96px; height: 62px; border-radius: var(--radius-lg, 16px); overflow: hidden; flex: 0 0 auto; border: 1px solid var(--color-border, #dde5e2); }
.belegung__foto img { width: 100%; height: 100%; object-fit: cover; }
.belegung__headinfo { flex: 1; min-width: 140px; }
.belegung__headinfo strong { display: block; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.1rem; }
.belegung__headinfo span { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.beleg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .beleg-pair { grid-template-columns: 1fr; } }

/* Selbstbuchung (club_buchung) */
.buchung__controls { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4, 24px); max-width: 640px; margin-bottom: var(--space-4, 24px); }
@media (max-width: 520px) { .buchung__controls { grid-template-columns: 1fr; } }
.buchung__flash { margin-bottom: var(--space-4, 24px); }
.buchung__slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2, 8px); }
.buchung__slot { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--color-primary, #0f766e) 8%, var(--color-surface, #ffffff)); border: 1px solid color-mix(in srgb, var(--color-primary, #0f766e) 35%, transparent); border-radius: 10px; padding: 10px 16px; cursor: pointer; transition: .15s; }
.buchung__slot:hover { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.buchung__mine-box { padding: var(--space-4, 24px); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); background: var(--color-surface-alt, #eef3f1); margin-bottom: var(--space-5, 32px); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.buchung__mine-box strong { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); }
.buchung__mine-note { color: var(--color-text-muted, #56655f); margin: 0; }
.bg-day.is-today { background: color-mix(in srgb, var(--color-primary, #0f766e) 16%, var(--color-surface-alt, #eef3f1)); color: var(--color-primary, #0f766e); }
/* Aus einer bestätigten Belegungsanfrage entstandene Belegung (gestrichelter Rand) */
.bg-block.is-booked, .cal-chip.is-booked, .cal-mchip.is-booked { border-left-style: dashed; border-left-width: 3px; }

/* ===== Belegungs-Kalender (Woche / Monat / Jahr) ===== */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 16px); margin-bottom: var(--space-4, 24px); }
.cal-views { display: inline-flex; border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; overflow: hidden; }
.cal-view { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 0; padding: 7px 16px; cursor: pointer; transition: .15s; }
.cal-view:hover { color: var(--color-text, #1c2b28); }
.cal-view.is-active { background: var(--color-primary, #0f766e); color: #fff; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-btn { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text, #1c2b28); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; min-width: 34px; padding: 6px 12px; cursor: pointer; line-height: 1; transition: .15s; }
.cal-btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-primary, #0f766e); }
.cal-label { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.05rem; margin-left: auto; }

/* Ganztägig-Leiste über dem Wochenraster */
.cal-allday { display: grid; min-width: 640px; border: 1px solid var(--color-border, #dde5e2); border-bottom: 0; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; background: var(--color-surface, #ffffff); }
.cal-allday__lbl { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; padding: 6px 6px; font-size: 10.5px; color: var(--color-text-subtle, #85938d); }
.cal-allday__day { border-left: 1px solid var(--color-border, #dde5e2); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-chip { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-allday + .belegung__grid { border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }

/* Monatsansicht */
.cal-month__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-month__head > div { text-align: center; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.cal-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mday { min-height: 84px; border: 1px solid var(--color-border, #dde5e2); border-radius: 8px; background: var(--color-surface, #ffffff); padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: .12s; }
.cal-mday:hover { border-color: var(--color-primary, #0f766e); }
.cal-mday.is-out { background: var(--color-surface-alt, #eef3f1); opacity: .5; }
.cal-mday.is-today { border-color: var(--color-primary, #0f766e); box-shadow: inset 0 0 0 1px var(--color-primary, #0f766e); }
.cal-mday__n { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: 12px; align-self: flex-end; color: var(--color-text-muted, #56655f); }
.cal-mday.is-today .cal-mday__n { color: var(--color-primary, #0f766e); }
.cal-mchip { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 4px; padding: 1px 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--color-text-subtle, #85938d); padding-left: 4px; }
@media (max-width: 560px) { .cal-mday { min-height: 58px; } .cal-mchip { font-size: 9.5px; padding: 1px 3px; } }

/* Jahresansicht */
.cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3, 16px); }
.cal-ym { border: 1px solid var(--color-border, #dde5e2); border-radius: 10px; background: var(--color-surface, #ffffff); padding: 10px; cursor: pointer; transition: .12s; }
.cal-ym:hover { border-color: var(--color-primary, #0f766e); }
.cal-ym__h { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); margin-bottom: 6px; text-align: center; }
.cal-ym__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-ym__dow { text-align: center; font-size: 9px; color: var(--color-text-subtle, #85938d); }
.cal-ym__d { text-align: center; font-size: 10px; padding: 2px 0; border-radius: 4px; color: var(--color-text-muted, #56655f); }
.cal-ym__d.is-out { color: transparent; }
.cal-ym__d.has { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 26%, var(--color-surface, #ffffff)); color: var(--color-text, #1c2b28); font-weight: 700; }
.cal-ym__d.is-today { outline: 2px solid var(--color-primary, #0f766e); outline-offset: -2px; color: var(--color-primary, #0f766e); font-weight: 700; }

/* Check-in (QR) auf der Selbstverwaltungsseite */
.buchung__qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; text-align: center; }
.buchung__qr img { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.buchung__checkedin { display: inline-block; margin: 10px 0; padding: 8px 14px; border-radius: 999px; font-weight: 600; background: var(--color-success-soft, #d1fae5); color: var(--color-success, #047857); }