/* ════════════════════════════════════════════════════════════
   PIXELSCHNITZEL — PUBLIC WEBSITE STYLES
   ════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (no Google CDN) ──
   Space Grotesk ist die verbindliche Hausschrift (CI 2026) und die EINZIGE Schrift,
   die diese Datei noch deklariert. Inter und JetBrains Mono werden ausschliesslich von
   den internen Admin-Templates (/admin/**) benutzt und stehen deshalb seit 08/2026 in
   css/admin-fonts.css, die nur dort eingebunden wird — neun @font-face-Regeln fuer
   ~202 KB Schriften lagen vorher im render-blockierenden CSS jeder oeffentlichen
   Unterseite. Instrument Serif wurde nirgends mehr referenziert und ist entfallen.
   In Templates unter templates/website/** und templates/en/** darf keine dieser
   Familien auftauchen. */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-grotesk-400-f31a9f084a8d3e96127f004178d0a4f0.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/space-grotesk-500-3e1514f884fbfcf5ec37ef34fb3dc053.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-700-9c34f616ddb3c8a7966f32be44d97c5b.woff2') format('woff2');
}

:root {
    /* ── Verbindliche Markenfarben (CI 2026) ── */
    --ps-black:       #002116;
    --ps-beige:       #FFF3E9;
    --ps-light-green: #DDEBC1;
    --ps-green:       #81BC4A;
    --ps-dark-green:  #418C4E;

    /* Funktionale Farben (Status) — zurueckhaltend einsetzen */
    --ps-success: #418C4E;
    --ps-warning: #C58A23;
    --ps-error:   #B54747;
    --ps-info:    #397A73;

    /* ── Aliase auf die Markenfarben ──
       Die bestehenden Klassen im gesamten Projekt sprechen diese Namen an.
       Sie bleiben erhalten, zeigen aber jetzt auf die neue Palette. */
    --ps-green-dark: var(--ps-dark-green);
    --ps-green-soft: var(--ps-light-green);
    --ps-ink:   var(--ps-black);
    --ps-ink-2: #2E4A3E;                 /* Fliesstext sekundaer — 8.9:1 auf Beige */
    --ps-mute:  #6E8279;                 /* dekorativ / >=18px */
    /* Lesbare Varianten fuer kleinen Text (<18px) – erfuellen WCAG AA 4.5:1 auf hellem Grund. */
    --ps-mute-text:  #4E6A5F;            /* 5.4:1 auf Beige */
    /* Gruener Textakzent. War #3B7D46 und damit auf Beige (4.57:1) und --ps-surface
       (4.84:1) knapp AA-konform — aber auf --ps-paper nur 4.23:1 und auf
       --ps-light-green 3.98:1. Genau dort steht er als 12-px-Tag (.warum-tag,
       .value-card-tag, .preise-foot-l). #35723F erfuellt AA auf allen vier hellen
       Flaechen: Beige 5.30 · Surface 5.60 · Paper 4.90 · Light-Green 4.61.
       PFLEGE: identisch im kritischen Inline-CSS in fragments/head.html. */
    --ps-green-text: #35723F;            /* gruener Textakzent — >=4.6:1 auf allen hellen Flaechen */
    /* Statusfarben sind als Flaechen-/Randakzente gedacht und fallen als kleiner Text
       durch: --ps-warning erreicht auf Surface nur 2.9:1, --ps-error auf Paper 4.499:1.
       Fuer Label- und Fliesstext deshalb diese Varianten nehmen (>=4.5:1 auf Beige,
       Paper UND Surface); --ps-warning/--ps-error bleiben fuer Raender und Punkte. */
    --ps-warning-text: #8A5D0F;          /* 4.9:1 auf Paper, 5.6:1 auf Surface */
    --ps-warning-on-dark: #DFAE5C;       /* Warnfarbe auf dunklen Karten, 5.5:1 */
    --ps-error-on-dark:   #E08C8C;       /* Fehlerfarbe auf dunklen Karten, 5.2:1 bis 6.8:1 */
    --ps-error-text:   #9E3535;          /* 5.9:1 auf Paper, 6.8:1 auf Surface */
    --ps-line:  #E9DCD0;                 /* feine Trennlinie auf Beige */
    --ps-line-dark: rgba(255, 243, 233, 0.18); /* Trennlinie auf Schwarzgruen */
    --ps-paper: #F8EADD;                 /* ruhige Sektionsflaeche */
    --ps-cream: var(--ps-beige);
    --ps-surface: #FFFBF6;               /* Kartenflaeche, waermer als Weiss */
    /* Neutrale Buehne fuer FREMDE Logos (Kundenreferenzen). Bewusst reinweiss und
       nicht --ps-surface: mehrere Kundenlogos tragen einen deckend weissen Grund im
       Asset (Stadt Herne, Herne.Business, IHK, DETEK). Auf der warmen Kartenflaeche
       zeichnete sich dieser Kasten sichtbar ab. Freistellen waere eine Bearbeitung
       der fremden Marke und ist markenrechtlich nicht zulaessig. */
    --ps-logo-stage: #FFFFFF;
    --ps-rust:  var(--ps-error);

    --pad-x: clamp(20px, 4.4vw, 64px);
    --display-size: clamp(3.25rem, 7vw, 7rem);
    --h1-size: clamp(2.75rem, 5vw, 5rem);
    --h2-size: clamp(2.1rem, 3.8vw, 3.75rem);
    --h3-size: clamp(1.5rem, 2.3vw, 2.25rem);
    --lead-size: clamp(1.125rem, 1.5vw, 1.375rem);
    --body-size: 1rem;

    --ps-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Ecken & Schatten */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --ps-shadow: 0 20px 50px rgba(0, 33, 22, 0.08);
    --ps-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Inhaltsbreiten */
    --ps-container: 1440px;
    --ps-container-wide: 1600px;

    /* Spacing-System */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;
}

* { box-sizing: border-box; }

