/*
 * MWFewoManager
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 */

:root {
    --calendar-surface: var(--color-surface, #ffffff);
    --calendar-text: var(--color-text, #1f2937);
    --calendar-muted: var(--color-muted, #6b7280);
    --calendar-border: var(--border-color, #e3e8ee);
    --calendar-radius: var(--border-radius, 8px);
    --calendar-modal-radius-desktop: 16px;
    --calendar-modal-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.12));
    --calendar-modal-backdrop: rgba(0, 0, 0, 0.4);
    --calendar-z-index: 1030;
    --calendar-header-padding: 1rem;
    --calendar-footer-padding: 1rem;
    --calendar-content-padding: 1rem;
    --calendar-nav-padding: 0.9rem 0.75rem;
    --calendar-nav-gap: 0.25rem;
    --calendar-nav-button-padding: 0.25rem 0.4rem;
    --calendar-title-font-size: 1rem;
    --calendar-wrapper-gap: 1rem;
    --calendar-grid-padding: 0.5rem;
    --calendar-weekday-font-size: 0.85rem;
    --calendar-weekday-padding: 0.35rem 0;
    --calendar-day-font-size: 0.95rem;
    --calendar-day-font-weight: 500;
    --calendar-day-radius: 0.4rem;
    --calendar-day-disabled-opacity: 0.45;
    --calendar-day-transition: all 0.15s ease;
    --calendar-price-font-size: 0.65rem;
    --calendar-price-bottom: 2px;
    --calendar-check-radius: 8px;
    --calendar-check-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --calendar-check-label-font-size: 0.65rem;
    --calendar-check-label-padding: 0.25rem 0.45rem;
    --calendar-check-label-radius: 6px;
    --calendar-check-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --calendar-check-marker-size: 8px;
    --calendar-check-marker-offset: -4px;
    --calendar-selection-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
    --calendar-legend-gap: 0.6rem 1rem;
    --calendar-legend-margin-bottom: 1rem;
    --calendar-legend-font-size: 0.85rem;
    --calendar-legend-key-gap: 0.35rem;
    --calendar-swatch-size: 1rem;
    --calendar-swatch-radius: 4px;
    --calendar-swatch-border: 1px solid rgba(0, 0, 0, 0.15);
    /* Edit-Icon: deutlich groesser, damit der User sieht "hier kann ich
       editieren". Vorher 12px – zu klein, ging optisch unter. Jetzt 18px
       plus volle Opazitaet, damit das Stift-Symbol klar lesbar ist. */
    --calendar-edit-icon-size: 18px;
    --calendar-edit-icon-offset-top: 4px;
    --calendar-edit-icon-offset-right: 4px;
    --calendar-edit-icon-opacity: 0.85;
    --calendar-edit-icon-opacity-hover: 1;
    --calendar-edit-check-icon-size: 16px;
    --calendar-edit-check-icon-offset-top: 4px;
    --calendar-edit-check-icon-offset-right: 4px;
    --calendar-edit-check-icon-opacity: 0.95;
    --calendar-stay-duration-margin-top: 1rem;
    --calendar-stay-duration-gap: 0.25rem;
    --calendar-stay-duration-label-font-size: 0.9rem;
    --calendar-stay-duration-label-weight: 600;
    --calendar-tooltip-bg: var(--tooltip-bg, var(--calendar-text));
    --calendar-tooltip-fg: var(--tooltip-fg, var(--white, #ffffff));
    --calendar-tooltip-padding: 0.4rem 0.55rem;
    --calendar-tooltip-radius: 6px;
    --calendar-tooltip-font-size: 0.8rem;
    --calendar-tooltip-transform: translate(-50%, -110%);
    --calendar-open-duration-mobile: 0.22s;
    --calendar-close-duration-mobile: 0.18s;
    --calendar-open-duration-desktop: 0.15s;
    --calendar-close-duration-desktop: 0.12s;
}

/* =========================================================
   CALENDAR MODAL – MOBILE FIRST
   ========================================================= */

.calendar-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: stretch; /* wichtig für 100% Breite */
    z-index: var(--calendar-z-index);

    pointer-events: none;
    transform: translateY(100%);
}

/* Backdrop: immer hier – nicht auf .calendar-modal */
.calendar-modal__backdrop,
.calendar-modal .kw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background-color .2s ease-out;
}

/* Modal-Wrapper muss volle Breite bekommen */
.calendar-modal__modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
}

/* Dialog = Bottom-Sheet */
.calendar-modal__dialog {
    width: 100%;
    max-height: 100dvh;
    margin: 0;

    background: var(--calendar-surface);
    border-radius: 0;
    box-shadow: var(--calendar-modal-shadow);

    display: flex;            /* wichtig: Header/Footer fix, Content scrollt */
    flex-direction: column;
    overflow: hidden;         /* nur Content scrollt */
}

/* Header/Footer fix (über flex, nicht sticky nötig) */
.calendar-modal__header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: var(--calendar-header-padding);
    background: var(--calendar-surface);
    z-index: 1;
    border-bottom: 1px solid var(--calendar-border);
}

