/*
 * /demo auf Handy und Tablet (bis 1100 px; gewählt 03.10.2026: Vorschau C „Film mit Untertiteln“ aus design-previews/demo-mobile/).
 *
 * Bis 1100 px stapelt /demo alles untereinander; dort gilt ein eigener Ablauf:
 *  - Hinweis oben im Hero (nur Touch-Geräte): am Laptop oder PC jede Station selbst ausprobieren, schließbar
 *  - Hero: Überschrift → Motion Graphic mit Untertiteln im Takt des Films (Station 1 und 2) → Zitat → Knopf zu Station 3
 *  - Stationen 1 und 2 entfallen (der Film zeigt sie), Stationsleiste unter der Navbar statt Route und großer Nummern
 *  - Station 3: kleine Kartenvorschau mit fester Höhe über einer kurzen Eingabe (mobile.js)
 *  - Expertenliste, Ausblick und Kosten kürzer gesetzt
 * Ab 1101 px greift hier nur die Regel, die die Zusatzteile ausblendet. Eingebunden von includes/demo-motion/wrap.php.
 */

@media (min-width: 1101px) {
    .dvm-only { display: none !important; }
}

/* Hinweis „Am Laptop oder PC“: nur auf Touch-Geräten, nicht in einem schmalen Fenster am Rechner.
   Helle Sandkarte mit Schiefer-Akzenten (Variante D „Sand hell“ aus design-previews/demo-link-teilen/, gewählt 21.10.2026) */