/* Skip-Link: fuer Tastatur/Screenreader – erscheint erst bei Fokus, springt zu <main id="main"> */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--ps-ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--ps-green);
    outline-offset: 2px;
}
html, body { margin: 0; padding: 0; }
html { background: var(--ps-beige); color-scheme: light; }
body {
    font-family: var(--ps-font);
    background: transparent;
    color: var(--ps-black);
    font-size: var(--body-size);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, .btn { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── Dekoratives Hintergrundnetz (js/ps-background-mesh.js) ──
   Liegt viewport-fixed hinter der gesamten Seite und bleibt beim Scrollen stehen.
   Das funktioniert nur mit dem Zusammenspiel oben: html traegt den Beige-Hintergrund,
   body ist transparent — sonst verdeckt der body-Hintergrund das Canvas bei z-index:-1.
   Das Element gibt das nav-Fragment als erstes Kind des Body aus; als Kind eines
   positionierten Containers waere es in dessen Stacking Context gefangen.

   width/height in Prozent (nicht 100vw/100vh): bezieht sich bei fixed auf den
   Viewport OHNE Scrollbar und kann keinen horizontalen Scroll ausloesen. Die
   Angaben sind Pflicht — die width/height-ATTRIBUTE, die das Skript auf dem Canvas
   setzt, wirken sonst als Presentational Hints und halten es auf Pixelgroesse.
   PFLEGE: gespiegelt im kritischen Inline-CSS in website/fragments/head.html. */
#ps-bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
    pointer-events: none;
    opacity: 0;
    animation: psMeshIn .45s var(--ps-ease) .1s both;
}
/* .55 zog das Netz optisch vor den Inhalt; .40 haelt es dort, wo ein Hintergrund
   hingehoert. PFLEGE: identisch im kritischen Inline-CSS in fragments/head.html. */
@keyframes psMeshIn { from { opacity: 0; } to { opacity: .40; } }
/* Muss zur Abbruchgrenze in ps-background-mesh.js passen: dort startet das Skript
   unter 900px nicht, hier faellt das leere Canvas ganz weg. */
@media (max-width: 900px) { #ps-bg-mesh { display: none; } }
@media (prefers-reduced-motion: reduce) { #ps-bg-mesh { display: none; } }
/* Bilder liegen in <picture> (AVIF → WebP → JPG/PNG). display:contents nimmt den
   Wrapper aus dem Layoutbaum, damit alle bestehenden Regeln (`.x img { height:100% }`,
   Flex-/Grid-Kinder) weiter gegen den Bildcontainer greifen — wie ohne <picture>. */
picture { display: contents; }
/* Pflicht-Begleiter zu display:contents — Chrome setzt <source> NICHT auf display:none
   (die UA-Regel deckt source nicht ab). Ohne diese Zeile loest display:contents das
   picture-Element auf und JEDES <source> wird zu einem eigenen, leeren Flex- oder
   Grid-Item des Elternelements. Sichtbar wurde das in .home-founder-card: dort verteilt
   justify-content:space-between den Platz auf die Phantom-Items, und das Label
   „Inhaber · Pixelschnitzel" rutschte aus der oberen Ecke in die Kartenmitte — genau
   dorthin, wo der Verlauf es nicht mehr abdeckt. Mit einer zweiten <source> (AVIF +
   WebP) wurde es entsprechend schlimmer.
   Betrifft jedes <picture> in einem Flex-/Grid-Container, nicht nur diese Karte. */
source { display: none; }

::selection { color: var(--ps-black); background: var(--ps-light-green); }
/* Fokusring: deckendes --ps-dark-green statt der frueheren 45-%-Transparenz des
   Markengruens. Die transparente Fassung ergab gegen Beige gemischt #C6DAA1 und
   damit 1.38:1 — WCAG 2.4.11/1.4.11 verlangen 3:1, der Ring war auf hellem Grund
   praktisch unsichtbar. #418C4E erreicht gegen Beige 3.78:1 und gegen die
   Kartenflaeche --ps-surface 4.01:1 — genug fuer einen Rahmen (3:1), NICHT genug
   fuer kleinen Text (4.5:1). Fuer Text bleibt --ps-green-text zustaendig.
   Der zweite, helle Ring liegt AUSSEN und trennt den dunklen Ring von dunklen
   Flaechen (dunkle Baender, .btn-primary) — dort waere Dunkelgruen auf
   --ps-black sonst zu schwach. Zwei Ringe uebereinander statt zweier Regelsaetze:
   es gibt keine zuverlaessige CSS-Abfrage fuer die Helligkeit des Hintergrunds.
   PFLEGE: identisch im kritischen Inline-CSS in fragments/head.html spiegeln. */
:focus-visible {
    outline: 3px solid var(--ps-dark-green);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 243, 233, 0.85);
}

/* Uebergangs-Utilities: im CI 2026 gibt es nur Space Grotesk. Die Klassen bleiben,
   weil Unterseiten sie im Markup tragen — sie setzen jetzt Label- bzw. Display-Look
   statt einer zweiten Schriftfamilie. */
.mono {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.serif { font-style: normal; font-weight: 700; letter-spacing: -0.03em; }

/* ─── LOGO ─── */
/* width:auto ist Pflicht: es überschreibt das width-Attribut der Logo-imgs
   (CLS-Platzhalter) — sonst verzerrt die fixe CSS-Höhe das Logo. */
.logo { display: block; width: auto; height: auto; border: 0 !important; outline: none;
    background: transparent !important; }
/* Schutzraum: das Logo bekommt rundherum mindestens Emblem-Hoehe Luft. */
/* 56px statt 38px: die Nav traegt seit 08/2026 das Sekundaerlogo mit Claim
   (Seitenverhaeltnis 4.28:1 statt 8.67:1). Bei 38px war der Claim nicht mehr zu
   entziffern — design-system.md warnt genau davor. Die Nav-Leiste ist 84px hoch,
   56px lassen also oben und unten je 14px Luft.
   PFLEGE: identisch im kritischen Inline-CSS in fragments/head.html. */
.logo.nav    { height: 56px; }
.logo.footer { height: 84px; max-width: 100%; }

.section   { padding-inline: var(--pad-x); }
.container { max-width: 1600px; margin-inline: auto; }

/* ════════ NAV ════════ */
.nav {
    position: sticky;
    top: 0;
    background: var(--ps-cream);
    z-index: 10;
    padding-top: 10px;
}
.nav-inner {
    height: 84px;
    padding-inline: var(--pad-x);
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border ersetzt durch inset shadow — so kann das Logo-Element ihn lokal abdecken */
    box-shadow: inset 0 -1px 0 var(--ps-line);
}
/* Logo-Wrapper: streckt sich auf volle Nav-Höhe und überdeckt den inset-Border */
.nav-logo-wrap {
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--ps-cream);
    padding-right: 16px;
    position: relative;
    z-index: 1;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 36px);
    font-size: 15px;
    color: var(--ps-ink-2);
    font-weight: 500;
}
.nav-links a {
    position: relative;
    padding-block: 6px;
    transition: color 0.15s;
}
.nav-links a:hover { color: var(--ps-ink); }
.nav-links a.active {
    color: var(--ps-ink);
    font-weight: 600;
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--ps-green-dark);
    border-radius: 1px;
}

/* ─── Nav Dropdown ─── */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-item > a::after {
    content: '⌄';
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    transform: translateY(-2px);
    opacity: 0.7;
}
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 280px;
    padding: 12px;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--ps-shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    z-index: 20;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -20px; left: 0; right: 0;
    height: 20px;
}
.nav-dropdown a {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ps-ink-2);
    border-radius: 10px;
    transition: background 0.12s, color 0.12s;
}
.nav-dropdown a:hover {
    background: var(--ps-paper);
    color: var(--ps-ink);
}
.nav-dropdown a .sub {
    display: block;
    font-size: 12px;
    /* --ps-mute ist laut Token-Kommentar erst ab 18px zulaessig; hier stehen 12px. */
    color: var(--ps-mute-text);
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 0;
}
.nav-cta {
    background: var(--ps-black);
    color: var(--ps-beige);
    border: 1px solid var(--ps-black);
    border-radius: var(--radius-md);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ─── Nav Actions (right side) ─── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Unified icon-only button — Phone / WhatsApp / LinkedIn */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0, 33, 22, 0.5);
    background: transparent;
    color: var(--ps-ink-2);
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.nav-icon:hover { transform: translateY(-1px); }
.nav-icon-phone:hover    { color: var(--ps-green-text); border-color: var(--ps-green-dark); background: var(--ps-green-soft); }
.nav-icon-whatsapp:hover { color: #0B6B5F;            border-color: #128C7E;            background: rgba(37,211,102,0.12); }
.nav-icon-linkedin:hover { color: #0A66C2;            border-color: #0A66C2;            background: #E8F0FE; }
.nav-icon svg { display: block; flex-shrink: 0; }

/* ─── Language switcher (DE ⇄ EN) ─── */
.nav-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 33, 22, 0.5);
    background: transparent;
    color: var(--ps-ink-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.nav-lang:hover {
    color: var(--ps-green-dark);
    border-color: var(--ps-green-dark);
    background: var(--ps-green-soft);
    transform: translateY(-1px);
}
.nav-mobile-lang {
    display: block;
    padding: 16px 0 4px;
    color: var(--ps-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

/* ─── Mobile Nav Burger ─── */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid rgba(0, 33, 22, 0.5);
    border-radius: 12px;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0;
}
.nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ps-ink);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ─── Mobile Nav Panel ─── */
.nav-mobile-panel {
    display: none;
    flex-direction: column;
    background: var(--ps-surface);
    border-top: 1px solid var(--ps-line);
    padding: 16px var(--pad-x) 24px;
    gap: 4px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
}
.nav-mobile-panel.is-open { display: flex; }
.nav-mobile-panel > a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ps-ink-2);
    padding: 10px 0;
    border-bottom: 1px solid var(--ps-line);
    text-decoration: none;
}
.nav-mobile-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ps-line);
    padding-bottom: 4px;
}
.nav-mobile-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ps-mute-text);
    padding: 12px 0 4px;
}
.nav-mobile-group a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ps-ink-2);
    padding: 8px 0 8px 12px;
    text-decoration: none;
    border-left: 2px solid var(--ps-line);
    margin-left: 2px;
}
.nav-mobile-footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
}
.nav-mobile-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.nav-mobile-icons .nav-icon {
    width: 48px;
    height: 48px;
}
.nav-mobile-phone {
    font-size: 16px;
    font-weight: 700;
    color: var(--ps-ink);
    text-decoration: none;
    text-align: center;
}

/* ════════ HERO ════════ */
.hero {
    padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(56px, 6vw, 88px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    max-width: 1600px;
    margin-inline: auto;
}
.eyebrow {
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--ps-green);
    flex-shrink: 0;
}
/* Auf dunklem Grund traegt Hellgruen den Label-Text (Beige waere zu laut). */
.ki .eyebrow, .deliver-inner .eyebrow, .wakeup-inner .eyebrow,
.book-stub .eyebrow, .tco-good .eyebrow { color: var(--ps-light-green); }
.hero h1 {
    font-size: var(--h1-size);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}
.hero h1 em {
    color: var(--ps-dark-green);
    font-style: normal;
    font-weight: 700;
}
.hero-lead {
    font-size: var(--lead-size);
    line-height: 1.6;
    color: var(--ps-ink-2);
    max-width: 52ch;
    margin-top: var(--space-5);
    text-wrap: pretty;
}
.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}

/* ════════ BUTTONS ════════ */
.btn {
    border-radius: var(--radius-md);
    padding: 0.9rem 1.35rem;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms var(--ps-ease),
                border-color 180ms var(--ps-ease),
                color 180ms var(--ps-ease),
                transform 180ms var(--ps-ease);
}
.btn:hover { transform: translateY(-1px); }

