/*
 * Hero-Motion (Vorschau): Bühne, Effekte und Kapitelleiste der Motion Graphic im Hero der Demo-Vorstellung.
 * Die Szene selbst ist echtes Startseiten-Markup (.hm-page) mit den umgeschriebenen Skins aus _wrap.php.
 * Farben der Bühne aus berater-landing.css (--bl-*), der Szene aus wald-sand-tokens.css (--lm-*).
 */

/* ---------------------------------------------------------------- Platz im Hero: an die Bildschirmgröße angepasst
   Desktop (ab 1101 px): Hero füllt genau den Bildschirm unter der Navbar, Inhalt vertikal mittig.
   Das Browserfenster ist durch Spaltenbreite UND Bildschirmhöhe begrenzt, damit es samt Kapitelleiste immer ganz
   sichtbar ist. Breite aus Höhe: verfügbare Höhe minus Rahmen (--hm-chrome: Adressleiste, Kapitel, Fußzeile)
   mal Seitenverhältnis der Szene (--hm-vw/--hm-vh setzt hero-motion.js, 1280×900 bzw. mobil 390×660). */
.dv-hero--a {
    --hm-nav: calc(var(--hm-nav-h, 72px) + 1px); /* Navbar-Höhe + 1 px Rand (siehe „Navigationsleiste“) */
    --hm-pad-t: 48px;
    --hm-pad-b: 72px;
    --hm-chrome: 150px; /* inkl. Reserve, falls die Fußzeile bei schmaler Bühne zweizeilig wird */
}
.hm {
    --hm-fit-h: calc(100svh - var(--hm-nav, 73px) - var(--hm-pad-t, 48px) - var(--hm-pad-b, 72px) - var(--hm-chrome, 132px));
    position: relative; width: 100%; justify-self: end;
    max-width: max(300px, calc(var(--hm-fit-h) * var(--hm-vw, 1280) / var(--hm-vh, 900)));
}

/* Hero-Zitat auf /demo: Schrift 20 % größer (Basis 17/13 px aus vorstellung.css), Breite mitgezogen */
.dv-hero--a .dv-hero__quote { font-size: 20.4px; max-width: 624px; }
.dv-hero--a .dv-hero__quote small { font-size: 15.6px; }

