/* ═══════════════════════════════════════════════════════════════════════════
   Tauchbuchung – Frontend Styles
   Design: Ozean-Thema, modern und klar, inspiriert von Tiefsee-Ästhetik
   Palette: Tiefblau, Türkis, Sandweiß, Korallen-Akzent
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS-Variablen (Design-Token) ────────────────────────────────────────── */
.tb-booking-app {
    --tb-blue-deep:    #0a2540;   /* Tiefseeblau */
    --tb-blue-mid:     #1a4a7a;   /* Mittelblau */
    --tb-blue-light:   #2a8fc4;   /* Helles Blau */
    --tb-teal:         #00b8a9;   /* Türkis */
    --tb-teal-light:   #e0f5f3;   /* Türkis hell */
    --tb-coral:        #f05454;   /* Korallen-Akzent */
    --tb-sand:         #faf7f2;   /* Sandhintergrund */
    --tb-white:        #ffffff;
    --tb-gray-100:     #f4f6f8;
    --tb-gray-200:     #e2e8f0;
    --tb-gray-400:     #94a3b8;
    --tb-gray-600:     #64748b;
    --tb-gray-800:     #1e293b;
    --tb-success:      #10b981;
    --tb-error:        #ef4444;
    --tb-warning:      #f59e0b;

    --tb-radius-sm:    6px;
    --tb-radius-md:    12px;
    --tb-radius-lg:    20px;
    --tb-radius-full:  9999px;

    --tb-shadow-sm:    0 1px 3px rgba(10,37,64,.08), 0 1px 2px rgba(10,37,64,.06);
    --tb-shadow-md:    0 4px 16px rgba(10,37,64,.12), 0 2px 6px rgba(10,37,64,.08);
    --tb-shadow-lg:    0 12px 40px rgba(10,37,64,.16);

    --tb-transition:   150ms ease;
    --tb-font:         'Segoe UI', system-ui, -apple-system, sans-serif;

    font-family: var(--tb-font);
    color: var(--tb-gray-800);
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem;
}

/* ── Schritt-Sichtbarkeit ────────────────────────────────────────────────── */
.tb-step { display: block; animation: tb-fade-in 0.3s ease; }
.tb-step--hidden { display: none !important; }
.tb-step--active { display: block; }

@keyframes tb-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Karten ──────────────────────────────────────────────────────────────── */
.tb-card {
    background: var(--tb-white);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-shadow-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.tb-card__header {
    background: linear-gradient(135deg, var(--tb-blue-deep) 0%, var(--tb-blue-mid) 100%);
    padding: 1.5rem 2rem;
    color: var(--tb-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tb-card--success .tb-card__header,
.tb-card--success {
    background: linear-gradient(135deg, var(--tb-teal) 0%, var(--tb-blue-light) 100%);
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tb-white);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-shadow-lg);
}

.tb-card__body {
    padding: 2rem;
}

/* ── Kalender ────────────────────────────────────────────────────────────── */
.tb-month-title {
    margin: 0;
    flex: 1;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    color: white;
    text-transform: capitalize;
}

.tb-nav-month {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}

.tb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.tb-calendar-header {
    margin-bottom: 6px;
}

.tb-calendar-header span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tb-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0;
}

.tb-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--tb-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tb-transition);
    position: relative;
    border: 2px solid transparent;
    min-height: 44px;
}

.tb-day--free {
    background: var(--tb-teal-light);
    color: var(--tb-blue-deep);
}

.tb-day--free:hover {
    background: var(--tb-teal);
    color: var(--tb-white);
    transform: scale(1.05);
    box-shadow: var(--tb-shadow-sm);
}

.tb-day--full {
    background: var(--tb-gray-100);
    color: var(--tb-gray-400);
    cursor: not-allowed;
}

.tb-day--past {
    opacity: 0.35;
    cursor: not-allowed;
}

.tb-day--today {
    border-color: var(--tb-teal);
    font-weight: 800;
}

.tb-day--empty {
    background: transparent;
    cursor: default;
}

