/**
 * Osttirol Experiences — schlankes, eigenständiges Frontend-Stylesheet.
 *
 * Primärfarbe: Osttirol-Markenrot #B51621 (CI-verifiziert). Die `--exp-*`-Token-
 * DEFINITIONEN zeigen seit T7 per Re-Pointing auf die kanonischen Tokens aus
 * `tokens.css` (global via <f:asset.css> VOR diesem Stylesheet geladen); die
 * `--exp-*`-Consumer-Klassen bleiben unverändert.
 * Analog (nicht identisch) zum `--ev-*`-System aus events.css.
 *
 * Blöcke:
 *   .exp-list / .exp-card / .exp-filterbar / .exp-chip   Listenansicht
 *   .exp-detail-*                                        SSR-Detailseite
 *   .exp-gallery / .exp-lightbox                         Galerie + Lightbox
 *   .exp-map                                             MapLibre-Container
 *
 * mobile-first, WCAG-AA-Kontrast, reduced-motion-safe, Touch-Targets ≥44px.
 */

:root {
    /* T7: Re-Pointing auf kanonische tokens.css (global vor experiences.css geladen).
       Lokale --exp-* Namen bleiben, zeigen auf Single-Source-Tokens. */

    /* --- Brand: Osttirol-Rot (kanonisch) --- */
    --exp-red: var(--c-primary);
    --exp-red-hover: var(--c-primary-hover);
    --exp-red-soft: var(--c-primary-soft);
    --exp-red-ring: var(--c-primary-ring);

    /* --- Neutrals --- */
    --exp-text: var(--c-text);
    --exp-text-muted: var(--c-text-muted);
    --exp-text-subtle: var(--c-text-subtle);
    --exp-bg: var(--c-bg);
    --exp-bg-alt: var(--c-bg-alt);
    --exp-bg-sunken: var(--c-bg-sunken);
    --exp-border: var(--c-border);
    --exp-border-strong: var(--c-border-strong);

    --exp-focus: var(--c-focus);

    --exp-font: var(--font-body);

    --exp-fs-xs: 12px;
    --exp-fs-sm: 13px;
    --exp-fs-base: 15px;
    --exp-fs-md: 17px;
    --exp-fs-lg: 20px;
    --exp-fs-xl: 26px;
    --exp-fs-2xl: 34px;

    --exp-lh-tight: 1.2;
    --exp-lh-base: 1.55;

    --exp-s1: var(--space-1);
    --exp-s2: var(--space-2);
    --exp-s3: var(--space-3);
    --exp-s4: var(--space-4);
    --exp-s5: var(--space-5);
    --exp-s6: var(--space-6);
    --exp-s8: var(--space-8);
    --exp-s10: var(--space-10);
    --exp-s12: var(--space-12);
    --exp-s16: var(--space-16);

    --exp-radius-sm: var(--radius-sm);
    --exp-radius-md: var(--radius-md);
    --exp-radius-lg: var(--radius-lg);
    --exp-radius-pill: var(--radius-pill);

    --exp-shadow-sm: var(--shadow-sm);
    --exp-shadow-card: var(--shadow-card);
    --exp-shadow-hover: var(--shadow-hover);

    --exp-z-base: var(--z-base);
    --exp-z-sticky: var(--z-sticky);
    --exp-z-overlay: var(--z-overlay);
    --exp-z-modal: var(--z-modal);

    --exp-ease: var(--ease-out);
    --exp-dur: 180ms;

    --exp-max-w: 1200px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --exp-dur: 0ms;
    }
}

/* =========================================================================
   Gemeinsame Basis (Liste + Detail)
   ========================================================================= */
.exp-list,
.exp-detail {
    box-sizing: border-box;
    max-width: var(--exp-max-w);
    margin: 0 auto;
    padding: var(--exp-s6) var(--exp-s4) var(--exp-s12);
    font-family: var(--exp-font);
    font-size: var(--exp-fs-base);
    line-height: var(--exp-lh-base);
    color: var(--exp-text);
}