/* Gruen = primaere Handlungsaufforderung auf hellen Flaechen. */
.btn-green {
    background: var(--ps-green);
    border-color: var(--ps-green);
    color: var(--ps-black);
}
.btn-green:hover {
    background: var(--ps-dark-green);
    border-color: var(--ps-dark-green);
    color: var(--ps-beige);
}
/* Dunkel = primaere Handlung auf gruenen/hellgruenen Flaechen (z. B. CTA-Band). */
.btn-primary {
    background: var(--ps-black);
    border-color: var(--ps-black);
    color: var(--ps-beige);
}
.btn-primary:hover {
    background: var(--ps-dark-green);
    border-color: var(--ps-dark-green);
}
/* Sekundaer */
.btn-ghost {
    background: transparent;
    color: var(--ps-black);
    /* Der Rand ist die einzige Begrenzung dieses Buttons und damit eine
       UI-Komponente nach WCAG 1.4.11 (3:1). Bei .3 Alpha waren es 1.92:1. */
    border-color: rgba(0, 33, 22, 0.5);
}
.btn-ghost:hover { border-color: var(--ps-black); background: rgba(0, 33, 22, 0.04); }
/* Sekundaer auf dunklem Grund */
.btn-on-dark {
    background: transparent;
    color: var(--ps-beige);
    border-color: rgba(255, 243, 233, 0.4);
}
.btn-on-dark:hover { border-color: var(--ps-beige); background: rgba(255, 243, 233, 0.08); }

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover { transition: none; transform: none; }
}

/* ════════ PAGE ANIMATIONS ════════
   Kurze Wege, kurze Dauern. Lange Flugbahnen (30 px+) und Dauern jenseits einer
   halben Sekunde lassen jede Sektion beim Scrollen nachschwingen — die Seite wirkt
   weich statt gesetzt. Alles hier bewegt ausschliesslich opacity und transform,
   laeuft also im Compositor und loest kein Layout aus. */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none;                    }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: none;                    }
}

/* Hero text — staggered on page load.
   Perf-Constraint: H1 (meist nth-child(2)) und .hero-image sind LCP-Kandidaten —
   ihre Delays MÜSSEN 0s bleiben (erster Frame > opacity 0 zählt als Paint).
   Höhere Delays schieben LCP und Speed Index messbar nach hinten. */
.hero > div > * {
    animation: fadeInUp 0.34s var(--ps-ease) both;
}
.hero > div > *:nth-child(1) { animation-delay: 0s; }
.hero > div > *:nth-child(2) { animation-delay: 0s; }
.hero > div > *:nth-child(3) { animation-delay: 0.06s; }
.hero > div > *:nth-child(4) { animation-delay: 0.12s; }
.hero > div > *:nth-child(5) { animation-delay: 0.18s; }
/* .hero-image steht bewusst zweimal: hier die Animation, weiter unten das Layout.
   Zusammenlegen geht nicht. Der prefers-reduced-motion-Reset ein paar Zeilen tiefer
   setzt animation:none; stuende die Animation erst im spaeteren Layout-Block, wuerde
   sie den Reset ueberschreiben und die Bewegung liefe trotz Systemeinstellung. */
.hero-image {
    animation: fadeInRight 0.38s var(--ps-ease) 0s both;
}

/* Scroll reveal utility.
   Der Weg ist bewusst kurz: 12 px reichen als Hinweis "hier kommt etwas". Groessere
   Distanzen kollidieren mit der Scrollbewegung selbst — der Block zieht dann sichtbar
   hinter dem Finger her und kommt erst nach dem Scrollstopp zur Ruhe. */
/* Reveal-Muster. Die Dauer ist bewusst kurz: der Effekt soll Orientierung geben, nicht
   Inhalt vorenthalten. Bei 320 ms plus Staffelung stand die Seite beim Scrollen sichtbar
   im Zwischenzustand. Untere Grenze ist das Designsystem (160–280 ms). */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 240ms var(--ps-ease), transform 240ms var(--ps-ease);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal-delay="3"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
    .hero > div > *, .hero-image, [data-reveal] {
        animation: none; transition: none; opacity: 1; transform: none;
    }
}

/* ════════ TRUST ROW ════════ */
.trust-row {
    margin-top: 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ps-mute-text);
    font-size: 13px;
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}
.avatars { display: flex; }
.avatars span {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 2px solid var(--ps-cream);
    margin-left: -10px;
}
.avatars span:first-child { margin-left: 0; }

/* ════════ HERO IMAGE ════════ */
.hero-image {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: min(72vh, 640px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--ps-black);
    justify-self: end;
    width: clamp(0px, 100%, 560px);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    background: var(--ps-beige);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.hero-badge .label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
    font-weight: 600;
}
.hero-badge .title {
    font-size: 1rem; font-weight: 700; margin-top: 4px;
    letter-spacing: -0.015em; color: var(--ps-black);
}
.hero-badge .icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: var(--radius-pill);
    background: var(--ps-green);
    color: var(--ps-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ════════ TRUST STRIP — scrolling marquee ════════ */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid var(--ps-line);
    border-bottom: 1px solid var(--ps-line);
    padding: 26px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Langsamer als frueher (32s): das Band steht direkt unter dem Hero und zog bei
       hoeherem Tempo den Blick vom Einstieg weg. --marquee-speed lag bisher als
       ungenutzte Variable im Mobil-Block — jetzt haengt die Animation wirklich daran. */
    animation: marquee-scroll var(--marquee-speed, 48s) linear infinite;
    will-change: transform;
}
/* Der Loop verschiebt exakt eine Haelfte (-50%). Waere eine Haelfte schmaler als der
   Viewport, klaffte am Sprung eine Luecke — genau das passiert, seit im Band nur noch
   vier Argumente stehen (die drei Hero-Kennzahlen sind raus, sie standen 100px darueber
   schon als KPI-Zeile). min-width haelt jede Haelfte mindestens bildschirmbreit,
   space-around verteilt den Rest.
   Zum padding-right: es macht den Abstand am Loop-Sprung exakt so gross wie zwischen
   zwei Items. space-around laesst an den Raendern je die Haelfte eines Innenabstands
   stehen — zusammen mit dem padding ergibt das denselben Wert wie innen, und der
   Uebergang von Haelfte zu Haelfte ist nicht mehr zu sehen. */
.marquee-half {
    display: flex;
    align-items: center;
    gap: 56px;
    justify-content: space-around;
    min-width: 100vw;
    padding-right: 56px;
}
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-item {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: var(--ps-ink-2);
}
.marquee-item::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--ps-green);
    flex-shrink: 0;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}
/* WCAG 2.2.2 verlangt fuer automatisch bewegte Inhalte laenger als 5 s einen Weg,
   sie anzuhalten. Vorhanden war nur die Hover-Pause oben — die es auf Touch-Geraeten
   gar nicht gibt. Ohne Zeigegeraet laeuft das Band deshalb gar nicht erst los und
   die Argumente stehen als umbrechende Liste da; die Aussage bleibt vollstaendig,
   nur ohne Bewegung. Auf Geraeten MIT Zeigegeraet bleibt Hover die Pause.
   Offen bleibt der reine Tastaturnutzer am Desktop: fuer ihn ist
   prefers-reduced-motion der Schalter. Vermerkt in
   docs/seo-conversion-implementation-report.md. */
@media (hover: none) {
    .marquee-wrapper { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; width: 100%; }
    .marquee-half { min-width: 0; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding-right: 0; }
    /* Die zweite Haelfte existiert nur fuer den Loop. Ohne Loop ist sie Dopplung. */
    .marquee-track > .marquee-half + .marquee-half { display: none; }
    .marquee-half > .marquee-item[aria-hidden="true"] { display: none; }
}

/* ════════ GENERIC SECTION ════════ */
.section-eyebrow {
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.section-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--ps-green);
    flex-shrink: 0;
}
h2 {
    font-size: var(--h2-size);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}
/* Akzent in Headlines: gleiche Schrift, Markenfarbe — keine zweite Schriftfamilie. */
h2 em { font-style: normal; font-weight: 700; color: var(--ps-dark-green); }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: clamp(24px, 3vw, 64px);
    margin-bottom: clamp(32px, 4vw, 64px);
    flex-wrap: wrap;
}
.section-meta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
}
.section-lead {
    font-size: var(--lead-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    max-width: 720px;
    margin-top: 24px;
    text-wrap: pretty;
}

/* ════════ SERVICES GRID — Bento Motion ════════ */
.services { margin-top: clamp(80px, 10vw, 140px); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.service {
    padding: var(--space-6) var(--space-6) var(--space-7);
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.service:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.service-num {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ps-dark-green);
}
.service-tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    margin-top: var(--space-5);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.service-tag::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ps-green);
    flex-shrink: 0;
}
.service-title {
    font-size: var(--h3-size);
    line-height: 1.15;
    font-weight: 700;
    margin: var(--space-3) 0 0;
    letter-spacing: -0.025em;
    color: var(--ps-black);
}
.service-title em { font-style: normal; font-weight: 700; color: var(--ps-dark-green); }
.service-body {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin-top: 16px;
}
.service-link {
    margin-top: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ps-black);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: color 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.service-link:hover { color: var(--ps-dark-green); border-bottom-color: var(--ps-dark-green); }

/* ════════ KI / DARK BLOCK ════════ */
.ki { margin-top: clamp(80px, 10vw, 160px); }
.ki-inner {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-radius: var(--radius-xl);
    padding: clamp(36px, 5vw, 80px) clamp(28px, 4.5vw, 72px);
    position: relative;
    overflow: hidden;
}
/* Glow entfaellt im CI 2026 — das Band traegt sich ueber Flaeche und Typo. */
.ki-glow { display: none; }
.ki-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    position: relative;
}
.ki .section-eyebrow { color: var(--ps-light-green); }
.ki h2 { color: var(--ps-beige); }
.ki h2 em { color: var(--ps-green); }
.ki-lead {
    font-size: var(--lead-size);
    line-height: 1.6;
    color: rgba(255, 243, 233, 0.78);
    margin-top: var(--space-5);
    max-width: 52ch;
}
.ki-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ki-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ps-line-dark);
    border: 1px solid var(--ps-line-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ki-stat {
    padding: clamp(20px, 2.5vw, 36px);
    background: var(--ps-black);
}
.ki-stat-k {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-light-green);
}
.ki-stat-v {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 243, 233, 0.62);
    margin-top: var(--space-3);
    line-height: 1.35;
}

