/**
 * Osttirol Tourismuspauschalen — eigenständiges Frontend-Stylesheet.
 *
 * Tokens: --pk-* (analog --ev-* in events.css, konsistente Brand-Farben).
 * Die `--pk-*`-Token-DEFINITIONEN zeigen seit T7 per Re-Pointing auf die
 * kanonischen `--c-*`/… aus `tokens.css` (global via <f:asset.css> VOR diesem
 * Stylesheet geladen). `--pk-blue*` ist jetzt Marken-Rot (vormals #005995).
 * Mobile-first, WCAG-AA-Kontrast, reduced-motion-safe.
 */

:root {
    /* T7: Re-Pointing auf kanonische tokens.css. Tourismuspauschalen tragen jetzt
       Osttirol-Markenrot statt web-crossing-Blau (Marken-Einheit ueber alle Module).
       Die --pk-blue-* Namen bleiben als Aliasse erhalten (Consumer-Referenzen). */

    /* --- Brand: Osttirol-Rot (kanonisch; vormals Blau #005995) --- */
    --pk-blue: var(--c-primary);
    --pk-blue-hover: var(--c-primary-hover);
    --pk-blue-soft: var(--c-primary-soft);
    --pk-blue-ring: var(--c-primary-ring);

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

    /* --- Focus --- */
    --pk-focus: var(--c-focus);

    /* --- Typografie (Brand-Font Outfit aus tokens.css) --- */
    --pk-font: var(--font-body);
    --pk-fs-xs: 12px;
    --pk-fs-sm: 13px;
    --pk-fs-base: 15px;
    --pk-fs-md: 17px;
    --pk-fs-lg: 20px;
    --pk-fs-xl: 26px;
    --pk-lh-tight: 1.2;
    --pk-lh-base: 1.55;

    /* --- Spacing (4px-Raster, kanonisch) --- */
    --pk-s1: var(--space-1);  --pk-s2: var(--space-2);  --pk-s3: var(--space-3);  --pk-s4: var(--space-4);
    --pk-s5: var(--space-5); --pk-s6: var(--space-6); --pk-s8: var(--space-8);  --pk-s10: var(--space-10);
    --pk-s12: var(--space-12); --pk-s16: var(--space-16);

    /* --- Radius (kanonisch) --- */
    --pk-radius-sm: var(--radius-sm);
    --pk-radius-md: var(--radius-md);
    --pk-radius-lg: var(--radius-lg);
    --pk-radius-pill: var(--radius-pill);

    /* --- Shadows (kanonisch) --- */
    --pk-shadow-card: var(--shadow-card);
    --pk-shadow-hover: var(--shadow-hover);

    /* --- Z-Index (kanonisch) --- */
    --pk-z-base: var(--z-base);
    --pk-z-dropdown: var(--z-dropdown);
    --pk-z-sticky: var(--z-sticky);
    --pk-z-overlay: var(--z-overlay);
    --pk-z-modal: var(--z-modal);
}

/* =========================================================================
   Scroll-Lock (Overlay open)
   ========================================================================= */

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

/* =========================================================================
   Hilfsmittel
   ========================================================================= */

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

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

/* =========================================================================
   Listen-Seite
   ========================================================================= */

.pk-list {
    font-family: var(--pk-font);
    color: var(--pk-text);
    padding: var(--pk-s6) 0;
}

.pk-header {
    margin-bottom: var(--pk-s6);
}

.pk-header__title {
    font-size: var(--pk-fs-xl);
    line-height: var(--pk-lh-tight);
    font-weight: 700;
    margin: 0 0 var(--pk-s2);
}

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

.pk-source {
    /* Quelle-Badge ist eine Entwickler-Information, für Gäste ausgeblendet. */
    display: none;
}
.pk-source[data-source="db"],
.pk-source[data-source="live"] {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
    color: var(--pk-blue);
}

/* ---- Toolbar ---- */
.pk-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s3);
    margin-bottom: var(--pk-s6);
    align-items: center;
}

.pk-search {
    flex: 1 1 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.pk-search__icon {
    position: absolute;
    left: var(--pk-s3);
    pointer-events: none;
    font-size: 16px;
    color: var(--pk-text-subtle);
}

.pk-input {
    width: 100%;
    padding: var(--pk-s3) var(--pk-s3) var(--pk-s3) calc(var(--pk-s3) * 2 + 16px);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-base);
    font-family: var(--pk-font);
    background: var(--pk-bg);
    color: var(--pk-text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pk-input:focus {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 3px var(--pk-blue-ring);
}

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

.pk-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s2);
    min-height: 44px;
    padding: 0 var(--pk-s4);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-md);
    background: var(--pk-bg);
    color: var(--pk-text);
    font-size: var(--pk-fs-base);
    font-family: var(--pk-font);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pk-filter-trigger:hover { background: var(--pk-bg-alt); }
.pk-filter-trigger--active {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
    color: var(--pk-blue);
}
.pk-filter-trigger__badge {
    min-width: 20px; min-height: 20px;
    border-radius: var(--pk-radius-pill);
    background: var(--pk-blue);
    color: #fff;
    font-size: var(--pk-fs-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.pk-field--sort { display: flex; align-items: center; gap: var(--pk-s2); }

.pk-select {
    min-height: 44px;
    padding: 0 var(--pk-s4);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-base);
    font-family: var(--pk-font);
    background: var(--pk-bg);
    color: var(--pk-text);
    cursor: pointer;
}
.pk-select:focus {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

/* ---- Overlay (Off-canvas Filter) ---- */
.pk-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--pk-z-overlay);
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    .pk-overlay { align-items: stretch; justify-content: flex-end; }
}

.pk-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.pk-overlay__panel {
    position: relative;
    z-index: 1;
    background: var(--pk-bg);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);
}
@media (min-width: 768px) {
    .pk-overlay__panel {
        width: 380px;
        max-height: 100%;
        border-radius: var(--pk-radius-lg) 0 0 var(--pk-radius-lg);
    }
}

.pk-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pk-s4) var(--pk-s6);
    border-bottom: 1px solid var(--pk-border);
    position: sticky;
    top: 0;
    background: var(--pk-bg);
    z-index: 1;
}

.pk-overlay__title {
    font-size: var(--pk-fs-md);
    font-weight: 700;
    margin: 0;
}

.pk-overlay__close {
    width: 44px; height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 24px;
    border-radius: var(--pk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pk-text-muted);
    transition: background 0.15s;
}
.pk-overlay__close:hover { background: var(--pk-bg-alt); }
.pk-overlay__close:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-overlay__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--pk-s4) var(--pk-s6);
    display: flex;
    flex-direction: column;
    gap: var(--pk-s6);
}

.pk-overlay__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--pk-s3);
    padding: var(--pk-s4) var(--pk-s6);
    border-top: 1px solid var(--pk-border);
    position: sticky;
    bottom: 0;
    background: var(--pk-bg);
}

/* ---- Active Pills ---- */
.pk-active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
}

.pk-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s1);
    padding: var(--pk-s1) var(--pk-s3);
    border-radius: var(--pk-radius-pill);
    font-size: var(--pk-fs-sm);
    font-family: var(--pk-font);
    background: var(--pk-blue-soft);
    color: var(--pk-blue);
    border: 1px solid var(--pk-blue);
    cursor: default;
    min-height: 32px;
}
.pk-pill--removable {
    cursor: pointer;
    transition: background 0.15s;
}
.pk-pill--removable:hover { background: var(--pk-blue-soft); }
.pk-pill__x { font-size: 14.4px; opacity: 0.7; }

/* ---- Filter-Gruppen ---- */
.pk-fgroup {
    border: none;
    margin: 0;
    padding: 0;
}

.pk-fgroup__legend {
    font-size: var(--pk-fs-base);
    font-weight: 600;
    margin-bottom: var(--pk-s3);
    display: flex;
    align-items: center;
    gap: var(--pk-s2);
}

.pk-fgroup__hint {
    font-weight: 400;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

.pk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
}

.pk-chip {
    min-height: 44px;
    padding: var(--pk-s2) var(--pk-s4);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-pill);
    background: var(--pk-bg);
    color: var(--pk-text);
    font-size: var(--pk-fs-sm);
    font-family: var(--pk-font);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pk-chip:hover { background: var(--pk-bg-alt); }
