/* ==========================================================================
   Bernd Fuchs — befuchs.com | Redesign 2026
   Schrift: Inter (variabel, 100–900, mit optischer Groesse) — eine Familie
   fuer alles, Hierarchie ueber Schnitt, Groesse und Laufweite.
   Lokal gehostet (SIL Open Font License) — keine Anfragen an Google.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../font/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent: #C40153;
    --accent-dark: #9d0143;
    --accent-on-dark: #ff5c9a;
    --ink: #17161c;
    --ink-soft: #55535c;
    --paper: #f5f4f2;
    --stone: #e6e5e3;            /* entspricht dem Hintergrund des Portraits */
    --navy: #1e2659;             /* das Blau des Hemds, etwas vertieft (Hero im Hochformat → Leitsatz) */
    --white: #ffffff;
    --line: #dbd9d5;
    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: var(--sans);      /* Headlines: gleiche Familie, fett und eng gesetzt */
    --header-h: 72px;
    --maxw: 1180px;
    --gutter: clamp(20px, 4vw, 40px);
    --radius: 20px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --wm: 5.22;   /* Breite der Wortmarke "Bernd Fuchs" in em (gemessen) */
    --svh: 1vh;   /* 1 % der Bildschirmhoehe; wird unten auf svh gestellt, wo verfuegbar */
    --ease-curtain: cubic-bezier(.76, 0, .24, 1);
}
@supports (height: 1svh) {
    :root { --svh: 1svh; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 8px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    overflow-x: clip;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0 0 .5em;
    color: var(--ink);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Akzentwoerter werden ueber Farbe hervorgehoben, nicht ueber Kursive */
em { font-style: normal; }

p { margin: 0 0 1.1em; text-wrap: pretty; }

em.accent, .accent { color: var(--accent); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 16px;
}
.kicker::before {
    content: "";
    flex: none;
    width: 28px;
    height: 1px;
    background: currentColor;
}
/* Lange Komposita ("Führungskräfteentwicklung") passen sonst nicht auf kleine Displays */
@media (max-width: 420px) {
    .kicker { gap: 10px; letter-spacing: .08em; overflow-wrap: anywhere; }
    .kicker::before { width: 16px; }
}

.icon { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    max-width: 100%;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(23, 22, 28, .18);
    color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 480px) {
    .btn-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
}

/* Milchglas-Hintergrund liegt auf einem Pseudo-Element, damit das
   Fullscreen-Menue (position: fixed) nicht im Header "eingesperrt" wird. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(245, 244, 242, .84);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transition: opacity .3s ease;
}
.site-header.is-scrolled::before { opacity: 1; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Wortmarke: "Bernd" leichter, "Fuchs" kraeftig. Dieselbe Marke steht klein im
   Header (.brand) und gross im Hero der Startseite (.hero-logo). Dort legt
   site.js die Header-Marke deckungsgleich ueber die grosse und laesst sie beim
   Scrollen an ihren Platz oben links wandern. Beide brauchen deshalb exakt
   dieselben Schrifteigenschaften. */
.brand,
.hero-logo {
    font-family: var(--display);
    font-weight: 500;
    line-height: .8;             /* Box schliesst knapp um die Buchstaben */
    letter-spacing: -.05em;
    /* Inter bringt eine optische Groesse mit: ohne feste Einstellung waere die kleine
       Marke anders geschnitten (breiter) als die grosse – hier immer der Display-Schnitt. */
    font-optical-sizing: none;
    font-variation-settings: "opsz" 32;
    white-space: nowrap;
    color: var(--ink);
}
.brand > *,
.hero-logo > * { display: inline-block; }
.brand em,
.hero-logo em {
    font-weight: 800;
    color: var(--accent);
}

.brand {
    position: relative;
    z-index: 3;
    font-size: 1.36rem;
    transition: color .3s ease, opacity .3s ease;
}
.brand:hover { text-decoration: none; }
.brand em { transition: color .3s ease; }

.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}
.nav-list a:hover { background: rgba(23, 22, 28, .07); text-decoration: none; }
.nav-list a[aria-current] { color: var(--accent); }

.nav-list .nav-cta {
    margin-left: 8px;
    padding: 10px 20px;
    background: var(--ink);
    color: #fff;
}
.nav-list .nav-cta:hover { background: var(--accent); }
@media (min-width: 861px) {
    .nav-list .nav-cta[aria-current] { background: var(--accent); color: #fff; }
}

.nav-index, .nav-meta, .nav-toggle { display: none; }

/* ---------- Fullscreen-Menue (Tablet & Mobil) ---------- */
@media (max-width: 860px) {
    :root { --header-h: 68px; }

    .nav-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 6px 0 16px;
        border: 1px solid rgba(23, 22, 28, .16);
        border-radius: 999px;
        background: rgba(255, 255, 255, .6);
        color: var(--ink);
        font-family: var(--sans);
        font-size: .9rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }

    .nav-toggle-icon {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--ink);
        transition: background-color .3s ease;
    }
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        content: "";
        position: absolute;
        left: 9px;
        right: 9px;
        height: 1.5px;
        border-radius: 2px;
        background: #fff;
        transition: transform .45s var(--ease-curtain), top .45s var(--ease-curtain), background-color .3s ease;
    }
    .nav-toggle-icon::before { top: 12px; }
    .nav-toggle-icon::after { top: 18.5px; }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 28px;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--header-h) + 20px) var(--gutter) max(28px, env(safe-area-inset-bottom));
        background: var(--ink);
        color: #fff;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path .65s var(--ease-curtain), visibility 0s linear .65s;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-list li {
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
    }
    .nav-list a,
    .nav-list .nav-cta {
        display: flex;
        align-items: baseline;
        gap: 18px;
        margin: 0;
        padding: clamp(10px, 1.9svh, 18px) 0;
        border-radius: 0;
        background: none;
        color: #fff;
        font-family: var(--display);
        font-size: clamp(2rem, min(10.5vw, 6.8svh), 3.4rem);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -.04em;
        transform: translateY(115%);
        transition: transform .7s var(--ease), color .2s ease;
    }
    .nav-list a:hover,
    .nav-list .nav-cta:hover { background: none; color: var(--accent-on-dark); }
    .nav-list a[aria-current] { color: var(--accent-on-dark); }

    .nav-index {
        display: inline-block;
        min-width: 1.6em;
        font-family: var(--sans);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, .45);
    }

    .nav-meta {
        display: grid;
        gap: 4px;
        font-size: .98rem;
        color: rgba(255, 255, 255, .65);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s ease, transform .5s var(--ease);
    }
    .nav-meta p { margin: 0; }
    .nav-meta a { color: #fff; width: fit-content; }
    .nav-meta .nav-legal {
        display: flex;
        gap: 20px;
        margin-top: 14px;
        font-size: .85rem;
    }
    .nav-meta .nav-legal a { color: rgba(255, 255, 255, .65); }

    /* geoeffnet */
    body.nav-open { overflow: hidden; }
    body.nav-open .site-header::before { opacity: 0; }
    body.nav-open .site-nav {
        visibility: visible;
        clip-path: inset(0);
        transition: clip-path .65s var(--ease-curtain), visibility 0s linear 0s;
    }
    body.nav-open .nav-list a {
        transform: none;
        transition-delay: calc(.18s + var(--i, 0) * .06s), 0s;
    }
    body.nav-open .nav-meta {
        opacity: 1;
        transform: none;
        transition-delay: .55s;
    }
    body.nav-open .brand { color: #fff; }
    body.nav-open .brand em { color: var(--accent-on-dark); }
    body.nav-open .nav-toggle {
        background: transparent;
        border-color: rgba(255, 255, 255, .3);
        color: #fff;
    }
    body.nav-open .nav-toggle-icon { background: #fff; }
    body.nav-open .nav-toggle-icon::before,
    body.nav-open .nav-toggle-icon::after { top: 15.25px; background: var(--ink); }
    body.nav-open .nav-toggle-icon::before { transform: rotate(45deg); }
    body.nav-open .nav-toggle-icon::after { transform: rotate(-45deg); }
}

/* ---------- Header ueber dunklen Abschnitten (Leitsatz, Kontaktband): site.js setzt .on-dark ---------- */
.site-header::before { transition: opacity .3s ease, background-color .3s ease, border-color .3s ease; }
.site-header.on-dark::before {
    background: rgba(23, 22, 28, .78);
    border-bottom-color: transparent;
}
.on-dark .brand { color: #fff; }
.on-dark .brand em { color: var(--accent-on-dark); }
@media (min-width: 861px) {
    .on-dark .nav-list a { color: #fff; }
    .on-dark .nav-list a:hover { background: rgba(255, 255, 255, .12); }
    .on-dark .nav-list a[aria-current] { color: var(--accent-on-dark); }
    .on-dark .nav-list .nav-cta { background: #fff; color: var(--ink); }
    .on-dark .nav-list .nav-cta:hover { background: var(--accent); color: #fff; }
}
@media (max-width: 860px) {
    .on-dark .nav-toggle {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .3);
        color: #fff;
    }
    .on-dark .nav-toggle-icon { background: #fff; }
    .on-dark .nav-toggle-icon::before,
    .on-dark .nav-toggle-icon::after { background: var(--ink); }
}

/* ==========================================================================
   Hero (Startseite)
   Ein Bild (1000 x 1740 px): Portrait mit ergaenzter Schulter links und
   Oberkoerper unten, darueber eine nahtlose Verlaengerung des Hintergrunds.
   Masse in Anteilen der Bildbreite --iw: Haaransatz 82,9 % unter der Oberkante,
   Kopf von 46,3 % bis 81,1 % der Breite (Mitte 63,5 %), Bart endet bei 127 %,
   der linke Aermel beginnt bei 16 % der Breite.

   Querformat: Wortmarke, Rollen, Text und Buttons links – die Figur steht in
   voller Hoehe rechts unten.
   Hochformat: "Titelseite". Wortmarke und Rollenzeile oben ueber die ganze
   Breite, darunter das Portrait, Text und Buttons liegen unten auf dem Hemd.
   ========================================================================== */

.hero {
    --iw: min((calc(var(--svh) * 100) - var(--header-h) - 28px) / .911, 56vw);
    --edge: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));
    /* Text und Buttons enden vor dem Aermel */
    --col: max(240px, min(600px, 100vw - var(--iw) * .84 - var(--edge) - 32px));
    /* Die Wortmarke reicht bis kurz vor den Kopf */
    --F: clamp(3rem, (100vw - var(--iw) * .537 - var(--edge) - 64px) / var(--wm), min(11rem, calc(var(--svh) * 19)));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--svh) * 100);
    padding: calc(var(--header-h) + 24px) 0 calc(var(--svh) * 9);
    background: var(--stone);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.hero-media img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--iw);
    height: auto;
    max-width: none;
    /* --sy = Scrollposition in px (site.js): das Foto laeuft langsamer mit */
    transform: translate3d(0, calc(var(--sy, 0) * .16px), 0);
    /* Der aeusserste Rand des (einfarbigen) Bildhintergrunds laeuft unsichtbar
       in die Seitenfarbe aus – die Figur selbst bleibt unberuehrt. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%), linear-gradient(to bottom, transparent, #000 5%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 9%), linear-gradient(to bottom, transparent, #000 5%);
    mask-composite: intersect;
}

.hero-copy {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.hero-logo { font-size: var(--F); }

.hero-role {
    display: block;
    margin-top: clamp(16px, calc(var(--svh) * 2.8), 30px);
    font-family: var(--sans);
    font-size: clamp(.72rem, 1vw, .86rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero-sub {
    max-width: var(--col);
    margin: clamp(20px, calc(var(--svh) * 3.6), 40px) 0 clamp(22px, calc(var(--svh) * 3.4), 36px);
    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.5;
    color: var(--ink-soft);
}
.hero .btn-row { max-width: var(--col); }

/* Textwechsler: nur im Hochformat und nur mit JavaScript sichtbar (siehe "Bewegung") */
.hero-ticker { display: none; }

/* ---------- Flaches Querformat (Smartphone quer): alles etwas kompakter ---------- */
@media (min-aspect-ratio: 1001/1000) and (max-height: 520px) {
    .hero { padding: var(--header-h) 0 12px; }
    .hero-role { margin-top: 8px; letter-spacing: .1em; }
    .hero-sub { margin: 8px 0 12px; font-size: .97rem; line-height: 1.4; }
    .hero .btn-row { gap: 10px; }
    .hero .btn { min-height: 44px; padding: 8px 18px; font-size: .94rem; }
}

/* ---------- Hochformat (Smartphone, Tablet hochkant): Titelseite ----------
   Oben die Wortmarke ueber die ganze Breite, darunter in gleicher Breite die
   Rollenzeile. Unten laeuft das blaue Hemd in eine Farbflaeche aus, die den
   Text traegt und sich im folgenden Abschnitt (Leitsatz) ins Dunkle fortsetzt. */
@media (max-aspect-ratio: 1/1) {
    .hero {
        --F: min((100vw - 2 * var(--gutter)) / var(--wm), calc(var(--svh) * 12), 10.5rem);
        --R: clamp(.5rem, calc(var(--F) * .16), 1rem);                      /* Schrift der Rollenzeile */
        --y0: calc(var(--header-h) + var(--F) * .95 + var(--R) + 14px);     /* hier beginnt das Haar */
        --T: min((100vw - 2 * var(--gutter)) / 11.6, 2.1rem);               /* Textwechsler: Begriff */
        --A: clamp(.84rem, 3.9vw, 1.02rem);                                 /* Textwechsler: Zielgruppe */
        --Bx: 102px;                                                        /* Buttons, Abstaende, Balken */
        --B: 190px;                                                         /* Platz fuer Text und Buttons */
        /* Portrait so gross, dass der Bart mit etwas Luft ueber dem Textblock endet –
           hoechstens 185vw, damit das Gesicht nicht den ganzen Bildschirm fuellt, mindestens
           aber so gross, dass das Bild die Breite fuellt und bis in den deckenden Teil der
           blauen Flaeche reicht (dort ist seine Unterkante nicht mehr zu sehen). */
        --iw: max(100vw, (calc(var(--svh) * 100) - var(--y0) - var(--B) * .4) / .911, min((calc(var(--svh) * 100) - var(--y0) - var(--B) - 30px) / .441, 185vw));
        display: block;
        height: calc(var(--svh) * 100);
        min-height: 500px;
        padding: 0;
        background: var(--navy);
    }

    .hero-media { z-index: 0; }
    .hero-media img {
        top: calc(var(--y0) - var(--iw) * .829);
        right: auto;
        bottom: auto;
        /* Gesicht mittig – solange das Bild dabei bis zum rechten Rand reicht */
        left: max(50vw - var(--iw) * .635, 100vw - var(--iw));
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Das Hemd laeuft nach unten in seine eigene Farbe aus. Die Flaeche gehoert zum
       Abschnitt (nicht zum Foto) und endet in genau dem Ton, mit dem der Leitsatz beginnt. */
    .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        z-index: 0;
        height: calc(var(--B) + 84px);
        /* deckend unter dem Text, darueber ein weicher Auslauf ohne sichtbaren Ansatz */
        background: linear-gradient(to top,
            var(--navy) 0,
            rgba(31, 39, 91, .97) calc(var(--B) * .45),
            rgba(34, 43, 97, .88) calc(var(--B) * .8),
            rgba(36, 46, 102, .72) var(--B),
            rgba(37, 47, 104, .46) calc(var(--B) + 16px),
            rgba(38, 48, 105, .25) calc(var(--B) + 32px),
            rgba(38, 48, 105, .1) calc(var(--B) + 54px),
            rgba(38, 48, 105, 0) calc(var(--B) + 84px));
        pointer-events: none;
    }

    .hero-copy {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        max-width: none;
        padding: var(--header-h) var(--gutter) max(20px, env(safe-area-inset-bottom));
    }

    .hero-title { margin-bottom: auto; }

    /* Rollenzeile: so breit wie die Wortmarke, die Begriffe durch feine Linien verbunden */
    .hero-role {
        display: flex;
        align-items: center;
        width: calc(var(--F) * var(--wm));
        max-width: 100%;
        margin-top: calc(var(--F) * .15);
        padding: 0 calc(var(--F) * .01) 0 calc(var(--F) * .06);     /* optisch buendig mit "B" und "s" */
        font-size: var(--R);
        line-height: 1;
        letter-spacing: .08em;
        white-space: nowrap;
        color: var(--ink);
    }
    .hero-role .role:last-child { margin-right: -.08em; }           /* Laufweite nach dem letzten Buchstaben */
    .hero-role .sep {
        flex: 1;
        min-width: 6px;
        height: 1px;
        margin: 0 clamp(6px, 2.2vw, 16px);
        background: var(--accent);
        font-size: 0;
    }

    /* Der ausgeschriebene Satz (ohne JavaScript bzw. ohne Animationen) */
    .hero-sub {
        max-width: 34rem;
        margin: 12px 0 14px;
        font-size: clamp(.9rem, 3.9vw, 1.02rem);
        font-weight: 500;
        line-height: 1.38;
        letter-spacing: -.005em;
        color: #fff;
    }

    /* Textwechsler: ein Begriff gross, darunter fuer wen */
    .hero-ticker {
        margin-bottom: 16px;
        color: #fff;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tk-bars {
        display: flex;
        gap: 4px;
        margin-bottom: 12px;
    }
    .tk-bars i {
        position: relative;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .3);
        overflow: hidden;
    }
    .tk-bars i.gap { margin-left: 5px; }                            /* neue Zielgruppe */
    .tk-bars i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #fff;
        transform: scaleX(0);
        transform-origin: 0 50%;
    }
    .tk-bars i.is-done::after { transform: none; }
    .tk-bars i.is-run::after {
        transform: none;
        transition: transform var(--tk, 2.6s) linear;
    }
    /* alle Begriffe liegen in derselben Zelle uebereinander, sichtbar ist nur .is-on */
    .tk-line {
        display: grid;
        white-space: nowrap;
        perspective: 520px;
    }
    .tk-line > span {
        grid-area: 1 / 1;
        justify-self: start;
        transform-origin: 50% 60%;
        opacity: 0;
        transform: translate3d(0, .5em, 0) rotateX(-78deg);
    }
    .tk-line > .is-on {
        opacity: 1;
        transform: none;
        transition: transform .75s var(--ease-out) .08s, opacity .4s ease .08s;
    }
    .tk-line > .is-out {
        opacity: 0;
        transform: translate3d(0, -.45em, 0) rotateX(70deg);
        transition: transform .45s ease-in, opacity .3s ease;
    }
    .tk-topic {
        font-family: var(--display);
        font-size: var(--T);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -.035em;
        /* feste optische Groesse: so ist die Breite der Begriffe in jeder Schriftgroesse
           dieselbe (11,35em fuer den laengsten) und --T laesst sich daraus berechnen */
        font-optical-sizing: none;
        font-variation-settings: "opsz" 32;
    }
    .tk-aud {
        margin-top: 4px;
        font-size: var(--A);
        font-weight: 500;
        line-height: 1.3;
        color: rgba(255, 255, 255, .82);
    }

    .hero .btn-row {
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 34rem;
    }
    .hero .btn {
        flex: 1 1 auto;
        min-height: 48px;
        padding: 8px 12px;
        font-size: clamp(.78rem, 3.65vw, .95rem);
        white-space: nowrap;
    }
    .hero .btn-ghost {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .42);
        color: #fff;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .hero .btn-ghost:hover { border-color: #fff; }
}