.exp-list *,
.exp-list *::before,
.exp-list *::after,
.exp-detail *,
.exp-detail *::before,
.exp-detail *::after {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

.exp-list :focus-visible,
.exp-detail :focus-visible {
    outline: 3px solid var(--exp-focus);
    outline-offset: 2px;
    border-radius: var(--exp-radius-sm);
}

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

/* =========================================================================
   Listen-Kopf
   ========================================================================= */
.exp-header {
    margin-bottom: var(--exp-s6);
}

.exp-header__title {
    margin: 0 0 var(--exp-s2);
    font-size: var(--exp-fs-2xl);
    line-height: var(--exp-lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.exp-header__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: var(--exp-s3);
    background: var(--exp-red);
    border-radius: var(--exp-radius-pill);
}

.exp-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--exp-s3);
    margin: 0;
    color: var(--exp-text-muted);
    font-size: var(--exp-fs-sm);
}

.exp-count {
    font-weight: 600;
    color: var(--exp-text);
}

.exp-source {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s1);
    padding: 2px var(--exp-s2);
    border: 1px solid var(--exp-border);
    border-radius: var(--exp-radius-pill);
    font-size: var(--exp-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--exp-text-subtle);
}

.exp-loading-inline {
    color: var(--exp-red);
    font-weight: 600;
}

/* =========================================================================
   Filterbar
   ========================================================================= */
.exp-filterbar {
    display: grid;
    gap: var(--exp-s4);
    padding: var(--exp-s5);
    margin-bottom: var(--exp-s6);
    background: var(--exp-bg-alt);
    border: 1px solid var(--exp-border);
    border-radius: var(--exp-radius-lg);
}

.exp-filterbar__row {
    display: grid;
    gap: var(--exp-s4);
}

@media (min-width: 720px) {
    .exp-filterbar__row--inline {
        grid-template-columns: 2fr 1fr;
        align-items: end;
    }
}

.exp-field {
    display: flex;
    flex-direction: column;
    gap: var(--exp-s1);
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.exp-field__label,
.exp-field > legend {
    font-size: var(--exp-fs-sm);
    font-weight: 600;
    color: var(--exp-text);
    padding: 0;
}

.exp-input,
.exp-select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--exp-s3);
    font: inherit;
    font-size: var(--exp-fs-base);
    color: var(--exp-text);
    background: var(--exp-bg);
    border: 1px solid var(--exp-border-strong);
    border-radius: var(--exp-radius-sm);
    transition: border-color var(--exp-dur) var(--exp-ease),
        box-shadow var(--exp-dur) var(--exp-ease);
}

.exp-input:focus,
.exp-select:focus {
    border-color: var(--exp-red);
    box-shadow: 0 0 0 3px var(--exp-red-ring);
    outline: none;
}

.exp-input::placeholder {
    color: var(--exp-text-subtle);
}

.exp-search {
    position: relative;
}

.exp-search .exp-input {
    padding-left: var(--exp-s8);
}

.exp-search__icon {
    position: absolute;
    left: var(--exp-s3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--exp-text-subtle);
    pointer-events: none;
}

.exp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--exp-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s1);
    min-height: 36px;
    padding: var(--exp-s1) var(--exp-s3);
    font: inherit;
    font-size: var(--exp-fs-sm);
    color: var(--exp-text);
    background: var(--exp-bg);
    border: 1px solid var(--exp-border-strong);
    border-radius: var(--exp-radius-pill);
    cursor: pointer;
    transition: background var(--exp-dur) var(--exp-ease),
        border-color var(--exp-dur) var(--exp-ease),
        color var(--exp-dur) var(--exp-ease);
}

.exp-chip:hover {
    border-color: var(--exp-red);
}

.exp-chip--active {
    background: var(--exp-red);
    border-color: var(--exp-red);
    color: #fff;
    font-weight: 600;
}

.exp-filterbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--exp-s3);
}

/* =========================================================================
   Karten-Grid (Liste)
   ========================================================================= */
.exp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--exp-s5);
    list-style: none;
    margin: 0;
    padding: 0;
}

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