.pk-chip--active {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
    color: var(--pk-blue);
    font-weight: 600;
}
.pk-chip:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

/* ---- Preis-Range ---- */
.pk-range-wrap {
    position: relative;
    padding: var(--pk-s4) 0 var(--pk-s2);
}

.pk-range-track {
    position: relative;
    height: 4px;
    background: var(--pk-border);
    border-radius: 2px;
    margin-bottom: var(--pk-s3);
}

.pk-range-fill {
    position: absolute;
    top: 0;
    height: 4px;
    background: var(--pk-blue);
    border-radius: 2px;
}

.pk-range {
    position: absolute;
    width: 100%;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 4px;
    top: var(--pk-s4);
}
.pk-range::-webkit-slider-thumb {
    pointer-events: all;
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pk-blue);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}
.pk-range::-moz-range-thumb {
    pointer-events: all;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pk-blue);
    border: 2px solid #fff;
    cursor: pointer;
}
.pk-range:focus-visible {
    outline: none;
}
.pk-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--pk-blue-ring);
}

/* ---- Buttons ---- */
.pk-button {
    min-height: 44px;
    padding: 0 var(--pk-s6);
    background: var(--pk-blue);
    color: #fff;
    border: none;
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-base);
    font-family: var(--pk-font);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
}
.pk-button:hover { background: var(--pk-blue-hover); }
.pk-button:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-button--ghost {
    background: transparent;
    color: var(--pk-text-muted);
    border: 1px solid var(--pk-border-strong);
}
.pk-button--ghost:hover { background: var(--pk-bg-alt); }

/* ---- Grid + Cards ---- */
.pk-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--pk-s6);
}

.pk-card {
    border-radius: var(--pk-radius-lg);
    background: var(--pk-bg);
    box-shadow: var(--pk-shadow-card);
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s;
}
.pk-card:hover {
    box-shadow: var(--pk-shadow-hover);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .pk-card { transition: none; transform: none; }
}

.pk-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.pk-card__media {
    aspect-ratio: 400 / 260;
    background: var(--pk-bg-sunken);
    overflow: hidden;
}
.pk-card__media--empty { background: var(--pk-bg-alt); }

.pk-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.pk-card:hover .pk-card__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .pk-card:hover .pk-card__img { transform: none; }
}

.pk-card__body {
    padding: var(--pk-s4);
}

.pk-card__title {
    font-size: var(--pk-fs-md);
    font-weight: 700;
    line-height: var(--pk-lh-tight);
    margin: 0 0 var(--pk-s2);
    color: var(--pk-text);
}

.pk-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s1);
    margin: 0 0 var(--pk-s2);
}

.pk-card__summary {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0 0 var(--pk-s2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pk-card__price {
    font-size: var(--pk-fs-base);
    font-weight: 700;
    color: var(--pk-blue);
    margin: 0;
}

.pk-card__validity {
    font-size: var(--pk-fs-xs);
    color: var(--pk-text-muted);
    margin-top: 2px;
    margin-bottom: 0;
}

/* ---- Tags ---- */
.pk-tag {
    display: inline-block;
    font-size: var(--pk-fs-xs);
    padding: 2px var(--pk-s2);
    border-radius: var(--pk-radius-pill);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-border);
    color: var(--pk-text-muted);
    white-space: nowrap;
}
.pk-tag--category {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
    color: var(--pk-blue);
}
.pk-tag--theme { border-color: var(--pk-border-strong); }

/* ---- Loading / Empty / Error / Sentinel ---- */
.pk-loading-inline {
    display: flex;
    align-items: center;
    gap: var(--pk-s3);
    padding: var(--pk-s6) 0;
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-base);
}

.pk-spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--pk-border);
    border-top-color: var(--pk-blue);
    border-radius: 50%;
    display: inline-block;
    animation: pk-spin 0.7s linear infinite;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pk-spinner { animation: none; border-top-color: var(--pk-blue); }
}

.pk-error {
    padding: var(--pk-s4) var(--pk-s6);
    border-left: 4px solid var(--c-error);
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border-radius: 0 var(--pk-radius-md) var(--pk-radius-md) 0;
    font-size: var(--pk-fs-base);
    margin: var(--pk-s4) 0;
}

.pk-empty {
    text-align: center;
    padding: var(--pk-s12) var(--pk-s6);
    color: var(--pk-text-muted);
}
.pk-empty__title {
    font-size: var(--pk-fs-lg);
    font-weight: 700;
    color: var(--pk-text);
    margin: 0 0 var(--pk-s3);
}

.pk-sentinel { height: 1px; }

.pk-status {
    text-align: center;
    padding: var(--pk-s8) 0 var(--pk-s4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pk-s4);
}

.pk-loadmore {
    min-height: 44px;
    padding: 0 var(--pk-s6);
    background: var(--pk-bg-alt);
    color: var(--pk-text);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-base);
    font-family: var(--pk-font);
    cursor: pointer;
    transition: background 0.15s;
}
.pk-loadmore:hover { background: var(--pk-bg-sunken); }

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

/* =========================================================================
   Detail-Seite
   ========================================================================= */

.pk-detail {
    font-family: var(--pk-font);
    color: var(--pk-text);
}

.pk-detail__header {
    margin-bottom: var(--pk-s8);
}

.pk-detail__breadcrumb {
    margin: 0 0 var(--pk-s4);
}

.pk-detail__back {
    font-size: var(--pk-fs-sm);
    color: var(--pk-blue);
    text-decoration: none;
}
.pk-detail__back:hover { text-decoration: underline; }

.pk-detail__titlebar {
    display: flex;
    align-items: flex-start;
    gap: var(--pk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--pk-s3);
}

.pk-detail__title {
    font-size: var(--pk-fs-xl);
    font-weight: 700;
    line-height: var(--pk-lh-tight);
    margin: 0;
    flex: 1;
}

.pk-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pk-s2);
    margin: 0 0 var(--pk-s3);
}

.pk-detail__themes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
    margin: 0;
}

/* ---- Auf-einen-Blick-Faktenleiste unter dem Hero ---- */
.pk-glance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pk-s3, 12px);
    margin: var(--pk-s4, 16px) 0;
    padding: var(--pk-s3, 12px) var(--pk-s4, 16px);
    background: var(--color-surface-muted, #f5f5f4);
    border-radius: var(--pk-radius-md, 8px);
}
.pk-glance__item { display: flex; flex-direction: column; gap: 2.4px; }
.pk-glance__item--wide { grid-column: 1 / -1; }
.pk-glance__label {
    font-size: 12.48px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pk-text-muted, #6b7280);
    margin: 0;
}
.pk-glance__value { font-weight: 600; margin: 0; overflow-wrap: break-word; }

/* ---- Galerie ---- */
.pk-detail__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--pk-s3);
    margin-bottom: var(--pk-s8);
}
.pk-detail__gallery--single {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.pk-detail__thumb {
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--pk-radius-md);
    overflow: hidden;
    aspect-ratio: 800 / 520;
    background: var(--pk-bg-sunken);
    display: block;
}
.pk-detail__thumb:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-detail__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s;
}
.pk-detail__thumb:hover .pk-detail__thumb-img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .pk-detail__thumb:hover .pk-detail__thumb-img { transform: none; }
}

.pk-detail__lead {
    font-size: var(--pk-fs-md);
    line-height: var(--pk-lh-base);
    color: var(--pk-text-muted);
    margin: 0 0 var(--pk-s6);
}

.pk-detail__prose {
    font-size: var(--pk-fs-base);
    line-height: var(--pk-lh-base);
    margin-bottom: var(--pk-s6);
}
.pk-detail__prose p { margin: 0 0 var(--pk-s4); }

.pk-detail__section-title {
    font-size: var(--pk-fs-md);
    font-weight: 700;
    margin: 0 0 var(--pk-s4);
}

.pk-detail__includes {
    margin-bottom: var(--pk-s6);
}
.pk-detail__includes ul {
    margin: 0;
    padding-left: var(--pk-s6);
}
.pk-detail__includes li {
    margin-bottom: var(--pk-s2);
}

.pk-detail__price {
    font-size: var(--pk-fs-lg);
    font-weight: 700;
    color: var(--pk-blue);
    margin: 0;
}

