/**
 * Osttirol Booking - Base layout + first components.
 *
 * Loads design tokens, then defines components in BEM-light:
 *   .osttirol-booking            container
 *   .osttirol-card                listing card (BEM: __image, __body, __meta, __cta)
 *   .osttirol-filter-chip         active filter w/ remove
 *   .osttirol-button              primary / secondary
 *   .osttirol-stars               1-5 star rating
 *
 * Mobile-first. Breakpoints: 480 / 768 / 1024 / 1440 px.
 * No build step, no Sass.
 */

/* tokens.css wird ab T7 global via <f:asset.css identifier="osttirol-tokens">
   VOR booking.css geladen (separater <link>, kein @import — LL-021). Die
   kanonischen Token-Familien (--c-, --space-, --radius-, --shadow-) stehen
   damit hier bereit. KEIN @import mehr (brach sonst LL-021 bei erstem :root).
   Hinweis: keine "--c-*" -Schreibweise mit Stern im Kommentar — die Folge
   Stern-Slash wuerde den Kommentar vorzeitig beenden und den Rest des Textes
   als ungueltiges CSS in den Stream schreiben. */

/* ---------- Minimal reset — AUSSCHLIESSLICH innerhalb von .ob-root ----------

   Diese Regeln standen bis 2026-07-28 auf `html`, `body`, `h1..h4`, `img`,
   `button` und `*` — also global. Die Extension laeuft aber nicht in einer
   eigenen Seite, sondern in der bestehenden Site: der Reset hat damit die
   Ueberschriften, Bilder und Buttons des Seitenrahmens mit ueberschrieben.
   Messbar auf dev: die `<h1>` der Seite (im `<header>`, ausserhalb des Plugins)
   rendert in Outfit statt in der CambridgeBold der Site.

   Deshalb ist alles hier auf `.ob-root` gescoped, den Wurzelknoten jeder
   Plugin-Ausgabe. Neue Templates MUESSEN `ob-root` auf dem aeusseren Element
   tragen, sonst bekommen sie diese Grundlagen nicht. `html`/`body` sind
   ersatzlos entfallen — Seitenhintergrund und Basisschrift gehoeren dem
   Seitenrahmen, nicht uns. */

.ob-root,
.ob-root *,
.ob-root *::before,
.ob-root *::after {
    box-sizing: border-box;
}

.ob-root {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
}

.ob-root h1,
.ob-root h2,
.ob-root h3,
.ob-root h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3);
}

.ob-root img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Button-Reset im Plugin-Scope. Bewusst in :where() - damit hat er Spezifitaet
   0,0,1 und verliert gegen JEDE Klassenregel.
   Befund 03.08.2026 (Stefan: „im roten Button ist die Schrift grau, sollte weiss
   sein", dazu „die Slider-Pfeile und das X sind sehr schlecht zu sehen"): als
   `.ob-root button` (0,1,1) schlug der Reset `.osttirol-button--primary`
   (0,1,0) und `.osttirol-lightbox__close` - `color: inherit` holte damit die
   graue Textfarbe der Wirtsseite (gemessen rgb(93,93,93)) in den roten Button
   und auf die Lightbox-Bedienelemente. Ein Reset darf nie gegen eine
   Komponentenregel gewinnen. */
:where(.ob-root) button {
    font: inherit;
    color: inherit;
}

/* ---------- Container ---------- */

.osttirol-booking {
    max-width: var(--max-w-xl);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

@media (min-width: 768px) {
    .osttirol-booking {
        padding: var(--space-10) var(--space-6);
    }
}

/* ---------- Button ---------- */

.osttirol-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--fs-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.osttirol-button:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-button--primary {
    background: var(--c-primary);
    color: #fff;
}

.osttirol-button--primary:hover {
    background: var(--c-primary-hover);
}

.osttirol-button--secondary {
    background: transparent;
    color: var(--c-primary);
    border-color: var(--c-border);
}

.osttirol-button--secondary:hover {
    background: var(--c-bg-alt);
    border-color: var(--c-primary);
}

/* ---------- Layout: sidebar + main ---------- */

.osttirol-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    /* Moderner Content-Container: zentriert, max-width, großzügiges Seiten- und
       vertikales Padding (vorher randlos über die volle Viewport-Breite). */
    max-width: var(--max-w-xl);
    margin: 0 auto;
    padding: var(--space-8) clamp(var(--space-4), 4vw, var(--space-12));
}

@media (min-width: 1024px) {
    .osttirol-layout {
        grid-template-columns: 300px 1fr;
        gap: var(--space-10);
        padding-top: var(--space-10);
        padding-bottom: var(--space-12);
    }
}

/* ---------- Filter sidebar ---------- */

.osttirol-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--c-bg-alt);
    border-radius: var(--radius-lg);
    align-self: start;
}

.osttirol-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.osttirol-filters__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin: 0;
}

.osttirol-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.osttirol-filters__label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.osttirol-filters__select,
.osttirol-filters__input {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    color: var(--c-text);
}

.osttirol-filters__select:focus-visible,
.osttirol-filters__input:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-primary);
}

.osttirol-filters__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.osttirol-filters__amenity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--c-text);
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.osttirol-filters__amenity:hover {
    border-color: var(--c-primary);
}

.osttirol-filters__amenity--active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

.osttirol-filters__amenity input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Banner / states ---------- */

.osttirol-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
    border: 1px solid var(--c-warning-border);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.osttirol-banner--error {
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border-color: var(--c-error-border);
}

.osttirol-empty {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--c-text-muted);
    background: var(--c-bg-alt);
    border-radius: var(--radius-lg);
}

.osttirol-loading {
    padding: var(--space-6);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- Wishlist toggle on card ---------- */

.osttirol-card__image {
    position: relative;
}

.osttirol-wishlist {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    border-radius: 50%;
    color: var(--c-text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.osttirol-wishlist:hover {
    transform: scale(1.06);
}

.osttirol-wishlist--active {
    color: #c63b3b;
}

.osttirol-wishlist svg {
    width: 20px;
    height: 20px;
}

/* ---------- View toggle + map ---------- */

.osttirol-toolbar__view {
    display: inline-flex;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg);
}

.osttirol-view-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--c-border);
    padding: var(--space-2) var(--space-4);
    min-height: 44px; /* Touch-Target ≥ 44px (Audit #7 B-N) */
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.osttirol-view-toggle:last-child {
    border-right: 0;
}

.osttirol-view-toggle:hover {
    background: var(--c-bg-alt);
}

.osttirol-view-toggle--active {
    background: var(--c-primary);
    color: #fff;
}

.osttirol-view-toggle--split {
    display: none;
}

@media (min-width: 1024px) {
    .osttirol-view-toggle--split {
        display: inline-flex;
    }
}

.osttirol-result {
    display: grid;
    gap: var(--space-5);
}

.osttirol-result--list {
    grid-template-columns: 1fr;
}

.osttirol-result--list .osttirol-map-wrapper {
    display: none;
}

.osttirol-result--map {
    grid-template-columns: 1fr;
}

.osttirol-result--map .osttirol-card-grid {
    display: none;
}

.osttirol-result--split {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .osttirol-result--split {
        grid-template-columns: 1fr 1fr;
    }
    .osttirol-result--split .osttirol-card-grid {
        grid-template-columns: 1fr;
    }
}

.osttirol-map-wrapper {
    position: sticky;
    top: var(--space-4);
    align-self: start;
}

.osttirol-map {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg-alt);
    box-shadow: var(--shadow-card);
}

.osttirol-map__hint {
    position: absolute;
    top: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 12px;
    background: var(--c-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-map-pin {
    appearance: none;
    border: 2px solid #fff;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 4px 10px;
    min-height: 28px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: 0 2px 8px hsl(var(--shadow-color) / 0.3);
    transition: transform var(--duration-fast) var(--ease-out);
}

.osttirol-map-pin:hover,
.osttirol-map-pin:focus-visible {
    transform: scale(1.1);
    z-index: 2;
}

.osttirol-map-pin__price::before {
    content: "ab ";
    font-weight: 400;
    opacity: 0.85;
}

.maplibregl-popup-content {
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-sm) !important;
    box-shadow: var(--shadow-hover) !important;
}

.maplibregl-popup-content a {
    color: var(--c-primary);
}

/* ---------- Detail page ---------- */

.osttirol-detail {
    max-width: var(--max-w-xl);
    margin: 0 auto;
    padding: var(--space-8) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-12);
}

@media (min-width: 1024px) {
    .osttirol-detail {
        padding-top: var(--space-10);
    }
}

.osttirol-breadcrumb {
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
}

.osttirol-breadcrumb a {
    color: var(--c-text-muted);
    text-decoration: none;
}

.osttirol-breadcrumb a:hover,
.osttirol-breadcrumb a:focus-visible {
    color: var(--c-primary);
    text-decoration: underline;
}

.osttirol-detail__header {
    margin-bottom: var(--space-6);
}

.osttirol-detail__eyebrow {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2);
}

.osttirol-detail__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3);
}

.osttirol-detail__stars {
    margin: 0;
    color: var(--c-accent-text);
    font-size: var(--fs-xl);
    letter-spacing: 4px;
}

.osttirol-detail__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
    .osttirol-detail__layout {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-8);
    }
}

