/**
 * ob-live.css — Design-Override der Buchungsstrecke im Bestandslook osttirol.com
 *
 * Copyright: Stefan Ennemoser, web-crossing GmbH
 *
 * Quelle aller Werte: design/overrides-2026-07/tokens-extraction.md (Live-CSS
 * www.osttirol.com, extrahiert 2026-07-08) und reference-layouts.md.
 * Regeln:
 *  - ALLE Farb-/Metrik-Rohwerte NUR im Token-Block (.ob-root { --ob-* }).
 *  - Alle Komponenten-Styles unter .ob-root gescoped (keine Globals).
 *  - Fonts Brown/CambridgeBold werden NUR referenziert (Seitenrahmen liefert
 *    die @font-face-Deklarationen, self-hosted im fileadmin) — kein @import,
 *    keine externen URLs (DSGVO).
 *  - Wird NACH booking.css/app.css geladen — Kaskade gewinnt bei gleicher
 *    Spezifität, deshalb überschreiben wir bestehende ob-/osttirol-Klassen
 *    hier gezielt.
 */

/* ============================================================================
   1. TOKEN-BLOCK — Quelle: tokens-extraction.md Abschnitte 1–7
   ========================================================================== */
.ob-root {
    /* Farben (tokens-extraction.md §1) */
    --ob-color-primary: #B51621;          /* Markenrot — Headings, Buttons, Preis */
    --ob-color-primary-soft: #F8E8E9;     /* Card-Hover, input-colored-BG */
    --ob-color-heading: #B51621;          /* h1–h5 */
    --ob-color-text: #5D5D5D;             /* Body-Text (KEIN near-black im Bestand) */
    --ob-color-text-muted: #aeaeae;       /* Placeholder */
    --ob-color-text-inverse: #ffffff;
    --ob-color-bg: #ffffff;
    --ob-color-bg-alt: #F4F4F4;           /* Sektions-/Karten-Grau */
    --ob-color-surface-card: #F4F4F4;     /* Card auf weißem BG */
    --ob-color-surface-card-alt: #ffffff; /* Card auf grauem Sektions-BG */
    --ob-color-border: #D9D9D9;           /* Pills, Datepicker, Trenner */
    --ob-color-border-input: #adadad;     /* Input-Bottom-Border */
    --ob-color-success: #98de67;
    --ob-color-success-text: #2e7d32;    /* lesbares Gruen auf weiss (Social Proof) */
    --ob-color-error: #cf2c31;
    --ob-color-scrim: rgba(93, 93, 93, 0.26);

    /* Typografie (§2) — Fonts referenziert, Fallback-Stack lokal */
    --ob-font-body: "Brown", "Outfit", system-ui, sans-serif;
    --ob-font-display: "CambridgeBold", "Outfit", system-ui, serif;
    --ob-fs-base: 16px;
    --ob-lh-base: 1.4;
    --ob-fs-h1: 30px;                     /* mobil; ≥992px: 54px */
    --ob-fs-h1-lg: 54px;
    --ob-fs-h3: 20px;                     /* mobil; ≥992px: 30px */
    --ob-fs-h3-lg: 30px;
    --ob-fs-subline: 18px;

    /* Radien (§3) — Bestand ist kantig: dominant 0 */
    --ob-radius-button: 0;
    --ob-radius-card: 0;
    --ob-radius-input: 0;
    --ob-radius-pill: 15px;
    --ob-radius-badge: 0;
    --ob-radius-round: 50%;

    /* Schatten (§4) — Cards flach, Schatten nur für Sticky/Panels */
    --ob-shadow-card: none;
    --ob-shadow-sticky: 0 0 6px rgba(93, 93, 93, 0.26);
    --ob-shadow-panel: 0 0 15px rgba(93, 93, 93, 0.16);

    /* Spacing / Layout / Card-Metriken (§5, reference-layouts.md §0/§1.5) */
    --ob-container-max: 1310px;
    --ob-container-pad: 25px;
    --ob-grid-gutter: 25px;               /* col-Padding je Seite = 50px optisch */
    --ob-space-card-gap-y: 50px;          /* mobil; ≥1300px: 60px */
    --ob-space-card-gap-y-lg: 60px;
    --ob-space-card-offset: 35px;         /* Signatur-Overlap Content über Bild */
    --ob-space-card-pad: 15px;            /* mobil; ≥1300px: 20px 10px 20px 25px */
    --ob-space-title-gap: 5px;
    --ob-space-desc-gap: 18px;
    --ob-space-section-y: 8vh;
    --ob-space-headline-gap: 4vh;
    --ob-card-img-w: 250px;               /* Bildspalte ≥1300px */
    --ob-card-img-w-event: 200px;         /* Event-Card Bildspalte */

    /* Buttons (§6) */
    --ob-btn-pad: 10px 20px;
    --ob-btn-border-w: 2px;
    --ob-btn-minw: 220px;
    --ob-btn-transition: all 300ms ease;
    --ob-transition-fast: all 200ms ease;

    /* Formular/Filter (§7) */
    --ob-input-minh: 54px;
    --ob-input-colored-h: 50px;
    --ob-pill-pad: 4px 15px;
}

/* ============================================================================
   2. BASIS — Body-Typo im Strecken-Scope (tokens-extraction.md §2)
   ========================================================================== */
.ob-root {
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    line-height: var(--ob-lh-base);
    color: var(--ob-color-text);
}

/* Box-Modell: der Bestand laeuft unter Bootstrap-Reboot (border-box global);
   die Extension-Sandbox hat keinen globalen Reset (Tailwind-Preflight aus).
   Alle ob-*-Komponenten rechnen daher explizit mit border-box (sonst brechen
   50%-Spalten + Gutter-Padding um). */
.ob-root [class^="ob-"],
.ob-root [class*=" ob-"],
.ob-root [class^="ob-"]::before,
.ob-root [class*=" ob-"]::after {
    box-sizing: border-box;
}

/* Container im Bestands-Mass (1310px inkl. 2x25px Padding). Auf Seiten, deren
   TYPO3-Rahmen bereits einen .container liefert, ob-container--flush setzen
   (verhindert doppeltes Padding). */
.ob-root.ob-container,
.ob-root .ob-container {
    max-width: var(--ob-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ob-container-pad);
    padding-right: var(--ob-container-pad);
}
.ob-root.ob-container--flush,
.ob-root .ob-container--flush {
    padding-left: 0;
    padding-right: 0;
}

/* Fokus-Sichtbarkeit (WCAG 2.1 AA): einheitlicher, kontrastreicher Ring. */
.ob-root a:focus-visible,
.ob-root button:focus-visible,
.ob-root input:focus-visible,
.ob-root select:focus-visible,
.ob-root [tabindex]:focus-visible {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}

/* ============================================================================
   3. BUTTONS — Quelle: tokens-extraction.md §6 (.button-primary Nachbau)
   ========================================================================== */
.ob-root .ob-btn {
    display: inline-block;
    padding: var(--ob-btn-pad);
    min-width: var(--ob-btn-minw);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    border-radius: var(--ob-radius-button);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ob-btn-transition);
}
/* Hover invertiert: weißer BG, roter Text — KEIN dunkleres Rot (Bestand). */
.ob-root .ob-btn:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    text-decoration: none;
}
.ob-root .ob-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
/* Outline-Variante (.button-primary--inverted) */
.ob-root .ob-btn--inverted {
    background: transparent;
    color: var(--ob-color-primary);
}
.ob-root .ob-btn--inverted:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Kompakt-Variante (Booking-Bar: min-width aufgehoben) */
.ob-root .ob-btn--compact {
    min-width: 10px;
    padding: 10px 30px;
}

/* ============================================================================
   4. HERO — Quelle: reference-layouts.md §1.1 (linksbündig, H1 rot 54px,
      H3-Subline grau 30px Brown), tokens-extraction.md §8
   ========================================================================== */
.ob-root .ob-hero {
    margin-bottom: var(--ob-space-headline-gap);
}
.ob-root .ob-hero__title {
    margin: 0;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h1);
    line-height: 1.2;
}
.ob-root .ob-hero__subline {
    margin: 0;
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-weight: 400;
    font-size: var(--ob-fs-h3);
    line-height: 1.2;
}
.ob-root .ob-hero__intro {
    margin-top: var(--ob-space-headline-gap);
    font-size: var(--ob-fs-base);
    line-height: 25px; /* .text 16px/25px */
    max-width: 62em;
}
.ob-root .ob-hero--center {
    text-align: center;
}
@media (min-width: 992px) {
    .ob-root .ob-hero__title { font-size: var(--ob-fs-h1-lg); }
    .ob-root .ob-hero__subline { font-size: var(--ob-fs-h3-lg); }
}

/* ============================================================================
   5. ERGEBNIS-HEADER — Quelle: reference-layouts.md §1.4
      („94 Ergebnisse" + Karten-Toggle links + Sortierung rechts)
   ========================================================================== */
.ob-root .ob-result-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 25px;
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ob-color-border);
}
.ob-root .ob-result-header__count {
    margin: 0;
    font-weight: 700;
    color: var(--ob-color-text);
}
.ob-root .ob-result-header__sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.ob-root .ob-result-header__sort select {
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ob-color-border-input);
    border-radius: var(--ob-radius-input);
    padding: 8px 0;
    min-height: 44px; /* Touch-Target */
    cursor: pointer;
}
/* Karten-Toggle: Checkbox-Switch wie Bestand (.maptoggle) */
.ob-root .ob-result-header__maptoggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.ob-root .ob-result-header__maptoggle input {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
}
.ob-root .ob-result-header__maptoggle .ob-switch {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    border: 1px solid var(--ob-color-border);
    border-radius: 35px; /* Map-Toggle-Chip-Radius (Sonderfall Bestand) */
    background: var(--ob-color-bg-alt);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-result-header__maptoggle .ob-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--ob-radius-round);
    background: var(--ob-color-bg);
    box-shadow: var(--ob-shadow-sticky);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-result-header__maptoggle input:checked + .ob-switch {
    background: var(--ob-color-primary);
    border-color: var(--ob-color-primary);
}
.ob-root .ob-result-header__maptoggle input:checked + .ob-switch::after {
    left: 22px;
}
.ob-root .ob-result-header__maptoggle input:focus-visible + .ob-switch {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}

/* ============================================================================
   6. CARD-GRID — Quelle: reference-layouts.md §0/§1.5 (Bootstrap-Rhythmus
      col-md-6, Gutter 2×25px, Karten-Abstand 50/60px) — OHNE Bootstrap-Klassen
   ========================================================================== */
.ob-root .ob-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--ob-grid-gutter));
    padding: 0;
    list-style: none;
}
.ob-root .ob-grid__item {
    width: 100%;
    padding: 0 var(--ob-grid-gutter);
    margin-bottom: var(--ob-space-card-gap-y);
}
@media (min-width: 990px) {
    .ob-root .ob-grid__item { width: 50%; }
}
@media (min-width: 1300px) {
    .ob-root .ob-grid__item { margin-bottom: var(--ob-space-card-gap-y-lg); }
}

/* ============================================================================
   7. RESULT-CARD — Quelle: tokens-extraction.md §8 + reference-layouts.md §1.5
      Flach, #F4F4F4, radius 0, Hover #F8E8E9, Signatur-Overlap 35px,
      ≥1300px horizontal mit 250px-Bild.
   ========================================================================== */
.ob-root .ob-card {
    position: relative;
    height: 100%;
    transition: var(--ob-btn-transition);
}
.ob-root .ob-card__inner {
    height: 100%;
}
/* Bild-Container: mobil oben, 85% Breite (Bestand .serviceProvider-list-images) */
.ob-root .ob-card__media {
    position: relative;
    width: 85%;
    background: var(--ob-color-bg-alt);
    z-index: 1;
}
/* Abnahme 03.08.2026 (Stefan: „im Slider haben die Bilder unterschiedliche
   Groessen"): `height: auto` liess jedes Bild seine eigene Hoehe bestimmen -
   gemessen auf der Liste 167px, 188px und bei einem Portraitbild 313px, also
   drei verschieden hohe Karten nebeneinander. Ein fixes 4:3-Fenster mit
   `object-fit: cover` haelt alle Karten gleich hoch, egal welches
   Seitenverhaeltnis Feratel liefert. */
.ob-root .ob-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
}
/* Fallback ohne Bild (z. B. Events): Icon auf grauer Fläche statt Grauloch */
.ob-root .ob-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--ob-color-border-input);
}
.ob-root .ob-card__media--empty svg {
    width: 48px;
    height: 48px;
}
/* Content-Box: Signatur-Overlap (margin-left 35px / margin-top -35px) */
.ob-root .ob-card__content {
    position: relative;
    z-index: 4;
    margin-left: var(--ob-space-card-offset);
    margin-top: calc(-1 * var(--ob-space-card-offset));
    padding: var(--ob-space-card-pad);
    background: var(--ob-color-surface-card);
    border-radius: var(--ob-radius-card);
    box-shadow: var(--ob-shadow-card);
    transition: var(--ob-btn-transition);
}
.ob-root .ob-card:hover .ob-card__content {
    background: var(--ob-color-primary-soft);
}
/* Links in der Karte: grau, Hover ohne Underline (Bestand) */
.ob-root .ob-card a {
    color: var(--ob-color-text);
    text-decoration: none;
    display: block;
}
.ob-root .ob-card a:hover {
    text-decoration: none;
}
/* ≥1300px: horizontal — Bild links 250px ragt aus der Fläche, Content rechts */
@media (min-width: 1300px) {
    .ob-root .ob-card__inner {
        display: flex;
        align-items: flex-start;
        background: var(--ob-color-surface-card);
        margin-left: var(--ob-space-card-offset);
        transition: var(--ob-btn-transition);
    }
    .ob-root .ob-card:hover .ob-card__inner {
        background: var(--ob-color-primary-soft);
    }
    .ob-root .ob-card__media {
        flex: 0 0 var(--ob-card-img-w);
        max-width: var(--ob-card-img-w);
        width: var(--ob-card-img-w);
        margin-left: calc(-1 * var(--ob-space-card-offset));
        position: relative;
        top: -20px;
    }
    .ob-root .ob-card__content {
        flex: 1 1 auto;
        margin: 0;
        padding: 20px 10px 20px 25px;
        background: transparent;
    }
    .ob-root .ob-card:hover .ob-card__content {
        background: transparent;
    }
}
/* Karten-Elemente (Bestand-Metriken §8 Cards) */
.ob-root .ob-card__classification {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    color: var(--ob-color-primary);
    font-size: 15px;
    min-height: 18px;
}
/* Sterne-Glyphen im Bestandsrot (booking.css setzt Goldton --c-star) */
.ob-root .ob-card__classification .osttirol-stars__star {
    color: var(--ob-color-primary);
    font-size: 18px;
    line-height: 1;
}
/* Blumen-/Edelweiss-Symbole (Sprite #oai-cls-*, gefuellt, currentColor) */
.ob-root .ob-card__classification .ob-cls-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
/* Superior-Zusatz als hochgestelltes S (Bestand classificationSuperior) */
.ob-root .ob-card__classification .ob-cls-superior sup {
    font-weight: 700;
    font-size: 12px;
    margin-left: 2px;
}
.ob-root .ob-card__title {
    margin: var(--ob-space-title-gap) 0;
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body); /* Brown, NICHT CambridgeBold (Bestand!) */
    font-weight: 700;
    font-size: 24px;
    line-height: 25px;
}
.ob-root .ob-card__cat {
    font-size: 15px;
    line-height: 18px;
    margin: 4px 0 10px;
}
.ob-root .ob-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ob-color-primary);
    margin: 4px 0;
}
.ob-root .ob-card__features svg {
    width: 26px;
    height: 26px;
}
.ob-root .ob-card__description {
    margin-top: var(--ob-space-desc-gap);
    font-size: var(--ob-fs-base);
}
/* Social-Proof-Chip („X Besucher sehen sich gerade die Unterkunft an"):
   rosa BG (Token = #F8E8E9), Uhr-Icon, „HOT"-Praefix fett rot ab 10 — Live-Optik */
.ob-root .ob-card__viewers {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ob-color-primary-soft);
    font-size: 13px;
    line-height: 1.3;
    padding: 4px 6px;
    margin: 6px 0;
}
.ob-root .ob-card__viewers .ob-card__viewers-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--ob-color-primary);
}
.ob-root .ob-card__viewers .ob-card__viewers-hot {
    color: var(--ob-color-primary);
    font-weight: 700;
}
/* Preiszeile: Rating links, Preis rechts (flex, unten ausgerichtet) */
.ob-root .ob-card__pricewrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: var(--ob-space-desc-gap);
}
.ob-root .ob-card__price-container {
    text-align: right;
    margin-left: auto;
}
/* Abnahme 03.08.2026 (Stefan: „der Preis ist sehr nah an dem ab"): „ab" und
   Betrag standen ohne Trenner direkt aneinander („ab€ 94,00"). */
.ob-root .ob-card__price-from {
    font-size: 14px;
    margin-right: 5px;
}
.ob-root .ob-card__price {
    font-size: 25px;
    color: var(--ob-color-primary);
    font-weight: 700;
}
.ob-root .ob-card__price-description {
    font-size: 12px;
}
/* Mehrzeilige Preis-Beschreibung („2 Personen / 4 Nächte" + „inkl. …") */
.ob-root .ob-card__price-descline {
    display: block;
}
/* Datums-/Zeitzeile (Events, Pauschalen-Zeitraum) */
.ob-root .ob-card__datetime {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: var(--ob-space-desc-gap);
}
.ob-root .ob-card__datetime-day {
    color: var(--ob-color-primary);
    font-weight: 700;
}
.ob-root .ob-card__location {
    font-size: 15px;
    margin: 4px 0;
}
/* CTA-Zeile (Link-Label rechts, z. B. „Details" / „mehr erfahren") */
.ob-root .ob-card__cta {
    margin-left: auto;
    text-align: right;
    color: var(--ob-color-primary);
    font-weight: 700;
}
.ob-root .ob-card a:hover .ob-card__cta {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   7b. CARD-BILDKARUSSELL (Alpine, Unterkunfts-Card) — Prev/Next-Pfeile +
       Zaehler ueberlagern den Media-Slot (obCardGallery, booking.js).
       Bestandslook: radius 0, Token-Farben, Hover-Reveal nur auf Desktop.
   -------------------------------------------------------------------------- */
.ob-root .ob-card__gallery {
    position: relative;
}
/* Pfeil-Buttons: 44x44 Touch-Target (WCAG), vertikal zentriert ueberlagert */
.ob-root .ob-card__gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0; /* Bestand: radius 0 */
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    cursor: pointer;
    opacity: 0;
    transition: var(--ob-btn-transition);
    /* lokale Stacking-Ebene INNERHALB von .ob-card__media (z-index 1) —
       Card-Bestand stapelt numerisch (media 1 / content 4), globale
       --z-*-Tokens (dropdown/modal/…) gelten hier nicht */
    z-index: 2;
}
.ob-root .ob-card__gallery-btn--prev { left: 0; }
.ob-root .ob-card__gallery-btn--next { right: 0; }
.ob-root .ob-card__gallery-btn svg {
    width: 20px;
    height: 20px;
}
.ob-root .ob-card__gallery-btn:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Desktop: Pfeile erst bei Card-Hover bzw. Tastatur-Fokus einblenden */
.ob-root .ob-card:hover .ob-card__gallery-btn,
.ob-root .ob-card__gallery-btn:focus-visible {
    opacity: 1;
}
/* Touch-Geraete (kein Hover): Pfeile immer sichtbar */
@media (hover: none) {
    .ob-root .ob-card__gallery-btn {
        opacity: 1;
    }
}
/* Bild-Zaehler „2/14" unten rechts auf dem Bild. Mobil ueberlappt der
   Content die Media-Flaeche um 35px (Signatur-Overlap, z-index 4 > media 1)
   — Zaehler daher um den Offset anheben, damit er sichtbar bleibt. */