/* ════════ REFERENZEN ════════ */
.refs { margin-top: clamp(80px, 10vw, 160px); }
.refs .section-head { margin-bottom: 48px; }
.ref-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ps-black);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: color 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.ref-link:hover { color: var(--ps-dark-green); border-bottom-color: var(--ps-dark-green); }
.refs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ref-card {
    background: var(--ps-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ps-line);
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.ref-card:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.ref-image {
    aspect-ratio: 4 / 3;
    position: relative;
    background: var(--ps-paper);
    border-bottom: 1px solid var(--ps-line);
}
.ref-image img { width: 100%; height: 100%; object-fit: cover; }
.ref-tag {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--ps-beige);
    color: var(--ps-black);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}
.ref-body { padding: var(--space-5); }
.ref-meta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
}
.ref-name {
    font-size: 1.375rem;
    font-weight: 700;
    margin: var(--space-2) 0 0;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ps-black);
}
.ref-cta {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ps-line);
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ps-black);
}
.ref-card:hover .ref-cta { color: var(--ps-dark-green); }

/* ════════ PREISE (Fragment) ════════ */
.preise { margin-top: clamp(80px, 10vw, 140px); }
.preise-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(24px, 3vw, 64px);
    margin-bottom: clamp(36px, 4vw, 56px);
    align-items: end;
}
.preise-head h2 em { font-style: normal; font-weight: 700; color: var(--ps-dark-green); }
.preise-lead {
    font-size: var(--lead-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin: 0;
    text-wrap: pretty;
}
.preise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.preise-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.preise-card:hover { transform: translateY(-2px); border-color: var(--ps-green); }
/* Hervorgehobene Karte: flaechig hellgruen statt Verlauf. */
.preise-card-accent {
    background: var(--ps-light-green);
    border-color: var(--ps-green);
}
.preise-tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.preise-card-accent .preise-tag { color: var(--ps-ink-2); }
.preise-tag::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--ps-green);
    border-radius: 50%;
}
.preise-k {
    font-weight: 700;
    font-size: clamp(1.875rem, 3.2vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-black);
    margin-top: 4px;
}
.preise-k-soft {
    font-weight: 700;
    font-size: clamp(1.625rem, 2.6vw, 2.375rem);
    color: var(--ps-dark-green);
    letter-spacing: -0.03em;
}
.preise-body {
    margin: 4px 0 0;
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
}
.preise-foot {
    margin-top: clamp(36px, 5vw, 64px);
    padding: clamp(28px, 4vw, 48px);
    background: var(--ps-paper);
    border-radius: var(--radius-xl);
}
.preise-foot-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
}
.preise-foot-cell { display: flex; flex-direction: column; gap: 10px; }
.preise-foot-l {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
}
.preise-foot-cell p {
    margin: 0;
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
}
.preise-foot-cell strong { color: var(--ps-ink); font-weight: 600; }
.preise-cta {
    margin-top: clamp(28px, 3.5vw, 40px);
    padding-top: 24px;
    border-top: 1px solid var(--ps-line);
}
@media (max-width: 1024px) {
    .preise-head { grid-template-columns: 1fr; }
    .preise-grid { grid-template-columns: 1fr; }
    .preise-foot-points { grid-template-columns: 1fr; }
}

/* ════════ CTA BLOCK ════════ */
.cta { margin-top: clamp(80px, 10vw, 160px); }
.cta-inner {
    background: var(--ps-green);
    border-radius: var(--radius-xl);
    padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 72px);
    position: relative;
    overflow: hidden;
}
.cta-watermark {
    position: absolute;
    right: clamp(20px, 4vw, 60px); top: 32px;
    font-weight: 700;
    letter-spacing: -0.045em;
    font-size: clamp(120px, 18vw, 240px);
    color: rgba(0, 33, 22, 0.08);
    line-height: 0.8;
    pointer-events: none;
    user-select: none;
}
.cta-inner .content { position: relative; max-width: 720px; }
.cta .section-eyebrow { color: var(--ps-black); }
.cta .section-eyebrow::before { background: var(--ps-black); }
.cta h2 { color: var(--ps-ink); }
/* Das CTA-Band liegt auf --ps-green. Der globale Akzent h2 em ist --ps-dark-green
   und erreicht darauf nur 1.81:1 — die betonte Zeile war fast nicht zu lesen. */
.cta h2 em { color: var(--ps-black); }
.cta-lead {
    font-size: var(--lead-size);
    line-height: 1.6;
    color: rgba(0, 33, 22, 0.78);
    margin-top: var(--space-5);
    max-width: 52ch;
}
/* Kanaele unter den CTA-Buttons: nicht jeder will einen Termin, manche wollen
   einfach kurz schreiben. Steht auf Markengruen, deshalb Schwarz statt --ps-ink-2. */
.cta-channels {
    margin: var(--space-5) 0 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: .9375rem;
    color: rgba(0, 33, 22, 0.72);
}
.cta-channels a {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: 600;
    color: var(--ps-black);
    border-bottom: 1px solid rgba(0, 33, 22, 0.3);
    transition: border-color 180ms var(--ps-ease);
}
.cta-channels a:hover { border-bottom-color: var(--ps-black); }
.cta-channels svg { flex-shrink: 0; }

/* ════════ METHOD STEPS (für Pillar-Pages) ════════ */
.method { margin-top: clamp(80px, 10vw, 160px); }
.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.method-step {
    padding: var(--space-6) var(--space-6) var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.method-step:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.method-step-num {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.method-step-num::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ps-green);
    flex-shrink: 0;
}
.method-step-title {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    margin: var(--space-4) 0 var(--space-3);
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ps-black);
}
.method-step-body {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
}

/* ════════ FEATURE LIST ════════ */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    gap: 14px;
}
.feature-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
}
.feature-list li::before {
    content: '✓';
    color: var(--ps-green-dark);
    font-weight: 700;
    line-height: 1.55;
}

/* ════════ FAQ ════════ */
.faq { margin-top: clamp(80px, 10vw, 160px); }
.faq-list {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--ps-line);
}
.faq-item {
    border-bottom: 1px solid var(--ps-line);
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    color: var(--ps-green-dark);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 820px;
}

/* ════════ TWO-COL TEXT BLOCK ════════ */
.two-col {
    margin-top: clamp(80px, 10vw, 160px);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.two-col-side .section-eyebrow { margin-bottom: 12px; }
.two-col-side h2 { font-size: clamp(28px, 3.4vw, 44px); }
.two-col-main p {
    font-size: var(--lead-size);
    line-height: 1.6;
    color: var(--ps-ink-2);
    margin: 0 0 24px;
}
.two-col-main p:last-child { margin-bottom: 0; }

/* ════════ FOOTER ════════ */
footer {
    margin-top: clamp(80px, 8vw, 120px);
    padding: 56px var(--pad-x) 48px;
    border-top: 1px solid var(--ps-line);
    max-width: 1600px;
    margin-inline: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
    gap: 40px;
}
.footer-address {
    font-size: 14px;
    color: var(--ps-ink-2);
    line-height: 1.6;
    margin-top: 20px;
}
.footer-col-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.footer-col ul { padding: 0; margin: 0; list-style: none; }
.footer-col li { font-size: 14px; color: var(--ps-ink-2); margin-bottom: 8px; }
.footer-col li a:hover { color: var(--ps-green-dark); }
.footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--ps-line);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ps-mute-text);
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom-links { display: flex; gap: 24px; }

/* ════════ BREADCRUMB ════════ */
.crumb {
    max-width: 1600px;
    margin-inline: auto;
    padding: 20px var(--pad-x) 0;
    font-size: 13px;
    /* 13px auf Beige: --ps-mute liefert 3.75:1, --ps-mute-text 5.42:1. */
    color: var(--ps-mute-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.crumb a:hover { color: var(--ps-ink); }
.crumb .sep { color: var(--ps-line); }
.crumb .current { color: var(--ps-ink); font-weight: 600; }

/* ════════ HERO ASIDE (für Pillar-Pages) ════════ */
.hero-aside {
    display: grid;
    gap: 20px;
    justify-self: end;
    width: clamp(0px, 100%, 560px);
}
.hero-aside-image {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ps-black);
}
.hero-aside-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-aside-badge {
    position: absolute;
    left: 14px; bottom: 14px;
    background: var(--ps-beige);
    color: var(--ps-black);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}
.hero-aside-body {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}
.hero-aside-body h3 {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-mute-text);
    font-weight: 600;
}
/* Zitat wie .home-founder-quote: gruene Kante, aufrechte Hausschrift. */
.hero-aside-body .quote {
    margin-top: var(--space-4);
    padding-left: var(--space-4);
    border-left: 3px solid var(--ps-green);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--ps-ink-2);
}
.hero-aside-body .by {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-aside-body .by-avatar {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--ps-ink);
    color: var(--ps-beige);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.hero-aside-body .by-name { font-size: 14px; font-weight: 600; }
.hero-aside-body .by-role { font-size: 12px; color: var(--ps-mute-text); margin-top: 2px; }

/* ════════ MYTHEN-GRID ════════ */
.mythen { margin-top: clamp(80px, 10vw, 140px); }
.myth-intro {
    font-size: var(--lead-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    max-width: 760px;
    margin: 0 0 48px;
    text-wrap: pretty;
}
.myth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.myth {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.myth-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-error);
}
.myth-quote {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--ps-ink-2);
    border-left: 3px solid var(--ps-error);
    padding-left: var(--space-4);
}
.myth-real { margin-top: 4px; padding-top: var(--space-4); border-top: 1px solid var(--ps-line); }
.myth-real-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    margin-bottom: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.myth-real-tag::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ps-green);
    flex-shrink: 0;
}
.myth-real-text {
    font-size: var(--body-size);
    line-height: 1.6;
    color: var(--ps-black);
}

