/* ══════════════════════════════════════════════════════════════
   XXL ART — Hub-Raum-Teaser
   /css/hub_room_teaser.css

   Markup: templates/engine/hub_room_teaser.php · JS: js/hub_room_teaser.js
   Aufbau + Farben wie .room-teaser / .crop-teaser:
   Handy Raum oben + Text darunter, breit Raum rechts + Verlauf von links.
   ══════════════════════════════════════════════════════════════ */

.hub-room-teaser {
    --teaser-bg:     #0c0d0e;
    --teaser-fg:     #f2f2ef;
    --teaser-muted:  rgba(242, 242, 239, 0.62);
    --teaser-accent: #c9a45c;
    --teaser-gutter: clamp(20px, 5vw, 64px);
    --teaser-ease:   cubic-bezier(.34, 1.2, .64, 1);   /* gleicher Morph wie Raumvorschau (rp-art.is-morphing) */
    --hrt-morph:     0.9s;
    --hrt-image-h:   60vh;

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--teaser-bg);
    color: var(--teaser-fg);
}
@supports (height: 1svh) {
    .hub-room-teaser { --hrt-image-h: 60svh; }
}

.hub-room-teaser *,
.hub-room-teaser *::before,
.hub-room-teaser *::after { box-sizing: border-box; }

/* ── Raum ── */
.hub-room-teaser-image {
    position: relative;
    flex: 0 0 auto;
    height: var(--hrt-image-h);
    margin: 0;
    overflow: hidden;
    touch-action: pan-y;            /* waagerecht wischen = Werk wechseln (JS) */
}

/* Szene im Seitenverhältnis des Fotos, füllt den Bereich ("cover").
   Ohne JS mittig — JS schiebt sie so, dass das Gemälde im Blick bleibt (left/top in px). */
.hub-room-teaser-scene {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%;
    width: max(100%, calc(var(--hrt-image-h) * var(--room-ratio)));
    transform: translate(-50%, -50%);
}
.hub-room-teaser-scene.is-panned {
    transform: none;
    transition: left var(--hrt-morph) var(--teaser-ease), top var(--hrt-morph) var(--teaser-ease);
}
.hub-room-teaser-scene.no-anim { transition: none; }

.hub-room-teaser-ratio { display: block; width: 100%; }

.hub-room-teaser-scene > picture,
.hub-room-teaser-scene > picture img,
.hub-room-teaser-layer {
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}
.hub-room-teaser-layer { pointer-events: none; }   /* Vordergrund aus dem Room Manager */

/* Hub-Übersicht (data-hrt-mode="rooms"): je Folie ein Raum, weich überblendet */
.hub-room-teaser-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hub-room-teaser-slide.is-on { opacity: 1; }
.hub-room-teaser-slide .hub-room-teaser-art { transition: none; }   /* kein Morph zwischen verschiedenen Räumen */

/* Raumbild eines Werks (gallery, über ImageTag → evtl. <picture>) füllt die Folie */
.hub-room-teaser-gallery,
.hub-room-teaser-gallery picture {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: block;
}
.hub-room-teaser-controls.no-label .hub-room-teaser-now-label { display: none; }

