/* ==========================================================================
   QSP GmbH — site.css
   Ein Stylesheet für alle Seiten. Kein Build-Step, kein npm.
   ========================================================================== */

/* --- Fonts: selbst gehostet, keine externen Requests ---------------------- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/jetbrainsmono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Flächen — minimal warm, damit Weiß nicht klinisch wirkt */
    --bg-1: oklch(0.988 0.003 85);
    --bg-2: oklch(0.958 0.005 85);
    --bg-3: oklch(0.920 0.008 85);
    --line: oklch(0.875 0.008 85);
    --line-soft: oklch(0.928 0.006 85);

    /* Text — leicht blaustichiges Schwarz, passt zum Akzent */
    --ink-1: oklch(0.215 0.020 250);
    --ink-2: oklch(0.430 0.018 250);
    --ink-3: oklch(0.545 0.014 250);

    /* Akzent A — Leistung / Person (Marke). Kontrastsicher auf --bg-1. */
    --signal: oklch(0.480 0.160 38);
    --signal-solid: oklch(0.660 0.190 40);
    --signal-ink: oklch(0.180 0.030 40);
    --signal-wash: oklch(0.660 0.190 40 / 0.09);
    --signal-edge: oklch(0.660 0.190 40 / 0.32);

    /* Akzent B — Produkte / laufende Systeme */
    --current: oklch(0.470 0.110 218);
    --current-solid: oklch(0.640 0.125 210);
    --current-wash: oklch(0.640 0.125 210 / 0.10);
    --current-edge: oklch(0.640 0.125 210 / 0.32);


    /* Typografie */
    --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;

    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
    --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
    --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
    --step-2: clamp(1.50rem, 1.34rem + 0.78vw, 2.05rem);
    --step-3: clamp(1.95rem, 1.63rem + 1.58vw, 3.05rem);
    --step-4: clamp(2.45rem, 1.80rem + 3.20vw, 4.75rem);

    /* Raster */
    --wrap: 76rem;
    --wrap-pad: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4rem, 9vw, 7.5rem);
    --radius: 4px;
    --radius-lg: 8px;

    --shadow-lift: 0 12px 32px oklch(0.5 0.05 250 / 0.10);
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    background: var(--bg-1);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-variation-settings: 'wdth' 100;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

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

::selection { background: var(--signal-solid); color: white; }

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-variation-settings: 'wdth' 112;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; font-variation-settings: 'wdth' 106; }

p { text-wrap: pretty; }

.lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 46ch;
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
}

/* Eyebrow benennt die Sektion — keine Deko-Nummerierung */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}

.section { padding-block: var(--section-y); }

.section--tint { background: var(--bg-2); }

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 200;
    padding: 0.7rem 1.1rem;
    background: var(--ink-1);
    color: var(--bg-1);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --- Header --------------------------------------------------------------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: oklch(0.988 0.003 85 / 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.25rem;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    font-variation-settings: 'wdth' 118;
}

.brand__mark { color: var(--signal); }

.brand__suffix {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 1.75rem; }

.nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    padding: 0;
}

.nav__link {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-2);
    padding-block: 0.35rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav__link:hover { color: var(--ink-1); border-bottom-color: var(--signal); }

.nav__toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0.5rem 0.25rem;
}

.nav__bars { width: 20px; height: 12px; position: relative; }

.nav__bars::before,
.nav__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.25s var(--ease);
}

.nav__bars::before { top: 0; }
.nav__bars::after { bottom: 0; }

[aria-expanded="true"] .nav__bars::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav__bars::after { transform: translateY(-5px) rotate(-45deg); }

.lang-switch {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.lang-switch:hover { color: var(--ink-1); border-color: var(--ink-3); }

@media (max-width: 62rem) {
    .nav__toggle { display: flex; }

    .nav__list {
        position: fixed;
        inset: 4.25rem 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg-1);
        border-bottom: 1px solid var(--line);
        padding: 0.5rem var(--wrap-pad) 1.5rem;
        display: none;
    }

    .nav__list[data-open="true"] { display: flex; }

    .nav__link {
        padding-block: 0.9rem;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--line-soft);
    }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--solid { background: var(--signal-solid); color: var(--signal-ink); }
.btn--solid:hover { background: oklch(0.70 0.185 42); }

.btn--ghost { border-color: var(--line); color: var(--ink-1); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--bg-2); }

.btn__arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}

/* Rasterlinien verweisen auf die Schichtstruktur — bewusst sehr leise */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 5.5rem);
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 62%, transparent);
    opacity: 0.9;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 19rem);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (max-width: 62rem) {
    .hero__inner { grid-template-columns: 1fr; }
}

/* Digitale Visitenkarte — füllt den Raum neben dem Hero und tut etwas. */
.vcard {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-lift);
}

.vcard__qr {
    width: 100%;
    max-width: 11rem;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius);
}

.vcard__name {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    font-variation-settings: 'wdth' 108;
}

.vcard__role {
    font-size: 0.9rem;
    color: var(--ink-3);
    margin-top: 0.15rem;
}

