/**
 * Hero-Flow — scroll-getriebenes Verantwortungs-Diagramm (template-parts/hero-flow.php).
 * Endzustand steht im CSS; hero-flow.js setzt den Startzustand und scrubbt ihn
 * per Scroll-Progress. Ohne JS bleibt alles lesbar sichtbar.
 */

.hero--flow {
    /* Akzenttausch (JK 2026-08-02): Events jetzt BLAU, Digital ORANGE */
    --hf-lb: #8d9cff;
    --hf-jk: #d9a05b;

    /* Geometrie (Logo-SVG viewBox 619×937 → Höhe = Breite × 1.5137):
       --hf-rest ist die Mittellinie: dort sitzt die Logo-Mitte und dorthin —
       und nicht höher — rutschen die Pillen beim Scrollen. Vorher stehen sie
       --hf-gap unter der Logo-Unterkante, der Lift ergibt sich daraus. */
    --hf-logo-w: clamp(173px, 18.9vw, 248px);
    --hf-logo-h: calc(var(--hf-logo-w) * 1.5137);
    --hf-rest: 45svh;
    --hf-gap: clamp(2.75rem, 6.5svh, 4.75rem);
    --hf-rise: calc(var(--hf-logo-h) / 2 + var(--hf-gap));
    /* Höhe der Schriftzug-Zeile samt Abstandsfeld — um so viel ragt das
       Diagramm über die Mittellinie hinaus, die Pillen bleiben nahe der
       Mittellinie. --hf-script = Höhe des „Digital"-Wortes (das höhere der
       beiden, wegen Unterlängen); „Events" wird im selben Duktus skaliert. */
    --hf-script: clamp(64px, 9svh, 84px);
    --hf-top: clamp(150px, 19svh, 176px);

    position: relative;
    padding: 0;
    min-height: 0;
    display: block;
    overflow: clip;
}

.hf-outer {
    /* Scrollweg der Sektion: kurz gehalten — die Animationen laufen zeitbasiert
       weiter, sobald sie ausgelöst sind. Ein längerer Weg fühlte sich wie ein
       Scroll-Hänger an, sobald die Pillen standen (JK 2026-08-01). */
    height: 170svh;
    position: relative;
}

.hf-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
}

/* ── Stage ──────────────────────────────────────────────────────────── */
.hf-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    /* Ruheposition der Pillen = Mittellinie. Die Marken-Zeile darüber ragt um
       --hf-top über sie hinaus — in den Raum, den das Logo nach dem ersten
       Scrollen freigibt. Das Diagramm startet um --hf-rise tiefer (siehe
       .hf-diagram); sichtbar wird es ohnehin erst mit dem ersten Scrollen. */
    padding: calc(var(--hf-rest) - var(--hf-top)) 1.5rem clamp(0.3rem, 0.6svh, 0.5rem);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

/* ── Kopf: Logo ─────────────────────────────────────────────────────
   Absolut positioniert; beim ersten Scrollen blendet es zügig aus, während
   das Diagramm nur ein kleines Stück nachrückt (--hf-rise). */