.osttirol-detail__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: var(--shadow-card);
}

.osttirol-detail__address {
    margin: var(--space-3) 0 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-detail__booking {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-self: start;
    position: sticky;
    top: var(--space-4);
}

.osttirol-detail__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--c-primary);
}

.osttirol-detail__price-label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-detail__price-value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
}

.osttirol-detail__price-suffix {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-detail__rating {
    margin: 0;
    color: var(--c-text);
    font-size: var(--fs-sm);
}

.osttirol-detail__rating strong {
    font-size: var(--fs-lg);
    color: var(--c-primary);
}

.osttirol-detail__cta {
    width: 100%;
}

.osttirol-detail__cart-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh-base);
}

.osttirol-tosc5-widget {
    display: block;
    margin: var(--space-3) 0;
    padding: var(--space-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.osttirol-tosc5-widget__target {
    min-height: 240px;
}

.osttirol-tosc5-placeholder {
    margin: var(--space-3) 0;
    padding: var(--space-4);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-bg-alt);
    color: var(--c-text);
    font-size: var(--fs-sm);
}

.osttirol-tosc5-placeholder strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--c-primary);
}

.osttirol-tosc5-placeholder code {
    background: var(--c-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.osttirol-booking-status {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.osttirol-booking-status--success {
    background: var(--c-success-soft);
    color: var(--c-success-text);
    border: 1px solid var(--c-success-border);
}

.osttirol-booking-status--error {
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
}

.osttirol-detail__body {
    max-width: 65ch;
}

.osttirol-detail__body h2 {
    font-family: var(--font-display);
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
}

.osttirol-detail__amenities {
    columns: 2;
    gap: var(--space-6);
    list-style: none;
    padding: 0;
    margin: 0;
}

.osttirol-detail__amenities li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--c-border);
    break-inside: avoid;
}

/* ---------- Print ---------- */

@media print {
    .osttirol-card,
    .osttirol-button,
    .osttirol-filter-chip {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .osttirol-card__image,
    .osttirol-button,
    .osttirol-filter-chip__remove {
        display: none !important;
    }

    .osttirol-booking,
    .osttirol-card,
    .osttirol-card__body {
        font-family: Georgia, 'Times New Roman', serif;
        color: #000;
    }

    .osttirol-card__description {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
}

/* =====================================================================
   Phase 2: Such-Bar, Filter-Sidebar mit Counts, Cards mit Badges/Labels
   ===================================================================== */

/* ---------- Filter-Sidebar mit Counts ---------- */

.osttirol-filters__list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    max-height: 320px;
    overflow-y: auto;
}

.osttirol-filters__list li {
    margin: 0;
}

.osttirol-filters__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: 6px;
    cursor: pointer;
    min-height: 44px;
    font-size: var(--fs-sm);
    transition: background 0.15s;
}

.osttirol-filters__option:hover {
    background: var(--c-bg-alt);
}

.osttirol-filters__option--active {
    background: rgba(30, 77, 58, 0.08);
    font-weight: 600;
}

.osttirol-filters__option input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--c-primary);
}

.osttirol-filters__option-label {
    flex: 1;
    line-height: 1.3;
}

.osttirol-filters__option-count {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.osttirol-filters__toggle {
    margin-top: var(--space-2);
    background: none;
    border: 0;
    color: var(--c-primary);
    font-size: var(--fs-sm);
    cursor: pointer;
    text-decoration: underline;
    padding: var(--space-1) 0;
    min-height: 44px;
}

.osttirol-filters__reset {
    min-height: 36px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
}

/* ---------- Ghost button variant for "Suche leeren" ---------- */

.osttirol-button--ghost {
    background: transparent;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    min-height: 44px;
}

.osttirol-button--ghost:hover {
    background: var(--c-bg-alt);
}

/* ===================================================================== */
/* A4 — Generische Filtersektionen (param/tokenField) + a11y             */
/* ===================================================================== */

/* Alpine: Elemente bis zur Hydration verstecken (kein Flash). */
[x-cloak] {
    display: none !important;
}

/* fieldset/legend als Filtergruppe: native Borders entfernen. */
fieldset.osttirol-filters__group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0; /* verhindert flex/grid-Overflow durch fieldset-Eigenheit */
}

fieldset.osttirol-filters__group > legend.osttirol-filters__label {
    padding: 0;
    margin-bottom: var(--space-2);
}

/* Touch-Target: Chips auf min. 44px Hoehe (a11y). */
.osttirol-filters__amenity {
    min-height: 44px;
}

/* Count-Badge neben dem Label (nur sichtbar wenn count>0, via x-show). */
.osttirol-filters__count {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.osttirol-filters__amenity--active .osttirol-filters__count {
    color: rgba(255, 255, 255, 0.85);
}

/* Keyboard-Fokus auf den Chip-Buttons. */
.osttirol-filters__amenity:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-primary);
}

/* Reset-Button: Touch-Target ≥44px (a11y, ueberschreibt 36px-Altregel). */
.osttirol-filters__reset {
    min-height: 44px !important;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    color: var(--c-text);
    font: inherit;
}

.osttirol-filters__reset:hover {
    border-color: var(--c-primary);
}

.osttirol-filters__reset:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Preis-Range: volle Breite, klar fokussierbar. */
.osttirol-filters__range {
    width: 100%;
    accent-color: var(--c-primary);
    min-height: 44px;
}

.osttirol-filters__range:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Gruppierte Ausstattung (criteriaGroups): scrollbar bei langen Listen,
   kein overflow:hidden — Content darf nie abgeschnitten werden. */
.osttirol-filters__group--collapsible .osttirol-filters__amenities {
    max-height: 260px;
    overflow-y: auto;
    padding-right: var(--space-1);
}

/* Ergebnisspalte + Status. */
.osttirol-results {
    min-width: 0; /* Grid-Child mit Cards: Text-Overflow zaehmen */
}

.osttirol-list-loading {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-error {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
}

/* Pagination-Footer: Buttons + Info nebeneinander. */
.osttirol-list-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

/* =====================================================================
   Increment 2/3: Detailseite-Buchungsflow (Zimmer → Tarif → Warenkorb)
   ===================================================================== */

.osttirol-tariff__cart:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* ---------- Detail: Zimmer-Ergebnisse (volle Breite, Kitzbühel-Optik) ---------- */

.osttirol-detail-rooms-section {
    margin: var(--space-10) 0 var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--c-border);
}

.osttirol-detail-rooms-section__head {
    margin-bottom: var(--space-6);
}

.osttirol-detail-rooms-section__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    margin: 0 0 var(--space-1);
}

.osttirol-detail-rooms-section__sub {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-rooms {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: 0;
}

.osttirol-rooms__empty {
    margin: 0;
}

/* Leer-Zustand: "keine Zimmer" + Kalender-CTA gebuendelt (Stefan 2026-06-15). */
.osttirol-rooms__empty-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--c-surface, #f7f5f1);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.osttirol-rooms__empty-cta {
    margin: 0;
}

.osttirol-room {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
    box-shadow: var(--shadow-card);
    /* KEIN overflow:hidden — sonst schneidet die Karte das nach unten öffnende
       Preis-Popover ab (LL-029). Die Bildspalte rundet ihre Ecken selbst
       (.osttirol-room__slider border-radius unten). */
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.osttirol-room:hover {
    box-shadow: var(--shadow-hover);
}

/* Ab Tablet: Galerie links (fixe Medien-Spalte), Inhalt rechts (flex).
   align-items:flex-start — die Bildspalte darf NICHT mitwachsen, wenn der
   Inhalt (z. B. aufgeklappte Ausstattung) die Karte höher macht. */
@media (min-width: 768px) {
    .osttirol-room {
        display: flex;
        align-items: flex-start;
    }
}

.osttirol-room__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    flex: 1 1 auto;
}

.osttirol-room__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.osttirol-room__name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    margin: 0;
    flex: 1 1 60%;
    min-width: 0;
}

.osttirol-room__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    flex-basis: 100%;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

/* Icon-Faktenzeile der Zimmerkarte (#15, Kitzbühel-Parität). */
.osttirol-room__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-room__fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.osttirol-room__fact-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.osttirol-tariffs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

