/*
 * Lauterbach Tech – SimplyBook / bookingtroll
 *
 * Grundlage: tatsächlich vorhandene Elemente der Buchungsseite.
 * Nur Darstellung; keine ausgeblendeten Felder oder Bedienelemente.
 */

/* 1. CI-Farben und Grundschrift */

#sb_main {
    --lt-navy: #0C1622;
    --lt-navy-deep: #080F18;
    --lt-paper: #F6F6F3;
    --lt-ink: #111D2D;
    --lt-steel: #667F9C;
    --lt-silver: #DAE0E6;
    --lt-soft: #4B5A6D;
    --lt-rule: #CFD8E2;

    background-color: var(--lt-paper);
    color: var(--lt-ink);
    font-family: Aptos, Arial, Helvetica, sans-serif;
}

#sb_main #main,
#sb_main #main-content,
#sb_main #steps,
#sb_main #footer {
    background-color: var(--lt-paper);
}

#sb_main #main-buttons .company-name,
#sb_main #steps-nav .title-small,
#sb_main #steps-nav .title-sub,
#sb_main #sb_dateview_container,
#sb_main #sb_timeview_container .container-caption,
#sb_main #sb_time_slots_container .sb-cell,
#sb_main #details h3,
#sb_main #details label,
#sb_main #details .form-control,
#sb_main #sb_book_btn,
#sb_main #main-buttons .btn.book {
    font-family: Aptos, Arial, Helvetica, sans-serif;
}

/* 2. Kompakter Seitenkopf
 * !important nur zum Überschreiben des Inline-Hintergrundbilds.
 */

#sb_main #main #main-buttons {
    background-image: none !important;
    background-color: var(--lt-navy);
    color: var(--lt-paper);
    height: auto;
    min-height: 0;
    padding: 80px 0 36px;
    border-bottom: 3px solid var(--lt-steel);
}

#sb_main #main-buttons .column-wrapper,
#sb_main #main-buttons .column,
#sb_main #main-buttons .wrapper {
    height: auto;
    min-height: 0;
}

#sb_main #main-buttons .wrapper .inner .company-name {
    padding: 0;
    margin: 0;
    color: var(--lt-paper);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

#sb_main #main-buttons .company-name a {
    color: var(--lt-paper);
    text-shadow: none;
}

#sb_main #main-buttons .wrapper .inner .bar {
    padding-top: 20px;
}

/* Heller Button auf dunklem Seitenkopf */

#sb_main #main-buttons .btn.book {
    background: var(--lt-paper);
    color: var(--lt-navy);
    border: 1px solid var(--lt-paper);
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

#sb_main #main-buttons .btn.book:hover {
    background: var(--lt-silver);
    color: var(--lt-navy);
    border-color: var(--lt-silver);
}

/* 3. Schritte der Buchung */

#sb_main #steps-nav {
    background-color: var(--lt-paper);
    border-bottom: 1px solid var(--lt-rule);
    box-shadow: none;
}

#sb_main #steps-nav .step_info_item a {
    color: var(--lt-soft);
}

#sb_main #steps-nav .step_info_item.active a,
#sb_main #steps-nav .step_info_item.active .title-small {
    color: var(--lt-navy);
    font-weight: 700;
}

#sb_main #steps-nav #menu-active-bg {
    background-color: var(--lt-navy);
}

#sb_main #sb_booking_company_time {
    color: var(--lt-soft);
}

/* 4. Kalender
 * Bestehende Spalten und Datumslogik bleiben erhalten.
 */

#sb_main #sb_dateview_container {
    background: var(--lt-paper);
    color: var(--lt-ink);
    border: 1px solid var(--lt-rule);
    border-radius: 0;
    box-shadow: none;
}

#sb_main #sb_dateview_container .top-date-select .header {
    background: var(--lt-paper);
    color: var(--lt-ink);
}

#sb_main #sb_prev_month,
#sb_main #sb_next_month {
    color: var(--lt-navy);
}

#sb_main #sb_dateview_container .weeks-name .name {
    color: var(--lt-soft);
    font-weight: 600;
}

#sb_main #sb_dateview_container .weeks-name .name.is-holiday {
    color: var(--lt-soft);
}

/* Verfügbare Tage */

#sb_main #sb_dateview_container .date a.sb-available-date {
    background: transparent;
    color: var(--lt-ink);
    border-radius: 0;
    text-decoration: none;
}

