/* --------------------------------------------------------------------------
   OBJEKTLISTE AM TELEFON

   Suchpille, Filterblatt, Chips, Sortierblatt, schwebender Karten-Knopf und
   der Leerzustand. Alles hier gilt nur bis 760 px Breite und nur, wenn
   `accommodation-list-mobile.js` die Leiste eingeschaltet hat
   (`.accommodation-list.has-list-bar`); auf dem Rechner und ohne Skript
   bleibt die Liste, wie sie war. Das Filterblatt ist das vorhandene
   Filterformular (`form.list-filter`), kein zweites.
   -------------------------------------------------------------------------- */

.list-bar,
.list-sheet,
.list-sheet-scrim {
    display: none;
}

.list-filter__head,
.list-filter__foot {
    display: none;
}

.list-filter__body {
    display: contents;
}

.list-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.list-empty__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-primary);
}

.list-empty .list-empty__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.list-empty__text {
    max-width: 340px;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.list-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.list-empty__actions button.btn {
    --btn-bg: var(--btn-primary-bg);
    --btn-color: var(--btn-primary-text);
    --btn-border: var(--btn-primary-border);
}

.list-bar__button {
    min-height: 44px;
}

@media (max-width: 760px) {
    .accommodation-list.has-list-bar .list-bar {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
        padding: var(--space-3) 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--border-color);
    }

    .list-bar[hidden],
    .filter-chips[hidden],
    .list-bar__count[hidden] {
        display: none;
    }

    .search-pill {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        min-height: 52px;
        padding: 0 var(--space-3) 0 var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-pill);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
        color: var(--color-text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .search-pill__text {
        display: grid;
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.25;
    }

    .search-pill__main,
    .search-pill__sub {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .search-pill__main {
        font-weight: 500;
    }

    .search-pill__sub {
        font-size: var(--font-size-xs);
        color: var(--color-muted);
    }

    .search-pill__sub[hidden] {
        display: none;
    }

    .list-bar__tools {
        display: flex;
        gap: var(--space-2);
    }

    .list-bar__tools .list-bar__button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 var(--space-3);
        font-size: var(--font-size-sm);
    }

    .list-bar__tools .list-bar__button > span:not(.list-bar__count) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-bar__count {
        display: inline-flex;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-pill);
        background: var(--color-primary);
        color: var(--white);
        font-size: var(--font-size-xs);
        line-height: 1;
    }

    .filter-chips {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-2);
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .filter-chip {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--space-2);
        min-height: 36px;
        padding: 0 var(--space-2) 0 var(--space-4);
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
        color: var(--color-primary-hover);
        font-size: var(--font-size-sm);
        font-weight: 500;
        white-space: nowrap;
    }

    .filter-chip__remove {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: var(--radius-pill);
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .accommodation-list.has-list-bar .accommodation-list__sort-label,
    .accommodation-list.has-list-bar .accommodation-list__sort-select {
        display: none;
    }

    .accommodation-list.has-list-bar .accommodation-list__map-toggle {
        position: fixed;
        left: 50%;
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        z-index: 35;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 48px;
        padding: 0 var(--space-5);
        transform: translateX(-50%);
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--color-text);
        color: var(--white);
        font-weight: 500;
        box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-color) 35%, transparent);
        cursor: pointer;
    }

    .accommodation-list.has-list-bar .accommodation-list__map-toggle[hidden] {
        display: none;
    }

    body:has(.accommodation-list.has-list-bar .accommodation-list__map-toggle:not([hidden])) {
        padding-bottom: calc(48px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px));
    }

    .accommodation-list.has-list-bar .accommodation-list__map-toggle::before {
        content: "";
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    html.list-sheet-open {
        overflow: hidden;
    }

    .list-sheet-scrim {
        position: fixed;
        inset: 0;
        z-index: 8000;
        background: color-mix(in srgb, var(--shadow-color) 45%, transparent);
    }

    .list-sheet-scrim:not([hidden]) {
        display: block;
    }

    .list-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8001;
        flex-direction: column;
        max-height: 94%;
        border-radius: 20px 20px 0 0;
        background: var(--color-surface);
        box-shadow: 0 -12px 40px color-mix(in srgb, var(--shadow-color) 20%, transparent);
    }

    .list-sheet.is-open {
        display: flex;
    }

    .list-sheet__grip {
        flex: none;
        width: 40px;
        height: 4px;
        margin: var(--space-2) auto 0;
        border-radius: 4px;
        background: var(--border-color);
    }

    .list-sheet__head {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }

    .list-sheet__head .list-sheet__title {
        flex: 1 1 auto;
        margin: 0;
        font-size: var(--font-size-md);
        font-weight: 500;
    }

    .list-sheet__close {
        display: inline-flex;
        width: 44px;
        height: 44px;
        flex: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-pill);
        background: var(--color-surface);
        color: var(--color-text);
        cursor: pointer;
    }

    .list-sheet__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: var(--space-4);
    }

    .list-sheet__foot {
        flex: none;
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px solid var(--border-color);
        background: var(--color-surface);
    }

    .list-sort {
        display: grid;
    }

    .list-sort__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-height: 52px;
        padding: 0 var(--space-1);
        border: 0;
        border-bottom: 1px solid var(--border-color);
        background: transparent;
        color: var(--color-text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .list-sort__item:last-child {
        border-bottom: 0;
    }

    .list-sort__item.is-on {
        color: var(--color-primary-hover);
        font-weight: 500;
    }

    .list-sort__item svg {
        width: 20px;
        height: 20px;
        color: var(--color-primary);
    }

    form.list-filter:not(.is-open) {
        display: none;
    }

    form.list-filter.is-open {
        position: fixed;
        inset: 0;
        z-index: 8001;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        background: var(--color-surface);
    }

    form.list-filter.is-open .list-filter__head,
    form.list-filter.is-open .list-filter__foot {
        display: flex;
    }

    form.list-filter.is-open .list-filter__body {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: var(--space-4);
    }

    form.list-filter .list-filter__body > * + * {
        margin-top: var(--space-5);
    }

    form.list-filter .widget-submit {
        display: none;
    }

    .list-filter__reset {
        min-height: 44px;
        padding: 0 var(--space-1);
        border: 0;
        background: none;
        color: var(--color-primary-hover);
        font: inherit;
        font-size: var(--font-size-sm);
        text-decoration: underline;
        cursor: pointer;
    }

    button.list-filter__apply.btn {
        --btn-bg: var(--btn-primary-bg);
        --btn-color: var(--btn-primary-text);
        --btn-border: var(--btn-primary-border);
    }

    .list-filter__apply {
        width: 100%;
        min-height: 48px;
    }

    form.list-filter :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
        font-size: max(1rem, 16px);
    }

    html.list-sheet-open .accommodation-list.has-list-bar .accommodation-list__map-toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Das Blatt fährt ein und aus wie das Blatt des Zeitraum-Kalenders
   (`picker.css`: `pick-slide-up` / `pick-slide-down`): von unten, 200 ms
   (`--frontend-core-sheet-speed`), ease-out hinein, ease heraus. Eingefahren
   wird, sobald `is-open` dasteht; das Ausfahren steuert
   `accommodation-sheet.js` über `is-closing` und nimmt `is-open` erst nach
   dem Ende der Animation weg. Dieselben Bewegungen nutzt das Filterblatt im
   Kartenfenster (`accommodation-map.css`).

   Kopf der Blätter: 56 px hoch, Titel und Kreuz vertikal mittig, Trennlinie
   über die ganze Breite. Das Kreuz ist 44 x 44 px groß und ohne Rahmen.
   Im Filterblatt steht es links am Rand des Blatts, seine linke Spitze liegt
   bei 17 px — bündig mit dem Rand der Felder (16 px Innenabstand), der Titel
   folgt im Abstand von 8 px. Im Sortierblatt steht der Titel links bei 16 px
   (bündig mit den Optionen), das Kreuz rechts am Rand des Blatts, seine
   rechte Spitze liegt 17 px vom Rand — bündig mit dem Ende der Optionen.
   -------------------------------------------------------------------------- */