/* sehr schmale Geraete */
@media (max-aspect-ratio: 1/1) and (max-width: 340px) {
    .hero-role { letter-spacing: .05em; }
    .hero-role .role:last-child { margin-right: -.05em; }
    .hero .btn-row { gap: 6px; }
    .hero .btn { padding: 8px 9px; font-size: .74rem; letter-spacing: -.02em; }
}

/* Faltgeraete (zugeklappt): Buttons untereinander */
@media (max-aspect-ratio: 1/1) and (max-width: 300px) {
    .hero { --R: .5rem; --A: .78rem; --B: 252px; --Bx: 158px; }
    .hero-role { letter-spacing: .03em; }
    .hero-role .role:last-child { margin-right: -.03em; }
    .hero-role .sep { margin: 0 4px; }
    .hero .btn-row { flex-wrap: wrap; }
    .hero .btn { flex: 1 1 100%; font-size: .82rem; }
}

/* sehr niedrige Bildschirme */
@media (max-aspect-ratio: 1/1) and (max-height: 520px) {
    .hero { --B: 168px; --Bx: 86px; min-height: 440px; }
    .hero-copy { padding-bottom: 12px; }
    .hero-sub { margin: 8px 0 10px; font-size: .86rem; line-height: 1.32; }
    .hero-ticker { margin-bottom: 12px; }
    .tk-bars { margin-bottom: 10px; }
    .hero .btn { min-height: 44px; }
}

