/*
 * Vorschau „Demo-Vorstellung“: Seiten-Styles für A (Rundgang), B (Scroll-Story), C (Kompakt).
 * Baut auf berater-landing.css auf (Tokens --bl-*, Wald & Sand Partner-Edition). Das Suchfenster: lite-search.css.
 */

html { scroll-padding-top: 84px; }
.dv-page main { display: block; }

/* ---------------------------------------------------------------- Navigation */
.dv-nav .bl-nav__inner { justify-content: flex-start; }
.dv-nav .bl-nav__cta { margin-left: auto; }
.dv-nav__tag {
    display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; padding: 5px 10px; border-radius: 7px;
    font-family: var(--bl-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bl-acc-deep); border: 1px solid var(--bl-acc-border-sand); background: var(--bl-acc-soft-sand);
}
.dv-nav__tag i { font-size: 10px; }
.dv-short { display: none; }

/* ---------------------------------------------------------------- Einstieg */
.dv-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center;
}
.dv-hero h1 { margin-top: 22px; }
/* Einstieg A: Zitatblock + Vertrauensleiste statt Untertitel und Kennzahlen */
.dv-hero--a h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.025em; }
.dv-hero__quote { margin: 26px 0 30px; padding-left: 18px; border-left: 3px solid var(--bl-acc); color: #e6e1d4; font-size: 17px; line-height: 1.55; max-width: 520px; }
/* Markenname im Fließtext in Logo-Farben: Grundteil wie Logo-Schrift, „.digital“ im Akzent */
.dv-brand { font-weight: 700; font-size: 1.15em; color: var(--bl-ink); white-space: nowrap; }
.dv-brand__acc { color: var(--bl-green); }
.dv-hero__quote .dv-brand { color: #f6f3ec; }
.dv-hero__quote .dv-brand__acc { color: var(--bl-mint); }
.dv-hero__quote small { display: block; margin-top: 6px; color: #a9b8ad; font-size: 13px; }
.dv-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; color: #b9c5bb; }
.dv-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.dv-hero__trust svg { width: 15px; height: 15px; color: var(--bl-acc); }
.dv-hero--b .dv-hero__grid, .dv-hero--c .dv-hero__grid { grid-template-columns: minmax(0, 1fr); }
.dv-hero--b { padding: 88px 0 104px; }
.dv-hero--b .dv-hero__text { max-width: 900px; margin: 0 auto; text-align: center; }
.dv-hero--b .bl-hero__sub { margin: 0 auto; }
.dv-hero--b .bl-hero__ctas, .dv-hero--b .bl-hero__facts { justify-content: center; }
.dv-hero--c { padding: 60px 0 76px; }
.dv-hero--c .dv-hero__text { max-width: 860px; }

/* Rundgang-Karte (A) */
.dv-map {
    overflow: hidden; border-radius: 20px;
    background: linear-gradient(180deg, var(--bl-ink-3), var(--bl-ink-2));
    border: 1px solid var(--bl-ink-border-strong);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3);
}
.dv-map__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid var(--bl-ink-border); font-family: var(--bl-font-mono); font-size: 12px; color: var(--bl-on-ink-3);
}
.dv-map__title { color: var(--bl-on-ink); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dv-map__body {
    position: relative; aspect-ratio: 420 / 340;
    background-image: linear-gradient(rgba(246, 243, 236, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 243, 236, .04) 1px, transparent 1px);
    background-size: 28px 28px;
}
.dv-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dv-map__river { fill: none; stroke: rgba(125, 238, 194, .13); stroke-width: 20; stroke-linecap: round; }
.dv-map__river-label { fill: rgba(125, 238, 194, .5); font: italic 600 13px var(--bl-font); letter-spacing: .12em; }
.dv-map__route-bg { fill: none; stroke: rgba(242, 181, 68, .16); stroke-width: 12; stroke-linecap: round; }
.dv-map__route { fill: none; stroke: var(--bl-acc); stroke-width: 3.5; stroke-dasharray: 9 9; stroke-linecap: round; animation: dv-march 1.8s linear infinite; }
.dv-map__route--planned { stroke: rgba(246, 243, 236, .4); stroke-dasharray: 1 9; stroke-width: 4; animation: none; }
@keyframes dv-march { to { stroke-dashoffset: -36; } }
.dv-map__stop { position: absolute; display: flex; align-items: center; gap: 10px; color: var(--bl-on-ink); transform: translate(-19px, -50%); }
.dv-map__stop--l { flex-direction: row-reverse; transform: translate(calc(-100% + 19px), -50%); }
.dv-map__stop b {
    flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bl-acc); color: var(--bl-acc-on); font: 800 17px/1 var(--bl-font-head);
    box-shadow: 0 0 0 5px rgba(23, 45, 36, .92), 0 10px 20px -8px rgba(0, 0, 0, .6);
    transition: transform .2s ease;
}
.dv-map__stop span {
    padding: 6px 10px; border-radius: 9px; white-space: nowrap;
    background: rgba(20, 40, 32, .88); border: 1px solid var(--bl-ink-border-strong);
    font-size: 13px; font-weight: 600;
}
.dv-map__stop:hover b, .dv-map__stop:focus-visible b { transform: scale(1.12); }
.dv-map__stop:focus-visible { outline: none; }
.dv-map__stop:focus-visible span { outline: 2px solid var(--bl-acc); outline-offset: 2px; }
.dv-map__stop--you { transform: translate(-23px, -50%); }
.dv-map__stop--you b { width: 46px; height: 46px; font-size: 20px; box-shadow: 0 0 0 5px rgba(23, 45, 36, .92), 0 0 0 11px rgba(242, 181, 68, .22), 0 10px 20px -8px rgba(0, 0, 0, .6); }
.dv-map__stop--you span { border-color: rgba(242, 181, 68, .55); }
.dv-map__stop--you span i { margin-left: 4px; font-size: 11px; color: var(--bl-acc); }
.dv-map__stop--planned b { background: rgba(23, 45, 36, .92); color: var(--bl-on-ink-2); border: 2px dashed rgba(246, 243, 236, .45); }
.dv-map__stop--planned span { color: var(--bl-on-ink-2); }
.dv-map__stop small { margin-left: 6px; font-family: var(--bl-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--bl-acc); }

/* ---------------------------------------------------------------- A: Stationen + Route */
.dv-route { position: relative; }
.dv-route__svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dv-route__line { fill: none; stroke: var(--bl-border-strong); stroke-width: 3; stroke-dasharray: 9 9; stroke-linecap: round; stroke-linejoin: round; }
.dv-route__line--planned { stroke-dasharray: 1 9; stroke-width: 4; }

.dv-st { padding: 104px 0 40px; }
.dv-st__grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 64px; align-items: center; }
.dv-st--flip .dv-st__grid { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); align-items: start; }
.dv-st--flip .dv-st__text { padding-top: 48px; }
.dv-st--flip .dv-st__text { order: 2; }
.dv-st__text { position: relative; z-index: 1; padding-left: 80px; }
.dv-st__visual { position: relative; z-index: 1; min-width: 0; padding-top: 16px; }
.dv-st__head { position: relative; margin-bottom: 18px; }
.dv-num {
    position: absolute; left: -80px; top: -2px; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; background: var(--bl-acc); color: var(--bl-acc-on);
    font: 800 26px/1 var(--bl-font-head);
    box-shadow: 0 0 0 7px var(--bl-sand), 0 14px 24px -12px rgba(52, 44, 28, .6);
}
.dv-num--you { box-shadow: 0 0 0 7px var(--bl-ink), 0 0 0 14px rgba(242, 181, 68, .2), 0 14px 30px -10px rgba(0, 0, 0, .6); }
.dv-num--planned { background: var(--bl-sand); color: var(--bl-text-3); border: 2.5px dashed var(--bl-border-strong); }
.dv-st__kick, .dv-step .dv-st__kick {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--bl-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-acc-deep);
}
.dv-st__title { margin-top: 10px; font-size: clamp(30px, 3.3vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.07; }
.dv-st__lead { font-size: 17px; line-height: 1.65; color: var(--bl-text-2); max-width: 520px; }

/* Station 3: dunkles Kapitel „Ihre Karte“ */
.dv-st--you {
    margin-top: 72px; padding: 112px 0;
    background: radial-gradient(900px 500px at 85% 10%, rgba(110, 231, 183, .08), transparent 60%),
                linear-gradient(165deg, var(--bl-hero-deep) 0%, var(--bl-ink-2) 55%, var(--bl-ink) 100%);
    color: var(--bl-on-ink);
}
.dv-st--you .dv-st__kick { color: var(--bl-acc); }
.dv-st--you .dv-st__lead { color: var(--bl-on-ink-2); }
.dv-st__grid--you { align-items: start; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.dv-st__visual--sticky { position: sticky; top: 104px; }
.dv-you-notes { display: grid; gap: 10px; margin-top: 18px; max-width: 520px; }

/* Notizzettel */
.dv-note {
    display: flex; align-items: flex-start; gap: 10px; max-width: 440px; margin-top: 22px; padding: 13px 16px;
    border-radius: 4px 14px 14px 14px; background: #f1e5c9; border: 1px solid #dcc48d; color: #5b4521;
    font-size: 14.5px; line-height: 1.5; box-shadow: 0 14px 24px -18px rgba(52, 44, 28, .55); transform: rotate(-1.2deg);
}
.dv-note i { margin-top: 3px; color: var(--bl-acc-deep); }
.dv-note--ink { margin-top: 0; transform: none; background: rgba(246, 243, 236, .06); border-color: var(--bl-ink-border-strong); color: var(--bl-on-ink-2); box-shadow: none; }
.dv-note--ink i { color: var(--bl-acc); }
.dv-note--ink b { color: var(--bl-on-ink); }
.dv-replay {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 2px; border: 0; background: none;
    font-size: 14px; font-weight: 600; color: var(--bl-green-text);
}
.dv-replay:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-replay:disabled { opacity: .5; cursor: wait; }

/* ---------------------------------------------------------------- Hinweise ①②③ */
.dv-legend { display: grid; gap: 12px; margin-top: 26px; }
.dv-legend__item {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px;
    border-radius: 16px; background: var(--bl-card); border: 1px solid var(--bl-border); cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dv-legend__item:hover, .dv-legend__item.is-on { border-color: var(--bl-acc-border-sand); box-shadow: 0 0 0 3px var(--bl-acc-soft), 0 14px 30px -22px var(--bl-shadow); transform: translateX(3px); }
.dv-legend__item:focus-visible { outline: 2px solid var(--bl-acc-deep); outline-offset: 2px; }
.dv-legend__n {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #e5b04a; color: #1c1a15; font: 800 17px/1 var(--bl-font-head);
    border: 3px solid var(--bl-card-elev); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
}
.dv-legend__item b { display: block; font-family: var(--bl-font-head); font-size: 17px; font-weight: 700; }
.dv-legend__item p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--bl-text-2); }
.dv-mini {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px;
    border: 1.5px solid var(--bl-green); background: transparent; color: var(--bl-green-text); font-size: 13px; font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}
.dv-mini:hover { background: var(--bl-green); color: #f3f8f4; }
.dv-mini:disabled { opacity: .6; cursor: wait; }
.dv-mini i { transition: transform .5s ease; }
.dv-mini:hover i { transform: rotate(180deg); }
.dv-mini--lg { margin-top: 20px; padding: 11px 16px; font-size: 14px; }
/* Kurztext, wo die schmale Spalte den langen Text umbrechen würde (gemessen bis 1133 px) */
.dv-mini__short { display: none; }
@media (min-width: 1101px) and (max-width: 1180px) {
    .dv-mini__long { display: none; }
    .dv-mini__short { display: inline; }
}

/* ---------------------------------------------------------------- Eingabe „Ihre Karte“ */
.dv-builder {
    display: grid; gap: 16px; margin-top: 26px; padding: 22px; border-radius: 20px;
    background: var(--bl-card); border: 1px solid var(--bl-border); color: var(--bl-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 50px -30px rgba(0, 0, 0, .45);
}
.dv-builder__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-field { display: grid; gap: 7px; min-width: 0; }
.dv-field__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-text-3); }
.dv-field input[type="text"] {
    width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; outline: none;
    border: 1.5px solid var(--bl-border); background: var(--bl-card-elev);
    font: 600 15px/1 var(--bl-font); color: var(--bl-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dv-field input[type="text"]::placeholder { color: var(--bl-text-4); font-weight: 500; }
.dv-field input[type="text"]:focus { border-color: var(--bl-green); box-shadow: 0 0 0 4px rgba(31, 107, 78, .15); }
.dv-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-logo {
    position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; overflow: hidden;
    border-radius: 50%; border: 2px solid var(--bl-border); background: var(--bl-card-elev); color: var(--bl-text-3); cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dv-logo img { width: 100%; height: 100%; object-fit: cover; }
.dv-logo:hover { transform: translateY(-2px); }
.dv-logo.is-active { border-color: var(--bl-green); box-shadow: 0 0 0 3px var(--bl-card), 0 0 0 5px var(--bl-green); }
.dv-logo--upload { border-style: dashed; }
.dv-logo--upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: var(--bl-card-sunken); border: 1px solid var(--bl-border); }
.dv-seg button { display: grid; justify-items: center; gap: 2px; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--bl-text-2); transition: background-color .2s ease, color .2s ease; }
.dv-seg b { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; }
.dv-seg small { font-size: 11.5px; color: var(--bl-text-3); }
.dv-seg button:hover { background: rgba(28, 26, 21, .05); }
.dv-seg button[aria-checked="true"] { background: var(--bl-green); color: #f3f8f4; box-shadow: 0 8px 18px -10px rgba(31, 107, 78, .8); }
.dv-seg button[aria-checked="true"] small { color: rgba(243, 248, 244, .75); }
.dv-seg button[data-dv-variant-btn="premium"][aria-checked="true"] { background: linear-gradient(135deg, #f6cf6a, #e5b04a); color: #1c1a15; box-shadow: 0 8px 18px -10px rgba(168, 105, 29, .9); }
.dv-seg button[data-dv-variant-btn="premium"][aria-checked="true"] small { color: rgba(28, 26, 21, .7); }
.dv-builder.is-busy .dv-seg { opacity: .65; pointer-events: none; }
.dv-builder__place { justify-self: start; }
.dv-builder__hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bl-text-3); }
.dv-builder__hint i { font-size: 11px; }

/* C: Eingabe als Leiste über dem Fenster */
.dv-builder--bar {
    position: sticky; top: 84px; z-index: 20;
    grid-template-columns: minmax(0, 1.5fr) auto minmax(230px, .8fr); align-items: end; gap: 12px 24px; margin: 30px 0 44px; padding: 18px 22px;
}
.dv-builder--bar .dv-builder__hint { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- B: Scroll-Story */
.dv-story { padding: 24px 0 64px; }
.dv-story__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.dv-story__steps { position: relative; }
.dv-story__steps::before { content: ''; position: absolute; left: 21px; top: 8vh; bottom: 22vh; border-left: 3px dashed var(--bl-border-strong); }
.dv-step { position: relative; padding: 24vh 0 24vh 72px; opacity: .35; transition: opacity .4s ease; }
.dv-step:first-child { padding-top: 8vh; }
.dv-step:last-child { padding-bottom: 22vh; }
.dv-step.is-active { opacity: 1; }
.dv-step__num {
    position: absolute; left: 0; top: calc(24vh - 6px); width: 45px; height: 45px; border-radius: 50%;
    display: grid; place-items: center; background: var(--bl-sand); border: 2.5px solid var(--bl-border-strong);
    font: 800 18px/1 var(--bl-font-head); color: var(--bl-text-3); box-shadow: 0 0 0 6px var(--bl-sand);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.dv-step:first-child .dv-step__num { top: calc(8vh - 6px); }
.dv-step.is-active .dv-step__num { background: var(--bl-acc); border-color: var(--bl-acc); color: var(--bl-acc-on); transform: scale(1.12); }
.dv-step__title { margin-top: 10px; font-size: clamp(28px, 2.9vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.dv-step__text { margin-top: 14px; max-width: 470px; font-size: 17px; line-height: 1.65; color: var(--bl-text-2); }
.dv-story__stage { position: relative; height: 100%; }
.dv-story__sticky { position: sticky; top: 100px; padding-top: 16px; }
[data-dv-window="story"] { --ls-height: min(calc(100vh - 260px), 760px); }
.dv-story__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dv-story__dots button {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bl-border-strong); background: var(--bl-card);
    font: 700 13px/1 var(--bl-font-mono); color: var(--bl-text-3); transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dv-story__dots button.is-active { background: var(--bl-acc); border-color: var(--bl-acc); color: var(--bl-acc-on); }

/* ---------------------------------------------------------------- C: Kompakt */
.dv-try { padding: 84px 0 72px; }
.dv-try__head { max-width: 760px; }
.dv-try__head h2 { margin: 14px 0 16px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; }
.dv-try__head p { font-size: 17px; line-height: 1.65; color: var(--bl-text-2); }
.dv-try__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.dv-try__window { min-width: 0; padding-top: 16px; }
.dv-legend--side { position: sticky; top: 264px; margin-top: 16px; }

/* ---------------------------------------------------------------- Marktplatz (dezent, Demnächst) */
.dv-soon { padding: 72px 0; }
.dv-soon.dv-st { padding: 112px 0 40px; }
.dv-soon__inner {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 40px;
    border-radius: 24px; border: 2px dashed var(--bl-border-strong); background: color-mix(in srgb, var(--bl-sand-alt) 75%, transparent);
}
.dv-st--planned .dv-soon__inner { position: relative; z-index: 1; background: transparent; }
.dv-st--planned .dv-soon__text { padding-left: 80px; }
.dv-soon__title { margin-top: 12px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.dv-st--planned .dv-st__title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; color: var(--bl-text); }
.dv-st--planned .dv-st__kick { color: var(--bl-text-3); }
.dv-soon__lead { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--bl-text-2); }
.dv-soon__pill.bl-pill--on-sand { margin: 0 6px 0 0; vertical-align: 1px; }
.dv-soon__small { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--bl-text-3); }
.dv-soon__flow { display: grid; gap: 12px; }
.dv-soon__flow li {
    position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px;
    border-radius: 14px; background: var(--bl-card); border: 1px dashed var(--bl-border-strong);
}
.dv-soon__flow li + li::before { content: ''; position: absolute; left: 37px; top: -14px; height: 13px; border-left: 2px dotted var(--bl-border-strong); }
.dv-soon__ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bl-card-sunken); color: var(--bl-text-3); }
.dv-soon__flow b { font-size: 15px; }
.dv-soon__flow li > span:last-child { font-size: 13px; color: var(--bl-text-3); }

/* ---------------------------------------------------------------- Kosten, Abschluss, Fuß */
.dv-cost .bl-head { margin-bottom: 44px; }
.bl-final p.dv-final__for { margin: 16px auto -6px; font-size: 16px; font-weight: 600; color: var(--bl-acc); }
.bl-final p.dv-final__for b { color: var(--bl-on-ink); }
.dv-footer { padding: 40px 0 34px; }
.dv-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.dv-footer__logo { height: 26px; width: auto; color: var(--bl-on-ink); }
.dv-footer__logo .bl-logo-accent { fill: var(--bl-mint); }
.dv-footer p { max-width: 440px; font-size: 13px; color: #7a9a89; }
.dv-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #7a9a89; }
.dv-footer__links a { color: #a9c4b5; }
.dv-footer__links a:hover { color: var(--bl-mint); }

/* Hinweis „Zu Ihrer Karte“ (unten mittig, wenn die Karte gerade nicht im Blick ist) */
.dv-jump {
    position: fixed; left: 50%; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 18px; border: 0; border-radius: 999px; background: var(--bl-acc); color: var(--bl-acc-on);
    font: 700 14px/1 var(--bl-font); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55);
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s ease, transform .3s ease;
}
.dv-jump.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------------------------------------------------------------- Einblenden */
.dv-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.dv-reveal.is-in { opacity: 1; transform: none; }
.dv-reveal[data-delay="1"] { transition-delay: .1s; }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 1100px) {
    .dv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .dv-map { max-width: 620px; }
    .dv-st__grid, .dv-st--flip .dv-st__grid, .dv-st__grid--you { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .dv-st--flip .dv-st__text { order: 0; }
    .dv-st__visual--sticky { position: relative; top: 0; }
    .dv-builder--bar { position: static; grid-template-columns: minmax(0, 1fr); }
    .dv-try__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .dv-legend--side { position: static; margin-top: 0; }
    .dv-soon__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px; }
}
@media (max-width: 900px) {
    .dv-nav .bl-nav__cta .bl-btn { display: inline-flex; padding: 9px 12px; font-size: 13px; }
    .dv-nav .bl-nav__burger { display: none; }
    .dv-nav__tag { display: none; }

    /* B mobil: Fenster klebt oben, die Schritte laufen darunter durch */
    .dv-story { padding-top: 8px; }
    .dv-story__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dv-story__stage {
        order: -1; position: sticky; top: 72px; z-index: 5; height: auto; padding: 16px 0 6px;
        background: linear-gradient(var(--bl-sand) 88%, rgba(231, 226, 214, 0));
    }
    .dv-story__sticky { position: static; padding-top: 0; }
    [data-dv-window="story"] { --ls-height: 44vh; }
    .dv-story__dots { margin-top: 8px; gap: 6px; }
    .dv-story__dots button { width: 26px; height: 26px; font-size: 11px; }
    .dv-story__steps::before { left: 17px; top: 4vh; bottom: 18vh; }
    .dv-step { padding: 10vh 0 22vh 54px; }
    .dv-step:first-child { padding-top: 4vh; }
    .dv-step:last-child { padding-bottom: 18vh; }
    .dv-step__num { top: calc(10vh - 4px); width: 36px; height: 36px; font-size: 15px; }
    .dv-step:first-child .dv-step__num { top: calc(4vh - 4px); }
    .dv-step__title { font-size: 26px; }
    .dv-step__text { font-size: 15.5px; }
    .dv-step .dv-builder { margin-left: -54px; }
}
@media (max-width: 560px) {
    .dv-nav .bl-nav__inner { height: 64px; gap: 12px; }
    .dv-nav .bl-nav__logo svg { height: 26px; }
    .dv-long { display: none; }
    .dv-short { display: inline; }
    .dv-story__stage { top: 64px; }
    .dv-hero h1 { font-size: 33px; }
    .dv-hero--b { padding: 56px 0 72px; }
    .dv-hero--b .dv-hero__text { text-align: left; }
    .dv-hero--b .bl-hero__ctas, .dv-hero--b .bl-hero__facts { justify-content: start; }
    .dv-map__stop b { width: 32px; height: 32px; font-size: 15px; }
    .dv-map__stop span { padding: 4px 8px; font-size: 11.5px; }
    .dv-map__stop--you b { width: 38px; height: 38px; font-size: 17px; }
    .dv-st { padding: 72px 0 24px; }
    .dv-st--you { margin-top: 48px; padding: 72px 0; }
    .dv-st__text, .dv-st--planned .dv-soon__text { padding-left: 58px; }
    .dv-num { left: -58px; width: 42px; height: 42px; font-size: 20px; box-shadow: 0 0 0 5px var(--bl-sand), 0 10px 18px -10px rgba(52, 44, 28, .6); }
    .dv-num--you { box-shadow: 0 0 0 5px var(--bl-ink), 0 0 0 10px rgba(242, 181, 68, .2); }
    .dv-st__title { font-size: 29px; }
    .dv-st__lead { font-size: 16px; }
    .dv-st__text .dv-builder, .dv-st__text .dv-legend, .dv-st__text .dv-you-notes { margin-left: -58px; }
    .dv-builder { padding: 16px; }
    .dv-builder__fields { grid-template-columns: minmax(0, 1fr); }
    .dv-soon__inner { padding: 22px 18px; }
    .dv-st--planned .dv-soon__inner { padding-left: 18px; }
    .dv-try { padding: 60px 0 56px; }
    .dv-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .dv-reveal { opacity: 1; transform: none; transition: none; }
    .dv-map__route { animation: none; }
    .dv-step { transition: none; }
}

/* Hero: einziger CTA, größer und präsenter */
.bl-btn.dv-btn--hero { padding: 22px 40px; font-size: 18px; border-radius: 16px; gap: 12px; box-shadow: 0 18px 40px -14px var(--bl-acc), 0 0 0 1px rgba(255,255,255,.08) inset; }
.bl-btn.dv-btn--hero svg { width: 20px; height: 20px; transition: transform .2s ease; }
.bl-btn.dv-btn--hero:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px var(--bl-acc), 0 0 0 1px rgba(255,255,255,.12) inset; }
.bl-btn.dv-btn--hero:hover svg { transform: translateY(2px); }
@media (max-width: 640px) { .bl-btn.dv-btn--hero { padding: 20px 28px; font-size: 17px; } }