@media (min-width: 960px) {
    .exp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.exp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--exp-bg);
    border: 1px solid var(--exp-border);
    border-radius: var(--exp-radius-lg);
    overflow: hidden;
    box-shadow: var(--exp-shadow-card);
    transition: transform var(--exp-dur) var(--exp-ease),
        box-shadow var(--exp-dur) var(--exp-ease);
}

.exp-card:hover,
.exp-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--exp-shadow-hover);
}

.exp-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.exp-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--exp-bg-sunken);
    overflow: hidden;
}

.exp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--exp-dur) var(--exp-ease);
}

.exp-card:hover .exp-card__img {
    transform: scale(1.04);
}

.exp-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--exp-text-subtle);
    font-size: var(--exp-fs-sm);
}

.exp-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--exp-s2);
    padding: var(--exp-s4);
    flex: 1;
}

.exp-card__title {
    margin: 0;
    font-size: var(--exp-fs-md);
    line-height: var(--exp-lh-tight);
    font-weight: 700;
    color: var(--exp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exp-card__location {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s1);
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-muted);
}

.exp-card__provider {
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-subtle);
}

.exp-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--exp-s2);
    margin-top: auto;
    padding-top: var(--exp-s2);
}

.exp-card__price {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s1);
    font-size: var(--exp-fs-base);
    font-weight: 700;
    color: var(--exp-red-hover);
}

/* Preis-/Tag-Icon vor dem Preistext (Lucide-Stil, currentColor). */
.exp-card__price-icon {
    flex-shrink: 0;
    /* optisch leicht abgesetzt vom Preistext */
    color: var(--exp-red-hover);
}

.exp-tag {
    display: inline-block;
    padding: 2px var(--exp-s2);
    font-size: var(--exp-fs-xs);
    color: var(--exp-red-hover);
    background: var(--exp-red-soft);
    border-radius: var(--exp-radius-pill);
    font-weight: 600;
}

/* =========================================================================
   Zustände
   ========================================================================= */
.exp-error {
    margin: var(--exp-s4) 0;
    padding: var(--exp-s3) var(--exp-s4);
    color: var(--c-error-text);
    background: var(--exp-red-soft);
    border: 1px solid var(--exp-red);
    border-radius: var(--exp-radius-md);
    font-size: var(--exp-fs-sm);
}

.exp-empty {
    margin: var(--exp-s8) auto;
    max-width: 480px;
    text-align: center;
    color: var(--exp-text-muted);
}

.exp-empty__title {
    margin: 0 0 var(--exp-s2);
    font-size: var(--exp-fs-lg);
    font-weight: 700;
    color: var(--exp-text);
}

.exp-status {
    text-align: center;
    color: var(--exp-text-muted);
    padding: var(--exp-s8) var(--exp-s4);
}

.exp-sentinel {
    height: 1px;
    width: 100%;
}

.exp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--exp-s2);
    min-height: 44px;
    padding: var(--exp-s2) var(--exp-s6);
    font: inherit;
    font-size: var(--exp-fs-base);
    font-weight: 600;
    color: #fff;
    background: var(--exp-red);
    border: 0;
    border-radius: var(--exp-radius-pill);
    cursor: pointer;
    transition: background var(--exp-dur) var(--exp-ease);
}

.exp-button:hover {
    background: var(--exp-red-hover);
}

.exp-button--ghost {
    color: var(--exp-red-hover);
    background: transparent;
    border: 1px solid var(--exp-border-strong);
}

.exp-button--ghost:hover {
    background: var(--exp-bg-alt);
    border-color: var(--exp-red);
}

.exp-end {
    color: var(--exp-text-subtle);
    font-size: var(--exp-fs-sm);
}

.exp-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--exp-border-strong);
    border-top-color: var(--exp-red);
    border-radius: 50%;
    animation: exp-spin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes exp-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .exp-spinner {
        animation-duration: 1.4s;
    }
    .exp-card,
    .exp-card__img {
        transition: none;
    }
}