.ob-root .ob-card__gallery-count {
    position: absolute;
    right: 0;
    bottom: var(--ob-space-card-offset);
    padding: 2px 8px;
    background: var(--ob-color-bg);
    color: var(--ob-color-text);
    font-size: 13px;
    line-height: 18px;
    z-index: 2;
    /* rein informativ — darf bei sehr flachen Bildern nie den Next-Button
       (gleiche rechte Kante) verdecken */
    pointer-events: none;
}
/* ≥1300px: horizontales Layout ohne Content-Overlap — Zaehler bündig unten */
@media (min-width: 1300px) {
    .ob-root .ob-card__gallery-count {
        bottom: 0;
    }
}

/* ----------------------------------------------------------------------------
   7c. MERKEN-HERZ (Wishlist-Overlay auf der Card, Feature-Flag
       wishlistEnabled) - gleiche Formsprache wie die Galerie-Pfeile (44x44,
       radius 0, Token-Farben, buendig an der Bildkante).
       Sitzt oben LINKS: oben rechts liegt das Badge-Overlay (Angebot/
       Bestpreis/Top-Event, z-index 5), unten rechts der Galerie-Zaehler.
       Zustand/Store: Resources/Public/JavaScript/wishlist.js.
   -------------------------------------------------------------------------- */
.ob-root .ob-card__wish {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Touch-Target 44x44 (UI-Checkliste) bei optisch kleinerem Icon */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0; /* Bestand: radius 0 */
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    cursor: pointer;
    transition: var(--ob-btn-transition);
    /* Abnahme 03.08.2026 (Stefan: „das Herz sollte ausserhalb noch einen Rand
       haben, damit es nicht nur weiss ist" - gilt fuer alle Module): eine weisse
       Flaeche auf hellem Bild verliert ihre Kante. Schatten statt Border, damit
       die 44px-Trefferflaeche unveraendert bleibt. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
    /* Ebene INNERHALB von .ob-card__media (z-index 1) - ueber Bild und
       Galerie-Pfeilen (2). Der Content-Block (4) liegt darueber, ueberlappt
       aber nur die UNTERE Bildkante (Signatur-Overlap) - nie das Herz. */
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}
.ob-root .ob-card__wish-icon {
    width: 22px;
    height: 22px;
    display: block;
    /* Klicks immer am Button, nie am SVG-Pfad ($el in toggleEl bleibt der
       Button und behaelt damit seine data-wish-*-Attribute) */
    pointer-events: none;
    fill: none;
    stroke: currentColor;
}
.ob-root .ob-card__wish:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Fokus-Ring bewusst OHNE eigene Regel: der Button erbt den einheitlichen
   Ring aus dem globalen .ob-root button:focus-visible (2px, offset 2px) wie
   die Galerie-Pfeile. .ob-card__media/.ob-card__inner haben kein
   overflow:hidden, der nach aussen versetzte Ring wird also nicht geclippt. */
/* Gemerkt: Herz gefuellt (CSS gewinnt gegen das fill="none"-Attribut) */
.ob-root .ob-card__wish.is-saved .ob-card__wish-icon {
    fill: currentColor;
}
.ob-root .ob-card__wish:active {
    transform: scale(0.92);
}
/* Leitplanke gegen Kollision mit dem Galerie-Prev-Pfeil (Unterkunfts-Card):
   der Pfeil sitzt vertikal zentriert (top 50%, 44px hoch), das Herz fix oben
   links (0..44px). Unterhalb von 132px Bildhoehe wandert der Pfeil in die
   Herz-Zone und waere dort verdeckt (Herz z-index 3 > Pfeil 2). Bei den
   ueblichen Foto-Seitenverhaeltnissen (4:3/3:2/16:9) greift die Regel nie -
   nur bei extremen Panorama-Bildern im schmalen 85%-Media-Slot. */
.ob-root .ob-card__gallery {
    min-height: 132px;
}
@media (prefers-reduced-motion: reduce) {
    .ob-root .ob-card__wish,
    .ob-root .ob-card__wish:active {
        transition: none;
        transform: none;
    }
}

/* ============================================================================
   8. BADGE — Quelle: tokens-extraction.md §8 (.serviceProvider-list-banner:
      rot, eckig, absolut oben rechts, halb überlappend)
   ========================================================================== */
.ob-root .ob-badge {
    display: inline-block;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    padding: 5px 12px;
    font-size: 13px;
    border-radius: var(--ob-radius-badge);
}
.ob-root .ob-badge--overlay {
    position: absolute;
    top: 0;
    right: 15px;
    transform: translateY(-50%);
    z-index: 5;
}

/* ============================================================================
   9. SCORE-KREIS — Quelle: reference-layouts.md §1.5 Feld 6 (Meta-Rating
      c100-Kreis + „Ausgezeichnet" + Anzahl). Nachbau als Border-Kreis.
   ========================================================================== */
.ob-root .ob-score {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.ob-root .ob-score__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 3px solid var(--ob-color-primary);
    border-radius: var(--ob-radius-round);
    color: var(--ob-color-primary);
    font-weight: 700;
    font-size: 14px;
    background: var(--ob-color-bg);
}
.ob-root .ob-score__label {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}
.ob-root .ob-score__count {
    font-size: 13px;
}

/* ============================================================================
   10. FILTER-OFFCANVAS — Quelle: reference-layouts.md §1.3 (Modal
       #searchViewFilter) + tokens-extraction.md §7 (Modal-BG #F4F4F4,
       padding 20px, max-height 80vh). Als Offcanvas-Panel umgesetzt.
   ========================================================================== */
.ob-root .ob-filter-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    max-width: 100vw;
    z-index: var(--z-modal, 700);
    display: flex;
    flex-direction: column;
    background: var(--ob-color-bg-alt);
    box-shadow: var(--ob-shadow-panel);
    transform: translateX(100%);
    transition: transform 300ms ease;
    overflow: hidden;
}
.ob-root .ob-filter-offcanvas.is-open,
.ob-root .ob-filter-offcanvas.osttirol-filters--open {
    transform: translateX(0);
}
.ob-root .ob-filter-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid var(--ob-color-border);
    background: var(--ob-color-bg);
}
.ob-root .ob-filter-offcanvas__title {
    margin: 0;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h3);
}
.ob-root .ob-filter-offcanvas__close {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--ob-color-text);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}
.ob-root .ob-filter-offcanvas__close:hover {
    color: var(--ob-color-primary);
}
.ob-root .ob-filter-offcanvas__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}
.ob-root .ob-filter-offcanvas__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--ob-color-border);
    background: var(--ob-color-bg);
}
.ob-root .ob-filter-offcanvas__footer .ob-btn {
    flex: 1 1 auto;
    min-width: 0;
}
/* Overlay hinter dem Offcanvas */
.ob-root .ob-filter-overlay {
    position: fixed;
    inset: 0;
    background: var(--ob-color-scrim);
    z-index: calc(var(--z-modal, 700) - 1);
}

/* Filter-Sektionen im Offcanvas (Bestand: modal-section-*).
   Chip-/Listen-Regeln gelten zusaetzlich in der Toolbar (.ob-toolbar,
   aktive Filter-Chips neben der Filter-Pill, §14). */
.ob-root .ob-filter-offcanvas .ob-filter-group {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}
.ob-root .ob-filter-offcanvas .ob-filter-legend {
    display: block;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-weight: 700;
    font-size: var(--ob-fs-base);
    margin-bottom: 8px;
}
.ob-root .ob-filter-offcanvas .ob-filter-field {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ob-color-border-input);
    border-radius: var(--ob-radius-input);
    min-height: var(--ob-input-minh);
    padding: 8px 0;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
}
.ob-root .ob-filter-offcanvas .ob-filter-field::placeholder {
    color: var(--ob-color-text-muted);
}
/* Filter-Chips im Pill-Look des Bestands (border #D9D9D9, radius 15px,
   aktiv rot/weiß, Transition 200ms) */
.ob-root .ob-toolbar .ob-filter-chip,
.ob-root .ob-filter-offcanvas .ob-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ob-pill-pad);
    min-height: 32px;
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: 14px;
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-toolbar .ob-filter-chip:hover,
/*
 * Zweistufiger Standortfilter (Abnahme-Punkt 49): Orte einer Ferienregion.
 * Gleiche Groesse wie die Regions-Chips (32 px Mindesthoehe bleibt das
 * Touch-Ziel), abgesetzt nur ueber den ruhigeren Hintergrund - die Ebene selbst
 * zeigen Einrueckung und Aufklapp-Pfeil. Die Spezifitaet muss der Chip-Basis
 * oben entsprechen (0,3,0), sonst greift die Regel im Off-Canvas nicht
 * (gemessen: eine reine `.ob-filter-chip--town`-Regel blieb ohne Wirkung).
 */
.ob-root .ob-toolbar .ob-filter-chip--town:not(.is-active),
.ob-root .ob-filter-offcanvas .ob-filter-chip--town:not(.is-active) {
    background: var(--ob-color-bg-alt);
}
.ob-root .ob-filter-offcanvas .ob-filter-chip:hover {
    border-color: var(--ob-color-primary);
    color: var(--ob-color-primary);
}
.ob-root .ob-toolbar .ob-filter-chip.is-active,
.ob-root .ob-filter-offcanvas .ob-filter-chip.is-active {
    background: var(--ob-color-primary);
    border-color: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
.ob-root .ob-toolbar .ob-filter-list,
.ob-root .ob-filter-offcanvas .ob-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob-root .ob-filter-offcanvas .ob-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 8px 0;
    min-height: 44px;
    cursor: pointer;
    text-align: left;
}
.ob-root .ob-filter-offcanvas .ob-filter-arrow {
    color: var(--ob-color-primary);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-filter-offcanvas .ob-filter-arrow.is-open {
    transform: rotate(180deg);
}
.ob-root .ob-filter-offcanvas .ob-filter-more {
    background: none;
    border: 0;
    color: var(--ob-color-primary);
    font-size: 14px;
    padding: 8px 0;
    min-height: 44px;
    cursor: pointer;
}
.ob-root .ob-filter-offcanvas .ob-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

/* ============================================================================
   11. SUCHLEISTE ALS PILLS — Quelle: reference-layouts.md §1.3 (pill-date /
       pill-room / „weitere Filter"). Re-Styling der bestehenden
       .ob-searchbar-Struktur aus dem Default-Template (Alpine bleibt).
   ========================================================================== */
.ob-root .ob-searchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    margin-bottom: 15px;
}
.ob-root .ob-searchbar .ob-search-label {
    display: none; /* Bestand: Pills ohne Feld-Labels */
}
.ob-root .ob-searchbar .ob-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--ob-pill-pad);
    min-height: 44px;
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-searchbar .ob-search-trigger:hover {
    border-color: var(--ob-color-primary);
    color: var(--ob-color-primary);
}
/* „weitere Filter"-Pill (ohne Rahmen, mit Chevron — Bestand pill-nopill) */
.ob-root .ob-searchbar .ob-search-morefilters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
}
.ob-root .ob-searchbar .ob-search-morefilters:hover {
    color: var(--ob-color-primary);
}
.ob-root .ob-searchbar .ob-search-morefilters .ob-filter-arrow {
    color: var(--ob-color-primary);
}
.ob-root .ob-searchbar .ob-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ob-btn-pad);
    min-height: 44px;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    border-radius: var(--ob-radius-button);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    cursor: pointer;
    transition: var(--ob-btn-transition);
}
.ob-root .ob-searchbar .ob-search-btn:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
.ob-root .ob-searchbar .ob-search-btn--secondary {
    background: transparent;
    color: var(--ob-color-primary);
}
.ob-root .ob-searchbar .ob-search-btn--secondary:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
.ob-root .ob-searchbar .ob-search-field {
    position: relative;
}

/* ============================================================================
   13. LEGACY-BRÜCKEN — bestehende Default-Klassen im Bestandslook nachziehen
       (Elemente, deren Alpine-Markup wir NICHT anfassen: Kalender-Overlay,
       Room-Config-Panel, View-Toggle, Pagination-Buttons).
   ========================================================================== */

/* Schrift-Bruecke: booking.css, cart.css und die Tailwind-Insel setzen an
   vielen Stellen `font-family: var(--font-display|--font-body)` — die Tokens
   der T7-Welt loesen auf Outfit auf. Ohne diese Umleitung stehen einzelne
   Werte mitten im Brown-Satz in einer Fremdschrift (am 29.07.2026 gefunden:
   TrustYou-Score und „Aktuell relevant" auf dem Unterkunfts-Detail, die
   Trefferzahl der Unterkunftsliste in Monospace).
   BEIDE Tokens zeigen auf Brown, nicht auf CambridgeBold: die Display-Schrift
   traegt im Bestand nur die Seiten-H1/H2 (§4) — Scores, Labels und
   Button-Beschriftungen laufen dort in Brown. */
.ob-root {
    --font-body: var(--ob-font-body);
    --font-display: var(--ob-font-body);
    /* Die Modul-Stylesheets leiten sich eigene Schrift-Token ab, deklarieren
       sie aber auf `:root`. Custom Properties werden dort aufgeloest, wo sie
       DEKLARIERT sind — die beiden Zeilen darueber erreichen sie deshalb
       nicht, jedes Token muss einzeln umgebogen werden. */
    --pk-font: var(--ob-font-body);   /* packages.css */
    --ev-font: var(--ob-font-body);   /* events.css */
    --exp-font: var(--ob-font-body);  /* experiences.css */
    --brc-font: var(--ob-font-body);  /* brochures.css */

    /* Neutralen-Bruecke: die T7-Palette ist warm gehalten (#f6f5f3 / #e3e1dd),
       der Bestand neutral grau (#F4F4F4 / #D9D9D9). Nebeneinander liest sich
       das als zwei Grautoene auf einer Seite — am 29.07.2026 an der
       KI-Suchleiste der Unterkunftsliste und der Event-Liste aufgefallen.
       `--c-text` steht in T7 auf Fast-Schwarz; der Bestand fuehrt Fliesstext
       in #5D5D5D (Kontrast auf Weiss 7:1, weiterhin AA/AAA).
       `--c-text-subtle` bleibt bewusst stehen: das Bestands-Pendant #aeaeae
       ist als Textfarbe nicht AA-tauglich und wird nur fuer Platzhalter
       verwendet (§7). */
    --c-bg-alt: var(--ob-color-bg-alt);
    --c-bg-sunken: var(--ob-color-bg-alt);
    --c-border: var(--ob-color-border);
    --c-border-strong: var(--ob-color-border-input);
    --c-text: var(--ob-color-text);
    /* … und dieselben Werte noch einmal fuer die Modul-Aliasse: sie stehen wie
       die Schrift-Token auf `:root` und werden dort aufgeloest. */
    --pk-text: var(--ob-color-text);
    --pk-bg-alt: var(--ob-color-bg-alt);
    --pk-bg-sunken: var(--ob-color-bg-alt);
    --pk-border: var(--ob-color-border);
    --pk-border-strong: var(--ob-color-border-input);
    --ev-text: var(--ob-color-text);
    --ev-bg-alt: var(--ob-color-bg-alt);
    --ev-bg-sunken: var(--ob-color-bg-alt);
    --ev-border: var(--ob-color-border);
    --ev-border-strong: var(--ob-color-border-input);
    --exp-text: var(--ob-color-text);
    --exp-bg-alt: var(--ob-color-bg-alt);
    --exp-bg-sunken: var(--ob-color-bg-alt);
    --exp-border: var(--ob-color-border);
    --exp-border-strong: var(--ob-color-border-input);
    --brc-text: var(--ob-color-text);
    --brc-bg-alt: var(--ob-color-bg-alt);
    --brc-bg-sunken: var(--ob-color-bg-alt);
    --brc-border: var(--ob-color-border);
    --brc-border-strong: var(--ob-color-border-input);
    --ty-track: var(--ob-color-border);
    /* Sterne: §7 zieht die Klassifizierung der Card schon ins Markenrot, die
       Hotel-Karten der Pauschalen-Buchung liefen noch im T7-Gold (#c8961e,
       auf Weiss 3,05:1). */
    --c-star: var(--ob-color-primary);
}
/* tw-font-mono ist in app.css fest auf einen Monospace-Stack verdrahtet und
   nicht ueber ein Token erreichbar. */
.ob-root .tw-font-mono {
    font-family: var(--ob-font-body);
}
/* Feld-Labels der Buchungsleiste: app.css gibt ihnen Monospace in
   Versalien — eine Anmutung, die der Bestand nirgends kennt. In der
   Filterleiste sind sie ausgeblendet (§11), in der Buchungsbox des
   Unterkunfts-Details stehen sie sichtbar ueber den Pills. */
.ob-root .ob-search-label {
    font-family: var(--ob-font-body);
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ob-color-text);
}

.ob-root .osttirol-cal-overlay,
.ob-root .osttirol-room-config__panel {
    background: var(--ob-color-bg-alt);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-card);
    box-shadow: var(--ob-shadow-panel);
}
.ob-root .osttirol-view-toggle button {
    border-radius: var(--ob-radius-button);
    font-family: var(--ob-font-body);
}

/* ============================================================================
   14. TOOLBAR — Filter-Pill mit aktiven Filtern daneben
       (Bestand Pauschalen §2.2: pill-filters + .activities-filter-contents)
   ========================================================================== */
.ob-root .ob-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 0 15px;
}
.ob-root .ob-toolbar__active {
    margin: 0;
}
/* Der „Filter"-Trigger ist dasselbe Bedienelement wie in der Suchleiste (§11)
   und bekommt hier dieselbe Groesse. Ohne diese Regel blieb er in der Toolbar
   (Infrastruktur, Pauschalen) bei 26px Hoehe — unter dem 44px-Touch-Ziel. */
.ob-root .ob-toolbar .ob-search-morefilters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
}
.ob-root .ob-toolbar .ob-search-morefilters:hover,
.ob-root .ob-toolbar .ob-search-morefilters.is-active {
    color: var(--ob-color-primary);
}
.ob-root .ob-toolbar .ob-search-morefilters .ob-filter-arrow {
    color: var(--ob-color-primary);
}
/* ============================================================================
   14b. FILTERLINE (Erlebnisse) — einzeilige Filterleiste: Suchfeld (wächst
        flexibel) + Kategorie-/Ort-Select in Pill-Optik des Bestands
        (Border-Token, radius 15px, weißer BG, hover/aktiv Markenrot) +
        Reset-Button. Mobil (<768px) bricht die Zeile um: Suchfeld volle
        Breite, Selects nebeneinander. Touch-Targets min. 44px.
   ========================================================================== */
