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

/* ── Self-hosted fonts (no Google CDN) ──
   Space Grotesk ist die verbindliche Hausschrift (CI 2026) und die EINZIGE Schrift,
   die die oeffentliche Website noch benutzt. Inter / Instrument Serif / JetBrains Mono
   werden nur noch von den internen Admin-Templates (/admin/**) referenziert und laden
   deshalb ausschliesslich dort. In Templates unter templates/website/** und
   templates/en/** darf keine dieser drei Familien mehr 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');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400-da03732a27e16543f09d6a6a62b0cdd4.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500-51205681a1ba304816fc629e8989256b.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600-2ede57db1a3a5f41f40467e7a43a1dd4.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700-8ca0a51552960933d0fd52c19175cbe9.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/inter-800-900ae45e40b83b7de8fb7341b3302041.woff2') format('woff2');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-400-9b8dd1ecf641700bf1caa9d17da6374e.woff2') format('woff2');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-400-italic-bc891bdd08ad55f22a545508466f855b.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-400-caf0dfde4e448468f09b7bed230206a4.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-500-a21e038a03f709cf60aa1e2944048aef.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 */
    --ps-green-text: #3B7D46;            /* gruener Textakzent — 4.6:1 auf Beige */
    /* 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-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; }

::selection { color: var(--ps-black); background: var(--ps-light-green); }
:focus-visible {
    outline: 3px solid rgba(129, 188, 74, 0.45);
    outline-offset: 3px;
}

/* 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: none; outline: none; border:0 !important;
    background: transparent !important;background-color:transparent; }
/* Schutzraum: das Logo bekommt rundherum mindestens Emblem-Hoehe Luft. */
.logo.nav    { height: 38px; }
.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;
    color: var(--ps-mute);
    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.18);
    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-dark); border-color: var(--ps-green-dark); background: var(--ps-green-soft); }
.nav-icon-whatsapp:hover { color: #128C7E;            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.18);
    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.18);
    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);
    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);
    border-color: rgba(0, 33, 22, 0.3);
}
.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 {
    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. */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 320ms var(--ps-ease), transform 320ms 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;
    gap: 56px;
    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;
}
.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; }
}

/* ════════ 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-dark-green); }
.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); }
.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.3fr 1fr 1fr 1fr 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;
    color: var(--ps-mute);
    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;
}
.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); }
.vs-pill.vs-good { background: var(--ps-light-green); color: var(--ps-dark-green); }
.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;
}
.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;
}
.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 ════════ */
.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;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ps-line);
    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;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--ps-dark-green);
    background: var(--ps-surface);
    box-shadow: 0 0 0 3px rgba(129, 188, 74, 0.35);
}
.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 {
    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);
    color: var(--ps-dark-green);
    border: 1px solid var(--ps-green);
}
.form-notice--error {
    background: rgba(181, 71, 71, 0.08);
    color: var(--ps-error);
    border: 1px solid rgba(181, 71, 71, 0.35);
}
.form-notice--error a { color: var(--ps-error); }

.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; }
    .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; }
}
@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: 32px; }
    .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;
    transition: opacity 0.22s ease;
}
.modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.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.18);
}
.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: rgba(0, 33, 22, .7); }
.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; }
}