/* ════════ IMAGE BREAK ════════ */
.image-break {
    margin-top: clamp(80px, 10vw, 140px);
    padding-inline: var(--pad-x);
    max-width: 1600px;
    margin-inline: auto;
}
.image-break-inner {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--ps-ink);
}
.image-break-inner img { width: 100%; height: 100%; object-fit: cover; }
.image-break-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 33, 22, 0.85) 0%, rgba(0, 33, 22, 0.4) 50%, transparent 100%);
}
.image-break-caption {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    right: clamp(24px, 4vw, 56px);
    bottom: clamp(28px, 4vw, 48px);
    color: var(--ps-beige);
}
.image-break-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-light-green);
    font-weight: 600;
    margin-bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.image-break-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--ps-green);
    flex-shrink: 0;
}
.image-break-title {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0;
    max-width: 900px;
}
.image-break-title em { font-style: normal; font-weight: 700; color: var(--ps-green); }

/* ════════ WARUM-GRID ════════ */
.warum { margin-top: clamp(80px, 10vw, 140px); }
.warum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* Zweispaltige Variante fuer die Abgrenzungsbloecke der Problemseiten
   (/erp-modernisierung, /excel-abloesen, /schnittstellen-integration,
   /ki-beratung-herne, /individualsoftware-herne). Zwei Karten in einem
   Vierer-Raster saehen aus wie ein halb gefuelltes Regal. Die bestehenden
   Media-Queries greifen weiter, weil die Klasse zusaetzlich zu .warum-grid
   steht — mit einer Ausnahme: der 1100px-Block weiter unten setzt .warum-grid
   auf zwei Spalten und stuende hier ohne Gegenregel spaeter in der Kaskade.
   Deshalb ist der Einspalter fuer .warum-grid--two dort mit eingetragen und
   NICHT hier. */
.warum-grid--two { grid-template-columns: 1fr 1fr; }

/* Belegkarte: ein realer Case als Beweis mitten auf einer Problemseite.
   Bewusst dunkel — sie ist der einzige Block dieser Seiten, der eine Zahl
   behauptet, und soll auch so gelesen werden. */
.proof-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    background: var(--ps-black);
    color: var(--ps-beige);
    border-radius: var(--radius-xl);
    padding: clamp(28px, 4vw, 64px);
}
.proof-card h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--h3-size);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
}
.proof-card h3 em { font-style: normal; color: var(--ps-light-green); }
.proof-card p { margin: 0 0 var(--space-5); line-height: 1.65; color: rgba(255, 243, 233, .82); }
.proof-card-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.proof-card-fact { display: flex; flex-direction: column; gap: 4px; }
.proof-card-fact .k {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-light-green);
}
.proof-card-fact .v { font-size: .875rem; line-height: 1.45; color: rgba(255, 243, 233, .78); }
@media (max-width: 900px) {
    .proof-card { grid-template-columns: 1fr; }
}
.warum-card {
    background: var(--ps-paper);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.warum-num {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-dark-green);
}
.warum-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    margin-top: var(--space-4);
}
.warum-title {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: var(--space-2) 0 var(--space-3);
    color: var(--ps-black);
}
.warum-body {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin: 0;
}

/* ════════ DELIVERABLES ════════ */
.deliver { margin-top: clamp(80px, 10vw, 140px); }
.deliver-inner {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-radius: var(--radius-xl);
    padding: clamp(36px, 5vw, 80px) clamp(28px, 4.5vw, 72px);
    position: relative;
    overflow: hidden;
}
.deliver-inner .section-eyebrow { color: var(--ps-light-green); }
.deliver-inner h2 { color: var(--ps-beige); }
.deliver-inner h2 em { color: var(--ps-green); }
.deliver-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 48px;
}
.deliver-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: rgba(255, 243, 233, 0.05);
    border: 1px solid var(--ps-line-dark);
}
.deliver-icon {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-light-green);
}
.deliver-title {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-2);
    color: var(--ps-beige);
    letter-spacing: -0.02em;
}
.deliver-body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255, 243, 233, 0.78);
    margin: 0;
}

/* ════════ WANN-LIST ════════ */
.wann { margin-top: clamp(80px, 10vw, 140px); }
.wann-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.wann-list { display: grid; gap: 1px; background: var(--ps-line); border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.wann-item {
    background: var(--ps-cream);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    align-items: center;
}
.wann-num {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ps-dark-green);
    line-height: 1;
}
.wann-text {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.45;
    color: var(--ps-ink);
    font-weight: 500;
}

/* ════════ PROZESS-CARDS ════════ */
.prozess { margin-top: clamp(80px, 10vw, 140px); }
.prozess-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.prozess-grid--three { grid-template-columns: repeat(3, 1fr); }
.prozess-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.prozess-card:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.prozess-num {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.prozess-num::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ps-green);
    flex-shrink: 0;
}
.prozess-title {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: var(--space-2) 0 0;
    line-height: 1.15;
    color: var(--ps-black);
}
.prozess-meta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
}
.prozess-body {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin: 8px 0 0;
}

/* ════════ FAQ GRID (Variant) ════════ */
.faq-grid {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--ps-line);
}
.faq-grid .q {
    border-bottom: 1px solid var(--ps-line);
}
.faq-grid .q summary {
    cursor: pointer;
    list-style: none;
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.faq-grid .q summary::-webkit-details-marker { display: none; }
.faq-grid .q summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    color: var(--ps-green-dark);
    flex-shrink: 0;
}
.faq-grid .q[open] summary::after { content: '–'; }
.faq-grid .q .a {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 820px;
}

/* ════════ WAKEUP (Dark Hook Section) ════════ */
.wakeup { margin-top: clamp(80px, 10vw, 140px); }
.wakeup-inner {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-radius: var(--radius-xl);
    padding: clamp(36px, 5vw, 88px) clamp(28px, 4.5vw, 72px);
    position: relative;
    overflow: hidden;
}
.wakeup-inner .section-eyebrow { color: var(--ps-light-green); }
.wakeup-inner h2 { color: var(--ps-beige); max-width: 900px; }
.wakeup-inner h2 em { color: var(--ps-rust); }
.wakeup-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
.wakeup-item {
    padding: var(--space-6);
    background: rgba(255, 243, 233, 0.05);
    border: 1px solid var(--ps-line-dark);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-4);
}
.wakeup-bullet {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ps-error);
    color: var(--ps-beige);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.wakeup-text {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.5;
    color: rgba(255, 243, 233, 0.9);
}
.wakeup-text strong {
    font-style: normal;
    color: var(--ps-light-green);
    font-weight: 700;
}

/* ════════ VS-TABELLE (Cloud vs. Lokal) ════════ */
.vs { margin-top: clamp(80px, 10vw, 140px); }
.vs-table {
    margin-top: clamp(32px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.vs-cell {
    padding: 22px 24px;
    border-bottom: 1px solid var(--ps-line);
    border-right: 1px solid var(--ps-line);
    display: flex;
    align-items: center;
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.45;
}
.vs-cell:nth-child(3n) { border-right: none; }
.vs-table > .vs-cell:nth-last-child(-n+3) { border-bottom: none; }
.vs-cell.vs-head {
    background: var(--ps-paper);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ps-black);
}
.vs-cell.vs-head .vs-head-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--ps-mute-text);
}
.vs-cell.vs-label {
    font-weight: 600;
    color: var(--ps-ink);
}
.vs-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.vs-pill.vs-bad  { background: rgba(181, 71, 71, 0.10); color: var(--ps-error-text); }
.vs-pill.vs-good { background: var(--ps-light-green); color: var(--ps-ink-2); }
.vs-pill.vs-mid  { background: var(--ps-paper); color: var(--ps-ink-2); }

/* ════════ USE-CASES (Branchen) ════════ */
.usecases { margin-top: clamp(80px, 10vw, 140px); }
.usecases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.usecase {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.usecase:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.usecase-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: var(--ps-light-green);
    color: var(--ps-dark-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.usecase-branch {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    margin-top: var(--space-2);
}
.usecase-title {
    font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0;
    color: var(--ps-black);
}
.usecase-body {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin: 0;
}
.usecase-quote {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ps-line);
    padding-left: var(--space-4);
    border-left: 3px solid var(--ps-green);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ps-ink-2);
    line-height: 1.55;
}