.tb-day__dot {
    width: 6px;
    height: 6px;
    background: var(--tb-teal);
    border-radius: 50%;
    margin-top: 2px;
}

/* Legende */
.tb-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tb-gray-200);
    flex-wrap: wrap;
}

.tb-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--tb-gray-600);
}

.tb-legend__item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--tb-radius-sm);
}

.tb-legend__item--free::before  { background: var(--tb-teal-light); border: 2px solid var(--tb-teal); }
.tb-legend__item--full::before  { background: var(--tb-gray-100); }
.tb-legend__item--past::before  { background: var(--tb-gray-200); opacity: .35; }

/* ── Tagesansicht Stundenblöcke ──────────────────────────────────────────── */
.tb-day-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color:white;
    flex: 1;
}

.tb-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

.tb-time-slot {
    padding: 1rem;
    border-radius: var(--tb-radius-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--tb-transition);
    border: 2px solid transparent;
    background: var(--tb-gray-100);
}

.tb-time-slot__time {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tb-blue-deep);
    display: block;
}

.tb-time-slot__slots {
    font-size: 0.8rem;
    margin-top: 4px;
    color: var(--tb-gray-600);
}

.tb-time-slot--free {
    background: var(--tb-teal-light);
    border-color: transparent;
}

.tb-time-slot--free:hover {
    background: var(--tb-teal);
    border-color: var(--tb-teal);
    color: var(--tb-white);
    transform: translateY(-2px);
    box-shadow: var(--tb-shadow-sm);
}

.tb-time-slot--free:hover .tb-time-slot__time,
.tb-time-slot--free:hover .tb-time-slot__slots {
    color: var(--tb-white);
}

.tb-time-slot--full {
    opacity: 0.5;
    cursor: not-allowed;
}

.tb-time-slot--full .tb-time-slot__slots {
    color: var(--tb-coral);
    font-weight: 600;
}

/* ── Buchungsformular ────────────────────────────────────────────────────── */
.tb-form-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--tb-white);
}

.tb-booking-summary {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    opacity: 0.85;
    color: var(--tb-white);
    width: 100%;
}

/* Tiefenanzeige */
.tb-depth-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--tb-teal-light);
    border: 2px solid var(--tb-teal);
    border-radius: var(--tb-radius-md);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.tb-depth-indicator--hidden { display: none; }

.tb-depth-indicator__icon { font-size: 1.5rem; }

#tb-depth-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tb-blue-deep);
    margin-left: auto;
}

/* Fehleranzeige */
.tb-inline-warning {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: var(--tb-warning);
    font-weight: 600;
}

.tb-inline-warning--hidden {
    display: none;
}

.tb-errors {
    background: #fef2f2;
    border: 1.5px solid var(--tb-error);
    border-radius: var(--tb-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #991b1b;
}

.tb-errors--hidden { display: none; }

.tb-errors ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.tb-errors li { margin-bottom: 0.25rem; font-size: 0.9rem; }

/* Teilnehmer-Block */
.tb-participant-block {
    border: 1.5px solid var(--tb-gray-200);
    border-radius: var(--tb-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    background: var(--tb-gray-100);
    transition: border-color var(--tb-transition);
}

.tb-participant-block:focus-within {
    border-color: var(--tb-teal);
}

.tb-participant-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.tb-participant-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Badges */
.tb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--tb-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
}

.tb-badge--leader      { background: var(--tb-blue-deep); color: var(--tb-white); }
.tb-badge--participant { background: var(--tb-blue-mid); color: var(--tb-white); }

/* Formularfelder */
.tb-participant-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tb-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tb-field--half  { grid-column: span 1; }
.tb-field--full  { grid-column: span 2; }
.tb-field--checkbox { grid-column: span 2; flex-direction: row; align-items: center; }

.tb-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tb-gray-600);
}

.tb-required { color: var(--tb-coral); }

.tb-input,
.tb-select {
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--tb-gray-200);
    border-radius: var(--tb-radius-sm);
    font-size: 0.95rem;
    font-family: var(--tb-font);
    background: var(--tb-white);
    color: var(--tb-gray-800);
    transition: border-color var(--tb-transition), box-shadow var(--tb-transition);
    width: 100%;
    box-sizing: border-box;
}

