/*
 * Hero-Motion – neue Sektionen (Vorschau): Nähe entscheidet, Expertenliste, Ausblick (Station 4).
 * Baut auf berater-landing.css (--bl-*) und vorschau-vorstellung/vorstellung.css (dv-st, dv-num, dv-reveal) auf.
 * Markup: sections/sections.php, Ablauf: sections.js.
 */

/* ---------------------------------------------------------------- gemeinsam */
.hs-soft { color: var(--bl-text-3); }
.dv-num.hs-stop {
    background: var(--bl-card-elev); color: var(--bl-green); border: 2.5px solid var(--bl-green);
    font-size: 20px;
}
.dv-num.hs-stop svg { width: 26px; height: 26px; }
/* Stationen 1–3: Bernstein-Ring löst sich vom Kreis (Variante A), gleicher Takt; nicht bei Zwischenstopps und Ausblick */
.dv-num:not(.hs-stop):not(.dv-num--planned)::before {
    content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--bl-acc);
    animation: dv-num-ring 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
/* Station 3 ist größer: kleinere Vergrößerung, damit der Ring dieselbe Strecke läuft wie bei 1 und 2 */
.dv-num--you::before { inset: -14px !important; --dv-ring-scale: 1.375; }
@keyframes dv-num-ring {
    0% { transform: scale(1); opacity: .85; }
    100% { transform: scale(var(--dv-ring-scale, 1.45)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dv-num:not(.hs-stop):not(.dv-num--planned)::before { animation: none; opacity: .5; transform: scale(1.12); }
}
/* Sektionen ohne Spaltenraster: Inhalt rückt wie .dv-st__text neben die Routenlinie */
.hs-vgl__intro, .hs-pair, .hs-matrix, .hs-duel, .hs-coststrip, .hs-source,
.hs-road__head, .hs-progress, .hs-legs, .hs-road__grid { position: relative; z-index: 1; margin-left: 80px; }
.hs-vgl__intro, .hs-road__head { max-width: 760px; }

/* ---------------------------------------------------------------- 1) Nähe entscheidet */
.hs-facts { display: grid; gap: 14px; margin-top: 26px; max-width: 520px; }
.hs-facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.hs-facts__ico {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(31, 107, 78, .1); color: var(--bl-green); font-size: 15px;
}
.hs-facts b { display: block; font-family: var(--bl-font-head); font-size: 16.5px; font-weight: 700; }
.hs-facts p { margin-top: 2px; font-size: 14.5px; line-height: 1.55; color: var(--bl-text-2); }

.hs-rank {
    margin: 0; overflow: hidden; border-radius: 20px;
    background: var(--bl-card); border: 1px solid var(--bl-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 70px -40px rgba(52, 44, 28, .55);
}
.hs-rank__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid var(--bl-border); font-family: var(--bl-font-mono); font-size: 12px; color: var(--bl-text-3);
}
.hs-rank__title { display: inline-flex; align-items: center; gap: 8px; color: var(--bl-text); font-weight: 600; letter-spacing: .04em; }
.hs-rank__title i { color: var(--bl-green); }
.hs-rank__meta { padding: 4px 9px; border-radius: 999px; background: rgba(31, 107, 78, .1); color: var(--bl-green-text); }
.hs-rank__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px 16px;
    font-size: 14px; color: var(--bl-text-2);
}
.hs-rank__foot b { color: var(--bl-acc-deep); }
.hs-rank__foot .dv-mini { margin-top: 0; flex: none; }

/* Punkte (Lineal und Radar) */
.hs-dot {
    position: absolute; z-index: 2; display: grid; justify-items: center; gap: 4px;
    transform: translate(-50%, -50%); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}
.hs-dot img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bl-card-elev);
    border: 3px solid var(--bl-card-elev); box-shadow: 0 0 0 1.5px var(--bl-border-strong), 0 10px 18px -10px rgba(0, 0, 0, .5);
}
.hs-dot small { font: 600 11px/1 var(--bl-font-mono); color: var(--bl-text-3); white-space: nowrap; }
.hs-dot--new img { box-shadow: 0 0 0 2.5px var(--bl-acc), 0 0 0 7px rgba(242, 181, 68, .22), 0 12px 22px -10px rgba(0, 0, 0, .55); }
.hs-dot--new small { color: var(--bl-acc-deep); }

