/* Lana Lutz – Lebensberatung: Markenkleid für die Terminseite (Easy!Appointments 1.6.0).
   Farben, Schriften und Kanten aus dem Marken-Kit (prompto-app/brands/lana-lutz/tokens). */

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/lana/DMSans-VF.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/lana/CormorantGaramond-VF.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --creme: #F6F6E9;
    --weiss: #FFFFFF;
    --tiefe: #0D131A;
    --stein: #56585E;
    --wald: #4B7255;
    --salbei: #7D9B76;
    --salbei-hell: #B6CDBD;
    --gold: #BC9C2F;
    --linie-gold: #D9C98A;
    --rahmen: #D5D5C6;
    --rahmen-innen: #E4E4D6;
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ease-sanft: cubic-bezier(.4, 0, .2, 1);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--tiefe);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-link-color: var(--wald);
    --bs-link-color-rgb: 75, 114, 85;
    --bs-link-hover-color: var(--gold);
    --bs-link-hover-color-rgb: 188, 156, 47;
}

body {
    background: var(--creme) !important;
    color: var(--tiefe);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--wald); }
a:hover { color: var(--gold); }

/* Karte */
#book-appointment-wizard,
#message-frame,
.bg-body {
    background: var(--weiss) !important;
}
#book-appointment-wizard {
    border: 1px solid var(--rahmen);
    border-radius: 0 !important;
    box-shadow: 0 1px 2px rgba(13, 19, 26, .04), 0 12px 32px rgba(13, 19, 26, .05);
}
.rounded, .rounded-3, .card, .modal-content, .alert, .badge, .form-control, .form-select,
.input-group-text, .dropdown-menu, .popover, .tippy-box {
    border-radius: 0 !important;
}

/* Kopf: Gold auf Creme, darunter eine goldene Haarlinie */
#header,
#book-appointment-wizard #header {
    background-color: var(--creme) !important;
    border-color: transparent transparent var(--linie-gold) !important;
    border-style: solid !important;
    border-width: 0 0 1px !important;
}
#book-appointment-wizard #company-name {
    color: var(--wald) !important;
    font-family: var(--font-serif);
    font-weight: 500 !important;
    font-size: 1.75rem !important;
    letter-spacing: .01em;
}
#company-logo {
    max-height: 64px !important;
}
#book-appointment-wizard #company-name .display-booking-selection,
#book-appointment-wizard #company-name .text-white-50,
#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider {
    color: var(--stein) !important;
    font-family: var(--font-sans);
    font-size: .8125rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Schritte */
#book-appointment-wizard .book-step {
    border-radius: 0 !important;
}
#book-appointment-wizard .book-step:not(.active-step) {
    background: var(--salbei-hell) !important;
}
#book-appointment-wizard .book-step:not(.active-step) strong {
    color: var(--wald) !important;
}
#book-appointment-wizard .book-step.active-step {
    background: var(--wald) !important;
}
#book-appointment-wizard .book-step.active-step strong {
    color: var(--creme) !important;
    font-family: var(--font-sans);
    font-weight: 500;
}

/* Überschriften */
.frame-title,
h1, h2, h3, h4, h5 {
    font-family: var(--font-serif) !important;
    color: var(--wald) !important;
    font-weight: 500 !important;
    letter-spacing: .005em;
    text-wrap: balance;
}
.frame-title,
.frame-title.text-muted {
    font-size: 2rem !important;
    color: var(--wald) !important;
}
#appointment-details .fs-3, #customer-details .fs-3 {
    font-family: var(--font-serif);
    color: var(--wald);
    font-weight: 500 !important;
    font-size: 1.625rem !important;
    line-height: 1.2;
}
#appointment-details .fw-bold.text-muted, #customer-details .fw-bold.text-muted {
    font-weight: 500 !important;
}
#appointment-details .fa-calendar-day, #appointment-details .fa-clock, #appointment-details .fa-globe {
    color: var(--salbei);
}
.text-muted, .form-text { color: var(--stein) !important; }