.tb-input:focus,
.tb-select:focus {
    outline: none;
    border-color: var(--tb-teal);
    box-shadow: 0 0 0 3px rgba(0,184,169,.15);
}

/* Custom Checkbox */
.tb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}

.tb-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tb-checkbox-custom {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--tb-gray-400);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tb-transition);
    background: var(--tb-white);
}

.tb-checkbox-label input:checked + .tb-checkbox-custom {
    background: var(--tb-teal);
    border-color: var(--tb-teal);
}

.tb-checkbox-label input:checked + .tb-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 800;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: var(--tb-radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--tb-font);
    cursor: pointer;
    transition: all var(--tb-transition);
    text-decoration: none;
    white-space: nowrap;
}

.tb-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(255,255,255,.15);
    color: var(--tb-white);
    font-size: 1.4rem;
    border-radius: 50%;
}

.tb-btn--icon:hover {
    background: rgba(255,255,255,.3);
}

.tb-btn--back {
    background: rgba(255,255,255,.15);
    color: var(--tb-white);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border-radius: var(--tb-radius-full);
}

.tb-btn--back:hover {
    background: rgba(255,255,255,.3);
}

.tb-btn--add {
    width: 100%;
    padding: 0.85rem;
    background: var(--tb-gray-100);
    color: var(--tb-blue-mid);
    border: 2px dashed var(--tb-gray-400);
    border-radius: var(--tb-radius-md);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.tb-btn--add:hover {
    background: var(--tb-teal-light);
    border-color: var(--tb-teal);
    color: var(--tb-blue-deep);
}

.tb-btn--remove {
    background: transparent;
    color: var(--tb-coral);
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border: 1.5px solid var(--tb-coral);
    border-radius: var(--tb-radius-full);
}

.tb-btn--remove:hover {
    background: var(--tb-coral);
    color: white;
}

.tb-btn--primary {
    background: linear-gradient(135deg, var(--tb-teal) 0%, var(--tb-blue-light) 100%);
    color: var(--tb-white);
    padding: 0.85rem 2rem;
    font-size: 1rem;
    box-shadow: var(--tb-shadow-sm);
}

.tb-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--tb-shadow-md);
}

/* Zahlungs-Buttons */
.tb-submit-wrap--hidden  { display: none; }
.tb-add-participant-wrap { margin-top: 0.5rem; }

.tb-price-display {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--tb-teal-light);
    border-radius: var(--tb-radius-md);
}

.tb-price-submit {
    text-align: center;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.tb-price-submit strong {
    color: var(--tb-primary, #1a73e8);
}

.tb-payment-label {
    text-align: center;
    font-weight: 600;
    color: var(--tb-gray-600);
    margin-bottom: 0.75rem;
}

.tb-payment-methods {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tb-btn--paypal {
    background: #003087;
    color: var(--tb-white);
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    border-radius: var(--tb-radius-full);
    box-shadow: var(--tb-shadow-sm);
}

.tb-btn--paypal:hover {
    background: #001c5a;
    transform: translateY(-1px);
}

.tb-btn--stripe {
    background: #635bff;
    color: var(--tb-white);
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    border-radius: var(--tb-radius-full);
    box-shadow: var(--tb-shadow-sm);
}

.tb-btn--stripe:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}

/* Test-Zahlungsbutton – deutlich als Test markiert */
.tb-btn--test {
    background: transparent;
    color: var(--tb-warning);
    padding: 0.85rem 1.75rem;
    font-size: 0.9rem;
    border-radius: var(--tb-radius-full);
    border: 2px dashed var(--tb-warning);
    width: 100%;
    margin-top: 0.5rem;
}

.tb-btn--test:hover {
    background: #fffbeb;
    transform: translateY(-1px);
}

/* Test-Zahlungsfenster */
.tb-test-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #fffbeb;
    border-radius: var(--tb-radius-md);
    border: 2px dashed var(--tb-warning);
    text-align: center;
}

.tb-test-container--hidden { display: none; }

.tb-test-container__icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.tb-test-container__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tb-warning);
    margin-bottom: 0.5rem;
}