#sb_main #sb_dateview_container .date a.sb-available-date:hover {
    background: var(--lt-silver);
    color: var(--lt-ink);
}

/* Heute: zusätzlich zur Farbe durch Unterstreichung erkennbar */

#sb_main #sb_dateview_container .date.today a.sb-available-date {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Ausgewählter Tag */

#sb_main #sb_dateview_container .date.selected,
#sb_main #sb_dateview_container .date.selected a,
#sb_main #sb_dateview_container .date.selected a:hover {
    background: var(--lt-navy);
    color: var(--lt-paper) !important;
    border-radius: 0;
    font-weight: 700;
}

/* SimplyBook setzt die Zahl teilweise in ein inneres Element */
#sb_main #sb_dateview_container .date.selected a *,
#sb_main #sb_dateview_container .date.selected * {
    color: var(--lt-paper) !important;
}

/* Nicht verfügbare Tage bleiben nicht interaktiv */

#sb_main #sb_dateview_container .date .day-off {
    color: #70777F;
    border-radius: 0;
}

/* 5. Verfügbare Uhrzeiten */

#sb_main #sb_timeview_container .container-caption {
    color: var(--lt-ink);
    font-weight: 600;
}

#sb_main #sb_time_slots_container a.sb-cell.free {
    background: var(--lt-paper);
    color: var(--lt-navy);
    border: 1px solid var(--lt-steel);
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

#sb_main #sb_time_slots_container a.sb-cell.free:not([aria-disabled="true"]):hover {
    background: var(--lt-navy);
    color: var(--lt-paper);
    border-color: var(--lt-navy);
}

#sb_main #sb_timeview_container .time-legend .available .circle {
    background: var(--lt-paper);
    border: 1px solid var(--lt-steel);
}

/* 6. Kontaktdaten
 * Kein Eingriff in Telefon-Länderauswahl, Checkboxen oder Fehlerfarben.
 */

#sb_main #details h3 {
    color: var(--lt-ink);
    font-weight: 600;
    line-height: 1.3;
}

#sb_main #details .form-control {
    border-radius: 0;
    font-size: 16px;
}

#sb_main #details .form-control:focus {
    outline: 2px solid var(--lt-navy);
    outline-offset: 2px;
}

/* 7. Buchung bestätigen */

#sb_main #sb_book_btn {
    background: var(--lt-navy);
    color: var(--lt-paper);
    border: 1px solid var(--lt-navy);
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

#sb_main #sb_book_btn:not(.disabled):not([disabled]):not([aria-disabled="true"]):hover {
    background: var(--lt-navy-deep);
    color: var(--lt-paper);
    border-color: var(--lt-navy-deep);
}

#sb_main #sb_book_btn.disabled,
#sb_main #sb_book_btn[disabled],
#sb_main #sb_book_btn[aria-disabled="true"] {
    background: var(--lt-silver);
    color: var(--lt-soft);
    border-color: var(--lt-rule);
}

/* 8. Sichtbarer Tastaturfokus */

#sb_main #sb_prev_month:focus-visible,
#sb_main #sb_next_month:focus-visible,
#sb_main #sb_dateview_container a:focus-visible,
#sb_main #sb_time_slots_container a:focus-visible,
#sb_main #steps-nav a:focus-visible,
#sb_main #sb_book_btn:focus-visible {
    outline: 2px solid var(--lt-navy);
    outline-offset: 3px;
}

#sb_main #main-buttons a:focus-visible {
    outline: 2px solid var(--lt-paper);
    outline-offset: 4px;
}

/* 9. Footer */

#sb_main #footer {
    border-top: 1px solid var(--lt-rule);
    box-shadow: none;
}

#sb_main #sb_footer_menu a,
#sb_main #sb_gdpr_show_form_btn {
    color: var(--lt-soft);
}

#sb_main #sb_footer_menu a:hover,
#sb_main #sb_gdpr_show_form_btn:hover {
    color: var(--lt-navy);
    text-decoration: underline;
}

/* 10. Kleinerer Kopf auf dem Handy */

@media (max-width: 767px) {
    #sb_main #main #main-buttons {
        padding-top: 64px;
        padding-bottom: 24px;
    }

    #sb_main #main-buttons .wrapper .inner .company-name {
        font-size: 24px;
        line-height: 1.3;
    }

    #sb_main #main-buttons .wrapper .inner .bar {
        padding-top: 16px;
    }
}