.calendar-modal__header h2 {
    margin: 0;
}

.calendar-modal__footer {
    flex: 0 0 auto;
    padding: var(--calendar-footer-padding);
    background: var(--calendar-surface);
    z-index: 1;
    border-top: 1px solid var(--calendar-border);
    /* Ohne display:flex flossen die drei Buttons (Zuruecksetzen/Abbrechen/
       Uebernehmen) inline und "Uebernehmen" brach mobil in eine zweite Zeile um.
       Flex + nowrap haelt sie in einer Reihe; bei wenig Platz schrumpfen sie. */
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}
/* Zuruecksetzen (Ghost-Link) nach links, Abbrechen + Uebernehmen nach rechts.
   Kein eigenes padding-left/right mehr -> nutzt das normale .btn-Padding,
   konsistent mit Abbrechen/Uebernehmen. */
/* Ghost-Link: bündig links. KEINE padding-left/right-Deklaration auf dem
   Clear-Button — er bleibt flush. */
.calendar-modal__footer .btn.btn--clear {
    margin-right: auto;
    flex: 0 0 auto;
}
.calendar-modal__footer .btn.btn--cancel,
.calendar-modal__footer .btn.btn--apply {
    flex: 0 1 auto;
    white-space: nowrap;
}
/* Mobil: kompaktere Footer-Buttons, damit Zuruecksetzen/Abbrechen/Uebernehmen
   sicher in eine Reihe passen und nicht zu breit wirken. Greift fuer Telefone
   (Bottom-Sheet). Das horizontale Padding bewusst NICHT auf den Clear-Button
   (bleibt bündiger Ghost-Link). */
@media (max-width: 560px) {
    .calendar-modal__footer {
        gap: .4rem;
        padding: .7rem .75rem;
    }
    .calendar-modal__footer .btn {
        font-size: .9rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }
    .calendar-modal__footer .btn:not(.btn--clear) {
        padding-left: .8rem;
        padding-right: .8rem;
    }
}