/* Tablet hochkant */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
    .hero { --T: 2.9rem; --A: 1.3rem; --B: 246px; --Bx: 124px; }
    .hero-sub { margin: 18px 0 22px; font-size: 1.3rem; }
    .hero-ticker { margin-bottom: 26px; }
    .tk-bars { gap: 5px; margin-bottom: 16px; }
    .tk-bars i { width: 30px; }
    .hero .btn-row { gap: 12px; }
    .hero .btn { flex: 0 1 auto; min-height: 52px; padding: 12px 26px; font-size: 1rem; }
}

/* ==========================================================================
   Leitsatz
   Mit JavaScript bleibt der Satz einen Moment stehen ("sticky"), waehrend
   sich die Woerter nacheinander aufrichten (siehe "Bewegung" am Dateiende).
   ========================================================================== */

.quote-band {
    background: var(--ink);
    color: #fff;
    text-align: center;
}
/* Hochformat: der Abschnitt beginnt im Blau, mit dem der Hero endet, und fuehrt es
   ins Dunkle – so gibt es zwischen beiden keine Kante. */
@media (max-aspect-ratio: 1/1) {
    .quote-band {
        background: var(--ink) linear-gradient(to bottom, var(--navy) 0, #1b2042 34%, #191a29 68%, var(--ink) 100%) no-repeat;
        background-size: 100% calc(var(--svh) * 80);
    }
}
.quote-pin {
    display: flex;
    align-items: center;
    min-height: calc(var(--svh) * 100);
    padding: calc(var(--header-h) + 24px) 0 56px;
    overflow: hidden;
}
.quote { margin: 0; }
.quote p {
    max-width: 11.5em;
    margin: 0 auto;
    font-family: var(--display);
    font-size: clamp(2.4rem, min(13.2vw, calc(var(--svh) * 13)), 7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.quote em { color: var(--accent-on-dark); }
.quote cite {
    display: block;
    margin-top: clamp(28px, calc(var(--svh) * 5), 48px);
    font-size: .76rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */

/* Abschnitte fuellen tendenziell den ganzen Bildschirm, der Inhalt steht mittig */
.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--svh) * 100);
    padding: clamp(72px, 9vw, 124px) 0;
}
.section-white { background: var(--white); }

.section-head {
    max-width: 760px;
    margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head h2 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 4.7vw, 3.6rem);
}
.section-head h2 em { color: var(--accent); }
.section-head p:not(.kicker) {
    max-width: 36em;
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink-soft);
}

