/*
 * Hero-Motion – Vorschau: Station 1 mit dem echten Desktop-Hero der Städteseite (station1-real.js, _wrap.php).
 * Die Skins der Startseite greifen über .hm-page (_wrap.php schreibt sie darauf um).
 */

/* Desktop: Hero in 1280 px Breite rendern und auf die Fensterbreite (lite-search.js: 860 px virtuell) verkleinern */
.s1r {
    width: 1280px;
    zoom: calc(860 / 1280);
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
@media (max-width: 767px) {
    .s1r { width: auto; zoom: 1; }
}

/* Überschriften-Regeln der Vorstellungsseite (berater-landing.css) zurücknehmen, wie in hero-motion.css */
:where(.s1r) :is(h1, h2, h3, h4) { font-family: inherit; line-height: inherit; letter-spacing: inherit; }
.s1r 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) { .s1r h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .s1r h1 { font-size: 3.75rem; line-height: 1; } }

/* Ohne Navbar: deren Platz oben (pt-32 / lg:pt-44) einkürzen */
.s1r > section { padding-top: 4.5rem; }
@media (max-width: 767px) { .s1r > section { padding-top: 2rem; } }

/* Getippter Text: echtes Feld zeigt den Wert, die Ebene darüber trägt nur den Cursor an der richtigen Stelle */
.s1r #searchInput { caret-color: transparent; }
.s1r-typed {
    position: absolute; inset: 0; z-index: 11; pointer-events: none;
    display: flex; align-items: center; overflow: hidden; white-space: pre;
    padding: 0 1rem 0 3rem;
    font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: 0.025em;
    color: transparent;
}
.s1r-typed .ls-caret { flex: none; }
.ls.is-typing .s1r-field {
    border-color: var(--lm-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-accent) 20%, transparent) !important;
}

/* „Suchen“ drücken + Ladekreis (Klassen setzt lite-search.js) */
.s1r #searchBtn.is-pressed { transform: scale(.96); filter: brightness(1.08); }
.s1r #searchBtn .ls-go__spin { position: relative; z-index: 10; }

/* „Noch einmal abspielen“: Moos-Pille (Variante A aus design-previews/replay-button/).
   Während die Animation läuft (Knopf disabled, vorstellung.js), dreht sich das Symbol. */
.dv-replay[data-dv-replay="w1"] {
    gap: 14px; margin-top: 26px; padding: 8px 24px 8px 8px; border-radius: 999px;
    background: var(--bl-green); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
    box-shadow: 0 14px 28px -14px rgba(31, 107, 78, .75);
    transition: transform .2s, box-shadow .2s, background-color .2s;
}
.dv-replay[data-dv-replay="w1"]:hover { text-decoration: none; background: var(--bl-green-hover); transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(31, 107, 78, .85); }
.dv-replay[data-dv-replay="w1"]:focus-visible { outline: 3px solid var(--bl-acc); outline-offset: 3px; }
.dv-replay__chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.dv-replay__chip i { font-size: 20px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.dv-replay[data-dv-replay="w1"]:hover .dv-replay__chip i { transform: rotate(-60deg); }
.dv-replay[data-dv-replay="w1"]:disabled { opacity: .85; transform: none; }
.dv-replay[data-dv-replay="w1"]:disabled .dv-replay__chip i { animation: s1r-replay-spin 1s linear infinite; }
@keyframes s1r-replay-spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dv-replay[data-dv-replay="w1"], .dv-replay__chip i { transition: none; }
    .dv-replay[data-dv-replay="w1"]:disabled .dv-replay__chip i { animation: none; }
}

/* Vorzeile „Ein Beispiel:“ über der Überschrift von Station 1 (_wrap.php) */
.dv-st__title .dv-st__pre {
    display: block; margin-bottom: .3em;
    font-size: max(15px, .48em); font-weight: 600; font-style: italic; letter-spacing: 0; line-height: 1.2;
    color: var(--bl-text-3);
}