.tb-test-container p {
    color: var(--tb-gray-600);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Zahlungsfenster */
.tb-paypal-container--hidden,
.tb-stripe-container--hidden { display: none; }

.tb-paypal-container,
.tb-stripe-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--tb-gray-100);
    border-radius: var(--tb-radius-md);
    border: 1.5px solid var(--tb-gray-200);
}

.tb-stripe-card-element {
    padding: 0.75rem 1rem;
    background: var(--tb-white);
    border: 1.5px solid var(--tb-gray-200);
    border-radius: var(--tb-radius-sm);
    margin-bottom: 1rem;
}

/* ── Erfolgsmeldung ──────────────────────────────────────────────────────── */
.tb-success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: tb-pop 0.5s cubic-bezier(.17,.67,.3,1.33);
}

@keyframes tb-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

.tb-card--success h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

/* ── Ladeanzeige ─────────────────────────────────────────────────────────── */
.tb-loading {
    text-align: center;
    padding: 2rem;
    color: var(--tb-gray-400);
    font-size: 0.95rem;
    grid-column: span 7;
}

.tb-booking-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(3px);
}

.tb-booking-loading--hidden {
    display: none !important;
}

.tb-booking-loading__box {
    width: min(100%, 320px);
    padding: 2rem 1.5rem;
    border-radius: var(--tb-radius-md);
    background: var(--tb-white);
    box-shadow: var(--tb-shadow-lg);
    text-align: center;
    color: var(--tb-blue-deep);
}

.tb-booking-loading__spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 1rem;
    border: 4px solid var(--tb-gray-200);
    border-top-color: var(--tb-teal);
    border-radius: 50%;
    animation: tb-spin 0.8s linear infinite;
}

.tb-booking-loading__box p {
    margin: 0;
    font-weight: 700;
}

body.tb-booking-loading-active {
    overflow: hidden;
}

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

.tb-hint {
    color: var(--tb-gray-600);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tb-card__body           { padding: 1.25rem; }
    .tb-participant-fields   { grid-template-columns: 1fr; }
    .tb-field--full,
    .tb-field--half          { grid-column: span 1; }
    .tb-field--checkbox      { grid-column: span 1; }
    .tb-calendar-header span,
    .tb-day                  { font-size: 0.75rem; }
    .tb-payment-methods      { flex-direction: column; }
    .tb-btn--paypal,
    .tb-btn--stripe          { width: 100%; }
}

/* ── Immer-sichtbarer Buchen-Button ─────────────────────────────────────── */
.tb-submit-wrap {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--tb-gray-100);
    border-radius: var(--tb-radius-md);
    border: 1.5px solid var(--tb-gray-200);
    text-align: center;
}

.tb-submit-hint {
    font-size: 0.85rem;
    color: var(--tb-gray-600);
    margin-bottom: 0.75rem;
    min-height: 1.2em;
    transition: color var(--tb-transition);
}

.tb-submit-hint--valid {
    color: var(--tb-teal);
    font-weight: 600;
}

/* Buchen-Button */
.tb-btn--book {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--tb-radius-full);
    background: linear-gradient(135deg, var(--tb-teal) 0%, var(--tb-blue-light) 100%);
    color: var(--tb-white);
    border: none;
    cursor: pointer;
    transition: all var(--tb-transition);
    box-shadow: var(--tb-shadow-md);
}

.tb-btn--book:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--tb-shadow-lg);
}

/* Ausgegraut wenn disabled */
.tb-btn--book:disabled {
    background: var(--tb-gray-200);
    color: var(--tb-gray-400);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ── Zahlungsauswahl-Modal ────────────────────────────────────────────────── */
.tb-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;   /* Mobile: von unten */
    justify-content: center;
}

@media (min-width: 600px) {
    .tb-payment-modal {
        align-items: center;  /* Desktop: zentriert */
    }
}

.tb-payment-modal--hidden {
    display: none !important;
}