.vcard__hint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 1.1rem;
}

.vcard__actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.vcard__actions .btn { justify-content: center; padding-block: 0.7rem; }

/* Auf dem Handy kann man den eigenen Bildschirm nicht scannen. */
@media (max-width: 48rem) {
    .vcard__qr,
    .vcard__hint { display: none; }
}

.hero h1 { max-width: 18ch; }
.hero h1 em { font-style: normal; color: var(--signal); }

.hero__lede {
    margin-top: 1.5rem;
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 54ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.proof__item { padding-block: 0.5rem; }

.proof__value {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.proof__label {
    font-size: 0.85rem;
    color: var(--ink-3);
    margin-top: 0.2rem;
}

/* --- Weiche: zwei Zielgruppen --------------------------------------------- */

.fork {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
}

.fork__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.fork__card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent-solid);
}

.fork__card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-edge);
    box-shadow: var(--shadow-lift);
}

.fork__card--work {
    --accent-solid: var(--signal-solid);
    --accent: var(--signal);
    --accent-edge: var(--signal-edge);
    --accent-wash: var(--signal-wash);
}

.fork__card--products {
    --accent-solid: var(--current-solid);
    --accent: var(--current);
    --accent-edge: var(--current-edge);
    --accent-wash: var(--current-wash);
}

.fork__kicker {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

.fork__card h3 { margin-bottom: 0.75rem; }

.fork__card p { color: var(--ink-2); margin-bottom: 1.5rem; }

.fork__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

.fork__tag {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    background: var(--accent-wash);
    border-radius: 100px;
    padding: 0.25rem 0.65rem;
}

.fork__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--accent);
}

.fork__card:hover .fork__go .btn__arrow { transform: translateX(4px); }

/* --- Signature: der Stack -------------------------------------------------- */

.stack { border-top: 1px solid var(--line); }

.stack__layer {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1.5rem 2.5rem;
    align-items: start;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    isolation: isolate;
}

.stack__layer::before {
    content: '';
    position: absolute;
    left: calc(var(--wrap-pad) * -1);
    right: calc(var(--wrap-pad) * -1);
    top: 0;
    bottom: 0;
    background: var(--bg-2);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    pointer-events: none;
    z-index: -1;
}

.stack__layer:hover::before { opacity: 1; }

.stack__name {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-1);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.stack__depth { color: var(--ink-3); font-size: 0.72rem; }

.stack__note {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.45;
    margin-top: 0.5rem;
}

.stack__items {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: start;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.chip:hover { color: var(--ink-1); border-color: var(--ink-3); }

/* Die eigentliche Aussage der Sektion: was davon ist selbst gebaut. */
.chip--mine {
    color: var(--ink-1);
    font-weight: 600;
    border-color: var(--signal-edge);
    background: var(--signal-wash);
}

.chip--mine::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal-solid);
    flex: none;
}

.chip--mine:hover { border-color: var(--signal); background: oklch(0.660 0.190 40 / 0.14); }

.stack__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-3);
}

.stack__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }

.stack__legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-solid); }
.stack__legend i.is-used { background: var(--line); }

@media (max-width: 48rem) {
    .stack__layer { grid-template-columns: 1fr; gap: 0.75rem; padding-block: 1.5rem; }
    .stack__note { grid-column: 1; grid-row: auto; margin-top: 0; }
    .stack__items { grid-column: 1; grid-row: auto; }
}

/* --- Betriebsnachweis: die Produkte als Kunden des eigenen Stacks --------- */

.system {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal-solid);
    border-radius: var(--radius-lg);
}

.system__claim {
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variation-settings: 'wdth' 108;
    max-width: 24ch;
}

.system__rows {
    margin-top: 2rem;
    display: grid;
    gap: 0;
}

.system__row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.35rem 1.5rem;
    align-items: baseline;
    padding-block: 1rem;
    border-top: 1px solid var(--line);
}

.system__subject {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-1);
}

.system__uses { color: var(--ink-2); font-size: 0.98rem; }

.system__uses b {
    font-weight: 600;
    color: var(--ink-1);
    box-shadow: inset 0 -0.4em 0 var(--signal-wash);
}

.system__note {
    margin-top: 1.75rem;
    font-size: 0.92rem;
    color: var(--ink-3);
    max-width: 56ch;
}

@media (max-width: 40rem) {
    .system__row { grid-template-columns: 1fr; }
}

/* --- Zusammenarbeit: die harten Fakten, bewusst leise -------------------- */

.engage {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.engage__body p { color: var(--ink-2); margin-top: 1.25rem; }

.engage__body p:first-child { margin-top: 0; }

/* Ein Zitat im Kontext, nicht in einer Trophäen-Sektion. */
.quote {
    margin: 2.25rem 0 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--signal-solid);
}

.quote p {
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--ink-1);
    margin-top: 0;
}

.quote footer {
    margin-top: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.terms {
    margin: 0;
    border-top: 1px solid var(--line);
}

.terms__row {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.25rem 1.5rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--line);
}