/* Bild-Modus: kein passender Raum → festes Hub-Bild aus $hub_config, füllt den Bereich */
.hub-room-teaser-hub-image {
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Gemälde: Rahmen morpht (Lage + Größe), Bilder blenden darin über */
.hub-room-teaser-art {
    position: absolute;
    background: #ebe7e0;
    box-shadow: 8px 14px 28px rgba(0, 0, 0, 0.32), 2px 4px 6px rgba(0, 0, 0, 0.25);
    transition: left var(--hrt-morph) var(--teaser-ease),
                top var(--hrt-morph) var(--teaser-ease),
                width var(--hrt-morph) var(--teaser-ease),
                height var(--hrt-morph) var(--teaser-ease);
}
.hub-room-teaser-art img {
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.hub-room-teaser-art img.is-on { opacity: 1; }

/* Maßlinie über dem Bild: "120 cm" */
.hub-room-teaser-measure {
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 12px;
    margin-bottom: 10px;
    border-left: 1px solid rgba(12, 13, 14, 0.75);
    border-right: 1px solid rgba(12, 13, 14, 0.75);
}
.hub-room-teaser-measure::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px solid rgba(12, 13, 14, 0.75);
}
.hub-room-teaser-measure span {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 10px;
    background: var(--teaser-bg);
    color: var(--teaser-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hub-room-teaser-image::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 35%;
    background: linear-gradient(0deg, var(--teaser-bg) 0%, rgba(12, 13, 14, 0.6) 45%, rgba(12, 13, 14, 0) 100%);
    pointer-events: none;
}

/* ── Steuerung unten rechts im Raum ── */
.hub-room-teaser-controls {
    position: absolute;
    right: 16px; bottom: 44px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.hub-room-teaser-progress {
    flex: 0 0 100%;
    height: 2px;
    margin-bottom: 4px;
    background: rgba(242, 242, 239, 0.22);
    overflow: hidden;
}
.hub-room-teaser-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--teaser-accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.hub-room-teaser-progress span.is-running {
    animation: hrt-progress var(--hrt-interval, 5000ms) linear forwards;
}
.hub-room-teaser.is-paused .hub-room-teaser-progress span { animation-play-state: paused; }
@keyframes hrt-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hub-room-teaser .hub-room-teaser-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(242, 242, 239, 0.35);
    border-radius: 0;
    background: rgba(12, 13, 14, 0.55);
    color: var(--teaser-fg);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hub-room-teaser .hub-room-teaser-arrow:hover {
    border-color: var(--teaser-fg);
    background: var(--teaser-fg);
    color: var(--teaser-bg);
}
.hub-room-teaser-arrow svg { width: 20px; height: 20px; }

.hub-room-teaser-count {
    min-width: 64px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--teaser-muted);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hub-room-teaser-count b { color: var(--teaser-fg); font-weight: 700; }

.hub-room-teaser .hub-room-teaser-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin-left: 6px;
    padding: 0 20px;
    border: 1px solid var(--teaser-accent);
    border-radius: 0;
    background: var(--teaser-accent);
    color: var(--teaser-bg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hub-room-teaser .hub-room-teaser-button:hover {
    border-color: var(--teaser-fg);
    background: var(--teaser-fg);
    color: var(--teaser-bg);
}
.hub-room-teaser-button svg { width: 18px; height: 18px; flex: 0 0 auto; }

.hub-room-teaser .hub-room-teaser-arrow:focus-visible,
.hub-room-teaser .hub-room-teaser-button:focus-visible {
    outline: 2px solid var(--teaser-fg);
    outline-offset: 3px;
}

/* ── Text ── */
.hub-room-teaser-content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0;
    padding: 14px var(--teaser-gutter) 48px;
}

/* h1/h2 = Zeile + Überschrift. Globale Heading-Styles hier zurücksetzen */
.hub-room-teaser .hub-room-teaser-heading {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    background: none;
}
.hub-room-teaser-eyebrow {
    display: block;
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--teaser-accent);
}
.hub-room-teaser-title {
    display: block;
    margin: 0 0 20px;
    font-size: clamp(40px, 10vw, 96px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--teaser-fg);
}
.hub-room-teaser-accent { color: var(--teaser-accent); }
/* Ohne JS: Wörter, die allein nicht in eine Zeile passen, umbrechen (statt aus dem Bild zu laufen).
   Mit JS (fitTitle in js/hub_room_teaser.js): nie im Wort brechen — Schrift wird passend verkleinert. */
.hub-room-teaser-title { overflow-wrap: break-word; word-wrap: break-word; }
.hub-room-teaser-title.is-fit { overflow-wrap: normal; word-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }

.hub-room-teaser-text {
    max-width: 40ch;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--teaser-muted);
}

/* Welches Werk gerade hängt — im Steuer-Block über Fortschritt + Buttons, blendet beim Wechsel kurz aus/ein */
.hub-room-teaser-now {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    text-align: left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.hub-room-teaser-now.is-changing {
    opacity: 0;
    transform: translateY(6px);
}
/* Übersicht: Raum-Name über dem Werk ("Büro") */
.hub-room-teaser-now-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teaser-accent);
}
.hub-room-teaser-now-art { display: flex; flex-direction: column; gap: 2px; }
/* Folie mit Hub-Bild: kein Werk → nur der Raum-Name, kein "Werk ansehen" */
.hub-room-teaser-controls.is-image .hub-room-teaser-now-art,
.hub-room-teaser-controls.is-image .hub-room-teaser-button { display: none; }

.hub-room-teaser-now-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--teaser-fg);
}
.hub-room-teaser-now-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 13px;
    color: var(--teaser-muted);
}
.hub-room-teaser-now-price { color: var(--teaser-accent); font-weight: 600; }
.hub-room-teaser-now-price:empty { display: none; }