@media (min-width: 1101px) {
    .dv-hero--a {
        --hm-pad-t: clamp(24px, 6svh, 80px);
        --hm-pad-b: clamp(28px, 7svh, 96px);
        display: flex; align-items: center;
        min-height: calc(100svh - var(--hm-nav));
        padding: var(--hm-pad-t) 0 var(--hm-pad-b);
    }
    .dv-hero--a .dv-hero__grid { gap: clamp(40px, 4.5vw, 96px); }
    /* Textspalte wächst und schrumpft mit der Höhe mit (bei 1440×900 wie bisher ≈ 68 px) */
    .dv-hero--a h1 { margin-top: clamp(12px, 2.4svh, 26px); font-size: clamp(34px, min(4.7vw, 8.4svh), 84px); }
    .dv-hero--a .dv-hero__quote { margin: clamp(14px, 2.9svh, 30px) 0 clamp(16px, 3.3svh, 34px); font-size: clamp(18px, 2.28svh, 21.6px); }
    .dv-hero--a .dv-hero__trust { margin-top: clamp(14px, 3.1svh, 32px); padding-top: clamp(12px, 2.2svh, 22px); }
}
/* Breite Bildschirme: Container breiter, die Bühne bekommt den größeren Teil */
@media (min-width: 1680px) {
    .dv-hero--a .bl-container { max-width: 1720px; }
    .dv-hero--a .dv-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
@media (min-width: 2200px) {
    .dv-hero--a .bl-container { max-width: 2120px; }
    .dv-hero--a h1 { font-size: clamp(34px, min(4.7vw, 8.4svh), 100px); }
}
@media (max-width: 1100px) {
    /* Gestapelt: Bühne höchstens so hoch, dass sie beim Hinscrollen ganz in den Bildschirm passt */
    .dv-hero--a { --hm-pad-t: 16px; --hm-pad-b: 16px; }
    .hm { max-width: min(620px, max(280px, calc(var(--hm-fit-h) * var(--hm-vw, 1280) / var(--hm-vh, 900)))); justify-self: start; }
}
@media (max-width: 767px) {
    .dv-hero--a { --hm-chrome: 196px; } /* Kapitel zweizeilig, Fußzeile untereinander */
    .hm { justify-self: center; }
}

/* ---------------------------------------------------------------- Navigationsleiste: passt sich an wie der Hero
   Eine Höhe für Navbar und Hero (--hm-nav-h): ab 1101 px wächst sie mit der Bildschirmhöhe (bei 900 px wie bisher 72 px),
   Logo, Ortsschild und Button wachsen mit. Containerbreiten wie im Hero, damit Logo und Button mit der Hero-Kante fluchten. */
:root { --hm-nav-h: 72px; }
html { scroll-padding-top: calc(var(--hm-nav-h) + 12px); }
.dv-page--a .dv-nav .bl-nav__inner { height: var(--hm-nav-h); }
.dv-page--a .dv-nav .bl-nav__logo svg { height: calc(var(--hm-nav-h) * .47); }
@media (min-width: 1101px) {
    :root { --hm-nav-h: clamp(60px, 8svh, 92px); }
    .dv-page--a .dv-nav__tag { font-size: clamp(10px, calc(var(--hm-nav-h) * .153), 13px); padding: calc(var(--hm-nav-h) * .07) calc(var(--hm-nav-h) * .14); }
    .dv-page--a .dv-nav .bl-nav__cta .bl-btn {
        font-size: clamp(13px, calc(var(--hm-nav-h) * .195), 17px);
        padding: calc(var(--hm-nav-h) * .139) calc(var(--hm-nav-h) * .222);
    }
}
@media (min-width: 1680px) { .dv-page--a .dv-nav .bl-container { max-width: 1720px; } }
@media (min-width: 2200px) { .dv-page--a .dv-nav .bl-container { max-width: 2120px; } }
@media (max-width: 560px) {
    :root { --hm-nav-h: clamp(56px, 7.9svh, 64px); }
    .dv-page--a .dv-nav .bl-nav__logo svg { height: calc(var(--hm-nav-h) * .41); }
}

/* ---------------------------------------------------------------- Bühne: Browserfenster */
.hm-stage { position: relative; }
.hm-screen {
    position: relative; overflow: hidden; border-radius: 18px;
    background: #efeadf;
    border: 1px solid rgba(246, 243, 236, .22);
    box-shadow: 0 46px 90px -46px rgba(0, 0, 0, .75), 0 0 0 6px rgba(246, 243, 236, .07);
    user-select: none;
}
.hm-bar {
    display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px;
    background: #efeadf; border-bottom: 1px solid #d6cdba;
    font: 500 12px/1 var(--bl-font-mono); color: #6a655a;
}
.hm-bar__dots { display: flex; gap: 6px; flex: none; }
.hm-bar__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d2cab9; }
.hm-bar__url {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 11px;
    border-radius: 7px; background: #fbf9f4; border: 1px solid #d6cdba;
    white-space: nowrap; overflow: hidden;
}
.hm-bar__url i { font-size: 10px; color: #1f6b4e; }
.hm-bar__url [data-hm-url] { overflow: hidden; text-overflow: ellipsis; transition: opacity .25s ease; }
.hm-bar__url [data-hm-url].is-swap { opacity: 0; }

.hm-vp {
    position: relative; overflow: hidden;
    aspect-ratio: var(--hm-vw, 1280) / var(--hm-vh, 900);
    background: #0f3628;
}
.hm-world {
    position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0;
    width: calc(var(--hm-vw, 1280) * 1px); height: calc(var(--hm-vh, 900) * 1px);
    background: var(--lm-bg, #e7e2d6);
}
.hm-scroll { position: absolute; left: 0; top: 0; width: 100%; }

/* Szene: Grundwerte wie auf der echten Seite (Tailwind-Preflight + body der Startseite) */
.hm-world { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.hm-page {
    position: relative; width: 100%;
    color: var(--lm-text);
    background: var(--lm-bg);
}

/* Die Szene steht im Hero der Vorstellungsseite: deren Regeln für Überschriften zurücknehmen.
   - h1–h4 aus berater-landing.css → wie Tailwind-Preflight erben (Tailwind-Klassen gewinnen weiterhin)
   - .bl-hero h1 / .dv-hero h1 → Werte der Klassen im echten Hero (text-4xl md:text-5xl lg:text-6xl font-extrabold
     tracking-tight mb-5); unter 768 px gelten danach die Werte aus search-mobile.css (höhere Spezifität) */
:where(.hm-world) :is(h1, h2, h3, h4) { font-family: inherit; line-height: inherit; letter-spacing: inherit; }
.bl-hero .hm-page h1 { margin: 0 0 1.25rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; letter-spacing: -0.025em; }
@media (min-width: 768px) { .bl-hero .hm-page h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .bl-hero .hm-page h1 { font-size: 3.75rem; line-height: 1; } }

/* Navbar: in der Szene oben fest, nicht am Browserfenster */
.hm-world .nv { position: absolute; z-index: 40; }
.hm-world .nv .nv-brand svg { display: block; }

/* Fokus, Hover, Druck – die echte Seite macht das per :focus-within/:hover */
.hm-page .hm-focus { border-color: var(--lm-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-accent) 22%, transparent) !important; }
.hm-page #searchBtn, .hm-page #searchInlineSubmit { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, box-shadow .22s ease; }
.hm-page #searchBtn.hm-hover { transform: translateY(-4px); }
.hm-page #searchBtn.hm-hover > div:first-child { transform: translateY(0); }
.hm-page #searchBtn.hm-press, .hm-page #searchInlineSubmit.hm-press { transform: translateY(0) scale(.96); }
.hm-page #searchInput { caret-color: transparent; }
.hm-page .toggle-card-btn { transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s ease; }
.hm-page .toggle-card-btn.hm-press { transform: scale(.96); }
.hm-page [data-card-contact].hm-hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 35%, transparent); }