/* =========================================================================
   Detailseite (SSR)
   ========================================================================= */
.exp-detail-breadcrumb {
    margin: 0 0 var(--exp-s4);
    font-size: var(--exp-fs-sm);
}

.exp-detail-breadcrumb a {
    color: var(--exp-red-hover);
    text-decoration: none;
    font-weight: 600;
}

.exp-detail-breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Titel + Merken-Pill in einer Zeile (AP5). Der Titel darf schrumpfen, die Pill
   nicht; auf schmalen Viewports bricht die Pill unter den Titel. */
.exp-detail-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--exp-s2);
}

.exp-detail-titlebar > .exp-detail-title {
    flex: 1 1 260px;
    min-width: 0;
}

.exp-detail-titlebar > .osttirol-wish--detail {
    flex: 0 0 auto;
}

.exp-detail-title {
    margin: 0 0 var(--exp-s3);
    font-size: var(--exp-fs-2xl);
    line-height: var(--exp-lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.exp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--exp-s2);
    margin: 0 0 var(--exp-s6);
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-muted);
}

.exp-detail-meta .exp-tag {
    background: var(--exp-bg-sunken);
    color: var(--exp-text-muted);
    font-weight: 500;
}

.exp-detail-meta .exp-tag--category {
    color: var(--exp-red-hover);
    background: var(--exp-red-soft);
    font-weight: 600;
}

/* --- Galerie ---
   Robustes Raster ohne Lueckenbildung. Fruehere Ursache des kaputten Layouts:
   `grid-auto-rows: 1fr` (Bruchteil der — nicht definierten — Container-Hoehe)
   kollidierte mit per-Item `aspect-ratio: 16/10` und einem `grid-row: span 2`
   am ersten Item. Bei 4 Bildern entstand eine implizite 3. Auto-Zeile, die das
   span-2-Item nicht ausfuellte → Riesen-Leerraeume + ungleiche Kachelgroessen.

   Loesung: fester, einheitlicher Zeilen-Track (definierte Hoehe statt 1fr) und
   ein „Featured"-Muster (ein grosses Bild links + kleinere Kacheln rechts).
   Bilder fuellen ihre Zelle via object-fit:cover ohne Verzerren. */
.exp-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--exp-s2);
    margin: 0 0 var(--exp-s8);
}

/* Multi-Bild ab Tablet: gleichmaessiges, LUECKENLOSES Raster aus gleich grossen
   Kacheln (auto-fit). Jede Kachel behaelt ihre eigene aspect-ratio (16/10), die
   Spaltenzahl passt sich der Breite an — fuellt fuer 2, 3, 4 und 5 Bilder
   (Template-Cap) immer sauber, ohne Riesenluecken oder span-Konflikte. */
@media (min-width: 640px) {
    .exp-gallery--multi {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.exp-gallery__item {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--exp-bg-sunken);
    border-radius: var(--exp-radius-md);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 16 / 10;
}

.exp-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--exp-dur) var(--exp-ease);
}

.exp-gallery__item:hover .exp-gallery__img {
    transform: scale(1.03);
}

/* --- Body-Layout --- */
.exp-detail-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--exp-s8);
}

@media (min-width: 900px) {
    .exp-detail-body {
        grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    }
}

.exp-detail-content {
    min-width: 0;
}

.exp-detail-lead {
    font-size: var(--exp-fs-md);
    color: var(--exp-text);
    margin: 0 0 var(--exp-s4);
}

.exp-detail-description {
    color: var(--exp-text);
}

.exp-detail-description :is(p, ul, ol) {
    margin: 0 0 var(--exp-s3);
}

.exp-detail-section-title {
    display: flex;
    align-items: center;
    gap: var(--exp-s2);
    margin: var(--exp-s8) 0 var(--exp-s3);
    font-size: var(--exp-fs-lg);
    font-weight: 700;
}

/* Abschnitts-Icon (z. B. Anreise/Auto) vor der Ueberschrift. */
.exp-detail-section-icon {
    flex-shrink: 0;
    color: var(--exp-red);
}