/* Mehrere Tarife (Storno-Varianten/Verpflegung) nebeneinander, wenn Platz da ist. */
@media (min-width: 560px) {
    .osttirol-tariffs {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.osttirol-tariff {
    position: relative; /* Anker fuer das Preis-Detail-Popover */
    /* min-width:0 + max-width:100%: das Grid-Item darf unter seine Min-Content-
       Breite schrumpfen — sonst weitet die nicht umbrechende Preiszeile den
       1fr-Track ueber den Viewport hinaus (horizontales Scrollen auf Mobile). */
    min-width: 0;
    max-width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-alt);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.osttirol-tariff__head {
    display: flex;
    /* Preisblock darf auf schmalen Viewports unter den Tarifnamen umbrechen. */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.osttirol-tariff__name {
    font-weight: 600;
    min-width: 0; /* darf im Flex-Kontext schrumpfen statt zu ueberlaufen */
}

.osttirol-tariff__price-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    /* Umbruch ZWISCHEN den Preis-Segmenten erlauben (statt white-space:nowrap
       auf dem ganzen Block); die Segmente selbst bleiben je einzeln nowrap. */
    flex-wrap: wrap;
    min-width: 0;
}

.osttirol-tariff__price {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-primary);
    white-space: nowrap;
}

/* Durchgestrichener Originalpreis (bei Reduktion). */
.osttirol-tariff__strike {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-decoration: line-through;
    white-space: nowrap; /* Preisstring nie mittendrin brechen */
}

/* ⓘ-Toggle fuer die Preisaufschluesselung.
   Visuell 22×22 px; Touch-Target mind. 44×44 px via Padding + neg. Margin
   (kompensiert Layout-Drift im inline-flex price-wrap). */
.osttirol-tariff__price-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 11px;
    margin: -11px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.osttirol-tariff__price-info:hover,
.osttirol-tariff__price-info[aria-expanded="true"] {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

.osttirol-tariff__price-info:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- Preis-Detail-Popover ---- */
.osttirol-price-detail {
    position: absolute;
    top: calc(var(--space-3) + 25.6px);
    right: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-dropdown);
    max-width: 340px;
    margin-left: auto;
    padding: var(--space-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    font-size: var(--fs-sm);
}

.osttirol-price-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--c-border);
}

.osttirol-price-detail__title {
    font-weight: 600;
}

.osttirol-price-detail__close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.osttirol-price-detail__close:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.osttirol-price-detail__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.osttirol-price-detail__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--c-text);
}

.osttirol-price-detail__label {
    color: var(--c-text-muted);
}

.osttirol-price-detail__value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.osttirol-price-detail__total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-weight: 700;
    color: var(--c-primary);
}

.osttirol-price-detail__note {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* B1: Stornobedingung im Popover */
.osttirol-price-detail__cancellation {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-price-detail__cancellation-icon {
    flex-shrink: 0;
    font-weight: 700;
}

.osttirol-price-detail__cancellation.is-free {
    color: var(--c-success);
}

.osttirol-price-detail__cancellation.is-strict {
    color: var(--c-primary);
}

.osttirol-price-detail__cancellation.is-nonrefundable {
    color: var(--c-error);
    font-weight: 600;
}

/* B1: Sonderpreis-Name (z.B. "Frühbucher") */
.osttirol-price-detail__special-price {
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-success);
}

/* B1: Zahlung & Garantie-Block */
.osttirol-price-detail__payment {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text);
}

.osttirol-price-detail__payment-title {
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 var(--space-1);
}

.osttirol-price-detail__payment-row {
    margin: var(--space-1) 0 0;
    color: var(--c-text-muted);
}

.osttirol-price-detail__payment-row strong {
    color: var(--c-text);
}

@media (min-width: 560px) {
    /* In der Grid-Spalte ist der Tarif schmal — Popover etwas breiter zeigen. */
    .osttirol-price-detail {
        left: auto;
        width: max(100%, 300px);
    }
}

.osttirol-tariff__occupancy {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-tariff__meal {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.osttirol-tariff__meal label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.osttirol-tariff__meal select {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
}

.osttirol-tariff__meal-label {
    margin: 0;
    font-size: var(--fs-sm);
}

.osttirol-tariff__cancellation {
    align-self: flex-start;
    margin: 0;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.osttirol-tariff__cancellation.is-free {
    color: var(--c-success-text);
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
}

.osttirol-tariff__cancellation.is-free::before {
    content: "\2713\00a0"; /* ✓ */
}

.osttirol-tariff__cancellation.is-strict {
    color: var(--c-text-muted);
    background: var(--c-bg-alt);
}

/* A (#15): "Nicht stornierbar" als rote Pille (deutlich vom Brand-CTA getrennt). */
.osttirol-tariff__cancellation.is-nonrefundable {
    color: #fff;
    background: var(--c-error);
}

.osttirol-tariff__cancellation.is-nonrefundable::before {
    content: "\2717\00a0"; /* ✗ */
}

/* A (#15): generische Tarif-Badge-Pille (z. B. "Keine Kreditkarte erforderlich"). */
.osttirol-tariff__badge {
    align-self: flex-start;
    margin: 0;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.osttirol-tariff__badge--nocc {
    color: var(--c-text-muted);
    background: var(--c-bg-alt);
}

.osttirol-tariff__badge--nocc::before {
    content: "\1f4b3\00a0"; /* 💳 */
}

/* B (#15): Preis pro Nacht — dezent neben dem Gesamtpreis. */
.osttirol-tariff__per-night {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    white-space: nowrap;
}

/* C (#15): "Top Deal"-Badge am guenstigsten Tarif. */
.osttirol-tariff__topdeal {
    align-self: flex-start;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--c-warning);
    text-transform: uppercase;
}

/* A (#15): abgestufte Stornoregeln im Preis-Popover. */
.osttirol-price-detail__cancellation-rules {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
    list-style: disc;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-price-detail__cancellation-rules li {
    margin: 0;
}

/* #15-D: Der Warenkorb-Zähler-Chip (.osttirol-cart-count) wurde entfernt —
   der echte Stand kommt aus dem globalen DW5-Warenkorb-Icon. */

/* D (#15): Post-Add-Modal-Text (Modal-Chrome erbt von .osttirol-summary-modal). */
.osttirol-postadd-modal__text {
    margin: 0 0 var(--space-2);
    color: var(--c-text);
}

/* Punkt 14: Begleitzeile unter dem Titel (Zeitraum, Naechte, Belegung). */
.osttirol-postadd-modal__meta {
    margin: 0 0 var(--space-4);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-tariff__cart {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.osttirol-tariff__cart:hover:not(:disabled) {
    background: var(--c-primary-hover);
}

.osttirol-tariff__cart:disabled {
    background: var(--c-border);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

/* ---------- B2: Mehrfach-Belegung (priceOptions) ---------- */
.osttirol-price-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.osttirol-price-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--c-border);
}

.osttirol-price-option:first-child {
    border-top: 0;
    padding-top: var(--space-1);
}

.osttirol-price-option__guests {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
}

.osttirol-price-option__label {
    font-weight: 600;
}

.osttirol-price-option__icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.osttirol-occ-icon {
    color: var(--c-text-muted);
}

.osttirol-occ-icon--child {
    opacity: 0.75;
}

.osttirol-occ-overflow {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-price-option__price-wrap {
    position: relative; /* Anker fuer das per-Option-Popover */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.osttirol-price-option__price {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-primary);
}

.osttirol-price-option__cart {
    flex: 0 0 auto;
}

/* Popover je Belegungs-Option: an die schmale price-wrap gebunden — rechts
   ausrichten, feste Mindestbreite, oberhalb des Folge-Contents (z-dropdown). */
.osttirol-price-option__price-wrap .osttirol-price-detail {
    top: calc(100% + var(--space-1));
    right: 0;
    left: auto;
    width: min(320px, 90vw);
    max-width: 90vw;
}

@media (max-width: 559px) {
    /* 390er: Preis + Button unter das Belegungs-Label, Button volle Breite. */
    .osttirol-price-option__cart {
        flex: 1 1 100%;
    }
}

/* ---- Gastgeber & Kontakt ---- */
.osttirol-detail-host__name {
    font-weight: 700;
    margin: 0 0 var(--space-1, 4px);
}
.osttirol-detail-host__address {
    font-style: normal;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-2, 8px);
    line-height: 1.4;
}
.osttirol-detail-host__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2, 8px);
    font-size: 14px;
}

/* Kontaktzeile mit Icon (#18, wie Kitzbühel). */
.osttirol-detail-host__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
}

/* Kontaktlinks (tel/mailto/website) im Marken-Rot statt Browser-Default-Blau. */
.osttirol-detail-host__contact-item a {
    color: var(--c-primary);
    text-decoration: none;
}

.osttirol-detail-host__contact-item a:hover,
.osttirol-detail-host__contact-item a:focus-visible {
    color: var(--c-primary-hover);
    text-decoration: underline;
}

.osttirol-detail-host__contact-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--c-primary);
}

.osttirol-detail-host__contact-icon svg {
    width: 17px;
    height: 17px;
}

.osttirol-detail-host__contact-item .osttirol-detail-host__address {
    margin: 0;
    font-style: normal;
    line-height: var(--lh-base);
}

/* ---- Links zur Unterkunft ----
   Eigener Block seit dem Kundenpunkt vom 10.08.2026: vorher standen dieselben
   Weblinks zusaetzlich in der Kontaktliste, also zweimal auf der Seite. */
.osttirol-detail-links {
    margin-top: var(--space-6, 24px);
}
.osttirol-detail-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2, 8px);
    font-size: 14px;
}
.osttirol-detail-links__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
}
.osttirol-detail-links__item a {
    color: var(--c-primary);
    text-decoration: none;
}
.osttirol-detail-links__item a:hover,
.osttirol-detail-links__item a:focus-visible {
    color: var(--c-primary-hover);
    text-decoration: underline;
}

/* ---- Anfrage-Formular ---- */
.osttirol-detail-enquiry {
    margin-top: var(--space-6, 24px);
}
.osttirol-detail-enquiry__intro {
    color: var(--c-text-muted);
    font-size: 14px;
    margin: 0 0 var(--space-3, 12px);
}
.osttirol-detail-enquiry__success {
    background: var(--c-success-soft);
    color: var(--c-success-text);
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
}
.osttirol-enquiry-form {
    display: grid;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}