/* Content scrollt */
.calendar-modal__content {
    flex: 1 1 auto;
    /* min-height:0 ist hier zwingend: ein Flex-Item hat default min-height:auto
       und schrumpft dann NICHT unter seine Inhaltshoehe. Folge: overflow:auto
       greift nie, der Content waechst ueber den Dialog hinaus und der Dialog
       (overflow:hidden) clippt das LETZTE Kind – das Aufenthaltsdauer-Dropdown.
       Mit min-height:0 schrumpft der Content auf den verfuegbaren Platz und
       scrollt intern; Footer bleibt fix sichtbar, Dropdown bleibt erreichbar. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--calendar-content-padding);
}

/* OPEN/CLOSE states */
.calendar-modal.is-open {
    pointer-events: auto;
    animation: slideInUp var(--calendar-open-duration-mobile) ease-out both;
}

.calendar-modal.is-open .calendar-modal__backdrop,
.calendar-modal.is-open .kw-modal-backdrop {
    background: var(--calendar-modal-backdrop);
}

.calendar-modal.is-closing {
    pointer-events: none;
    animation: slideOutDown var(--calendar-close-duration-mobile) ease-in both;
}

.calendar-modal.is-closing .calendar-modal__backdrop,
.calendar-modal.is-closing .kw-modal-backdrop {
    background: rgba(0,0,0,0);
}

/* Slide nur mobil */
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes slideOutDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* Mobil: Datepicker muss garantiert ueber die volle Viewport-Breite gehen.
   Hintergrund: Theme-Container (z. B. .content-page) koennen mit hoher
   Spezifitaet max-width/padding mitbringen. Wir ankern Modal + Dialog auf
   100dvw und setzen Bottom-Sheet-Anker, damit der Picker buendig links/rechts
   am Viewport sitzt. */
@media (max-width: 819.98px) {
    .calendar-modal__modal {
        inset: 0;
        width: 100vw;
        width: 100dvw;
        max-width: 100vw;
        max-width: 100dvw;
        padding: 0;
        margin: 0;
        align-items: flex-end;     /* Bottom-Sheet */
        justify-content: stretch;
    }

    .calendar-modal__dialog {
        width: 100vw;
        width: 100dvw;
        max-width: 100vw;
        max-width: 100dvw;
        margin-inline: 0;
        border-radius: 0;
        box-sizing: border-box;
    }
}

/* Desktop: fade für das Modal, Backdrop fadet weiter über background-color */
@media (min-width: 820px) {
    .calendar-modal {
        transform: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        animation: none;
        opacity: 0;
    }

    .calendar-modal.is-open {
        opacity: 1;
        animation: fadeInModal var(--calendar-open-duration-desktop) ease-out both;
    }

    .calendar-modal.is-closing {
        opacity: 0;
        animation: fadeOutModal var(--calendar-close-duration-desktop) ease-in both;
    }

    .calendar-modal__modal {
        width: auto;
        max-width: none;
        align-self: auto;
    }

    .calendar-modal__dialog {
        /* Desktop: Hoehe inhaltsdefiniert (height:auto), KEINE feste/min-Hoehe.
           max-height nur als Schutz fuer kurze Screens (dann scrollt der Content
           intern). Breite auf gaengigen Screens begrenzt. */
        width: min(920px, 92vw);
        height: auto;
        max-height: min(90vh, 760px);
        border-radius: var(--calendar-modal-radius-desktop);
    }

    .calendar-modal.is-open .calendar-modal__backdrop,
    .calendar-modal.is-open .kw-modal-backdrop {
        background: var(--calendar-modal-backdrop);
    }

    @keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOutModal { from { opacity: 1; } to { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-modal { animation: none !important; }
}

/* =========================================================
   STATUS-HINWEIS (Anreise/Abreise waehlen)
   ========================================================= */
.calendar-status {
    padding: .6rem .75rem;
    margin: 0 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--calendar-text);
    background: color-mix(in srgb, var(--color-primary, #2563eb) 8%, transparent);
    border-left: 3px solid var(--color-primary, #2563eb);
    border-radius: 6px;
}
.calendar-status[data-empty="true"] {
    display: none;
}

/* =========================================================
   QUICK-PICKS (Wochenende, 7 Tage, 14 Tage)
   ========================================================= */
.calendar-quick-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: 0 .25rem;
}
.calendar-quick-picks__label {
    flex: 0 0 100%;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--calendar-muted);
    margin-bottom: .25rem;
}
.calendar-quick-picks__btn {
    /* Flache, klare Pille: getoenter Primary-Rand + Primary-Text, KEIN Verlauf/
       Schatten (wirkte sonst puffig/embossed). Hover fuellt in Primary.
       38px Touch-Target, nowrap fuer hoehenstabile Pillen. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .45rem 1.15rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--calendar-surface);
    border: 1.5px solid color-mix(in srgb, var(--color-primary, #2563eb) 35%, var(--calendar-border));
    border-radius: 999px;
    color: var(--color-primary, #2563eb);
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.calendar-quick-picks__btn:hover {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: #fff;
}
.calendar-quick-picks__btn:active {
    background: color-mix(in srgb, var(--color-primary, #2563eb) 85%, #000);
    border-color: color-mix(in srgb, var(--color-primary, #2563eb) 85%, #000);
}
.calendar-quick-picks__btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* Mobile: Pillen auf 100%/auto verteilen, damit drei Buttons + Label nicht
   gequetscht wirken. Auf phone-Viewports nehmen sie volle Breite, jeder
   Tap bleibt komfortabel. */
@media (max-width: 480px) {
    .calendar-quick-picks {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-quick-picks__btn {
        width: 100%;
    }
    .calendar-quick-picks__label {
        text-align: center;
    }
}

/* =========================================================
   RESET-BUTTON: visuell von Apply/Cancel abheben (Ghost statt CTA)
   ========================================================= */
.calendar-modal__footer .btn.btn--clear,
.calendar-modal__footer .btn.btn--clear.btn--ghost {
    background: transparent;
    color: var(--calendar-muted);
    border: 1px solid transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.calendar-modal__footer .btn.btn--clear:hover {
    color: var(--calendar-text);
    text-decoration: none;
}

/* =========================================================
   NAVIGATION + TITEL
   ========================================================= */
.calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--calendar-nav-padding);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: var(--calendar-text);
    font-size: var(--calendar-title-font-size);
}

.calendar__navigation {
    display: flex;
    gap: var(--calendar-nav-gap);
    margin-left: auto;
}
.calendar__navigation button {
    border: none;
    background: transparent;
    color: var(--calendar-muted);
    cursor: pointer;
    padding: var(--calendar-nav-button-padding);
}
.calendar__navigation button:hover {
    color: var(--calendar-text);
}

/* =========================================================
   KALENDER-GRID
   ========================================================= */
.calendar-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--calendar-wrapper-gap);
}

@media (min-width: 820px) {
    .calendar-wrapper { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: Monate dezidiert untereinander, jede Karte randlos auf 100%.
   Vorher: theoretisch greift hier schon `1fr` aus der Basis, in der Praxis
   tauchten je nach Viewport (~360px) seitliche Whitespace-Streifen auf,
   weil `.calendar` und `.calendar__grid` keinen expliziten Width-Wert
   trugen. Explizit `repeat(1, 100%)` + `width:100%` macht den Layout-Pfad
   eindeutig. */
@media (max-width: 819px) {
    .calendar-wrapper {
        grid-template-columns: repeat(1, 100%);
        width: 100%;
    }
    .calendar,
    .calendar__grid,
    .calendar__grid table {
        width: 100%;
    }
}
.calendar {
    border: 1px solid var(--calendar-border);
    border-radius: var(--calendar-radius);
    background: var(--calendar-surface);
}
.calendar__grid {
    padding: var(--calendar-grid-padding);
}
.calendar__grid table {
    width: 100%;
    border-collapse: separate;
}
.calendar__grid th {
    color: var(--calendar-muted);
    font-size: var(--calendar-weekday-font-size);
    font-weight: 500;
    text-align: center;
    padding: var(--calendar-weekday-padding);
}

/* =========================================================
   TAG-ZELLEN
   ========================================================= */
.calendar__button-day {
    position: relative;
    width: var(--calendar-cell-width);
    height: var(--calendar-cell-height);
    /*margin: 0.15rem;*/
    border-radius: var(--calendar-day-radius);
    border: 1px solid var(--calendar-border);
    background: var(--calendar-surface);
    color: var(--calendar-text);
    font-size: var(--calendar-day-font-size);
    font-weight: var(--calendar-day-font-weight);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--calendar-day-transition);
}
.calendar__button-day:hover:not([aria-disabled="true"]) {
    background: var(--calendar-day-hover-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.calendar__button-day:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.calendar__button-day[aria-disabled="true"] {
    opacity: var(--calendar-day-disabled-opacity);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* =========================================================
   TAG-STATUS
   ========================================================= */
.calendar__button-day--free {
    background: var(--calendar-bg-free);
    color: var(--calendar-fg-free);
}
.calendar__button-day--booked {
    background: var(--calendar-bg-booked);
    color: var(--calendar-fg-booked);
    cursor: not-allowed;
}
.calendar__button-day--blocked {
    background: var(--calendar-bg-blocked);
    color: var(--calendar-fg-blocked);
    cursor: not-allowed;
}
.calendar__button-day--owner {
    background: var(--calendar-bg-owner);
    color: var(--calendar-fg-owner);
    cursor: not-allowed;
}
.calendar__button-day--selected {
    background: var(--calendar-bg-selected);
    color: var(--calendar-fg-selected);
}

/* =========================================================
   💰 Preis-Label – Standard
   ========================================================= */
.calendar__button-day--price {
    position: absolute;
    bottom: var(--calendar-price-bottom);
    left: 0;
    right: 0;
    font-size: var(--calendar-price-font-size);
    color: var(--calendar-muted);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   💰 Preis auf Check-in / Check-out sichtbar machen
   ========================================================= */
.calendar__button-day--check-in .calendar__button-day--price,
.calendar__button-day--check-out .calendar__button-day--price {
    color: var(--calendar-price-on-check-fg); /* hoher Kontrast */
    text-shadow: 0 0 3px rgba(0,0,0,0.4);
    font-weight: 500;
    z-index: 2; /* über Hintergrund, unter Label */
}

/* =========================================================
   💰 Preis bei Bearbeitungsmodus (editRange)
   ========================================================= */
.calendar__button-day--edit .calendar__button-day--price {
    color: color-mix(in srgb, var(--color-warning) 85%, #3b2f00);
    text-shadow: none;
}

/* =========================================================
   💰 Preis bei editierten Check-in/Check-out-Tagen
   ========================================================= */
.calendar__button-day--edit.calendar__button-day--check-in .calendar__button-day--price,
.calendar__button-day--edit.calendar__button-day--check-out .calendar__button-day--price {
    color: var(--calendar-price-on-check-fg);
    text-shadow: 0 0 3px rgba(0,0,0,0.35);
}

/* =========================================================
   Auswahlbereich: Check-in / Check-out / Zwischenbereich
   ========================================================= */

/* Gesamte Range */
.calendar__button-day--selected {
    background: var(--calendar-bg-selected);
    color: var(--calendar-fg-selected);
    position: relative;
    font-weight: 500;
}

/* Check-in / Check-out stärker betont */
.calendar__button-day--check-in,
.calendar__button-day--check-out {
    position: relative;
    background: var(--calendar-bg-check);
    color: var(--calendar-fg-check);
    font-weight: 600;
    border-radius: var(--calendar-check-radius);
    z-index: 2;
    box-shadow: var(--calendar-check-shadow);
}

/* Sanfter Hovereffekt */
.calendar__button-day--check-in:hover,
.calendar__button-day--check-out:hover {
    background: color-mix(in srgb, var(--calendar-bg-check) 85%, var(--calendar-surface));
    color: var(--calendar-fg-check);
}

/* Abgesetzte Labels (z. B. "Anreise" / "Abreise") */
.calendar__button-day--check-in::after,
.calendar__button-day--check-out::after {
    content: attr(data-check-label);
    position: absolute;
    top: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--calendar-bg-check);
    color: var(--calendar-check-label-fg);
    font-size: var(--calendar-check-label-font-size);
    line-height: 1;
    font-weight: 500;
    padding: var(--calendar-check-label-padding);
    border-radius: var(--calendar-check-label-radius);
    white-space: nowrap;
    box-shadow: var(--calendar-check-label-shadow);
}

/* Kleine runde Marker zur visuellen Trennung */
.calendar__button-day--check-in::before,
.calendar__button-day--check-out::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--calendar-check-marker-size);
    height: var(--calendar-check-marker-size);
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--calendar-surface);
}
.calendar__button-day--check-in::before { left: var(--calendar-check-marker-offset); }
.calendar__button-day--check-out::before { right: var(--calendar-check-marker-offset); }

/* =========================================================
   Zwischenliegende Tage – sanfter Farbverlauf
   ========================================================= */

.calendar__button-day--selected:not(.calendar__button-day--check-in):not(.calendar__button-day--check-out) {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--calendar-surface));
    color: var(--calendar-bg-check);
}

/* Optional: Weiche Übergänge an den Kanten */
.calendar__button-day--check-in + .calendar__button-day--selected,
.calendar__button-day--selected + .calendar__button-day--check-out {
    box-shadow: var(--calendar-selection-shadow);
}

/* =========================================================
   📘 Legende (aktualisiert)
   ========================================================= */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--calendar-legend-gap);
    margin-bottom: var(--calendar-legend-margin-bottom);
    font-size: var(--calendar-legend-font-size);
    align-items: center;
}