/* Platzhalter „Ihr Profil“ (Optik aus lite-search.css .ls-slot, dort hängen die Farben an .ls) */
.hm { --ls-amber: #c9832b; --ls-gold: #e5b04a; --ls-ink: #172d24; }
.hm-slot-wrap { overflow: hidden; }

/* Eingabe-Cursor (Caret) im Suchfeld */
.hm-caret {
    position: absolute; z-index: 12; top: 50%; width: 2px; height: 22px; margin-top: -11px;
    background: var(--lm-accent); border-radius: 1px; pointer-events: none;
    animation: hm-blink 1s steps(1) infinite; display: none;
}
.hm-caret.is-on { display: block; }
.hm-caret.is-typing { animation: none; }
@keyframes hm-blink { 50% { opacity: 0; } }
.hm-measure { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; }

/* Karten und Kopf beim Erscheinen */
.hm .hm-enter { animation: hm-card-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--hm-i, 0) * 110ms); }
@keyframes hm-card-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hm-page #plzFeedback.hm-pop { animation: hm-pop .35s ease-out both; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.hm-page #searchSuggestions.hm-pop { animation: hm-drop .26s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top left; }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Mauszeiger */
.hm-cursor {
    position: absolute; left: 0; top: 0; z-index: 60; width: 24px; height: 24px;
    transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.hm-cursor.is-on { opacity: 1; }
.hm-cursor svg { display: block; width: 24px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: transform .12s ease; transform-origin: 5px 3px; }
.hm-cursor.is-down svg { transform: scale(.86); }
.hm-ripple {
    position: absolute; left: 5px; top: 3px; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%; border: 2px solid rgba(242, 181, 68, .95); background: rgba(242, 181, 68, .18);
    opacity: 0; transform: scale(.2); pointer-events: none;
}
.hm-ripple.is-on { animation: hm-ripple .5s ease-out; }
@keyframes hm-ripple { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.4); } }

/* ---------------------------------------------------------------- Effekt-Ebene (über der Szene) */
.hm-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hm-fade { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #0f3628; opacity: 0; }

/* A Kamerafahrt: leichte Vignette, solange die Kamera nah dran ist */
.hm-vig { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 65% at 50% 46%, transparent 55%, rgba(8, 26, 19, .42) 100%); }