.ob-root .ob-filterline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 0 15px;
}
/* Suchfeld als Pill mit Lupe — wächst flexibel, nimmt den Restplatz */
.ob-root .ob-filterline__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    color: var(--ob-color-text);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-filterline__search:focus-within,
.ob-root .ob-filterline__search:hover {
    border-color: var(--ob-color-primary);
}
.ob-root .ob-filterline__search-icon {
    flex: 0 0 auto;
    color: var(--ob-color-text-muted);
}
.ob-root .ob-filterline__input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
    outline: none;
}
.ob-root .ob-filterline__input::placeholder {
    color: var(--ob-color-text-muted);
}
/* Select-Pill: natives <select>, Pfeil bleibt nativ (robust + barrierefrei) */
.ob-root .ob-filterline__field {
    display: inline-flex;
    flex: 0 1 auto;
}
.ob-root .ob-filterline__select {
    min-height: 44px;
    max-width: 100%;
    padding: var(--ob-pill-pad);
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-filterline__select:hover,
.ob-root .ob-filterline__select:focus {
    border-color: var(--ob-color-primary);
    color: var(--ob-color-primary);
}
/* Reset: dezente Text-Pill, nur sichtbar bei aktiven Filtern (x-show) */
.ob-root .ob-filterline__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    background: none;
    border: 0;
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-filterline__reset:hover {
    text-decoration: underline;
}
/* Mobil: Suchfeld volle Breite, Selects teilen sich die zweite Zeile */
@media (max-width: 767px) {
    .ob-root .ob-filterline__search {
        flex: 1 1 100%;
    }
    .ob-root .ob-filterline__field {
        flex: 1 1 calc(50% - 12px);
    }
    .ob-root .ob-filterline__select {
        width: 100%;
    }
}

/* ============================================================================
   14c. EVENT-FILTERLEISTE — Bestand Events (reference: searchView-events):
        sticky Leiste, Datum-Pill links (Kalender-Icon + von/bis, pill-date),
        „Filter ›"-Text-Pill rechts (pill-nopill). Die generischen
        .ob-searchbar-Regeln (§11) liefern die Pill-Grundoptik; hier nur die
        Event-Spezifika (sticky, Datum-Inputs, Rechtsbuendigkeit).
   ========================================================================== */
.ob-root .ob-searchbar--events {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 400);
    background: var(--ob-color-bg);
    margin-bottom: 0;
    /* app.css stylt .ob-searchbar als Karte (Border/Radius/Schatten) —
       Bestand-Events-Leiste ist rahmenlos auf weissem Grund. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    align-items: center;
    padding: 10px 0;
}
/* Datum-Pill: weiße Pill mit Kalender-Icon + zwei rahmenlosen date-Inputs */
.ob-root .ob-evbar-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-evbar-date:focus-within,
.ob-root .ob-evbar-date:hover {
    border-color: var(--ob-color-primary);
}
/* `.ob-evbar-date__icon` ist am 29.07.2026 aus dem Markup geflogen: seit die
   Felder wieder echte `type=date`-Inputs sind (host-bridge.js), tragen sie ihren
   eigenen Kalender-Indikator — mit dem dekorativen SVG davor standen drei
   Kalender-Symbole in einer Pill. Regel entfernt, nicht nur ungenutzt. */
.ob-root .ob-evbar-date__input {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
    outline: none;
    min-width: 0;
    width: 8.5em;
    cursor: pointer;
}
/* Kein --ob-color-text-muted: #aeaeae ist der Platzhalter-Ton (§1) und
   erreicht als Textfarbe auf Weiss nur 2,2:1. */
.ob-root .ob-evbar-date__divider {
    color: var(--ob-color-text);
}
/* „Filter ›" rechtsbuendig (Bestand: pill-filters am rechten Rand) */
.ob-root .ob-searchbar--events .ob-search-morefilters {
    margin-left: auto;
}
.ob-root .ob-searchbar--events .ob-search-morefilters.is-active {
    color: var(--ob-color-primary);
}
/* Aktive Filter-Chips zwischen Pill und Filter-Trigger */
.ob-root .ob-searchbar__active {
    margin: 0;
}
/* Mobil: Datum-Pill volle Breite (Inputs teilen sich den Platz flexibel,
   statt fixer 8.5em — sonst Seiten-Overflow bei 375px), Filter-Trigger
   darunter links */
@media (max-width: 767px) {
    .ob-root .ob-evbar-date {
        flex: 1 1 100%;
        justify-content: center;
        /* Ohne min-width:0 greift die automatische Mindestgroesse von
           Flex-Elementen: die Pill bleibt so breit wie ihre beiden
           date-Inputs zusammen (bei 390px gemessen 429px statt 325px) und
           wird rechts abgeschnitten — `flex: 1 1 100%` allein reicht nicht. */
        min-width: 0;
    }
    .ob-root .ob-evbar-date__input {
        width: auto;
        flex: 1 1 0;
    }
    .ob-root .ob-searchbar--events .ob-search-morefilters {
        margin-left: 0;
    }
}

/* ============================================================================
   15. „SUCHEN UND BUCHEN"-BOX — Bestand Booking-Bar (reference-layouts.md §2.4:
       grauer Balken, Ueberschrift „Suchen und Buchen", input-colored-Felder
       #F8E8E9 h50, Submit .button-primary)
   ========================================================================== */
.ob-root .ob-bookingbox {
    background: var(--ob-color-bg-alt);
    padding: 25px;
    margin-bottom: 25px;
}
.ob-root .ob-bookingbox__title {
    margin: 0 0 15px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h3);
    text-align: center;
}
.ob-root .ob-bookingbox__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 15px;
}
.ob-root .ob-bookingbox__field {
    flex: 1 1 260px;
    max-width: 420px;
    display: block;
}
.ob-root .ob-bookingbox__input {
    width: 100%;
    min-height: var(--ob-input-colored-h);
    background: var(--ob-color-primary-soft);
    border: 0;
    border-radius: var(--ob-radius-input);
    padding: 8px 15px;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
}
.ob-root .ob-bookingbox__input::placeholder {
    color: var(--ob-color-text);
    opacity: 0.7;
}

/* ============================================================================
   16. CARD-MODIFIER PAUSCHALEN — Bestand .bigteaserbox-list-item
       (reference-layouts.md §2.3): Bild QUADRATISCH oben (~92% Breite),
       Content-Box ueberlappt unten rechts (Signature-Look) AUF ALLEN
       Breakpoints — die horizontale ≥1300px-Basiskarte wird hier neutralisiert.
       Feld-Optik: Zeitraum rechtsbuendig, Preis links, CTA rechts.
   ========================================================================== */
.ob-root .ob-card--package .ob-card__media {
    width: 91.666%;
}
.ob-root .ob-card--package .ob-card__media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.ob-root .ob-card--package .ob-card__datetime {
    justify-content: flex-end;
    margin-top: 0;
    font-size: 14px;
}
.ob-root .ob-card--package .ob-card__datetime .ob-card__datetime-day {
    color: var(--ob-color-text);
    font-weight: 400;
}
.ob-root .ob-card--package .ob-card__pricewrap {
    flex-wrap: wrap;
}
.ob-root .ob-card--package .ob-card__price-container {
    margin-left: 0;
    text-align: left;
}
@media (min-width: 1300px) {
    .ob-root .ob-card--package .ob-card__inner {
        display: block;
        background: transparent;
        margin-left: 0;
    }
    .ob-root .ob-card--package:hover .ob-card__inner {
        background: transparent;
    }
    .ob-root .ob-card--package .ob-card__media {
        flex: none;
        width: 91.666%;
        max-width: none;
        margin-left: 0;
        top: 0;
    }
    .ob-root .ob-card--package .ob-card__content {
        margin-left: var(--ob-space-card-offset);
        margin-top: calc(-1 * var(--ob-space-card-offset));
        padding: var(--ob-space-card-pad);
        background: var(--ob-color-surface-card);
    }
    .ob-root .ob-card--package:hover .ob-card__content {
        background: var(--ob-color-primary-soft);
    }
}

/* Vorformatierte Preis-Strings (Pauschalen „ab 320 EUR pro Person",
   Erlebnisse „ab 45 EUR"/„GRATIS") — kompakter als der grosse ab/€-Preis */
.ob-root .ob-card__price--string {
    font-size: 20px;
    line-height: 1.2;
    display: inline-block;
}

/* ============================================================================
   17. CARD-MODIFIER EVENTS — Bestand .events-list-item (reference-layouts.md
       §3.3): schlichte flache Flex-Karte, Bild links 200px (Token), KEIN
       Signatur-Overlap; mobil gestapelt (Bild oben, Content darunter).
       Ohne Bild rendert .ob-card__media--empty (definierter Fallback statt
       leerer Grauspalte des Bestands).
   ========================================================================== */
.ob-root .ob-card--event .ob-card__inner {
    background: var(--ob-color-surface-card);
    transition: var(--ob-btn-transition);
}
.ob-root .ob-card--event:hover .ob-card__inner {
    background: var(--ob-color-primary-soft);
}
.ob-root .ob-card--event .ob-card__media {
    width: 100%;
}
.ob-root .ob-card--event .ob-card__content,
.ob-root .ob-card--event:hover .ob-card__content {
    margin: 0;
    background: transparent;
}
.ob-root .ob-card--event .ob-card__title {
    font-size: 20px;
    line-height: 1.2;
}
/* Content fuellt die Kartenhoehe; Datums-/CTA-Zeile rutscht nach unten
   (Bestand: events-list-dates als letzte Zeile) */
.ob-root .ob-card--event .ob-card__content > a,
.ob-root .ob-card--event .ob-card__content > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ob-root .ob-card--event .ob-card__pricewrap {
    margin-top: auto;
    padding-top: var(--ob-space-desc-gap);
}
.ob-root .ob-card--event .ob-card__datetime {
    margin-top: var(--ob-space-desc-gap);
}
@media (min-width: 768px) {
    .ob-root .ob-card--event .ob-card__inner {
        display: flex;
        align-items: stretch;
        margin-left: 0;
        height: 100%;
    }
    .ob-root .ob-card--event .ob-card__media {
        flex: 0 0 var(--ob-card-img-w-event);
        width: var(--ob-card-img-w-event);
        max-width: var(--ob-card-img-w-event);
        margin-left: 0;
        top: 0;
    }
    .ob-root .ob-card--event .ob-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ob-root .ob-card--event .ob-card__media--empty {
        height: 100%;
        min-height: 193px; /* Bestand-Bildhoehe 200x193 */
    }
    .ob-root .ob-card--event .ob-card__content {
        flex: 1 1 auto;
        padding: 15px 20px;
    }
}

/* §18 FILTER-ZEITRAUM entfernt: die Offcanvas-Sektion „Zeitraum" (einziger
   Konsument von .ob-filter-daterange) wanderte als Datum-Pill in die
   Event-Filterleiste (§14c). */

/* ============================================================================
   19. CARD-MODIFIER POI (Infrastruktur) — abgeleitet aus der Event-Card
       (reference-layouts.md §3.3-Formsprache: flache Flex-Karte, Bild links,
       KEIN Signatur-Overlap) — Informations-Modul, Spec §3.6. Eigener Block
       statt Selektor-Gruppierung, damit die Event-Regeln unangetastet bleiben
       (Regressionsschutz /events).
   ========================================================================== */
.ob-root .ob-card--poi .ob-card__inner {
    background: var(--ob-color-surface-card);
    transition: var(--ob-btn-transition);
}
.ob-root .ob-card--poi:hover .ob-card__inner {
    background: var(--ob-color-primary-soft);
}
.ob-root .ob-card--poi .ob-card__media {
    width: 100%;
}
.ob-root .ob-card--poi .ob-card__content,
.ob-root .ob-card--poi:hover .ob-card__content {
    margin: 0;
    background: transparent;
}
.ob-root .ob-card--poi .ob-card__title {
    font-size: 20px;
    line-height: 1.2;
}
/* Content fuellt die Kartenhoehe; CTA-Zeile („Details") rutscht nach unten */
.ob-root .ob-card--poi .ob-card__content > a,
.ob-root .ob-card--poi .ob-card__content > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ob-root .ob-card--poi .ob-card__pricewrap {
    margin-top: auto;
    padding-top: var(--ob-space-desc-gap);
}
@media (min-width: 768px) {
    .ob-root .ob-card--poi .ob-card__inner {
        display: flex;
        align-items: stretch;
        margin-left: 0;
        height: 100%;
    }
    .ob-root .ob-card--poi .ob-card__media {
        flex: 0 0 var(--ob-card-img-w-event);
        width: var(--ob-card-img-w-event);
        max-width: var(--ob-card-img-w-event);
        margin-left: 0;
        top: 0;
    }
    .ob-root .ob-card--poi .ob-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ob-root .ob-card--poi .ob-card__media--empty {
        height: 100%;
        min-height: 193px;
    }
    .ob-root .ob-card--poi .ob-card__content {
        flex: 1 1 auto;
        padding: 15px 20px;
    }
}

/* ============================================================================
   20. CARD-MODIFIER PROSPEKTE — Bestand .shopitems-list-item
       (reference-layouts.md §4.2): Hochformat-Katalog-Cover 269x380
       (Ratio 0.708), Bild links col-lg-6, Content rechts; mobil Bild oben +
       Content-Overlap (Basiskarten-Verhalten). Aktions-Buttons rechtsbuendig
       (Bestand: beide .text-right).

       FLAECHEN-UMKEHR gegenueber §7: Die Prospektliste steht im Bestand auf
       einem grauen Vollbreiten-Rahmen (TYPO3-Inhaltselement mit
       frame_class = background-grey, am 29.07.2026 auf der Live-Seite
       gemessen: .frame-background-grey, #F4F4F4, padding 72px 0). Der Rahmen
       kommt bewusst von TYPO3, nicht aus dem Plugin. Auf dem grauen Grund
       traegt die Karte die helle Flaeche: Panel weiss, Inner und Bildspalte
       offen — genau andersherum als die Standard-Card auf weissem Grund.
   ========================================================================== */
.ob-root .ob-card--brochure .ob-card__media img {
    aspect-ratio: 269 / 380;
    object-fit: cover;
}
.ob-root .ob-card--brochure .ob-card__media--empty {
    aspect-ratio: 269 / 380;
    min-height: 0;
}
/* Traegerflaechen abschalten: den Kontrast liefert der graue TYPO3-Rahmen. */
.ob-root .ob-card--brochure .ob-card__inner,
.ob-root .ob-card--brochure:hover .ob-card__inner,
.ob-root .ob-card--brochure .ob-card__media {
    background: transparent;
}
/* Panel weiss — auch im Hover: die Karte ist kein Link (kein Detail-Ziel),
   ein Hover-Wechsel wuerde Klickbarkeit vortaeuschen, die es nicht gibt. */
.ob-root .ob-card--brochure .ob-card__content,
.ob-root .ob-card--brochure:hover .ob-card__content {
    background: var(--ob-color-surface-card-alt);
}
/* Aktions-Block: gestapelt, rechtsbuendig (Bestand shopitems-list-button-wrapper) */
.ob-root .ob-card--brochure .ob-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    margin-top: var(--ob-space-desc-gap);
}
/* Aktions-Buttons ueber die volle Panel-Breite (Bestand: .button-primary
   fuellt shopitems-list-content-inner, 290x50 bei 1440). Der Link-Arrow
   darueber bleibt rechtsbuendig. */
.ob-root .ob-card--brochure .ob-card__actions > .ob-btn,
.ob-root .ob-card--brochure .ob-card__actions > .ob-card__cart {
    align-self: stretch;
}
.ob-root .ob-card--brochure .ob-card__actions > .ob-btn {
    padding: 12px 5px;
    text-align: center;
}
.ob-root .ob-card--brochure .ob-card__cart .ob-btn {
    width: 100%;
    padding: 12px 5px;
    text-align: center;
}
/* „Prospekt bestellen" als link-arrow (Bestand span.link-arrow: Brown 16px
   in normaler Staerke, NICHT fett) */
.ob-root .ob-card__actionlink {
    background: none;
    border: 0;
    padding: 0;
    min-height: 44px;
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 400;
    text-align: right;
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-card__actionlink:hover {
    text-decoration: underline;
}
.ob-root .ob-card__actionlink.is-active {
    color: var(--ob-color-text);
}
/* DW5-Warenkorb-Zusatz (Status-Farbtext kommt aus brochures.css) */
.ob-root .ob-card--brochure .ob-card__cart {
    text-align: right;
}
@media (min-width: 1300px) {
    /* Der Basis-Versatz aus §7 (Inner 35px nach rechts, Bild 35px zurueck und
       20px hoch) gilt hier nicht: bei den Prospekten steht das Cover in der
       Flucht und das weisse Panel legt sich darueber. */
    .ob-root .ob-card--brochure .ob-card__inner {
        margin-left: 0;
    }
    /* Bildspalte 300px (Bestand col-lg-6 mit justify-content:flex-end), das
       Cover 269px rechtsbuendig darin — die 31px links bleiben frei. */
    .ob-root .ob-card--brochure .ob-card__media {
        display: flex;
        justify-content: flex-end;
        flex: 0 0 300px;
        width: 300px;
        max-width: 300px;
        /* Bestand: die Bildspalte hat Bootstrap-Spaltenpadding, das Cover endet
           deshalb 15px vor der Spaltenkante. */
        padding-right: 15px;
        margin-left: 0;
        top: 0;
    }
    .ob-root .ob-card--brochure .ob-card__media img {
        flex: 0 0 269px;
        width: 269px;
    }
    /* Signatur-Overlap seitenverkehrt: das Panel greift 35px nach links ueber
       das Cover und sitzt 25px hoeher (Bestand .shopitems-list-content:
       margin -35px / -25px, padding 28px 15px 30px 50px). */
    .ob-root .ob-card--brochure .ob-card__content {
        margin-left: calc(-1 * var(--ob-space-card-offset));
        margin-top: -25px;
        padding: 28px 15px 30px 50px;
        z-index: 4;
        /* Panel auf Cover-Hoehe ziehen und unten wieder 25px hereinnehmen:
           so ragt das Cover oben wie unten um 25px heraus (Bestand: Panel
           -25..355 gegen Cover 0..380). Ohne das Strecken endet das Panel
           bei kurzem Text weit ueber der Cover-Unterkante. */
        align-self: stretch;
        margin-bottom: 25px;
    }
}

/* ============================================================================
   21. FORMULARE + BESTELL-DIALOG — schlichter Bestands-Formularstil
       (tokens-extraction.md §7: Input-Bottom-Border #adadad, min-height 54px,
       radius 0; Modal-Chrome analog Filter-Offcanvas §10). Label ueber Input,
       Fokus-State rot, Pflicht-Sternchen rot.
   ========================================================================== */
.ob-root .ob-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ob-root .ob-dialog__backdrop {
    position: fixed;
    inset: 0;
    background: var(--ob-color-scrim);
}
.ob-root .ob-dialog__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 90vh;
    background: var(--ob-color-bg);
    border-radius: var(--ob-radius-card);
    box-shadow: var(--ob-shadow-panel);
    overflow: hidden;
}
.ob-root .ob-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid var(--ob-color-border);
}
.ob-root .ob-dialog__title {
    margin: 0;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h3);
}
.ob-root .ob-dialog__close {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--ob-color-text);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}
.ob-root .ob-dialog__close:hover {
    color: var(--ob-color-primary);
}
.ob-root .ob-dialog__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}
/* Formular-Grundraster */
.ob-root .ob-form__group {
    margin: 0 0 25px;
    padding: 0;
    border: 0;
}
.ob-root .ob-form__legend {
    display: block;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-weight: 700;
    font-size: var(--ob-fs-base);
    margin-bottom: 10px;
    padding: 0;
}
.ob-root .ob-form-field {
    margin-bottom: 15px;
}
/* Label UEBER dem Input (Spec-Vorgabe Formularstil) */
.ob-root .ob-form-label {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ob-color-text);
    margin-bottom: 4px;
}
/* Input flach: nur Bottom-Border, radius 0 (Bestand-Inputstil §7) */
.ob-root .ob-form-input {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ob-color-border-input);
    border-radius: var(--ob-radius-input);
    min-height: var(--ob-input-minh);
    padding: 8px 0;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-form-input::placeholder {
    color: var(--ob-color-text-muted);
}
/* Fokus-State: Bottom-Border rot (zusaetzlich globaler :focus-visible-Ring) */
.ob-root .ob-form-input:focus {
    border-bottom-color: var(--ob-color-primary);
    outline: none;
}
.ob-root .ob-form-input:focus-visible {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}
.ob-root .ob-form-input[aria-invalid="true"],
.ob-root .ob-form-field--error .ob-form-input {
    border-bottom-color: var(--ob-color-error);
}
.ob-root .ob-form-input--short {
    max-width: 120px;
}
.ob-root .ob-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
}
.ob-root .ob-form-row .ob-form-field--postal {
    flex: 0 0 110px;
}
.ob-root .ob-form-row .ob-form-field--city {
    flex: 1 1 200px;
}
/* Pflicht-Sternchen */
.ob-root .ob-form-required {
    color: var(--ob-color-primary);
    font-weight: 700;
}
/* Feld-/Submit-Fehler */
.ob-root .ob-form-error {
    margin: 4px 0 0;
    color: var(--ob-color-error);
    font-size: 13px;
}
.ob-root .ob-form-error--submit {
    margin: 0 0 15px;
    font-size: 14px;
}
/* Checkbox (DSGVO) */
.ob-root .ob-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}
.ob-root .ob-form-check__input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--ob-color-primary);
    cursor: pointer;
}
.ob-root .ob-form-check__label a {
    color: var(--ob-color-primary);
    text-decoration: underline;
}
/* Aktionen */
.ob-root .ob-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
/* Erfolgs-Meldung */
.ob-root .ob-form-success {
    text-align: center;
    padding: 10px 0;
}
.ob-root .ob-form-success__msg {
    font-weight: 700;
    margin: 0 0 10px;
}
.ob-root .ob-form-success__id {
    margin: 0 0 20px;
}
/* Auswahl-Liste im Dialog (Basket-Zusammenfassung) */
.ob-root .ob-dialog-basket {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob-root .ob-dialog-basket__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ob-color-border);
}
/* MR !104: Entfernen-Button mit sichtbarem Hover-State */
.ob-root .ob-dialog-basket__remove {
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ob-color-text);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-dialog-basket__remove:hover {
    color: var(--ob-color-primary);
    background: var(--ob-color-primary-soft);
}
/* Mengen-Feature: Titel darf schrumpfen, Stepper/Remove bleiben fix */
.ob-root .ob-dialog-basket__title {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
/* Mengen-Stepper (− Wert +) je Prospekt: flach, radius 0, 44px-Targets */
.ob-root .ob-qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--ob-color-border);
}
.ob-root .ob-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--ob-color-text);
    cursor: pointer;
    transition: var(--ob-transition-fast);
}
.ob-root .ob-qty__btn:hover:not(:disabled) {
    color: var(--ob-color-primary);
    background: var(--ob-color-primary-soft);
}
.ob-root .ob-qty__btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.ob-root .ob-qty__value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Gesamtmenge unter der Auswahl-Liste */
.ob-root .ob-dialog-basket__total {
    margin: 8px 0 0;
    font-weight: 700;
    text-align: right;
}
/* Screenreader-only (Legend der DSGVO-Gruppe) */
.ob-root .ob-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================================
   22. STICKY-AUSWAHLLEISTE (Prospekte) — fixiert am unteren Rand, erscheint
       sobald mind. ein Prospekt ausgewaehlt ist (Spec §3.4; kein Bestands-
       Pendant — Bestand nutzte den site-weiten Header-Warenkorb).
   ========================================================================== */