@keyframes list-sheet-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes list-sheet-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
}

@keyframes list-sheet-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes list-sheet-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@media (max-width: 760px) {
    form.list-filter.is-open,
    .list-sheet.is-open {
        animation: list-sheet-in var(--frontend-core-sheet-speed, 200ms) ease-out;
    }

    form.list-filter.is-open.is-closing,
    .list-sheet.is-open.is-closing {
        pointer-events: none;
        animation: list-sheet-out var(--frontend-core-sheet-speed, 200ms) ease forwards;
    }

    .list-sheet-scrim:not([hidden]) {
        animation: list-sheet-fade-in var(--frontend-core-sheet-speed, 200ms) ease;
    }

    .list-sheet-scrim.is-closing {
        pointer-events: none;
        animation: list-sheet-fade-out var(--frontend-core-sheet-speed, 200ms) ease forwards;
    }

    .list-sheet__head {
        gap: var(--space-2);
        min-height: 56px;
        padding: 0 0 0 var(--space-4);
    }

    .list-sheet__head.list-filter__head {
        padding: 0 var(--space-4) 0 0;
    }

    .list-sheet__head .list-sheet__close {
        border: 0;
        background: none;
    }

    .list-sheet__close svg {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    form.list-filter,
    .list-sheet,
    .list-sheet-scrim {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   Haken-Zeilen im Filterblatt am Touchgerät (grober Zeiger oder bis 760 px).
   EIN Regelsatz für das Blatt der Suchseite und das Blatt im Kartenfenster:
   beide Formulare tragen `list-filter`, das Doppel `.list-filter.list-filter`
   hebt die Spezifität über die Regeln des Kartenfensters für den Rechner.

   Die Zeile ist eine Flex-Zeile mit `align-items: center`; Kästchen (20 px)
   und Beschriftung (16 px) stehen mittig nebeneinander, 12 px Abstand. Die
   Zielhöhe 44 px steckt in der Zeile selbst (Mindesthöhe von Zeile und
   Beschriftung), nicht in einem Abstand zwischen den Zeilen: Zwischenraum
   0. Vorher saß der Text oben in einem 44 px hohen Block (`display: block`)
   und das Kästchen mittig darunter. Gruppentitel: 8 px bis zum Inhalt,
   in „Ausstattungsmerkmale“ wie in „Entfernungen“.
   -------------------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 760px) {
    form.list-filter.list-filter .widget-checkbox .checkbox_container {
        gap: 0;
    }

    form.list-filter.list-filter .widget-checkbox .checkbox_container > span {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: 44px;
    }

    form.list-filter.list-filter .widget-checkbox .checkbox_container > span > input[type="checkbox"] {
        flex: none;
        width: 20px;
        height: 20px;
        margin: 0;
        vertical-align: middle;
    }

    form.list-filter.list-filter .widget-checkbox .checkbox_container > span > label {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-height: 44px;
        font-size: max(1rem, 16px);
        line-height: 1.3;
    }

    form.list-filter.list-filter fieldset.checkbox_container > legend {
        margin-bottom: var(--space-2);
    }

    form.list-filter.list-filter .widget-distances {
        gap: var(--space-2);
    }
}