.tb-payment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, 0.55);
    backdrop-filter: blur(3px);
    animation: tb-fade-in 0.2s ease;
}

.tb-payment-modal__box {
    position: relative;
    background: var(--tb-white);
    border-radius: var(--tb-radius-lg) var(--tb-radius-lg) 0 0;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--tb-shadow-lg);
    animation: tb-slide-up 0.3s cubic-bezier(.17,.67,.3,1.1);
}

@media (min-width: 600px) {
    .tb-payment-modal__box {
        border-radius: var(--tb-radius-lg);
        animation: tb-pop-in 0.25s cubic-bezier(.17,.67,.3,1.2);
    }
}

@keyframes tb-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes tb-pop-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.tb-payment-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: var(--tb-gray-100);
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    color: var(--tb-gray-600);
    transition: all var(--tb-transition);
}

.tb-payment-modal__close:hover {
    background: var(--tb-gray-200);
    color: var(--tb-gray-800);
}

.tb-payment-modal__title {
    margin: 0 2rem 0.25rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tb-blue-deep);
}

.tb-payment-modal__summary {
    font-size: 0.9rem;
    color: var(--tb-gray-600);
    margin-bottom: 1.5rem;
}

/* Zahlungsoption-Kacheln */
.tb-payment-modal__methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tb-payment-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--tb-gray-100);
    border: 2px solid var(--tb-gray-200);
    border-radius: var(--tb-radius-md);
    cursor: pointer;
    transition: all var(--tb-transition);
    text-align: left;
    font-family: var(--tb-font);
}

.tb-payment-option:hover {
    background: var(--tb-teal-light);
    border-color: var(--tb-teal);
    transform: translateX(4px);
}

.tb-payment-option--active {
    background: var(--tb-teal-light);
    border-color: var(--tb-teal);
}

.tb-payment-option--test {
    border-style: dashed;
    border-color: var(--tb-warning);
    background: #fffbeb;
}

.tb-payment-option--test:hover {
    background: #fef3c7;
    border-color: var(--tb-warning);
}

.tb-payment-option__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.tb-payment-option__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tb-blue-deep);
    display: block;
}

.tb-payment-option__sub {
    font-size: 0.8rem;
    color: var(--tb-gray-600);
    display: block;
    margin-top: 2px;
}

/* Inline-Widgets im Modal */
.tb-payment-modal__widget {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--tb-gray-100);
    border-radius: var(--tb-radius-md);
    border: 1.5px solid var(--tb-gray-200);
    animation: tb-fade-in 0.2s ease;
}

.tb-payment-modal__widget--hidden {
    display: none !important;
}

/* Test-Widget */
.tb-test-info {
    text-align: center;
}

.tb-test-info__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.tb-test-info__warn {
    font-weight: 700;
    color: var(--tb-warning);
    margin-bottom: 0.5rem;
}

.tb-test-info p {
    font-size: 0.9rem;
    color: var(--tb-gray-600);
    margin-bottom: 1rem;
}

/* Wero-Widget */
.tb-wero-info {
    text-align: center;
}

.tb-wero-info p {
    font-size: 0.9rem;
    color: var(--tb-gray-600);
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Check-in Seite  [tauchbuchung_checkin]
   ══════════════════════════════════════════════════════════════════════════ */

.tb-checkin-app {
    --tb-blue-deep:  #0a2540;
    --tb-teal:       #00b8a9;
    --tb-teal-light: #e0f5f3;
    --tb-gray-100:   #f4f6f8;
    --tb-gray-200:   #e2e8f0;
    --tb-gray-600:   #64748b;
    --tb-gray-800:   #1e293b;
    --tb-success:    #10b981;
    --tb-error:      #ef4444;
    --tb-warning:    #f59e0b;
    font-family: 'Segoe UI', system-ui, sans-serif;
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem;
}

/* ── Suchformular ────────────────────────────────────────────────────────── */
.tb-checkin-search {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(10,37,64,.1);
    margin-bottom: 2rem;
}

.tb-checkin-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tb-gray-600);
    margin-bottom: 0.75rem;
}

.tb-checkin-input-row {
    display: flex;
    gap: 0.75rem;
}