/* A: Lineal */
.hs-ruler { position: relative; padding: 18px 34px 8px 52px; }
.hs-ruler__lane-label {
    position: absolute; left: 14px; top: 34px; padding: 3px 7px; border-radius: 6px;
    font: 700 10px/1 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--bl-acc-deep); background: var(--bl-acc-soft-sand); border: 1px solid var(--bl-acc-border-sand);
    opacity: 0; transition: opacity .4s ease;
}
.hs-rank.is-dropped .hs-ruler__lane-label { opacity: 1; }
.hs-ruler__track { position: relative; height: 150px; }
.hs-ruler__track::before {
    content: ''; position: absolute; left: 0; right: -12px; top: 96px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--bl-green) 0%, rgba(31, 107, 78, .55) 45%, var(--bl-border) 100%);
}
.hs-ruler__home {
    position: absolute; left: 0; top: 98px; z-index: 3; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--bl-green); color: #f3f8f4; font-size: 14px; box-shadow: 0 0 0 4px var(--bl-card), 0 10px 18px -10px rgba(0, 0, 0, .6);
}
.hs-ruler__tick { position: absolute; top: 130px; transform: translateX(-50%); font: 500 10.5px/1 var(--bl-font-mono); color: var(--bl-text-4); white-space: nowrap; }
.hs-ruler__tick i { position: absolute; left: 50%; top: -30px; width: 1px; height: 8px; background: var(--bl-border-strong); }
.hs-ruler__tick:first-of-type { visibility: hidden; }
.hs-ruler .hs-dot { top: 98px; }
.hs-ruler .hs-dot small { position: absolute; top: 52px; }
.hs-ruler .hs-dot img { transform: translateY(0); }
/* Das neue Büro wartet über der Achse und fällt in die Spur „Neu“ */
.hs-ruler .hs-dot--new { top: 40px; opacity: 0; transform: translate(-50%, -120%); }
.hs-ruler .hs-dot--new small { position: static; order: -1; }
.hs-ruler .hs-dot--new::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 34px;
    border-left: 2px dashed var(--bl-acc); transform: scaleY(0); transform-origin: top; transition: transform .4s ease .55s;
}
.hs-rank.is-dropped .hs-ruler .hs-dot--new { opacity: 1; transform: translate(-50%, -50%); }
.hs-rank.is-dropped .hs-ruler .hs-dot--new::after { transform: scaleY(1); }