.ob-root .ob-basketbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 200);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    padding: 12px var(--ob-container-pad);
    background: var(--ob-color-bg);
    box-shadow: var(--ob-shadow-sticky);
    border-top: 1px solid var(--ob-color-border);
}
.ob-root .ob-basketbar__label strong {
    color: var(--ob-color-primary);
}

/* ============================================================================
   23. ERLEBNIS-DETAIL (singleView-Look) — Quelle: Live-Event-/Erlebnis-Detail
       www.osttirol.com (.singleView-*): H1 + Pills, 2 Spalten ab 992px
       (Text 2/3 links, Grau-Boxen 1/3 rechts), Karte volle Breite,
       "Zurueck zur Uebersicht". Nur Chrome/Layout — Alpine-Verhalten
       (Daypicker, Lightbox, Karte, TOSC5) kommt unveraendert aus
       experiences.css/.js. Scope: .ob-root .ob-detail.
   ========================================================================== */

/* --- Headline-Bereich (Live: singleView-headline-wrap) --------------------- */
.ob-root .ob-detail__head {
    margin-bottom: 25px;
}
/* Titel + Merken-Pill in einer Zeile; der Titel darf schrumpfen, die Pill nicht
   (AP5). Auf schmalen Viewports bricht die Pill unter den Titel. */
.ob-root .ob-detail__titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ob-root .ob-detail__titlebar > .ob-detail__title {
    flex: 1 1 260px;
    min-width: 0;
}
.ob-root .ob-detail__titlebar > .osttirol-wish--detail {
    flex: 0 0 auto;
}
.ob-root .ob-detail__title {
    margin: 0;
    padding-bottom: 15px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h1);
    line-height: 1.2;
    /* Lange Einzelwoerter (z. B. „Gemeinschaftsausstellung") duerfen mobil
       nicht ueber den Viewport hinauslaufen. */
    overflow-wrap: break-word;
}
@media (min-width: 992px) {
    .ob-root .ob-detail__title { font-size: var(--ob-fs-h1-lg); }
}
/* Pills ohne Hover (Live: .pill.pill-nohover — border #D9D9D9, radius 15px) */
.ob-root .ob-detail__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}
.ob-root .ob-detail__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--ob-pill-pad);
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    color: var(--ob-color-text);
    font-size: var(--ob-fs-base);
    cursor: default;
}
/* Quell-Badge (LIVE/DEMO, Dev-Anzeige) dezent neben den Pills */
.ob-root .ob-detail__source {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ob-color-text-muted);
}

/* --- 2-Spalten-Bereich (Live: singleView-description-wrap, col-lg-8/4) -----
   Mobil ein Stapel; die Boxen ordnen sich per display:contents + order um
   den Text (Bild, Buchung, Text, Treffpunkt, Kontakt, Links). Ab 992px
   Grid 2fr/1fr, rechte Spalte als Flex-Stack. */
.ob-root .ob-detail__cols {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media (max-width: 991.98px) {
    .ob-root .ob-detail__rail { display: contents; }
    .ob-root .ob-detail__box--image   { order: 1; }
    .ob-root .ob-detail__box--booking { order: 2; }
    /* Event-Detail (§25): Terminliste direkt nach der Buchung, vor dem Text */
    .ob-root .ob-detail__box--dates   { order: 3; }
    .ob-root .ob-detail__main         { order: 4; }
    .ob-root .ob-detail__box--price   { order: 5; }
    .ob-root .ob-detail__box--meeting { order: 5; }
    .ob-root .ob-detail__box--contact { order: 6; }
    .ob-root .ob-detail__box--links   { order: 7; }
}
@media (min-width: 992px) {
    .ob-root .ob-detail__cols {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 40px 50px;
        align-items: start;
    }
    .ob-root .ob-detail__main { grid-column: 1; grid-row: 1; }
    .ob-root .ob-detail__rail {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 15px; /* Live: .singleView-bggrey + .singleView-bggrey { margin-top:15px } */
        min-width: 0;
    }
}

/* --- Linke Spalte: Fliesstext (Live: .singleView-description.text) --------- */
.ob-root .ob-detail__main {
    min-width: 0;
    font-size: var(--ob-fs-base);
    line-height: 25px; /* Live .text: 16px/25px */
}
.ob-root .ob-detail__lead {
    margin: 0 0 var(--ob-space-desc-gap);
    font-weight: 700;
}
.ob-root .ob-detail__description :is(p, ul, ol) {
    margin: 0 0 15px;
}
.ob-root .ob-detail__description img {
    max-width: 100%;
    height: auto;
}
.ob-root .ob-detail__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 10px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-h3);
    font-weight: 700;
    line-height: 1.2;
}
.ob-root .ob-detail__section-icon {
    flex-shrink: 0;
    color: var(--ob-color-primary);
}

/* --- Grau-Boxen (Live: .singleView-bggrey + Balken-Header) ----------------- */
.ob-root .ob-detail__box {
    background: var(--ob-color-bg-alt);
    padding: 15px;
    border-radius: var(--ob-radius-card);
}
/* Balken-Header (Live: .singleView-bggrey-headline-grey — #D9D9D9/#5D5D5D,
   full-bleed via Negativ-Margin gegen das 15px-Box-Padding) */
.ob-root .ob-detail__box-head {
    margin: -15px -15px 15px;
    padding: 8px 15px;
    background: var(--ob-color-border);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-subline);
    font-weight: 700;
    line-height: 1.3;
}
.ob-root .ob-detail__box p {
    margin: 0 0 8px;
}
.ob-root .ob-detail__box p:last-child {
    margin-bottom: 0;
}
.ob-root .ob-detail__box a {
    color: var(--ob-color-primary);
    text-decoration: none;
    word-break: break-word;
}
.ob-root .ob-detail__box a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Kontakt-Zeilen (tel/mailto/web) als 44px-Touch-Targets */
.ob-root .ob-detail__contact-line a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- Bild-/Galerie-Box (Live: .singleView-singleImage — Bild randlos) ------ */
.ob-root .ob-detail__box--image {
    padding: 0;
    overflow: hidden;
}
.ob-root .ob-detail__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.ob-root .ob-detail__gallery-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ob-color-bg-alt);
    cursor: zoom-in;
}
.ob-root .ob-detail__gallery-item--main {
    grid-column: 1 / -1;
}
.ob-root .ob-detail__gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ob-root .ob-detail__gallery-item--main .ob-detail__gallery-img {
    aspect-ratio: 4 / 3;
}
.ob-root .ob-detail__gallery-item--thumb .ob-detail__gallery-img {
    aspect-ratio: 1 / 1;
}

/* --- Buchungs-Box: Preis im Bestandsrot, Buchen-Button im ob-btn-Look ------ */
.ob-root .ob-detail__box--booking .exp-price {
    color: var(--ob-color-primary);
    font-size: var(--ob-fs-h3);
    font-weight: 700;
    margin: 0 0 10px;
}
.ob-root .ob-detail__box--booking .exp-button {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--ob-btn-pad);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    border-radius: var(--ob-radius-button);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    cursor: pointer;
    transition: var(--ob-btn-transition);
}
.ob-root .ob-detail__box--booking .exp-button:hover:not(:disabled) {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
.ob-root .ob-detail__box--booking .exp-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* --- Karten-Sektion in voller Breite (Live: #webx-map, height 74vh) -------- */
.ob-root .ob-detail__map {
    margin-top: 40px;
}
.ob-root .ob-detail__map .exp-map {
    height: 74vh;
    min-height: 320px;
    border-radius: 0;
}

/* --- Zurueck zur Uebersicht (Live: .back-to-list) --------------------------- */
.ob-root .ob-detail__back {
    margin: 50px 0 30px;
}

/* ============================================================================
   24. UNTERKUNFTS-DETAIL (singleView-Look) — Quelle: Live-Unterkunfts-Detail
       www.osttirol.com (design/overrides-2026-07/live-referenz-unterkuenfte/):
       Hero-Galerie-Grid 50/25/25 + "+N"-Kreis-Badge, Sprungnav (sticky),
       Sektions-Rhythmus mit grauen Baendern, Zimmer-Cards mit Signatur-
       Overlap + ROTEM Preis-Kasten (#B51621), Facilities-Pills + Modal,
       Kontakt zentriert. Nur Chrome/Layout — Alpine-Verhalten (Suche,
       Zimmerliste, Modals, DW5-Cart) kommt unveraendert aus booking.css/.js.
       Scope: .ob-root.ob-accd bzw. .ob-root .ob-accd-*.
   ========================================================================== */

/* --- Sektions-Rhythmus ------------------------------------------------------
   Bestand (gemessen am Ortnerhof-Detail, 1440):
     .singleView-section + .singleView-section { border-top: 40px solid #fff }
     .singleView-section-grey                  { padding: 40px 0; background:#F4F4F4 }
     .singleView-container (Ueberblick)        { padding: 30px 0 }
   Die weissen Sektionen haben also KEIN eigenes Padding — den Abstand macht
   allein die 40px-Weisskante zwischen zwei Sektionen. Vorher standen hier
   pauschal 50px auf allen Sektionen; das trieb die Seite auseinander und war
   der sichtbarste Rhythmus-Unterschied zum Bestand. */
.ob-root .ob-accd-section {
    padding: 0;
    /* Anker-Ziele unter der sticky Sprungnav landen lassen */
    scroll-margin-top: 70px;
}
.ob-root .ob-accd-section + .ob-accd-section {
    border-top: 40px solid var(--ob-color-bg);
}
.ob-root .ob-accd-section--grey {
    padding: 40px 0;
    background: var(--ob-color-bg-alt);
}
/* Ueberblick: eigener Innenabstand wie .singleView-container im Bestand. */
.ob-root .ob-accd-section--intro {
    padding: 30px 0;
}
.ob-root .ob-accd-section--map {
    padding: 0;
}
/* Bestand: .singleView-section-headline { font-family: Brown; 30px; 700 } —
   Brown, NICHT CambridgeBold. Damit sitzt die Unterkunft auf derselben
   Sektions-Typo wie Infrastruktur/Erlebnisse/Pauschalen (ob-detail__section-title). */
.ob-root .ob-accd-section__headline {
    margin: 0 0 25px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-weight: 700;
    font-size: var(--ob-fs-h3);
    line-height: 1.2;
}
@media (min-width: 992px) {
    .ob-root .ob-accd-section__headline { font-size: 30px; }
}

/* --- Hero-Galerie (Live: singleView-headerGallery-grid 50/25/25) ----------- */
.ob-root .ob-accd-gallery {
    position: relative;
    overflow: hidden;
    max-height: 650px;
}
/* Bestands-Grid: `grid-template: "i1 i2 i3" 50% "i1 i4 i5" 50% / 50% 25% 25%`.
   Die Hoehe ergibt sich dort aus dem Seitenverhaeltnis des ersten Bildes (3:2)
   auf halber Breite -> Gesamt-Ratio 3:1 (gemessen 1425 x 476). Als aspect-ratio
   nachgebaut, damit kein Layout-Shift entsteht, bis die Bilder da sind.
   Trennfugen: der Bestand setzt 1px weissen Rand je Kachel, also 2px sichtbar. */
.ob-root .ob-accd-gallery--grid {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "i1 i2 i3"
        "i1 i4 i5";
    gap: 2px;
    aspect-ratio: 3 / 1;
}
.ob-root .ob-accd-gallery__item {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ob-color-bg-alt);
    cursor: zoom-in;
}
.ob-root .ob-accd-gallery__item--1 { grid-area: i1; }
.ob-root .ob-accd-gallery__item--2 { grid-area: i2; }
.ob-root .ob-accd-gallery__item--3 { grid-area: i3; }
.ob-root .ob-accd-gallery__item--4 { grid-area: i4; }
.ob-root .ob-accd-gallery__item--5 { grid-area: i5; }
.ob-root .ob-accd-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Weniger als 5 Bilder: nur das Hauptbild als Buehne */
.ob-root .ob-accd-gallery--single .ob-accd-gallery__item { display: none; }
.ob-root .ob-accd-gallery--single .ob-accd-gallery__item--1 {
    display: block;
    aspect-ratio: 16 / 9;
}
/* Unter 992px zeigt der Bestand nur das Hauptbild (Kacheln 2-5 display:none);
   das Grid selbst gibt es dort gar nicht. Breakpoint deshalb 991.98 und nicht
   767.98 — sonst stehen zwischen 768 und 991px drei Spalten, die der Bestand
   an dieser Stelle nie zeigt. */
@media (max-width: 991.98px) {
    .ob-root .ob-accd-gallery--grid {
        display: block;
        aspect-ratio: auto;
    }
    .ob-root .ob-accd-gallery--grid .ob-accd-gallery__item { display: none; }
    .ob-root .ob-accd-gallery--grid .ob-accd-gallery__item--1 {
        display: block;
        aspect-ratio: 16 / 10;
    }
}
/* "+N"-Kreis-Badge (Live: singleView-headerGallery-more — Kreis haengt zur
   Haelfte aus der Galerie, sichtbar bleibt das obere linke Viertel) */
.ob-root .ob-accd-gallery__more {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 140px;
    padding: 26px 0 0 30px;
    border: 0;
    border-radius: 50%;
    transform: translate(50%, 50%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-family: var(--ob-font-body);
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 300ms ease;
}
/* Hover invertiert (Bestands-Regel §6: KEIN dunkleres Rot) */
.ob-root .ob-accd-gallery__more:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
@media (min-width: 992px) {
    .ob-root .ob-accd-gallery__more {
        width: 240px;
        height: 240px;
        padding: 45px 0 0 55px;
        font-size: 28px;
    }
}

/* --- Sprungnavigation (Live: singleView-nav — weiss, Schattenkante) -------- */
.ob-root .ob-accd-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 200);
    margin-top: 20px;
    background: var(--ob-color-bg);
    box-shadow: 0 0 6px var(--ob-color-scrim);
}
.ob-root .ob-accd-nav__inner {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 992px) {
    .ob-root .ob-accd-nav__inner { justify-content: center; }
}
.ob-root .ob-accd-nav__link {
    flex-shrink: 0;
    padding: 12px 0 8px;
    border-bottom: 4px solid transparent;
    color: var(--ob-color-text);
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 200ms ease, border-color 200ms ease;
}
@media (min-width: 992px) {
    .ob-root .ob-accd-nav__link { font-size: 20px; }
}
.ob-root .ob-accd-nav__link:hover,
.ob-root .ob-accd-nav__link:focus-visible {
    color: var(--ob-color-primary);
    border-bottom-color: var(--ob-color-primary);
    text-decoration: none;
}
/* Merken-Herz rechts in der Nav (Stefan 2026-07-09): absolut an der rechten
   Kante, damit die Link-Zeile zentriert bleibt. 44x44 Touch-Target. */
.ob-root .ob-accd-nav__inner { position: relative; padding-right: 52px; }
.ob-root .ob-accd-nav__wish {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    /* deckend + weicher Auslauf nach links: mobil scrollen die Nav-Links
       unter dem Herz durch */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ob-color-bg) 12px);
    color: var(--ob-color-text);
    cursor: pointer;
    transition: color 200ms ease;
}
.ob-root .ob-accd-nav__wish:hover,
.ob-root .ob-accd-nav__wish:focus-visible {
    color: var(--ob-color-primary);
}
.ob-root .ob-accd-nav__wish.is-saved {
    color: var(--ob-color-primary);
}
.ob-root .ob-accd-nav__wish.is-saved .ob-accd-nav__wish-icon {
    fill: currentColor;
}
.ob-root .ob-accd-nav__wish-icon {
    width: 24px;
    height: 24px;
    fill: none;
}

/* --- Klassifizierung + Headline (Live: singleView-classifications + h1) ---- */
.ob-root .ob-accd-cls {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 4px;
    color: var(--ob-color-primary);
    font-size: 20px;
    line-height: 1;
}
/* Sprite-Symbole (Edelweiss/Blume) auf Sternen-Mass begrenzen — die
   .ob-card__classification-Regel greift nur in der Listenkarte. */