/* ════════ TECH-STACK ════════ */
.stack { margin-top: clamp(80px, 10vw, 140px); }
.stack-layers {
    display: grid;
    gap: 12px;
}
.stack-layer {
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    background: var(--ps-surface);
    display: grid;
    grid-template-columns: 140px 1fr 1.4fr;
    gap: var(--space-7);
    align-items: center;
    transition: border-color 180ms var(--ps-ease);
}
.stack-layer:hover { border-color: var(--ps-green); }
.stack-layer-num {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ps-dark-green);
}
.stack-layer-title {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
    line-height: 1.15;
    color: var(--ps-black);
}
.stack-layer-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ps-green-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.stack-layer-body {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
}
.stack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Auf den Problemseiten stehen dekorative Chips (Systeme) und Link-Chips
   (Weiterlesen) direkt untereinander. Ohne eigenen Zustand sind sie optisch
   nicht zu unterscheiden — semantisch sind sie es (echtes <a>), sichtbar nicht. */
a.stack-chip { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.stack-chip:hover { border-color: var(--ps-green); color: var(--ps-black); }
.stack-chip {
    background: var(--ps-paper);
    border: 1px solid var(--ps-line);
    color: var(--ps-ink-2);
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

/* ════════ TCO-RECHNUNG ════════ */
.tco { margin-top: clamp(80px, 10vw, 140px); }
.tco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.tco-card {
    padding: var(--space-7) var(--space-7) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tco-card.tco-bad {
    background: var(--ps-paper);
    border-color: var(--ps-line);
}
.tco-card.tco-good {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-color: var(--ps-black);
}
.tco-card.tco-good .tco-title { color: var(--ps-beige); }
.tco-card.tco-good .tco-body { color: rgba(255, 243, 233, 0.78); }
.tco-card.tco-good .tco-line { border-color: var(--ps-line-dark); }
.tco-card.tco-good .tco-row { color: rgba(255, 243, 233, 0.85); }
.tco-card.tco-good .tco-total { border-top-color: var(--ps-line-dark); }
.tco-card.tco-good .tco-total-k { color: var(--ps-light-green); }
.tco-card.tco-good .tco-total-label { color: rgba(255, 243, 233, 0.62); }
.tco-card.tco-good .tco-tag { color: var(--ps-light-green); }
.tco-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-error);
}
.tco-title {
    font-size: var(--h3-size);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.15;
    color: var(--ps-black);
}
.tco-body {
    font-size: 14px;
    color: var(--ps-ink-2);
    line-height: 1.5;
    margin: 0;
}
.tco-lines {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}
.tco-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ps-line);
    font-size: 14px;
}
.tco-line:last-child { border-bottom: none; padding-bottom: 0; }
.tco-row { color: var(--ps-ink); }
.tco-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.tco-total {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--ps-line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.tco-total-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-mute-text);
    font-weight: 600;
}
.tco-total-k {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ps-black);
}
.tco-disclaimer {
    margin-top: var(--space-5);
    font-size: 0.75rem;
    color: var(--ps-mute-text);
    text-align: center;
}

/* ════════ SETUP CHOICE (3 Karten) ════════ */
.setup-choice { margin-top: clamp(80px, 10vw, 140px); }
.setup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.setup-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-7) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.setup-card:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.setup-card.setup-card-highlight {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-color: var(--ps-black);
}
.setup-card-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
}
.setup-card-highlight .setup-card-tag { color: var(--ps-light-green); }
.setup-card-title {
    font-size: clamp(1.625rem, 2.4vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 4px 0 0;
    line-height: 1.08;
}
.setup-card-lead {
    font-size: var(--body-size);
    line-height: 1.55;
    color: var(--ps-ink-2);
    margin: 0 0 8px;
}
.setup-card-highlight .setup-card-lead { color: rgba(255, 243, 233, 0.78); }
.setup-card-meta {
    display: grid;
    gap: 14px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--ps-line);
}
.setup-card-highlight .setup-card-meta { border-top-color: var(--ps-line-dark); }
.setup-card-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: baseline;
}
.setup-card-row span {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
    font-weight: 600;
}
.setup-card-highlight .setup-card-row span { color: rgba(255, 243, 233, 0.62); }
.setup-card-row strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ps-black);
    line-height: 1.45;
}
.setup-card-highlight .setup-card-row strong { color: var(--ps-beige); }
.setup-footnote {
    margin-top: var(--space-6);
    font-size: 0.875rem;
    color: var(--ps-mute-text);
    line-height: 1.6;
    max-width: 880px;
    text-wrap: pretty;
}

/* ════════ MANIFEST ════════ */
.manifest { margin-top: clamp(80px, 10vw, 140px); }
.manifest-inner {
    padding: clamp(36px, 5vw, 80px) clamp(28px, 4.5vw, 72px);
    background: var(--ps-paper);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
.manifest-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.manifest-statement {
    font-size: var(--h3-size);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ps-black);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}
.manifest-statement em { font-style: normal; font-weight: 700; color: var(--ps-dark-green); }
.manifest-points {
    list-style: none;
    margin: 0;
    padding: 0;
}
.manifest-points li {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--ps-line);
}
.manifest-points li:last-child { border-bottom: 1px solid var(--ps-line); }
.manifest-points strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ps-black);
    margin-bottom: var(--space-2);
}
.manifest-points span {
    font-size: 0.9375rem;
    color: var(--ps-ink-2);
    line-height: 1.65;
}

/* ════════ BIG STATS ════════ */
.bigstats { margin-top: clamp(80px, 10vw, 140px); }
.bigstats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    border-top: 1px solid var(--ps-ink);
}
.bigstat {
    padding: 36px 28px 40px 0;
    border-right: 1px solid var(--ps-line);
}
.bigstat:last-child { border-right: none; padding-right: 0; }
.bigstat-k {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ps-black);
    letter-spacing: -0.045em;
}
.bigstat-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    margin-top: var(--space-5);
}
.bigstat-body {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.5;
    margin: 12px 0 0;
}

/* ════════ TIMELINE ════════ */
.timeline { margin-top: clamp(80px, 10vw, 140px); }
.timeline-list {
    position: relative;
    display: grid;
    gap: 32px;
}
.timeline-list::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--ps-line);
}
.timeline-item {
    display: grid;
    grid-template-columns: 56px 200px 1fr;
    gap: 24px;
    align-items: start;
    position: relative;
}
.timeline-dot {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--ps-green);
    border: 4px solid var(--ps-cream);
    box-shadow: 0 0 0 2px var(--ps-line);
    margin-left: 0;
    flex-shrink: 0;
    margin-top: 4px;
}
.timeline-date {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    padding-top: 8px;
}
.timeline-content h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-2);
    line-height: 1.15;
    color: var(--ps-black);
}
.timeline-content p {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

/* Inline-Links im Fliesstext. Die Basisregel ist `a { color: inherit; text-decoration: none }` —
   ohne diese Ergaenzung waere ein Link mitten im Absatz weder an der Farbe noch an einer
   Unterstreichung erkennbar (WCAG 1.4.1). --ps-green-text ist der kontrastsichere Gruenton
   fuer kleine Schrift; der Hover geht auf --ps-black, nicht auf das kontrastschwaechere
   --ps-dark-green. */
.timeline-content p a,
.case-story-body p a {
    color: var(--ps-green-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 180ms var(--ps-ease);
}
.timeline-content p a:hover,
.case-story-body p a:hover { color: var(--ps-black); }

/* ════════ LOGO WALL ════════ */
.logowall { margin-top: clamp(60px, 8vw, 100px); }
.logowall-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--ps-line);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.logowall-item {
    background: var(--ps-beige);
    aspect-ratio: 4 / 2;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ps-ink-2);
    text-align: center;
    padding: 12px;
    transition: background 180ms var(--ps-ease), color 180ms var(--ps-ease);
}
.logowall-item:hover { background: var(--ps-paper); color: var(--ps-ink); }

/* ════════ JOB CARDS ════════ */
.jobs { margin-top: clamp(80px, 10vw, 140px); }
.jobs-list {
    display: grid;
    gap: 12px;
}
.job {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-7);
    align-items: center;
    transition: transform 180ms var(--ps-ease), border-color 180ms var(--ps-ease);
}
.job:hover { transform: translateY(-2px); border-color: var(--ps-green); }
.job-meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
    margin-bottom: var(--space-2);
}
.job-meta .dot { width: 4px; height: 4px; background: var(--ps-mute); border-radius: 50%; }
.job-title {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-2);
    line-height: 1.15;
    color: var(--ps-black);
}
.job-body {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}
.job-cta {
    background: var(--ps-black);
    color: var(--ps-beige);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 180ms var(--ps-ease);
}
.job:hover .job-cta { background: var(--ps-dark-green); }