/* Reisedaten + Belegung der Anfrage (#14), aus der Suche vorbelegt. */
.osttirol-enquiry-form__travel {
    margin: 0;
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md, 8px);
    background: var(--c-bg-alt);
    display: grid;
    gap: var(--space-3, 12px);
}
.osttirol-enquiry-form__travel legend {
    padding: 0 var(--space-2, 8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
}
.osttirol-enquiry-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3, 12px);
}
.osttirol-enquiry-form__field {
    display: grid;
    gap: var(--space-1, 4px);
    font-size: 13px;
    font-weight: 600;
}
.osttirol-enquiry-form__field input,
.osttirol-enquiry-form__field textarea {
    font: inherit;
    font-weight: 400;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md, 8px);
    width: 100%;
    box-sizing: border-box;
}
.osttirol-enquiry-form__field input.is-error,
.osttirol-enquiry-form__field textarea.is-error,
.osttirol-enquiry-form__consent input.is-error {
    border-color: var(--c-error);
    outline: 2px solid color-mix(in srgb, var(--c-error) 15%, transparent);
}
.osttirol-enquiry-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2, 8px);
    align-items: start;
    font-size: 13px;
    line-height: 1.4;
}
.osttirol-enquiry-form__consent input {
    margin-top: 0.2em;
    min-width: 18px;
    min-height: 18px;
}
.osttirol-enquiry-form__error {
    color: var(--c-error);
    font-size: 13px;
    margin: 0;
}
.osttirol-enquiry-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Nachhaltigkeit ---- */
.osttirol-detail-sustainability {
    margin: var(--space-5, 20px) 0;
    padding: var(--space-4, 16px);
    border-radius: var(--radius-md, 8px);
    background: var(--c-success-soft);
    border: 1px solid var(--c-success-border);
}
.osttirol-detail-sustainability__title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0 0 var(--space-3, 12px);
    font-size: 16.8px;
    color: var(--c-success-text);
}
.osttirol-detail-sustainability__leaf {
    font-size: 1.2em;
    line-height: 1;
}
.osttirol-sustainability-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.osttirol-sustainability-item {
    background: #fff;
    border: 1px solid var(--c-success-border);
    color: var(--c-success-text);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* =====================================================================
   Kitzbühel-Parität (Layout 1:1, Branding osttirol)
   ---------------------------------------------------------------------
   Struktur/Anatomie der fd-*-Komponenten von kitzbuehel.com übernommen,
   Farben/Fonts/Radius bleiben osttirol (tokens.css). Lokale Custom-Props
   für Sterne-Gold und CTA sind hier (nicht in tokens.css) definiert, da
   tokens.css außerhalb des Scopes liegt — sie leiten sich aus bestehenden
   Tokens ab und sind dark-mode-/AA-bewusst gewählt.
   ===================================================================== */

.osttirol-accommodation-list,
.osttirol-accommodation-detail {
    /* Sterne-Gold (warm, AA gegen Card-BG); CTA = osttirol-Accent-Text-Ton
       (kein Kitzbühel-Rot — Branding osttirol). */
    --c-star: #e0a106;
    --c-cta: var(--c-primary);
    --c-cta-hover: var(--c-primary-hover);
}

/* ---------- Liste: Card-Anatomie ---------- */

.osttirol-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.osttirol-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt);
    overflow: hidden;
}

.osttirol-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.osttirol-card:hover .osttirol-card-image img,
.osttirol-card:focus-within .osttirol-card-image img {
    transform: scale(1.04);
}

.osttirol-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    /* min-height statt height: dynamischer Content darf wachsen. */
    flex: 1;
    min-height: 0;
}

.osttirol-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    margin: 0;
    line-height: var(--lh-tight);
}

.osttirol-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-card-meta .osttirol-category::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--c-border);
}

.osttirol-card-summary {
    margin: 0;
    color: var(--c-text);
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* „ab"-Preis prominent (Kitzbühel-Anatomie: Wert groß + Einheit klein). */
.osttirol-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: auto 0 0;
    padding-top: var(--space-2);
}

.osttirol-card-price__prefix {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-card-price__value {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--c-primary);
}

.osttirol-card-price__suffix {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* Rating-Pill (TrustYou) als Box + Badge + Count. */
.osttirol-card-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-sm);
}

.osttirol-rating-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 28px;
    padding: 0 var(--space-2);
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.osttirol-rating-badge {
    font-weight: 600;
    color: var(--c-text);
}

.osttirol-rating-count {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

/* Sterne als gestylte Icon-Reihe (Goldton), aria-label bleibt am Container. */
.osttirol-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--c-star);
    line-height: 1;
    letter-spacing: 0;
}

.osttirol-stars--lg {
    font-size: var(--fs-xl);
}

.osttirol-stars__star {
    color: var(--c-star);
}

/* ---------- Filter: Mobile Off-Canvas-Drawer ---------- */

.osttirol-filters-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.osttirol-filters-toggle:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-filters-overlay {
    display: none;
}

.osttirol-filters__close,
.osttirol-filters__apply {
    display: none;
}

/* Mobil: Sidebar wird zum Off-Canvas-Drawer. */
@media (max-width: 1023px) {
    .osttirol-filters-toggle {
        display: inline-flex;
    }

    .osttirol-filters {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 360px);
        max-width: 100%;
        z-index: var(--z-modal);
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--duration-base) var(--ease-out);
        box-shadow: var(--shadow-modal);
    }

    .osttirol-filters--open {
        transform: translateX(0);
    }

    .osttirol-filters-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        display: block;
        background: rgba(15, 15, 15, 0.5);
    }

    .osttirol-filters__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border: 0;
        border-radius: 50%;
        background: var(--c-bg);
        color: var(--c-text);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .osttirol-filters__apply {
        display: inline-flex;
        position: sticky;
        bottom: 0;
        margin-top: var(--space-4);
    }
}

@media (min-width: 1024px) {
    /* Desktop: Drawer-spezifische States nie aktiv. */
    .osttirol-filters {
        transform: none;
    }
}

/* ---------- Detail: einspaltiges Flow-Layout (Stefan-Spec 2026-06-01) ----------
   Reihenfolge: Name → Galerie → Einleitung → Nachhaltigkeit → Verfügbarkeit
   → Zimmer → Ausstattung → Karte → TrustYou → Anfrage. Alle Sektionen stacken
   in einer Spalte mit gleichmäßigem Abstand. */

.osttirol-detail--flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* Galerie sitzt enger unter dem Titel. */
.osttirol-detail--flow > .osttirol-detail-gallery {
    margin: 0;
}

/* Verfügbarkeitsabfrage als hervorgehobene Such-Karte. */
.osttirol-detail-booking {
    margin: 0;
    padding: var(--space-6);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.osttirol-detail-booking > h2 {
    margin-top: 0;
}

/* Anzahl-Zimmer-Zeile im Belegungs-Panel optisch absetzen. */
.osttirol-room-config__roomcount {
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-3);
}

/* TrustYou- und Kontakt-Sektion: dezenter Trenner oben. */
.osttirol-detail-trustyou-section,
.osttirol-detail-contact {
    padding-top: var(--space-8);
    border-top: 1px solid var(--c-border);
}

.osttirol-detail-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.osttirol-detail-price {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--c-primary);
    margin: 0 0 var(--space-3);
}

.osttirol-detail-title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3);
}

.osttirol-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-detail-breadcrumb {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
}

/* Badges unter dem Unterkunftsnamen (#16). */
.osttirol-detail-badges {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.osttirol-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}

.osttirol-detail-badge__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.osttirol-detail-badge__icon svg {
    width: 15px;
    height: 15px;
}

/* „Kostenlos stornierbar" = grün hervorgehoben. */
.osttirol-detail-badge--cancel {
    background: #e7f3ec;
    border-color: #cfe7d8;
    color: #2d7a3e;
}

/* „Angebot" = Marken-Rot-Akzent. */
.osttirol-detail-badge--offer {
    background: #fbe9ea;
    border-color: #f3ccce;
    color: var(--c-primary);
}

.osttirol-detail-breadcrumb a {
    color: var(--c-text-muted);
    text-decoration: none;
}

.osttirol-detail-breadcrumb a:hover,
.osttirol-detail-breadcrumb a:focus-visible {
    color: var(--c-primary);
    text-decoration: underline;
}

.osttirol-detail-lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    color: var(--c-text);
    margin: 0 0 var(--space-4);
}

.osttirol-detail-description {
    max-width: 70ch;
    line-height: var(--lh-base);
}


.osttirol-cta-hint {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ---------- Detail: Galerie + Thumbs ---------- */

.osttirol-detail-gallery {
    margin: 0 0 var(--space-8);
}

.osttirol-detail-gallery--ssr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2);
}

.osttirol-detail-gallery__main {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--c-bg-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
}

.osttirol-detail-gallery__main-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.osttirol-detail-gallery__zoom {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-text);
    font-size: 20px;
    box-shadow: var(--shadow-card);
}

.osttirol-detail-gallery__main:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-detail-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.osttirol-detail-gallery__thumb {
    position: relative;
    width: 96px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg-alt);
    cursor: pointer;
}