/* B: Radar (dunkles Fenster wie die Rundgang-Karte) */
.hs-near--b .hs-rank {
    background: linear-gradient(180deg, var(--bl-ink-3), var(--bl-ink-2)); border-color: 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); color: var(--bl-on-ink);
}
.hs-near--b .hs-rank__head { border-color: var(--bl-ink-border); color: var(--bl-on-ink-3); }
.hs-near--b .hs-rank__title { color: var(--bl-on-ink); }
.hs-near--b .hs-rank__title i { color: var(--bl-mint); }
.hs-near--b .hs-rank__meta { background: var(--bl-mint-soft); color: var(--bl-mint); }
.hs-near--b .hs-rank__foot { color: var(--bl-on-ink-2); }
.hs-near--b .hs-rank__foot b { color: var(--bl-acc); }
.hs-near--b .dv-mini { border-color: var(--bl-mint); color: var(--bl-mint); }
.hs-near--b .dv-mini:hover { background: var(--bl-mint); color: var(--bl-ink); }
.hs-radar {
    position: relative; aspect-ratio: 400 / 260;
    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;
}
.hs-radar__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hs-radar__river { fill: none; stroke: rgba(125, 238, 194, .13); stroke-width: 18; stroke-linecap: round; }
.hs-radar__river-label { fill: rgba(125, 238, 194, .5); font: italic 600 12px var(--bl-font); letter-spacing: .12em; }
.hs-radar__ring { fill: none; stroke: rgba(246, 243, 236, .16); stroke-width: 1.2; stroke-dasharray: 3 5; }
.hs-radar__ring-label { fill: rgba(246, 243, 236, .4); font: 500 9.5px var(--bl-font-mono); }
.hs-radar__sweep { fill: rgba(125, 238, 194, .06); stroke: none; transform-origin: 200px 130px; transform: scale(0); opacity: 0; }
.hs-rank.is-dropped .hs-radar__sweep { animation: hs-sweep 1.2s ease-out; }
@keyframes hs-sweep { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.hs-radar__home {
    position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--bl-acc); color: var(--bl-acc-on); font-size: 14px;
    box-shadow: 0 0 0 5px rgba(23, 45, 36, .9), 0 0 0 11px rgba(242, 181, 68, .18);
}
.hs-radar .hs-dot img { width: 38px; height: 38px; border-color: var(--bl-ink-2); box-shadow: 0 0 0 1.5px rgba(246, 243, 236, .35), 0 10px 18px -8px rgba(0, 0, 0, .7); }
.hs-radar .hs-dot--new { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.hs-radar .hs-dot--new img { box-shadow: 0 0 0 2.5px var(--bl-acc), 0 0 0 8px rgba(242, 181, 68, .25); }
.hs-rank.is-dropped .hs-radar .hs-dot--new { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hs-rank.is-dropped .hs-radar .hs-dot--new::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--bl-acc);
    animation: hs-ping 1.6s ease-out 2;
}
@keyframes hs-ping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* Trefferliste: Zeilen liegen absolut, --pos verschiebt sie (weiches Umsortieren) */
.hs-list { --row: 54px; --gap: 6px; position: relative; height: calc(5 * var(--row) + 4 * var(--gap)); margin: 4px 18px 0; }
.hs-row {
    position: absolute; left: 0; right: 0; top: 0; height: var(--row);
    display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 0 14px 0 10px;
    border-radius: 12px; background: var(--bl-card-elev); border: 1px solid var(--bl-border);
    transform: translateY(calc(var(--pos, 0) * (var(--row) + var(--gap))));
    transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, box-shadow .3s ease, border-color .3s ease;
}
.hs-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hs-row__rank { font: 800 16px/1 var(--bl-font-head); color: var(--bl-text-3); text-align: center; }
.hs-row__who { min-width: 0; display: grid; }
.hs-row__who b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-row__who small { font-size: 12px; color: var(--bl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-row__since { font-size: 12px; color: var(--bl-text-4); white-space: nowrap; }
.hs-row__km { font: 700 13.5px/1 var(--bl-font-mono); color: var(--bl-green-text); white-space: nowrap; }
.hs-row--new { opacity: 0; --pos: 4; }
.hs-rank.is-sorted .hs-row--new {
    opacity: 1; border-color: var(--bl-acc-border-sand); background: var(--bl-acc-soft-sand);
    box-shadow: 0 0 0 3px var(--bl-acc-soft), 0 14px 26px -18px rgba(154, 101, 18, .7);
}
.hs-rank.is-sorted .hs-row--new .hs-row__rank, .hs-rank.is-sorted .hs-row--new .hs-row__since { color: var(--bl-acc-deep); font-weight: 700; }
.hs-near--b .hs-row { background: rgba(246, 243, 236, .05); border-color: var(--bl-ink-border); }
.hs-near--b .hs-row__rank { color: var(--bl-on-ink-3); }
.hs-near--b .hs-row__who small, .hs-near--b .hs-row__since { color: var(--bl-on-ink-3); }
.hs-near--b .hs-row__km { color: var(--bl-mint); }
.hs-near--b .hs-rank.is-sorted .hs-row--new { background: rgba(242, 181, 68, .12); border-color: rgba(242, 181, 68, .5); box-shadow: none; }
.hs-near--b .hs-rank.is-sorted .hs-row--new .hs-row__rank, .hs-near--b .hs-rank.is-sorted .hs-row--new .hs-row__since { color: var(--bl-acc); }

/* ---------------------------------------------------------------- 2) Expertenliste */
.hs-vgl { padding-bottom: 24px; }
.hs-vgl em { font-style: normal; font-weight: 700; color: var(--bl-text); }
.hs-yes, .hs-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.hs-yes { background: var(--bl-green); color: #f3f8f4; }
.hs-no { background: var(--bl-card-sunken); color: var(--bl-text-4); border: 1px solid var(--bl-border); }
.hs-yes svg, .hs-no svg { width: 14px; height: 14px; }

/* A: Zwei Teile */
.hs-pair { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; margin-top: 40px; }
.hs-pair__card { position: relative; padding: 28px 28px 24px; border-radius: 22px; }
.hs-pair__card h3 { margin-top: 14px; font: 800 26px/1.1 var(--bl-font-head); letter-spacing: -.01em; }
.hs-pair__card ul { display: grid; gap: 10px; margin-top: 18px; }
.hs-pair__card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.hs-pair__card li svg { width: 16px; height: 16px; margin-top: 3px; }
.hs-pair__tag { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hs-pair__foot { margin-top: 20px; padding-top: 14px; font: 600 13px/1.4 var(--bl-font-mono); }
.hs-pair__card--eee { background: var(--bl-card-sunken); border: 1px solid var(--bl-border); color: var(--bl-text-2); }
.hs-pair__card--eee .hs-pair__tag, .hs-pair__card--eee li svg { color: var(--bl-text-3); }
.hs-pair__card--eee h3 { color: var(--bl-text); }
.hs-pair__card--eee .hs-pair__foot { border-top: 1px dashed var(--bl-border-strong); color: var(--bl-text-3); }
.hs-pair__card--us {
    transform: translateY(-10px); color: var(--bl-on-ink-2);
    background: radial-gradient(520px 260px at 90% 0%, rgba(110, 231, 183, .12), transparent 60%), linear-gradient(160deg, var(--bl-hero-deep), var(--bl-ink-2));
    border: 1px solid var(--bl-ink-border-strong); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7);
}
.hs-pair__card--us h3 { color: var(--bl-on-ink); }
.hs-pair__card--us .hs-pair__tag { color: var(--bl-mint); }
.hs-pair__card--us li svg { color: var(--bl-acc); }
.hs-pair__card--us .hs-pair__foot { border-top: 1px solid var(--bl-ink-border-strong); color: var(--bl-acc); }
.hs-pair__plus {
    z-index: 2; justify-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bl-acc); color: var(--bl-acc-on); font: 800 28px/1 var(--bl-font-head);
    box-shadow: 0 0 0 7px var(--bl-sand), 0 12px 22px -10px rgba(52, 44, 28, .6); margin: 0 -14px;
}

.hs-matrix { margin-top: 34px; border-radius: 18px; overflow: hidden; border: 1px solid var(--bl-border); background: var(--bl-card); }
.hs-matrix__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
.hs-matrix__row > span { display: flex; align-items: center; gap: 10px; padding: 15px 20px; font-size: 14.5px; line-height: 1.45; color: var(--bl-text-2); }
.hs-matrix__row + .hs-matrix__row > span { border-top: 1px solid var(--bl-border); }
.hs-matrix__row > span[role="rowheader"] { font-weight: 700; color: var(--bl-text); }
.hs-matrix__row--head > span { padding-top: 13px; padding-bottom: 13px; font: 600 11.5px/1.2 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bl-text-3); }
.hs-matrix__us { background: rgba(31, 107, 78, .07); color: var(--bl-text) !important; font-weight: 600; }
.hs-matrix__row--head .hs-matrix__us { background: var(--bl-green); color: #f3f8f4 !important; }
.hs-source { margin-top: 18px; max-width: 900px; font-size: 12px; line-height: 1.55; color: var(--bl-text-4); }

/* B: Treffer neben Treffer */
.hs-duel { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; margin-top: 40px; }
.hs-duel__side { margin: 0; min-width: 0; }
.hs-duel__side figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hs-duel__label { font: 700 16px/1.2 var(--bl-font-head); }
.hs-duel__side figcaption small { font: 500 11px/1 var(--bl-font-mono); color: var(--bl-text-4); }
.hs-duel__arrow { align-self: center; justify-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bl-acc); color: var(--bl-acc-on); box-shadow: 0 0 0 7px var(--bl-sand); }
.hs-entry {
    position: relative; display: grid; gap: 4px; height: 330px; overflow: hidden; padding: 20px 22px;
    border-radius: 6px; background: #fff; border: 1px solid var(--bl-border);
    font: 13px/1.5 Arial, Helvetica, sans-serif; color: #444;
}
.hs-entry::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
.hs-entry__name { font-size: 14px; letter-spacing: .04em; color: #222; }
.hs-entry__sub { margin-top: 6px; }
.hs-entry__list { margin-top: 6px; padding-left: 16px; list-style: square; color: #555; }
.hs-duel__notes { display: grid; gap: 8px; margin-top: 14px; }
.hs-duel__notes li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--bl-text-3); }
.hs-duel__notes svg { width: 15px; height: 15px; color: var(--bl-text-4); }
.hs-duel__notes--us li { color: var(--bl-text); font-weight: 600; }
.hs-duel__notes--us b {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--bl-acc); color: var(--bl-acc-on); font: 800 12px/1 var(--bl-font-head);
}
.hs-card {
    position: relative; display: grid; gap: 14px; min-height: 330px; align-content: start; padding: 22px;
    border-radius: 18px; background: var(--bl-card-elev); border: 1px solid var(--bl-border);
    box-shadow: 0 30px 60px -36px rgba(52, 44, 28, .6);
}
.hs-card__top { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.hs-card__top img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bl-card); box-shadow: 0 0 0 1.5px var(--bl-border-strong); }
.hs-card__top div { display: grid; gap: 3px; min-width: 0; }
.hs-card__top b { font: 700 18px/1.2 var(--bl-font-head); }
.hs-card__top span { font-size: 13px; color: var(--bl-text-3); }
.hs-card__km { position: relative; display: inline-flex !important; align-items: center; gap: 6px; color: var(--bl-green-text) !important; font-weight: 600; }
.hs-card p { font-size: 14px; line-height: 1.55; color: var(--bl-text-2); }
.hs-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-card__tags span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(31, 107, 78, .09); color: var(--bl-green-text); }
.hs-card__cta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.hs-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 11px; font-size: 14px; font-weight: 700; background: var(--bl-card-sunken); color: var(--bl-text); }
.hs-card__btn--call { background: var(--bl-green); color: #f3f8f4; }
.hs-callout {
    position: absolute; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bl-acc); color: var(--bl-acc-on); font: 800 12px/1 var(--bl-font-head);
    box-shadow: 0 0 0 3px var(--bl-card-elev), 0 6px 12px -6px rgba(0, 0, 0, .5);
}
.hs-callout--photo { left: -6px; top: -6px; }
.hs-callout--km { position: relative; display: inline-grid; margin-left: 4px; width: 20px; height: 20px; font-size: 11px; }
.hs-callout--cta { right: -8px; top: -10px; }
.is-in .hs-callout { animation: hs-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.is-in .hs-callout--km { animation-delay: .25s; }
.is-in .hs-callout--cta { animation-delay: .5s; }
@keyframes hs-pop { from { transform: scale(0); } to { transform: scale(1); } }

.hs-coststrip {
    display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; margin-top: 30px;
    padding: 18px 22px; border-radius: 18px; background: var(--bl-card); border: 1px solid var(--bl-border);
}
.hs-coststrip > div { display: grid; gap: 2px; }
.hs-coststrip span { font: 600 11.5px/1 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bl-text-3); }
.hs-coststrip b { font: 800 34px/1.1 var(--bl-font-head); color: var(--bl-text-2); }
.hs-coststrip small { font-size: 13px; color: var(--bl-text-3); }
.hs-coststrip__us b { color: var(--bl-green-text); }
.hs-coststrip__plus { justify-self: center; font: 800 28px/1 var(--bl-font-head); color: var(--bl-acc-deep); }