.calendar-legend .key {
    display: flex;
    align-items: center;
    gap: var(--calendar-legend-key-gap);
    color: var(--calendar-text);
}

.calendar-legend .swatch {
    display: inline-block;
    width: var(--calendar-swatch-size);
    height: var(--calendar-swatch-size);
    border-radius: var(--calendar-swatch-radius);
    border: var(--calendar-swatch-border);
}

/* === Farben nach aktuellem Design === */
.swatch.free {
    background: var(--calendar-bg-free);
    border-color: var(--calendar-border-free);
}

.swatch.booked {
    background: var(--calendar-bg-booked);
    border-color: var(--calendar-border-booked);
}

.swatch.blocked {
    background: var(--calendar-bg-blocked);
    border-color: var(--calendar-border-blocked);
}

.swatch.owner {
    background: var(--calendar-bg-owner);
    border-color: var(--calendar-border-owner);
}

.swatch.edit {
    background: var(--calendar-bg-edit);
    border-color: var(--calendar-border-edit);
    position: relative;
}
/* Pencil-Icon im Legend-Swatch – macht klar, dass das die Bearbeiten-Tage
   sind und nicht nur eine weitere Farbe. Das gleiche SVG wie auf den
   .calendar__button-day--edit::before-Zellen, nur als Marker im Legend. */