.osttirol-detail-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.osttirol-detail-gallery__thumb--active {
    border-color: var(--c-primary);
}

.osttirol-detail-gallery__thumb:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-detail-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 15, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-base);
}

/* ---------- Detail: Lightbox ---------- */

.osttirol-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.osttirol-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.86);
}

.osttirol-lightbox__stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osttirol-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
}

/* Bedienelemente der Lightbox. Abnahme 03.08.2026 (Stefan: „die Slider-Pfeile
   und das X sind sehr schlecht zu sehen"): 15% Weiss auf einem hellen Foto ist
   praktisch unsichtbar - jetzt dunkle Flaeche mit weissem Glyph, das traegt auf
   hellen und dunklen Bildern. */
.osttirol-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 25.6px;
    line-height: 1;
    cursor: pointer;
}

.osttirol-lightbox__close:hover {
    background: var(--c-primary);
}

.osttirol-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.osttirol-lightbox__nav:hover {
    background: var(--c-primary);
}

.osttirol-lightbox__nav--prev {
    left: -64px;
}

.osttirol-lightbox__nav--next {
    right: -64px;
}

.osttirol-lightbox__close:focus-visible,
.osttirol-lightbox__nav:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.osttirol-lightbox__counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
}

@media (max-width: 640px) {
    .osttirol-lightbox__nav--prev {
        left: var(--space-2);
    }
    .osttirol-lightbox__nav--next {
        right: var(--space-2);
    }
}

/* ---------- Detail: Lage-Karte ---------- */

.osttirol-detail-map-card {
    margin: var(--space-8) 0 0;
}

.osttirol-detail-map {
    width: 100%;
    height: 320px;
    min-height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg-alt);
    box-shadow: var(--shadow-card);
}

/* Pin der Detail-Karte. Seit der Abnahme 03.08.2026 ein <button> (er oeffnet
   die Standort-Bubble) - deshalb padding/appearance explizit zuruecksetzen,
   sonst zeichnet der Browser seinen eigenen Knopf darum. */
.osttirol-detail-map__pin {
    display: block;
    width: 22px;
    height: 22px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-radius: 50%;
    background: var(--c-marker-accommodations);
    border: 3px solid #fff;
    box-shadow: var(--shadow-card);
}

.osttirol-detail-map__error {
    margin: var(--space-2) 0 0;
    color: var(--c-error);
    font-size: var(--fs-sm);
}

.osttirol-detail-map__route {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
}

.osttirol-detail-map__route a {
    color: var(--c-primary);
    font-weight: 500;
}

/* ---------- Detail: Adresse / Check-in-out ---------- */

.osttirol-detail-address,
.osttirol-detail-checktimes {
    padding: var(--space-4);
    background: var(--c-bg-alt);
    border-radius: var(--radius-md);
}

.osttirol-detail-address h2,
.osttirol-detail-checktimes h2 {
    font-size: var(--fs-base);
    margin: 0 0 var(--space-2);
}

.osttirol-detail-address p,
.osttirol-detail-checktimes p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* Anreise & Check-in (#17). */
.osttirol-checktimes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-sm);
}

.osttirol-checktimes__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.osttirol-checktimes__icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--c-primary);
}

.osttirol-checktimes__notes {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-text);
}

.osttirol-checktimes__notes p {
    margin: 0 0 var(--space-1);
}

/* Feratel-Anreisetext beginnt oft mit einem fuehrenden <br> → unterdruecken. */
.osttirol-checktimes__notes br:first-child {
    display: none;
}

/* ---------- KI-Suchleiste (über der Sidebar, volle Breite) ---------- */

.osttirol-ai-search {
    /* In der 2-Spalten-Grid (.osttirol-layout) volle Breite über beiden Spalten. */
    grid-column: 1 / -1;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.osttirol-ai-search__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.osttirol-ai-search__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--c-text);
}

/* „KI"-Kennzeichnung an der Suchleiste (dezent, aber sichtbar). */
.osttirol-ai-search__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--c-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.osttirol-ai-search__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: stretch;
}

.osttirol-ai-search__input {
    flex: 1 1 280px;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
}

.osttirol-ai-search__input:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-primary);
}

.osttirol-ai-search__submit,
.osttirol-ai-search__recommend {
    flex: 0 0 auto;
}

.osttirol-ai-search__submit:disabled,
.osttirol-ai-search__recommend:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.osttirol-ai-search__hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh-base);
}

.osttirol-ai-search__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
    font-size: var(--fs-sm);
}

/* „verstanden als": entfernbare Chips. */
.osttirol-ai-search__understood {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.osttirol-ai-search__understood-label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-ai-search__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.osttirol-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    background: var(--c-bg);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-full);
    color: var(--c-text);
    font-size: var(--fs-sm);
}

.osttirol-ai-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 17.6px;
    line-height: 1;
    cursor: pointer;
}

.osttirol-ai-chip__remove:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.osttirol-ai-chip__remove:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* ---------- KI-Empfehlungs-Block (getrennt von der Liste, LL-012) ---------- */

.osttirol-ai-recommend {
    margin: 0 0 var(--space-6);
    padding: var(--space-5);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-lg);
}

.osttirol-ai-recommend__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.osttirol-ai-recommend__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
}

.osttirol-ai-recommend__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--c-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.osttirol-ai-recommend__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.osttirol-ai-recommend__close:hover {
    background: var(--c-bg);
    color: var(--c-text);
}

.osttirol-ai-recommend__close:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-ai-recommend__note {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh-base);
}

/* Empfehlungs-Cards: deutlich als KI-Auswahl erkennbar (Primary-Border). */
.osttirol-card--ai {
    border-color: var(--c-primary);
}

.osttirol-badge--ai {
    background: var(--c-primary);
}

/* aiReason je Card: kurzer Begruendungssatz, klar als KI-Text markiert. */
.osttirol-ai-reason {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(30, 77, 58, 0.06);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    font-style: italic;
}

.osttirol-ai-reason__icon {
    color: var(--c-primary);
    font-style: normal;
}

/* Empfehlungs-Grid darf auch eng nebeneinander stehen. */
.osttirol-ai-recommend__grid {
    gap: var(--space-5);
}

/* ---------- KI-Kurztext auf Standard-Cards (LL-012) ---------- */
/* Zeigt llmDescription + Badge nur wenn vorhanden (x-show). Kompakt,
   klar als KI-Inhalt erkennbar (Badge in Primärfarbe), kein Layout-Bruch. */
.osttirol-card-ki {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(181, 22, 33, 0.05); /* c-primary 5% */
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.osttirol-card-ki__badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.6;
    align-self: flex-start;
}

.osttirol-card-ki__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh-base);
}

@media (max-width: 767px) {
    .osttirol-ai-search__submit,
    .osttirol-ai-search__recommend {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Zeitraum-Kalender -> Resources/Public/Css/date-picker.css
   ==========================================================================
   Die Regeln fuer `.osttirol-cal-*` stehen seit 2026-08-05 in der geteilten
   Datei `date-picker.css`: den Kalender benutzen jetzt auch Veranstaltungen
   und Pauschalen (Stefan-Vorgabe: ueberall wie kitzbuehel.com/unterkuenfte).
   Sie hier stehenzulassen haette zwei Quellen fuer dieselben Klassen ergeben -
   die spaeter geladene gewinnt und niemand sieht, welche gilt (LL-117).
   Jede Vorlage, die den Kalender einsetzt, laedt `date-picker.css`.
   ========================================================================== */

/* ==========================================================================
   Preis-Slider
   ========================================================================== */

.osttirol-price-slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.osttirol-price-slider__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
}

.osttirol-price-slider__value {
    font-weight: 600;
    color: var(--c-primary);
}

.osttirol-price-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        to right,
        var(--c-primary) 0%,
        var(--c-primary) var(--range-fill, 100%),
        var(--c-border) var(--range-fill, 100%),
        var(--c-border) 100%
    );
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
}

.osttirol-price-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--c-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

.osttirol-price-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--c-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

.osttirol-price-slider input[type="range"]:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 4px;
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Room-Konfigurator
   ========================================================================== */

.osttirol-room-config {
    position: relative;
}

.osttirol-room-config__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-dropdown);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: var(--space-5);
    min-width: 280px;
    width: 320px;
}

/* Die frueher hier stehende Notbremse fuer <400px (Panel auf Viewport-Breite
   schrumpfen) ist entfallen: unter 768px ist das Panel ein Sheet von unten und
   damit ohnehin volle Breite - siehe Abschnitt „Handy-Sheets" am Dateiende. */

.osttirol-room-config__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--c-border);
}

.osttirol-room-config__row:last-child {
    border-bottom: none;
}

.osttirol-room-config__label {
    font-size: var(--fs-sm);
    font-weight: 500;
}

.osttirol-room-config__sublabel {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.osttirol-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-lg);
    font-weight: 700;
    cursor: pointer;
    color: var(--c-text);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    line-height: 1;
}

