/*
 * Terminbuchung: Kalender links, Uhrzeit und Kontaktdaten rechts.
 * Farben und Rundungen folgen dem Sitepackage; die Werte stehen als eigene
 * Variablen, damit die Extension auch ohne das Sitepackage brauchbar bleibt.
 */
.bwbooking {
    --bwb-akzent: #1268ff;
    --bwb-akzent-hell: #52a0ff;
    --bwb-flaeche: rgba(255, 255, 255, 0.05);
    --bwb-flaeche-stark: rgba(255, 255, 255, 0.09);
    --bwb-rand: rgba(255, 255, 255, 0.14);
    --bwb-text: #e8eefb;
    --bwb-text-leise: #9fb3d4;
    --bwb-radius: 14px;

    color: var(--bwb-text);
}

.bwbooking__raster {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(280px, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding: 1.75rem;
    border: 1px solid var(--bwb-rand);
    border-radius: 20px;
    background: var(--bwb-flaeche);
}

/* --- Kalender ----------------------------------------------------------- */
.bwbooking__monat + .bwbooking__monat {
    margin-top: 1.5rem;
}

.bwbooking__monatsname {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.bwbooking__wochentage,
.bwbooking__tage {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.bwbooking__wochentage {
    margin-bottom: 6px;
}

.bwbooking__wochentage span {
    padding: 0.2rem 0;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--bwb-text-leise);
}

.bwbooking__tag {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--bwb-flaeche-stark);
    color: var(--bwb-text);
    font: inherit;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 180ms, color 180ms, border-color 180ms;
}

/* Nur buchbare Tage reagieren — die Regel gilt ausdrücklich für button,
   sonst würden auch die Platzhalter der Wochenenden aufleuchten. */
button.bwbooking__tag:hover {
    border-color: var(--bwb-akzent-hell);
}

button.bwbooking__tag:focus-visible {
    outline: 2px solid var(--bwb-akzent-hell);
    outline-offset: 2px;
}

.bwbooking__tag.is-active {
    background: var(--bwb-akzent);
    color: #fff;
    font-weight: 600;
}

/* Tage ohne freie Termine bleiben als Platzhalter im Raster, damit die
   Wochentage in ihrer Spalte stehen bleiben. Sie tragen keine Fläche und
   nehmen keine Eingaben entgegen. */
.bwbooking__tag--leer {
    border-color: transparent;
    background: none;
    color: rgba(159, 179, 212, 0.3);
    cursor: default;
    pointer-events: none;
}

/* --- Auswahl und Kontaktdaten ------------------------------------------- */
.bwbooking__auswahl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bwbooking__feld {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bwbooking__label {
    font-size: 0.85rem;
    color: var(--bwb-text-leise);
}

.bwbooking__label em {
    font-style: normal;
    font-size: 0.8rem;
    opacity: 0.75;
}

.bwbooking__gewaehlt {
    margin: -0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--bwb-akzent-hell);
}

.bwbooking input[type='text'],
.bwbooking input[type='email'],
.bwbooking textarea,
.bwbooking__zeitwahl {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bwb-rand);
    border-radius: var(--bwb-radius);
    background: var(--bwb-flaeche-stark);
    color: var(--bwb-text);
    font: inherit;
}

.bwbooking textarea {
    resize: vertical;
}

.bwbooking input:focus-visible,
.bwbooking textarea:focus-visible,
.bwbooking__zeitwahl:focus-visible {
    outline: 2px solid var(--bwb-akzent-hell);
    outline-offset: 1px;
}

/* Auswahlliste: eigenes Pfeilsymbol, damit sie nicht wie ein
   Systemelement aus der Seite fällt. */
.bwbooking__zeitwahl {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bwb-text-leise) 50%),
        linear-gradient(135deg, var(--bwb-text-leise) 50%, transparent 50%);
    background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.bwbooking__zeitwahl option {
    background: #0d1b32;
    color: var(--bwb-text);
}

/* Sobald das Skript übernommen hat, ist nur die Liste des gewählten Tages
   sichtbar. Vorher stehen alle offen, damit auch ohne JavaScript gebucht
   werden kann. */
.bwbooking.is-enhanced .bwbooking__zeitwahl {
    display: none;
}

.bwbooking.is-enhanced .bwbooking__zeitwahl.is-active {
    display: block;
}

.bwbooking:not(.is-enhanced) .bwbooking__zeitwahl + .bwbooking__zeitwahl {
    margin-top: 0.4rem;
}

/* Fangfeld gegen automatische Absender: unsichtbar, aber nicht
   display:none — das würde von manchen Absendern erkannt. */
.bwbooking__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bwbooking__absenden {
    margin-top: 0.4rem;
    padding: 0.85rem 1.8rem;
    border: none;
    border-radius: 999px;
    background: var(--bwb-akzent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms, transform 200ms;
}

.bwbooking__absenden:hover {
    background: var(--bwb-akzent-hell);
    color: #fff;
    transform: translateY(-1px);
}

.bwbooking__datenschutz {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bwb-text-leise);
}

/* --- Hinweise und Bestätigung ------------------------------------------- */
.bwbooking__hinweis {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--bwb-rand);
    border-radius: var(--bwb-radius);
    background: var(--bwb-flaeche);
}

.bwbooking__hinweis--fehler {
    border-color: rgba(255, 118, 118, 0.5);
}

.bwbooking__marke {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bwb-akzent-hell);
}

.bwbooking__titel {
    margin: 0 0 1rem;
}

.bwbooking__text {
    margin: 0 0 1rem;
    max-width: 60ch;
}

.bwbooking__text--klein {
    font-size: 0.9rem;
    color: var(--bwb-text-leise);
}

.bwbooking__meeting {
    margin: 1.5rem 0;
    padding: 1.2rem;
    border: 1px solid var(--bwb-rand);
    border-radius: var(--bwb-radius);
    background: var(--bwb-flaeche);
}

.bwbooking__meetinglink {
    display: block;
    margin: 0.4rem 0;
    word-break: break-all;
    color: var(--bwb-akzent-hell);
}

.bwbooking__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bwb-text-leise);
}

/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 820px) {
    .bwbooking__raster {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 1.25rem;
    }
}