/* ---------------------------------------------------------------- 3) Ausblick (Station 4) */
.hs-road.dv-st { padding: 112px 0 48px; }
.hs-road__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; margin-left: 0; }
.hs-road__text { padding-left: 80px; }
.hs-road__visual { position: sticky; top: 104px; display: grid; justify-items: center; }
.hs-road .dv-st__title { color: var(--bl-text); }

.hs-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
    font: 600 11px/1 var(--bl-font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.hs-pill--live { background: rgba(31, 107, 78, .12); color: var(--bl-green-text); border: 1px solid rgba(31, 107, 78, .3); }
.hs-pill--live i { width: 7px; height: 7px; border-radius: 50%; background: var(--bl-green); animation: bl-pulse 2s infinite; }
.hs-pill--soon { background: var(--bl-acc-soft-sand); color: var(--bl-acc-deep); border: 1px solid var(--bl-acc-border-sand); }
.hs-pill--plan { background: var(--bl-ink-2); color: var(--bl-on-ink); border: 1px solid var(--bl-ink-2); }
.hs-tl__meta { display: flex; align-items: center; gap: 10px; }
.hs-tl__when { font: 800 13px/1 var(--bl-font-head); letter-spacing: .02em; color: var(--bl-text-3); }

/* A: Zeitleiste */
.hs-tl { position: relative; display: grid; gap: 18px; margin-top: 30px; margin-left: -80px; }
.hs-tl::before {
    content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px;
    background: linear-gradient(var(--bl-green) 0 30%, transparent 30%) top / 3px 100% no-repeat;
    border-left: 3px dotted var(--bl-border-strong);
}
.hs-tl__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; }
.hs-tl__dot {
    position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 20px;
    box-shadow: 0 0 0 7px var(--bl-sand);
}
.hs-tl__item--live .hs-tl__dot { background: var(--bl-green); color: #f3f8f4; }
.hs-tl__item--soon .hs-tl__dot { background: var(--bl-acc); color: var(--bl-acc-on); }
.hs-tl__item--plan .hs-tl__dot { background: var(--bl-ink-2); color: var(--bl-acc); }
.hs-tl__body { padding: 18px 22px; border-radius: 18px; background: var(--bl-card); border: 1px solid var(--bl-border); }
.hs-tl__item--soon .hs-tl__body { border-style: dashed; border-color: var(--bl-acc-border-sand); }
.hs-tl__item--plan .hs-tl__body { border-style: dashed; border-color: var(--bl-border-strong); background: transparent; }
.hs-tl__body h3, .hs-leg h3 { margin-top: 10px; font: 800 21px/1.2 var(--bl-font-head); letter-spacing: -.01em; color: var(--bl-text); }
.hs-tl__body p, .hs-leg p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--bl-text-2); }
.hs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.hs-flow li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: var(--bl-card-elev); border: 1px solid var(--bl-border); font-size: 13px; font-weight: 600; color: var(--bl-text-2); }
.hs-flow li i { color: var(--bl-acc-deep); }
.hs-flow li + li::before { content: '→'; margin: 0 4px 0 -2px; color: var(--bl-text-4); font-weight: 400; }