.ob-root .ob-accd-cls .ob-cls-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    align-self: center;
}
.ob-root .ob-accd-cls .ob-cls-superior sup {
    font-size: 0.65em;
}
.ob-root .ob-accd-headline {
    padding-bottom: 10px;
}

/* --- Social Proof + Badges + Merken ----------------------------------------- */
.ob-root .ob-accd-viewers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: var(--ob-color-success-text);
    font-size: 14px;
}
.ob-root .ob-accd-viewers__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: ob-accd-pulse 1.6s ease-in-out infinite;
}
@keyframes ob-accd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.ob-root .ob-accd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-accd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ob-pill-pad, 6px 14px);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill, 15px);
    color: var(--ob-color-text);
    font-size: 14px;
}
.ob-root .ob-accd-badge__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--ob-color-primary);
}
.ob-root .ob-accd-badge__icon svg { width: 100%; height: 100%; }

/* --- Overview: 2 Spalten + KI-Box + Nachhaltigkeit -------------------------- */
.ob-root .ob-accd-cols { margin-top: 30px; }
/* Mobil (rail via display:contents aufgeloest, §23): erst der Text, dann die
   Grau-Boxen — das generische §23-Ordering kennt die accd-Boxnamen nicht. */
@media (max-width: 991.98px) {
    .ob-root .ob-accd-cols .ob-detail__main { order: 1; }
    .ob-root .ob-accd-cols .ob-detail__box  { order: 2; }
}
.ob-root .ob-accd-ki {
    margin: 25px 0 0;
    border: 1px solid var(--ob-color-border);
    padding: 15px;
}
.ob-root .ob-accd-ki__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ob-color-text);
    cursor: pointer;
}
.ob-root .ob-accd-ki__chip {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--ob-radius-pill, 15px);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-size: 12px;
    font-weight: 700;
}
.ob-root .ob-accd-ki__body { margin-top: 10px; }
.ob-root .ob-accd-ki__body p { margin: 0 0 8px; }
/* KI-Transparenzhinweis (EU AI Act Art. 50): muss lesbar sein — der
   Platzhalter-Ton #aeaeae kam auf 2,2:1. */
.ob-root .ob-accd-ki__transparency {
    color: var(--ob-color-text);
    font-size: 12px;
}
.ob-root .ob-accd-sustain { margin-top: 25px; }
.ob-root .ob-accd-pill--sustain { border-color: #98de67; }
.ob-root .ob-accd-host__intro { margin: 0 0 8px; }
.ob-root .ob-accd-host__intro p { margin: 0 0 8px; }
.ob-root .ob-accd-host__address { font-style: normal; margin: 0 0 8px; }
.ob-root .ob-accd-checkin__notes { font-size: 14px; }
.ob-root .ob-accd-checkin__notes p { margin: 0 0 6px; }

/* --- Offers: Suchleiste + Links --------------------------------------------- */
.ob-root .ob-accd-fromprice {
    margin: 0 0 20px;
    color: var(--ob-color-primary);
    font-size: 22px;
    font-weight: 700;
}
.ob-root .ob-accd-bookingbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    /* Stefan 2026-07-09: Suchbox kompakt — nicht breiter als die linke
       Overview-Spalte (2fr von 2fr/1fr + 50px Gap ~ 63%). */
    max-width: 830px;
}
.ob-root .ob-accd-bookingbar .ob-search-field {
    min-width: 200px;
    flex: 1 1 240px;
}
.ob-root .ob-accd-bookingbar__submit { align-self: flex-end; }
/* Roter Text-Trigger mit Chevron (Live: serviceProvider-list-roommore) */
.ob-root .ob-accd-link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    text-align: left;
    cursor: pointer;
}
.ob-root .ob-accd-link-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.ob-root .ob-accd-avcal { margin: 15px 0 0; }

/* --- Zimmer-Cards (Live: serviceProvider-list-item-room) -------------------- */
.ob-root .ob-accd-rooms { margin-top: 35px; }
.ob-root .ob-accd-rooms__head { margin-bottom: 20px; }
.ob-root .ob-accd-rooms__title {
    margin: 0 0 4px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-size: var(--ob-fs-h3);
    font-weight: 700;
}
.ob-root .ob-accd-rooms__meta { margin: 0; color: var(--ob-color-text); font-size: 14px; }
.ob-root .ob-accd-rooms__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.ob-root .ob-accd-room {
    position: relative;
    margin-bottom: 65px;
}
.ob-root .ob-accd-room:last-child { margin-bottom: 0; }
.ob-root .ob-accd-room__media {
    position: relative;
    z-index: 1;
}
.ob-root .ob-accd-room__img {
    display: block;
    width: 100%;
    aspect-ratio: 450 / 370;
    object-fit: cover;
}
/* Weisse Content-Box mit Signatur-Overlap (Bestand: -35px / padding-left 63px).
   Mobil liegt die Box UEBER dem Bild (z 1), am Desktop das Bild ueber dem
   Box-Rand (Bestands-Metriken merged.css). */
.ob-root .ob-accd-room__content {
    position: relative;
    z-index: 1;
    margin: -35px 0 0 20px;
    padding: 15px;
    background: var(--ob-color-bg);
}
@media (min-width: 992px) {
    .ob-root .ob-accd-room { display: flex; align-items: flex-start; }
    .ob-root .ob-accd-room__media { flex: 0 0 40%; max-width: 40%; }
    .ob-root .ob-accd-room__content {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: flex-start;
        gap: 30px;
        z-index: 0;
        margin: 25px 0 0 -35px;
        padding: 15px 15px 15px 63px;
    }
    .ob-root .ob-accd-room__info { flex: 1 1 auto; min-width: 0; }
    .ob-root .ob-accd-room__offers { flex: 0 0 auto; width: 280px; margin-left: auto; }
}
/* Ohne Zimmerbilder (x-show versteckt die Media-Flaeche): kein Overlap */
.ob-root .ob-accd-room:has(> .ob-accd-room__media[style*="display: none"]) > .ob-accd-room__content {
    margin: 0;
    padding: 15px;
}
/* Karussell-Pfeile: an der Zimmer-Card gibt es kein .ob-card:hover — Pfeile
   bei Card-Hover einblenden, Zaehler buendig unten (kein Card-Offset). */
.ob-root .ob-accd-room:hover .ob-card__gallery-btn { opacity: 1; }
.ob-root .ob-accd-room .ob-card__gallery-count { bottom: 0; }

.ob-root .ob-accd-room__name {
    margin: 0 0 6px;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-size: var(--ob-fs-subline);
    font-weight: 700;
}
.ob-root .ob-accd-room__cat {
    margin: 0 0 12px;
    color: var(--ob-color-text);
    font-size: 14px;
}
.ob-root .ob-accd-room__desc {
    margin: 0 0 12px;
    color: var(--ob-color-text);
    font-size: 14px;
    line-height: 1.55;
}
.ob-root .ob-accd-room__info .ob-accd-link-more { display: flex; }

/* Reiseinfo-Balken (Live: serviceProvider-list-travelinfos, #5D5D5D) */
.ob-root .ob-accd-room__travelinfos {
    padding: 10px;
    background: var(--ob-color-text);
    color: var(--ob-color-text-inverse);
    font-size: 14px;
}

/* Tarif-Liste + ROTER Preis-Kasten (Live: serviceProvider-list-mealcode) */
.ob-root .ob-accd-offers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-accd-offer { position: relative; }
.ob-root .ob-accd-offer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}
.ob-root .ob-accd-offer__name { font-weight: 700; font-size: 14px; color: var(--ob-color-text); }
.ob-root .ob-accd-offer__topdeal {
    padding: 1px 8px;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.ob-root .ob-accd-offer__hint,
.ob-root .ob-accd-offer__minstay {
    margin: 4px 0 0;
    color: var(--ob-color-text);
    font-size: 13px;
}
.ob-root .ob-accd-offer__minstay.is-violation { color: var(--ob-color-error); font-weight: 700; }

.ob-root .ob-accd-offer__box {
    position: relative;
    margin-top: 8px;
    padding: 12px;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Live-Signatur: der Kasten ragt rechts aus der Card (translate 32px) */
@media (min-width: 1300px) {
    .ob-root .ob-accd-offer__box { transform: translateX(32px); }
}
.ob-root .ob-accd-offer__meals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.ob-root .ob-accd-offer__meal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}
.ob-root .ob-accd-offer__meal input { accent-color: var(--ob-color-text-inverse); }
.ob-root .ob-accd-offer__meal-label { margin: 0 0 6px; font-size: 14px; }
.ob-root .ob-accd-offer__price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.ob-root .ob-accd-offer__price { font-size: 20px; font-weight: 700; }
.ob-root .ob-accd-offer__strike { font-size: 14px; text-decoration: line-through; opacity: 0.8; }
.ob-root .ob-accd-offer__per-night { display: block; font-size: 13px; opacity: 0.9; }
.ob-root .ob-accd-offer__info {
    background: none;
    border: 0;
    padding: 0 4px;
    color: var(--ob-color-text-inverse);
    font-size: 15px;
    cursor: pointer;
    /* Touch-Target 44x44 (Projekt-Regel) — optisch bleibt nur das Glyph. */
    min-width: 44px;
    min-height: 44px;
}
.ob-root .ob-accd-offer__cancellation {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ob-color-text-inverse);
}
.ob-root .ob-accd-offer__cancellation.is-free::before { content: "✓ "; }
.ob-root .ob-accd-offer__nocc {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.9;
}
/* Weisser "Zur Buchung"-Button (Live: addShoppingCard .button-primary invertiert) */
.ob-root .ob-accd-offer__book {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px;
    border: 0;
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms ease;
}
.ob-root .ob-accd-offer__book:hover:not(:disabled) { background: var(--ob-color-bg-alt); }
.ob-root .ob-accd-offer__book:disabled { opacity: 0.55; cursor: default; }
.ob-root .ob-accd-offer__book--option {
    width: auto;
    margin-top: 0;
    padding: 8px 14px;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Hover invertiert (Bestands-Regel §6: KEIN dunkleres Rot) */
.ob-root .ob-accd-offer__book--option:hover:not(:disabled) {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
/* Preis-Popover im roten Kasten: weisses Panel muss ueber dem Kasten liegen */
.ob-root .ob-accd-offer .osttirol-price-detail { z-index: 5; }
/* Das translateX der Kaesten erzeugt je Box einen Stacking-Kontext — spaeter
   gemalte Geschwister-Kaesten wuerden das offene Popover ueberdecken. Box
   (und Offer-Zeile) mit offenem Popover deshalb im Eltern-Kontext anheben.
   (Alpine x-show entfernt display:none nur am offenen Popover.) */
.ob-root .ob-accd-offer:has(.osttirol-price-detail:not([style*="display: none"])) { z-index: 6; }
.ob-root .ob-accd-offer__box:has(> .osttirol-price-detail:not([style*="display: none"])) { z-index: 6; }

/* --- Karte (Live: 74vh volle Breite) ---------------------------------------- */
.ob-root .ob-accd-map {
    width: 100%;
    height: 74vh;
    min-height: 320px;
}
.ob-root .ob-accd-map__route { margin: 12px 0 0; }
/* 44px-Ziel wie die uebrigen Kontaktzeilen — als reiner Textlink war der
   Routen-Link auf 390px nur 15px hoch. */
.ob-root .ob-accd-map__route a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ob-color-primary);
    text-decoration: none;
}
.ob-root .ob-accd-map__route a:hover { text-decoration: underline; }

/* --- Facilities: Icon-Pills + "weitere Ausstattungsmerkmale" ---------------- */
.ob-root .ob-accd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-accd-pill--icon { gap: 8px; background: var(--ob-color-bg); }
.ob-root .ob-accd-pill__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ob-color-primary);
}
.ob-root .ob-accd-facilities__more { margin: 15px 0 0; }

/* --- Lage: eigener Block in der Ausstattungs-Sektion (Kundenpunkt 07.08.2026)
   Die Merkmale kommen aus criteriaGroups[lage] und standen bisher nur im Modal. */
.ob-root .ob-accd-location { margin: 24px 0 0; }
.ob-root .ob-accd-location__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--ob-color-heading);
}
.ob-root .ob-accd-pills--location .ob-detail__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Entfernungswert visuell vom Merkmal abgesetzt, aber in derselben Pille -
   „Entfernung Skipiste 300 m" liest sich als eine Aussage. */
.ob-root .ob-accd-location__distance {
    font-weight: 600;
    color: var(--ob-color-primary);
    white-space: nowrap;
}

/* --- Videos unter dem Einleitungstext (Kundenpunkt 07.08.2026) --------------
   Klick-Fassade: der iframe bekommt sein src erst beim Klick (DSGVO, kein
   Request an Google vorher). Der Poster-Button liegt darueber und deckt den
   ganzen 16:9-Rahmen ab, ist also immer groesser als 44x44 px. */
.ob-root .ob-accd-videos { margin: 24px 0 0; }
/* Slider statt Liste (Kundenpunkt 10.08.2026): ein Video je Folie, horizontal
   gewischt oder ueber die Pfeile gescrollt. Der Scroll-Container traegt das
   Snapping, die Pfeile scrollen ihn absolut per scrollTo - ohne JavaScript
   bleibt der Track ein normal scrollbarer Bereich. */
.ob-root .ob-accd-videos__stage { position: relative; margin-top: 16px; }
.ob-root .ob-accd-videos__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ob-root .ob-accd-videos__viewport::-webkit-scrollbar { display: none; }
.ob-root .ob-accd-videos__track {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-accd-video {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}
/* Pfeile: 44x44 Touch-Target (WCAG), gleiche Anmutung wie die Card-Galerie. */
.ob-root .ob-accd-videos__btn {
    position: absolute;
    top: calc(50% - 14px); /* Bildmitte, die Bildunterschrift zaehlt nicht mit */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    cursor: pointer;
    transition: var(--ob-btn-transition);
    z-index: 2;
}
.ob-root .ob-accd-videos__btn--prev { left: 0; }
.ob-root .ob-accd-videos__btn--next { right: 0; }
.ob-root .ob-accd-videos__btn svg { width: 20px; height: 20px; }
.ob-root .ob-accd-videos__btn:hover:not(:disabled) {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
.ob-root .ob-accd-videos__btn:disabled { opacity: 0.35; cursor: default; }
.ob-root .ob-accd-videos__dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 4px;
}
/* Der Knopf ist 44x44 gross (Touch-Target), sichtbar ist nur der 10-px-Punkt:
   `background-clip: content-box` laesst die Farbe erst in der Content-Box
   beginnen, das Padding bleibt unsichtbar aber treffbar. */
.ob-root .ob-accd-videos__dot {
    width: 44px;
    height: 44px;
    padding: 17px;
    border: 0;
    background: transparent;
    background-clip: content-box;
    box-shadow: inset 0 0 0 1px transparent;
    cursor: pointer;
}
.ob-root .ob-accd-videos__dot::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid var(--ob-color-primary);
    border-radius: var(--ob-radius-round);
}
.ob-root .ob-accd-videos__dot--active::before { background: var(--ob-color-primary); }
.ob-root .ob-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Ohne Standbild traegt die Flaeche selbst die Farbe - dunkel, damit der
       weisse Play-Pfeil darauf lesbar bleibt. */
    background: #2b2b2b;
}
.ob-root .ob-video__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ob-root .ob-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    /* Kein Standbild mehr (Kundenpunkt 10.08.2026), die dunkle Flaeche kommt
       von .ob-video - der Button selbst bleibt transparent. */
    background: transparent;
    color: var(--ob-color-text-inverse);
    font-size: 44px;
    line-height: 1;
}
.ob-root .ob-video__play {
    position: relative;
    display: block;
    transition: color 0.15s, transform 0.15s;
}
.ob-root .ob-video__poster:hover .ob-video__play,
.ob-root .ob-video__poster:focus-visible .ob-video__play {
    color: var(--ob-color-primary);
    transform: scale(1.1);
}
.ob-root .ob-accd-video__caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--ob-color-text);
}
.ob-root .ob-accd-videos__hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ob-color-text);
    opacity: 0.75;
}

/* --- Modal (Zimmer-Ausstattung / Facilities, Bootstrap-Modal-Anmutung) ------ */
.ob-root .ob-accd-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ob-root .ob-accd-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.ob-root .ob-accd-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: var(--ob-color-bg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.ob-root .ob-accd-modal__dialog--big { max-width: 900px; }
.ob-root .ob-accd-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.ob-root .ob-accd-modal__title {
    margin: 0;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-size: var(--ob-fs-subline);
    font-weight: 700;
}
.ob-root .ob-accd-modal__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--ob-color-text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.ob-root .ob-accd-modal__close:hover { color: var(--ob-color-primary); }
.ob-root .ob-accd-modal__section + .ob-accd-modal__section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ob-color-border);
}
.ob-root .ob-accd-modal__section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--ob-color-text);
}
.ob-root .ob-accd-modal__section-count { color: var(--ob-color-text-muted); font-weight: 400; }

/* --- Hauspauschalen (WP1) im Sektions-Rhythmus ------------------------------- */
.ob-root .ob-accd-hp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .ob-root .ob-accd-hp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ob-root .ob-accd-hp__card {
    display: flex;
    flex-direction: column;
    background: var(--ob-color-surface-card);
}
.ob-root .ob-accd-hp__image { width: 100%; height: 176px; object-fit: cover; }
.ob-root .ob-accd-hp__body { display: flex; flex-direction: column; gap: 8px; padding: 15px; flex: 1; }
.ob-root .ob-accd-hp__title { margin: 0; font-weight: 700; color: var(--ob-color-text); font-size: var(--ob-fs-base); }
.ob-root .ob-accd-hp__validity { margin: 0; font-size: 13px; color: var(--ob-color-text); }
.ob-root .ob-accd-hp__services { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ob-color-text); }
.ob-root .ob-accd-hp__services li::before { content: "✓ "; color: var(--ob-color-primary); font-weight: 700; }
.ob-root .ob-accd-hp__desc { font-size: 14px; color: var(--ob-color-text); }
.ob-root .ob-accd-hp__desc p { margin: 0 0 6px; }
.ob-root .ob-accd-hp__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}
.ob-root .ob-accd-hp__price { font-weight: 700; color: var(--ob-color-primary); }
.ob-root .ob-accd-hp__hint { font-size: 12px; color: var(--ob-color-text-muted); }

/* --- Enquiry (graues Band, Formular-Styles kommen aus booking.css) ---------- */
.ob-root .ob-accd-enquiry__intro { margin: 0 0 20px; }
.ob-root .ob-accd-enquiry { max-width: 900px; }
.ob-root .ob-accd-enquiry__success {
    padding: 12px 15px;
    background: var(--ob-color-bg);
    border-left: 4px solid var(--ob-color-success);
    font-weight: 700;
}

/* --- Kontakt zentriert (Live: singleView-contact text-center) --------------- */
.ob-root .ob-accd-contact__inner { text-align: center; }
.ob-root .ob-accd-contact__address {
    margin: 0 0 15px;
    font-style: normal;
    line-height: 1.6;
}
.ob-root .ob-accd-contact__line { margin: 0; }
.ob-root .ob-accd-contact__line a {
    display: inline-flex;
    align-items: center;
    /* 44px, nicht 40 — Telefon/Mail/Website sind auf dem Handy die drei
       Ziele, die wirklich getippt werden (UI-Checkliste: min. 44x44). */
    min-height: 44px;
    color: var(--ob-color-primary);
    text-decoration: none;
}
.ob-root .ob-accd-contact__line a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   25. EVENT-DETAIL (singleView-Look) — Terminliste & Preis der rechten
       Grau-Boxen (Live: singleView-event-additionalEventBox: Terminzeile
       „Do, 09.07.2026 – 20:00 Uhr" + ICS-Kalender-Icon rechts, erste 8
       sichtbar, Rest hinter Toggle). Box-Chrome kommt aus §23
       (ob-detail__box / __box-head).
   ========================================================================== */