/* ════════ VALUE CARDS ════════ */
.values { margin-top: clamp(80px, 10vw, 140px); }
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.value-card {
    background: var(--ps-paper);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-7) var(--space-8);
    display: flex; flex-direction: column; gap: var(--space-3);
    position: relative;
    overflow: hidden;
}
.value-card-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
}
.value-card-title {
    font-size: var(--h3-size);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: var(--space-2) 0 var(--space-1);
    line-height: 1.15;
    color: var(--ps-black);
}
.value-card-body {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
    margin: 0;
}

/* ════════ CASE HERO ════════ */
.case-hero {
    margin-top: 24px;
    padding-inline: var(--pad-x);
    max-width: 1600px;
    margin-inline: auto;
}
.case-hero-image {
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--ps-black);
}
.case-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.case-meta-strip {
    margin-top: -1px;
    padding: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-bottom: 1px solid var(--ps-line);
    padding-bottom: 32px;
}
.case-meta-cell .case-meta-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.case-meta-cell .case-meta-val {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ps-black);
    line-height: 1.35;
}

/* ════════ CASE STORY BLOCKS ════════ */
.case-story { margin-top: clamp(80px, 10vw, 140px); }
.case-story-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid var(--ps-line);
}
.case-story-grid:last-child { border-bottom: none; }
.case-story-tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    font-weight: 600;
    padding-top: 8px;
}
.case-story-body h3 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-4);
    line-height: 1.15;
    color: var(--ps-black);
}
.case-story-body p {
    font-size: var(--lead-size);
    line-height: 1.6;
    color: var(--ps-ink-2);
    margin: 0 0 18px;
}
.case-story-body p:last-child { margin-bottom: 0; }
.case-story-body ul {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 12px;
}
/* Die Bestands-Cases enden mit der Liste, deshalb kam der Fall nie vor. Auf
   /referenzen/move2beruf folgt danach noch ein Absatz, und der klebte an der
   letzten Zeile. */
.case-story-body ul + p { margin-top: var(--space-5); }
.case-story-body ul li {
    padding-left: 24px;
    position: relative;
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.55;
}
.case-story-body ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ps-green-dark);
    font-weight: 700;
}

/* ════════ PULL QUOTE ════════ */
/* Quellenangabe unter einer Ergebnisliste. Bewusst kleiner und ruhiger als der
   Fliesstext, aber mit --ps-mute-text (5.4:1) statt --ps-mute, weil 13px Text
   die 4.5:1 erfuellen muessen. */
.case-source {
    margin-top: var(--space-4);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ps-mute-text);
}
.case-source a { text-decoration: underline; text-underline-offset: 2px; }

.pullquote {
    margin-top: clamp(60px, 8vw, 100px);
    padding: clamp(40px, 5vw, 80px) clamp(28px, 4.5vw, 80px);
    background: var(--ps-light-green);
    border: 1px solid var(--ps-green);
    border-radius: var(--radius-xl);
    text-align: center;
}
.pullquote-text {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ps-black);
    max-width: 22ch;
    margin: 0 auto;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.pullquote-by {
    margin-top: var(--space-5);
    font-size: 0.75rem;
    color: var(--ps-ink-2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ════════ CONTACT-FORM ════════ */
.contact-grid {
    margin-top: clamp(40px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 80px);
}
.contact-info {
    display: grid;
    gap: 28px;
    align-content: start;
}
.contact-block-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-green-text);
    margin-bottom: var(--space-2);
}
.contact-block-val {
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ps-black);
}
.contact-block-val a:hover { color: var(--ps-dark-green); }
.contact-block-sub {
    font-size: 0.875rem;
    color: var(--ps-mute-text);
    margin-top: var(--space-2);
    line-height: 1.55;
}
.form-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-xl);
    padding: clamp(28px, 4vw, 48px);
}
.form-row {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-mute-text);
    margin-bottom: 8px;
}
/* Rahmen im Ruhezustand: --ps-line erreicht gegen die Feldflaeche nur 1.31:1. Ein
   Eingabefeld ist eine UI-Komponente und braucht 3:1 (WCAG 1.4.11), sonst ist nicht
   erkennbar, wo das Feld anfaengt. --ps-mute-text liefert 3.9:1 gegen --ps-beige. */
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ps-mute-text);
    border-radius: var(--radius-md);
    background: var(--ps-beige);
    font-family: inherit;
    font-size: 15px;
    color: var(--ps-black);
    transition: border-color 0.15s, background 0.15s;
}
/* Fokus: der frueherer Ersatzring rgba(129,188,74,.35) lag bei 1.28:1 gegen Beige,
   waehrend outline:none den nativen Ring entfernt hat — zusammen war der Fokus auf
   Formularfeldern faktisch nicht sichtbar. Jetzt derselbe deckende Ring wie global. */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 3px solid var(--ps-dark-green);
    outline-offset: 2px;
    border-color: var(--ps-dark-green);
    background: var(--ps-surface);
    box-shadow: none;
}
.form-field textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}
.form-disclaimer {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ps-mute-text);
    line-height: 1.5;
}
.form-disclaimer a { text-decoration: underline; }

.form-notice {
    /* display: block, weil die Erfolgsmeldung ein <output> ist (inline per Default). */
    display: block;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.form-notice--success {
    background: var(--ps-light-green);
    /* --ps-dark-green auf --ps-light-green sind 3.29:1 bei 15px Text. */
    color: var(--ps-ink-2);
    border: 1px solid var(--ps-dark-green);
}
.form-notice--error {
    background: rgba(181, 71, 71, 0.08);
    /* --ps-error faellt auf beigem Grund mit 4.36:1 durch; --ps-error-text ist die
       dafuer vorgesehene Textvariante (6.4:1). */
    color: var(--ps-error-text);
    border: 1px solid rgba(181, 71, 71, 0.55);
}
.form-notice--error a { color: var(--ps-error-text); }

.form-slots-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-mute-text);
    margin: var(--space-2) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ps-line);
}
.form-optional {
    font-weight: 400;
    color: var(--ps-mute-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

/* ════════ BOOK CARD ════════ */
.book-grid {
    margin-top: clamp(40px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
}
.book-stub {
    background: var(--ps-black);
    color: var(--ps-beige);
    border-radius: var(--radius-xl);
    padding: clamp(40px, 5vw, 64px);
    aspect-ratio: 4 / 5;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.book-stub-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-light-green);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.book-stub-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--ps-green);
    flex-shrink: 0;
}
.book-stub-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: var(--space-4) 0 0;
    text-wrap: balance;
}
.book-stub-title em { font-style: normal; font-weight: 700; color: var(--ps-green); }
.book-stub-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--ps-line-dark);
    border-bottom: 1px solid var(--ps-line-dark);
}
.book-stub-meta .k {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--ps-light-green);
    line-height: 1;
}
.book-stub-meta .v {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 243, 233, 0.62);
    margin-top: var(--space-2);
    line-height: 1.35;
}

/* ════════ LEGAL ════════ */
.legal { padding-top: 24px; }
.legal-content {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) var(--pad-x);
}
.legal-content h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    letter-spacing: -0.035em;
}
.legal-content h2:first-of-type { margin-top: 32px; }
.legal-content h3 {
    font-size: clamp(20px, 1.6vw, 22px);
    margin-top: 36px;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.legal-content p, .legal-content li {
    font-size: var(--body-size);
    color: var(--ps-ink-2);
    line-height: 1.65;
    margin: 0 0 16px;
}
.legal-content ul { padding-left: 24px; }
.legal-content strong { color: var(--ps-ink); }
.legal-content a { color: var(--ps-green-text); text-decoration: underline; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; align-items: start; }
    .hero-image { width: 100%; max-height: 60vh; justify-self: stretch; }
    .hero-aside { width: 100%; justify-self: stretch; }
    .ki-grid { grid-template-columns: 1fr; }
    .method-grid, .warum-grid, .deliver-grid, .prozess-grid, .prozess-grid--three { grid-template-columns: 1fr 1fr; }
    /* Die Ja/Nein-Karten der Problemseiten tragen je ~450 Zeichen. Zwei davon
       nebeneinander ergeben auf einem Tablet zwei ~300px-Spalten Fliesstext. */
    .warum-grid--two { grid-template-columns: 1fr; }
    .two-col, .wann-grid, .tco-grid { grid-template-columns: 1fr; }
    .myth-grid, .usecases-grid, .wakeup-grid, .values-grid, .bigstats-grid, .setup-grid { grid-template-columns: 1fr 1fr; }
    .logowall-grid { grid-template-columns: repeat(3, 1fr); }
    .manifest-grid, .case-meta-strip, .case-story-grid, .contact-grid, .book-grid { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 40px 1fr; }
    .timeline-date { grid-column: 2; padding-top: 0; }
    .timeline-content { grid-column: 2; }
    .book-stub { aspect-ratio: auto; }
    .job { grid-template-columns: 1fr; gap: 16px; }
    .form-row.two { grid-template-columns: 1fr; }
    .stack-layer { grid-template-columns: 80px 1fr; }
    .stack-layer .stack-chips { grid-column: 2; }
    .vs-table { grid-template-columns: 1fr; }
    .vs-cell { border-right: none; }
    .vs-cell.vs-head:nth-child(1) { display: none; }
    .vs-cell.vs-label::before { content: '— '; color: var(--ps-mute); }
}
@media (max-width: 1180px) {
    .nav-icon { width: 44px; height: 44px; border-radius: 12px; }
}
/* Desktop-Nav bricht frueher auf Burger um, damit die Leiste auf Laptop/Tablet
   (1024–1180px) nicht mit 7 Links + Icons + CTA ueberlaeuft. */