.osttirol-stepper__btn:hover:not(:disabled) {
    background: var(--c-bg);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.osttirol-stepper__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.osttirol-stepper__btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-stepper__value {
    font-size: var(--fs-base);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

/* Kinder-Alter-Eingaben */
.osttirol-children-ages {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

.osttirol-child-age {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.osttirol-child-age__label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    flex-shrink: 0;
    min-width: 60px;
}

.osttirol-child-age__input {
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-sm);
    width: 72px;
    text-align: center;
}

.osttirol-child-age__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    cursor: pointer;
    color: var(--c-text-muted);
    transition: color var(--duration-fast), border-color var(--duration-fast);
}

.osttirol-child-age__remove:hover {
    color: var(--c-error);
    border-color: var(--c-error);
}

.osttirol-child-age__remove:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-room-config__add-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-primary);
    cursor: pointer;
    transition: border-color var(--duration-fast);
    margin-top: var(--space-2);
}

.osttirol-room-config__add-child:hover {
    border-color: var(--c-primary);
    background: var(--c-bg-alt);
}

.osttirol-room-config__add-child:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Per-Zimmer-Belegung (swRooms) */
.osttirol-room-line {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--c-border);
}

.osttirol-room-line:last-of-type {
    border-bottom: none;
}

.osttirol-room-line__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.osttirol-room-line__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

.osttirol-room-line__remove {
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast), border-color var(--duration-fast);
}

.osttirol-room-line__remove:hover {
    color: var(--c-error);
    border-color: var(--c-error);
}

.osttirol-room-line__remove:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-room-config__add-room {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    width: 100%;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-primary);
    cursor: pointer;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
    margin-top: var(--space-3);
}

.osttirol-room-config__add-room:hover {
    border-color: var(--c-primary);
    background: var(--c-bg-alt);
}

.osttirol-room-config__add-room:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/*
 * Hinweis am Ende des Belegungs-Panels: die Gaestezahl filtert ohne Zeitraum nur
 * ueber die hinterlegte Kapazitaet (Abnahme-Punkt 4). Leiser Ton - eine Erklaerung,
 * keine Fehlermeldung.
 */
.osttirol-room-config__hint {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Occupancy-Kalender-Modal
   ========================================================================== */

.osttirol-occ-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.osttirol-occ-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.osttirol-occ-modal__dialog {
    position: relative;
    background: var(--c-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: var(--space-6);
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.osttirol-occ-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.osttirol-occ-modal__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0;
}

.osttirol-occ-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-lg);
    cursor: pointer;
    color: var(--c-text);
    flex-shrink: 0;
    transition: background-color var(--duration-fast);
}

.osttirol-occ-modal__close:hover { background: var(--c-border); }

.osttirol-occ-modal__close:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Navigation Prev/Next */
.osttirol-occ-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.osttirol-occ-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--c-text);
    transition: background-color var(--duration-fast);
}

.osttirol-occ-nav__btn:hover:not(:disabled) { background: var(--c-bg); border-color: var(--c-primary); }
.osttirol-occ-nav__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.osttirol-occ-nav__btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.osttirol-occ-nav__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-align: center;
}

/* Monats-Grid */
.osttirol-occ-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 500px) {
    .osttirol-occ-months {
        grid-template-columns: 1fr 1fr;
    }
}

.osttirol-occ-month__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    margin: 0 0 var(--space-3);
    color: var(--c-text);
}

.osttirol-occ-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.osttirol-occ__weekday {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    padding: 2px 0;
    color: var(--c-text-muted);
}

.osttirol-occ__day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.osttirol-occ__day--empty {
    background: transparent;
}

.osttirol-occ__day--past {
    background: transparent;
    color: var(--c-text-muted);
    opacity: 0.5;
}

.osttirol-occ__day--avail {
    background: var(--c-success);
    color: #fff;
}

.osttirol-occ__day--busy {
    background: var(--c-error);
    color: #fff;
}

/* Legende */
.osttirol-occ-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-occ-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.osttirol-occ-legend__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.osttirol-occ-legend__swatch--avail { background: var(--c-success); }
.osttirol-occ-legend__swatch--busy { background: var(--c-error); }

/* Status-Meldung im Modal */
.osttirol-occ-status {
    text-align: center;
    padding: var(--space-6) 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.osttirol-occ-status--error {
    color: var(--c-error);
}

/* Monatlich-Modus: zeige Verfuegbarkeit als grosses farbiges Rechteck statt Tagesraster */
.osttirol-occ-month--monthly-avail .osttirol-occ-month__title {
    color: var(--c-success);
}

.osttirol-occ-month--monthly-busy .osttirol-occ-month__title {
    color: var(--c-error);
}

/* ==========================================================================
   Search-Bar (Datepicker + Room-Config kombiniert)
   ========================================================================== */

.osttirol-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.osttirol-search-bar__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 160px;
    flex: 1 1 160px;
}

.osttirol-search-bar__label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.osttirol-search-bar__submit {
    flex-shrink: 0;
}

@media (max-width: 479px) {
    .osttirol-search-bar {
        flex-direction: column;
    }
    .osttirol-search-bar__field {
        width: 100%;
    }
}

/* ==========================================================================
   Occupancy-Calendar-Button (Detail-Seite)
   ========================================================================== */

.osttirol-occ-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--duration-fast);
}

.osttirol-occ-trigger:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.osttirol-occ-trigger:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}


/* ==========================================================================
   Zimmerbilder-Slider (G4)
   ========================================================================== */

.osttirol-room__gallery {
    margin-bottom: 0;
}

.osttirol-room__slider {
    position: relative;
    overflow: hidden;
    background: var(--c-bg-alt);
    /* Mobil: Bild oben → obere Ecken runden (Karte clippt nicht mehr). */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.osttirol-room__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Ab Tablet: Galerie als fixe linke Spalte mit fester Bildhöhe (4:3-nah).
   Feste Höhe statt 100% → das Bild bleibt ein sauberer Thumbnail oben links,
   egal wie hoch der Inhalt rechts wird (LL-029). */
@media (min-width: 768px) {
    .osttirol-room__gallery {
        flex: 0 0 300px;
        align-self: flex-start;
    }

    .osttirol-room__img {
        height: 225px;
        aspect-ratio: auto;
    }

    /* Desktop: Bild links → nur obere linke Ecke runden. */
    .osttirol-room__slider {
        border-radius: var(--radius-lg) 0 0 0;
    }
}

.osttirol-room__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--duration-fast);
}

.osttirol-room__nav:hover { background: rgba(0, 0, 0, 0.65); }
.osttirol-room__nav:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.osttirol-room__nav--prev { left: var(--space-2); }
.osttirol-room__nav--next { right: var(--space-2); }

.osttirol-room__counter {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    padding: 2px var(--space-2);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
}

/* Mindestaufenthalt-Hinweis (G6) */
.osttirol-tariff__minstay {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin: var(--space-1) 0;
}

.osttirol-tariff__minstay.is-violation {
    color: var(--c-error);
    font-weight: 600;
}

/* ---------- G5: Zimmer-Ausstattung (collapsible features block) ---------- */

.osttirol-room-features {
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-3);
}

.osttirol-room-features__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    text-align: left;
    gap: var(--space-2);
}

.osttirol-room-features__toggle:hover {
    color: var(--c-primary);
}

.osttirol-room-features__toggle:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.osttirol-room-features__chevron {
    display: inline-block;
    font-size: var(--fs-xl);
    line-height: 1;
    transition: transform 200ms var(--ease-out);
    /* Reduced motion: no animation */
    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}

.osttirol-room-features__chevron.is-open {
    transform: rotate(90deg);
}

.osttirol-room-features__panel {
    padding-bottom: var(--space-3);
}

.osttirol-room-features__groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4) var(--space-5);
}

.osttirol-room-features__group-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-2);
}

.osttirol-room-features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.osttirol-room-features__item {
    font-size: var(--fs-sm);
    color: var(--c-text);
    padding-left: var(--space-4);
    position: relative;
}

.osttirol-room-features__item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-size: var(--fs-xs);
    top: 0.1em;
}

/* Occupancy-Modal: Zusatz-Elemente (Subtitle, minStay, Fallback, past-Swatch) */
.osttirol-occ-modal__subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: var(--space-1) 0 0;
}

.osttirol-occ-minstay {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-accent-text);
    text-align: center;
    margin: 0;
}

.osttirol-occ-modefallback {
    font-size: var(--fs-xs);
    color: var(--c-warning);
    text-align: center;
    margin: 0;
}

.osttirol-occ-legend__swatch--past {
    background: var(--c-border);
    opacity: 0.6;
}

.osttirol-occ-trigger--room {
    font-size: var(--fs-xs);
    margin: var(--space-2) 0;
}

/* ==========================================================================
   Buchungsübersicht-Overlay (G7)
   ========================================================================== */

.osttirol-summary-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.osttirol-summary-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.osttirol-summary-modal__dialog {
    position: relative;
    background: var(--c-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: var(--space-6);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.osttirol-summary-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.osttirol-summary-modal__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0;
}

.osttirol-summary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.osttirol-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--c-border);
}

.osttirol-summary-row dt {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.osttirol-summary-row dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: right;
}

.osttirol-summary-occ {
    display: block;
}