.pk-cta-book {
    min-height: 52px;
    padding: 0 var(--pk-s6);
    background: var(--pk-blue);
    color: #fff;
    border: none;
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-md);
    font-family: var(--pk-font);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pk-cta-book:hover { background: var(--pk-blue-hover); }
.pk-cta-book:disabled {
    opacity: 0.65;
    cursor: wait;
}
.pk-cta-book:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

/* "Jetzt anfragen" steht neben dem Buchen-CTA (Kundenpunkt 07.08.2026) und ist
   bewusst die leisere der beiden Handlungen: gleiche Groesse und Hoehe, aber
   Umriss statt Flaeche. Buchen bleibt der Hauptweg. */
.pk-cta-enquire {
    min-height: 52px;
    padding: 0 var(--pk-s6);
    background: transparent;
    color: var(--pk-blue);
    border: 2px solid var(--pk-blue);
    border-radius: var(--pk-radius-md);
    font-size: var(--pk-fs-md);
    font-family: var(--pk-font);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pk-cta-enquire:hover {
    background: var(--pk-blue);
    color: #fff;
}
.pk-cta-enquire:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

/* Betriebsauswahl im Anfrage-Overlay: nur sichtbar, wenn die Anfrage ueber den
   Kopf-Knopf gestartet wurde und der Betrieb noch offen ist. Radios statt
   <select>, weil Selectric auf der Wirtsseite jedes <select> ersetzt (siehe
   Kommentar im Partial). Bei bis zu 15 Betrieben scrollt die Liste in sich,
   damit das Overlay nicht auseinanderlaeuft. */
.pk-enquiry__business-choice {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 210px;
    overflow-y: auto;
    padding: var(--pk-s1) 0;
}
.pk-enquiry__business-option {
    display: flex;
    align-items: center;
    gap: var(--pk-s2);
    /* 44 px Mindesthoehe: die Zeile ist das Touch-Ziel, nicht nur der Radio. */
    min-height: 44px;
    padding: 0 var(--pk-s2);
    cursor: pointer;
    font-size: var(--pk-fs-base);
    color: var(--pk-text);
}
.pk-enquiry__business-option:hover {
    background: var(--pk-bg-sunken);
}
.pk-enquiry__business-option input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--pk-blue);
    cursor: pointer;
}

.pk-cta-message {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0;
}

.pk-detail__card {
    background: var(--pk-bg);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-lg);
    padding: var(--pk-s5);
}

.pk-detail__card-title {
    font-size: var(--pk-fs-base);
    font-weight: 700;
    margin: 0 0 var(--pk-s3);
}

.pk-detail__role-name {
    font-weight: 600;
    margin: 0 0 var(--pk-s2);
}
.pk-detail__role-addr {
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-sm);
    margin: 0 0 var(--pk-s2);
}

.pk-detail__link {
    color: var(--pk-blue);
    text-decoration: none;
    word-break: break-word;
}
.pk-detail__link:hover { text-decoration: underline; }

/* ---- Karte ---- */
.pk-detail__map {
    width: 100%;
    height: 220px;
    border-radius: var(--pk-radius-md);
    overflow: hidden;
    background: var(--pk-bg-sunken);
}
.pk-map-pin {
    width: 20px; height: 20px;
    background: var(--pk-blue);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    display: block;
}
.pk-detail__map-error {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-subtle);
    margin: var(--pk-s2) 0 0;
}

/* ---- Hero-Bild (Pauschalen-Detail, oberhalb des Titels) ---- */
.pk-detail__hero {
    margin: 0 0 var(--pk-s6);
    padding: 0;
    border-radius: var(--pk-radius-lg);
    overflow: hidden;
    background: var(--pk-bg-sunken);
    /* Verhindert Layout-Shift: Platzhalter-Höhe über aspect-ratio. */
    aspect-ratio: 16 / 9;
    max-height: 480px;
    line-height: 0; /* figure-gap entfernen */
}

.pk-detail__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Kein transform-transition auf Hero — CLS-Risiko, kein hover nötig. */
}

@media (max-width: 480px) {
    .pk-detail__hero {
        border-radius: var(--pk-radius-md);
        /* Auf Mobile etwas weniger Höhe durch aspect-ratio automatisch. */
        max-height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-detail__hero-img {
        transition: none;
    }
}

/* ---- Header-CTA (Preis + Buchungs-Buttons im Hero) ---- */
.pk-detail__header-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pk-s3);
    margin-top: var(--pk-s5);
}

/* ---- Volltext-Body ---- */
.pk-detail__body {
    margin-bottom: var(--pk-s8);
}

/* ---- Gültigkeitszeiträume ---- */
.pk-detail__validity {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
    margin-bottom: var(--pk-s6);
}

/* .pk-detail__validity--ssr: no extra rules — identisch zur Alpine-Variante,
   kein display:none; bleibt sichtbar bis Alpine x-cloak greift. */
.pk-detail__validity-fallback {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0 0 var(--pk-s6);
}

/* Chip-Variante für Gültigkeitszeiträume */
.pk-chip--validity {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s1);
    padding: var(--pk-s1) var(--pk-s3);
    border-radius: var(--pk-radius-pill);
    font-size: var(--pk-fs-sm);
    font-family: var(--pk-font);
    background: var(--pk-blue-soft);
    color: var(--pk-blue);
    border: 1px solid var(--pk-blue);
    cursor: default;
    min-height: 32px;
    white-space: nowrap;
}

/* ---- Leistungen + Preise (2-col ab 768 px) ---- */
.pk-detail__services-prices {
    display: grid;
    gap: var(--pk-s6);
    margin-bottom: var(--pk-s8);
}

@media (min-width: 768px) {
    .pk-detail__services-prices {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* .pk-detail__prices--ssr: no extra rules — sichtbar bis Alpine geladen. */
.pk-detail__prices {
    /* kein eigenes Layout nötig — erbt vom Grid-Parent */
}

.pk-detail__price-label {
    font-size: var(--pk-fs-base);
    font-weight: 700;
    color: var(--pk-blue);
    margin: 0;
}

.pk-detail__price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-detail__price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pk-s3);
    padding: var(--pk-s2) 0;
    border-bottom: 1px solid var(--pk-border);
}
.pk-detail__price-row:last-child {
    border-bottom: none;
}

.pk-detail__price-cat {
    font-size: var(--pk-fs-base);
    color: var(--pk-text);
}

.pk-detail__price-val {
    font-size: var(--pk-fs-base);
    font-weight: 700;
    color: var(--pk-blue);
    white-space: nowrap;
}

/* ---- Anbieter + Karte (Footer-Bereich) ---- */
.pk-detail__footer-info {
    display: grid;
    gap: var(--pk-s4);
    margin-top: var(--pk-s8);
}

@media (min-width: 768px) {
    .pk-detail__footer-info {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* =========================================================================
   Gemeinsamer Reisezeitraum & Belegung Search-Block
   (oberhalb der Betriebsliste, treibt die Zimmer-Suche im offenen Panel)
   ========================================================================= */

.pk-search-block {
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    padding: var(--pk-s5);
    margin-bottom: var(--pk-s5);
}

.pk-search-block__heading {
    font-size: var(--pk-fs-base);
    font-weight: 700;
    color: var(--pk-text);
    margin: 0 0 var(--pk-s1);
}

.pk-search-block__hint {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0 0 var(--pk-s4);
}

.pk-search-block__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s5);
}

.pk-search-block__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pk-s3);
}

/* ---- Zusammenfassung des Zeitraums im aufgeklappten Panel ---- */
.pk-bk__search-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pk-s3);
    padding: var(--pk-s2) var(--pk-s3);
    background: var(--pk-blue-soft);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-sm);
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

.pk-bk__search-summary-dates {
    font-weight: 600;
    color: var(--pk-text);
}

.pk-bk__search-summary-occ {
    color: var(--pk-text-muted);
}

/* ---- Teilnehmende Betriebe (Inline-Hotel-Liste, WP6) ---- */

.pk-detail__hotels {
    margin-bottom: var(--pk-s8);
}

.pk-hotels-empty {
    padding: var(--pk-s6) 0;
}

.pk-hotels-empty__text {
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-base);
    margin: 0;
}