/* --- Aside / Side-Panel --- */
.exp-detail-aside {
    display: flex;
    flex-direction: column;
    gap: var(--exp-s5);
}

.exp-panel {
    padding: var(--exp-s5);
    background: var(--exp-bg-alt);
    border: 1px solid var(--exp-border);
    border-radius: var(--exp-radius-lg);
}

.exp-panel h2 {
    margin: 0 0 var(--exp-s3);
    font-size: var(--exp-fs-md);
    font-weight: 700;
}

.exp-panel p {
    margin: 0 0 var(--exp-s2);
}

.exp-panel p:last-child {
    margin-bottom: 0;
}

.exp-panel a {
    color: var(--exp-red-hover);
    word-break: break-word;
}

.exp-price {
    font-size: var(--exp-fs-xl);
    font-weight: 700;
    color: var(--exp-red-hover);
    margin: 0;
}

.exp-price__hint {
    margin: var(--exp-s2) 0 0;
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-subtle);
}

.exp-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--exp-s2);
}

.exp-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s2);
    min-height: 32px;
    font-weight: 600;
    text-decoration: none;
}

.exp-links a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Karte --- */
.exp-map {
    width: 100%;
    height: 260px;
    border-radius: var(--exp-radius-md);
    overflow: hidden;
    background: var(--exp-bg-sunken);
}

.exp-map-note {
    margin: var(--exp-s2) 0 0;
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-subtle);
}

/* =========================================================================
   Lightbox
   ========================================================================= */
.exp-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--exp-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--exp-s5);
    background: rgba(15, 15, 15, 0.88);
}

.exp-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--exp-radius-sm);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.exp-lightbox__close {
    position: absolute;
    top: var(--exp-s4);
    right: var(--exp-s4);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.exp-lightbox__close:hover {
    background: var(--exp-red);
}

/* =========================================================================
   Daypicker + TOSC5-Buchungs-Panel (Experience-Detail-Aside)
   Namensraum: .exp-daypicker / .exp-booking-*
   ========================================================================= */

/* Panel-Variante mit engem Padding fuer den Buchungs-Block */
.exp-panel--booking {
    padding: var(--exp-s4);
}

/* --- Monats-Navigation ---------------------------------------------------- */
.exp-daypicker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--exp-s3);
}

.exp-daypicker__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    color: var(--exp-text);
    background: transparent;
    border: 1px solid var(--exp-border);
    border-radius: var(--exp-radius-sm);
    cursor: pointer;
    transition: background var(--exp-dur) var(--exp-ease),
        border-color var(--exp-dur) var(--exp-ease);
    flex-shrink: 0;
}

.exp-daypicker__nav-btn:hover:not(:disabled) {
    background: var(--exp-bg-sunken);
    border-color: var(--exp-red);
}

.exp-daypicker__nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.exp-daypicker__month-label {
    font-size: var(--exp-fs-sm);
    font-weight: 700;
    color: var(--exp-text);
    text-align: center;
    flex: 1;
    padding: 0 var(--exp-s2);
}

/* --- Kalender-Grid -------------------------------------------------------- */
.exp-daypicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--exp-s3);
}

.exp-daypicker__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: var(--exp-fs-xs);
    font-weight: 700;
    color: var(--exp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.exp-daypicker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 34px;
    font: inherit;
    font-size: var(--exp-fs-sm);
    color: var(--exp-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--exp-radius-sm);
    cursor: pointer;
    transition: background var(--exp-dur) var(--exp-ease),
        border-color var(--exp-dur) var(--exp-ease);
}

.exp-daypicker__day:hover:not(:disabled) {
    background: var(--exp-red-soft);
    border-color: var(--exp-red);
    color: var(--exp-red-hover);
}

.exp-daypicker__day--empty,
.exp-daypicker__day--past {
    color: var(--exp-text-subtle);
    cursor: default;
    opacity: 0.4;
}

.exp-daypicker__day--today {
    font-weight: 700;
    border-color: var(--exp-border-strong);
}