.dvm-hint { display: none; }
@media (max-width: 1100px) and (pointer: coarse) {
    .dv-page .dvm-hint:not([hidden]) {
        order: 0; display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 11px 6px 12px 14px;
        border-radius: 14px; background: #f3efe5; border: 1px solid #dccfb3; box-shadow: 0 16px 34px -20px rgba(10, 20, 15, .9);
        color: #4a4436; font-size: 14px; line-height: 1.45;
    }
}
.dvm-hint__ic { flex: none; margin-top: 2px; font-size: 15px; color: #4a6b8a; }
.dvm-hint__body { flex: 1; min-width: 0; }
.dvm-hint p { margin: 0; }
.dvm-hint b { color: #1c1a15; }
.dvm-hint__tablet { display: none; }
@media (min-width: 768px) {
    .dvm-hint__phone { display: none; }
    .dvm-hint__tablet { display: inline; }
}
/* X: Tippfläche 36 × 36 px, sichtbarer Kreis 28 px */
.dvm-hint__close {
    position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -7px -2px -7px 2px; padding: 0;
    border: 0; background: transparent; color: #1c1a15; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dvm-hint__close::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; border: 1px solid #dccfb3; }
.dvm-hint__close i { position: relative; }
.dvm-hint__close:active::before { background: #ece6d8; }
.dvm-hint__close:focus-visible { outline: 2px solid #4a6b8a; outline-offset: 1px; border-radius: 50%; }

/* Link an sich selbst senden: WhatsApp · AirDrop bzw. Quick Share (mobile.js) · Kopieren · E-Mail */
.dvm-share { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.dvm-share__i {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
    color: #5a5344; font: inherit; font-size: 11px; line-height: 1.2; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dvm-share__i[hidden] { display: none; }
.dvm-share__c {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid #dccfb3; color: #34506b; font-size: 16px;
}
.dvm-share__c--wa { color: #1f9e4f; }
.dvm-share__i:active .dvm-share__c { background: #ece6d8; }
.dvm-share__i:focus-visible { outline: none; }
.dvm-share__i:focus-visible .dvm-share__c { outline: 2px solid #4a6b8a; outline-offset: 2px; }
.dvm-hint .dvm-share__done { margin-top: 6px; font-size: 13px; font-weight: 600; color: #2e7d32; }
.dvm-share__done:empty { display: none; }

@media (max-width: 1100px) {
    :root { --dvm-bar-h: 46px; }
    html { scroll-padding-top: calc(var(--hm-nav-h) + 1px + var(--dvm-bar-h) + 12px); }

    /* ---------------------------------------------------------------- Hero: Überschrift → Film → Zitat → Knopf */
    .dv-page .dv-hero--a { padding: 26px 0 48px; }
    .dv-page .dv-hero__grid { gap: 0; }
    .dv-page .dv-hero__text { display: contents; }
    .dv-page .dv-hero .bl-eyebrow { order: 1; justify-self: start; }
    .dv-page .dv-hero h1 { order: 2; margin-top: 14px; font-size: clamp(30px, 8.4vw, 44px); }
    .dv-page .dv-hero .hm { order: 3; margin-top: 22px; }
    .dv-page .dv-hero--a .dv-hero__quote { order: 4; margin: 26px 0 0; font-size: 17px; max-width: 640px; }
    .dv-page .dv-hero--a .dv-hero__quote small { font-size: 14px; }
    .dv-page .dv-hero__trust,
    .dv-page .dv-hero__text > .bl-hero__ctas { display: none; }
    .dv-page .dvm-hero-cta { order: 5; display: inline-flex; justify-self: start; margin-top: 22px; }

    /* Film samt Untertitel ganz im Bild, sobald er oben anliegt */
    .dv-page .hm {
        justify-self: center; width: 100%;
        max-width: min(640px, calc((100svh - var(--hm-nav-h) - 196px) * var(--hm-vw, 390) / var(--hm-vh, 660)));
    }
    .dv-page .hm-meta { display: none; }
    .dv-page .hm-foot { margin-top: 8px; }

    /* Kapitelleiste als Fortschrittsbalken (wie Story-Segmente); Ausblick gehört nicht zum Film */
    .dv-page .hm-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
    .dv-page .hm-ch { height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(246, 243, 236, .2); }
    .dv-page .hm-ch > b, .dv-page .hm-ch > span { display: none; }
    .dv-page .hm-ch--planned { display: none; }
    .dv-page .hm-ch__bar { height: 100%; border-radius: 4px; }
    .dv-page .hm-ch.is-done .hm-ch__bar { transform: scaleX(1); }

    /* Untertitel */
    .dvm-subs {
        position: relative; display: block; margin-top: 10px; padding: 13px 16px 15px; min-height: 124px;
        border-radius: 14px; background: rgba(15, 36, 28, .55); border: 1px solid var(--bl-ink-border-strong);
        transition: opacity .18s ease, border-color .3s ease;
    }
    .dvm-subs.is-swap { opacity: 0; }
    .dvm-subs__kick { font: 600 11px/1.2 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bl-acc); }
    .dvm-subs__text { margin-top: 7px; font-size: 16px; line-height: 1.5; color: var(--bl-on-ink); }
    .dvm-subs[data-beat="slot"] { border-color: rgba(242, 181, 68, .6); }

    /* ---------------------------------------------------------------- Stationen: 1 und 2 zeigt der Film; keine Route */
    .dv-page #station-1, .dv-page #station-2 { display: none; }
    .dv-page .dv-route__svg { display: none; }
    .dv-page .dv-st { padding: 56px 0 28px; }
    .dv-page .dv-st--you { margin-top: 0; padding: 56px 0 64px; }
    .dv-page .dv-st__grid, .dv-page .dv-st__grid--you { gap: 0; }
    .dv-page .dv-st__text { padding-left: 0; }
    /* vorstellung.css zieht diese Blöcke unter 560 px an die Route (-58 px); ohne Route bündig */
    .dv-page .dv-st__text .dv-builder, .dv-page .dv-st__text .dv-legend, .dv-page .dv-st__text .dv-you-notes { margin-left: 0; }
    .dv-page .dv-st__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; margin-bottom: 14px; }
    .dv-page .dv-num {
        position: relative; left: auto; top: auto; width: 46px; height: 46px; font-size: 21px;
        box-shadow: 0 0 0 4px var(--bl-sand), 0 10px 18px -10px rgba(52, 44, 28, .6);
    }
    .dv-page .dv-num--you { width: 52px; height: 52px; font-size: 24px; box-shadow: 0 0 0 4px var(--bl-ink-2), 0 0 0 9px rgba(242, 181, 68, .2); }
    .dv-page .dv-num::before { inset: -6px; }
    .dv-page .dv-num--you::before { inset: -9px !important; }
    .dv-page .dv-st__title { margin-top: 4px; font-size: clamp(25px, 6.6vw, 36px); }
    .dv-page .dv-st__lead { font-size: 16px; line-height: 1.6; max-width: 640px; }

    /* Zwischenhalt und Ausblick: Einzug der Route weg */
    .dv-page .hs-vgl__intro, .dv-page .hs-pair, .dv-page .hs-matrix, .dv-page .hs-duel, .dv-page .hs-coststrip, .dv-page .hs-source,
    .dv-page .hs-road__head, .dv-page .hs-progress, .dv-page .hs-legs, .dv-page .hs-road__grid { margin-left: 0; }
    .dv-page .hs-road__text { padding-left: 0; }
    .dv-page .hs-tl, .dv-page .hs-facts { margin-left: 0; }

    /* ---------------------------------------------------------------- Stationsleiste (mobile.js) */
    .dvm-bar {
        position: fixed; left: 0; right: 0; top: calc(var(--hm-nav-h) + 1px); z-index: 95;
        background: rgba(246, 243, 236, .96); border-bottom: 1px solid var(--bl-nav-border);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 22px -18px rgba(52, 44, 28, .55);
        opacity: 0; transform: translateY(-100%); pointer-events: none;
        transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    .dvm-bar.is-on { opacity: 1; transform: none; pointer-events: auto; }
    .dvm-bar__inner { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; height: var(--dvm-bar-h); align-items: center; }
    .dvm-bar__item {
        position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px; padding: 0 6px;
        border: 0; border-radius: 10px; background: transparent; color: var(--bl-text-3);
        font: 600 12.5px/1 var(--bl-font); white-space: nowrap; transition: background-color .2s ease, color .2s ease;
    }
    .dvm-bar__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .dvm-bar__item b {
        flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
        background: var(--bl-card-sunken); border: 1.5px solid var(--bl-border-strong); color: var(--bl-text-3);
        font: 800 11px/1 var(--bl-font-head); transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }
    .dvm-bar__item.is-done { color: var(--bl-text-2); }
    .dvm-bar__item.is-done b { background: var(--bl-green); border-color: var(--bl-green); color: #f3f8f4; }
    .dvm-bar__item.is-on { background: var(--bl-acc-soft-sand); color: var(--bl-text); }
    .dvm-bar__item.is-on b { background: var(--bl-acc); border-color: var(--bl-acc); color: var(--bl-acc-on); box-shadow: 0 0 0 3px rgba(242, 181, 68, .25); }
    .dvm-bar__item--planned:not(.is-on) b { background: transparent; border-style: dashed; }
    .dvm-bar__item:focus-visible { outline: 2px solid var(--bl-acc-deep); outline-offset: 1px; }

    /* ---------------------------------------------------------------- Station 3: Vorschau über der Eingabe (mobile.js) */
    .dv-page #station-3 .dv-st__visual,
    .dv-page #station-3 .dv-st__text > .dv-builder:not(.dvm-builder),
    .dv-page #station-3 .dv-you-notes,
    .dv-page #station-3 .dv-st__text > .dv-st__lead:not(.dvm-own__lead) { display: none; }
    .dv-page .dvm-own {
        position: sticky; top: calc(var(--hm-nav-h) + 1px + var(--dvm-bar-h)); z-index: 6;
        margin: 6px calc(-1 * var(--bl-gutter)) 0; padding: 22px var(--bl-gutter) 12px;
        background: linear-gradient(var(--bl-ink-2) 88%, rgba(30, 58, 46, 0));
    }
    .dv-page #station-3.dvm-typing .dvm-own { position: relative; top: auto; }
    /* Startwert; mobile.js passt die Höhe danach an Listenkopf und eigene Karte an, damit sie ganz zu sehen ist */
    .dv-page .dvm-own__window { --ls-height: 330px; }
    .dv-page .dvm-own__window .ls-viewport { transition: height .3s cubic-bezier(.2, .8, .2, 1); }

    /* Eingabe kompakt: Büro, Bild, Normal/Premium */
    .dv-page .dvm-builder { gap: 14px; margin-top: 10px; padding: 16px; }
    .dv-page .dvm-builder .dv-logos { flex-wrap: nowrap; gap: 10px; }
    .dv-page .dvm-builder .dv-logo { width: 50px; height: 50px; }
    .dv-page .dvm-builder input[type="text"] { font-size: 16px; } /* iOS zoomt unter 16 px beim Antippen */

    /* ---------------------------------------------------------------- Zwischenhalt Expertenliste: kürzer */
    .dv-page .hs-vgl { padding-top: 56px; }
    .dv-page .hs-duel { margin-top: 22px; gap: 12px; }
    .dv-page .hs-duel__side figcaption { margin-bottom: 8px; }
    .dv-page .hs-duel__side figcaption small { display: none; }
    .dv-page .hs-entry { height: 168px; }
    .dv-page .hs-entry::after { height: 90px; }
    .dv-page .hs-duel__notes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
    .dv-page .hs-duel__notes li { font-size: 13.5px; }
    .dv-page .hs-duel__arrow { width: 38px; height: 38px; box-shadow: 0 0 0 5px var(--bl-sand); }
    .dv-page .hs-card { padding: 16px; gap: 10px; }
    .dv-page .hs-coststrip { margin-top: 18px; }
    .dv-page .hs-source { margin-top: 12px; font-size: 11px; }

    /* ---------------------------------------------------------------- Ausblick: Etappen als kompakte Liste */
    .dv-page .hs-road { padding-bottom: 56px; }
    .dv-page .hs-progress { margin-top: 20px; }
    .dv-page .hs-legs { gap: 12px; margin-top: 14px; }
    .dv-page .hs-leg { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; border-radius: 18px; }
    .dv-page .hs-leg > .hs-tl__meta { grid-column: 2; grid-row: 1; }
    .dv-page .hs-leg > .hs-leg__ico { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 0; width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
    .dv-page .hs-leg > h3 { grid-column: 2; margin-top: 6px; font-size: 19px; }
    .dv-page .hs-leg > p, .dv-page .hs-leg > .hs-flow, .dv-page .hs-leg > .hs-stores, .dv-page .hs-leg > .ap { grid-column: 1 / -1; }
    .dv-page .hs-leg > p { margin-top: 10px; font-size: 14.5px; }

    /* ---------------------------------------------------------------- Kosten, Abschluss */
    .dv-page .dv-cost { padding: 64px 0; }
    .dv-page .dv-cost .bl-head { margin-bottom: 24px; }
    .dv-page .bl-cost__row { gap: 4px 12px; padding: 16px 18px; }
    .dv-page .bl-cost__row h4 { font-size: 16px; }
    .dv-page .bl-cost__row p { font-size: 13px; }
    .dv-page .bl-final { padding: 64px 0; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .dvm-subs { min-height: 0; }
    .dvm-subs__text { font-size: 17px; }
}
@media (max-width: 767px) {
    .dv-page .hs-leg--plan .ap { zoom: .62; }
}
@media (max-width: 560px) {
    .dv-page .dvm-hero-cta { width: 100%; justify-content: center; padding: 18px 20px; text-align: center; }
    .dv-page .bl-cost__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .dv-page .bl-cost__val { text-align: right; font-size: 14px; }
    .dv-page .bl-cost__val small { display: none; }
    .dv-page .bl-cost__val.free::before { display: none; }
}
/* Schmale Handys: Felder so breit wie ihr Inhalt, damit kein Name gekürzt wird („Ausblick“ bei 360 px) */
@media (max-width: 420px) {
    .dvm-bar__inner { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2px; }
    .dvm-bar__item { gap: 4px; padding: 0 5px; font-size: 12px; }
    .dvm-bar__item b { width: 20px; height: 20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .dv-page .dvm-own__window .ls-viewport { transition: none; }
}