.pk-hotels-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-hotel-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--pk-s4);
    align-items: center;
    width: 100%;
    padding: var(--pk-s4);
    border: 2px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: var(--pk-bg);
    text-align: left;
    cursor: pointer;
    font-family: var(--pk-font);
    color: var(--pk-text);
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.pk-hotel-card:hover {
    border-color: var(--pk-blue);
    box-shadow: var(--pk-shadow-card);
    transform: translateY(-1px);
}

.pk-hotel-card:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-hotel-card--selected {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 2px var(--pk-blue);
    background: var(--pk-blue-soft);
}

@media (prefers-reduced-motion: reduce) {
    .pk-hotel-card {
        transition: none;
        transform: none;
    }
    .pk-hotel-card:hover {
        transform: none;
    }
}

/* Kein Bild: nur 1fr-Spalte + Check */
.pk-hotel-card__media {
    width: 120px;
    height: 90px;
    flex: 0 0 120px;
    border-radius: var(--pk-radius-sm);
    overflow: hidden;
    background: var(--pk-bg-sunken);
}

.pk-hotel-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pk-hotel-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s1);
    min-width: 0;
}

.pk-hotel-card__name {
    font-weight: 700;
    font-size: var(--pk-fs-base);
    line-height: var(--pk-lh-tight);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-hotel-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
    align-items: center;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0;
}

.pk-hotel-card__stars {
    color: #c08a1e;
    letter-spacing: 1px;
}

.pk-hotel-card__rating {
    /* TrustYou — muted */
}

.pk-hotel-card__price {
    font-size: var(--pk-fs-sm);
    font-weight: 700;
    color: var(--pk-blue);
    margin: 0;
}
/* Preis-Kontext (Aufenthalt/Belegung) — klärt, dass der ab-Preis der
   Gesamtpreis für Nächte+Belegung ist, nicht pro Person/Nacht. */
.pk-hotel-card__price-ctx {
    display: block;
    font-size: 12.48px;
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
}