.osttirol-summary-row--total {
    border-bottom: none;
    border-top: 2px solid var(--c-border);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.osttirol-summary-row--total dt,
.osttirol-summary-row--total dd {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
}

.osttirol-summary-modal__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.osttirol-summary-modal__actions .osttirol-button {
    min-height: 44px;
}

@media (max-width: 479px) {
    .osttirol-summary-modal__actions {
        flex-direction: column-reverse;
    }
    .osttirol-summary-modal__actions .osttirol-button {
        width: 100%;
    }
}

/* ============================================================================
   Clean-modern Politur (2026-06-02) — Osttirol-CI (rot/neutral).
   Einheitliche, moderne Sektions-Hierarchie auf der Detailseite + dezenter
   Page-Load-Reveal. Rein additiv, token-getrieben, prefers-reduced-motion safe.
   ============================================================================ */

/* Detail-Titel: groß, eng, Marken-Rot. */
.osttirol-detail-title {
    letter-spacing: -0.015em;
    color: var(--c-primary);
}

/* Einheitliche moderne Sektions-Überschriften mit kurzer roter Akzentlinie. */
.osttirol-detail-booking > h2,
.osttirol-detail-rooms-section__title,
.osttirol-detail-amenities > h2,
.osttirol-detail-map-card > h2,
.osttirol-detail-host > h2,
.osttirol-detail-address > h2,
.osttirol-detail-checktimes > h2,
.osttirol-detail-enquiry > h2 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--c-text);
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    position: relative;
}

.osttirol-detail-booking > h2::after,
.osttirol-detail-rooms-section__title::after,
.osttirol-detail-amenities > h2::after,
.osttirol-detail-map-card > h2::after,
.osttirol-detail-host > h2::after,
.osttirol-detail-enquiry > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--c-primary);
    border-radius: 2px;
}

/* Ausstattung: luftigere, modernere Gruppen-Karten statt dichter Listenwand. */
.osttirol-amenity-group {
    background: var(--c-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.osttirol-amenity-group__title {
    color: var(--c-primary);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-body);
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

.osttirol-amenity {
    border-bottom: 0;
    padding: var(--space-1) 0;
}

/* Such-Karte: ruhiger, moderner Rahmen. */
.osttirol-detail-booking {
    box-shadow: var(--shadow-card);
}

/* Zimmer-Karten + Tarif-Preis im Marken-Rot/Display-Font. */
.osttirol-room {
    border-color: var(--c-border);
}

.osttirol-tariff__price {
    font-size: var(--fs-lg);
    color: var(--c-primary);
}

/* Dezenter, gestaffelter Reveal der Detail-Sektionen beim Laden. */
@media (prefers-reduced-motion: no-preference) {
    .osttirol-detail--flow > header,
    .osttirol-detail--flow > section,
    .osttirol-detail--flow > div.osttirol-detail-description,
    .osttirol-detail--flow > p.osttirol-detail-lead {
        /* fill-mode `backwards` (NICHT `both`): hält nur den Start-Zustand vor dem
           Lauf. `both`/`forwards` ließ `transform: translateY(0)` dauerhaft kleben →
           jede Sektion wurde zum Stacking-Context → spätere Sektionen (Ausstattung)
           überdeckten das Kalender-/Belegungs-Overlay des Buchungs-Widgets.
           `backwards` revertiert nach dem Lauf auf den Basis-Style (transform:none),
           optisch identisch, aber ohne bleibenden Stacking-Context. */
        animation: osttirol-reveal var(--duration-slow) var(--ease-out) backwards;
    }

    .osttirol-detail--flow > .osttirol-detail-gallery { animation-delay: 60ms; }
    .osttirol-detail--flow > .osttirol-detail-description,
    .osttirol-detail--flow > .osttirol-detail-lead { animation-delay: 120ms; }
    .osttirol-detail--flow > .osttirol-detail-sustainability { animation-delay: 180ms; }
    .osttirol-detail--flow > .osttirol-detail-booking { animation-delay: 220ms; }
}

@keyframes osttirol-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Listen-Zeilen-Karten (2026-06-02) — moderne Buchungslisten-Anatomie:
   Bild links, Inhalt rechts (Titel/Sterne/Lage + Bewertung oben, Preis + CTA
   im Footer). Scoped auf --row, damit die AI-Empfehlungs-Karten (Grid) bleiben.
   ============================================================================ */

.osttirol-card-grid--rows {
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

/* Mobil: gestackt (Bild oben). Ab 640px: Zeile (Bild links). */
.osttirol-card--row .osttirol-card-link {
    flex-direction: column;
}

.osttirol-card--row .osttirol-card-image {
    aspect-ratio: 16 / 10;
}

@media (min-width: 640px) {
    .osttirol-card--row .osttirol-card-link {
        flex-direction: row;
        align-items: stretch;
    }

    .osttirol-card--row .osttirol-card-image {
        flex: 0 0 38%;
        max-width: 340px;
        aspect-ratio: auto;
        align-self: stretch;
    }

    .osttirol-card--row .osttirol-card-image img {
        min-height: 100%;
    }
}

.osttirol-card--row .osttirol-card-body {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
}

.osttirol-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.osttirol-card-headline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.osttirol-card--row .osttirol-card-title {
    font-size: var(--fs-xl);
}

/* Bewertung rechts oben, kompakt gestapelt. */
.osttirol-card--row .osttirol-card-rating {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.osttirol-rating-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

/* Footer: Preis links, CTA rechts, dezenter Trenner. */
.osttirol-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

.osttirol-card--row .osttirol-card-price {
    margin: 0;
    padding: 0;
}

.osttirol-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    color: var(--c-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.osttirol-card--row:hover .osttirol-card-cta,
.osttirol-card--row:focus-within .osttirol-card-cta {
    background: var(--c-primary);
    color: #fff;
}

.osttirol-card-cta__arrow {
    transition: transform var(--duration-fast) var(--ease-out);
}

.osttirol-card--row:hover .osttirol-card-cta__arrow {
    transform: translateX(3px);
}

/* ============================================================================
   TrustYou-Detailblock (#13, 2026-06-03) — Kitzbühel-Parität aus echten
   Osttirol-meta_review-Daten: Score-Bubble + Sterneverteilung, Summary-Text,
   Kategorien mit Zitaten, "Gut zu wissen", Badges (falls vorhanden) und
   "Aktuell relevant". Eingefärbt in web-crossing-CI-Blau (#005995) statt
   Marken-Rot — scoped über --ty-blue, kein Repaint des restlichen Moduls.
   ============================================================================ */

.osttirol-ty {
    --ty-blue: #005995;
    --ty-blue-soft: #e7eff5;
    --ty-track: var(--c-border);
}

.osttirol-ty__summary {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.osttirol-ty__bubble {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: var(--space-3) var(--space-4);
    background: var(--ty-blue);
    color: #fff;
    border-radius: var(--radius-lg);
    line-height: 1.1;
    text-align: center;
}

.osttirol-ty__bubble-desc {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.osttirol-ty__bubble-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 4px;
}

.osttirol-ty__bubble-score {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.osttirol-ty__bubble-max {
    font-size: var(--fs-xs);
    opacity: 0.85;
}

.osttirol-ty__bubble-count {
    font-size: var(--fs-xs);
    opacity: 0.92;
    margin-top: 4px;
}

.osttirol-ty__bubble-brand {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin-top: 6px;
    opacity: 0.85;
}

.osttirol-ty__bubble-brand strong {
    font-weight: 700;
}

/* Sterneverteilung. */
.osttirol-ty__hist {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.osttirol-ty__hist-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.osttirol-ty__hist-stars {
    flex-shrink: 0;
    width: 40px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}

.osttirol-ty__hist-stars span {
    color: var(--ty-blue);
}

.osttirol-ty__hist-bar {
    flex: 1 1 auto;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--ty-track);
    overflow: hidden;
}

.osttirol-ty__hist-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ty-blue);
}

.osttirol-ty__hist-count {
    flex-shrink: 0;
    width: 44px;
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Zusammenfassungstext. */
.osttirol-ty__lead {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--ty-blue-soft);
    border-radius: var(--radius-md);
    color: var(--c-text);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.osttirol-ty__cats {
    margin-bottom: var(--space-6);
}

.osttirol-ty__cats-title {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-4);
}

.osttirol-ty__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 720px) {
    .osttirol-ty__cat-list {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5) var(--space-8);
    }
}

.osttirol-ty__cat-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.osttirol-ty__cat-name {
    font-weight: 600;
}

.osttirol-ty__cat-score {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ty-blue);
}

.osttirol-ty__cat-bar {
    display: block;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--ty-track);
    overflow: hidden;
    margin: var(--space-2) 0 4px;
}

.osttirol-ty__cat-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ty-blue);
}

.osttirol-ty__cat--neg .osttirol-ty__cat-score {
    color: var(--c-error);
}

.osttirol-ty__cat--neg .osttirol-ty__cat-fill {
    background: var(--c-error);
}

.osttirol-ty__cat-count {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-ty__cat-sentences {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.osttirol-ty__cat-sentence {
    position: relative;
    padding-left: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-text);
    line-height: 1.45;
}

.osttirol-ty__cat-sentence::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ty-blue);
}

.osttirol-ty__cat-sentence--neg::before {
    background: var(--c-error);
}

/* Gut zu wissen. */
.osttirol-ty__gtk {
    margin-bottom: var(--space-6);
}

