/* Terminkalender.
   Themenneutral: erbt Schrift und Farbe der Website, setzt nur Raster,
   Zustände und Abstände. Die Zustandsfarben sind bewusst kräftig genug,
   dass man sie auch bei schlechtem Licht auf dem Handy unterscheidet. */
.widget-calendar {
    padding: var(--wl-section-spacing, 4rem) clamp(0.75rem, 4vw, 1.5rem);
    max-width: 64rem;
    margin: 0 auto;
}

.cal__head { margin-bottom: 1.5rem; }

.cal__eyebrow {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.cal__title { margin: 0 0 0.5rem; }
.cal__subtitle { opacity: 0.85; }

/* ── Legende ──────────────────────────────────────────────────────────── */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
    opacity: 0.85;
}

.cal-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }

.cal-legend__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.cal-legend__dot--free    { background: #2f9e5f; }
.cal-legend__dot--busy    { background: #d08a1e; }
.cal-legend__dot--blocked { background: #b23b3b; }
.cal-legend__dot--event   { background: #3a6fd8; }

/* ── Monate ───────────────────────────────────────────────────────────── */
.cal-months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem;
}

.cal-month__title {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.cal-weekdays,
.cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
}

.cal-weekdays {
    margin-bottom: 0.3rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    text-align: center;
}

/* ── Ein Tag ──────────────────────────────────────────────────────────── */
.cal-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    min-height: 3.6rem;
    padding: 0.3rem 0.25rem;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
}

.cal-day--empty { border-color: transparent; }

.cal-day__number {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.cal-day--past { opacity: 0.35; }

.cal-day--today {
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Freie Tage sind Schaltflächen -- sie müssen als klickbar erkennbar sein,
   ohne dass man es ausprobieren muss. */
.cal-day--free {
    cursor: pointer;
    border-color: rgba(47, 158, 95, 0.55);
    background: rgba(47, 158, 95, 0.08);
}

.cal-day--free:hover {
    background: rgba(47, 158, 95, 0.18);
}

.cal-day--active {
    background: rgba(47, 158, 95, 0.3);
    border-color: #2f9e5f;
}

.cal-day--busy    { border-color: rgba(208, 138, 30, 0.5); }
.cal-day--blocked { background: rgba(178, 59, 59, 0.1); border-color: rgba(178, 59, 59, 0.45); }

.cal-day__free,
.cal-day__busy,
.cal-day__blocked {
    font-size: 0.62rem;
    line-height: 1.2;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-day__free    { color: #1f7a47; font-weight: 700; }
.cal-day__busy    { color: #a06a10; }
.cal-day__blocked { color: #8f2f2f; }

.cal-day__event {
    display: block;
    font-size: 0.6rem;
    line-height: 1.25;
    padding: 0.05rem 0.2rem;
    border-radius: 0.2rem;
    background: rgba(58, 111, 216, 0.16);
    color: #26478f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-day__event--blocked {
    background: rgba(178, 59, 59, 0.16);
    color: #8f2f2f;
}

/* ── Anfrage-Bereich ──────────────────────────────────────────────────── */
.cal-request {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.cal-times--hidden { display: none; }

.cal-times__head {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.cal-times__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.cal-slot input { position: absolute; opacity: 0; width: 0; height: 0; }

.cal-slot span {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 0.4rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cal-slot span:hover { background: rgba(128, 128, 128, 0.12); }

.cal-slot input:checked + span {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
    font-weight: 700;
}

.cal-slot input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }

/* Ganzer Tag deutlich abgesetzt: es ist eine andere Art von Buchung, keine
   weitere Uhrzeit in derselben Reihe. */
.cal-slot--full span {
    font-weight: 700;
    border-style: dashed;
}

.cal-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.cal-field { display: flex; flex-direction: column; gap: 0.25rem; }
.cal-field--wide { margin-top: 0.75rem; }
.cal-field > span { font-size: 0.85rem; opacity: 0.8; }

.cal-field input,
.cal-field textarea {
    padding: 0.55rem 0.7rem;
    font: inherit;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
}

.cal__submit {
    margin-top: 1.25rem;
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 700;
    border: 1px solid currentColor;
    border-radius: var(--wl-button-radius, 0.5rem);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.cal__submit:hover { background: rgba(128, 128, 128, 0.14); }

.cal-hint {
    margin-top: 1rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Auf dem Handy passen sieben Spalten nur, wenn die Zellen wirklich klein
   werden dürfen -- deshalb kleinere Schrift und weniger Höhe statt Umbruch. */
@media (max-width: 560px) {
    .cal-day {
        min-height: 2.9rem;
        padding: 0.2rem 0.15rem;
    }

    .cal-day__number { font-size: 0.72rem; }
    .cal-day__event { display: none; }
    .cal-day__free, .cal-day__busy, .cal-day__blocked { font-size: 0.55rem; }
}