/* Verfügbarkeits-Zusammenfassung + Toggle über der Betriebsliste */
.pk-avail-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0;
}
.pk-avail-summary__text { font-weight: 600; margin: 0; }
.pk-avail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    min-height: 44px;
    cursor: pointer;
}
.pk-avail-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Verfügbarkeits-Badge in der Card */
.pk-hotel-card__avail {
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    font-size: 13.6px;
    font-weight: 600;
    margin: 3.2px 0 0;
}
.pk-hotel-card__avail-dot {
    width: 9.6px; height: 9.6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.pk-hotel-card__avail--available   { color: var(--color-success-text, #1a7f37); }
.pk-hotel-card__avail--unavailable { color: var(--color-text-muted, #6b7280); }
.pk-hotel-card__avail--unknown     { color: var(--color-text-muted, #6b7280); }
.pk-hotel-card__avail--checking    { color: var(--color-text-muted, #6b7280); }
.pk-hotel-card__avail--checking .pk-hotel-card__avail-dot { animation: pk-avail-pulse 1s ease-in-out infinite; }
@keyframes pk-avail-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Ausgegrauter Betrieb (im Zeitraum nicht verfügbar): ganze Card gedimmt,
   ABER das Verfügbarkeits-Badge bleibt voll lesbar (Kontrast WCAG AA für
   „im Zeitraum belegt"). Catch-all auf Card-Ebene → künftige Body-Elemente
   werden automatisch mitgedimmt; Badge wird explizit ausgenommen. */
.pk-business--unavailable .pk-hotel-card { opacity: 0.62; }
.pk-business--unavailable .pk-hotel-card__avail { opacity: 1; }
.pk-business--unavailable .pk-hotel-card__price { text-decoration: line-through; color: var(--color-text-muted, #6b7280); }

.pk-hotel-card__check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pk-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 28px;
    align-self: center;
}

/* Responsive: kein Bild auf sehr kleinen Screens */
@media (max-width: 480px) {
    .pk-hotel-card {
        grid-template-columns: 1fr auto;
    }
    .pk-hotel-card__media {
        display: none;
    }
}

/* =========================================================================
   Inline-Buchung (Phase 4.1) — Panel UNTER der aufgeklappten Betriebs-Card.
   Ersetzt den frei schwebenden .pkw-Drawer. Genau ein Betrieb offen.
   ========================================================================= */

/* Aufgeklappter Listeneintrag: volle Breite, Akzent-Rahmen. */
.pk-business {
    display: block;
}

.pk-business--expanded {
    border: 2px solid var(--pk-blue);
    border-radius: var(--pk-radius-md);
    background: var(--pk-bg);
    box-shadow: var(--pk-shadow-card);
    /* KEIN overflow:hidden (Stefan 29.07.2026: „preisaufschluesselung wird im
       fenster ueberdeckt … das muss komplett lesbar sein").
       Das Preis-Popover (`.pk-bk__price-detail`) ist ein absolut positioniertes
       Kind tief in diesem Block. `overflow: hidden` hier hat es an der unteren
       Blockkante abgeschnitten — sichtbar war nur der obere Teil, „Zahlung &
       Garantie" fehlte. Dieselbe Ursache wie LL-029 (dort `.pk-bk__room`), eine
       Ebene hoeher. Die runden Ecken uebernimmt jetzt das oberste Kind selbst
       (Regel darunter). */
}

/* Card im aufgeklappten Zustand: Rahmen entfaellt (uebernimmt .pk-business).
   Die oberen Ecken rundet sie selbst — vorher erledigte das der
   `overflow: hidden` des Elternblocks, der aber das Preis-Popover mit
   abgeschnitten hat. `--pk-radius-md` minus 2px Elternrahmen. */
.pk-business--expanded .pk-hotel-card {
    border-color: transparent;
    box-shadow: none;
    background: var(--pk-blue-soft);
    border-radius: calc(var(--pk-radius-md) - 2px) calc(var(--pk-radius-md) - 2px) 0 0;
}

.pk-business--expanded .pk-hotel-card:hover {
    transform: none;
    box-shadow: none;
}

/* +/- Toggle-Indikator (ersetzt den Häkchen-Badge). */
.pk-hotel-card__toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 1px solid var(--pk-border-strong);
    background: var(--pk-bg);
    color: var(--pk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22.4px;
    line-height: 1;
    flex: 0 0 36px;
    align-self: center;
}

.pk-bk {
    padding: var(--pk-s5);
    border-top: 1px solid var(--pk-border);
    display: flex;
    flex-direction: column;
    gap: var(--pk-s5);
}

/* Bildreihe des Betriebs: bis zu 4 Bilder nebeneinander (Stefan 29.07.2026).
   Vorher war das EIN Bild ueber die volle Panelbreite mit `max-height: 220px`
   und `object-fit: cover` — bei ~1200px Panelbreite also ein Crop von etwa 5:1,
   der von jedem Motiv nur einen Streifen zeigte. Die Kacheln tragen jetzt ein
   festes 4:3, damit die Motive erkennbar bleiben.

   Die Spurenzahl ist FEST (4), nicht ausgerechnet. Der erste Versuch war
   `repeat(auto-fit, minmax(160px, 1fr))` mit der Annahme, auto-fit verhindere die
   Vollbreiten-Kachel. Das ist falsch: auto-fit klappt LEERE Spuren zusammen, und
   die eine belegte Spur waechst mit `1fr` ueber die ganze Breite. Am 29.07.2026
   auf dev gemessen: ein Betrieb mit einem Bild ergab 1216 x 912 px — Stefans
   „extremes Breitbild", nur hochkant. Mit vier festen Spuren belegt ein einzelnes
   Bild genau eine davon, also eine Viertelbreite; ein Deckel per `max-width` und
   Flex braucht es dann nicht (und dessen Exact-Fit-Rechnung
   `(100% - 3 * gap) / 4` haette bei Sub-Pixel-Rundung die vierte Kachel
   umbrechen lassen). */
.pk-bk__gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pk-s2);
}

.pk-bk__gallery-item {
    margin: 0;
    border-radius: var(--pk-radius-sm);
    overflow: hidden;
    background: var(--pk-bg-sunken);
}

/* Mobil zwei Spalten — vier Kacheln auf 390px waeren Briefmarken. */
@media (max-width: 767px) {
    .pk-bk__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pk-bk__gallery-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Datum + Belegung --- */
.pk-bk__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pk-s3);
}

.pk-bk__field {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s1);
}

.pk-bk__label {
    font-size: var(--pk-fs-sm);
    font-weight: 600;
    color: var(--pk-text-muted);
}

.pk-bk__input {
    min-height: 44px;
    padding: var(--pk-s2) var(--pk-s3);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg);
    color: var(--pk-text);
    font-family: var(--pk-font);
    font-size: var(--pk-fs-base);
}

.pk-bk__input:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 1px;
}

.pk-bk__input--age {
    width: 72px;
}

.pk-bk__nights {
    margin: 0;
    align-self: center;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

/* Naechte-Zeile des gemeinsamen Suchblocks: eigene Zeile UNTER den Datumsfeldern.
   Vorher stand sie als drittes Flex-Kind neben dem Abreisefeld und wurde auf dem
   Handy zwischen Feld und Rand gequetscht (Kundenbefund 05.08.2026). */
.pk-search-block__nights {
    margin: var(--pk-s2) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pk-s2);
    font-size: var(--pk-fs-base);
    font-weight: 600;
    color: var(--pk-text);
}

.pk-search-block__nights-hint {
    font-weight: 400;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

/* Ab Tablet steht die Naechte-Zeile in einer eigenen, vollen Zeile UNTER den
   Datumsfeldern und der Belegung. Ohne das ist sie das mittlere von drei
   Flex-Kindern (Daten | Naechte | Belegung) und haengt frei zwischen den beiden
   Gruppen - Kundenbefund 07.08.2026 "steht einfach mittig". Auf dem Handy
   bleibt die Reihenfolge unveraendert (Daten, Naechte, Belegung): dort wrappt
   ohnehin jede Gruppe auf eine eigene Zeile, und direkt unter den Datumsfeldern
   ist die Angabe richtig aufgehoben. */
@media (min-width: 768px) {
    .pk-search-block__nights {
        flex-basis: 100%;
        order: 1;
    }
}

/* Abreise ist rechnerisch festgelegt (Dauer der Pauschale): als Anzeige lesbar
   halten, aber klar nicht bedienbar. */
/* Anreise-Trigger des gemeinsamen Kalenders: die Grundoptik kommt aus
   date-picker.css, hier nur die Anpassung an den Suchblock - eckige Ecken wie
   die uebrigen Felder und eine Mindestbreite, damit der Block beim Wechsel
   zwischen kurzem Platzhalter und Datum nicht springt. */
.pk-date-trigger {
    min-width: 190px;
    justify-content: flex-start;
    border-radius: var(--pk-radius-sm);
    border-color: var(--pk-border-strong);
    font-size: var(--pk-fs-base);
}

/* Abreise-Anzeige. Seit 18.08.2026 ein `output`-Element statt eines
   Datumsfeldes (Begruendung im Partial): `output` ist von sich aus inline,
   deshalb hier `flex` - sonst greift die 44-px-Mindesthoehe der Basisklasse
   nicht und die Zeile wird niedriger als das Anreise-Feld daneben. */
.pk-bk__input--fixed {
    display: flex;
    align-items: center;
    background: var(--pk-bg-alt, #f5f5f5);
    color: var(--pk-text-muted);
}

.pk-bk__occupancy {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk__counter {
    display: flex;
    align-items: center;
    gap: var(--pk-s4);
}

.pk-bk__counter-ctrl {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s3);
}

.pk-bk__counter-val {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
}

.pk-bk__round {
    width: 44px;
    height: 44px;
    border: 1px solid var(--pk-border-strong);
    border-radius: 50%;
    background: var(--pk-bg);
    color: var(--pk-blue);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pk-bk__round:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pk-bk__children {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s2);
}

.pk-bk__children-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pk-s2);
}

.pk-bk__child {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s1);
}

.pk-bk__ghost {
    min-height: 44px;
    padding: 0 var(--pk-s3);
    border: 1px dashed var(--pk-border-strong);
    border-radius: var(--pk-radius-sm);
    background: transparent;
    color: var(--pk-blue);
    cursor: pointer;
    font-family: var(--pk-font);
}

/* --- Zimmer/Tarife --- */
.pk-bk__rooms-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk__empty {
    margin: 0;
    padding: var(--pk-s4);
    background: var(--pk-bg-alt);
    border-radius: var(--pk-radius-sm);
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-base);
}

.pk-bk__rooms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk__room {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    /* KEIN overflow:hidden — sonst schneidet die Karte das nach unten öffnende
       Preis-Popover ab (LL-029). Der Bild-Slider rundet seine Ecken selbst
       (.pk-bk__room-slider hat eigenes border-radius + overflow:hidden). */
    padding: 0; /* reset; body padding set below */
}

/* Zwei-Spalten-Layout ab 768px (Unterkuenfte-Paritaet): Bild fix links,
   Body flex:1 rechts. Mobil bleibt es gestapelt (Bild oben, volle Breite). */
@media (min-width: 768px) {
    .pk-bk__room {
        display: flex;
        align-items: flex-start;
    }
}

/* Body-Spalte (Name/Fakten/Tarife/Ausstattung) */
.pk-bk__room-body {
    flex: 1 1 auto;
    min-width: 0; /* erlaubt Text-Umbruch in der Flex-Spalte */
}

/* --- Zimmer-Bild-Slider (inline, scoped x-data) --- */

.pk-bk__room-slider {
    position: relative;
    width: 100%;
    background: var(--pk-bg-sunken);
    border-radius: var(--pk-radius-md) var(--pk-radius-md) 0 0;
    overflow: hidden;
}

/* Feste linke Spalte ab 768px: schmal (~280px), Ecken links gerundet. */
@media (min-width: 768px) {
    .pk-bk__room-slider {
        flex: 0 0 280px;
        width: 280px;
        align-self: stretch;
        border-radius: var(--pk-radius-md) 0 0 var(--pk-radius-md);
    }
}

.pk-bk__room-slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Ab 768px feste Bildhoehe statt Aspect-Ratio (Unterkuenfte-Paritaet ~210px). */
@media (min-width: 768px) {
    .pk-bk__room-slider-track {
        aspect-ratio: auto;
        height: 210px;
    }
}

.pk-bk__room-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider-Navigations-Buttons: visuell 32×32px, Tap-Target ≥44×44px via Pseudo */
.pk-bk__room-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--pk-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* extend hit area to ≥44×44px without changing visual size */
    padding: 0;
}

/* Transparent ::before extends tap target to 44×44px */
.pk-bk__room-nav::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.pk-bk__room-nav--prev { left: var(--pk-s2); }
.pk-bk__room-nav--next { right: var(--pk-s2); }

.pk-bk__room-nav:hover { background: #fff; }
.pk-bk__room-nav:focus-visible { outline: 3px solid var(--pk-focus); outline-offset: 2px; }

.pk-bk__room-counter {
    position: absolute;
    bottom: var(--pk-s2);
    right: var(--pk-s2);
    padding: 2px var(--pk-s2);
    border-radius: var(--pk-radius-pill);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: var(--pk-fs-xs);
    line-height: 1.4;
    pointer-events: none;
}

.pk-bk__room-name {
    margin: var(--pk-s4) var(--pk-s4) var(--pk-s3);
    font-weight: 700;
    color: var(--pk-text);
}

/* --- Zimmer-Eckdaten als Icon-Fakten-Liste (Unterkuenfte-Paritaet) --- */

.pk-bk__room-facts {
    list-style: none;
    margin: 0 var(--pk-s4) var(--pk-s3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2) var(--pk-s4);
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

.pk-bk__room-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s1);
}

.pk-bk__room-fact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--pk-text-muted);
}

/* --- Verfuegbarkeits-Kalender-Trigger (Unterkuenfte-Paritaet) --- */

.pk-bk__occ-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s2);
    margin: 0 var(--pk-s4) var(--pk-s3);
    min-height: 44px;
    padding: var(--pk-s2) var(--pk-s3);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-pill);
    font-family: var(--pk-font);
    font-size: var(--pk-fs-sm);
    font-weight: 600;
    color: var(--pk-blue);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.pk-bk__occ-trigger:hover {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
}

.pk-bk__occ-trigger:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-bk__occ-trigger-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pk-bk__occ-trigger { transition: none; }
}