.swatch.edit::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: no-repeat center / 80% 80%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23a67c00' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/></svg>");
}

.swatch.selected {
    background: var(--calendar-bg-selected);
    border-color: var(--calendar-border-selected);
}

.swatch.check {
    background: var(--calendar-bg-check);
    border-color: var(--calendar-border-check);
}

/* =========================================================
   Bearbeitungsmodus (edit) – sichtbarer Bereich
   ========================================================= */

/* Basisfarbe für Edit-Tage */
.calendar__button-day--edit {
    background: var(--calendar-bg-edit); /* sanftes Gelb */
    border: 1px solid var(--calendar-border-edit);
    color: color-mix(in srgb, var(--color-warning) 80%, #3b2f00);
    position: relative;
    font-weight: 500;
}

/* Zwischenliegende Tage (Edit-Range) ebenfalls gelblich */
.calendar__button-day--edit.calendar__button-day--selected:not(.calendar__button-day--check-in):not(.calendar__button-day--check-out) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 18%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-warning) 30%, var(--color-surface)) 100%);
    color: color-mix(in srgb, var(--color-warning) 80%, #3b2f00);
}

/* Check-in / Check-out innerhalb eines Edit-Zeitraums */
.calendar__button-day--edit.calendar__button-day--check-in,
.calendar__button-day--edit.calendar__button-day--check-out {
    background: color-mix(in srgb, var(--color-warning) 34%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-warning) 55%, var(--border-color));
    color: var(--calendar-check-label-fg);
    font-weight: 600;
    position: relative;
}