.exp-daypicker__day--selected {
    background: var(--exp-red) !important;
    border-color: var(--exp-red) !important;
    color: #fff !important;
    font-weight: 700;
}

.exp-daypicker__hint {
    margin: 0;
    font-size: var(--exp-fs-xs);
    /* WCAG AA: --exp-text-subtle (#767676) auf getöntem Grund < 4.5:1 → muted (#5d5d5d). */
    color: var(--exp-text-muted);
    text-align: center;
}

/* --- Datum ausgewaehlt: Buchungs-Zeile ------------------------------------ */
.exp-booking-ready {
    display: flex;
    flex-direction: column;
    gap: var(--exp-s3);
    padding-top: var(--exp-s2);
}

.exp-booking-ready__date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--exp-s2);
    margin: 0;
    font-size: var(--exp-fs-sm);
    color: var(--exp-text);
}

.exp-booking-ready__change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    color: var(--exp-text-muted);
    background: transparent;
    border: 1px solid var(--exp-border);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--exp-dur) var(--exp-ease);
}

.exp-booking-ready__change:hover {
    background: var(--exp-bg-sunken);
    color: var(--exp-text);
}

/* Volle Breite fuer den Buchungs-Button */
.exp-button--full {
    width: 100%;
    justify-content: center;
}

/* TBD-Hinweis-Variante (subtiler) */
.exp-price__hint--tbd {
    color: var(--exp-text-muted);
    font-style: italic;
}

/* TOSC5-Embed-Container */
.exp-tosc5-embed {
    min-height: 0;
}

/* Buchungs-Fehler-Banner */
.exp-booking-error {
    margin: 0;
    padding: var(--exp-s2) var(--exp-s3);
    font-size: var(--exp-fs-sm);
    color: var(--c-error-text);
    background: var(--exp-red-soft);
    border: 1px solid var(--exp-red);
    border-radius: var(--exp-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .exp-daypicker__nav-btn,
    .exp-daypicker__day,
    .exp-booking-ready__change {
        transition: none;
    }
}

/* =========================================================================
   KI-Features (additiv, LL-012)
   Namensraum: .exp-ai-*
   Konsistent zu booking.css/.osttirol-ai-*, jedoch im exp-Token-System.
   ========================================================================= */

/* --- KI-Suchleiste -------------------------------------------------------- */
.exp-ai-search {
    margin-bottom: var(--exp-s5);
    padding: var(--exp-s5);
    background: linear-gradient(135deg, var(--exp-red-soft) 0%, var(--exp-bg-alt) 100%);
    border: 1px solid var(--exp-red-ring);
    border-radius: var(--exp-radius-lg);
}

.exp-ai-search__form {
    display: grid;
    gap: var(--exp-s3);
}

.exp-ai-search__label {
    display: flex;
    align-items: center;
    gap: var(--exp-s2);
    font-size: var(--exp-fs-sm);
    font-weight: 600;
    color: var(--exp-text);
    cursor: pointer;
}

.exp-ai-search__row {
    display: grid;
    gap: var(--exp-s2);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .exp-ai-search__row {
        grid-template-columns: 1fr auto auto;
        align-items: center;
    }
}

.exp-ai-search__input {
    /* erbt von .exp-input (experiences.css) */
    width: 100%;
}

.exp-ai-search__submit {
    white-space: nowrap;
}

.exp-ai-search__recommend {
    white-space: nowrap;
}

.exp-ai-search__hint {
    margin: 0;
    font-size: var(--exp-fs-xs);
    color: var(--exp-text-subtle);
}

.exp-ai-search__error {
    margin: 0;
    padding: var(--exp-s2) var(--exp-s3);
    font-size: var(--exp-fs-sm);
    color: var(--c-error-text);
    background: var(--exp-red-soft);
    border: 1px solid var(--exp-red);
    border-radius: var(--exp-radius-sm);
}

/* „Verstanden als"-Chips --------------------------------------------------- */
.exp-ai-search__understood {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--exp-s2);
}