.tb-checkin-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    border: 2px solid var(--tb-gray-200);
    border-radius: 8px;
    font-family: monospace;
    color: var(--tb-blue-deep);
    transition: border-color .15s ease;
}

.tb-checkin-input:focus {
    outline: none;
    border-color: var(--tb-teal);
    box-shadow: 0 0 0 3px rgba(0,184,169,.15);
}

.tb-checkin-btn {
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--tb-teal) 0%, #1a7aa1 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}

.tb-checkin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,184,169,.3);
}

/* ── Ergebniskarte ───────────────────────────────────────────────────────── */
.tb-checkin-result {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(10,37,64,.1);
    overflow: hidden;
}

/* Status-Banner */
.tb-checkin-status-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.tb-checkin-result--valid    .tb-checkin-status-banner { background: #d1fae5; color: #065f46; }
.tb-checkin-result--pending  .tb-checkin-status-banner { background: #fef3c7; color: #92400e; }
.tb-checkin-result--cancelled .tb-checkin-status-banner { background: #fee2e2; color: #991b1b; }
.tb-checkin-result--notfound  .tb-checkin-status-banner { display:none; }

.tb-checkin-result--notfound {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--tb-gray-600);
}

.tb-checkin-result--notfound .tb-checkin-result__icon { font-size: 3rem; margin-bottom: 0.75rem; }
.tb-checkin-result--notfound h3 { color: var(--tb-gray-800); margin: 0 0 0.5rem; }
.tb-checkin-hint { font-size: 0.85rem; color: var(--tb-gray-600); }

/* Grid: Details + QR */
.tb-checkin-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
}

@media (max-width: 560px) {
    .tb-checkin-grid { grid-template-columns: 1fr; }
}

.tb-checkin-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tb-blue-deep);
}

/* Definition List */
.tb-checkin-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.9rem;
}

.tb-checkin-dl dt { color: var(--tb-gray-600); font-weight: 600; white-space: nowrap; }
.tb-checkin-dl dd { margin: 0; color: var(--tb-gray-800); }

.tb-checkin-code {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    background: var(--tb-teal-light);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--tb-blue-deep);
}

/* Gruppenführer-Box */
.tb-checkin-leader {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--tb-teal-light);
    border-radius: 8px;
    border: 1.5px solid var(--tb-teal);
    font-size: 0.9rem;
}

.tb-checkin-leader__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tb-blue-deep);
    margin-bottom: 0.3rem;
}

.tb-checkin-brevet {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 8px;
    background: var(--tb-blue-deep);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* QR-Code */
.tb-checkin-qr-wrap {
    text-align: center;
}

.tb-checkin-qr {
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    border: 3px solid var(--tb-teal);
}

.tb-checkin-qr-label {
    margin: 6px 0 0;
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tb-blue-deep);
}

/* Teilnehmer-Tabelle */
.tb-checkin-participants-title {
    margin: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tb-gray-600);
    border-top: 1px solid var(--tb-gray-200);
}

.tb-checkin-table-wrap {
    overflow-x: auto;
    padding: 0 1.5rem 1.5rem;
}

.tb-checkin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tb-checkin-table thead th {
    background: var(--tb-blue-deep);
    color: #fff;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
}

.tb-checkin-table tbody tr:nth-child(odd) { background: var(--tb-gray-100); }
.tb-checkin-table tbody tr:first-child { background: var(--tb-teal-light); }

.tb-checkin-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--tb-gray-200);
    color: var(--tb-gray-800);
}

/* ── Stundenblock: begrenzte Plätze (frei, aber Gruppe zu groß) ──────────── */
.tb-time-slot--limited {
    background: #fffbeb;
    border: 2px dashed var(--tb-warning);
    cursor: pointer;
}

.tb-time-slot--limited:hover {
    background: #fef3c7;
    border-color: var(--tb-warning);
    transform: translateY(-2px);
}

.tb-time-slot--limited .tb-time-slot__time {
    color: var(--tb-blue-deep);
}