/* B: Etappen */
.hs-progress { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 34px; height: 8px; }
.hs-progress__seg { border-radius: 8px; }
.hs-progress__seg--live { background: var(--bl-green); }
.hs-progress__seg--soon { background: repeating-linear-gradient(-45deg, var(--bl-acc) 0 8px, #f6cf6a 8px 16px); background-size: 200% 100%; animation: hs-stripes 3s linear infinite; }
.hs-progress__seg--plan { background: radial-gradient(circle, var(--bl-border-strong) 2px, transparent 2.5px) 0 50% / 12px 8px repeat-x; }
@keyframes hs-stripes { to { background-position: -45px 0; } }
.hs-legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.hs-leg { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: var(--bl-card); border: 1px solid var(--bl-border); }
.hs-leg__ico { margin-top: 18px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; }
.hs-leg--live .hs-leg__ico { background: var(--bl-green); color: #f3f8f4; }
.hs-leg--soon { border-style: dashed; border-color: var(--bl-acc-border-sand); }
.hs-leg--soon .hs-leg__ico { background: var(--bl-acc); color: var(--bl-acc-on); }
.hs-leg--plan {
    overflow: hidden; color: var(--bl-on-ink-2); border-color: var(--bl-ink-border-strong);
    background: radial-gradient(420px 300px at 80% 0%, rgba(110, 231, 183, .12), transparent 60%), linear-gradient(165deg, var(--bl-hero-deep), var(--bl-ink));
}
.hs-leg--plan .hs-leg__ico { background: rgba(246, 243, 236, .08); color: var(--bl-acc); border: 1px solid var(--bl-ink-border-strong); }
.hs-leg--plan h3 { color: var(--bl-on-ink); }
.hs-leg--plan p, .hs-leg--plan .hs-tl__when { color: var(--bl-on-ink-2); }
.hs-leg--plan .hs-pill--plan { background: var(--bl-acc); color: var(--bl-acc-on); border-color: var(--bl-acc); }

/* ---------------------------------------------------------------- Varianten-Umschalter (nur Vorschau) */
.hs-switch {
    position: fixed; left: 16px; bottom: 16px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    max-width: calc(100vw - 32px); padding: 9px 12px; border-radius: 14px;
    background: rgba(20, 40, 32, .94); color: var(--bl-on-ink-2); font-size: 12px;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); border: 1px solid var(--bl-ink-border-strong);
}
.hs-switch__title { font: 700 11px/1 var(--bl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bl-acc); }
.hs-switch__group { display: inline-flex; align-items: center; gap: 4px; }
.hs-switch__group > span { margin-right: 2px; color: var(--bl-on-ink-3); }
.hs-switch a { padding: 5px 8px; border-radius: 8px; color: var(--bl-on-ink); font-weight: 700; }
.hs-switch a small { font-weight: 500; color: var(--bl-on-ink-3); }
.hs-switch a:hover { background: rgba(246, 243, 236, .08); }
.hs-switch a[aria-current] { background: var(--bl-acc); color: var(--bl-acc-on); }
.hs-switch a[aria-current] small { color: rgba(28, 26, 21, .7); }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 1100px) {
    .hs-road__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hs-road__visual { position: relative; top: 0; }
    .hs-legs { grid-template-columns: minmax(0, 1fr); }
    .hs-duel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .hs-duel__arrow { transform: rotate(90deg); }
}
@media (max-width: 900px) {
    .hs-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hs-pair__plus { margin: -14px auto; }
    .hs-pair__card--us { transform: none; }
    .hs-matrix__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hs-matrix__row > span[role="rowheader"] { grid-column: 1 / -1; padding-bottom: 4px; }
    .hs-matrix__row > span[role="cell"] { border-top: 0 !important; padding-top: 6px; }
    .hs-matrix__row--head > span:first-child { display: none; }
    .hs-coststrip { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .hs-coststrip__plus { justify-self: start; }
    .hs-switch { gap: 4px 10px; }
    .hs-switch a small { display: none; }
}
@media (max-width: 560px) {
    .hs-vgl__intro, .hs-pair, .hs-matrix, .hs-duel, .hs-coststrip, .hs-source,
    .hs-road__head, .hs-progress, .hs-legs { margin-left: 58px; }
    .hs-pair, .hs-matrix, .hs-duel, .hs-coststrip, .hs-source, .hs-progress, .hs-legs { margin-left: 0; }
    .hs-road__text { padding-left: 58px; }
    .hs-tl { margin-left: -58px; }
    .hs-tl::before { left: 21px; }
    .hs-tl__item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
    .hs-tl__dot { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
    .dv-num.hs-stop svg { width: 20px; height: 20px; }
    .dv-num.hs-stop { font-size: 16px; }
    .dv-num:not(.hs-stop):not(.dv-num--planned)::before { inset: -5px; }
    .dv-num--you::before { inset: -10px !important; --dv-ring-scale: 1.38; }
    .hs-facts { margin-left: -58px; }
    .hs-radar .hs-dot img { width: 30px; height: 30px; border-width: 2px; }
    .hs-radar__home { width: 28px; height: 28px; font-size: 12px; }
    .hs-ruler { padding: 14px 22px 4px 40px; }
    .hs-ruler__lane-label { left: 8px; }
    .hs-dot img { width: 36px; height: 36px; }
    .hs-list { --row: 50px; margin: 4px 10px 0; }
    .hs-row { grid-template-columns: 20px 32px minmax(0, 1fr) auto; gap: 9px; padding: 0 10px 0 6px; }
    .hs-row img { width: 32px; height: 32px; }
    .hs-row__since { display: none; }
    .hs-rank__foot { flex-direction: column; align-items: flex-start; }
    .hs-rank__meta { display: none; }
    .hs-matrix__row > span { padding: 12px 14px; font-size: 13.5px; }
    .hs-entry { height: 280px; }
    .hs-pair__card { padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-dot, .hs-row, .hs-ruler .hs-dot--new::after { transition: none; }
    .hs-progress__seg--soon, .hs-pill--live i, .is-in .hs-callout, .hs-rank.is-dropped .hs-radar__sweep,
    .hs-rank.is-dropped .hs-radar .hs-dot--new::before { animation: none; }
}