.exp-ai-search__understood-label {
    font-size: var(--exp-fs-xs);
    font-weight: 600;
    color: var(--exp-text-muted);
}

.exp-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--exp-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--exp-s1);
    padding: 2px var(--exp-s3);
    font-size: var(--exp-fs-xs);
    font-weight: 600;
    color: var(--exp-red-hover);
    background: var(--exp-red-soft);
    border: 1px solid var(--exp-red-ring);
    border-radius: var(--exp-radius-pill);
    line-height: 1.4;
}

.exp-ai-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin-left: 2px;
    font-size: 14px;
    line-height: 1;
    color: var(--exp-red-hover);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--exp-dur) var(--exp-ease);
}

.exp-ai-chip__remove:hover {
    background: var(--exp-red-ring);
}

/* KI-Badge (Pill) ---------------------------------------------------------- */
.exp-ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--exp-s2);
    font-size: var(--exp-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--exp-red);
    border-radius: var(--exp-radius-pill);
    line-height: 1.4;
    flex-shrink: 0;
}

.exp-ai-badge--inline {
    font-size: 10.4px;
}

/* --- KI-Empfehlungs-Block ------------------------------------------------- */
.exp-ai-recommend {
    margin: var(--exp-s6) 0;
    padding: var(--exp-s5);
    background: var(--exp-bg-alt);
    border: 1px solid var(--exp-border);
    border-top: 4px solid var(--exp-red);
    border-radius: var(--exp-radius-lg);
}

.exp-ai-recommend__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--exp-s3);
    margin-bottom: var(--exp-s4);
}

.exp-ai-recommend__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--exp-s2);
    margin: 0;
    font-size: var(--exp-fs-lg);
    font-weight: 700;
    color: var(--exp-text);
}

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

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

.exp-ai-recommend__note {
    margin: 0 0 var(--exp-s4);
    font-size: var(--exp-fs-sm);
    color: var(--exp-text-muted);
}

.exp-ai-recommend__empty {
    margin: var(--exp-s4) 0;
}

.exp-ai-recommend__grid {
    /* gleiche Grid-Struktur wie .exp-grid, kein Duplikat via @extend nötig */
}

/* Card-Variante für KI-Empfehlungen: blauer Akzent-Rahmen ------------------- */
.exp-card--ai {
    border-color: var(--exp-red-ring);
    box-shadow: var(--exp-shadow-card);
}

.exp-card--ai:hover,
.exp-card--ai:focus-within {
    box-shadow: var(--exp-shadow-hover);
}

/* Badge-Overlay in der Card-Medien-Zone ------------------------------------ */
.exp-card__badge-overlay {
    position: absolute;
    top: var(--exp-s2);
    left: var(--exp-s2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--exp-s1);
    z-index: var(--exp-z-base);
}

/* aiReason-Zeile ------------------------------------------------------------ */
.exp-ai-reason {
    display: flex;
    align-items: flex-start;
    gap: var(--exp-s1);
    margin: 0;
    font-size: var(--exp-fs-sm);
    color: var(--exp-red-hover);
    background: var(--exp-red-soft);
    padding: var(--exp-s2) var(--exp-s3);
    border-radius: var(--exp-radius-sm);
    line-height: var(--exp-lh-base);
}