.ob-root .ob-evd-occ {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob-root .ob-evd-occ__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ob-color-border);
}
.ob-root .ob-evd-occ__item:last-child {
    border-bottom: 0;
}
.ob-root .ob-evd-occ__date {
    flex: 1 1 auto;
}
.ob-root .ob-evd-occ__item--cancelled .ob-evd-occ__date {
    text-decoration: line-through;
    color: var(--ob-color-text-muted);
}
.ob-root .ob-evd-occ__status {
    color: var(--ob-color-primary);
    font-weight: 700;
    font-size: 14px;
}
/* ICS-Icon-Link: 44px-Touch-Target, Markenrot beim Hover */
.ob-root .ob-evd-occ__ics {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    /* Nur vertikal komprimieren (44px-Target in der kompakten Zeile);
       horizontal kein Negativ-Margin — der erzeugte mobil Seiten-Overflow. */
    margin: -10px 0;
    color: var(--ob-color-text-muted);
    transition: var(--ob-transition-fast);
}
.ob-root .ob-evd-occ__ics:hover {
    color: var(--ob-color-primary);
}
/* „Weitere Termine (N)"-Toggle: natives details/summary (wie EXT-Default),
   Summary als Text-Link ohne Standard-Marker */
.ob-root .ob-evd-occ__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.ob-root .ob-evd-occ__more::-webkit-details-marker {
    display: none;
}
.ob-root .ob-evd-occ__more:hover {
    text-decoration: underline;
}
/* Aufgeklappt: Toggle-Text ausblenden, die Zusatz-Termine schliessen buendig an */
.ob-root .ob-evd-occ__details[open] > .ob-evd-occ__more {
    display: none;
}
.ob-root .ob-evd-occ__hint {
    margin: 8px 0 0;
    color: var(--ob-color-text);
    font-size: 14px;
}
/* „Zum Kalender hinzufügen" (Gesamt-ICS) unten in der Box */
.ob-root .ob-evd-occ__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
    color: var(--ob-color-primary);
    text-decoration: none;
    font-weight: 700;
}
.ob-root .ob-evd-occ__all:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ob-root .ob-evd-price {
    margin: 0;
    font-weight: 700;
    color: var(--ob-color-primary);
}

/* ============================================================================
   26. INFRASTRUKTUR-DETAIL (singleView-infra) — Quelle: Live-POI-Detail
       www.osttirol.com (design/overrides-2026-07/live-referenz-infrastruktur/,
       dokumentiert in reference-layouts-teil2.md §8): Kopfgalerie ueber die
       volle Breite (Bild 1 doppelt so breit, "+n"-Kreis unten rechts), H1 +
       Pills, zwei Spalten mit Grau-Boxen rechts, Karte darunter.
       Kopf/Spalten/Boxen kommen aus §23 (ob-detail__*) — hier stehen nur die
       Bausteine, die es dort noch nicht gibt: Kopfgalerie, Oeffnungszeiten-
       Struktur, Status-Badge und Adressblock.
       Scope: .ob-root .ob-hero-gallery / .ob-hours / .ob-status-badge.
   ========================================================================== */

/* --- Kopfgalerie (Live: singleView-headerGallery-tiny) ---------------------
   Flex-Reihe mit weissen 1px-Fugen; Kachel 1 doppelt so breit. Mobil zeigt
   der Bestand nur Kachel 1 — die uebrigen sind ueber den "+n"-Kreis bzw. die
   Lightbox erreichbar. */
.ob-root .ob-hero-gallery {
    position: relative;
    max-height: 650px;
    overflow: hidden;
    margin-bottom: 35px;
    background: var(--ob-color-bg-alt);
}
.ob-root .ob-hero-gallery--tiny {
    display: flex;
}
.ob-root .ob-hero-gallery__item {
    display: block;
    flex: 1;
    min-height: 350px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ob-color-bg);
    background: var(--ob-color-bg-alt);
    cursor: zoom-in;
}
.ob-root .ob-hero-gallery__item--1 {
    flex: 2;
}
.ob-root .ob-hero-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ob-root .ob-hero-gallery--single .ob-hero-gallery__item {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border: 0;
}
@media (max-width: 767.98px) {
    /* Nur Kachel 1 — wie im Bestand (Kacheln 2-5 sind dort display:none). */
    .ob-root .ob-hero-gallery--tiny .ob-hero-gallery__item {
        display: none;
    }
    .ob-root .ob-hero-gallery--tiny .ob-hero-gallery__item--1 {
        display: block;
        flex: 1;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

/* "+n"-Kreis unten rechts, haengt zur Haelfte aus der Galerie — sichtbar
   bleibt das obere linke Viertel (Live: singleView-headerGallery-more).
   Im Bestand ein div mit cursor:pointer, bei uns ein Button. */
.ob-root .ob-hero-gallery__more {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 140px;
    padding: 26px 0 0 30px;
    border: 0;
    border-radius: var(--ob-radius-round);
    transform: translate(50%, 50%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-family: var(--ob-font-body);
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    transition: var(--ob-btn-transition);
}
/* Hover invertiert (Bestands-Regel §6: KEIN dunkleres Rot) */
.ob-root .ob-hero-gallery__more:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
@media (min-width: 992px) {
    .ob-root .ob-hero-gallery__more {
        width: 240px;
        height: 240px;
        padding: 45px 0 0 55px;
        font-size: 28px;
    }
}

/* --- Oeffnungsstatus-Badge (Delta: der Bestand zeigt nur Zeiten) -----------
   Formsprache des roten Bestands-Banners (eckig, 5px/12px, weisse Schrift) —
   nur die Farbe traegt die Aussage. Rot ist im CI die Markenfarbe und darf
   deshalb NICHT „geschlossen" heissen; geschlossen bekommt Grau, offen das
   lesbare Gruen aus dem Token-Satz. */
.ob-root .ob-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--ob-radius-badge);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ob-color-text-inverse);
    background: var(--ob-color-text);
}
.ob-root .ob-status-badge--open {
    background: var(--ob-color-success-text);
}
.ob-root .ob-status-badge--closed {
    background: var(--ob-color-text);
}
.ob-root .ob-status-badge--soon {
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-primary);
    color: var(--ob-color-primary);
}

/* --- Karte (Live: #webx-map, height 74vh) ---------------------------------
   §23 setzt die Hoehe auf `.exp-map` (Erlebnis-Detail); die Infrastruktur-
   Karte heisst `.ev-detail__map` und bliebe sonst auf ihren 260px aus
   events.css stehen. */
.ob-root .ob-detail__map .ev-detail__map {
    height: 74vh;
    min-height: 320px;
    border-radius: 0;
}

/* --- Themen-Pills (criteria[]) im Textfluss -------------------------------- */
.ob-root .ob-detail__topics {
    margin-top: 30px;
}
.ob-root .ob-detail__topics .ob-detail__pills {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Adressblock in der Kontakt-Box (Live: .address-wrap) ------------------ */
.ob-root .ob-addr {
    margin: 0 0 8px;
    line-height: 1.5;
}
/* „Anfahrt planen" ohne Icon, rot, als 44px-Ziel — wie die uebrigen
   Kontaktzeilen (Regel dafuer steht in §23). */
.ob-root .ob-detail__route {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
}

/* --- Oeffnungszeiten, strukturiert (Live: .singleView-openingHours.new) ----
   Je Saison ein Block: fette Zeitspanne, darunter die Zeilen. Bloecke sind
   durch eine Linie getrennt (Bestand: 14px Abstand + 1px #D9D9D9). */
.ob-root .ob-hours__block + .ob-hours__block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ob-color-border);
}
.ob-root .ob-detail__box .ob-hours__period {
    margin: 0 0 4px;
    font-weight: 700;
}
.ob-root .ob-detail__box .ob-hours__line {
    margin: 0;
    line-height: 1.5;
}
/* Feratel-Hinweis („Feiertags geschlossen!") — im Bestand der Schlusssatz
   derselben Box, kleiner und abgesetzt. */
.ob-root .ob-hours__note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ob-color-border);
    font-size: 14px;
}
.ob-root .ob-hours__note p {
    margin: 0 0 4px;
}
.ob-root .ob-hours__note p:last-child {
    margin-bottom: 0;
}

/* --- Ausstattungs-Box (classifications) ------------------------------------ */
.ob-root .ob-detail__box--cls .infra-cls-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-detail__box--cls .infra-cls-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.ob-root .ob-detail__box--cls .infra-cls-list__item + .infra-cls-list__item {
    border-top: 1px solid var(--ob-color-border);
}
.ob-root .ob-detail__box--cls .infra-cls-list__icon {
    flex: 0 0 auto;
}

/* --- Mobile Reihenfolge: Text vor den Grau-Boxen ---------------------------
   §23 loest die rechte Spalte mobil per display:contents auf und ordnet die
   Boxen per order um den Text (main 4, contact 6). Die Infrastruktur-Boxen
   heissen dort nicht mit — ohne diese Zuordnung stuenden Oeffnungszeiten und
   Ausstattung VOR dem Fliesstext (order-Default 0). Reihenfolge wie in der
   rechten Spalte: Kontakt, Oeffnungszeiten, Ausstattung. */
@media (max-width: 991.98px) {
    .ob-root .ob-detail__box--hours { order: 7; }
    .ob-root .ob-detail__box--cls   { order: 8; }
}

/* ============================================================================
   27. PAUSCHALEN-DETAIL (detailpage-*) — Quelle: Live-Angebotsseite
       www.osttirol.com/urlaub-buchen/angebote/details/<slug>
       (design/overrides-2026-07/live-referenz-pauschalen/, dokumentiert in
       reference-layouts-teil2.md §6): mittig gesetztes Intro, Zeitraum-Zeile,
       „buchen"-Button, Fliesstext ueber die volle Breite, zweispaltiger Text,
       Bilderreihe, zentrierte Ueberleitung zur Betriebsliste.

       Zweiter Teil: eine Live-Look-Grundierung fuer die Buchungsstrecke
       (pk-*). Die hat im Bestand kein Gegenstueck — dort steht nur eine
       Hotelliste und ein Powermail-Formular. Sie muss deshalb nicht „ident"
       aussehen, aber dieselbe Formsprache sprechen: kantig, #F4F4F4,
       Markenrot als Akzent, Brown/CambridgeBold, flache Inputs.
       Scope: .ob-root.ob-pkg bzw. .ob-root .ob-pkg-*.
   ========================================================================== */

/* --- Intro, mittig (Live: .detailpage-intro / -dates / -requestnow) -------- */
.ob-root .ob-pkg__intro {
    margin-top: 4vh;
    margin-bottom: 4vh;
    text-align: center;
}
.ob-root .ob-pkg__title {
    margin: 0;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h1);
    line-height: 1.2;
    overflow-wrap: break-word;
}
@media (min-width: 992px) {
    .ob-root .ob-pkg__title { font-size: var(--ob-fs-h1-lg); }
}
.ob-root .ob-pkg__wish {
    margin: 15px 0 0;
}
/* Zeitraum-Zeile: mehrere Perioden untereinander (Live: .dates-line) */
.ob-root .ob-pkg__dates {
    margin: 20px 0 3vh;
}
.ob-root .ob-pkg__dates-line {
    display: block;
    line-height: 1.5;
}
.ob-root .ob-pkg__dates-line--duration {
    color: var(--ob-color-text);
}
.ob-root .ob-pkg__requestnow {
    margin-bottom: 6vh;
}
.ob-root .ob-pkg__price {
    margin: 0 0 10px;
    color: var(--ob-color-primary);
    font-weight: 700;
    font-size: var(--ob-fs-subline);
}
.ob-root .ob-pkg__book {
    margin-bottom: 10px;
    margin-right: 10px;
}
/* "Jetzt anfragen" neben dem Buchen-Knopf (Kundenpunkt 07.08.2026). Beide sind
   `ob-btn` und damit inline-block, stehen also von selbst nebeneinander; der
   Preis darueber und das Quell-Badge darunter sind Block-Elemente und bleiben
   auf eigenen Zeilen. Bewusst die leisere Variante - Umriss statt Flaeche,
   buchen bleibt der Hauptweg. Keine neue `ob-btn`-Basisvariante dafuer: die
   Ghost-Optik gibt es sonst nirgends im Design-Set. */
.ob-root .ob-pkg__enquire {
    margin-bottom: 10px;
    background: transparent;
    color: var(--ob-color-primary);
}
.ob-root .ob-pkg__enquire:hover,
.ob-root .ob-pkg__enquire:focus-visible {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Quell-Badge (LIVE/DEMO) dezent unter dem Button, nicht daneben */
.ob-root .ob-pkg__requestnow .ob-detail__source {
    display: block;
    margin-top: 10px;
}

/* --- Fliesstext + zweispaltiger Block (Live: detailpage-text1 / -text2) ---- */
.ob-root .ob-pkg__text1,
.ob-root .ob-pkg__text2 {
    margin-bottom: 4vh;
    font-size: var(--ob-fs-base);
    line-height: 25px;
}
.ob-root .ob-pkg__text2 {
    display: grid;
    gap: 30px;
}
@media (min-width: 992px) {
    .ob-root .ob-pkg__text2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px;
    }
}
.ob-root .ob-pkg__col > :first-child {
    margin-top: 0;
}
.ob-root .ob-pkg__list {
    margin: 0;
    padding-left: 20px;
}
.ob-root .ob-pkg__list li {
    margin-bottom: 6px;
}
.ob-root .ob-pkg__prices {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-root .ob-pkg__price-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
}
.ob-root .ob-pkg__price-row + .ob-pkg__price-row {
    border-top: 1px solid var(--ob-color-border);
}
.ob-root .ob-pkg__price-val {
    color: var(--ob-color-primary);
    white-space: nowrap;
}

/* --- Kopfbild (Abnahme-Punkt 161) -----------------------------------------
   Der Override hatte keins; das Bild liegt im Datensatz in 1200 px. Festes
   16:9-Fenster, damit die Seite beim Laden nicht springt. */
.ob-root .ob-pkg__hero {
    margin: 0 auto 4vh;
}
.ob-root .ob-pkg__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Fotocredit unter dem Kopfbild (Punkt 90). Rendert nur, wenn Feratel einen
   Autor liefert - das entscheidet das Template, nicht das CSS. */