/* Tariff list: horizontal + bottom padding so it aligns with room name/meta */
.pk-bk__tariffs {
    list-style: none;
    margin: 0;
    padding: 0 var(--pk-s4) var(--pk-s4);
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk__tariff {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s2);
    padding: var(--pk-s3);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg);
}

.pk-bk__tariff-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pk-s3);
}

.pk-bk__tariff-name {
    font-weight: 600;
    color: var(--pk-text);
}

.pk-bk__tariff-price-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s2);
    white-space: nowrap;
}

.pk-bk__tariff-strike {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    text-decoration: line-through;
}

.pk-bk__tariff-price {
    font-weight: 700;
    color: var(--pk-blue);
}

/* ⓘ-Toggle (Preisaufschlüsselung) */
/* Visual glyph stays 24×24px; transparent ::before extends hit area to ≥44×44px */
.pk-bk__price-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--pk-radius-pill);
    background: transparent;
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-md);
    line-height: 1;
    cursor: pointer;
}

/* Das Icon ist seit 29.07.2026 ein Inline-SVG statt des Zeichens U+24D8 (das
   kam aus einer Bitmap-Emoji-Fallback-Schrift und sah pixelig aus). 18px im
   24px-Button, Farbe per currentColor. */
.pk-bk__price-info-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.pk-bk__price-info:hover {
    color: var(--pk-blue);
}

.pk-bk__price-info::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.pk-bk__price-info:hover,
.pk-bk__price-info[aria-expanded="true"] {
    color: var(--pk-blue);
    background: var(--pk-blue-soft);
}

.pk-bk__price-info:focus-visible {
    outline: 2px solid var(--pk-focus);
    outline-offset: 2px;
}

/* Preis-Detail-Popover.
   Ebene: --pk-z-dropdown (Popover im Seiteninhalt), NICHT --pk-z-overlay. Die
   Overlay-Ebene liegt ueber dem Site-Chrome und ist Vollbild-Overlays mit
   Scroll-Lock vorbehalten (Handbuch 28.9); ein kleines Preis-Popover darf die
   Site-Kopfzeile nicht verdecken. */
.pk-bk__price-detail {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: var(--pk-z-dropdown);
    width: max(260px, 100%);
    max-width: 340px;
    padding: var(--pk-s3);
    background: var(--pk-bg);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    box-shadow: var(--pk-shadow-hover);
    font-size: var(--pk-fs-sm);
}

.pk-bk__price-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s2);
    margin-bottom: var(--pk-s2);
    padding-bottom: var(--pk-s2);
    border-bottom: 1px solid var(--pk-border);
}

.pk-bk__price-detail-title {
    font-weight: 600;
}

.pk-bk__price-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--pk-radius-sm);
    background: transparent;
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-lg);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.pk-bk__price-detail-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s1);
}

.pk-bk__price-detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--pk-s3);
    color: var(--pk-text);
}

.pk-bk__price-detail-label {
    color: var(--pk-text-muted);
}

.pk-bk__price-detail-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pk-bk__price-detail-total {
    display: flex;
    justify-content: space-between;
    gap: var(--pk-s3);
    margin-top: var(--pk-s2);
    padding-top: var(--pk-s2);
    border-top: 1px solid var(--pk-border);
    font-weight: 700;
    color: var(--pk-blue);
}

.pk-bk__price-detail-note {
    margin: var(--pk-s2) 0 0;
    font-size: var(--pk-fs-xs);
    color: var(--pk-text-muted);
}

/* B1: Stornobedingung im Popover */
.pk-bk__price-detail-cancellation {
    display: flex;
    align-items: flex-start;
    gap: var(--pk-s2);
    margin-top: var(--pk-s2);
    padding: var(--pk-s2) var(--pk-s3);
    border-radius: var(--pk-radius-sm);
    font-size: var(--pk-fs-xs);
    font-weight: 600;
}

.pk-bk__price-detail-cancellation.is-free {
    color: var(--c-success-text);
    background: color-mix(in srgb, var(--c-success) 12%, transparent);
}

.pk-bk__price-detail-cancellation.is-strict {
    color: var(--pk-text-muted);
    background: var(--pk-bg-alt);
}

.pk-bk__price-detail-cancellation-icon {
    flex-shrink: 0;
    font-style: normal;
}

/* B1: Sonderpreis-Name */
.pk-bk__price-detail-special-price {
    margin-top: var(--pk-s2);
    padding: var(--pk-s1) var(--pk-s3);
    background: var(--pk-blue-soft);
    border-radius: var(--pk-radius-sm);
}

.pk-bk__price-detail-special-price-label {
    font-size: var(--pk-fs-xs);
    font-weight: 600;
    color: var(--pk-blue);
}

/* B1: Zahlung & Garantie-Block */
.pk-bk__price-detail-payment {
    margin-top: var(--pk-s3);
    padding-top: var(--pk-s2);
    border-top: 1px solid var(--pk-border);
}

.pk-bk__price-detail-payment-title {
    font-size: var(--pk-fs-xs);
    font-weight: 700;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--pk-s2);
}

.pk-bk__price-detail-payment-row {
    font-size: var(--pk-fs-xs);
    color: var(--pk-text);
    margin: 0 0 var(--pk-s1);
}

.pk-bk__tariff-occupancy {
    margin: 0;
    font-size: var(--pk-fs-xs);
    color: var(--pk-text-subtle);
}

.pk-bk__tariff-meal {
    margin: 0;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

.pk-bk__cancellation {
    align-self: flex-start;
    margin: 0;
    padding: 2px var(--pk-s2);
    border-radius: var(--pk-radius-pill);
    font-size: var(--pk-fs-xs);
    font-weight: 600;
}

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

.pk-bk__cancellation.is-free::before {
    content: "\2713\00a0";
}

.pk-bk__cancellation.is-strict {
    color: var(--pk-text-muted);
    background: var(--pk-bg-alt);
}

.pk-bk__book {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 var(--pk-s5);
    border: 0;
    border-radius: var(--pk-radius-sm);
    background: var(--pk-blue);
    color: #fff;
    font-family: var(--pk-font);
    font-size: var(--pk-fs-base);
    font-weight: 700;
    cursor: pointer;
}

.pk-bk__book:hover { background: var(--pk-blue-hover); }
.pk-bk__book:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-bk__book:focus-visible { outline: 3px solid var(--pk-focus); outline-offset: 2px; }

/* =========================================================================
   G5: Zimmer-Ausstattung (collapsible, innerhalb .pk-bk__room)
   ========================================================================= */

.pk-bk__room-features {
    border-top: 1px solid var(--pk-border);
    margin: 0 var(--pk-s4);
}

.pk-bk__room-features-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--pk-s3) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--pk-font);
    font-size: var(--pk-fs-sm);
    font-weight: 600;
    color: var(--pk-text);
    text-align: left;
}

.pk-bk__room-features-toggle:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-bk__room-features-chevron {
    font-size: 17.6px;
    color: var(--pk-text-muted);
    transition: transform 0.18s;
    transform: rotate(0deg);
    display: inline-block;
}

.pk-bk__room-features-chevron.is-open {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .pk-bk__room-features-chevron { transition: none; }
}

.pk-bk__room-features-panel {
    padding-bottom: var(--pk-s3);
}

.pk-bk__room-features-groups {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk__room-features-group-title {
    font-size: var(--pk-fs-xs);
    font-weight: 700;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--pk-s1);
}

.pk-bk__room-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s1) var(--pk-s3);
}

.pk-bk__room-features-item {
    font-size: var(--pk-fs-xs);
    color: var(--pk-text);
    padding: 2px var(--pk-s2);
    border-radius: var(--pk-radius-pill);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-border);
}

/* =========================================================================
   Bestätigungs-Overlay (Inline-Flow) + Erfolg
   ========================================================================= */

.pk-bk-confirm {
    position: fixed;
    inset: 0;
    z-index: var(--pk-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pk-s4);
}

.pk-bk-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.pk-bk-confirm__panel {
    position: relative;
    width: min(480px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--pk-bg);
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow-hover);
    display: flex;
    flex-direction: column;
}

.pk-bk-confirm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s4);
    padding: var(--pk-s4) var(--pk-s5);
    border-bottom: 1px solid var(--pk-border);
}

.pk-bk-confirm__title {
    margin: 0;
    font-size: var(--pk-fs-lg);
    color: var(--pk-blue);
}