.exp-ai-reason__icon {
    color: var(--exp-red);
    font-size: 14.4px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* =========================================================================
   Karten-Pin-Preis + Popup-Bubble (Experience-Map)
   Namensraum: .osttirol-map-pin__price (Bubble: .ob-mappopup in map-view.css)
   experiences.css wird NUR auf Experience-Seiten geladen → diese Regeln
   beeinflussen Events/Infra nicht (deren Maps liefern kein pinPriceLabel
   und rendern den Preis-Span gar nicht erst).
   ========================================================================= */

/* Kompaktes Preis-Label am MapLibre-Pin (von map-view.js gesetzt, opt-in). */
.osttirol-map-pin__price {
    display: inline-block;
    padding: 1px var(--exp-s1);
    font-size: var(--exp-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    background: var(--exp-red);
    border-radius: var(--exp-radius-sm);
}

/* Popup-Bubble: seit der Abnahme 03.08.2026 teilen ALLE Module dieselbe Bubble
   (.ob-mappopup, Markup aus OsttirolMapView.popupMarkup, Basis-Layout in
   map-view.css, Marken-Feinschliff in ob-live.css §32). Die frueheren
   .exp-mappopup*-Regeln standen hier nur fuer die Erlebnisse und sind entfallen,
   damit es nicht zwei Bubble-Definitionen gibt. */

/* =========================================================================
   "Mehr Erlebnisse"-Slider (Detail-Ende)
   Namensraum: .exp-more*
   Horizontaler Scroll-Snap-Slider mit Listen-Card-Optik.
   ========================================================================= */
/* Der Slider liegt AUSSERHALB des `<article class="exp-detail">` und braucht die
   Contentbreite deshalb selbst — sonst laeuft er ueber die ganze Fensterbreite,
   waehrend Text und Karte darueber bei `--exp-max-w` enden (Stefan 29.07.2026).
   Im Design-Override traegt der Abschnitt zusaetzlich `ob-container`; beide Wege
   ergeben denselben zentrierten Block, hier fuer das Default-Set ohne ob-live.css
   (Dokploy-Staging, /styleguide). */
.exp-more {
    box-sizing: border-box;
    max-width: var(--exp-max-w);
    margin: var(--exp-s12) auto 0;
    /* visuelle Trennung vom Detail-Body */
    padding-top: var(--exp-s8);
    padding-left: var(--exp-s4);
    padding-right: var(--exp-s4);
    border-top: 1px solid var(--exp-border);
}

.exp-more__title {
    margin: 0 0 var(--exp-s5);
    font-size: var(--exp-fs-xl);
    line-height: var(--exp-lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.exp-more__track {
    display: flex;
    gap: var(--exp-s4);
    list-style: none;
    margin: 0;
    padding: var(--exp-s1) 0 var(--exp-s4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* sanftes Scrollen OHNE sichtbare Scrollbar (Stefan 2026-07-09) —
       Wisch-/Wheel-Scrollen und Snap bleiben erhalten. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.exp-more__track::-webkit-scrollbar {
    display: none;
}

.exp-more__item {
    /* feste Kachelbreite; Snap-Punkt am Anfang jeder Karte */
    flex: 0 0 260px;
    width: 260px;
    scroll-snap-align: start;
    /* Touch-Target/Klickflaeche der Karte ist die volle Kachel (>= 44px hoch) */
    min-height: 44px;
}

/* die Slider-Kacheln nutzen die .exp-card-Optik (Media/Body/Foot); hier nur
   die abweichende Medien-Hoehe fuer das schmalere 260px-Format. */
.exp-more__item .exp-card__media {
    aspect-ratio: 3 / 2;
}

@media (prefers-reduced-motion: reduce) {
    .exp-more__track {
        scroll-behavior: auto;
    }
}

/* --- Scroll-Lock fuer das Filter-Offcanvas -------------------------------
/* Hintergrund-Scroll-Sperre liegt seit 2026-08-05 in
   `Resources/Public/JavaScript/scroll-lock.js` (OsttirolScrollLock). Die alte
   Regel `overflow: hidden` auf `html` ist hier absichtlich entfernt: auf der
   Wirtsseite ist `html` der Scroll-Container, `overflow: hidden` klemmt dessen
   `scrollTop` auf 0 und die Seite sprang beim Schliessen nach oben
   (Kundenbefund 2026-08-05). Das Modul haelt die Position stattdessen ueber
   `position: fixed` am Body und stellt sie beim Freigeben wieder her. */

/* „Anfahrt planen"-Zeile (Default-Template, Anreise-Abschnitt) ------------- */
.exp-detail-directions {
    margin: 15px 0 0;
}

/* Fotocredit im grossen Bild (Abnahme-Punkt 90). Rendert nur mit Wert. */
.exp-lightbox__credit {
    position: absolute;
    bottom: 12px;
    right: 16px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}