.terms dt {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 0.15rem;
}

.terms dd { margin: 0; color: var(--ink-1); }

.terms dd small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.86rem;
    color: var(--ink-3);
}

@media (max-width: 56rem) {
    .engage { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
    .terms__row { grid-template-columns: 1fr; }
}

/* --- Produkte -------------------------------------------------------------
   Kühler Akzent, damit der Produkt-Track sich vom Leistungs-Track abhebt.
   -------------------------------------------------------------------------- */

.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

.product {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.8vw, 2.25rem);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.product:hover {
    transform: translateY(-3px);
    border-color: var(--current-edge);
    box-shadow: var(--shadow-lift);
}

/* Bildplatz — erst aktiv, sobald ein <img> drin steckt. */
.product__shot {
    display: block;
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    background: var(--bg-2);
}

.product__domain {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--current);
    margin-bottom: 0.6rem;
}

.product h3 { margin-bottom: 0.6rem; }

.product__what { color: var(--ink-2); }

.product__edge {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.95rem;
    color: var(--ink-1);
}

.product__edge b { font-weight: 600; box-shadow: inset 0 -0.4em 0 var(--current-wash); }

.product__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

.product__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--current);
}

.product:hover .product__go .btn__arrow { transform: translateX(4px); }

.badge-jv {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
}

/* Zweite Reihe: kompakt, ohne Anspruch auf Bühne */
.minor {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
}

.minor__row {
    display: grid;
    grid-template-columns: 10rem 1fr auto;
    gap: 0.25rem 1.5rem;
    align-items: baseline;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: background-color 0.2s var(--ease);
}

.minor__row:hover { background: var(--bg-2); }

.minor__name { font-weight: 600; }

.minor__what { color: var(--ink-2); font-size: 0.95rem; }

.minor__go { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.8rem; }

.minor__row:hover .minor__go { color: var(--current); }

@media (max-width: 40rem) {
    .minor__row { grid-template-columns: 1fr; }
    .minor__go { display: none; }
}

/* --- Partner / Zusammenarbeit mit ---------------------------------------- */

.partners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    align-items: baseline;
    margin-top: 1.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.partners__item { display: flex; align-items: baseline; gap: 0.55rem; }

.partners__name { font-weight: 600; }

.partners__role {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

/* --- Schreiben ------------------------------------------------------------ */

.writing {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1.5rem clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.writing__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.writing__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.writing__link span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-3);
}

.writing__link:hover { border-color: var(--signal); background: var(--signal-wash); }

@media (max-width: 52rem) {
    .writing { grid-template-columns: 1fr; }
}

/* --- Gemeinnütziges ------------------------------------------------------- */

.giveback {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.giveback__tag {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    padding-top: 0.3rem;
}

.giveback h3 { margin-bottom: 0.5rem; }

.giveback p { color: var(--ink-2); }

.giveback a { color: var(--current); font-weight: 600; }

@media (max-width: 40rem) {
    .giveback { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* --- Kontakt --------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }

.contact h2 { max-width: 14ch; }

.contact__lede { margin-top: 1.25rem; color: var(--ink-2); max-width: 42ch; }

/* Was in die erste Mail gehört — spart beiden Seiten eine Runde. */
.contact__brief { margin-top: 2rem; }

.contact__brief h3 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1rem;
}

.contact__brief ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: brief;
}

.contact__brief li {
    counter-increment: brief;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0.75rem;
    padding-block: 0.6rem;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-2);
}

.contact__brief li::before {
    content: counter(brief);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--signal);
    padding-top: 0.15rem;
}

.contact__card {
    align-self: start;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-top: 3px solid var(--signal-solid);
    border-radius: var(--radius-lg);
}

.contact__card .btn { width: 100%; justify-content: center; }

.contact__direct { margin-top: 1.5rem; border-top: 1px solid var(--line-soft); }

.contact__direct div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line-soft);
}

.contact__direct dt {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.contact__direct dd { margin: 0; font-weight: 500; }

.contact__direct a { text-decoration: none; border-bottom: 1px solid var(--signal-edge); }

.contact__direct a:hover { border-bottom-color: var(--signal); }

@media (max-width: 56rem) {
    .contact { grid-template-columns: 1fr; }
}

/* --- Fuß ------------------------------------------------------------------- */

.sitefoot {
    padding-block: 2.5rem;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}

.sitefoot__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    font-size: 0.88rem;
    color: var(--ink-3);
}

.sitefoot a { color: var(--ink-2); text-decoration: none; }

.sitefoot a:hover { color: var(--signal); }

.sitefoot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* --- Scroll-Reveal --------------------------------------------------------- */

/* Der versteckte Ausgangszustand gilt NUR, wenn JS läuft und ihn auch wieder
   aufheben kann. Ohne JS — Crawler, Vorschau-Bots, Fehler beim Laden —
   ist der Inhalt sichtbar. Inhalt darf nie von einer Animation abhängen. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal { opacity: 1; transform: none; }
}