/* ---------- Erfahrung ---------- */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 900px) {
    .cards-3 { grid-template-columns: minmax(0, 1fr); }
}

.card {
    min-width: 0;
    padding: clamp(24px, 3vw, 36px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.card h3 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.card .card-sub {
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--accent);
}
.card p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: .98rem;
}

/* ---------- Leistungen ---------- */
.service-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.service-groups.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .service-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .service-groups.two { grid-template-columns: minmax(0, 1fr); }
}

.service-group {
    min-width: 0;
    padding: clamp(24px, 3vw, 36px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.section-white .service-group,
.section-white .card { background: var(--paper); }

.service-group h3 {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.service-group > p {
    margin: 0 0 22px;
    font-size: .98rem;
    color: var(--ink-soft);
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.service-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
    transition: color .2s ease, padding-left .3s var(--ease);
}
.service-list li:last-child a { border-bottom: 0; padding-bottom: 2px; }
.service-list a span {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.service-list .icon {
    color: var(--accent);
    transition: transform .3s var(--ease);
}
.service-list a:hover {
    color: var(--accent);
    text-decoration: none;
    padding-left: 6px;
}
.service-list a:hover .icon { transform: translateX(4px); }

/* ---------- Referenzen ---------- */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
@media (max-width: 760px) {
    .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.logo-grid li {
    min-width: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.logo-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(104px, 13vw, 150px);
    padding: 20px;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .35s ease, opacity .35s ease;
}
.logo-grid a:hover { filter: none; opacity: 1; }
.logo-grid img {
    width: auto;
    max-width: min(170px, 78%);
    max-height: 52px;
    object-fit: contain;
}

/* ---------- Kontakt-Band ---------- */
.contact-band {
    display: flex;
    align-items: center;
    min-height: calc(var(--svh) * 100);
    padding: clamp(72px, 10vw, 130px) 0;
    background:
        radial-gradient(900px 480px at 0% 100%, rgba(196, 1, 83, .34) 0%, transparent 62%),
        var(--ink);
    color: #fff;
}
.contact-band .kicker { color: var(--accent-on-dark); }
.contact-band h2 {
    max-width: 14em;
    margin: 0 0 20px;
    font-size: clamp(2.4rem, 6.4vw, 5rem);
    color: #fff;
}
.contact-band h2 em { color: var(--accent-on-dark); }
.contact-band p:not(.kicker) {
    max-width: 38em;
    margin: 0 0 32px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .74);
}
.contact-band .btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}
.contact-band .btn-ghost:hover { border-color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding: clamp(44px, 6vw, 72px) 0 32px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    font-size: .95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px 48px;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

.footer-brand {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.045em;
}
.footer-brand em { color: var(--accent); }

.footer-contact {
    margin: 0;
    font-style: normal;
    line-height: 1.8;
    color: var(--ink-soft);
}
.footer-contact a { color: var(--ink-soft); }
.footer-contact a:hover { color: var(--accent); }

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 701px) {
    .footer-nav ul { justify-content: flex-end; }
}
.footer-nav a {
    display: inline-block;
    padding: 4px 0;
    color: var(--ink);
    font-weight: 500;
}
.footer-nav a:hover { color: var(--accent); }

.footer-credit {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: #6b6972;
}
.footer-credit p { margin: 0; }

/* ==========================================================================
   Unterseiten
   ========================================================================== */

.page-head {
    padding: calc(var(--header-h) + clamp(36px, 6vw, 80px)) 0 clamp(36px, 5vw, 64px);
    background: var(--stone);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0 0 clamp(22px, 3vw, 36px);
    padding: 0;
    font-size: .85rem;
    color: var(--ink-soft);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb li + li::before { content: "/"; color: #a09ea6; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

.page-head h1 {
    max-width: 14em;
    margin: 0;
    font-size: clamp(2.3rem, 6.6vw, 5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.page-body { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }

.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(36px, 6vw, 88px);
    align-items: start;
}
@media (max-width: 920px) {
    .page-layout { grid-template-columns: minmax(0, 1fr); }
}

.prose {
    min-width: 0;
    max-width: 44rem;
    font-size: 1.09rem;
    color: #34323b;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 12 5 4;
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { font-weight: 600; color: var(--ink); }

.prose .lead {
    font-size: clamp(1.2rem, 1.9vw, 1.42rem);
    line-height: 1.45;
    letter-spacing: -.018em;
    color: var(--ink);
}

.prose h2 {
    margin: 1.8em 0 .6em;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}
.prose h3 {
    margin: 1.8em 0 .5em;
    font-family: var(--sans);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.prose ul {
    list-style: none;
    margin: 0 0 1.4em;
    padding: 0;
}
.prose ul li {
    position: relative;
    margin: .55em 0;
    padding-left: 30px;
}
.prose ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .78em;
    width: 14px;
    height: 1.5px;
    background: var(--accent);
}

.prose-legal { font-size: 1rem; }
.prose-legal h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); }

.pullquote {
    margin: 0 0 1.1em;
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.5vw, 2.45rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: var(--ink);
    hyphens: manual;
}
.pullquote p { margin: 0; text-wrap: balance; }

.note {
    margin-top: 2.2em !important;
    padding: 2px 0 2px 18px;
    border-left: 2px solid var(--accent);
    font-size: .95rem;
    color: var(--ink-soft);
}

/* Seitenleiste */
.aside { display: grid; gap: 20px; min-width: 0; }
@media (min-width: 921px) {
    .aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.aside-card {
    min-width: 0;
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.aside-card h2 {
    margin: 0 0 14px;
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: -.03em;
}
.aside-card p { font-size: .98rem; color: var(--ink-soft); }
.aside-card .btn { width: 100%; }
.aside-card .btn + .btn { margin-top: 10px; }
.aside-dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.aside-dark h2 { color: #fff; }
.aside-dark p { color: rgba(255, 255, 255, .72); }
.aside-dark .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.aside-dark .btn-ghost:hover { border-color: #fff; }

/* Vor / Zurueck */
.prevnext {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 44rem;
    margin-top: clamp(44px, 6vw, 72px);
}
@media (max-width: 520px) {
    .prevnext { grid-template-columns: minmax(0, 1fr); }
}
.prevnext a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    transition: border-color .25s ease, transform .25s var(--ease);
}
.prevnext a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.prevnext small {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.prevnext span {
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    hyphens: manual;
}
.prevnext .next { text-align: right; }
@media (max-width: 520px) {
    .prevnext .next { text-align: left; }
}

/* Kontaktseite */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(32px, 5vw, 56px);
}
@media (max-width: 860px) {
    .contact-cards { grid-template-columns: minmax(0, 1fr); }
}
.contact-cards .card h2 {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.contact-cards .card p,
.contact-cards .card address {
    margin: 0;
    font-family: var(--display);
    font-style: normal;
    font-size: clamp(1.15rem, 1.75vw, 1.4rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.contact-cards .card a { color: var(--ink); }
.contact-cards .card a:hover { color: var(--accent); }

/* 404 */
.error-page {
    display: flex;
    align-items: center;
    min-height: calc(var(--svh) * 100);
    padding: calc(var(--header-h) + 40px) 0 80px;
    background: var(--stone);
}
.error-page h1 {
    margin: 0 0 12px;
    font-size: clamp(4.5rem, 20vw, 12rem);
    line-height: .9;
    letter-spacing: -.06em;
}
.error-page p { font-size: 1.15rem; color: var(--ink-soft); }

/* ==========================================================================
   Bewegung
   Alles hier gilt nur, wenn JavaScript laeuft (html.js) und der Besucher
   Animationen nicht abgeschaltet hat. Ohne beides ist jeder Inhalt sofort
   und unveraendert sichtbar.
   ========================================================================== */

/* Per JS in einzelne Woerter zerlegte Headlines: .wi = ein Wort,
   .w haelt ein Wort mit angehaengtem Satzzeichen zusammen */
.wi { display: inline-block; max-width: 100%; transform-origin: 50% 100%; }
.w { white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Bloecke: richten sich aus der Flaeche auf ---------- */
    html.js .reveal {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1100px) translate3d(0, 34px, 0) rotateX(18deg);
        transition: opacity .9s ease var(--d, 0s), transform 1.15s var(--ease-out) var(--d, 0s);
    }
    html.js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /* ---------- Einfaches Einblenden von unten ---------- */
    html.js .fade-up {
        opacity: 0;
        translate: 0 22px;
        transition: opacity .8s ease var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s);
    }
    html.js .fade-up.is-visible {
        opacity: 1;
        translate: none;
    }

    /* ---------- Koepfe: Kicker, Headline Wort fuer Wort, dann der Rest ---------- */
    html.js .rise > * {
        transition: opacity .8s ease var(--rd, .28s), translate .9s var(--ease-out) var(--rd, .28s);
    }
    html.js .rise:not(.is-visible) > * {
        opacity: 0;
        translate: 0 22px;
    }
    html.js .rise > .kicker,
    html.js .rise > .breadcrumb { --rd: 0s; }
    html.js .rise > .btn-row { --rd: .42s; }
    html.js .rise:not(.is-visible) > .kicker { translate: -16px 0; }
    html.js .rise > .kicker::before {
        transform-origin: 0 50%;
        transition: scale .9s var(--ease-out) .15s;
    }
    html.js .rise:not(.is-visible) > .kicker::before { scale: 0 1; }

    html.js .rise > .split,
    html.js .rise:not(.is-visible) > .split {
        opacity: 1;
        translate: none;
        transition: none;
    }
    html.js .rise .split .wi {
        transition: transform 1s var(--ease-out) calc(.06s + var(--i, 0) * 70ms), opacity .45s ease calc(.06s + var(--i, 0) * 70ms);
    }
    html.js .rise:not(.is-visible) .split .wi {
        opacity: 0;
        transform: perspective(600px) translate3d(0, .4em, 0) rotateX(80deg);
    }

    /* ---------- Kundenlogos: Kacheln klappen nacheinander hoch ---------- */
    html.js .logo-grid.reveal {
        opacity: 1;
        transform: none;
    }
    html.js .logo-grid.reveal li {
        transform-origin: 50% 100%;
        transition: opacity .7s ease calc(var(--i, 0) * 70ms), transform .95s var(--ease-out) calc(var(--i, 0) * 70ms);
    }
    html.js .logo-grid.reveal:not(.is-visible) li {
        opacity: 0;
        transform: perspective(700px) translate3d(0, 16px, 0) rotateX(72deg);
    }

    /* ---------- Leistungslisten: Eintraege folgen der Karte ---------- */
    html.js .service-group.reveal .service-list li {
        transition: opacity .6s ease, translate .7s var(--ease-out);
        transition-delay: calc(var(--d, 0s) + .32s + var(--k, 0) * 55ms);
    }
    html.js .service-group.reveal:not(.is-visible) .service-list li {
        opacity: 0;
        translate: -14px 0;
    }
    .service-list li:nth-child(2) { --k: 1; }
    .service-list li:nth-child(3) { --k: 2; }
    .service-list li:nth-child(4) { --k: 3; }
    .service-list li:nth-child(5) { --k: 4; }
    .service-list li:nth-child(6) { --k: 5; }

    /* ---------- Hero: Auftritt beim Laden ---------- */
    html.js .hero-media img { transition: scale 1.8s var(--ease-out); }
    html.js .hero:not(.is-ready) .hero-media img { scale: 1.05; }

    html.js .hero-role { transition: opacity .8s ease .5s, translate .9s var(--ease-out) .5s; }
    html.js .hero:not(.is-ready) .hero-role {
        opacity: 0;
        translate: 0 12px;
    }
    .hero-sub.fade-up { --d: .62s; }
    .hero .btn-row.fade-up { --d: .74s; }

    /* ---------- Wortmarke: gross im Hero, wandert beim Scrollen in den Header ----------
       Am Seitenanfang (.at-top) steht die grosse Marke als normaler Text im Hero.
       Sobald gescrollt wird, uebernimmt die Marke aus dem Header: site.js legt sie
       per --dx/--dy (Versatz in px) und --dk (Massstab) deckungsgleich darueber und
       fuehrt sie mit dem Scrollen an ihren Platz oben links. Bewusst nur 2D-Transformation,
       damit die Schrift in jeder Groesse neu und scharf gezeichnet wird. */
    html.js .home:not(.dock-ready) .brand { opacity: 0; }
    html.js .has-dock .brand {
        transform-origin: 0 0;
        transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)) scale(var(--dk, 1));
    }
    html.js .has-dock.at-top:not(.nav-open):not(.nav-closing) .brand { visibility: hidden; }
    html.js .has-dock:not(.at-top) .hero-logo,
    html.js .has-dock.nav-open .hero-logo,
    html.js .has-dock.nav-closing .hero-logo { opacity: 0; }

    /* offenes Menue: Marke steht immer klein oben links */
    html.js .has-dock.nav-open .brand,
    html.js .has-dock.nav-closing .brand { transition: transform .6s var(--ease-curtain), color .3s ease, opacity .3s ease; }
    html.js .has-dock.nav-open .brand { transform: none; }

    /* Auftritt: die beiden Woerter klappen nacheinander hoch */
    html.js .hero-logo > * {
        transform-origin: 50% 100%;
        transition: transform 1.2s var(--ease-out) calc(.1s + var(--i, 0) * .14s), opacity .55s ease calc(.1s + var(--i, 0) * .14s);
    }
    html.js .hero-logo > :nth-child(2) { --i: 1; }
    html.js .hero:not(.is-ready) .hero-logo > * {
        opacity: 0;
        transform: perspective(700px) translate3d(0, .4em, 0) rotateX(80deg);
    }

    /* ---------- Leitsatz: bleibt kurz am Bildschirm stehen, die Woerter klappen von selbst hoch ----------
       Sobald der Satz weit genug im Bild ist, setzt site.js .is-lit: ab dann laeuft der
       Auftritt zeitgesteuert bis zum Ende durch, egal wo das Scrollen stehen bleibt.
       Es gibt also keinen Zwischenstand mit halb aufgeklappten Woertern. */
    html.js .quote-band.is-pinned {
        height: calc(var(--svh) * 145);
        /* Sprung ueber das Menue: Abschnitt fuellt den Bildschirm (hebt scroll-padding-top auf) */
        scroll-margin-top: calc(-1 * (var(--header-h) + 8px));
    }
    html.js .quote-band.is-pinned .quote-pin {
        position: sticky;
        top: 0;
        height: calc(var(--svh) * 100);
        min-height: 0;
    }
    /* --qy (px): beim Hereinkommen laeuft der Satz etwas langsamer als die Seite ins Bild;
       --p (0 → 1): waehrend er stehen bleibt, rueckt er ganz leicht naeher */
    html.js .is-pinned .quote {
        transform: translate3d(0, calc(var(--qy, 0) * 1px), 0) scale(calc(1 + var(--p, 0) * .03));
    }
    /* Uebergaenge nur im Zustand .is-lit: der Auftritt ist animiert, das Zuruecksetzen
       (Satz liegt dann wieder unterhalb des Bildschirms) geschieht sofort und unsichtbar */
    html.js .is-pinned.is-lit .quote .wi {
        transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 85ms), opacity .5s ease calc(var(--i, 0) * 85ms);
    }
    html.js .is-pinned:not(.is-lit) .quote .wi {
        opacity: 0;
        transform: perspective(520px) translate3d(0, .4em, 0) rotateX(80deg);
    }
    html.js .is-pinned.is-lit .quote cite {
        transition: opacity .7s ease calc(var(--n, 9) * 85ms + .2s), translate .9s var(--ease-out) calc(var(--n, 9) * 85ms + .2s);
    }
    html.js .is-pinned:not(.is-lit) .quote cite {
        opacity: 0;
        translate: 0 14px;
    }

    /* ---------- Hero im Hochformat ---------- */
    @media (max-aspect-ratio: 1/1) {
        /* Textwechsler statt ausgeschriebenem Satz; der Satz bleibt fuer Vorleseprogramme erhalten */
        html.js .hero { --B: calc(var(--T) * 1.12 + var(--A) * 1.3 + var(--Bx)); }
        html.js .hero-ticker { display: block; }
        html.js .hero .hero-sub {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
        /* Rollenzeile weicht sofort, wenn die Wortmarke beim Scrollen nach oben wandert
           (--dp = 0…1) – sonst wuerde sie unter der noch grossen Marke hindurchlaufen */
        html.js .hero-role > * { opacity: calc(1 - var(--dp, 0) * 8); }

        .hero-sub.fade-up,
        .hero-ticker.fade-up { --d: .7s; }
        .hero .btn-row.fade-up { --d: .82s; }
    }
}

/* Ohne Animationen (Systemeinstellung): grosse Wortmarke steht fest im Hero,
   die kleine im Header erscheint erst nach dem Scrollen. */
html.js .home.no-dock:not(.nav-open) .site-header:not(.is-scrolled) .brand:not(:focus-visible) {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    .site-header, .contact-band, .prevnext, .aside, .skip-link { display: none !important; }
    html.js .reveal, html.js .fade-up, html.js .rise > *, html.js .logo-grid.reveal li, html.js .service-list li, html.js .hero-role, html.js .hero-logo, html.js .quote, html.js .quote cite, .wi {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
    }
    html.js .quote-band.is-pinned { height: auto; }
    html.js .quote-band.is-pinned .quote-pin { position: static; height: auto; }
    body { background: #fff; }
    .hero, .page-head { height: auto; min-height: 0; padding-top: 24px; background: #fff; }
    .hero-copy { position: static; }
    .hero-media, .hero::after, .hero-ticker { display: none !important; }
    html.js .hero .hero-sub { position: static; width: auto; height: auto; margin: 12px 0; clip-path: none; white-space: normal; }
    .hero-role .sep { background: none; font-size: inherit; flex: none; height: auto; margin: 0; }
    .hero-role, .hero-sub { color: var(--ink); }
    .section, .contact-band, .quote-pin { min-height: 0; }
}