.tb-time-slot--limited .tb-time-slot__slots {
    color: var(--tb-warning);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tagesansicht – Saison-Info + Zeitbereichs-Auswahl
   ══════════════════════════════════════════════════════════════════════════ */

/* Saison-Banner */
.tb-season-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--tb-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.tb-season-info--summer {
    background: #fef9c3;
    color: #854d0e;
    border: 1.5px solid #fde047;
}

.tb-season-info--winter {
    background: #eff6ff;
    color: #1e40af;
    border: 1.5px solid #93c5fd;
}

/* Slot-Hinweistext */
.tb-slot-hint {
    font-size: 0.88rem;
    color: var(--tb-gray-600);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.tb-slot-hint a {
    color: var(--tb-teal);
    font-weight: 600;
    text-decoration: none;
}

/* Stunden-Kacheln: neue Inhaltsstruktur */
.tb-time-slot__end {
    font-size: 0.75rem;
    color: var(--tb-gray-600);
    display: block;
    margin-top: 1px;
}

/* ── Bereichs-Auswahl Highlight-Zustände ─────────────────────────────────── */

/* Einzelstunde ausgewählt */
.tb-time-slot--selected {
    background: var(--tb-teal) !important;
    border-color: var(--tb-teal) !important;
    color: var(--tb-white) !important;
    transform: none;
    box-shadow: 0 0 0 3px rgba(0,184,169,.3);
}

.tb-time-slot--selected .tb-time-slot__time,
.tb-time-slot--selected .tb-time-slot__end,
.tb-time-slot--selected .tb-time-slot__slots {
    color: var(--tb-white) !important;
}

/* Startblock */
.tb-time-slot--range-start {
    background: var(--tb-teal) !important;
    border-color: var(--tb-teal) !important;
    border-radius: var(--tb-radius-sm) var(--tb-radius-sm) 0 0;
    color: var(--tb-white) !important;
    position: relative;
}

.tb-time-slot--range-start::after {
    content: '▼ Start';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--tb-teal);
    font-weight: 700;
    white-space: nowrap;
}

.tb-time-slot--range-start .tb-time-slot__time,
.tb-time-slot--range-start .tb-time-slot__end,
.tb-time-slot--range-start .tb-time-slot__slots { color: var(--tb-white) !important; }

/* Mittelblöcke */
.tb-time-slot--range-mid {
    background: rgba(0,184,169,.15) !important;
    border-color: var(--tb-teal) !important;
    border-radius: 0;
}

/* Endblock */
.tb-time-slot--range-end {
    background: rgba(0,184,169,.25) !important;
    border-color: var(--tb-teal) !important;
    border-radius: 0 0 var(--tb-radius-sm) var(--tb-radius-sm);
    position: relative;
}

.tb-time-slot--range-end::after {
    content: '▲ Ende';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--tb-teal);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Buchungsleiste am unteren Rand ──────────────────────────────────────── */
.tb-booking-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--tb-blue-deep), var(--tb-blue-mid));
    border-radius: var(--tb-radius-md);
    color: var(--tb-white);
    animation: tb-fade-in 0.2s ease;
}

.tb-booking-bar--hidden { display: none !important; }

.tb-booking-bar__info {
    font-size: 0.95rem;
    line-height: 1.5;
}

.tb-btn--sm {
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Admin – Saison-Einstellungen
   ══════════════════════════════════════════════════════════════════════════ */

/* Vollbreite Karte für Saisonen */
.tb-admin-settings-grid .tb-admin-card--full-width {
    grid-column: 1 / -1;
}

.tb-season-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 780px) {
    .tb-season-grid { grid-template-columns: 1fr; }
}

.tb-season-block {
    padding: 1.25rem;
    border-radius: 8px;
    border: 2px solid;
}

.tb-season-block--summer {
    background: #fffbeb;
    border-color: #fde047;
}