/* B Lupe: Szene abdunkeln, vergrößerte Karte mit dem Suchfeld */
.hm-dim { position: absolute; inset: 0; opacity: 0; background: rgba(8, 26, 19, .52); backdrop-filter: blur(3px) saturate(.85); -webkit-backdrop-filter: blur(3px) saturate(.85); }
.hm-lens { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-family: 'Inter', sans-serif; color: #1c1a15; }
.hm-lens__card {
    position: relative; padding: 14px; border-radius: 22px;
    background: rgba(246, 243, 236, var(--hm-card, 0));
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, calc(var(--hm-card, 0) * .7)), 0 0 0 1px rgba(246, 243, 236, calc(var(--hm-card, 0) * .6));
}
.hm-lens__label { display: block; margin: 0 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a655a; line-height: 15px; }
.hm-lens__field {
    position: relative; display: flex; align-items: center; height: 62px; padding: 0 16px 0 48px;
    border-radius: 16px; background: #fbf9f4; border: 1.5px solid #1f6b4e;
    box-shadow: 0 0 0 4px rgba(31, 107, 78, .2);
    font-size: 18px; font-weight: 700; letter-spacing: .025em; white-space: nowrap;
}
.hm-lens__field > i { position: absolute; left: 20px; color: #2e8b64; }
.hm-lens__ph { color: #8a8478; font-weight: 700; }
.hm-lens__field.has-text .hm-lens__ph { display: none; }
.hm-lens__field .hm-caret { position: relative; top: auto; margin: 0 0 0 1px; display: block; }
.hm-lens__sugg { display: none; margin-top: 8px; padding: 6px; border-radius: 16px; background: #fbf9f4; border: 1px solid #d6cdba; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); }
.hm-lens__sugg.is-on { display: block; animation: hm-drop .26s cubic-bezier(.2, .8, .2, 1) both; }
.hm-sugg { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background-color .2s ease; }
.hm-sugg.is-active { background: #e4efe8; }
.hm-sugg__ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #ece7dc; color: #6a655a; font-size: 12px; }
.hm-sugg__txt { flex: 1; min-width: 0; line-height: 1.3; }
.hm-sugg__txt b { display: block; font-size: 14px; }
.hm-sugg__txt small { display: block; font-size: 12px; color: #6a655a; }
.hm-sugg__badge { flex: none; padding: 2px 8px; border-radius: 999px; background: #ece7dc; color: #6a655a; font-size: 10px; font-weight: 700; }

/* C Schnitt: Blitz beim Bildwechsel */
.hm-flash { position: absolute; inset: 0; opacity: 0; background: #f6f3ec; mix-blend-mode: soft-light; }

/* ---------------------------------------------------------------- Pause/Play */
.hm-play {
    position: absolute; right: 14px; bottom: 14px; z-index: 10;
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    border: 1px solid rgba(246, 243, 236, .35); background: rgba(15, 44, 33, .78); color: #f6f3ec;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
    opacity: .82; transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.hm-play--replay { right: auto; left: 14px; }
.hm-play i { font-size: 13px; }
.hm-play:hover, .hm-play:focus-visible { opacity: 1; transform: scale(1.06); background: rgba(15, 44, 33, .95); }
.hm-play:focus-visible { outline: 2px solid var(--bl-acc); outline-offset: 3px; }

/* Pause: auch CSS-Animationen der Szene anhalten */
.hm.is-paused .hm-screen *, .hm.is-paused .hm-screen *::before, .hm.is-paused .hm-screen *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- Kapitelleiste */
/* Spaltenzahl nach der Breite der Graphic (.hm), nicht des Fensters: vier Felder erst, wenn alle Texte ganz passen
   (längstes Feld „Ausblick 2027“ gemessen ≈ 144 px → 4 × 144 + 3 × 8 = 600 px) */
.hm { container-type: inline-size; }
.hm-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
@container (min-width: 610px) {
    .hm-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hm-ch {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 9px 11px; border-radius: 12px;
    background: rgba(20, 40, 32, .55); border: 1px solid var(--bl-ink-border);
    color: var(--bl-on-ink-2); font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.hm-ch > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-ch b {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(246, 243, 236, .1); color: var(--bl-on-ink-2); font: 800 12px/1 var(--bl-font-head);
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.hm-ch__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--bl-acc); transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
.hm-ch.is-on { color: var(--bl-on-ink); border-color: rgba(242, 181, 68, .5); background: rgba(20, 40, 32, .8); }
.hm-ch.is-on b, .hm-ch.is-done b { background: var(--bl-acc); color: var(--bl-acc-on); }
.hm-ch.is-on b { box-shadow: 0 0 0 4px rgba(242, 181, 68, .2); }
.hm-ch.is-done { color: var(--bl-on-ink); }
.hm-ch--you span i { margin-left: 3px; font-size: 10px; color: var(--bl-acc); }
.hm-ch--planned b { background: transparent; border: 1.5px dashed rgba(246, 243, 236, .45); }
.hm-ch small { margin-left: 4px; font-family: var(--bl-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bl-acc); }

.hm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 0 2px; }
.hm-note, .hm-meta { font-family: var(--bl-font-mono); font-size: 11px; letter-spacing: .02em; color: var(--bl-on-ink-3); }
.hm-note i { margin-right: 5px; font-size: 10px; }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 767px) {
    .hm-screen { border-radius: 16px; }
    .hm-bar { height: 32px; padding: 0 10px; }
    .hm-bar__dots { display: none; }
    .hm-bar__url { font-size: 11px; }
    .hm-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hm-play { right: 10px; bottom: 10px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-caret { animation: none; }
}