.ob-root .ob-pkg__hero-credit {
    margin: 6px 0 0;
    color: var(--ob-color-text-muted, #5d5d5d);
    font-size: 13px;
    text-align: right;
}

/* --- Bilderreihe (Live: .detailpage-images-slider, .detailpage-image 15px) --
   Mobil horizontal scrollbar wie im Bestand. Ab Tablet ein Raster mit
   Mindestbreite statt „alle in eine Reihe": bei fuenf Bildern schrumpfte jede
   Kachel sonst auf 228 px (gemessen 04.08.2026, Abnahme-Punkt 157) - die
   Bilder waren scharf, aber zu klein. */
.ob-root .ob-pkg__images {
    display: flex;
    gap: 30px;
    margin-top: 4vh;
    margin-bottom: 4vh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ob-root .ob-pkg__image {
    flex: 0 0 80%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .ob-root .ob-pkg__images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        overflow-x: visible;
    }
    .ob-root .ob-pkg__image { flex: none; }
}
.ob-root .ob-pkg__image-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* --- Video / Anbieter (kein Bestands-Gegenstueck) -------------------------- */
.ob-root .ob-pkg__video,
.ob-root .ob-pkg__info {
    margin-bottom: 4vh;
}
@media (min-width: 992px) {
    /* Anbieter-Box nicht ueber die volle Breite ziehen — sie traegt vier Zeilen */
    .ob-root .ob-pkg__info .ob-detail__box { max-width: 420px; }
}

/* --- Betriebsliste: zentrierte Ueberleitung (Live: detailpage-packagehotels-
   headline, margin-top 4vw) + Abstand zur Liste (45px) ---------------------- */
.ob-root .ob-pkg__hotels {
    margin-top: 4vh;
}
.ob-root.ob-pkg .pk-detail__hotels > .pk-detail__section-title {
    margin: 0 0 45px;
    text-align: center;
    color: var(--ob-color-heading);
    font-family: var(--ob-font-display);
    font-weight: 500;
    font-size: var(--ob-fs-h3);
    line-height: 1.2;
}
@media (min-width: 992px) {
    .ob-root.ob-pkg .pk-detail__hotels > .pk-detail__section-title {
        font-size: var(--ob-fs-h3-lg);
    }
}
.ob-root .ob-pkg__back {
    margin: 4vh 0;
    text-align: center;
}

/* --- Live-Look-Grundierung der Buchungsstrecke (pk-*) ----------------------
   Nur Flaechen, Kanten, Farben und Schrift — kein Umbau der Struktur, damit
   das Alpine-Verhalten unangetastet bleibt. */
.ob-root.ob-pkg .pk-search-block,
.ob-root.ob-pkg .pk-hotel-card,
.ob-root.ob-pkg .pk-bk,
.ob-root.ob-pkg .pk-occ-modal__dialog,
.ob-root.ob-pkg .pk-bk-confirm__dialog {
    border-radius: var(--ob-radius-card);
    box-shadow: none;
}
.ob-root.ob-pkg .pk-search-block,
.ob-root.ob-pkg .pk-bk {
    background: var(--ob-color-bg-alt);
    border: 0;
}
.ob-root.ob-pkg .pk-search-block__heading {
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-weight: 700;
}
.ob-root.ob-pkg .pk-hotel-card {
    border: 1px solid var(--ob-color-border);
    transition: var(--ob-btn-transition);
}
.ob-root.ob-pkg .pk-hotel-card:hover {
    background: var(--ob-color-primary-soft);
}
.ob-root.ob-pkg .pk-hotel-card__name {
    color: var(--ob-color-primary);
    font-weight: 700;
    font-size: 19px;
    line-height: 22px;
}
/* Buttons: Bestands-Optik (kantig, 2px Rahmen, Hover invertiert statt dunkler) */
.ob-root.ob-pkg .pk-bk__btn-primary,
.ob-root.ob-pkg .pk-cta-book {
    border-radius: var(--ob-radius-button);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-family: var(--ob-font-body);
    transition: var(--ob-btn-transition);
}
.ob-root.ob-pkg .pk-bk__btn-primary:hover:not(:disabled),
.ob-root.ob-pkg .pk-cta-book:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
.ob-root.ob-pkg .pk-bk__btn-secondary {
    border-radius: var(--ob-radius-button);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
    transition: var(--ob-btn-transition);
}
.ob-root.ob-pkg .pk-bk__btn-secondary:hover:not(:disabled) {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
/* Inputs flach: nur untere Kante, radius 0 (Bestands-Inputstil §7) */
.ob-root.ob-pkg .pk-bk__input,
.ob-root.ob-pkg .pk-search-block input,
.ob-root.ob-pkg .pk-search-block select {
    border-radius: var(--ob-radius-input);
    border: 0;
    border-bottom: 1px solid var(--ob-color-border-input);
    background: var(--ob-color-bg);
    min-height: var(--ob-input-minh);
    font-family: var(--ob-font-body);
}
.ob-root.ob-pkg .pk-bk__round {
    border-radius: var(--ob-radius-round);
    border: 1px solid var(--ob-color-border-input);
    background: var(--ob-color-bg);
    color: var(--ob-color-text);
}
.ob-root.ob-pkg .pk-bk__round:hover:not(:disabled) {
    border-color: var(--ob-color-primary);
    color: var(--ob-color-primary);
}

/* ============================================================================
   28. WARENKORB (Live-Look) — Quelle: der Bestand hat KEINE Warenkorb-Seite,
       sondern ein Header-Flyout (.shoppingcart-container: Ueberschrift
       „Warenkorb", Einleitungssatz, .shoppingcart-items). Uebernommen ist
       deshalb die Formensprache der Bestandsseiten, nicht ein Screenshot:
       Container 1310 px, graue Flaechen #F4F4F4 statt weisser Karten mit
       Schatten, Radius 0, Brown, Markenrot fuer Aktionen und Summe.

       Markup und Verhalten kommen unveraendert aus Partials/Cart/Body.html —
       hier steht ausschliesslich Chrome.

       Scope: `.ob-root.ob-cart` — ob-root, ob-cart und ott-cart sitzen auf
       DEMSELBEN Element (LL-092: `.ob-root .ob-cart` traefe nie).
   ========================================================================== */

.ob-root.ob-cart {
    display: block;
    max-width: none;
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    color: var(--ob-color-text);
}
/* Die Flex-Spalte wandert vom Wurzelelement in den Container — dort sitzen
   jetzt die Bloecke (Status, Liste, Zusammenfassung, Leerzustand). */
.ob-root.ob-cart > .ob-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Statuszeile („2 Positionen") ------------------------------------------ */
.ob-root.ob-cart .ott-cart__status {
    margin: 0;
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
}

/* --- Positionen ------------------------------------------------------------ */
.ob-root.ob-cart .ott-cart__list {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Bestandsfuge wie in der Kopfgalerie, keine Kartenabstaende */
}
.ob-root.ob-cart .ott-cart__item {
    padding: 20px 25px;
    border: 0;
    border-radius: 0;
    background: var(--ob-color-bg-alt);
    box-shadow: none;
}
/* Typ-Zeile („Unterkunft"): im Bestand gibt es keine Pillen im Warenkorb —
   eine ruhige Grossbuchstaben-Zeile ueber dem Titel. */
.ob-root.ob-cart .ott-cart__badge {
    margin: 0 0 4px;
    padding: 0;
    font-family: var(--ob-font-body);
    border-radius: 0;
    background: none;
    color: var(--ob-color-text);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ob-root.ob-cart .ott-cart__item-title {
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-size: 19px;
    font-weight: 700;
    line-height: 22px;
}
.ob-root.ob-cart .ott-cart__item-provider,
.ob-root.ob-cart .ott-cart__fact {
    color: var(--ob-color-text);
}
.ob-root.ob-cart .ott-cart__item-price {
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: 22px;
    font-weight: 700;
}
/* „Entfernen": Textlink in Markenrot, 44px-Ziel, kein Pillen-Button. */
.ob-root.ob-cart .ott-cart__item-remove {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ob-color-primary);
    font-size: var(--ob-fs-base);
}
.ob-root.ob-cart .ott-cart__item-remove:hover,
.ob-root.ob-cart .ott-cart__item-remove:focus-visible {
    background: none;
    color: var(--ob-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Zusammenfassung ------------------------------------------------------- */
.ob-root.ob-cart .ott-cart__summary {
    padding: 25px;
    border: 0;
    border-radius: 0;
    background: var(--ob-color-bg-alt);
}
.ob-root.ob-cart .ott-cart__total-label {
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
}
.ob-root.ob-cart .ott-cart__total-value {
    color: var(--ob-color-primary);
    font-family: var(--ob-font-body);
    font-size: 30px;
    font-weight: 700;
}
.ob-root.ob-cart .ott-cart__hint {
    color: var(--ob-color-text);
    font-size: 14px;
}

/* --- Buttons: Bestands-Optik der .ob-btn-Familie --------------------------- */
.ob-root.ob-cart .ott-cart__btn {
    display: inline-block;
    padding: var(--ob-btn-pad);
    min-width: var(--ob-btn-minw);
    border: var(--ob-btn-border-w) solid var(--ob-color-primary);
    border-radius: var(--ob-radius-button);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    transition: var(--ob-btn-transition);
}
/* Hover invertiert (Bestandsregel §6: kein dunkleres Rot). */
.ob-root.ob-cart .ott-cart__btn:hover {
    background: var(--ob-color-bg);
    color: var(--ob-color-primary);
}
.ob-root.ob-cart .ott-cart__btn--secondary {
    background: transparent;
    color: var(--ob-color-primary);
}
.ob-root.ob-cart .ott-cart__btn--secondary:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}

/* --- Hinweise / Leerzustand ------------------------------------------------ */
.ob-root.ob-cart .ott-cart__notice,
.ob-root.ob-cart .ott-cart__empty,
.ob-root.ob-cart .ott-cart__wish,
.ob-root.ob-cart .ott-cart__planner,
.ob-root.ob-cart .ott-cart__ideas {
    border: 0;
    border-radius: 0;
    background: var(--ob-color-bg-alt);
    box-shadow: none;
}
.ob-root.ob-cart .ott-cart__notice--error {
    border-left: 4px solid var(--ob-color-primary);
}
.ob-root.ob-cart .ott-cart__notice-title,
.ob-root.ob-cart .ott-cart__empty-title,
.ob-root.ob-cart .ott-cart__planner-title,
.ob-root.ob-cart .ott-cart__ideas-title,
.ob-root.ob-cart .ott-cart__wish-title {
    color: var(--ob-color-heading);
    font-family: var(--ob-font-body);
    font-weight: 700;
}
.ob-root.ob-cart .ott-cart__empty-title {
    font-size: var(--ob-fs-h3);
}
@media (min-width: 992px) {
    .ob-root.ob-cart .ott-cart__empty-title { font-size: var(--ob-fs-h3-lg); }
}
/* Datums-Chips und -Felder flach wie die Bestands-Formulare. */
.ob-root.ob-cart .ott-cart__chip,
.ob-root.ob-cart .ott-cart__input {
    border-radius: 0;
    border: 1px solid var(--ob-color-border);
    background: var(--ob-color-bg);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
}
/* Restliche Beschriftungen aus dem Extension-Look: cart.css setzt dort
   `--font-display` (Outfit); im Bestand ist alles ausser der H1 Brown. */
.ob-root.ob-cart .ott-cart__field-label,
.ob-root.ob-cart .ott-cart__idea-title,
.ob-root.ob-cart .ott-cart__nights,
.ob-root.ob-cart .ott-cart__empty-text,
.ob-root.ob-cart .ott-cart__idea-text,
.ob-root.ob-cart .ott-cart__wish-text {
    font-family: var(--ob-font-body);
    color: var(--ob-color-text);
}
.ob-root.ob-cart .ott-cart__chip--active {
    border-color: var(--ob-color-primary);
    background: var(--ob-color-primary);
    color: var(--ob-color-text-inverse);
}
.ob-root.ob-cart .ott-cart__idea,
.ob-root.ob-cart .ott-cart__idea-link {
    border-radius: 0;
    color: var(--ob-color-text);
}
/* Die Illustration traegt im Extension-Look eigene Farben; im Bestandslook
   bleibt sie in Grau + Markenrot statt in der T7-Palette. */
.ob-root.ob-cart .ott-cart__art-sun,
.ob-root.ob-cart .ott-cart__art-flag {
    fill: var(--ob-color-primary);
}

/* ============================================================================
   29. FLACHE FLAECHEN — Reste des T7-Looks auf den Detailseiten
       Am 29.07.2026 ueber alle fuenf Detailseiten gemessen (Suche nach
       border-radius >= 8px oder box-shadow innerhalb von .ob-root). Der
       Bestand ist durchgehend kantig und schattenlos; die Ausnahmen sind
       Pills (15px) und runde Icon-Buttons (Merken-Herz). Alles andere hier
       flachziehen — die Regeln stehen bewusst beisammen, weil es EIN Befund
       ist und nicht fuenf modulweise.
   ========================================================================== */

/* TrustYou-Block (Unterkunfts-Detail): Karten, Balken und Zitatflaechen */
.ob-root [class^="osttirol-ty__"],
.ob-root [class*=" osttirol-ty__"] {
    border-radius: 0;
    box-shadow: none;
}
/* Ausnahme: Grafik-Elemente, keine Flaechen. Die Attribut-Regel darueber
   trifft auch die 6-10px hohen Messbalken und den 8px-Punkt der
   „Gut zu wissen"-Liste — quadratisch sehen die falsch aus, und einen
   Bestandsbezug gibt es fuer sie nicht (TrustYou ist unsere Ergaenzung).
   Dieselbe Linie wie beim Score-Kreis der Card in §9. */
.ob-root .osttirol-ty__hist-bar,
.ob-root .osttirol-ty__hist-fill,
.ob-root .osttirol-ty__cat-bar,
.ob-root .osttirol-ty__cat-fill,
.ob-root .osttirol-ty__gtk-dot {
    border-radius: 999px;
}

/* Detail-Karten (MapLibre-Container) */
.ob-root .osttirol-detail-map {
    border-radius: 0;
    box-shadow: none;
}

/* Pill-Trigger der Buchungsleiste: in der Filterleiste laeuft er schon als
   Pill (§11), in der Buchungsbox des Unterkunfts-Details fiel er auf den
   10px-Radius der Extension zurueck. */
.ob-root .ob-bookingbar .ob-search-trigger {
    border-radius: var(--ob-radius-pill);
}

/* „Mehr Erlebnisse"-Strecke: die Karten kommen aus den Tailwind-Primitives
   und brachten 28px Radius plus Schatten mitten in eine kantige Seite.
   Mit Radius und Schatten faellt auch ihre Kontur weg — weiss auf weiss
   waere danach nur noch das Bild sichtbar. Deshalb dieselbe graue Flaeche
   wie bei jeder anderen Karte der Strecke (§7). */
.ob-root .exp-more__item {
    border-radius: var(--ob-radius-card);
    box-shadow: var(--ob-shadow-card);
    background: var(--ob-color-surface-card);
}
.ob-root .exp-more__item img {
    border-radius: 0;
}

/* Event-Detail: die CTA war eine Vollrund-Pill, Buttons sind im Bestand eckig.
   Ausserdem stand sie rot auf rot (1:1 Kontrast, unlesbar): events.css setzt
   `color:#fff`, verliert aber gegen die Link-Regel der Kontaktbox (§26,
   zwei Klassen + Typ = 0,2,1). Deshalb hier mit beiden Link-Klassen am
   selben Element (0,3,0) — eine Ebene darueber, ohne !important. */
.ob-root .ev-detail__link.ev-detail__link--cta,
.ob-root .ev-detail__link.ev-detail__link--cta:hover,
.ob-root .ev-detail__link.ev-detail__link--pdf,
.ob-root .ev-detail__link.ev-detail__link--pdf:hover {
    border-radius: var(--ob-radius-button);
    color: var(--ob-color-text-inverse);
}

/* Sternchen der Hotel-Karten in der Pauschalen-Buchung: packages.css setzt
   #c08a1e fest (Gold, 3,05:1 auf Weiss). Klassifizierungen laufen im Bestand
   im Markenrot — dieselbe Linie wie §7 fuer die Card. */
.ob-root .pk-hotel-card__stars {
    color: var(--ob-color-primary);
}

/* Die Suchleiste selbst: §11 formt ihre Kinder zu Pills, der Container behielt
   aber Radius und Schatten aus app.css. Im Bestand steht die Filterzeile ohne
   eigenen Kasten. */
.ob-root .ob-searchbar {
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* KI-Suchleisten der Erlebnis- und Event-Liste: 16px Radius aus der T7-Welt. */
.ob-root .exp-ai-search,
.ob-root .ev-ai-search {
    border-radius: 0;
}
/* Der Datenschutz-/KI-Hinweis darunter lief in --c-text-subtle (#767676) und
   erreichte auf der grauen Flaeche nur 4,13:1. Hinweise zur KI-Nutzung sind
   Pflichttext (EU AI Act Art. 50) und muessen lesbar sein. */
.ob-root .exp-ai-search__hint,
.ob-root .ev-ai-search__hint {
    color: var(--ob-color-text);
}

/* Anfrageformular auf dem Unterkunfts-Detail: Felder und der Reise-Fieldset
   trugen noch den 10px-Radius der Extension. Der Bestand fuehrt Eingabefelder
   ohne Rundung (tokens-extraction.md §7, --ob-radius-input = 0). */
.ob-root .osttirol-enquiry-form__travel,
.ob-root .osttirol-enquiry-form input,
.ob-root .osttirol-enquiry-form select,
.ob-root .osttirol-enquiry-form textarea {
    border-radius: var(--ob-radius-input);
}

/* ============================================================================
   30. EVENT-LISTE — Feinschliff aus dem Abgleich vom 29.07.2026 (Stefan).
       Alle Werte gegen die Live-Seite gemessen
       (/events-kultur/alle-veranstaltungen), nicht geschaetzt.
   ========================================================================== */

/* 30.1 Abstand Seiten-H1 -> Plugin. Der Rahmen der Wirtsseite bringt
   `#main > .frame { padding-top: 10vh }` mit (bei 900px Hoehe gemessen: 90px,
   bei 1600px: 160px) — daraus wurden zusammen mit den 24px aus events.css
   114px Loch unter der Ueberschrift. Der vh-Anteil faellt ueber die
   Seiteneinstellung `space_before = nospace` am Inhaltselement weg
   (Wirtsseiten-CSS, gehoert nicht ins Plugin); den verbleibenden Abstand
   setzt das Plugin hier bewusst fix — 40px im Sektions-Rhythmus 30/40 der
   Detailseiten, unabhaengig von der Viewport-Hoehe.
   ob-root UND ev-list sitzen auf demselben Element -> zusammengeschrieben
   (LL-092). */
.ob-root.ev-list {
    padding-top: 40px;
}

/* 30.2 Sortier-Dropdown: die Wirtsseite ersetzt jedes <select> per Selectric
   durch eigenes Markup. Deren Pfeil (`.button`, 35px) liegt absolut am rechten
   Rand, die Basisregel `.selectric .label` haelt aber nur 10px frei — der Pfeil
   lag auf dem „h" von „sortieren nach". Der Bestand loest das mit
   `.tx-webx-bookingemo .sortingView-container … .label { padding-right: 35px }`
   auf 150px Breite; diese Klassenkette hat unser Markup nicht. Gemessene
   Bestandswerte hier nachgezogen. */
.ob-root .ob-result-header__sort .selectric-wrapper {
    min-width: 150px;
}
.ob-root .ob-result-header__sort .selectric .label {
    padding-right: 35px;
}

/* 30.3 „Nur Top-Events" als Checkbox direkt in der Filterleiste — gleiche
   Pill-Optik wie die Datums-Pill daneben. Kasten und Haken zeichnen wir seit
   29.07.2026 selbst (Begruendung an der Label-Regel unten). */
.ob-root .ob-evbar-top {
    display: inline-flex;
    align-items: center;
    /* Auf Zeilenhoehe mitwachsen: die Datums-Pill daneben ist durch die nativen
       `type=date`-Felder 64px hoch (die Wirtsseite gibt jedem Input 54px). Mit
       eigener Hoehe stand die Checkbox-Pill 18px flacher in derselben Zeile.
       `stretch` schlaegt das `align-items: center` der Leiste nur fuer dieses
       Kind — mobil, wenn die Pill in eine eigene Zeile umbricht, bleibt es
       folgenlos. */
    align-self: stretch;
    min-height: 44px;
    /* KEIN vertikales Padding (--ob-pill-pad ist `4px 15px`): die Label bringt
       ihre 11px oben/unten schon mit. Mit beidem war die Pill 52px hoch und
       stand damit 8px hoeher als die Datums-Pill daneben (beide in einem
       `align-items: center`-Flex, also sichtbar versetzt). Die Hoehe kommt aus
       `min-height` + Label-Padding, die Breite aus den 15px seitlich. */
    padding: 0 15px;
    background: var(--ob-color-bg);
    border: 1px solid var(--ob-color-border);
    border-radius: var(--ob-radius-pill);
    transition: var(--ob-transition-fast);
}
/* Die native Checkbox selbst verstecken — NICHT auf die Wirtsseite verlassen
   (`.wrapAll input[type=checkbox] { opacity: 0 }`). Ohne eigenen Selektor steht
   sie ueberall dort sichtbar neben unserem gezeichneten Kasten, wo ob-live.css
   ohne den Wirtsrahmen greift: Dokploy-Staging und `/styleguide`. Gleiche
   Vorgehensweise wie beim Map-Toggle (§1). Nicht `display: none` — das nimmt dem
   Feld Fokus und Tastaturbedienung. */
.ob-root .ob-evbar-top .ob-evbar-top__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ob-root .ob-evbar-top:hover,
.ob-root .ob-evbar-top:focus-within {
    border-color: var(--ob-color-primary);
}
/* Die Label traegt die Klickflaeche: 11px oben/unten ergeben mit der Zeilenhoehe
   das 44px-Touch-Target, 26px links sind der Platz fuer den Kasten.

   Kasten UND Haken zeichnen wir hier selbst — bewusst NICHT geerbt. Die
   Wirtsseite malt beides ueber `input[type=checkbox] + label::before/::after`,
   aber in zwei verschiedenen Positionierungsmodellen: der Kasten (`::before`)
   liegt IM FLUSS (inline-block), der Haken (`::after`) ist `absolute` bei
   `left: 3px`. Sobald die Label ein linkes Padding hat, wandert der Kasten mit
   dem Textanfang nach rechts, der Haken bleibt am linken Rand stehen — genau
   die verschobene Checkbox aus Stefans Screenshot (29.07.2026, gemessen: Kasten
   bei x=500, Haken bei x=473). Eigene, absolute Geometrie fuer beide macht das
   Paar unabhaengig vom Padding und zentriert es vertikal. */
.ob-root .ob-evbar-top .ob-evbar-top__label {
    position: relative;
    /* `text-indent: 0` ist Pflicht, nicht Kosmetik: die Wirtsseite arbeitet mit
       dem klassischen Paar `padding-left: 30px` + `text-indent: -30px` — das
       negative Einrueckungsmass zieht den in-Fluss-Kasten in die linke Luecke.
       Bleibt es stehen, waehrend wir das Padding auf 26px setzen, startet der
       Text 4px LINKS der Label-Kante (auf dev gemessen) und liegt unter unserem
       absoluten Kasten: „Nur Top-Events" wurde zu „[x]r Top-Events". */
    text-indent: 0;
    padding: 11px 0 11px 26px;
    color: var(--ob-color-text);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.ob-root .ob-evbar-top .ob-evbar-top__input + .ob-evbar-top__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: 0;
    box-sizing: border-box;
    transform: translateY(-50%);
    border: 2px solid var(--ob-color-border);
    border-radius: 3px;
    background: var(--ob-color-bg);
}
/* Haken: klassisches L aus zwei Kanten, um 45 Grad gedreht. Sichtbar wird er
   erst im :checked-Zustand (Farbe unten), die Geometrie steht hier. */
.ob-root .ob-evbar-top .ob-evbar-top__input + .ob-evbar-top__label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 11px;
    margin: 0;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: translateY(-65%) rotate(45deg);
    background: none;
}
/* Tastatur: das Input ist unsichtbar (1x1 px, opacity 0), der Fokusring muss
   deshalb an der Pill sichtbar werden. */
.ob-root .ob-evbar-top:has(.ob-evbar-top__input:focus-visible) {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}
/* Rueckfall ohne `:has()`: dann ringt der gezeichnete Kasten. Ein Fokusring, der
   nur an einem Selektor haengt, ist bei einem unsichtbaren Input ein
   Totalausfall der Tastaturbedienung — das ist die eine Stelle, an der eine
   doppelte Regel billiger ist als das Restrisiko. */
.ob-root .ob-evbar-top .ob-evbar-top__input:focus-visible + .ob-evbar-top__label::before {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}
/* Aktiver Zustand: Pill, Text, Kasten und Haken ins Markenrot — wie ein
   aktiver Filter-Chip. Spezifitaet liegt bewusst ueber der Wirtsseiten-Regel
   (`.wrapAll input[type=checkbox]:checked + label::after`). */
.ob-root .ob-evbar-top:has(.ob-evbar-top__input:checked) {
    border-color: var(--ob-color-primary);
}
.ob-root .ob-evbar-top__input:checked + .ob-evbar-top__label {
    color: var(--ob-color-primary);
    font-weight: 700;
}
.ob-root .ob-evbar-top__input:checked + .ob-evbar-top__label::before {
    border-color: var(--ob-color-primary);
}
.ob-root .ob-evbar-top__input:checked + .ob-evbar-top__label::after {
    border-color: transparent var(--ob-color-primary) var(--ob-color-primary) transparent;
}

/* 30.4 Datum-/Uhrzeit-Icon in der Karten-Datumszeile. Die Zeile ist ein Flex-
   Container mit `align-items: baseline` (§7) — Icon und Text muessen daher in
   einem eigenen Inline-Flex sitzen, sonst zieht das SVG die Grundlinie hoch. */
.ob-root .ob-card--event .ob-card__datetime-day,
.ob-root .ob-card--event .ob-card__datetime-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ob-root .ob-card__datetime-icon {
    flex: 0 0 auto;
    /* Keine eigene Farbe: currentColor uebernimmt Rot fuer das Datum und den
       Textton fuer die Uhrzeit. */
    color: currentColor;
}

/* ============================================================================
   31. ERLEBNIS-LISTE — Feinschliff aus dem Abgleich vom 29.07.2026 (Stefan).
       Dieselbe Formsprache wie die Event-Liste (§30), gleiche Ursachen.
   ========================================================================== */

/* 31.1 Abstand Seiten-H1 -> Plugin, identisch zu §30.1: der vh-Anteil faellt
   ueber `space_before = nospace` am Inhaltselement weg, den Rest setzt das
   Plugin fix. ob-root UND exp-list sitzen auf demselben Element (LL-092). */
.ob-root.exp-list {
    padding-top: 40px;
}

/* 31.2 Filterleiste: „Filter ›" rechtsbuendig, aktive Chips davor.
   Die §11-Regeln formen den Trigger NUR innerhalb von `.ob-searchbar` — in
   der Erlebnis-Leiste (`.ob-filterline`) griffen sie nicht, der Trigger stand
   ungestylt mit 26px Hoehe da (dieselbe 44px-Falle wie in Inc 6). Deshalb hier
   ausgeschrieben statt vererbt; Werte 1:1 aus §11. */
.ob-root .ob-filterline .ob-search-morefilters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: none;
    border: 0;
    min-height: 44px;
    padding: var(--ob-pill-pad);
    color: var(--ob-color-text);
    font-family: var(--ob-font-body);
    font-size: var(--ob-fs-base);
    font-weight: 700;
    cursor: pointer;
}
.ob-root .ob-filterline .ob-search-morefilters:hover {
    color: var(--ob-color-primary);
}
.ob-root .ob-filterline .ob-search-morefilters .ob-filter-arrow {
    color: var(--ob-color-primary);
}
.ob-root .ob-filterline .ob-search-morefilters.is-active {
    color: var(--ob-color-primary);
}
.ob-root .ob-filterline__active {
    margin: 0;
}
@media (max-width: 767px) {
    /* Mobil bricht das Suchfeld auf ganze Breite um; der Trigger steht dann
       links darunter statt am rechten Rand einer halbleeren Zeile. */
    .ob-root .ob-filterline .ob-search-morefilters {
        margin-left: 0;
    }
}

/* ============================================================================
   32. KARTEN-POPUP (MapLibre) — Quelle: MapLibre-Default war ungestaltet.
       Befund 29.07.2026: eckige weisse Box in Systemschrift, der
       Schliessen-Button (`.maplibregl-popup-close-button`) sass als
       transparentes „x" halb ueber dem Bildrand statt in einer eigenen
       Trefferflaeche. Popups sind Kinder des Karten-Containers und liegen
       damit INNERHALB von .ob-root — die Regeln bleiben also im Plugin-Scope.
   ========================================================================== */
/* Innenabstand fuer JEDES Popup — und rechts 44px, damit kein Text unter dem
   Schliessen-Button verschwindet.

   Nachtrag 29.07.2026 (Stefan: „Padding fehlt in der map mit dem pin"): hier
   stand `padding: 0`, weil der ERSTE gestaltete Fall das Erlebnis-Popup mit
   randlosem Bild war und seinen Abstand selbst mitbringt
   (`.ob-mappopup__body`). Die Regel trifft aber alle Module: das
   Event-Detail-Popup (`.ev-map-popup`), das Event-Listen-Popup, das
   Erlebnis-Detail-Popup und das Unterkunfts-Popup haben kein solches
   Body-Element — ihr Text klebte an allen vier Kanten und lief unter dem
   32px-Schliessen-Button hindurch (auf dev gemessen: Titel „Innenstadt,
   Hochstein Talstation, Schloss Bruck" verdeckt).

   Umgekehrt: die randlose Bild-Variante braucht weiter 0 — das erledigt die
   `:has()`-Ausnahme unten, statt die Grundregel wieder leer zu machen. */
.ob-root .maplibregl-popup-content {
    padding: 12px 44px 12px 14px;
    border-radius: var(--ob-radius-card);
    /* Bewusst NICHT --ob-shadow-card: dieses Token ist `none` (die flachen
       Flaechen aus §29). Eine Bubble, die ueber dem Kartenbild schwebt, braucht
       eine Kante, sonst verschwimmt Weiss auf hellem Kartenhintergrund. */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    font-family: var(--ob-font-body);
    overflow: hidden;
}
/* Schliessen-Button: eigene 32px-Flaeche oben rechts IM Popup, weisser Grund
   damit er auch auf dem Bild lesbar bleibt. */
.ob-root .maplibregl-popup-close-button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ob-radius-round, 50%);
    background: var(--ob-color-bg);
    color: var(--ob-color-text);
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 2;
}
.ob-root .maplibregl-popup-close-button:hover {
    background: var(--ob-color-primary);
    color: var(--ob-color-bg);
}
.ob-root .maplibregl-popup-close-button:focus-visible {
    outline: 2px solid var(--ob-color-primary);
    outline-offset: 2px;
}
/* Der Sprechblasen-Zipfel traegt die Popup-Farbe (Default ist weiss und passt,
   wird hier nur explizit gehalten, damit ein Theme-Wechsel ihn mitnimmt). */
.ob-root .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.ob-root .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.ob-root .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--ob-color-bg);
}
.ob-root .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.ob-root .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.ob-root .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--ob-color-bg);
}
.ob-root .maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--ob-color-bg);
}
.ob-root .maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--ob-color-bg);
}
/* Inhalt der Bubble: Bild randlos oben, Text mit 12px Innenabstand.
   Titel im Markenrot wie die Card-Titel, Preis fett darunter. */