/* Raumvorschau-Button links unter dem Text (Umriss wie .room-teaser-button-ghost) */
.hub-room-teaser-actions { margin: 0; }
.hub-room-teaser .hub-room-teaser-rp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid rgba(242, 242, 239, 0.35);
    border-radius: 0;
    background: transparent;
    color: var(--teaser-fg);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.hub-room-teaser .hub-room-teaser-rp-button:hover {
    border-color: var(--teaser-fg);
    background: var(--teaser-fg);
    color: var(--teaser-bg);
}
.hub-room-teaser .hub-room-teaser-rp-button:focus-visible { outline: 2px solid var(--teaser-fg); outline-offset: 3px; }
.hub-room-teaser-rp-button svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
.hub-room-teaser .hub-room-teaser-rp-button.is-loading { opacity: 0.55; pointer-events: none; cursor: progress; }

/* USPs unten links im Schwarzen */
.hub-room-teaser-usps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 36px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(242, 242, 239, 0.14);
    list-style: none;
}
.hub-room-teaser-usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(242, 242, 239, 0.8);
}
.hub-room-teaser-usp::before { content: none; }
.hub-room-teaser-usp svg {
    width: 26px;
    height: 26px;
    color: var(--teaser-fg);
    fill: currentColor;
}

/* Handy: Steuerung kompakter — Knopf nur Pfeil-Text, Zähler kleiner */
@media (max-width: 899px) {
    .hub-room-teaser-controls { left: 16px; bottom: 36px; justify-content: flex-start; }
    .hub-room-teaser-now { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; }
    .hub-room-teaser-now-title { font-size: 15px; }
    .hub-room-teaser-now-label { flex: 0 0 100%; }
    .hub-room-teaser-now-art { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
    .hub-room-teaser .hub-room-teaser-button { margin-left: auto; padding: 0 16px; font-size: 12px; }
    .hub-room-teaser-count { min-width: 44px; }
    .hub-room-teaser-controls { gap: 6px; }
    .hub-room-teaser .hub-room-teaser-arrow { width: 40px; height: 40px; }
    .hub-room-teaser .hub-room-teaser-button { flex: 0 0 100%; min-height: 44px; margin: 4px 0 0; }
}

/* ── Breit: Raum rechts über die volle Höhe, Text links, USPs unten links ── */
@media (min-width: 900px) {
    .hub-room-teaser {
        --hrt-image-h: 100vh;
        flex-direction: row;
        align-items: stretch;
    }
    @supports (height: 1svh) {
        .hub-room-teaser { --hrt-image-h: 100svh; }
    }

    .hub-room-teaser-image {
        position: absolute;
        top: 0; bottom: 0; right: 0;
        left: 40%;
        height: auto;
    }
    .hub-room-teaser-image::after { display: none; }
    .hub-room-teaser-image::before {      /* Verlauf links in den schwarzen Textbereich */
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 0;
        z-index: 2;
        width: 22%;
        background: linear-gradient(90deg, var(--teaser-bg) 0%, rgba(12, 13, 14, 0) 100%);
        pointer-events: none;
    }

    /* Info + Steuerung als dunkle Fläche — bleibt auf heller Wand lesbar */
    .hub-room-teaser-controls {
        right: 40px;
        bottom: 40px;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 460px;
        max-width: calc(100% - 80px);
        padding: 18px 20px 20px;
        background: rgba(12, 13, 14, 0.38);
    }
    .hub-room-teaser-now { margin-bottom: 14px; align-items: flex-end; text-align: right; }
    .hub-room-teaser-now-meta { justify-content: flex-end; }
    .hub-room-teaser-now-art { align-items: flex-end; }
    .hub-room-teaser-progress { margin-bottom: 10px; }
    .hub-room-teaser-count { text-shadow: none; }
    .hub-room-teaser .hub-room-teaser-arrow { background: transparent; }
    .hub-room-teaser .hub-room-teaser-button { margin-left: auto; }

    .hub-room-teaser-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40%;
        max-width: 640px;
        min-height: 100%;
        margin-top: 0;
        padding: 80px var(--teaser-gutter) 0;
    }
    .hub-room-teaser-title { font-size: clamp(48px, 4.6vw, 88px); }
    .hub-room-teaser-text  { font-size: 18px; }

    /* USPs ganz unten im Schwarzen */
    .hub-room-teaser-usps {
        margin-top: auto;
        margin-bottom: 40px;
        transform: translateY(0);
    }
    .hub-room-teaser-heading { margin-top: auto !important; }
    .hub-room-teaser-usp { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-room-teaser-art,
    .hub-room-teaser-art img,
    .hub-room-teaser-scene.is-panned,
    .hub-room-teaser-slide,
    .hub-room-teaser-now { transition: none; }
    .hub-room-teaser-progress { display: none; }
}