.calendar__button-day--edit.calendar__button-day--check-in:hover,
.calendar__button-day--edit.calendar__button-day--check-out:hover {
    color: var(--calendar-check-label-fg);
}

/* Label in goldgelb */
.calendar__button-day--edit.calendar__button-day--check-in::after,
.calendar__button-day--edit.calendar__button-day--check-out::after {
    background: color-mix(in srgb, var(--color-warning) 70%, #000);
    color: var(--calendar-check-label-fg);
}

/* =========================================================
   ✏️ Stift-Icon – Standardposition
   ========================================================= */
.calendar__button-day--edit::before {
    content: "";
    position: absolute;
    top: var(--calendar-edit-icon-offset-top);
    right: var(--calendar-edit-icon-offset-right);
    width: var(--calendar-edit-icon-size);
    height: var(--calendar-edit-icon-size);
    background: no-repeat center / contain;
    opacity: var(--calendar-edit-icon-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23a67c00' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/></svg>");
}

.calendar__button-day--edit:hover::before {
    opacity: var(--calendar-edit-icon-opacity-hover);
}

/* =========================================================
   ✏️ Stift-Icon bei Check-in/Check-out → verschieben
   ========================================================= */
.calendar__button-day--edit.calendar__button-day--check-in::before,
.calendar__button-day--edit.calendar__button-day--check-out::before {
    top: var(--calendar-edit-check-icon-offset-top);
    right: var(--calendar-edit-check-icon-offset-right);
    left: auto;
    width: var(--calendar-edit-check-icon-size);
    height: var(--calendar-edit-check-icon-size);
    opacity: var(--calendar-edit-check-icon-opacity);
    z-index: 3; /* über Label, aber unter Tooltip */
}

/* =========================================================
   AUFENTHALTSDAUER (Dropdown)
   ========================================================= */
.calendar-stay-duration {
    margin-top: var(--calendar-stay-duration-margin-top);
    display: flex;
    flex-direction: column;
    gap: var(--calendar-stay-duration-gap);
}
.calendar-stay-duration label {
    font-size: var(--calendar-stay-duration-label-font-size);
    font-weight: var(--calendar-stay-duration-label-weight);
    color: var(--calendar-text);
}
/*select#calendar-stay-duration-nights {*/
/*    appearance: none;*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/

/*    width: 100%;*/
/*    max-width: 250px;*/
/*    padding: 0.6rem 2.2rem 0.6rem 0.75rem; !* Platz für Pfeil rechts *!*/
/*    border: 1px solid var(--border-color);*/
/*    border-radius: 8px;*/
/*    background-color: var(--tooltip-fg, var(--white));*/
/*    color: var(--color-text);*/
/*    font-size: 1rem;*/
/*    line-height: 1.3;*/
/*    cursor: pointer;*/
/*    transition: border-color .15s ease, box-shadow .15s ease;*/

/*    !* Eigenes Caret (SVG, nutzt currentColor => passt sich Farbe an) *!*/
/*    background-image: url("data:image/svg+xml;utf8,\*/
/*  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\*/
/*  <polyline points='6 9 12 15 18 9'/></svg>");*/
/*    background-repeat: no-repeat;*/
/*    background-position: right 0.9rem center;*/
/*    background-size: 14px 14px;*/
/*}*/
select#calendar-stay-duration-nights:hover {
    border-color: var(--color-primary);
}
/* Standardzustand: immer ausblenden, wenn aria-hidden="true" */
.calendar-stay-duration[aria-hidden="true"] {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

/* Nur anzeigen, wenn aria-hidden explizit auf false gesetzt ist */
.calendar-stay-duration[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    gap: var(--calendar-stay-duration-gap);
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Optional: optische Feinheiten */
.calendar-stay-duration label {
    font-size: var(--calendar-stay-duration-label-font-size);
    font-weight: var(--calendar-stay-duration-label-weight);
    color: var(--calendar-text);
}

/* =========================================================
   MODAL
   ========================================================= */

.calendar-modal__modal {
    position: relative;
}

/* =========================================================
   TOOLTIP
   ========================================================= */
.calendar-modal__tooltip{
    position: absolute;
    background: var(--calendar-tooltip-bg);
    color: var(--calendar-tooltip-fg);
    padding: var(--calendar-tooltip-padding);
    border-radius: var(--calendar-tooltip-radius);
    font-size: var(--calendar-tooltip-font-size);
    transform: var(--calendar-tooltip-transform);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.calendar-modal__tooltip[data-hidden="true"] { display: none; }

/* =========================================================
   TOAST (mobile + Desktop, persistent fuer paar Sekunden)
   ---------------------------------------------------------
   Auf Touch-Geraeten greift der hover-basierte Tooltip nicht.
   Der Toast zeigt dieselbe Fehlermeldung (z.B. "Belegt") gut
   sichtbar oberhalb des Kalenders und blendet sich nach paar
   Sekunden wieder weg. Auf Desktop laeuft er parallel zum
   Tooltip – stoert nicht, ist dezent gestylt.
   ========================================================= */
.calendar-toast {
    margin: 0.5rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    background: var(--calendar-tooltip-bg, #333);
    color: var(--calendar-tooltip-fg, #fff);
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.calendar-toast[data-hidden="true"] {
    display: none;
}
.calendar-toast[data-hidden="false"] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   AUFENTHALTSDAUER – disabled mit Hinweis (vor Range-Auswahl)
   ---------------------------------------------------------
   Vorher: Feld komplett ausgeblendet bis Range steht. Effekt:
   der User wusste nicht, dass es das Feld gibt, und es tauchte
   ploetzlich auf. Jetzt: Feld dauerhaft sichtbar; vor Range-
   Auswahl als disabled markiert plus kleiner Hinweistext
   "Bitte erst Anreise waehlen".
   ========================================================= */
.calendar-stay-duration--disabled {
    opacity: 0.55;
}
.calendar-stay-duration--disabled select {
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.04);
}
.calendar-stay-duration__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--calendar-text);
    opacity: 0.75;
    font-style: italic;
}
.calendar-stay-duration__hint[hidden] {
    display: none;
}