/* Ausnahme von der Grundregel oben: die gemeinsame Bubble (.ob-mappopup, seit
   03.08.2026 in allen Modulen) fuehrt ihr Bild bis an die Kante und setzt den
   Textabstand selbst. Der Schliessen-Button liegt hier
   bewusst UEBER dem Bild (eigene weisse Flaeche), deshalb braucht es auch die
   44px rechts nicht. */
.ob-root .maplibregl-popup-content:has(.ob-mappopup) {
    padding: 0;
}
.ob-root .ob-mappopup {
    width: 220px;
    max-width: 100%;
}
.ob-root .ob-mappopup__img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    margin: 0;
}
.ob-root .ob-mappopup__body {
    padding: 12px;
}
.ob-root .ob-mappopup__title {
    margin: 0 0 4px;
    font-family: var(--ob-font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ob-color-primary);
}
.ob-root .ob-mappopup__price {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--ob-color-text);
}
.ob-root .ob-mappopup__link {
    display: inline-block;
    /* 44px Touch-Target ueber Padding, ohne die Bubble aufzublasen.
       12px oben/unten + 20px Zeilenhoehe = 44 (mit 11px waren es gemessen 42). */
    padding: 12px 0;
    color: var(--ob-color-primary);
    font-weight: 700;
    text-decoration: none;
}
.ob-root .ob-mappopup__link:hover {
    text-decoration: underline;
}

/* 32.5 „Anfahrt planen"-Link (Erlebnis-Detail, Anreise-Abschnitt bzw.
   Treffpunkt-Box). Der Button-Look kommt aus §… (.ob-btn--inverted --compact),
   hier nur die Zeile drumherum und das Pin-Icon. */
.ob-root .ob-detail__directions {
    margin: 15px 0 0;
}
.ob-root .ob-detail__directions .ob-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.ob-root .ob-detail__directions-icon {
    flex: 0 0 auto;
}

/* ============================================================================
   33. INFRASTRUKTUR-LISTE — Feinschliff aus dem Abgleich vom 29.07.2026
       (Stefan). Dieselbe Formsprache wie Event- (§30) und Erlebnis-Liste
       (§31); die Filterleiste erbt ihre Regeln aus §11/§31.2, weil sie
       jetzt dieselbe `.ob-filterline` ist.
   ========================================================================== */

/* 33.1 Abstand Seiten-H1 -> Plugin, identisch zu §30.1/§31.1: der vh-Anteil
   (`#main > .frame { padding-top: 10vh }` der Wirtsseite) faellt ueber
   `space_before = nospace` am Inhaltselement weg, den Rest setzt das Plugin
   fix. ob-root UND infra-list sitzen auf demselben Element (LL-092). */
.ob-root.infra-list {
    padding-top: 40px;
}
@media (max-width: 767px) {
    .ob-root.infra-list {
        padding-top: 55px;
    }
}

/* 33.2 Oeffnungsstatus-Badge auf der Listen-Card. Das Badge selbst ist
   `.ob-status-badge` aus §26 (Infrastruktur-Detail) — wiederverwendet, damit
   Liste und Detailseite denselben Status gleich zeigen. Hier kommt nur die
   Einordnung in den Card-Textfluss dazu.
   Bewusst KEIN `margin-top: auto`: `.ob-card__content` ist kein Flex-Container
   (§7), die Regel waere wirkungslos — und ihn dafuer auf Flex umzustellen wuerde
   ALLE sechs Card-Varianten betreffen. */
.ob-root .ob-card__status {
    margin: 10px 0 0;
}

/* 33.3 Warenkorb: Anzahl vor dem Positionstitel („2×"). Der Titel ist hier
   700/19px — die Zahl bleibt in derselben Zeile, aber im Textton statt in der
   Headline-Farbe, damit sie den Namen nicht ueberstimmt. */
.ob-root.ob-cart .ott-cart__item-units {
    color: var(--ob-color-text);
    font-weight: 400;
}

/* 33.4 Warenkorb: Vorschaubild der Position. Der Bestand fuehrt Bilder in
   Karten ohne Rundung und ohne Rahmen — hier dieselbe Sprache: flache Flaeche,
   Radius aus dem Token-System. Groesse bleibt wie im Extension-Default (80px),
   damit die Positionszeilen auf einer Kante stehen. */
.ob-root.ob-cart .ott-cart__item-media {
    border-radius: var(--ob-radius-card);
    background: var(--ob-color-bg-alt);
}

/* ============================================================================
   34. ABNAHME 03.08.2026 (Stefan, Testdokument „Osttirol Buchungsstrecke")
       Sammelabschnitt fuer die Punkte, die keinem der Modul-Abschnitte oben
       eindeutig gehoeren.
   ========================================================================== */

/* 34.1 Auswahlfelder (Radio/Checkbox) im Plugin-Scope gegen das
   Formularfeld-Styling der Wirtsseite verteidigen.

   Befund (gemessen, Unterkunfts-Detail): die Wirtsseite setzt
   `input, select, .selectric, textarea { border-bottom: 2px solid #adadad }`
   und `input, select, .selectric { padding: 15px 0 }` auf JEDEN Input - also
   auch auf Radios und Checkboxen. Ein Radio wurde damit 27x54px gross und
   rutschte durch das vertikale Padding aus seiner Textzeile: genau Stefans
   Punkt „bei der Zimmer-Auswahl ist die Auswahl fuer Fruehstueck, Halbpension
   und ohne Verpflegung schief".

   `accent-color` haelt den ausgewaehlten Zustand im Markenrot, ohne die
   nativen Elemente nachzubauen (die bleiben bedienbar und barrierefrei). */
.ob-root input[type='radio'],
.ob-root input[type='checkbox'] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    border: 0;
    flex: 0 0 auto;
    vertical-align: middle;
    accent-color: var(--ob-color-primary);
}

/* 34.2 KI-Vorschlagspanel: Platz fuer den Signatur-Versatz der Cards.

   Befund (Stefans Punkte 1 und 2): „bei dem KI-Vorschlag haben die Unterkuenfte
   nicht genug Abstand zum Text" und „die Meldung ‚Bitte zuerst beschreiben
   wonach du suchst' wird von den Unterkuenften ueberdeckt". Ursache ist der
   gewollte Card-Look: `.ob-card__media` sitzt ab 1024px mit `top: -20px` ueber
   dem Textfluss (Signatur-Overlap, §7). Im Panel folgte das Karten-Grid direkt
   auf den Hinweistext - die 16px Abstand des Absatzes wurden vom -20px-Versatz
   aufgefressen, das Bild lag also IM Text.

   Deshalb: Grid oben um den Versatz entlasten, und Hinweis/Fehler/Leer-Text auf
   eine eigene Ebene heben, damit sie in jedem Fall oben liegen. */
.ob-root .osttirol-ai-recommend .ob-grid {
    padding-top: 25px;
}
.ob-root .osttirol-ai-recommend__note,
.ob-root .osttirol-ai-recommend .osttirol-error,
.ob-root .osttirol-ai-recommend .osttirol-empty,
.ob-root .osttirol-ai-recommend .osttirol-loading {
    position: relative;
    z-index: 5;
}

/* 34.3 Ausstattungs-Icons der Card: Listen-Marker der Wirtsseite abschalten.

   Befund (Stefans Punkt „auf der Uebersichtsseite stimmt was bei den Icons
   nicht, es zeigt kleine rote Kreise an"): die Wirtsseite setzt auf ul
   `list-style-type: circle` und `padding-left: 20px`. Unsere Icon-Liste
   (`ob-card__features`) ist ein Flex-Container - der Marker der ersten Zeile
   blieb als kleiner Kreis im Markenrot vor den Icons stehen. Gemessen auf der
   Unterkunfts-Liste an allen zwoelf Cards; andere Listen im Plugin bringen ihr
   `list-style: none` selbst mit. */
.ob-root .ob-card__features {
    list-style: none;
    padding-left: 0;
}

/* 34.4 Merken-Herz in der Detail-Nav: raus aus dem scrollenden Container.

   Befund (Stefans Punkt „bei der Detailseite der Unterkuenfte ueberschneidet
   sich das Menue oben mit dem Herz", mobil): `.ob-accd-nav__inner` ist die
   horizontal scrollbare Linkzeile (`overflow-x: auto`) UND war zugleich der
   Positionierungskontext des Herzens (`position: relative`). Ein
   `position: absolute; right: 0` bezieht sich damit auf den SCROLL-Inhalt -
   sobald die Linkzeile auf schmalen Schirmen scrollt, wandert das Herz in die
   Links hinein.

   Loesung ohne Template-Aenderung: den Kontext eine Ebene hoeher legen. Die Nav
   selbst ist `position: sticky` und damit ein Positionierungskontext, der
   NICHT mitscrollt. `padding-right` an der Linkzeile bleibt, damit der letzte
   Link nicht unter dem Herz endet; der weisse Grund deckt durchscrollende
   Links ab. */
.ob-root .ob-accd-nav__inner {
    position: static;
}
.ob-root .ob-accd-nav__wish {
    background: var(--ob-color-bg);
    z-index: 1;
}

/* 34.5 Events-Suchleiste: auf Mobil nicht mitscrollen.

   Befund (Stefans Punkt „beim Herunterscrollen bleibt der Filter und der Button
   ‚Nur Top-Events' oben kleben und geht beim Scrollen mit"): die Leiste ist
   `position: sticky; top: 0`. Auf dem Handy schiebt sich die 142px hohe Leiste
   damit ueber die Trefferliste und kollidiert mit dem eigenen Sticky-Header der
   Wirtsseite. Auf dem Desktop bleibt das Kleben erhalten (dort ist es hilfreich
   und wurde nicht beanstandet). */
@media (max-width: 767px) {
    .ob-root .ob-searchbar--events {
        position: static;
    }
}

/* 34.6 Pauschalen-Detail, Zeile „x Naechte" auf Mobil.

   Befund (Stefans Punkt „hier ist bei der Detailseite der Pauschale die
   ‚6 Naechte' komisch platziert"): die Zeile steht direkt unter dem
   Anreise-/Abreise-Paar ohne eigenen Abstand und liest sich dadurch als
   angehaengtes Fragment des Datumsfelds. Auf Mobil bekommt sie deshalb Luft
   und wird als eigene Angabe erkennbar. */
@media (max-width: 767px) {
    .ob-root .ob-pkg__dates-line--duration {
        margin-top: 8px;
        font-weight: 700;
    }
}

/* 34.7 Suchleisten-Overlays als Panel von unten (Abnahme-Punkte 65/67).

   Das Sheet-Layout selbst steht in booking.css (Position, Scrollflaeche,
   Kopfzeile). Hier stehen nur die Stellen, an denen der Live-Look sonst
   dagegen gewinnt: die gemeinsame Regel `.ob-root .osttirol-cal-overlay,
   .ob-root .osttirol-room-config__panel` (Spezifitaet 0,3,0) setzt
   `border: 1px solid` und einen Radius auf allen vier Ecken - ein Panel am
   unteren Rand braucht runde Ecken nur oben und keinen Rahmen unten.
   Dazu die Kopfzeile in den Live-Tokens. */
@media (max-width: 767px) {
    .ob-root .osttirol-cal-overlay,
    .ob-root .osttirol-room-config__panel {
        border-bottom: 0;
        border-radius: var(--ob-radius-card) var(--ob-radius-card) 0 0;
    }
    .ob-root .ob-sheet__head {
        background: var(--ob-color-bg);
        border-bottom: 1px solid var(--ob-color-border);
    }
    .ob-root .ob-sheet__title {
        color: var(--ob-color-heading);
        font-family: var(--ob-font-display);
        font-weight: 500;
        font-size: var(--ob-fs-h3);
    }
    .ob-root .ob-sheet__close {
        color: var(--ob-color-text);
    }
    .ob-root .ob-sheet__close:hover {
        color: var(--ob-color-primary);
    }
    .ob-root .osttirol-sheet-scrim {
        background: var(--ob-color-scrim);
    }
}