.tb-season-block--summer h3 { color: #854d0e; margin: 0 0 1rem; }

.tb-season-block--winter {
    background: #eff6ff;
    border-color: #93c5fd;
}

.tb-season-block--winter h3 { color: #1e40af; margin: 0 0 1rem; }

.tb-season-block .form-table th {
    width: 130px;
    padding: 8px 0;
    font-size: 0.85rem;
}

.tb-season-block .form-table td { padding: 6px 0; }

.tb-season-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.tb-season-select,
.tb-season-hour-select {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    font-size: 0.85rem;
}

.tb-season-hint {
    font-size: 0.85rem;
    color: #64748b;
}

/* Aktuelle-Saison-Vorschau */
.tb-season-preview {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 7px;
    font-size: 0.9rem;
    color: #166534;
}

/* ── Kalender: gesperrte Tage (kein Tauchtag) ───────────────────────────── */
.tb-day--closed {
    background: repeating-linear-gradient(
        135deg,
        #f1f5f9,
        #f1f5f9 4px,
        #e2e8f0 4px,
        #e2e8f0 8px
    );
    color: var(--tb-gray-400);
    cursor: not-allowed;
    position: relative;
}

.tb-day--closed::after {
    content: '–';
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.65rem;
    color: var(--tb-gray-400);
}

/* Legende: kein Tauchtag */
.tb-legend__item--closed::before {
    background: repeating-linear-gradient(
        135deg,
        #f1f5f9,
        #f1f5f9 4px,
        #e2e8f0 4px,
        #e2e8f0 8px
    );
    border: none;
}

/* Saison-Banner über dem Kalender */
.tb-cal-season-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--tb-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.tb-cal-season-info--summer {
    background: #fef9c3;
    color: #854d0e;
    border: 1.5px solid #fde047;
}

.tb-cal-season-info--winter {
    background: #eff6ff;
    color: #1e40af;
    border: 1.5px solid #93c5fd;
}

.tb-cal-season-days {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Registration form */
.tb-registration-app {
    --tb-reg-bg: linear-gradient(180deg, #071d32 0%, #0b355a 100%);
    --tb-reg-accent: #00b8a9;
    --tb-reg-surface: rgba(255,255,255,.96);
    --tb-reg-muted: #64748b;
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem;
}

.tb-registration-card {
    background: var(--tb-reg-surface);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(7,29,50,.18);
    border: 1px solid rgba(10,37,64,.08);
}

.tb-registration-card__header {
    padding: 1.75rem 2rem;
    background: radial-gradient(circle at top right, rgba(0,184,169,.22), transparent 42%), var(--tb-reg-bg);
    color: #fff;
}

.tb-registration-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 2vw, 2rem);
}


.tb-registration-intro {
    margin: 0;
    max-width: 60ch;
    color: rgba(255,255,255,.82);
}

.tb-registration-form {
    padding: 1.75rem 2rem 2rem;
}

.tb-registration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 720px) {
    .tb-registration-grid {
        grid-template-columns: 1fr;
    }
}

.tb-registration-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--tb-gray-600);
}

.tb-registration-field--full {
    grid-column: 1 / -1;
}

.tb-registration-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.95rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    font: inherit;
    color: var(--tb-gray-800);
    background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tb-registration-field input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
}

.tb-registration-field input:focus {
    outline: none;
    border-color: var(--tb-reg-accent);
    box-shadow: 0 0 0 4px rgba(0,184,169,.15);
}

.tb-registration-role-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--tb-gray-700);
}

.tb-registration-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.tb-registration-role-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.6rem 0.95rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tb-gray-700);
    cursor: pointer;
    transition: all 150ms ease;
}

.tb-registration-role-option:hover {
    border-color: var(--tb-reg-accent);
    box-shadow: 0 4px 12px rgba(0,184,169,.12);
}

.tb-registration-role-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tb-registration-role-option:has(input:checked) {
    border-color: var(--tb-reg-accent);
    background: rgba(0,184,169,.12);
    color: var(--tb-reg-accent);
}

.tb-registration-submit {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tb-reg-accent), #1a7aa1);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,184,169,.22);
}

.tb-registration-submit:hover {
    transform: translateY(-1px);
}

.tb-registration-notice {
    margin: 0 2rem 1rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-weight: 600;
}

.tb-registration-notice--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #86efac;
}

.tb-registration-notice--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}