.pk-bk-confirm__close {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--pk-text-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.pk-bk-confirm__body {
    padding: var(--pk-s5);
}

.pk-bk-confirm__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
}

.pk-bk-confirm__row {
    display: flex;
    justify-content: space-between;
    gap: var(--pk-s4);
    padding-bottom: var(--pk-s3);
    border-bottom: 1px solid var(--pk-border);
}

.pk-bk-confirm__row dt {
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-sm);
}

.pk-bk-confirm__row dd {
    margin: 0;
    text-align: right;
    color: var(--pk-text);
    font-weight: 500;
}

.pk-bk-confirm__row--price dd {
    font-size: var(--pk-fs-md);
    font-weight: 700;
    color: var(--pk-blue);
}

.pk-bk-confirm__success {
    text-align: center;
    padding-top: var(--pk-s4);
}

.pk-bk-confirm__success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--pk-s3);
    border-radius: 50%;
    background: var(--pk-blue);
    color: #fff;
    font-size: 32px;
    line-height: 64px;
}

.pk-bk-confirm__success-text {
    margin: 0 0 var(--pk-s4);
    color: var(--pk-text);
}

.pk-bk-confirm__actions {
    display: flex;
    gap: var(--pk-s3);
    margin-top: var(--pk-s5);
}

.pk-bk__btn-primary,
.pk-bk__btn-secondary {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 var(--pk-s4);
    border-radius: var(--pk-radius-sm);
    font-family: var(--pk-font);
    font-size: var(--pk-fs-base);
    font-weight: 700;
    cursor: pointer;
}

.pk-bk__btn-primary {
    border: 0;
    background: var(--pk-blue);
    color: #fff;
}

.pk-bk__btn-primary:hover { background: var(--pk-blue-hover); }
.pk-bk__btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.pk-bk__btn-secondary {
    border: 1px solid var(--pk-border-strong);
    background: var(--pk-bg);
    color: var(--pk-text);
}

.pk-bk__btn-primary:focus-visible,
.pk-bk__btn-secondary:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    /* Aufgeklappte Betriebs-Card nimmt die volle Listenbreite ein (Liste ist
       ohnehin einspaltig — Regel dokumentiert die Intention fuer kuenftige Grids). */
    .pk-business--expanded {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Unverbindliche Anfrage an den Betrieb (Punkt G)
   ========================================================================== */

/* Aufhaenger im offenen Betriebs-Panel, unter den Zimmern. */
.pk-bk__enquiry-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s3);
    margin-top: var(--pk-s5);
    padding-top: var(--pk-s4);
    border-top: 1px solid var(--pk-border);
}

.pk-bk__enquiry-cta-text {
    margin: 0;
    flex: 1 1 240px;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

/* Der Knopf ist hier kein Formular-Fussteil, sondern steht neben dem Text -
   die Basisregel streckt ihn sonst ueber die ganze Breite. */
.pk-bk__enquiry-cta .pk-bk__btn-secondary {
    flex: 0 0 auto;
}

/* Overlay: gleiche Mechanik wie das Bestaetigungs-Overlay. */
.pk-enquiry {
    position: fixed;
    inset: 0;
    z-index: var(--pk-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pk-s4);
}

.pk-enquiry__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.pk-enquiry__panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--pk-bg);
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow-hover);
    display: flex;
    flex-direction: column;
}

.pk-enquiry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s4);
    padding: var(--pk-s4) var(--pk-s5);
    border-bottom: 1px solid var(--pk-border);
}

.pk-enquiry__title {
    margin: 0;
    font-size: var(--pk-fs-lg);
    color: var(--pk-blue);
}

.pk-enquiry__close {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--pk-text-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.pk-enquiry__body {
    padding: var(--pk-s5);
}

/* Was angefragt wird: ueberwiegend Zusammenfassung. Einzige Eingabe ist die
   Anreise (Kundenpunkt 10.08.2026) - die Abreise bleibt gerechnet. */
.pk-enquiry__summary {
    margin: 0 0 var(--pk-s5);
    display: flex;
    flex-direction: column;
    gap: var(--pk-s2);
    padding: var(--pk-s3);
    background: var(--pk-bg-alt, #f5f5f5);
    border-radius: var(--pk-radius-sm);
}

.pk-enquiry__summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--pk-s4);
    font-size: var(--pk-fs-sm);
}

.pk-enquiry__summary-row dt {
    color: var(--pk-text-muted);
}

.pk-enquiry__summary-row dd {
    margin: 0;
    text-align: right;
    color: var(--pk-text);
    font-weight: 500;
}

/* Anreise-Eingabe: 44 px hoch (Touch-Target), das native Datumsfeld oeffnet
   auf iOS/Android den Systemdialog. */
.pk-enquiry__date {
    min-height: 44px;
    padding: var(--pk-s2) var(--pk-s3);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg, #fff);
    color: var(--pk-text);
    font: inherit;
    font-weight: 500;
}

.pk-enquiry__period-note {
    display: block;
    margin-top: var(--pk-s1);
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-xs, 12px);
    font-weight: 400;
}

/* ---- Belegung im Anfrageformular (Kundenpunkt 11.08.2026) ---- */
.pk-enquiry__occ {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s2);
}

.pk-enquiry__occ-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s3);
}

.pk-enquiry__occ-label {
    color: var(--pk-text-muted);
    font-weight: 400;
}

.pk-enquiry__stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s2);
}

/* 44x44 Touch-Target, wie die Stepper in der Suche. */
.pk-enquiry__stepper-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg, #fff);
    color: var(--pk-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pk-enquiry__stepper-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pk-enquiry__stepper-value {
    min-width: 2ch;
    text-align: center;
    font-weight: 500;
}

/* ---- Mobiles Layout der Zusammenfassung (Kundenpunkt 11.08.2026) ----
   Bis 640 px steht der Wert UNTER seiner Beschriftung statt rechts daneben.
   Nebeneinander blieb fuer Betriebsauswahl, Datumsfeld und Stepper zu wenig
   Platz - die Spalte rutschte zusammen und wirkte unaufgeraeumt. */
@media (max-width: 640px) {
    .pk-enquiry__summary-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pk-s1);
    }

    /* Das Datumsfeld bestimmt seine Geometrie nicht mehr selbst.

       Kundenbefund 19.08.2026, drittes iPhone-Bild: das Feld war so breit wie der
       graue Kasten AUSSEN (352 Bildpunkte) und um dessen Innenabstand nach rechts
       verschoben - es ragte also rechts genau um diesen Abstand hinaus (15 Punkte,
       an einer ungestoerten Bildzeile ausgemessen, roter Markierungsrahmen der
       Kundin liegt daneben und stoert die Messung nicht).

       Ursache ist nicht der Kasten, sondern das native Bedienelement: in der
       Safari-Familie folgt `input[type="date"]` seinem Container nicht. Auf dev
       gemessen, Container 294 px breit: mit `flex: 1 1 auto` bleibt das Feld bei
       120 px, mit `appearance: none` ebenfalls, mit `width: 100%` werden es 188.
       Genau deshalb half auch `max-width: 100%` aus tokens.css nicht - eine
       Obergrenze in Prozent haengt an derselben Rechnung wie die Breite selbst.

       Loesung: die Geometrie kommt aus einem umgebenden Block (`--date-box`), das
       Feld wird darin absolut aufgespannt. Ein Block fuellt den Innenraum seines
       Containers von sich aus, ohne Prozentrechnung, und absolute Positionierung
       ist Layout - keine Control-Geometrie. Nachgemessen: Feld == Container,
       Ueberstand 0 (WebKit 294/294, Chromium 224/224), Hoehe unveraendert 44 px.
       Die Positionsangaben stehen absichtlich einzeln und nicht als
       `inset`-Kurzform: die Kurzform kennen aeltere Safari-Versionen nicht - und
       auf genau so einem Geraet tritt der Fehler auf. */
    .pk-enquiry__summary-row dd {
        text-align: left;
    }

    .pk-enquiry__date-box {
        position: relative;
        display: block;
        min-height: 44px;
    }

    .pk-enquiry__date-box .pk-enquiry__date {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Betriebsauswahl: volle Breite, je Zeile ein Betrieb, 44 px Zeilenhoehe. */
    .pk-enquiry__business-choice {
        width: 100%;
    }

    .pk-enquiry__business-option {
        display: flex;
        align-items: center;
        gap: var(--pk-s2);
        min-height: 44px;
    }
}