.hf-head {
    position: absolute;
    /* Logo-Mitte sitzt auf der Mittellinie; z2: die kreisenden Pillen laufen
       auf engen Viewports HINTER dem Logo durch statt darüber */
    top: var(--hf-rest);
    z-index: 2;
    left: 50%;
    display: grid;
    justify-items: center;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center center;
    will-change: transform, opacity;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

/* Beim ersten Scrollen wandert das Logo auf seinen Platz in der Header-Pille.
   Das Ziel misst hero-flow.js und setzt es inline (FLIP); der Wert hier ist
   nur der Fallback ohne Messung. Ausgeblendet wird erst am Ziel — dort
   übernimmt das Logo der Pille, dadurch wirkt es wie ein Übergang. */
.hf-head.is-out {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
    transition:
        opacity 0.26s ease 0.42s,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.7s;
}

.hf-logo {
    width: var(--hf-logo-w);
    height: auto;
    display: block;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Ring-Drag (tap and hold) darf kein Bild-Preview/Drag ausloesen */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Scroll-Hinweis: beim Load direkt unter dem grossen Logo, gleitet mit
   Erscheinen des Kreises (is-mini) unter den Ring; layoutneutral
   (absolute), sonst verschoebe er das Logo-Zentrum und der Ring saesse
   schief. Ausblenden steuert hero-flow.js (is-hidden bei Stufe 2). */
.hf-scroll-hint {
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 18px;
    transform: translateX(-50%);
    color: rgba(245, 245, 245, 0.5);
    transition:
        opacity 0.4s ease,
        top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    animation: hf-hint-bob 2.2s ease-in-out infinite;
}

.hf-head.is-mini .hf-scroll-hint {
    top: 50%;
    margin-top: 292px;
}

.hf-scroll-hint svg {
    width: 24px;
    height: 24px;
    display: block;
}

.hf-scroll-hint.is-hidden {
    opacity: 0;
}

@keyframes hf-hint-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hf-scroll-hint { display: none; }
}

/* Stufe 1: das Logo bleibt mittig stehen und wird 20% kleiner, während die
   Pillen als Kreis um es rotieren — erst Stufe 2 schickt es in den Header. */
.hf-head.is-mini .hf-logo {
    transform: scale(0.62);
}

/* ── Orbit-SVG: gebogene Pillen-Bänder um das Logo (Stufe 1) ────────
   Die Pfade werden einmal gebaut (hero-flow.js); die Drehung ist eine
   vorgefertigte CSS-Animation auf dem Element — läuft im Compositor,
   unabhängig vom Scroll. transform-origin (Ringzentrum in px) setzt JS.
   Unter dem Logo (z-index 2) — die Bänder laufen hinter ihm durch. */
.hf-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: hf-orbit-spin 26s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

.hf-orbit.is-on {
    opacity: 1;
    animation-play-state: running;
}

/* eingefroren beim Auflösen — paused behält den Fortschritt, beim
   Zurückscrollen dreht der Ring nahtlos weiter */
.hf-orbit.is-frozen {
    animation-play-state: paused;
}

@keyframes hf-orbit-spin {
    to { transform: rotate(360deg); }
}

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

/* Ring-Drag: iOS-Systemgesten (Text-Lupe, Long-Press-Callout,
   Doppeltipp-Zoom) duerfen das Halten nicht kapern — Scrollen bleibt
   frei (kein touch-action: none), das steuert hero-flow.js. */
.hf-stage {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Unsichtbare Kreisring-Hitflaeche ueber den Baendern (JS setzt
   Position + clip-path-Ring): Touch dort = sofort drehen, nie Scroll.
   display steuert hero-flow.js — nur solange der Ring steht. */
.hf-orbit-grab {
    position: absolute;
    z-index: 1;
    display: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.hf-orbit text {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: -0.005em;
    fill: rgba(245, 245, 245, 0.92);
}

/* ── Diagramm: Pillen + Linien + Gründer ───────────────────────────── */
.hf-diagram {
    position: relative;
    will-change: transform;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    /* Marken / Linienfeld oben / Pillen / Linienfeld unten / Gründer.
       Das untere Feld ist bewusst großzügig — lange Linien, Karten tief. */
    grid-template-rows: auto minmax(clamp(46px, 7.5svh, 100px), auto) auto minmax(clamp(38px, 6.5svh, 110px), 1fr) auto;
    align-content: center;
    gap: 0;
    /* Startversatz: das Diagramm sitzt --hf-rise tiefer, solange das Logo steht */
    transform: translate3d(0, var(--hf-rise), 0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hf-diagram.is-lifted {
    transform: translate3d(0, 0, 0);
}

/* ── Schriftzüge über den Pillengruppen ─────────────────────────────
   Exakt dasselbe Grid wie .hf-owners (Spalten, Breite, Gap): „Events" und
   „Digital" fluchten dadurch spaltengenau mit den Gründer-Karten —
   symmetrisch zur Seitenmitte (JK 2026-08-01). */
.hf-brands {
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    justify-items: center;
    align-items: end;
}

.hf-brand {
    display: grid;
    justify-items: center;
    text-decoration: none;
    pointer-events: none;
}

.hf-brands.is-in .hf-brand {
    pointer-events: auto;
}

/* Schreib-Effekt: die Wörter erscheinen von links, wie mit dem Stift
   geschrieben (clip-path wandert auf), beim Zurückscrollen radieren sie
   sich rückwärts wieder weg. Die negativen Vertikal-Insets lassen Schwünge
   stehen, die minimal über die Box ragen. */
.hf-brand img {
    height: var(--hf-script);
    width: auto;
    display: block;
    opacity: 0;
    clip-path: inset(-8% 100% -8% 0);
    transition: opacity 0.2s ease 0.25s, clip-path 0.5s ease;
}

/* Am gerenderten Ergebnis vermessen (Canvas-Zeilenprofil): „Digital" braucht
   5,6% mehr Höhe für dieselbe x-Höhe wie „Events" und sitzt dann 1,9% tiefer
   bündig auf der Schriftlinie — das g darf dafür weiter herausragen (JK). */
.hf-brand[data-owner="jk"] img {
    height: calc(var(--hf-script) * 1.056);
    transform: translateY(calc(var(--hf-script) * 0.019));
}

.hf-brands.is-in .hf-brand img {
    opacity: 0.95;
    clip-path: inset(-8% 0 -8% 0);
    transition:
        opacity 0.18s ease 0.35s,
        clip-path 0.85s cubic-bezier(0.4, 0, 0.3, 1) 0.4s;
}

/* „Digital" schreibt kurz nach „Events" */
.hf-brands.is-in .hf-brand[data-owner="jk"] img {
    transition-delay: 0.6s, 0.65s;
}

.hf-brands.is-in .hf-brand:hover img {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Pillen */
.hf-pills {
    grid-row: 3;
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.45rem, 1vw, 0.85rem);
    flex-wrap: nowrap;
}

/* Desktop: die 3er-Gruppen ruecken enger zusammen, dafuer trennt eine
   deutliche Mittelluecke die beiden Bereiche (JK 2026-08-01) */
@media (min-width: 901px) {
    .hf-pills { gap: clamp(0.3rem, 0.6vw, 0.55rem); }
    .hf-pill[data-owner="jk"]:nth-child(4) { margin-left: clamp(1.75rem, 4vw, 3.5rem); }
}

.hf-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.15rem;
    border-radius: 100px;
    border: 1px solid rgba(245, 245, 245, 0.16);
    /* satt-opak (JK 2026-08-01): die Linien zu den GF-Karten dürfen nicht
       durch die Pillen durchscheinen — deshalb auch kein backdrop-blur */
    background: rgba(20, 20, 26, 0.94);
    white-space: nowrap;
    /* transform steuert hero-flow.js (Orbit-Vorstufe → Reihenposition) */
    will-change: transform, opacity;
    opacity: 0;
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s ease,
        background 0.6s ease;
    transition-delay: calc(var(--i) * 90ms), 0s, 0s;
}

/* einmal ausgelöst, läuft die Staffel unabhängig vom Scrolltempo durch */
.hf-pills.is-in .hf-pill {
    opacity: 1;
}

.hf-pill-label {
    font-size: clamp(0.8rem, 1.05vw, 0.95rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(245, 245, 245, 0.9);
}

.hf-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(245, 245, 245, 0.3);
    flex: 0 0 auto;
    transition: background 0.5s ease;
}

/* aktiver Zustand — wird per Scroll-Progress gesetzt */
.hf-pill[data-owner="lb"].is-live {
    border-color: color-mix(in srgb, var(--hf-lb) 55%, transparent);
    background: color-mix(in srgb, var(--hf-lb) 14%, rgba(20, 20, 26, 0.94));
}

.hf-pill[data-owner="jk"].is-live {
    border-color: color-mix(in srgb, var(--hf-jk) 55%, transparent);
    background: color-mix(in srgb, var(--hf-jk) 14%, rgba(20, 20, 26, 0.94));
}

.hf-pill[data-owner="lb"].is-live .hf-pill-dot {
    background: var(--hf-lb);
}

.hf-pill[data-owner="jk"].is-live .hf-pill-dot {
    background: var(--hf-jk);
}

/* Testlauf (JK 2026-08-05): farbige Punkte raus — Pillen-Dots und die
   Dots in den Orbit-Bändern (einzige circles im Orbit-SVG). Regeln oben
   bleiben stehen, damit der Test mit einem Löschen umkehrbar ist. */
.hf-pill-dot,
.hf-orbit circle {
    display: none;
}

/* Linien-Layer über der mittleren Grid-Zeile */
.hf-links {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    /* hero-flow.js blendet den Layer im Ruhezustand aus (inline opacity) */
    transition: opacity 0.35s ease;
}

.hf-path {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.hf-path--lb { stroke: url(#hf-grad-lb); }
.hf-path--jk { stroke: url(#hf-grad-jk); }

.hf-pulse { pointer-events: none; }

/* Gründer-Karten */
.hf-owners {
    grid-row: 5;
    align-self: end;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    justify-items: center;
}

.hf-owner {
    position: relative;
    display: grid;
    /* die eine Spalte darf nie auf max-content (nowrap-Rolle + Bild)
       aufwachsen — sonst ragt der Kopf ins Kartenpadding */
    grid-template-columns: minmax(0, 1fr);
    /* Drei Reihen: Kopf, Aufgaben, Kontakt. Die mittlere nimmt den Ausgleich
       auf, damit die Kontaktzeile in BEIDEN Karten unten auf derselben Linie
       sitzt — sonst haengt sie bei der kuerzeren Liste mitten im Nichts. */
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    justify-items: center;
    gap: 0.3rem;
    /* kompakt gehalten: die Karten müssen komplett unter die Mittellinie
       passen, sonst bleiben die Linien nur noch Stummel */
    --ow-pt: clamp(0.55rem, 1svh, 0.8rem);
    --ow-px: clamp(1rem, 1.8vw, 1.5rem);
    padding: var(--ow-pt) var(--ow-px) clamp(0.5rem, 1svh, 0.75rem);
    border-radius: 18px;
    /* deutlich weißer Rand + kräftiger Blur: die Karten sollen sich klar vom
       bewegten Hero-Hintergrund absetzen (JK 2026-08-01) */
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(18, 18, 24, 0.5);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    width: 100%;
    /* ~20% groesser skaliert; breit genug, dass Name und Bulletpoints
       neben dem 120px-Portrait einzeilig bleiben */
    max-width: 348px;
    text-align: center;
    will-change: transform, opacity;
    /* 0.001 statt 0: haelt den backdrop-blur-Layer ab Load warm — sein
       einmaliger Aufbau verursachte den Erst-Scroll-Ruckler (JK) */
    opacity: 0.001;
    transform: translateY(26px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s ease;
    /* erst anklickbar, wenn die Karte eingeblendet ist */
    pointer-events: none;
}

.hf-owners.is-in .hf-owner {
    opacity: 1;
    transform: none;
}

.hf-owners.is-in .hf-owner[data-owner="jk"] { transition-delay: 130ms, 130ms, 0s; }

.hf-owner.is-live { pointer-events: auto; }

/* Kopfzeile: Textstapel links (Name, Rolle, Leitung), Portrait rechts —
   beide beginnen auf derselben 25px-Linie (= --ow-px vom Kartenrand) */
.hf-owner-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: calc(var(--ow-px) - var(--ow-pt));
}

.hf-owner-headtext {
    display: grid;
    justify-items: start;
    text-align: left;
    gap: 0.3rem;
    min-width: 0;
}

.hf-owner-photo {
    flex: 0 0 auto;
    /* 120px machte den Kopf zur hoechsten Zeile der Karte und liess die
       Aufzaehlung daneben gedraengt wirken (JK 2026-08-06). */
    width: 96px;
    height: 96px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.hf-owner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hf-owner-name,
.hf-owner-role {
    width: 100%;
    text-align: left;
}

.hf-owner-role { white-space: nowrap; }

/* Unter ~400px bleibt neben dem 110px-Foto zu wenig Platz: der nowrap-Text
   lief unter das Foto und stand dort auf hellem Bild (3,07:1). Dort darf er
   umbrechen — ab 400px unveraendert einzeilig. */
@media (max-width: 400px) {
    .hf-owner-role { white-space: normal; }
}

/* (Owner-farbige Rahmen entfielen — die Karten tragen jetzt bewusst einen
   weissen Rand, JK 2026-08-01) */

/* (Kürzel LB/JK entfernt — JK 2026-08-01) */

.hf-owner-name {
    font-size: clamp(1.14rem, 1.56vw, 1.32rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
}

.hf-owner-role {
    font-size: 0.82rem;
    /* 0.45 ergab auf der Karte (#0e0e11 bis #121218) nur 4,25:1.
       0.60 haelt dort 5,9:1 und damit WCAG AA mit Reserve. */
    color: rgba(245, 245, 245, 0.6);
}

/* Aufgaben-Stichpunkte */
.hf-owner-tasks-label {
    width: 100%;
    margin: 0.55rem 0 0.15rem;
    padding: 0.6rem 0 0;
    border-top: 1px solid rgba(245, 245, 245, 0.09);
    text-align: left;
    font-size: 0.86rem;
    width: 100%;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(245, 245, 245, 0.85);
}

.hf-owner-tasks {
    list-style: none;
    /* Beginnt direkt unter dem Kopf; der Ausgleichsraum der Karte liegt
       darunter, damit die Kontaktzeile in beiden Karten auf einer Linie sitzt. */
    align-self: start;
    display: grid;
    /* 0.17rem ergab 2,7px Zeilenabstand — bei sechs Punkten wirkte die Liste
       gequetscht (JK 2026-08-06). Unter der Karte liegen ueber 240px Luft. */
    gap: 0.34rem;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.hf-owner-tasks li {
    position: relative;
    padding-left: 1.05rem;
    font-size: 0.84rem;
    line-height: 1.4;
    white-space: nowrap;
    color: rgba(245, 245, 245, 0.62);
}

.hf-owner-tasks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    /* ganze Pixel: 4.5px-Kreise rastern je nach Subpixel-Lage eckig */
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

.hf-owner[data-owner="lb"] .hf-owner-tasks li::before { background: var(--hf-lb); opacity: 0.85; }
.hf-owner[data-owner="jk"] .hf-owner-tasks li::before { background: var(--hf-jk); opacity: 0.85; }

/* Kontakt */
.hf-owner-contact {
    /* Telefon und Mail linksbuendig in einer Zeile (JK 2026-08-02) */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    gap: 0.15rem 0.55rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(245, 245, 245, 0.09);
    width: 100%;
}

.hf-owner-contact a {
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(245, 245, 245, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hf-owner-contact a:hover { color: #fff; }

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Zwei Spalten nach Zuständigkeit — Gruppen dürfen unterschiedlich groß sein,
       darum feste Spalte pro Owner statt column-flow (sonst entsteht eine 3. Spalte) */
    .hf-pills {
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem clamp(1.5rem, 8vw, 4rem);
        justify-items: center;
        align-content: start;
    }

    .hf-pill[data-owner="lb"] { grid-column: 1; }
    .hf-pill[data-owner="jk"] { grid-column: 2; }

    .hf-pill {
        width: 100%;
        max-width: 190px;
        justify-content: center;
    }

    .hf-diagram {
        grid-template-rows: auto minmax(3rem, auto) auto minmax(3rem, 0.8fr) auto;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    /* Mobil laeuft dieselbe Sticky-Choreografie wie auf Desktop (JK
       2026-08-01): Logo mittig, Pillen kreisen, dann gleiten sie nach unten
       auf ihre Plaetze. Nur die Gruender-Karten passen nicht in 100svh —
       sie ragen unten aus dem Sticky heraus und kommen nach dem Loesen des
       Pins im normalen Scroll ins Bild; hero-flow.js verlaengert .hf-outer
       um genau diesen Ueberhang. */
    .hero--flow {
        --hf-logo-w: clamp(140px, 39.6vw, 194px);
        --hf-rest: 42svh;
        --hf-gap: clamp(2rem, 5svh, 3.25rem);
        --hf-script: clamp(39px, 6svh, 49px);
        --hf-top: clamp(92px, 13svh, 118px);
    }

    /* laengerer Scrollweg: die Kreis-Phase bleibt deutlich laenger im
       Bild als mit den geerbten 170svh (JK 2026-08-01) */
    .hf-outer { height: 230svh; }

    /* Karten-Ueberhang muss sichtbar bleiben */
    .hf-sticky { overflow: visible; }

    .hf-head.is-mini .hf-scroll-hint { margin-top: 184px; }
    .hf-scroll-hint svg { width: 20px; height: 20px; }

    .hf-stage {
        padding-inline: 1rem;
        /* Diagramm haengt oben am Raster; padding-top (rest − top) setzt
           Kreis und Pillen in die Mitte, der Ueberhang geht nur nach unten */
        align-items: start;
    }

    .hf-diagram {
        /* auto statt 100%: das Diagramm waechst mit den Karten — nur so
           kann hero-flow.js den Ueberhang unter dem Sticky messen */
        height: auto;
        grid-template-rows: auto minmax(2.2rem, auto) auto clamp(56px, 9svh, 96px) auto;
    }

    .hf-brands { gap: 0.6rem; }

    /* Pillen nur so breit wie ihr Inhalt — volle Zellenbreite wirkte gequetscht */
    .hf-pill {
        max-width: none;
        justify-self: center;
        padding: 0.48rem 1rem;
        gap: 0.35rem;
    }

    .hf-pill-label { font-size: 0.82rem; }
    .hf-pills { gap: 0.45rem 0.7rem; }

    /* iOS-Performance: backdrop-blur ruckelt beim Scrollen massiv — mobil
       opake Flaechen statt Blur (Pillen sind inzwischen global opak) */
    .hf-owner {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(18, 18, 24, 0.94);
    }

    /* Gründer-Karten: untereinander, schmaler — rechts bleibt Platz für die
       außen herum laufenden Linien zur zweiten Karte */
    .hf-owners {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        width: 100%;
        max-width: none;
        margin-inline: auto;
    }

    .hf-owner {
        --ow-pt: 1.05rem;
        --ow-px: 1rem;
        padding: var(--ow-pt) var(--ow-px) 0.95rem;
        border-radius: 14px;
        gap: 0.2rem;
        max-width: 300px;
    }

    .hf-owner-photo {
        width: 88px;
        height: 88px;
        border-radius: 14px;
    }

    .hf-owner-name { font-size: 1.05rem; }
    .hf-owner-role { font-size: 0.72rem; }

    .hf-owner-tasks-label {
        margin: 0.5rem 0 0.35rem;
        padding-top: 0.5rem;
        font-size: 0.74rem;
    }

    .hf-owner-tasks { gap: 0.24rem; }

    .hf-owner-tasks li {
        font-size: 0.78rem;
        line-height: 1.4;
        padding-left: 0.75rem;
    }

    .hf-owner-tasks li::before { width: 4px; height: 4px; }

    /* Telefon · Mail nebeneinander — spart Höhe, volle Breite reicht dafür */
    .hf-owner-contact {
        gap: 0.2rem 1.1rem;
        margin-top: 0.5rem;
        padding-top: 0.55rem;
    }

    .hf-owner-contact a { font-size: 0.8rem; }
}

/* Flache Laptops: Kopf zurücknehmen, damit der Steckbrief Platz behält */
@media (min-width: 561px) and (max-height: 850px) {
    .hero--flow {
        --hf-logo-w: clamp(151px, 15.3vw, 202px);
        --hf-rest: 46svh;
        --hf-gap: clamp(2.25rem, 5.5svh, 3.5rem);
        --hf-script: clamp(56px, 8svh, 72px);
        --hf-top: clamp(130px, 17svh, 156px);
    }
    .hf-owner-tasks li { font-size: 0.78rem; }
}

@media (min-width: 561px) and (max-height: 760px) {
    .hf-head.is-mini .hf-scroll-hint { margin-top: 238px; }
}

/* Sehr flache Viewports */
@media (max-height: 620px) {
    .hero--flow {
        --hf-logo-w: clamp(122px, 11.7vw, 158px);
        /* sehr flach: die Mittellinie muss weit nach oben, sonst laufen die
           Gründer-Karten unten aus dem Bild */
        --hf-rest: 33svh;
        --hf-gap: clamp(1.25rem, 3svh, 2rem);
        --hf-script: clamp(44px, 7svh, 56px);
        --hf-top: clamp(104px, 15svh, 128px);
    }
}

/* Ohne JS bleibt alles sichtbar (die Startzustände setzt sonst das CSS) */
.no-js .hf-pill, .no-js .hf-owner { opacity: 1; transform: none; }
.no-js .hf-brand { pointer-events: auto; }
.no-js .hf-brand img { opacity: 0.95; clip-path: none; }

/* ── Reduced motion: Endzustand, keine Bewegung ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Kein Lift — dafür sitzt das Logo statisch über den Pillen statt auf der
       Mittellinie, sonst läge es ohne Bewegung genau auf ihnen. Ohne Lift fehlt
       der Platz für das große Logo, daher hier kleiner. */
    .hero--flow {
        --hf-rise: 0px;
        --hf-logo-w: min(clamp(88px, 8.5vw, 124px), 16svh);
        /* mehr Kopfraum: das statische Logo muss über die höhere Marken-Zeile */
        --hf-rest: 62svh;
    }

    .hf-head {
        /* über der Marken-Zeile, die jetzt das Diagramm anführt */
        top: calc(var(--hf-rest) - var(--hf-top) - var(--hf-gap));
        transform: translate3d(-50%, -100%, 0);
    }

    .hf-outer { height: auto; }

    .hf-sticky {
        position: relative;
        height: auto;
        min-height: 100svh;
    }

    .hf-pill, .hf-owner { transform: none !important; opacity: 1 !important; }
    .hf-brand { pointer-events: auto !important; }
    .hf-brand img { opacity: 0.95 !important; clip-path: none !important; transition: none; }
    .hf-diagram { transition: none; }
    .hf-head { opacity: 1 !important; visibility: visible !important; transition: none; }
}