/* Knöpfe: rechtwinklig, Versalien, ruhige Übergänge */
.btn {
    border-radius: 0 !important;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .8rem 1.75rem;
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color .25s var(--ease-sanft), color .25s var(--ease-sanft), border-color .25s var(--ease-sanft);
}
.btn-primary, .btn-dark, .btn-success, .button-next, #book-appointment-submit {
    background-color: var(--wald) !important;
    border-color: var(--wald) !important;
    color: var(--creme) !important;
}
.btn-primary:hover, .btn-dark:hover, .button-next:hover, #book-appointment-submit:hover,
.btn-primary:focus-visible, .btn-dark:focus-visible, #book-appointment-submit:focus-visible {
    background-color: var(--salbei) !important;
    border-color: var(--salbei) !important;
}
.btn-outline-primary, .btn-outline-secondary, .button-back, .altcha-verify-btn {
    background-color: transparent !important;
    border-color: var(--wald) !important;
    color: var(--wald) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .button-back:hover, .altcha-verify-btn:hover {
    background-color: var(--wald) !important;
    color: var(--creme) !important;
}
.altcha-verify-btn.btn-success {
    background-color: var(--salbei) !important;
    border-color: var(--salbei) !important;
    color: var(--creme) !important;
}
.btn:disabled { opacity: .55; }

/* Weiter/Zurück: nebeneinander mit Abstand, auf schmalen Bildschirmen untereinander */
#book-appointment-wizard .command-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: stretch;
}
#book-appointment-wizard .command-buttons .btn {
    margin: 0 !important;
}
#book-appointment-wizard .command-buttons form {
    margin: 0 !important;
}
@media (max-width: 575.98px) {
    #book-appointment-wizard .command-buttons {
        flex-direction: column-reverse;
    }
    #book-appointment-wizard .command-buttons > *,
    #book-appointment-wizard .command-buttons .btn {
        width: 100% !important;
    }
    #book-appointment-wizard #company-name .display-booking-selection {
        font-size: .6875rem !important;
        letter-spacing: .1em;
    }
}

/* Kalender */
#book-appointment-wizard .flatpickr-calendar.inline {
    border-radius: 0 !important;
    border: 1px solid var(--rahmen);
    box-shadow: none !important;
}
.flatpickr-months, .flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--wald) !important;
    color: var(--creme) !important;
    fill: var(--creme) !important;
    border-radius: 0 !important;
}
.flatpickr-current-month { font-family: var(--font-serif); font-weight: 500; }
span.flatpickr-weekday { font-family: var(--font-sans); font-weight: 500; font-size: .8125rem; letter-spacing: .06em; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--creme) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--linie-gold) !important; }
.flatpickr-day {
    border-radius: 0 !important;
    color: var(--tiefe);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: #c4c4b6 !important;
    background: transparent !important;
}
/* Freie Tage sichtbar machen */
.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected) {
    background: rgba(182, 205, 189, .45);
    border-color: transparent;
    color: var(--wald);
    font-weight: 600;
}
.flatpickr-day:not(.flatpickr-disabled):hover {
    background: var(--salbei-hell) !important;
    border-color: var(--salbei-hell) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    background: var(--wald) !important;
    border-color: var(--wald) !important;
    color: var(--creme) !important;
}
.flatpickr-day.today:not(.selected) { border-color: var(--linie-gold) !important; }

/* Uhrzeiten */
#book-appointment-wizard #available-hours .available-hour {
    border-radius: 0 !important;
    border: 1px solid var(--rahmen) !important;
    background: var(--weiss) !important;
    color: var(--tiefe) !important;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-transform: none;
}
#book-appointment-wizard #available-hours .available-hour:hover {
    border-color: var(--wald) !important;
    color: var(--wald) !important;
}
#book-appointment-wizard #available-hours .selected-hour,
#book-appointment-wizard #available-hours .selected-hour:hover {
    background: var(--wald) !important;
    border-color: var(--wald) !important;
    color: var(--creme) !important;
}

/* Formular */
.form-label { color: var(--stein); font-size: .875rem; }
.form-control, .form-select {
    border-color: var(--rahmen) !important;
    color: var(--tiefe);
}
.form-control:focus, .form-select:focus {
    border-color: var(--wald) !important;
    box-shadow: 0 0 0 .2rem rgba(75, 114, 85, .15) !important;
}
.form-check-input:checked {
    background-color: var(--wald) !important;
    border-color: var(--wald) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(75, 114, 85, .15) !important; }
.form-check-input.is-invalid { border-color: #9B4922 !important; }
.text-danger { color: #9B4922 !important; }

/* Prüfung „kein Roboter“ */
.altcha-challenge.card {
    background: var(--creme) !important;
    border: 1px solid var(--rahmen) !important;
}
.altcha-status { color: var(--stein) !important; }
.altcha-progress .progress-bar { background-color: var(--wald) !important; }

/* Fuß: leise; Sprachwahl entfällt (nur Deutsch) */
#frame-footer {
    border-top: 1px solid var(--rahmen-innen) !important;
    color: var(--stein);
}
#frame-footer a { color: var(--stein); }
#frame-footer a:hover { color: var(--gold); }
#select-language { display: none !important; }

/* Bestätigung und Meldungen */
.bg-success.bg-opacity-10 { background-color: rgba(182, 205, 189, .45) !important; }
.text-success { color: var(--wald) !important; }
.alert-success { background: var(--creme) !important; border-color: var(--rahmen) !important; color: var(--wald) !important; }

/* Fenster (Datenschutzhinweise) */
.modal-header, .modal-footer { border-color: var(--rahmen-innen) !important; }
.modal-title { font-family: var(--font-serif); color: var(--wald); font-weight: 500; font-size: 1.5rem; }