.pk-enquiry__form {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s4);
}

.pk-enquiry__actions {
    display: flex;
    gap: var(--pk-s3);
}

.pk-enquiry__success {
    text-align: center;
}

.pk-enquiry__success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--pk-s3);
    border-radius: 50%;
    background: var(--pk-blue);
    color: #fff;
    font-size: 32px;
    line-height: 64px;
}

/* Feldsatz des Partials Ui/EnquiryFields - modulneutral benannt, damit die
   Unterkunfts-Anfrage bei ihrer Umstellung dieselben Regeln erbt. */
.ob-enquiry__field {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s1);
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

.ob-enquiry__field input,
.ob-enquiry__field textarea {
    min-height: 44px;
    padding: var(--pk-s2) var(--pk-s3);
    border: 1px solid var(--pk-border-strong);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg);
    color: var(--pk-text);
    font-family: var(--pk-font);
    font-size: var(--pk-fs-base);
}

.ob-enquiry__field textarea {
    min-height: 110px;
    resize: vertical;
}

.ob-enquiry__field input:focus-visible,
.ob-enquiry__field textarea:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 1px;
}

.ob-enquiry__field input.is-error,
.ob-enquiry__field textarea.is-error {
    border-color: var(--pk-error, #b51621);
}

.ob-enquiry__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--pk-s2);
    font-size: var(--pk-fs-sm);
    color: var(--pk-text);
}

/* Die Wirtsseite versteckt JEDE Checkbox global
   (`.wrapAll input[type="checkbox"] { appearance: none; width: 1px }`), weil sie
   sich ihre eigene ueber `label::before/::after` zeichnet. Ohne eigenen,
   staerkeren Selektor bleibt unsere Einwilligungs-Box unsichtbar und
   1 px hoch (am 06.08.2026 auf dev gemessen). Deshalb `.ob-root` davor: das
   ergibt dieselbe Spezifitaetsklasse wie die Wirtsregel plus eine Klasse, und
   `appearance: auto` holt die native Darstellung zurueck. Gleiche Vorgehensweise
   wie beim Event-Leisten-Toggle in ob-live.css. */
.ob-enquiry__consent input,
.ob-root .ob-enquiry__consent input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 20px;
    height: 20px;
    min-height: 20px;
    /* 12px ringsum ergeben mit den 20px ein 44px-Touch-Ziel. */
    margin: 12px;
    flex: 0 0 auto;
    cursor: pointer;
}

/* Honeypot: fuer Menschen und Screenreader weg, fuer Bots im DOM. `display:
   none` waere zu offensichtlich - viele Bots ueberspringen genau das. */
.ob-enquiry__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ausgewähltes Hotel im Aside */
.pk-detail__selected-hotel {
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
    margin: 0;
    padding: var(--pk-s2) var(--pk-s3);
    background: var(--pk-blue-soft);
    border-radius: var(--pk-radius-sm);
    border: 1px solid var(--pk-blue);
}

/* =========================================================================
   Lightbox
   ========================================================================= */

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

.pk-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.pk-lightbox__stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1000px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pk-lightbox__img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    object-fit: contain;
    display: block;
    border-radius: var(--pk-radius-md);
}

.pk-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 44px; height: 44px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 24px;
    border-radius: var(--pk-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.pk-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.pk-lightbox__close:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

.pk-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 56px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    border-radius: var(--pk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.pk-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.pk-lightbox__nav:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}
.pk-lightbox__nav--prev { left: -56px; }
.pk-lightbox__nav--next { right: -56px; }

.pk-lightbox__counter {
    position: absolute;
    bottom: -var(--pk-s8);
    color: rgba(255,255,255,0.7);
    font-size: var(--pk-fs-sm);
    margin: var(--pk-s3) 0 0;
}

/* Fotocredit im grossen Bild (Abnahme-Punkt 90). Rechts unten, damit er dem
   Bildzaehler links nicht in die Zeile laeuft. Rendert nur mit Wert. */
.pk-lightbox__credit {
    color: rgba(255,255,255,0.7);
    font-size: var(--pk-fs-sm);
    margin: var(--pk-s3) 0 0;
    text-align: right;
}

/* =========================================================================
   Video-Sektion (Task 3.2: lazy iframe / direkte Video-Datei)
   ========================================================================= */

.pk-detail__video {
    margin-bottom: var(--pk-s8);
}

/* 16:9-Wrapper für iframe-Embeds (YouTube-nocookie, Vimeo) */
.pk-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--pk-bg-sunken);
    border-radius: var(--pk-radius-md);
    overflow: hidden;
}

/* iframe füllt den 16:9-.pk-video-Wrapper vollständig aus */
.pk-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--pk-radius-md);
    display: block;
}

/* Direkte Videodatei außerhalb des .pk-video-Wrappers: aspect-ratio übernimmt
   die Größengebung; height:100% würde gegen auto-height auflösen und hat
   keinen Effekt, daher weggelassen */
.pk-video__file {
    width: 100%;
    border: 0;
    border-radius: var(--pk-radius-md);
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--pk-bg-sunken);
}

/* Poster-Button: zentriert über dem 16:9-Wrapper, Touch-Target ≥ 44×44 px */
.pk-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    border: none;
    cursor: pointer;
    font-size: 48px;
    color: #fff;
    border-radius: var(--pk-radius-md);
    transition: background 0.15s;
    /* Mindest-Touch-Target via Pseudo-Element-Trick — Button selbst füllt
       den ganzen Wrapper aus, daher > 44 px auf jeder sinnvollen Bildschirmgröße */
}
.pk-video__poster:hover {
    background: rgba(0, 0, 0, 0.48);
}
.pk-video__poster:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .pk-video__poster {
        transition: none;
    }
}

/* =========================================================================
   Verfuegbarkeitskalender-Modal (pro Zimmer/Tarif)
   Self-contained Port aus der Unterkuenfte-Strecke (osttirol-occ-*),
   hier als pk-occ-* (packages.css laedt booking.css NICHT).
   Farbcodierung: gruen=verfuegbar, rot=belegt, grau=vergangen.
   ========================================================================= */

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

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

.pk-occ-modal__dialog {
    position: relative;
    background: var(--pk-bg);
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow-hover);
    padding: var(--pk-s6);
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--pk-s5);
}

.pk-occ-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pk-s4);
}

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

.pk-occ-modal__subtitle {
    margin: var(--pk-s1) 0 0;
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

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

.pk-occ-modal__close:hover { background: var(--pk-border); }
.pk-occ-modal__close:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

/* Mindestaufenthalt-/Fallback-Hinweise */
.pk-occ-minstay,
.pk-occ-modefallback {
    margin: 0;
    padding: var(--pk-s2) var(--pk-s3);
    border-radius: var(--pk-radius-sm);
    background: var(--pk-bg-alt);
    font-size: var(--pk-fs-sm);
    color: var(--pk-text-muted);
}

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

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

.pk-occ-nav__btn:hover:not(:disabled) {
    background: var(--pk-bg);
    border-color: var(--pk-blue);
}
.pk-occ-nav__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pk-occ-nav__btn:focus-visible {
    outline: 3px solid var(--pk-focus);
    outline-offset: 2px;
}

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

/* Monats-Grid (1 Spalte mobil, 2 ab 500px) */
.pk-occ-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pk-s6);
}

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

.pk-occ-month__title {
    font-size: var(--pk-fs-sm);
    font-weight: 600;
    text-align: center;
    margin: 0 0 var(--pk-s3);
    color: var(--pk-text);
}

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

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

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

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

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

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

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

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

.pk-occ-legend__item {
    display: flex;
    align-items: center;
    gap: var(--pk-s2);
}

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

.pk-occ-legend__swatch--avail { background: var(--c-success); }
.pk-occ-legend__swatch--busy { background: var(--c-error); }
.pk-occ-legend__swatch--past {
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-border);
}

/* Status-Meldung im Modal (Loading/Fehler) */
.pk-occ-status {
    text-align: center;
    padding: var(--pk-s6) 0;
    color: var(--pk-text-muted);
    font-size: var(--pk-fs-sm);
}

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