.osttirol-ty__gtk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.osttirol-ty__gtk-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
}

.osttirol-ty__gtk-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ty-blue);
}

.osttirol-ty__gtk-item--neg .osttirol-ty__gtk-dot {
    background: var(--c-error);
}

/* Auszeichnungen. */
.osttirol-ty__badges {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.osttirol-ty__badge-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    background: var(--ty-blue-soft);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
}

.osttirol-ty__badge-top {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--ty-blue);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.osttirol-ty__badge-sub {
    color: var(--c-text-muted);
}

/* Aktuell relevant. */
.osttirol-ty__relevant {
    padding: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.osttirol-ty__relevant-sub {
    margin: -10px 0 var(--space-4);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.osttirol-ty__relevant-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.osttirol-ty__relevant-score {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #fff;
    background: var(--ty-blue);
    border-radius: var(--radius-md);
    padding: 4px var(--space-3);
}

.osttirol-ty__relevant-count {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.osttirol-ty__topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.osttirol-ty__topic-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.osttirol-ty__topic-name {
    font-weight: 600;
}

.osttirol-ty__topic-score,
.osttirol-ty__subtopic-score {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ty-blue);
}

.osttirol-ty__subtopic {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-left: var(--space-4);
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

@media (max-width: 560px) {
    .osttirol-ty__summary {
        flex-direction: column;
        align-items: stretch;
    }

    .osttirol-ty__bubble {
        width: 100%;
    }
}

/* ============================================================================
   Filter-Sidebar (2026-06-02): kompakter + Kitzbühel-Reihenfolge.
   Reihenfolge via Flex-order (keine DOM-Moves); Gruppen über ihr eindeutiges
   x-show-Attribut adressiert. .osttirol-filters ist flex-column.
   ============================================================================ */

.osttirol-filters {
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Dezente Trenner zwischen Gruppen — modern, kompakt, order-unabhängig. */
.osttirol-filters__group,
.osttirol-price-slider {
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-4);
}

.osttirol-filters__toggle-btn {
    min-height: 38px;
}

/* Kompaktere Chips: kleiner, weniger Pill, engere Reihen. */
.osttirol-filters__amenities {
    gap: 6px;
}

.osttirol-filters__amenity {
    min-height: 30px;
    padding: 4px var(--space-3);
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    line-height: 1.2;
}

/* ---- Reihenfolge wie Kitzbühel: Preis hoch, dann Unterkunftsart, Sterne,
        Region, Marketinggruppen, Themen, Klassifizierung. ---- */
.osttirol-filters__header { order: -1; border-top: 0; }
.osttirol-filters > .osttirol-filters__group:not([x-show]) { order: 1; }     /* Suche */
.osttirol-filters__group--curated { order: 2; }                               /* Empfohlene Filter */
.osttirol-price-slider { order: 3; }                                          /* Preis */
.osttirol-filters [x-show*="filters.categories"] { order: 4; }                /* Unterkunftsart */
.osttirol-filters [x-show*="filters.stars"] { order: 5; }                     /* Sterne */
.osttirol-filters [x-show*="filters.regions"] { order: 6; }                   /* Region/Ort */
.osttirol-filters [x-show*="filters.marketingGroups"] { order: 7; }
.osttirol-filters [x-show*="filters.holidayThemes"] { order: 8; }             /* Urlaubsthemen */
.osttirol-filters [x-show*="filters.classifications"] { order: 9; }
.osttirol-filters [x-show*="filters.amenities"] { order: 10; }
.osttirol-filters [x-show*="filters.mealTypes"] { order: 11; }
.osttirol-filters__apply { order: 99; }

/* ============================================================
   #1/#6: Ausstattungs-Icons (Sprite #oai-*)
   ============================================================ */

/* Detail: Gruppen-Icon vor dem Gruppentitel (criteriaGroups). */
.osttirol-amenity-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.osttirol-amenity-group__icon {
    width: 18.4px;
    height: 18.4px;
    flex: 0 0 auto;
    color: var(--c-primary);
}

/* Liste: bis zu 6 wichtigste Merkmale als Chips mit Icon. */
.osttirol-card-amenities {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.osttirol-amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    background: var(--c-surface);
    line-height: 1.5;
}
.osttirol-amenity-chip__icon {
    width: 15.2px;
    height: 15.2px;
    flex: 0 0 auto;
    color: var(--c-primary);
}

/* #9: Gastgeber Ansprechpartner + Vorstellungstext. */
.osttirol-detail-host__person {
    margin: 0 0 var(--space-3);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.osttirol-detail-host__intro {
    margin: 0 0 var(--space-4);
    color: var(--c-text);
    line-height: 1.6;
}
.osttirol-detail-host__intro p {
    margin: 0 0 var(--space-2);
}
.osttirol-detail-host__intro p:last-child {
    margin-bottom: 0;
}

/* #7: Zimmerbeschreibungstext. */
.osttirol-room__desc {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* #4: Besucherzaehler (Social Proof, 4h-Fenster). */
.osttirol-viewer-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.osttirol-viewer-count__pulse {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2e7d32;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45);
    animation: osttirol-viewpulse 2s infinite;
}
@keyframes osttirol-viewpulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .osttirol-viewer-count__pulse { animation: none; }
}

/* WP1: Hauspauschalen (haus-eigene Pauschalen je Betrieb).
   Layout/Optik laeuft groesstenteils ueber Tailwind-Utilities im Template;
   hier nur semantische Ergaenzungen (kein @import, LL-021). */
.osttirol-hp__card {
    transition: box-shadow 0.15s ease;
}
.osttirol-hp__card:hover {
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
.osttirol-hp__desc {
    /* Beschreibung dezent kuerzen, damit die Karten gleichmaessig wirken. */
    overflow-y: auto;
    max-height: 144px;
}

/* Fotocredit im grossen Bild (Abnahme-Punkt 90). Unten rechts, damit der
   zentrierte Bildzaehler frei bleibt. Rendert nur mit Wert. */
.osttirol-lightbox__credit {
    position: absolute;
    bottom: -36px;
    right: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   Handy-Sheets: Suchleisten-Overlays als Panel von unten (Abnahme 65/67)

   Auf dem Desktop sind Kalender und Belegung Popover am Feld. Im schmalen
   Viewport geht das nicht auf: das Popover haengt an der Feldkante, laeuft
   nach rechts aus dem Bild und reicht ueber den unteren Rand hinaus (gemessen
   auf 390x844: Belegungs-Panel 220px unter dem Fold, ohne eigene
   Scrollflaeche). Darum werden beide Overlays unter 768px zu Panels von unten
   - volle Breite, feste Kopfzeile, eigene Scrollflaeche, Scrim dahinter.

   Die Grenze 767px ist mit `isSheetViewport()` in booking.js identisch: dort
   haengen Scroll-Sperre und Fokus-Trap daran.
   ========================================================================== */

/* Kopfzeile nur im Sheet-Modus. Auf dem Desktop waere sie im Popover Rauschen. */
.ob-sheet__head {
    display: none;
}

/* Klick-ausserhalb-Faenger. Auf dem Desktop unsichtbar (nur Klickflaeche),
   mobil der Scrim hinter dem Sheet. */
.osttirol-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dropdown) - 1);
    background: transparent;
}

@media (max-width: 767px) {
    /* `.osttirol-cal-overlay` steht hier nicht mehr mit: das Panel-von-unten des
       Kalenders definiert `date-picker.css` (gemeinsame Quelle, siehe oben). */
    .osttirol-room-config__panel {
        position: fixed;
        inset: auto 0 0 0;
        transform: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 85vh;
        /* Die Scrollflaeche ist das Panel selbst; die Kopfzeile bleibt darin
           per position:sticky stehen (kein zusaetzlicher Body-Wrapper). */
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 var(--space-4) var(--space-4);
        border: 1px solid var(--c-border);
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        z-index: var(--z-modal);
    }

    .ob-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        position: sticky;
        top: 0;
        /* Lokale Ebene innerhalb des Panels (eigener Stacking-Kontext), nicht
           die globale Z-Leiter - deshalb bewusst ohne Token. */
        z-index: 1;
        /* Randbuendig trotz Seitenpolster des Panels. */
        margin: 0 calc(-1 * var(--space-4)) var(--space-4);
        padding: var(--space-3) var(--space-4);
        background: var(--c-bg);
        border-bottom: 1px solid var(--c-border);
    }

    .ob-sheet__title {
        margin: 0;
        color: var(--c-text);
        font-size: var(--fs-base);
        font-weight: 700;
    }

    .ob-sheet__close {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: 0;
        color: var(--c-text);
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }

    /* Tagesfelder: 44 px stehen jetzt in der Basisregel von date-picker.css. */

    .osttirol-sheet-scrim {
        /* `position: fixed` steht schon in der Basisregel; hier wiederholt,
           weil die Z-Ebenen-Politik (Handbuch 28.9.1, CardOverlayZIndexPolicy)
           je Regel belegt sehen will, dass eine Seiten-Overlay-Ebene wirklich
           ein Vollbild-Overlay ist - und das zu Recht. */
        position: fixed;
        inset: 0;
        background: var(--c-scrim);
        z-index: calc(var(--z-modal) - 1);
    }
}