@media (max-width: 1180px) {
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .nav-burger { display: flex; }
}
/* Der Footer traegt seit 08/2026 sechs Rubriken. Sechs Spalten passen auf einem
   1200-px-Laptop nicht mehr ohne Umbrueche mitten im Linktext, deshalb ein
   Zwischenschritt auf drei Spalten, bevor bei 900px auf zwei umgestellt wird. */
@media (max-width: 1400px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .services-grid, .refs-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
    /* Schmaleres Sichtfenster: etwas zuegiger, damit das Band nicht stillzustehen scheint. */
    .marquee-wrapper { --marquee-speed: 34s; }
    .footer-grid { gap: 32px; }
}
@media (max-width: 640px) {
    .services-grid, .refs-grid, .footer-grid, .method-grid, .warum-grid, .deliver-grid, .prozess-grid, .prozess-grid--three, .myth-grid, .usecases-grid, .wakeup-grid, .values-grid, .bigstats-grid, .case-meta-strip, .setup-grid {
        grid-template-columns: 1fr;
    }
    .logowall-grid { grid-template-columns: repeat(2, 1fr); }
    .bigstat { border-right: none; border-bottom: 1px solid var(--ps-line); padding-bottom: 28px; }
    .stack-layer { grid-template-columns: 1fr; gap: 16px; }
    .marquee-item { justify-content: flex-start; }
    .hero-actions .btn, .ki-actions .btn { flex: 1; justify-content: center; }
    .ki-stats { grid-template-columns: 1fr; }
    .nav-cta { padding: 9px 16px; font-size: 13px; }
    .logo.nav { height: 46px; }
    .image-break-inner { aspect-ratio: 4 / 5; }
}

/* ════════ MOBILE POLISH ════════ */
@media (max-width: 640px) {
    /* Prevent iOS auto-zoom on focus by holding input font-size ≥ 16px */
    .form-field input,
    .form-field select,
    .form-field textarea { font-size: 16px; }

    /* Full-width CTAs in the home hero */
    .home-cta-row { width: 100%; }
    .home-cta-row .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

    /* Generic btn touch padding on phones */
    .btn { padding: 14px 22px; }

    /* Stage padding tighter on small screens */
    .home-stage { padding-top: clamp(28px, 5vw, 56px); }

    /* Footer bottom row stacks neatly */
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer-bottom-links { gap: 18px; }

    /* CTA watermark stops dominating tiny screens */
    .cta-watermark { font-size: clamp(96px, 28vw, 160px); top: 16px; }

    /* Trinity pillar visuals slim down */
    .pillar-visual { aspect-ratio: 16 / 9; }
}

/* Burger active-state cross — set by JS via aria-expanded */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Larger touch targets in the mobile nav panel */
@media (max-width: 1180px) {
    .nav-mobile-panel > a {
        padding: 14px 4px;
        font-size: 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .nav-mobile-group a {
        padding: 12px 0 12px 14px;
        font-size: 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .nav-mobile-label { padding: 16px 0 6px; }
    .nav-mobile-footer .btn,
    .nav-mobile-footer .nav-mobile-phone {
        padding: 14px 22px;
        font-size: 16px;
        text-align: center;
    }
}

/* ════════ MODAL ════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 33, 22, 0.72);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-x);
    opacity: 0;
    pointer-events: none;
    /* visibility gehoert zwingend dazu: mit opacity/pointer-events allein bleibt das
       geschlossene Modal im Tab-Order und im Accessibility-Tree. Auf
       /kontakt-aufnehmen hiess das bei JEDEM Aufruf: ein unsichtbarer Button
       „Alles klar" im Fokuspfad, dazu Ueberschrift und Text fuer Screenreader —
       und das dauerhaft anliegende aria-modal="true" liess manche Screenreader den
       Rest der Seite als inert behandeln.
       visibility ist animierbar (diskret), der Fade bleibt darum erhalten. */
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.modal-box {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius-xl);
    padding: clamp(36px, 5vw, 56px);
    max-width: 520px;
    width: 100%;
    text-align: center;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.22s ease;
    box-shadow: 0 24px 64px rgba(0, 33, 22, 0.5);
}
.modal-backdrop.is-open .modal-box {
    transform: translateY(0) scale(1);
}
.modal-icon {
    width: 64px;
    height: 64px;
    background: var(--ps-light-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.modal-icon svg { width: 28px; height: 28px; }
.modal-title {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    margin: 0 0 12px;
}
.modal-text {
    font-size: 15px;
    color: var(--ps-ink-2);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* ── Hero word rotator ──────────────────────────────── */
.hero-rotate {
    display: inline-block;
    white-space: nowrap;
}
.hero-rotate > span {
    display: inline-block;
    will-change: transform, opacity;
}

/* ════════ KONTAKT-LASCHE (rechter Seitenrand) ════════
   Auf jeder oeffentlichen Seite: Telefon, WhatsApp, E-Mail, LinkedIn und Termin,
   dauerhaft erreichbar, ohne dass jemand erst scrollen oder ins Menue greifen muss.
   Ausgeliefert vom Fragment website/fragments/social-rail.html (EN-Spiegel unter
   en/fragments/).

   Bewegungsprinzip: Die Lasche ist EIN Panel fester Breite und faehrt als Ganzes
   heraus — genau eine transform-Eigenschaft auf genau einem Element. Deshalb gibt
   es weder Layout-Neuberechnung noch versetzt startende Einzelanimationen, und die
   Bewegung bleibt auch waehrend des Scrollens sauber. Einzelne Items, die je fuer
   sich aufklappen, sehen bei gleichem Aufwand deutlich unruhiger aus.

   Nur Zeigergeraete: Auf Touch gibt es kein verlaessliches :hover, ein halb
   ausgefahrenes Panel wuerde dort den Inhalt verdecken. Mobil liegen dieselben
   Kanaele im Menue-Panel und im Footer. */
.ps-rail {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 9;
    width: 252px;
    /* Nach rechts geschoben schiebt sich die RECHTE Seite aus dem Viewport — sichtbar
       bleibt die linke. Deshalb steht die Icon-Spalte im Markup vorn: eingefahren sieht
       man genau sie (56px), ausgefahren faehrt das ganze Panel nach links heraus. */
    transform: translate3d(calc(100% - 56px), -50%, 0);
    transition: transform 260ms var(--ps-ease);
}
.ps-rail:hover,
.ps-rail:focus-within {
    transform: translate3d(0, -50%, 0);
}
.ps-rail-panel {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
}
.ps-rail-head,
.ps-rail-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    min-height: 52px;
}
.ps-rail-head {
    background: var(--ps-black);
    color: var(--ps-beige);
    min-height: 46px;
}
.ps-rail-head span {
    padding-right: var(--space-4);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ps-rail-head .ps-rail-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-green);
    font-size: 1rem;
    line-height: 1;
    transition: transform 260ms var(--ps-ease);
}
.ps-rail:hover .ps-rail-chevron,
.ps-rail:focus-within .ps-rail-chevron {
    transform: rotate(180deg);
}
.ps-rail-item {
    border-top: 1px solid var(--ps-line);
    color: var(--ps-ink-2);
    transition: background-color 180ms var(--ps-ease), color 180ms var(--ps-ease);
}
.ps-rail-item:hover { background: var(--ps-paper); }
.ps-rail-text {
    padding-right: var(--space-4);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ps-rail-text b {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ps-black);
    line-height: 1.2;
    white-space: nowrap;
}
.ps-rail-text small {
    font-size: .6875rem;
    color: var(--ps-mute-text);
    line-height: 1.2;
    white-space: nowrap;
}
.ps-rail-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    color: var(--ps-ink-2);
    transition: color 180ms var(--ps-ease);
}
.ps-rail-glyph svg { display: block; }
/* Kanalfarben erst beim Hover — im Ruhezustand bleibt die Lasche eine ruhige,
   einfarbige Flaeche am Rand. Dieselben Werte wie bei den Nav-Icons. */
.ps-rail-item--phone:hover  .ps-rail-glyph { color: var(--ps-green-dark); }
.ps-rail-item--wa:hover     .ps-rail-glyph { color: #128C7E; }
.ps-rail-item--mail:hover   .ps-rail-glyph { color: var(--ps-green-dark); }
.ps-rail-item--li:hover     .ps-rail-glyph { color: #0A66C2; }
.ps-rail-item--date {
    background: var(--ps-green);
    border-top-color: var(--ps-green);
}
.ps-rail-item--date .ps-rail-text b,
.ps-rail-item--date .ps-rail-glyph { color: var(--ps-black); }
.ps-rail-item--date .ps-rail-text small { color: var(--ps-black); }
.ps-rail-item--date:hover { background: var(--ps-dark-green); }
.ps-rail-item--date:hover .ps-rail-text b,
.ps-rail-item--date:hover .ps-rail-text small,
.ps-rail-item--date:hover .ps-rail-glyph { color: var(--ps-beige); }

@media (max-width: 1023px), (hover: none) {
    .ps-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ps-rail, .ps-rail-chevron { transition: none; }
}