/* === Selbst gehostete Schriften (kein Google-Fonts-Abruf mehr; DSGVO/Nr.22) === */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/Geist-300-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/Geist-300-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/Geist-300-normal-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/Geist-300-normal-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/Geist-300-normal-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Geist-400-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Geist-400-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Geist-400-normal-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Geist-400-normal-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Geist-400-normal-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/Geist-500-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/Geist-500-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/Geist-500-normal-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/Geist-500-normal-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/Geist-500-normal-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Geist-600-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Geist-600-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Geist-600-normal-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Geist-600-normal-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/Geist-600-normal-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Geist-700-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Geist-700-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Geist-700-normal-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Geist-700-normal-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/Geist-700-normal-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-400-normal-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/GeistMono-500-normal-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/InstrumentSerif-400-italic-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/InstrumentSerif-400-italic-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/InstrumentSerif-400-normal-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/InstrumentSerif-400-normal-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   NEXUS — Fundament (Design-DNA 1:1 von story.foundation, Inhalt eigen)
   Mobile-first. Tokens → Reset → Base → Komponenten-Grundlagen.
   ============================================================================= */

/* ----------------------------------------------------------------- TOKENS -- */
:root {
  /* Farben – dunkel */
  --c-black: #000000;
  --c-ink: #0a0a0a;
  --c-surface: #171717;
  --c-surface-2: #2c2d2f;
  /* Farben – hell */
  --c-white: #ffffff;
  --c-paper: #fafafa;
  --c-paper-2: #f4fbff;
  /* Text */
  --c-muted-dark: #9a9a9a;   /* gedämpft auf dunkel */
  --c-muted-light: #656565;  /* gedämpft auf hell */
  /* Akzent (Cyan-Blau wie Referenz) */
  --c-accent: #22d3ee;
  --c-accent-2: #47b8ff;
  --c-accent-3: #41b5ff;
  --c-accent-soft: #c7e9ff;
  /* Pops */
  --c-magenta: #ff7ffb;
  --c-lavender: #8583ff;
  --c-lavender-soft: #f0d6ff;
  --c-lime: #daff45;
  /* Linien */
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: rgba(0, 0, 0, 0.10);

  /* Schrift */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid Typo */
  --fs-hero: clamp(2.6rem, 11vw, 6.5rem);
  --fs-h2: clamp(2rem, 6vw, 4rem);
  --fs-h3: clamp(1.4rem, 4vw, 2.2rem);
  --fs-lead: clamp(1.05rem, 2.6vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-mono: 0.78rem;

  /* Layout */
  --container: 1240px;
  --pad-x: clamp(1.15rem, 5vw, 2.5rem);
  --header-h: 64px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion (Referenz: ~0.8–1.2s Reveals, weiches Easing) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;
}

/* ------------------------------------------------------------------ RESET -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-white);
  background: var(--c-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3 { line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Während Intro läuft: Inhalt nicht scrollbar */
body.is-loading { overflow: hidden; height: 100vh; }

/* --------------------------------------------------------------- CONTAINER -- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }

/* ---------------------------------------------------------------- SEKTION -- */
.section { position: relative; padding-block: clamp(4.5rem, 12vw, 9rem); }
.section--dark { background: var(--c-black); color: var(--c-white); }
[data-theme="light"].section, .section[data-theme="light"] { background: var(--c-white); color: var(--c-ink); }
.section[data-theme="light"] .text-muted { color: var(--c-muted-light); }
.section[data-theme="dark"] .text-muted { color: var(--c-muted-dark); }

/* ----------------------------------------------------------------- BUTTONS -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.85em 1.4em; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap; transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, opacity 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--c-white); color: var(--c-black); }
.btn--primary:hover { transform: scale(1.04); }   /* nur „aufploppen", Farbe bleibt weiß */
.btn--ghost { border: 1px solid currentColor; background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,0.08); }
.btn--lg { padding: 1.05em 1.8em; font-size: 1rem; }

/* ------------------------------------------------------------------ INTRO -- */
/* Wortmarken-Animation "NEXUS" (CJ, 2026-07-12): Grundschrift Alkatra (Brush); E/U/S wechseln bei
   1,0 s kurz zu DM Serif Display + kurzer Cyan/Magenta-"Shock" und kehren gestaffelt zurueck.
   Fonts eingebettet (data-URI, auf NEXUS subsettet, CSP-fest, keine externen Requests).
   ascent/descent-override identisch -> keine vertikalen Spruenge beim Schrift-Wechsel.
   JS friert nach fonts.ready die Buchstabenbreiten ein -> kein horizontales Verrutschen. */
@font-face{font-family:'Alkatra';        src:url(data:font/woff2;base64,d09GMgABAAAAAAWkAA8AAAAACUQAAAVMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgRYcRgZgP1NUQVQqAFwRCAqGdIV0CxAAATYCJAMcBCAFhCIHIBurB8jEp8fNej8ES5CqcENNPbROVVgzuHNYFwlw4tZh6HLaBCuwjQEuhR+t+2vpdU2cNIcV6QB6a6xF4RYOLFBuq87gxAJO94T5F7EgAGSwEAWiQ+F4cYBBBTohzisoq0NSZ89oH8I6R/tiQNTdM52jHTGsnTqKpDHdrBiEgb6B8UOikuUsAqp7YMpUKIZ6dKNQ/G2AGgZoUJAggZiC3bOjveAFGvR+RCBgKJxCgSirQJA4D3m6RwnDKiGEXipQP5DfIfRTRkqDltKpAmlDDFFvI5BIKVpAURS2EizIgqoU0WK19TmNuAoVNHTh5AmA1lJtAGbFfj95j9pLBEKRspRKGHAaF3iBmtHXP5WkLnWmmyK/pzYGBGdZBWcjGkUmVKRIexFUyEcFalEPjfDy9Y62L20XbSdtR21HbIfuWRpFExCbDco5FO+iUh1ItUgYQN48yUoL0Oc6Q6Tcm6aDFHnxoYHq1jnyWZ3yObJ642Fi4JpZk/UMa1oF/caDjPF2QINmrd6d27OHNUF/9CDDGPlmjjVZ7xw+6eLduHrjemKw+jZzpl3uZrM5O4mzWravJ4Y9p5sP4QdsVNXxvH4T9HtPnmSM613XHD7sctxiaQjU8Py2deug33nyZL3RQgwbWNO5e/dY0xNiuJzScP65hRisVtZk3gerH2SMuwN232eMD6G/lFx8zmyGntcaLRahN9oH/catXnW8mTVZrWpuh2X7ZmK4cIY17VsH/VY3Dc/z9cbr925xijVdeGHlAq3Wu1Ia2IsnMrv5Or+jPM93GZ9bGnwsloTVq4nhwh3WdO6auf6NnJecV93o77f37MloDiLdUoh0rdFhECnC0MQ6hHoGSrjoH7YW1NNmhr2tdJicUDLim3Psw044h/o9DHa8JVQ4uDp94aIef431y5XVRIUWC/1FzHqpsvo0UMzabXJWiyviE/6qhf2btyNrh3d2rZZ7O1vEZWh9dZGcqfjnc8Yx0cl+KEv+irRVNL0g1JF9tV0jl11TyiTNW/5pfU27LLBkmwclyiOa2jkdDLs4WIAXMm44LsLvsZxxU5z1i18UHFg+KzdUuFSdE5WRxenCS7NzlYudvShWMhQk1vuGlAWqW6IfrsgJD8xLHlypQ5aya3pk+ICYi+KbHWM83SoXVDg/YHoyWhqDc1XhBU1O1zhSvHRcLqPft1c6zpXbN2f6eEu7C0ZnBiNPFsgFOx+wU5a4yJxFmc2BeRXBpaXTC6uLQ4I917t6KhbKmBkO+r6RzBmb30mbyGkuSTDRL23ImBPS/kvBUu2Kyc/vMPbnt7i4v/dT7KBP+Rm/oqSesNyk99dU/SyW6qoHAQD/gwAg7utfzDjY1q5M+0MiEHwNAB/Kdh8CgI/+xuHJmsnNkj10HwBRDaRbJH2dZi1pnqz5/1vJnvp0jZj8jhjyFxKotYiiaNhRa5FMGW1/48sWLVpMJJBiQZtVFlnpdgvM53xCSwHsJFgS6PbC5yiloIDFIQBad2IlfVwqRAoGpSJ4oUKiQALcGNKeW2XEpYYB5ehBNwYwDSPgIHoAfejH1GH6VIxjClIQaTSbgi7oMIBxTCUQ4RP4+2FEYAw69CESlShAGbIxjCFoMRU6aBF+Z24D1F2TPoZRqBCNCAZRhmoq+tCLqRgDw6zcjChEIBnEYHXrWVT71ngOGpH6HG4Nuz5MwzC00JG6KjoXYxjHLLX0SiMVYph6KnsV6tCPHqiuRlXQcWgQPeg6G2djWnpRKVF7ClQISjvch4Gj7aahExHowhhGUpR6/re0GEU8ohGDJMQh8kkwuBcg7Xq2jYhBBA==)        format('woff2'); ascent-override:90%; descent-override:20%; line-gap-override:0%;}
@font-face{font-family:'DMSerifDisplay'; src:url(data:font/woff2;base64,d09GMgABAAAAAAUQAA4AAAAACTwAAAS7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgWYcKAZgAFwRCAqFZIRJCxAAATYCJAMcBCAFhTgHIBueB8gEHgjn3ndJsGuBSb54sODFvZhWgC+G27Sde2Ei6vH5v1/x1PEEfCSj9KPvRATNGYrIJY3CiKZoWlsR30Xdlk5cMzPguClFAHaEkIJgEeTeBySxZKJUO5u6iBjdNTtOudGaCL+KgpG+6XFCQ9a+WiOMUBTGkQgUSCG/fbyNyr8MNGP9YP1s/WJ9i2H9Zsy09bv1u0tz+n+tL21/LYLpxfkhgcpxJVCRHSq+UaBT0J2NAwcJbN4Es52sav2JRiiwBbmaH21/b9BsYur2Yxhhk2ycVjLEKUgtynGKF2j01xbbyRRRGJIPVAP2htw5ta2ttZRj4NXs/99ENWh20WogLihPiY+UMwgFUBcICPQtMaDXqEPE8R0djEENLXTiwruc/vSR1ufWvdat1o3WDdZ1PfuMYoGwLCIJQnhma7JUpG/AJza3gsZzl86ZITSV+Yuk2Cwz2xYUrg27PDsVj82l7rW5bSL+ihUR5F82TRHuku7lq6VUbMdfsyHNhnSk9vPYumwi74oVoS7Dr6xOErY+1b9s5gobsZeegyaHFV8gLg7Xca8XemyuwHVxl91mO/4N4X+4ofD114X/jTfg514r6JLu6+82z7pcHvcqvpfqC157Dd+ru457/XWh+nNNEU7srSi+1zoxyDozrfhefXWODdds8PQsL5urG5Vfes46l2flgvoDrlzb1R24Ki4Ou/i/Xlnv7jonELeKtjM+PGPQvfjk4pNR+Vce+krHoa9cGfXhz4tPsloOBj+uS/1yc1B+EBSQSdv8OfqtUSN69VSevFUW+LP1kbyn9a7dCdtkUIAYGab/q390xRM/vou8qfHRJf2F7FB5srxy1cF6U/7B9gf1e+Lekny7b97Uepd2tNxc/s7f9xQ415Q4K7Izfq/3u+J27u4oKnaNptbnbN8QH7QgExqUja5HOvbNqinMzNqa98qOxM7tjd4jxunYt2k2p3x2Z7c54pKr5BN1iVPbmr31Td5t7gn9+ewj5Qny8pj79PH6gtGBQqTUnPM3Bb67PvGUl+N/l3bZ7yy5tf/6seserejLlsfLs2OdFx754n3VF2WuiZdrZd/cjkfnnz7s+UdaY1+RACBuySVZWX+89mj+jsji30Ij1S/LMm9tKMz2D3n2rPOs8v//0E5R7zaC7zX7feDv/8YfsMqtcu2UW/qeEMVHm5LMauVEtihhbFaORVf60Xh7ws2FsJMg9hLSj/kuMF8BpR/atDAQduGMicAQJlGIEGuJSiWvE410LidBONlJgkkhW47gngODzDLLJIWkkcYMe5hmiElmQe9g5umjOJhgmgHSaMVJE9U000lfq2w/1Qxxqsmjd7FEKh30McBcOjKNGxiMp0wwjkEODjJJJ50ijGnlfpI/xywTDHL6cWbrE5gnAwf5JJJF4mSzBr+QwVsy+ibYfbW00kotRUsekBpr6uIqJphkqQYDxwmDVGeQjUFqSpXXXMFeJthNH9pTlphhlj7GmMGgnnH2HDQmXewqx97DGHBJWDATDnYhwdHr5jHSSCQFgwWGmGXwWDCzbNs8DedFMAvMtbCLsWXI8Xz+BHNMs4fXx+MYcUuqguZaJphggNG+xU00UYXji0+Li1m3kYkBAAAA) format('woff2'); ascent-override:90%; descent-override:20%; line-gap-override:0%;}
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--c-black);
}
.intro__word {
  white-space: nowrap; color: #fafafa; font-weight: 500; user-select: none;
  font-family: 'Alkatra', cursive; line-height: 1.4; overflow: visible;
  font-size: clamp(2.8rem, 16vw, 6rem);
}
.intro__letter { display: inline-block; text-align: center; vertical-align: baseline; font-family: 'Alkatra', cursive; }
.intro__letter--serif { font-family: 'DMSerifDisplay', serif; }
.intro__letter--shock { animation: intro-zap 0.19s ease both; }
@keyframes intro-zap {
  0%   { text-shadow: none; transform: translateX(0); }
  20%  { text-shadow: 2.8px 0 0 #22d3ee, -2.8px 0 0 #ff2fb0; transform: translateX(-1.5px); }
  50%  { text-shadow: -2.6px 0 0 #22d3ee, 2.6px 0 0 #ff2fb0; transform: translateX(1.5px); }
  78%  { text-shadow: 1.6px 0 0 #22d3ee, -1.6px 0 0 #ff2fb0; transform: translateX(-1px); }
  100% { text-shadow: none; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .intro__letter--shock { animation: none; } }
body.intro-done .intro { display: none; }

/* ----------------------------------------------------------------- HEADER -- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: transform 0.45s var(--ease-out), background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
/* Header bleibt zu JEDER Zeit vollständig transparent (kein Leisten-Hintergrund). */
.header.is-hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header[data-theme="dark"] { color: var(--c-white); }
.header[data-theme="light"] { color: var(--c-ink); }
/* CTA-Button: dunkle Sektion = weiß mit schwarzer Schrift; helle Sektion = transparent mit
   dünnem schwarzem Rand und schwarzer Schrift. Hover ändert NICHT die Farbe – nur „aufploppen". */
.header[data-theme="dark"] .header__cta { background: var(--c-white); color: var(--c-black); border-color: transparent; }
.header[data-theme="dark"] .header__cta:hover { background: var(--c-white); }
.header[data-theme="light"] .header__cta { background: transparent; color: var(--c-ink); border-color: rgba(0,0,0,0.4); }
.header[data-theme="light"] .header__cta:hover { background: transparent; }

.brand { font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; }   /* +2 Stufen (0,4rem) */
.nav { display: none; gap: 1.6rem; }
.nav__link { font-size: var(--fs-sm); opacity: 0.8; transition: opacity 0.2s; }
.nav__link:hover { opacity: 1; }
.header__cta { display: inline-flex; border: 1px solid transparent; }   /* CTA in ALLEN Ansichten sichtbar (oben rechts); Rand-Platz reserviert → kein Sprung beim Theme-Wechsel */

.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: currentColor; display: block; transition: transform 0.3s, opacity 0.3s; }

/* -------------------------------------------------------------------- HERO -- */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  background: radial-gradient(120% 90% at 70% 10%, #0b2740 0%, #050912 45%, #000 100%);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(62% 55% at 50% 46%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
}
.hero__inner { position: relative; z-index: 2; padding-top: var(--header-h); }
.hero__title { font-size: var(--fs-hero); font-weight: 600; max-width: 14ch; }
.hero__sub { margin-top: 1.4rem; font-size: var(--fs-lead); color: var(--c-muted-dark); max-width: 46ch; }
.hero .btn { margin-top: 2.2rem; }
.hero .btn svg { margin-left: 0.15rem; }
.hero__mobile { display: none; }   /* nur Handy: USP-Chips + Widgets – auf PC/iPad ausgeblendet */
.hero__cta { display: none; }      /* Hero-Body-CTA nur Handy – auf PC/iPad sitzt der CTA im Header */
.hero__trust { display: none; }   /* Vorschlag ①: Trust-Reihe nur am PC (>=1024) – auf Handy/iPad steht die Aussage in .hero__usps */

/* Beweis-Block: zwei LÄNGLICHE Kacheln UNTEREINANDER – Text links, Grafik rechts (nur Handy) */
.hero__proof { display: flex; flex-direction: column; gap: 0.55rem; }
.stat-card {
  display: flex; flex-direction: row; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.75rem;   /* kompakter; das Seiten-Padding zieht Text & Grafik nur LEICHT zur Mitte */
  border-radius: 16px;
  background: rgba(255,255,255,0.035);          /* deutlich transparenter */
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.stat-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.stat-card__title { font-size: 0.8rem; font-weight: 600; color: #9db4cc; letter-spacing: 0.01em; }
.stat-card__num { font-size: 1.62rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; }
.stat-card__pct { color: #a89bf1; font-size: 1.12rem; }
.stat-card__note { font-size: 0.7rem; color: #8298ad; display: inline-flex; align-items: center; gap: 0.32rem; margin-top: 0.1rem; }
.stat-card__note::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2fdcc4; flex: none; }
.stat-card__viz { position: relative; flex: 0 0 112px; display: flex; justify-content: center; align-items: center; }
.stat-card__info { position: absolute; top: 0; right: 0; color: #6478906b; display: inline-flex; }
.gauge4 { width: 100%; height: auto; display: block; }
.bars3 { width: 88%; height: auto; display: block; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; margin-bottom: 1.4rem;
  border-radius: 999px; font-size: var(--fs-sm); color: #d6e9ff;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(71, 184, 255, 0.28);
  backdrop-filter: blur(6px);
}
.hero__eyebrow svg { color: var(--c-accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title {
    background: linear-gradient(180deg, #ffffff 0%, #b9c6d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* Vorschlag ①: Garantie als horizontale Trust-Reihe im Hero, nur am PC (>=1024) sichtbar.
   3 Mikro-Punkte mit Haarlinien-Trennern – durchbricht den Text-Stapel, wirkt editorial statt "noch ein Satz". */
@media (min-width: 1024px) {
  .hero__trust {
    display: flex; flex-wrap: wrap; align-items: center;
    margin-top: 2.6rem; padding: 0; list-style: none;   /* mehr Abstand zur Untertext-Zeile (CJ-Wunsch) */
  }
  .hero__trust li {
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    padding: 0.1rem 1.15rem; font-size: 0.9rem; line-height: 1.2; color: var(--c-muted-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }
  .hero__trust li:first-child { padding-left: 0; }
  .hero__trust li:last-child { border-right: 0; padding-right: 0; }
  .hero__trust svg { color: var(--c-accent); flex: none; }
  .hero__trust b { color: var(--c-accent-2); font-weight: 600; }
}

/* ----------------------------------------------------------------- PROBLEM -- */
.problem__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent);
  margin-bottom: 1.6rem;
}
.problem__statement {
  font-size: var(--fs-h2); font-weight: 600; line-height: 1.12;
  max-width: 22ch; letter-spacing: -0.02em;
}
.problem__statement .word { opacity: 0.16; }
.problem__sub {
  margin-top: 2rem; font-size: var(--fs-lead);
  color: var(--c-muted-dark); max-width: 54ch;
}

/* --------------------------------------------- ÜBERGANG Problem → Lösung -- */
/* Schwarz → Blau → Weiß-Verlauf (WebGL), der beim Scrollen aufgezogen wird und
   die schwarze Problem-Sektion nahtlos mit der weißen Lösung verbindet.
   .uebergang = 200vh „Bühne", der Canvas im Inneren ist 100vh sticky-gepinnt. */
.uebergang { position: relative; height: 200vh; background: var(--c-black); margin-top: var(--ue-pull-top); }
.uebergang__pin { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
.uebergang__canvas { display: block; width: 100%; height: 100%; }

/* Übergang Stück für Stück UNTER die schwarze Sektion schieben (beide DECKEND,
   kein Transparenz-Trick): #problem bleibt das obere, deckend-schwarze „Blatt"
   (z-index 1, davor); der Verlauf-Canvas liegt dahinter und wird per --ue-pull-top
   hochgeschoben, sodass das Blau näher unter den letzten Satz rückt.
   Weiß-Seite/#loesung unverändert (--ue-pull-bottom bleibt). */
:root { --ue-pull-top: -30vh; --ue-pull-bottom: -68vh; --loesung-content-lift: 4cm; --loesung-extra-bottom: 1.5cm; }
.problem { position: relative; z-index: 1; padding-bottom: clamp(0.5rem, 1.5vw, 1.25rem); }
.loesung { position: relative; z-index: 2; margin-top: var(--ue-pull-bottom); padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: calc(clamp(4.5rem, 12vw, 9rem) + var(--loesung-extra-bottom)); }
/* Inhalt vom weißen Hintergrund ABGELÖST: Hintergrund bleibt am Übergang angedockt
   (margin-top oben NICHT angefasst), nur der Inhalt rückt nach oben in die leere
   weiße Fläche → kürzerer Abstand, Übergang unangetastet. Stellschraube: --loesung-content-lift. */
.loesung .container { margin-top: calc(-1 * var(--loesung-content-lift)); }

/* Fallback (kein WebGL / prefers-reduced-motion): schlanker, weicher CSS-Verlauf
   statt harter Schwarz-Weiß-Kante – ohne den langen Pin-Scroll. */
.uebergang--static { height: clamp(160px, 40vh, 340px); }
.uebergang--static .uebergang__pin { position: static; height: 100%; }
.uebergang--static .uebergang__canvas { display: none; }
.uebergang--static::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #000 0%, #000 12%, var(--c-accent-2) 50%, #fff 88%, #fff 100%);
}

/* Verify-Hook (#p=0 … #p=1): Übergang als Vollbild fixieren, fester Fortschritt */
body.ue-forced .uebergang { height: 100vh; }
body.ue-forced .uebergang__pin { position: fixed; inset: 0; height: 100%; z-index: 999; }

/* ---- End-Übergang Kontakt → Footer (.uebergang--ende) ----------------------------------
   IDENTISCHE Bühne wie #uebergang: erbt height:200vh, den sticky Pin UND margin-top:var(--ue-pull-top)
   (-30vh, zieht sich über den weißen Kontakt). Shader tauscht nur Schwarz/Weiß (u_invert=1) – gleiche
   U-Form, gleiche Farb-/Band-Abstände. Nur der Bühnen-Hintergrund muss weiß sein (Start ist weiß),
   und der Footer wird – exakt wie #loesung – per --ue-pull-bottom (-68vh) über das schwarze Ende gezogen.
   Rückbau: HTML-Block + footer--ue-Klasse + diese Regeln entfernen. */
/* Kontakt-Karte liegt ÜBER der Übergangs-Karte: der -30vh-Überlapp darf Kontakt-Inhalt NICHT mehr
   abschneiden; der weiße Übergangs-Start verschwindet unsichtbar unter dem (hellen) Kontakt.
   padding-bottom: Die Kontakt-Karte endet exakt 0,5cm unter ihrem untersten Kasten (dem Wizard) –
   die frühere große weiße Bodenfläche (Section-Default 4.5–9rem) ist damit abgeschnitten. Der
   Übergang darunter (Bühne/Canvas/Shader/-margin) bleibt komplett unberührt; er rückt nur passiv
   nach oben, weil über ihm kein totes Weiß mehr steht (Wizard-Position ändert sich NICHT). */
#kontakt { position: relative; z-index: 3; padding-bottom: 0.5cm; }

/* Übergang 1cm weiter unter die Kontakt-Karte ziehen (war -2cm; auf Wunsch 1cm zurück nach unten →
   Übergang beginnt beim Runterscrollen 1cm SPÄTER). Kartensystem bleibt: Kontakt oben, Übergang darunter. */
.uebergang--ende { background: var(--c-white); margin-top: calc(var(--ue-pull-top) - 1cm); height: calc(200vh - 3cm); }
/* height: 3cm kürzer als die geerbten 200vh (NUR die End-Bühne, #uebergang bleibt 200vh). Da die
   Footer-Unterkante an der Bühnen-Unterkante hängt (margin-top + min-height heben sich auf), rückt der
   ganze Footer 3cm nach oben und die Seite wird beim Scrollen 3cm kürzer – rein schwarz-auf-schwarz,
   optisch identisch. Der Sticky-Pin/Shader läuft über einen 3cm kürzeren Scroll-Bereich (vernachlässigbar). */
/* Footer reicht bis zur Bühnen-Unterkante, sein Inhalt sitzt ganz unten (flex-end) = absolutes Seitenende.
   Der Footer wird wie ein Papier 3cm WEITER über den (blauen→schwarzen) Übergang gelegt → die obere
   Footer-Kante (die sichtbare Linie) rückt 3cm höher und deckt 3cm der schwarzen Übergangs-Fläche ab.
   Zug 3cm mehr (−1cm statt +2cm) UND min-height 3cm mehr (+1cm statt −2cm) → Footer-Unterkante bleibt am
   Seitenende, nur der Deckungs-Anteil oben wächst. Übergang (Bühne/Canvas/Shader/Scroll) bleibt unberührt. */
.footer--ue {
  position: relative; z-index: 2;
  /* margin-top +3cm (weniger negativ) UND min-height −3cm gegenüber zuvor: der Footer deckt 3cm
     WENIGER vom (schwarzen) Übergang ab → 3cm mehr Übergang bleibt sichtbar, und die schwarze
     Leerfläche ÜBER dem Footer-Inhalt schrumpft um 3cm. Footer-Unterkante bleibt exakt an der
     Bühnen-Unterkante (margin + min-height heben sich weiterhin auf) → nichts unter dem Footer,
     Seite bleibt gleich lang wie zuvor (die Bühne ist bereits 3cm kürzer, height: calc(200vh-3cm)). */
  margin-top: calc(var(--ue-pull-bottom) + 2cm);
  min-height: calc(-1 * var(--ue-pull-bottom) - 2cm);
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* NUR PC (≥1024): kleine Dreiecke aus den beiden UNTEREN Ecken der Kontakt-Karte schneiden. Der blaue
   End-Übergang steht an den Seiten (U-Form) höher als in der Mitte und wird dort von der geraden weißen
   Kartenkante abgeschnitten; die Eck-Dreiecke lassen ihn durchscheinen → sauberere blaue Animation an
   den Rändern. Mitte bleibt gerade (überlappt dort ohnehin nicht). Handy/iPad bleiben unberührt.
   Größe über --kontakt-eck. 2cm hält Wizard/Aside frei; 3cm schnitte in den Wizard-Kasten (Boden nur 0,5cm). */
@media (min-width: 1024px) {
  #kontakt { --kontakt-eck: 2cm;
    clip-path: polygon(0 0, 100% 0,
      100% calc(100% - var(--kontakt-eck)), calc(100% - var(--kontakt-eck)) 100%,
      var(--kontakt-eck) 100%, 0 calc(100% - var(--kontakt-eck))); }
  /* Der weiche Wizard-Schatten (box-shadow) wird von der clip-path am Karten-Boden HART abgeschnitten
     → grau-„komischer" Rand direkt unter dem Kasten (statt reinem Weiß). Nur auf PC (nur hier ist die
     clip-path aktiv) entfernt; die 1px-Border definiert die Karte weiterhin. Handy/iPad unberührt.
     #kontakt davor → höhere Spezifität als die Basisregel .kontakt__wizard (steht weiter unten). */
  #kontakt .kontakt__wizard { box-shadow: none; }
}

/* Fallback ohne WebGL: gleiche Richtung, nur Farben getauscht (weiß → blau → schwarz) – KEIN Flip */
.uebergang--ende.uebergang--static::after {
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 12%, var(--c-accent-2) 50%, #000 88%, #000 100%);
}

/* Verify-Hook nur für die End-Bühne: #pe=0 (weiß) … #pe=1 (schwarz) */
body.ue-forced2 .uebergang--ende { height: 100vh; }
body.ue-forced2 .uebergang--ende .uebergang__pin { position: fixed; inset: 0; height: 100%; z-index: 999; }

/* ----------------------------------------------------------------- LÖSUNG -- */
.loesung .eyebrow { color: #0d72a8; display: inline-block; }   /* lesbares Blau auf Hell; inline-block → Reveal-Transform */
.section-head { max-width: 64ch; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 1rem; }
/* Schlüsselwort in Überschriften: kursive Serife (Instrument Serif) in Markenblau –
   hebt Kernbegriffe edel hervor; wiederverwendbar für künftige Überschriften. */
.kw-title { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: #0e84c4; letter-spacing: 0; white-space: nowrap; }
/* #loesung-Überschrift: einzeilig (kein Umbruch); Größe so getaktet, dass „Ihre Webseite, von A bis Z" von Handy bis Desktop in eine Zeile passt. */
.loesung .section-head h2 { white-space: nowrap; font-size: clamp(1.5rem, 6vw, 3.3rem); }
.section-head p { margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--c-muted-light); max-width: 58ch; }

/* Diagonaler Block-Reveal: Schrift „kloppt" fließend von oben-links nach unten-rechts auf.
   --mp: 0 = voll sichtbar (Default → auch ohne JS sichtbar). JS fährt von 100 auf 0. */
.diag-reveal {
  --mp: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 0 30%, transparent 52%);
          mask-image: linear-gradient(135deg, #000 0 30%, transparent 52%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 400% 400%; mask-size: 400% 400%;
  -webkit-mask-position: calc(var(--mp) * 1%) calc(var(--mp) * 1%);
          mask-position: calc(var(--mp) * 1%) calc(var(--mp) * 1%);
}
@media (prefers-reduced-motion: reduce) {
  .diag-reveal { --mp: 0 !important; -webkit-mask-image: none; mask-image: none; }
}
.pillars { position: relative; display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Licht-Welle: weicher Akzent-Schein hinter den Karten, dessen Mitte (--wx) per JS von
   links nach rechts wandert – synchron zum Aufploppen der Kästen. Nur Desktop (4 in Reihe).
   Voller-Breite-Element + wandernder Gradient → kein Element-Versatz, kein Überlauf. */
.pillars__wave { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Pro Karte eine weiche Nebel-Wolke, auf die Karte zentriert. closest-side → der Schein
   läuft in ALLE Richtungen sauber auf 0 aus (über/unter, zwischen UND links/rechts der
   Karten) – kein abrupter Cut, nahtloser Übergang ins Weiß. Gleiche Farbe & Intensität.
   Blendet pro Karte NACH dem Aufploppen ein und bleibt liegen (kein wandernder Streifen). */
.pillars__glow {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 36%; height: 150%; opacity: 0;
  background: radial-gradient(closest-side, rgba(71,184,255,0.44) 0%, rgba(71,184,255,0.21) 45%, rgba(71,184,255,0) 100%);
}
.pillars__glow:nth-child(1) { left: 12.5%; }
.pillars__glow:nth-child(2) { left: 37.5%; }
.pillars__glow:nth-child(3) { left: 62.5%; }
.pillars__glow:nth-child(4) { left: 87.5%; }
@media (max-width: 1023px) { .pillars__wave { display: none; } }

.pillar {
  position: relative; z-index: 1;
  padding: 1.7rem; border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: #fff;
  transform-origin: 50% 65%;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), border-color 0.32s, background 0.32s;
}
.pillar__icon {
  width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1.2rem;
  color: #0e84c4; background: rgba(34,211,238,0.10); border: 1px solid rgba(65,181,255,0.28);
  transition: transform 0.32s var(--ease-out), background 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}
.pillar__icon svg { width: 25px; height: 25px; }
.pillar h3 { font-size: 1.3rem; margin-bottom: 0.85rem; letter-spacing: -0.01em; }

/* Stichpunkte statt Fließtext – blitzschnell scanbar, Häkchen im Akzent-Blau */
.pillar__list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.pillar__list li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; line-height: 1.4; color: var(--c-muted-light); }
/* Einzigartige Aufzählung: ein „Nexus-Knoten" – kleiner Akzent-Punkt mit feinem Halo-Ring */
.pillar__list li::before {
  content: ""; position: absolute; left: 1px; top: 0.46em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent-3);
  box-shadow: 0 0 0 3px rgba(65,181,255,0.16);
}

/* Hover: der jeweilige Kasten „poppt" deutlich heraus (nur bei echtem Zeiger) */
@media (hover: hover) and (pointer: fine) {
  .pillar:hover { transform: translateY(-6px) scale(1.045); box-shadow: 0 24px 50px rgba(0,0,0,0.11); border-color: rgba(65,181,255,0.55); }
  .pillar:hover .pillar__icon { transform: scale(1.08); background: rgba(34,211,238,0.20); border-color: rgba(65,181,255,0.60); }
}

@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

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

/* -------------------------------------------------- VERGLEICH (Kartendeck) -- */
/* Sektion von Kollege übernommen und in den Seiten-Rhythmus eingepasst:
   vertikaler Abstand kommt aus .section, Hintergrund aus .section--dark,
   Container/Eyebrow/Typo aus dem globalen Design-System. */
.vergleich { position: relative; overflow: hidden; --c-good: #34e2c0; --c-bad: #ff8f8f; }
.vergleich::before {
  content: ""; position: absolute; left: 50%; top: 56%;
  width: 880px; height: 520px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.10), transparent 72%);
  filter: blur(30px); pointer-events: none; z-index: 0;
}

.vergleich__head { max-width: none; }   /* H2 „Endlich der richtige Partner." bleibt einzeilig */
.vergleich__head h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin-top: 0.9rem; }
.vergleich .kw-title { color: var(--c-accent-2); }
.vergleich__head p { margin-top: 1rem; font-size: var(--fs-lead); color: var(--c-muted-dark); max-width: 54ch; }
.vergleich__head p.vergleich__intro { margin-top: 0.65rem; font-size: 1rem; opacity: 0.92; }
.vergleich__hint {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-dark);
}
.vergleich__hint svg { color: var(--c-accent); }

/* Karten-Fächer */
.deck {
  --cardw: clamp(158px, 17.1vw, 226px);   /* nochmals +8 %, Seitenverhältnis unverändert */
  --cardh: clamp(252px, 26.9vw, 356px);
  --S: clamp(140px, 13.6vw, 197px);
  --pop: 78px;
  position: relative; margin-top: clamp(2rem, 5vw, 3rem);
  min-height: calc(var(--pop) + var(--cardh) + 60px);
}

.deck__card {
  --x: 0px; --y: 0px; --rot: 0deg;
  --tx: 0px; --ty: 14px; --rr: 0deg; --sc: 0.92;
  position: absolute; left: 50%; top: var(--pop);
  width: var(--cardw); height: var(--cardh);
  margin-left: calc(var(--cardw) / -2);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #1c1d20 0%, #121315 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
  cursor: default; opacity: 0; will-change: transform;
  transform-origin: 50% 50%;
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rr)) scale(var(--sc));
  transition-property: transform, opacity, box-shadow, border-color, filter;
  transition-duration: 0.55s; transition-timing-function: var(--ease-out);
}

/* Bild oben */
.deck__media { position: relative; width: 100%; height: 35%; flex: none; overflow: hidden; background: #0e0f12; }
.deck__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.deck__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 19, 21, 0) 58%, rgba(18, 19, 21, 0.92) 100%); }

/* Textteil */
.deck__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.36rem; padding: 0.78rem 1.02rem 0.86rem; }
.deck__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-muted-dark); }
.deck__cat { font-size: 1.16rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--c-white); }
.deck__div { height: 1px; background: var(--line-dark); margin: 0.15rem 0 0.08rem; }
.deck__row { display: flex; align-items: flex-start; gap: 0.44rem; font-size: 0.92rem; line-height: 1.25; }
.deck__row svg { width: 16px; height: 16px; flex: none; margin-top: 0.14rem; }
.deck__row.good { color: #eafffb; } .deck__row.good svg { color: var(--c-good); }
.deck__row.bad { color: var(--c-muted-dark); } .deck__row.bad svg { color: var(--c-bad); }

/* Wrapper + Pfeile: nur Handy sichtbar (Wisch-Slider); auf PC/iPad ausgeblendet. */
.deck-wrap { position: relative; }
.deck__arrow { display: none; }

/* Symmetrischer Fächer: X gespiegelt, Bogen = saubere Parabel, Rotation linear gespiegelt */
.deck__card:nth-child(1) { --x: calc(var(--S) * -3); --y: 45px; --rot: -18deg; z-index: 10; --deal-i: 3; }
.deck__card:nth-child(2) { --x: calc(var(--S) * -2); --y: 20px; --rot: -12deg; z-index: 11; --deal-i: 2; }
.deck__card:nth-child(3) { --x: calc(var(--S) * -1); --y: 5px;  --rot: -6deg;  z-index: 12; --deal-i: 1; }
.deck__card:nth-child(4) { --x: 0px;                 --y: 0px;  --rot: 0deg;   z-index: 13; --deal-i: 0; }
.deck__card:nth-child(5) { --x: calc(var(--S) *  1); --y: 5px;  --rot: 6deg;   z-index: 12; --deal-i: 1; }
.deck__card:nth-child(6) { --x: calc(var(--S) *  2); --y: 20px; --rot: 12deg;  z-index: 11; --deal-i: 2; }
.deck__card:nth-child(7) { --x: calc(var(--S) *  3); --y: 45px; --rot: 18deg;  z-index: 10; --deal-i: 3; }

.deck.is-dealt .deck__card { opacity: 1; --tx: var(--x); --ty: var(--y); --rr: var(--rot); --sc: 1;
  transition-duration: 0.7s; transition-delay: calc(var(--deal-i, 0) * 0.085s); }
.deck.deal-done .deck__card { transition-duration: 0.5s; transition-delay: 0s; }

/* AKTIVE Karte (per JS über Mausnähe) */
.deck.is-dealt .deck__card.is-active {
  --ty: calc(var(--y) - 60px); --rr: 0deg; --sc: 1.16;
  z-index: 50;
  box-shadow: 0 40px 88px rgba(0, 0, 0, 0.6), 0 0 46px rgba(34, 211, 238, 0.22);
  border-color: rgba(71, 184, 255, 0.5);
  transition-duration: 0.42s; transition-delay: 0s;
}
.deck.is-dealt.has-active .deck__card:not(.is-active) { opacity: 0.5; filter: brightness(0.82) saturate(0.92); }

/* ============================================================
   #vergleich – iPad-Hochformat (768–1023): „Die Naht" – Agentur vs. Nexus.
   Löst die frühere gestapelte iPad-Liste ab. PC (≥1024) = Fächer, Handy (≤767) =
   Coverflow bleiben unangetastet. Inhalte werden per JS (initVsLedger) aus den
   vorhandenen .deck__card gespiegelt – eine Quelle, keine Dubletten.
   ============================================================ */
.vs { display: none; }   /* nur iPad-Hochformat blendet die Naht ein */
@media (min-width: 768px) and (max-width: 1023px) {
  .vergleich .deck-wrap { display: none; }        /* Fächer/Deck auf dem iPad aus */
  .vs { display: block; max-width: 780px; margin: clamp(2rem, 5vw, 3rem) auto 0; }

  .vs__worlds { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 0.3rem; }
  .vs__world { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
  /* Punkt jeder Welt exakt über die Marken-Spalte darunter (Kreuze −131 / Häkchen +131 von der Achse) */
  .vs__world--agentur { justify-content: flex-end; padding-right: 127px; color: #cf9393; }
  .vs__world--nexus { justify-content: flex-start; padding-left: 127px; color: var(--c-accent); }
  .vs__wd { width: 8px; height: 8px; border-radius: 50%; }
  .vs__world--agentur .vs__wd { background: var(--c-bad); }
  .vs__world--nexus .vs__wd { background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }

  .vs__ledger { position: relative; }
  .vs__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.10); z-index: 1; }
  .vs__seam-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2)); box-shadow: 0 0 16px rgba(34,211,238,0.55); }

  .vs__row { position: relative; display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; gap: 8px; padding: clamp(1.15rem, 3vw, 1.9rem) 0; }
  .vs__bad { text-align: right; padding-right: 16px; }
  .vs__good { text-align: left; padding-left: 16px; }
  .vs__lab { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
  .vs__bad .vs__lab { color: #9a6b6b; }
  .vs__good .vs__lab { color: #4fb39a; }
  .vs__txt { display: inline-flex; gap: 0.5rem; align-items: flex-start; font-size: 1.08rem; line-height: 1.3; text-align: left; }
  /* linke (Agentur-)Seite: mehrzeilige Texte rechtsbündig → hängen an der Mittelachse statt links auszufransen */
  .vs__bad .vs__txt { color: #e29b9b; flex-direction: row-reverse; text-align: right; }
  .vs__good .vs__txt { color: #eafffb; font-weight: 500; }
  .vs__txt svg { width: 18px; height: 18px; flex: none; margin-top: 0.14rem; }
  .vs__bad .vs__txt svg { color: var(--c-bad); }
  .vs__good .vs__txt svg { color: var(--c-good); }

  .vs__hub { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
  .vs__title { min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center; text-align: center; font-size: 1.12rem; font-weight: 600; color: #fff; line-height: 1.16; margin-bottom: 10px; }
  /* dunkler Chip hinter dem Titel – schneidet die leuchtende Naht sauber aus der Schrift (wie der Medaillon-Ring) */
  .vs__title-t { background: var(--c-black); padding: 0.12em 0.55em; border-radius: 8px; }
  .vs__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-muted-dark); margin-bottom: 8px; }
  .vs__med { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #0e0f12; border: 1px solid rgba(71,184,255,0.45); box-shadow: 0 0 0 7px var(--c-black), 0 10px 26px rgba(0,0,0,0.6), 0 0 22px rgba(34,211,238,0.22); }
  .vs__med img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Reveal beim Scrollen – nur wenn JS armiert (sonst sofort sichtbar); reduced-motion aus */
  .vs--armed .vs__side { opacity: 0; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .vs--armed .vs__bad { transform: translateX(-28px); }
  .vs--armed .vs__good { transform: translateX(28px); }
  .vs--armed .vs__med { opacity: 0; transform: scale(0.72); transition: opacity 0.5s, transform 0.55s var(--ease-out); }
  .vs--armed .vs__row.is-in .vs__side,
  .vs--armed .vs__row.is-in .vs__med { opacity: 1; transform: none; }
}

/* Handy (≤767): 3D-Coverflow. Mittlere Karte im Vordergrund, die zwei Nachbarn versetzt
   und verkleinert im Hintergrund. Karten sind absolut positioniert; transform/opacity/z-index
   setzt initVergleich() je Slot (auch die Endlos-Verbindung 1↔7 + Wisch). Zwei Pfeile an den Seiten. */
@media (max-width: 767px) {
  .vergleich__hint { display: none; }
  .deck-wrap { position: relative; touch-action: pan-y; }
  .deck {
    position: relative; min-height: 0; margin: 1.9rem auto 0;
    height: 366px; display: block; overflow: visible;
    perspective: 1150px;
  }
  .deck__card {
    position: absolute; top: 13px; left: 50%;
    width: 75%; max-width: 320px; height: 340px; margin: 0; opacity: 1;
    transform: translateX(-50%); transform-origin: 50% 50%; backface-visibility: hidden;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
    /* transform/opacity/z-index/transition kommen per JS (Coverflow-Slots) */
  }
  .deck__media { height: 150px; }

  .deck__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(10, 16, 26, 0.72); color: #eaf4ff;
    border: 1px solid rgba(71, 184, 255, 0.42);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .deck__arrow:active { transform: translateY(-50%) scale(0.92); }
  .deck__arrow--prev { left: 2px; }
  .deck__arrow--next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__card { opacity: 1; }
}

/* ----------------------------------------------------------------- PROZESS -- */
/* Schlüsselwort auf dunklem Grund heller als das „Blau auf Hell" (#0e84c4) – sonst zu dunkel. */
.prozess .kw-title { color: var(--c-accent-2); }
.prozess .section-head { max-width: 60ch; }

/* Vertikale Timeline. Jeder Schritt zieht seine eigene Verbindungslinie zum nächsten Knoten
   (per ::after = ruhende Spur, ::before = aufleuchtende Füllung) – so sitzt die Linie immer exakt
   von Knoten zu Knoten, egal wie hoch ein Inhalt ist. */
.prozess__timeline {
  --node: 46px;
  --rail-x: calc(var(--node) / 2 - 1px);
  position: relative;
  max-width: 720px;
  margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  list-style: none;
}
.prozess__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start;
  padding-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.prozess__step:last-child { padding-bottom: 0; }

/* Spur + Füllung zwischen zwei Knoten (nicht beim letzten Schritt) */
.prozess__step:not(:last-child)::after,
.prozess__step:not(:last-child)::before {
  content: ""; position: absolute; left: var(--rail-x);
  top: calc(var(--node) / 2); height: 100%; width: 2px; border-radius: 2px;
}
.prozess__step:not(:last-child)::after { background: var(--line-dark); }            /* ruhende Spur */
.prozess__step:not(:last-child)::before {                                           /* Füllung */
  background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.7s var(--ease-out);
  box-shadow: 0 0 14px rgba(34,211,238,0.45);
}
.prozess__step.is-on:not(:last-child)::before { transform: scaleY(1); }

/* Knoten mit Nummer */
.prozess__node {
  position: relative; z-index: 1;
  width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500;
  color: var(--c-muted-dark);
  background: var(--c-ink); border: 1px solid var(--line-dark);
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.prozess__step.is-on .prozess__node {
  color: var(--c-black); font-weight: 600;
  background: var(--c-accent); border-color: var(--c-accent);
  box-shadow: 0 0 0 6px rgba(34,211,238,0.12), 0 0 26px rgba(34,211,238,0.45);
}

/* Abschluss-Knoten „Live" – kleinerer Text, gleiches Aufleuchten wie die Nummern */
.prozess__node--live {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.prozess__step--final { align-items: center; }
.prozess__live-label {
  font-size: var(--fs-lead); font-weight: 600; color: var(--c-muted-dark);
  letter-spacing: -0.01em; transition: color 0.4s;
}
.prozess__step--final.is-on .prozess__live-label { color: var(--c-white); }

/* Inhalts-Karte */
.prozess__content {
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.6rem);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--line-dark);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}
.prozess__step.is-on .prozess__content {
  border-color: rgba(71,184,255,0.3);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.prozess__tag {
  display: inline-block; margin-bottom: 0.7rem;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-accent);
}
/* Nr.5-A: Schritt-4-Garantie-Etikett als echtes gefülltes Badge (vorher tote Klasse ganz ohne CSS). */
.prozess__tag--accent { display: inline-flex; align-items: center; gap: 0.4em; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; color: #fff; background: #0e84c4; padding: 0.34em 0.8em; border-radius: 999px; }
.prozess__tag--accent svg { flex: none; }
.prozess__title { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
.prozess__text { margin-top: 0.6rem; color: var(--c-muted-dark); font-size: var(--fs-lead); line-height: 1.55; }

/* Abschluss-CTA */
.prozess__cta {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  max-width: 720px; margin: clamp(2.6rem, 6vw, 3.8rem) auto 0;
  padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line-dark);
  text-align: center;
}
.prozess__cta-text { font-size: var(--fs-lead); color: var(--c-white); max-width: 46ch; }
.prozess__cta-text strong { color: var(--c-accent); font-weight: 600; }

@media (max-width: 520px) {
  .prozess__timeline { --node: 40px; }
  .prozess__node { font-size: 0.8rem; }
}

/* --------------------------------------------------------------- PORTFOLIO -- */
.portfolio { overflow: hidden; }
.portfolio__head { text-align: center; max-width: 60ch; margin-inline: auto; }
.portfolio__head h2 { font-size: clamp(1.35rem, 6vw, 4.2rem); white-space: nowrap; }
.portfolio__head p { margin-top: 0.9rem; color: var(--c-muted-light); font-size: var(--fs-lead); }
.portfolio__head .portfolio__note { margin-top: 0.45rem; color: var(--c-muted-light); font-size: 0.8rem; }
.portfolio__head .portfolio__note .kw-title { font-size: inherit; }   /* „anonymisiert" kursiv-blau, aber in Zeilengröße (nicht vergrößern) */

/* Slider: ein großes Projekt mittig, Nachbarn lugen blass hervor */
.slider { margin-top: clamp(0.5rem, 1.2vw, 0.9rem); }
.slider__viewport {
  overflow: hidden;
  padding-block: 3rem;   /* Luft, damit der weiche Karten-Schatten nicht zu einem „Strich" abgeschnitten wird */
  /* Mitte (aktive Karte) voll sichtbar; die letzten ~1,8 cm an jedem Rand werden zu Weiß ausgeblendet,
     sodass die (ohnehin auf 50% gedimmten) Nachbar-Karten dort komplett mit dem Hintergrund verschmelzen. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 2.5cm, #000 3.6cm, #000 calc(100% - 3.6cm), transparent calc(100% - 2.5cm), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, transparent 2.5cm, #000 3.6cm, #000 calc(100% - 3.6cm), transparent calc(100% - 2.5cm), transparent 100%);
}
/* Schmale Viewports (Karte füllt fast die Breite): sanfter %-Verlauf, damit die aktive Karte am Rand nicht angefasst wird */
@media (max-width: 1320px) {
  .slider__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
.slider__track {
  display: flex; gap: clamp(1.4rem, 3vw, 2.6rem);
  list-style: none; position: relative;
  will-change: transform; transition: transform 0.6s var(--ease-out);
}
.slide {
  flex: 0 0 min(900px, 84vw);
  opacity: 0;                       /* weiter entfernte Karten ausblenden */
}
.slide.is-active { opacity: 1; }
.slide.is-left, .slide.is-right { opacity: 0.5; }   /* Nachbarn grundsätzlich auf 50% verblasst */

/* Projektkarte – groß, mit feinem Gitter oben links */
.pcard {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, #fff 0%, var(--c-paper-2) 130%);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  box-shadow: 0 24px 55px -14px rgba(0,0,0,0.16);
}
/* feines technisches Gitter, nur oben links, blendet nach rechts/unten weich aus */
.pcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(12,40,70,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,40,70,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(56% 84% at 0% 0%, #000 0%, #000 46%, transparent 90%);
  mask-image: radial-gradient(56% 84% at 0% 0%, #000 0%, #000 46%, transparent 90%);
  border-radius: inherit;
}
.pcard__info, .pcard__visual { position: relative; z-index: 1; min-width: 0; }
/* Rechte Kartenhälfte: abgerundeter, fast weißer (ganz leicht grauer) Kasten – das Grau bleibt
   als Matte/Rahmen rundum um die Webseiten-Vorschau sichtbar. */
.pcard__visual {
  background: #f1f2f4;
  border-radius: 18px;
  padding: clamp(0.85rem, 1.6vw, 1.4rem);
}

@media (min-width: 900px) {
  /* Ganze Karteikarte im Format 16:9 (Größe bleibt, nur nicht mehr flach-langgezogen) */
  .pcard { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: stretch; aspect-ratio: 16 / 9; }
  .pcard__info { display: flex; flex-direction: column; }
  /* Name + Beschreibung + Tags in die untere linke Ecke (höhere Spezifität, damit es die Basis-Regel sicher schlägt) */
  .pcard__info .pcard__name { margin-top: auto; }
  /* Grauer Kasten (rechts, ~55%): zwei überlappende, kantige Webseiten-Ebenen.
     Hintergrund = rechts, (fast) volle Höhe, dahinter, 90% sichtbar.
     Vordergrund = Startseite unten links, davor. */
  .pcard__visual { min-height: 0; position: relative; display: block; padding: 0; overflow: hidden; }
  .shot__back {
    display: block;
    position: absolute; top: 0; right: 14px; bottom: 0; width: 60%;
    z-index: 1; opacity: 1;
    box-shadow: 0 14px 34px -14px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.05);
  }
  .shot__front {
    position: absolute; left: 14px; top: 38.7%; bottom: 0; width: 60%;
    z-index: 2;
    box-shadow: 0 22px 46px -16px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,0,0,0.06);
  }
}
.pcard__cat {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-muted-light);
}
.pcard__name { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; margin-top: 1.4rem; }
.pcard__desc { margin-top: 0.9rem; color: var(--c-muted-light); font-size: 1rem; line-height: 1.6; max-width: 42ch; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; }
.pcard__tags span {
  font-size: 0.82rem; padding: 0.5em 1.1em; border-radius: 99px;
  border: 1px solid rgba(14,132,196,0.35); color: #0e84c4;
}

/* Zwei kantige Webseiten-Ebenen im grauen Kasten (scharfe Ecken) */
.shot__front, .shot__back {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 2px;
}
/* Tablet-Zwischenbereich (768–899, z. B. iPad-Portrait): nur Vordergrund – UNVERÄNDERT */
@media (max-width: 899px) {
  .shot__front { position: relative; aspect-ratio: 5 / 4; width: 100%; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05); }
  .shot__back { display: none; }
}

/* Handy (≤767): Portfolio-Feinschliff + Vorder- UND Hintergrund-Webseite wie auf PC */
@media (max-width: 767px) {
  /* Hintergrund-Gitter reicht weiter nach rechts (Vertikale bleibt) */
  .pcard::before {
    -webkit-mask-image: radial-gradient(118% 84% at 0% 0%, #000 0%, #000 54%, transparent 93%);
            mask-image: radial-gradient(118% 84% at 0% 0%, #000 0%, #000 54%, transparent 93%);
  }
  /* Beschreibung + die zwei blauen Buttons kompakter (Kategorie & Name unverändert) */
  .pcard__desc { font-size: 0.9rem; line-height: 1.5; margin-top: 0.7rem; }
  .pcard__tags { gap: 0.45rem; margin-top: 1.05rem; }
  .pcard__tags span { font-size: 0.5rem; padding: 0.3em 0.65em; border-radius: 99px; }

  /* Vorder- + Hintergrund-Webseite zeigen – gleiche Geometrie wie PC, nur skaliert
     (Seitenverhältnisse identisch → die cqw-Mockup-Inhalte passen weiterhin exakt). */
  .pcard__visual { position: relative; aspect-ratio: 423 / 429; padding: 0; overflow: hidden; }
  .shot__back {
    display: block; position: absolute; top: 0; right: 8px; bottom: 0; width: 60%;
    z-index: 1; opacity: 1; aspect-ratio: auto;
    box-shadow: 0 14px 34px -14px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.05);
  }
  .shot__front {
    position: absolute; left: 8px; top: 38.7%; bottom: 0; width: 60%;
    z-index: 2; aspect-ratio: auto;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,0,0,0.06);
  }
}

/* Slider-Steuerung (Pfeile + Punkte) */
.slider__controls {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  margin-top: -1.2rem;
}
.slider__arrow {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--c-ink); color: #fff; border: none;
  transition: transform 0.2s var(--ease-out), opacity 0.2s, background 0.2s;
}
.slider__arrow:hover { transform: scale(1.08); }
.slider__arrow:disabled { opacity: 0.25; cursor: default; }
.slider__dots { display: flex; align-items: center; gap: 0.55rem; }
.slider__dot {
  width: 8px; height: 8px; border-radius: 99px; padding: 0; border: none; cursor: pointer;
  background: rgba(0,0,0,0.18); transition: width 0.3s var(--ease-out), background 0.3s;
}
.slider__dot.is-active { width: 26px; background: #0e84c4; }
@media (max-width: 767px) { .slider__arrow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .slider__track, .slide { transition: none; }
}

/* ------------------------------------------------------------------ FOOTER -- */
.footer { background: var(--c-black); color: var(--c-white); padding-block: clamp(3rem, 8vw, 5rem); }   /* border-top (1px graue Linie) entfernt: der End-Übergang endet schwarz und geht nahtlos in den schwarzen Footer über – keine sichtbare Linie mehr am Übergang→Footer */

/* ------------------------------------------------------- FLOATING WHATSAPP -- */
.wa-fab {
  position: fixed; right: clamp(1rem, 4vw, 1.6rem); bottom: clamp(1rem, 4vw, 1.6rem); z-index: 800;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-white); color: var(--c-black);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  transition: transform 0.2s var(--ease-out), background 0.35s, color 0.35s;
}
.wa-fab svg { width: 34px; height: 34px; }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab[data-on="dark"] { background: var(--c-white); color: var(--c-black); }
.wa-fab[data-on="light"] { background: var(--c-black); color: var(--c-white); }

/* ------------------------------------------------ MOBILE STICKY-CTA (Handy) -- */
/* Nur Handy: schlanke Termin-Leiste unten, erscheint nach dem Hero (JS: .is-visible).
   Der WhatsApp-Button rückt darüber, sobald die Leiste sichtbar ist. */
.mobile-cta-bar { display: none; }
@media (max-width: 767px) {
  .mobile-cta-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.7) 68%, rgba(0,0,0,0));
    transform: translateY(130%); transition: transform 0.4s var(--ease-out);
    pointer-events: none;
  }
  .mobile-cta-bar.is-visible { transform: translateY(0); pointer-events: auto; }
  .mobile-cta-bar__btn {
    display: flex; align-items: center; justify-content: center;
    padding: 0.95rem 1.4rem; border-radius: 999px;
    background: var(--c-white); color: var(--c-black);
    font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  }
  /* WhatsApp-FAB über die Leiste heben, solange sie sichtbar ist */
  .wa-fab { transition: transform 0.2s var(--ease-out), background 0.35s, color 0.35s, bottom 0.4s var(--ease-out); }
  body.has-mobile-cta .wa-fab { bottom: calc(1rem + 70px); }
}

/* ----------------------------------------------------------------- CONSENT -- */
.consent {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: clamp(0.8rem, 3vw, 1.4rem); z-index: 850;
  width: min(680px, calc(100% - 2rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem;
  padding: 1rem 1.2rem; border-radius: var(--radius);
  background: rgba(20,20,22,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line-dark); color: var(--c-white);
}
.consent[hidden] { display: none; }
.consent__text { font-size: var(--fs-sm); color: var(--c-muted-dark); flex: 1 1 260px; }
.consent__text a { color: var(--c-accent); }
.consent__actions { display: flex; gap: 0.6rem; margin-left: auto; }

/* --- Kopf der Termin-Seite (termin.html): Eyebrow, Titel, Untertext. Wird NUR dort benutzt --- */
.cal { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0; }
.cal__head { text-align: center; margin-bottom: clamp(0.6rem, 1.6vw, 1rem); }
.cal__eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.cal__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; margin: 0.6rem 0 0.5rem; }
.cal .kw-title { color: var(--c-accent-2); }
.cal__sub { font-size: 0.95rem; color: var(--c-muted-dark); max-width: 54ch; margin: 0 auto; }

/* ----------------------------------------------------------------- UTILITY -- */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.text-muted { color: var(--c-muted-dark); }
.reveal { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ====================================================== nur Handy (< 768) == */
@media (max-width: 767px) {
  /* Header: nur Marke links + Hamburger rechts. Der CTA sitzt jetzt im Hero-Body. */
  .header__cta { display: none; }
  .nav-toggle { order: 2; margin-left: auto; position: relative; z-index: 902; }

  /* Aufklapp-Menü (nutzt die vorhandene .nav): kompaktes Panel, das unter dem
     Header von oben hereinfährt, sobald body.nav-open gesetzt ist. */
  .nav {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; z-index: 901;
    top: calc(var(--header-h) - 4px);
    left: var(--pad-x); right: var(--pad-x);
    padding: 0.4rem;
    border-radius: 16px;
    background: rgba(9, 15, 25, 0.82);
    border: 1px solid rgba(71, 184, 255, 0.22);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.75);
    opacity: 0; transform: translateY(-12px);
    visibility: hidden; pointer-events: none;
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  }
  .nav__link {
    opacity: 1; color: var(--c-white);
    font-size: 0.95rem; font-weight: 500;
    padding: 0.62rem 0.85rem; border-radius: 9px;
    transition: background 0.18s;
  }
  .nav__link:active { background: rgba(71, 184, 255, 0.14); }

  body.nav-open .nav {
    opacity: 1; transform: translateY(0);
    visibility: visible; pointer-events: auto;
  }

  /* Drei Striche → X, wenn geöffnet */
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- Hero: 3 Zonen über die volle Höhe – Textblock oben, CTA mittig, Widgets unten
     (viewport-unabhängig; Widgets enden immer knapp über dem fixed WhatsApp-Button) ---- */
  .hero { align-items: stretch; padding-top: 0; padding-bottom: 0; }
  .hero__inner {
    display: flex; flex-direction: column;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 0.6rem);
    padding-bottom: 5.4rem;                         /* = Höhe/Abstand des WhatsApp-Buttons */
    transform: translateY(-0.5cm);                  /* ganzes Element-Paket 0,5cm höher – Innenabstände 1:1 unverändert */
  }
  .hero__title { font-size: clamp(2.15rem, 9.4vw, 2.7rem); line-height: 1.07; }   /* größer; skaliert mit der Breite, schmale Handys bleiben 2-zeilig */
  /* Textblock (Eyebrow/Titel/Untertext) nach unten an den CTA heranziehen:
     der obere Freiraum wandert ÜBER den Eyebrow (margin-top:auto). Die CTA bleibt
     mittig (2. auto sitzt weiterhin auf .hero__mobile), nur kleiner Abstand zum Text. */
  .hero__eyebrow { margin-top: auto; align-self: flex-start; font-size: 0.72rem; padding: 0.32rem 0.72rem; }
  .hero__sub { font-size: 0.9rem; line-height: 1.5; margin-top: 1.1rem; }
  .hero .hero__cta { display: inline-flex; align-self: flex-start; width: auto; margin-top: 0.95rem; margin-bottom: 0; padding: 0.72em 1.55em; font-size: 0.92rem; transform: translateY(1.25cm); }   /* nur der Button 1,25cm tiefer (Transform ändert kein Layout): großer Abstand zum Untertext darüber, kleiner zu den USPs darunter; alle anderen Elemente bleiben fix */
  .hero__mobile { display: flex; flex-direction: column; align-items: stretch; gap: 0.95rem; margin-top: auto; }

  /* Überschriften mobil größer: statt einzeilig gequetscht (nowrap) umbrechen lassen */
  /* „Ausgewählte Projekte" bleibt groß und darf umbrechen */
  .portfolio__head h2 { white-space: normal; font-size: clamp(2.1rem, 8.6vw, 2.7rem); line-height: 1.1; }
  /* Untertitel „Überzeugen Sie sich selbst …" garantiert EINZEILIG (nowrap + vw, passt 360–430);
     :not(.portfolio__note) schützt die lange Hinweiszeile davor, ebenfalls nowrap zu werden. */
  .portfolio__head p:not(.portfolio__note) { white-space: nowrap; font-size: clamp(0.78rem, 3.5vw, 1.02rem); }
  /* Hinweiszeile mobil deutlich kleiner (zwei Stufen unter dem Original 14px) */
  .portfolio__head .portfolio__note { font-size: 0.72rem; }
  /* „Ihre Webseite, von A bis Z" so groß wie möglich, aber garantiert EINZEILIG (nowrap + vw) */
  .loesung .section-head h2 { white-space: nowrap; font-size: clamp(1.5rem, 7.4vw, 2.6rem); line-height: 1.12; }
  .hero__usps { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; list-style: none; padding: 0; margin: 0; }
  .hero__usps li { display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.82rem; color: #c5d6e8; }
  .hero__usps svg { color: #22d3ee; flex: none; }
  /* WhatsApp-Button auf dem Handy einen Tick kleiner */
  .wa-fab { width: 62px; height: 62px; }
  .wa-fab svg { width: 29px; height: 29px; }
}

/* Kurze Handys (z. B. 375×812): größere Titel-Schrift + tiefere CTA würden sonst den
   WhatsApp-Button berühren → nur hier den Eyebrow-Abstand straffen. Große Handys (≈932) unberührt. */
@media (max-width: 767px) and (max-height: 850px) {
  .hero__eyebrow { margin-bottom: 0.85rem; }
}

/* ============================================================ ≥ 768 (iPad) == */
@media (min-width: 768px) {
  :root { --header-h: 88px; }                       /* mehr Abstand zum oberen Rand */
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .brand { font-size: 2.2rem; font-weight: 700; }   /* Nexus so prominent wie der Button (+2 Stufen) */
  .header__cta { display: inline-flex; }            /* CTA auch auf iPad sichtbar */
}
/* nur iPad-Bereich: Nav mittig, CTA passt rechts rein */
@media (min-width: 768px) and (max-width: 1023px) {
  .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .brand { justify-self: start; }
  .nav { justify-self: center; gap: 1rem; }
  .nav__link { font-size: 0.85rem; }
  .header__cta { justify-self: end; }

  /* iPad-Hero: Titel DEUTLICH größer, bleibt aber garantiert 2-zeilig
     (》Alles aus einer Hand《 einzeilig – bei 768 / 820 / 834 geprüft). max-width raus,
     sonst erzwingt das 14ch der Basisregel einen dritten Umbruch. */
  .hero__title { max-width: none; font-size: clamp(3.1rem, 7.9vw, 4.3rem); line-height: 1.05; }
  .hero__sub { max-width: 54ch; }

  /* Eyebrow + Titel + Untertext + Widgets als EIN Block etwas nach oben ziehen.
     Die Sektion zentriert .hero__inner vertikal (align-items:center); der translate hebt
     den gesamten Block um ~1/3 des oberen Freiraums an – nach oben, aber nicht zu viel. */
  .hero__inner { transform: translateY(calc(-2.6svh - 0.125cm)); }   /* Vertikalposition, in mehreren Runden feinjustiert. Zusammen mit .hero__mobile margin-top so ausbalanciert (Modell: obere Elemente = ΔT−ΔM/2, untere = ΔT+ΔM/2), dass die OBEREN Elemente (Eyebrow/Titel/Untertext/Button) 0,25cm höher sitzen als die UNTEREN 5 (USP-Häkchen + beide Widgets): ΔT=-0.375cm hier + ΔM=+0.25cm an .hero__mobile → obere -0,5cm, untere -0,25cm ab vorherigem Stand. */

  /* iPad bekommt jetzt (wie Handy) CTA + die 3 USP-Häkchen ZWISCHEN Untertext und Widgets.
     Reihenfolge über die DOM-Folge: Untertext → Button → Häkchen → Widgets. Der Text-Block
     (Eyebrow/Titel/Untertext) bleibt fix – der translate-Wert unten ist so nachgezogen, dass der
     Block trotz der neuen Höhe nicht wandert (Widgets rücken nach unten, Text nicht). */
  .hero .hero__cta { display: inline-flex; align-self: flex-start; width: auto; margin: 1.7rem 0 0; padding: 0.82em 1.9em; font-size: 1.02rem; }
  .hero__mobile { display: block; margin-top: calc(1.6rem + 1.75cm); }   /* Abstand Button → die 5 Elemente (USP-Häkchen + beide Widgets); zugleich der ΔM-Hebel, mit dem obere/untere Gruppe unterschiedlich weit hochwandern (siehe .hero__inner). Wächst mit jeder Runde: die oberen Elemente steigen 0,25cm mehr als die unteren 5 → der Abstand hier vergrößert sich entsprechend. */
  .hero__usps { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; list-style: none; padding: 0; margin: 0 0 1.7rem; }
  .hero__usps li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: #c5d6e8; }
  .hero__usps svg { width: 1.1rem; height: 1.1rem; color: #22d3ee; flex: none; }
  .hero__proof { flex-direction: column; gap: 0.95rem; max-width: 472px; }
  /* Karte schmaler → weniger leerer Rand links/rechts vom Inhalt. Text + Grafik an den nun
     näheren Rändern (space-between); beide Karten gleiche Textbreite → identische Mittellücke. */
  .hero__proof .stat-card { padding: 1.5rem 2rem; gap: 1.15rem; border-radius: 20px; justify-content: space-between; }
  .hero__proof .stat-card__text { flex: 0 0 auto; min-width: 136px; }
  .hero__proof .stat-card__viz { flex: 0 0 152px; }
  .hero__proof .stat-card__title { font-size: 0.94rem; }
  .hero__proof .stat-card__num { font-size: 2.05rem; }
  .hero__proof .stat-card__pct { font-size: 1.42rem; }
  .hero__proof .stat-card__note { font-size: 0.82rem; }
}

/* ========================================================= ≥ 1024 (Desktop) = */
@media (min-width: 1024px) {
  .header__cta { display: inline-flex; }
  .header__inner { max-width: none; }   /* Nexus ganz links, CTA ganz rechts (volle Breite) */
  .nav { gap: 3rem; }                    /* größere Abstände zwischen den Nav-Wörtern */
  .nav__link { font-size: 1.05rem; }     /* etwas größere Schrift */
}

/* ----------------------------------------------------------------- PREISE -- */
/* Helle Sektion: großer Einmal-Kauf, zwei Abo-Karten (Premium hervorgehoben),
   Hilfe-CTA → Kalender. Karten-Stil und Tokens konsistent zum Rest. */
.btn--dark { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { transform: scale(1.04); background: #000; }

.preise .eyebrow { color: #0d72a8; display: inline-block; }
.preise .section-head { max-width: 56ch; }

.preise__einmal {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: var(--c-paper-2);
}
.preise__einmal-label { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: #0e84c4; }
.preise__einmal-price { margin-top: 0.3rem; font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--c-ink); }
.preise__einmal-note { margin-top: 0.6rem; color: var(--c-muted-light); font-size: var(--fs-sm); max-width: 48ch; }

.preise__abo-heading { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

.preise__cards { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 880px) { .preise__cards { grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; } }

.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.6rem, 3.2vw, 2.1rem);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: #fff;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .price-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 26px 60px rgba(0,0,0,0.12); }
}
@media (prefers-reduced-motion: reduce) { .price-card:hover { transform: none; } }
.price-card--featured { background: var(--c-paper-2); border-color: var(--c-accent-3); box-shadow: 0 22px 55px rgba(34,211,238,0.18); }
.price-card__badge {
  position: absolute; top: -0.85rem; left: clamp(1.6rem, 3.2vw, 2.1rem);
  font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: #0e84c4; padding: 0.35rem 0.75rem; border-radius: 999px;
}
.price-card h3 { font-size: 1.4rem; letter-spacing: -0.01em; }
.price-card__price { margin-top: 0.7rem; font-size: clamp(2.2rem, 5vw, 2.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.price-card__price span { font-size: 1rem; font-weight: 400; color: var(--c-muted-light); letter-spacing: 0; margin-left: 0.15rem; }
.price-card__base { margin-top: 0.7rem; font-weight: 600; color: var(--c-ink); }
.price-card__base s { color: var(--c-muted-light); font-weight: 400; margin-right: 0.3rem; }
.price-card__amount { font-size: 1.3em; }   /* Grundgebühr-Betrag (149 € / 0 €) etwas größer */
.price-card__for { margin-top: 0.6rem; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-muted-light); }
.price-card--featured .price-card__for { color: #0e84c4; }   /* Premium-Orientierung im Akzent → lenkt zur Wahl */

/* Preis-FAQ – native Aufklapp-Liste (kein JS nötig) */
.preise__faq { max-width: 760px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.preise__faq-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.8rem; }
.faq__item { border-top: 1px solid var(--line-light); }
.preise__faq .faq__item:last-child { border-bottom: 1px solid var(--line-light); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-size: 1.05rem; font-weight: 600; color: var(--c-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: #0e84c4; transition: transform 0.25s var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item > p { margin: 0 0 1.1rem; color: var(--c-muted-light); line-height: 1.6; max-width: 64ch; }
.price-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line-light); }
.price-card__list li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; line-height: 1.45; color: var(--c-muted-light); }
.price-card__list li::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent-3); box-shadow: 0 0 0 3px rgba(65,181,255,0.16); }
.price-card__term { margin-top: auto; padding-top: 1.2rem; font-size: var(--fs-sm); color: var(--c-muted-light); }

.preise__help { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; }
.preise__help-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.preise__help-sub { margin-top: 0.4rem; color: var(--c-muted-light); }
.preise__help .btn { margin-top: 1.2rem; }

/* PC (>=1024): Einmal-Kauf + beide Abo-Preise kompakter & besser „auf einen Blick".
   Einmal-Kauf und Karten leicht schmaler (linksbündig → linke Position/Ausrichtung bleibt,
   sie schrumpfen nach rechts), Karten dezent kleiner (Padding/Preis/Liste) → Block wird flacher,
   alle drei Preise rücken näher zusammen. Handy/iPad bleiben unberührt. */
@media (min-width: 1024px) {
  .preise__einmal { max-width: 1080px; margin-top: 1.5rem; padding: 1.7rem 1.9rem; }
  .preise__einmal-price { font-size: clamp(2rem, 4.2vw, 3rem); }
  .preise__abo-heading { max-width: 1080px; margin-top: 2rem; }
  .preise__cards { max-width: 1080px; margin-top: 1.1rem; gap: 1.4rem; }
  .price-card { padding: 1.8rem 1.75rem; }
  .price-card__badge { left: 1.75rem; }
  .price-card__price { font-size: 2.5rem; }
  .price-card__list { gap: 0.5rem; margin-top: 1.05rem; padding-top: 1.05rem; }
  .price-card__list li { font-size: 0.9rem; }
}

/* ============================================================
   #bewertungen – Kundenstimmen als Laufband (Marquee)
   ============================================================ */
.bewertungen { overflow: hidden; }
.bewertungen .section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.bewertungen__marquee {
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bewertungen__row { display: flex; overflow: hidden; }
.bewertungen__track {
  display: flex; gap: clamp(0.9rem, 1.8vw, 1.2rem); width: max-content;
  will-change: transform; animation: bmarquee 52s linear infinite;
}
.bewertungen__row--2 .bewertungen__track { animation-duration: 64s; animation-direction: reverse; }
.bewertungen__marquee:hover .bewertungen__track { animation-play-state: paused; }
@keyframes bmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bewertungen__track { animation: none; }
  .bewertungen__row { overflow-x: auto; }
}
.bcard {
  flex: none; width: min(340px, 78vw);
  background: var(--c-surface); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.bcard__top { display: flex; align-items: center; justify-content: space-between; }
.bcard__stars { color: #f5b840; letter-spacing: 0.1em; font-size: 0.95rem; }
.bcard__g { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.72rem; color: var(--c-muted-dark); font-family: var(--font-mono); letter-spacing: 0.02em; }
.bcard__gi { display: block; }
.bcard__quote { margin: 0; font-size: 1rem; line-height: 1.55; color: #e9e9ec; }
.bcard figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.bcard__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em; color: #fff; background: var(--a, #47b8ff); flex: none; }
.bcard__avatar--img { background: #fff; overflow: hidden; }
.bcard__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.bcard__who { display: flex; flex-direction: column; line-height: 1.25; }
.bcard__who b { font-size: 0.9rem; color: #fff; font-weight: 600; }
.bcard__who span { font-size: 0.78rem; color: var(--c-muted-dark); }

/* Handy (≤767): Bewertungen als sauberer vertikaler Stapel statt seitlichem Laufband –
   alle Kundenstimmen voll lesbar untereinander (mehr sichtbar), Duplikate & Seiten-Fade aus. */
@media (max-width: 767px) {
  .bewertungen__marquee { margin-top: clamp(1.8rem, 6vw, 2.4rem); gap: 0.85rem; -webkit-mask-image: none; mask-image: none; }
  .bewertungen__row { display: block; overflow: visible; }
  .bewertungen__track { flex-direction: column; gap: 0.85rem; width: auto; animation: none !important; will-change: auto; }
  /* Nur die VIER aussagekräftigsten (längeren) Stimmen zeigen – zeigen Nexus' Fähigkeiten am besten:
     Reihe 1 → Kosmetikstudio (elegantes Design) + Zahnarztpraxis (3 Standorte verknüpft);
     Reihe 2 → Friseursalon (Online-Terminbuchung) + Blumengeschäft (rundum-sorglos). */
  .bewertungen__row--1 .bcard:not(:nth-child(1)):not(:nth-child(4)),
  .bewertungen__row--2 .bcard:not(:nth-child(4)):not(:nth-child(5)) { display: none; }
  .bcard { width: 100%; padding: 1.15rem 1.3rem; gap: 0.7rem; }
  .bcard__quote { font-size: 0.92rem; line-height: 1.5; }
}

/* ============================================================
   #kontakt – Live-Call-Banner + Klick-Formular-Wizard
   ============================================================ */
.kontakt .section-head { max-width: 60ch; }
.kontakt .eyebrow { color: #0d72a8; display: inline-block; }

.kontakt__grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 860px) { .kontakt__grid { grid-template-columns: 1fr; } }

.kontakt__wizard {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 18px 50px rgba(10, 10, 10, 0.05);
}

/* Intro-Panel (Schritt 0) */
.kw-intro__h { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: var(--c-ink); }
.kw-intro__p { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--c-muted-light); max-width: 42ch; }
.kw-intro__badges { list-style: none; margin: 1.8rem 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.kw-intro__badges li { flex: 1 1 8.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.55rem; font-size: 0.92rem; font-weight: 500; color: var(--c-ink); background: var(--c-paper); border: 1px solid #e9e9e9; border-radius: var(--radius); padding: 1rem 1.1rem; }
.kw-intro__badges svg { width: 1.5rem; height: 1.5rem; color: #0e84c4; flex: none; }
.kw-start { min-width: 13.5rem; font-size: 1.02rem; padding: 0.95em 2em; }

/* Aside: Direktkontakt + Vertrauen */
.kontakt__aside { display: flex; flex-direction: column; gap: 1.2rem; }
.kontakt__call { background: var(--c-ink); color: #fff; border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; }
.kontakt__call-eyebrow { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; }
.kontakt__call-txt { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.kontakt__call-blau { color: var(--c-accent-2); font-weight: 600; }
.kontakt__call .btn--dark { background: #fff; color: var(--c-ink); width: 100%; }
.kontakt__call .btn--dark:hover { background: #efefef; }
.kontakt__points { list-style: none; margin: 0; padding: 0 0.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.kontakt__points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--c-ink); }
.kontakt__points svg { width: 1.05rem; height: 1.05rem; color: #1a9e6a; flex: none; }
.kontakt__direct { display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid #ececec; padding-top: 1.1rem; }
.kontakt__direct a { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--c-muted-light); text-decoration: none; }
.kontakt__direct a:hover { color: var(--c-ink); }
.kontakt__direct svg { width: 1rem; height: 1rem; color: #0e84c4; flex: none; }
.kw-step { display: none; margin: 0; padding: 0; border: 0; }
.kw-step.is-active { display: block; }
.kw-q { display: block; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); margin-bottom: 1.3rem; padding: 0; }
.kw-q i, .kw-opt-hint { font-style: normal; font-weight: 400; color: var(--c-muted-light); font-size: 0.85em; }

.kw-opts { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.kw-opt {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 500;
  color: var(--c-ink); background: #fff; border: 1px solid #d6d6d6; border-radius: 999px;
  padding: 0.7rem 1.25rem; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.kw-opt:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.kw-opt.is-selected { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.kw-fields { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.kw-field { display: flex; flex-direction: column; gap: 0.4rem; }
.kw-field > span { font-size: 0.85rem; font-weight: 500; color: var(--c-muted-light); }
.kw-field > span i { font-style: normal; font-weight: 400; }
.kw-field input {
  font: inherit; font-size: 1rem; color: var(--c-ink);
  border: 1px solid #d6d6d6; border-radius: 12px; padding: 0.85rem 1rem; background: #fff;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.kw-field input:focus { outline: none; border-color: #0e84c4; box-shadow: 0 0 0 3px rgba(14, 132, 196, 0.12); }
.kw-field input.kw-invalid { border-color: #d24a4a; box-shadow: 0 0 0 3px rgba(210, 74, 74, 0.1); }
/* Freitext-Nachricht (Schritt 5): größeres, professionelles Textfeld */
.kw-fields--wide { max-width: 560px; }
.kw-field textarea {
  font: inherit; font-size: 1rem; color: var(--c-ink); line-height: 1.55;
  border: 1px solid #d6d6d6; border-radius: 12px; padding: 0.85rem 1rem; background: #fff;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  resize: vertical; min-height: 8.5rem;
}
.kw-field textarea:focus { outline: none; border-color: #0e84c4; box-shadow: 0 0 0 3px rgba(14, 132, 196, 0.12); }
.kw-field textarea.kw-invalid { border-color: #d24a4a; box-shadow: 0 0 0 3px rgba(210, 74, 74, 0.1); }

.kw-summary { list-style: none; margin: 0 0 1.3rem; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--c-paper); border: 1px solid #ececec; border-radius: 12px; }
.kw-summary li { display: flex; gap: 0.6rem; font-size: 0.9rem; color: var(--c-muted-light); }
.kw-summary li b { color: var(--c-ink); font-weight: 600; min-width: 7.5rem; }

.kw-check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; color: var(--c-muted-light); cursor: pointer; max-width: 52ch; }
.kw-check input { width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; accent-color: #0e84c4; flex: none; cursor: pointer; }
.kw-check a { color: #0d72a8; text-decoration: underline; text-underline-offset: 2px; }

.kw-nav { display: none; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.kw-nav.is-visible { display: flex; }
.kw-back {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 500;
  color: var(--c-muted-light); background: none; border: 0; padding: 0.6rem 0.2rem;
}
.kw-back:hover { color: var(--c-ink); }
.kw-hint { margin-left: auto; font-size: 0.85rem; color: #d24a4a; text-align: right; }
.kw-nav .kw-next { min-width: 9.5rem; }

.kw-step--done { text-align: center; padding: 1.2rem 0 0.6rem; }
.kw-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(14, 132, 196, 0.1); color: #0e84c4; margin-bottom: 1.1rem; }
.kw-done-h { margin: 0 0 0.6rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; color: var(--c-ink); }
.kw-done-p { margin: 0 auto 1.5rem; max-width: 44ch; font-size: 0.98rem; line-height: 1.6; color: var(--c-muted-light); }
.kontakt__wizard.is-done .kw-nav { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--c-black); color: var(--c-white); padding: clamp(3.2rem, 7vw, 5.5rem) 0 1.8rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); }
.footer__brand { max-width: 34ch; }
.footer__logo { display: inline-block; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.7rem; }   /* +3 Stufen (0,6rem) */
.footer__brand p { font-size: 0.92rem; line-height: 1.65; color: var(--c-muted-dark); }
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer__ct { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-2); margin-bottom: 0.5rem; }
.footer__col a { font-size: 0.92rem; color: var(--c-muted-dark); text-decoration: none; width: fit-content; transition: color 0.2s var(--ease-out); }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--c-muted-dark);
}
@media (max-width: 899px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .kw-nav { flex-wrap: wrap; }
  .kw-hint { flex-basis: 100%; text-align: left; order: 3; }
}

/* Handy (≤767): Kontakt-Wizard-Intro – die drei Vertrauens-Badges in EINE Reihe
   nebeneinander (Schrift/Padding dafür kleiner, Design/Inhalt bleibt) + CTA zentriert. */
@media (max-width: 767px) {
  .kw-intro__badges { flex-wrap: nowrap; gap: 0.5rem; margin: 1.4rem 0 1.6rem; }
  .kw-intro__badges li { flex: 1 1 0; min-width: 0; font-size: 0.74rem; padding: 0.8rem 0.45rem; gap: 0.4rem; }
  .kw-intro__badges svg { width: 1.3rem; height: 1.3rem; }
  .kw-start { display: flex; width: fit-content; margin-inline: auto; }
}

/* ---- Handy-Kompaktierung: Lösung-Kästen & Preise enger. NUR Abstände/Größen kleiner – Text & Inhalt
   bleiben 1:1, damit weniger gescrollt werden muss. ---- */
@media (max-width: 767px) {
  /* Lösung „A bis Z": Icon NEBEN den Titel (statt darüber), engere Kästen & kleinere Lücken. */
  .pillars { gap: 0.85rem; margin-top: clamp(1.5rem, 5vw, 2.3rem); }
  .pillar { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.85rem; padding: 1.15rem 1.25rem; }
  .pillar__icon { grid-column: 1; grid-row: 1; margin-bottom: 0; width: 42px; height: 42px; border-radius: 11px; }
  .pillar__icon svg { width: 21px; height: 21px; }
  .pillar h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; font-size: 1.12rem; }
  .pillar__list { grid-column: 1 / -1; grid-row: 2; margin-top: 0.75rem; gap: 0.4rem; }
  .pillar__list li { font-size: 0.86rem; padding-left: 1.45rem; line-height: 1.35; }

  /* Preise: Einmalkauf + beide Abo-Karten dezent enger zusammen → alle Kaufmöglichkeiten auf einen Blick. */
  .preise__einmal { margin-top: 1.1rem; padding: 1.35rem 1.3rem; }   /* Handy: nur sanft enger (nicht zu klein), ~20% weniger stark als PC/iPad */
  .preise__einmal-price { font-size: clamp(2rem, 8vw, 2.55rem); }
  .preise__abo-heading { margin-top: 1.45rem; }
  .preise__cards { margin-top: 0.9rem; gap: 0.9rem; }
  .price-card { padding: 1.35rem 1.3rem; }
  .price-card h3 { font-size: 1.24rem; }
  .price-card__price { font-size: clamp(2rem, 7vw, 2.5rem); }
  .price-card__base { margin-top: 0.55rem; white-space: nowrap; font-size: 0.85rem; }   /* Premium: „Einmalige Grundgebühr 199–399 € 99 €" garantiert EINZEILIG */
  .price-card__amount { font-size: 1.15em; }
  .price-card__for { margin-top: 0.5rem; }
  .price-card__list { gap: 0.45rem; margin-top: 1rem; padding-top: 1rem; }
  .price-card__list li { font-size: 0.86rem; }
  .price-card__term { padding-top: 0.9rem; }

  /* Tipp-Animation wie der PC-Hover: beim Antippen von Einmal-Kauf / Basis / Premium poppt die Karte kurz
     heraus (Klick löst NUR die Animation aus). initTapActive() in main.js sorgt dafür, dass iOS :active auslöst.
     Bewusst KRÄFTIGER als vorher (−13px / scale 1.055), damit der Pop auch auf den großen Abo-Karten
     (Basis/Premium) deutlich sichtbar ist – nicht nur beim kleineren Einmal-Kauf-Feld. */
  .preise__einmal, .price-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .preise__einmal { transition: transform 0.28s var(--ease-out), box-shadow 0.28s; }
  /* !important: überschreibt sicher einen evtl. von der GSAP-Einblendung zurückgelassenen Inline-transform,
     damit der Tipp-Pop auf den großen Abo-Karten IMMER greift (nicht nur beim Einmal-Kauf). */
  .preise__einmal:active, .price-card:active { transform: translateY(-13px) scale(1.055) !important; box-shadow: 0 40px 84px rgba(0,0,0,0.26); }
  .price-card--featured:active { box-shadow: 0 42px 88px rgba(34,211,238,0.40); }
}

/* ================= iPad (768–1023): Sektions-Anpassungen ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Prozess: Inhalts-Kästchen schmaler (dafür etwas höher) */
  .prozess__timeline { max-width: 560px; }

  /* Kontakt: die beiden Sektionen NEBENEINANDER (überschreibt das ≤860-Stapeln) */
  .kontakt__grid { grid-template-columns: 1.1fr 0.9fr; }

  /* Bewertungen: die SECHS besten Stimmen als sauberes 2×3-Raster – drei links, drei rechts
     (Reihen/Tracks via display:contents aufgelöst, damit alle 6 Karten in EIN Raster fließen). */
  .bewertungen__marquee { -webkit-mask-image: none; mask-image: none; max-width: 660px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 1.6rem; align-items: start; }
  .bewertungen__row, .bewertungen__track { display: contents; }
  /* Karten ein kleines Stück kleiner – ruhig stehend, keine Animation */
  .bewertungen__marquee .bcard { width: auto; margin: 0; padding: 1.3rem 1.45rem; animation: none !important; will-change: auto; }
  .bewertungen__marquee .bcard[aria-hidden="true"] { display: none; }
  /* je Reihe die zwei schwächeren ausblenden → 6 gesamt: Spalte links = Kosmetik·Fahrschule·Zahnarzt, rechts = Physio·Autohaus·Friseur.
     grid-auto-flow:column füllt spaltenweise → die hohe Zahnarzt-Karte landet automatisch unten (kein Loch). */
  .bewertungen__row--1 .bcard:nth-child(3), .bewertungen__row--1 .bcard:nth-child(5),
  .bewertungen__row--2 .bcard:nth-child(3), .bewertungen__row--2 .bcard:nth-child(5) { display: none; }

  /* Preise: die zwei Abo-Karten NEBENEINANDER (statt gestapelt bis 880) – dadurch
     werden die Kästen schmaler; Innen-Typo & Abstände auf die schmalere Karte optimiert. */
  .preise__cards { grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: stretch; margin-top: 1.2rem; }
  .preise__einmal { margin-top: 1.3rem; }   /* Einmal-Kauf enger unter die Überschrift → alle Preise besser auf einen Blick */
  .price-card { padding: 1.5rem 1.35rem; }
  .price-card__badge { left: 1.35rem; }
  .price-card h3 { font-size: 1.22rem; }
  .price-card__price { font-size: 2.3rem; }
  .price-card__price span { font-size: 0.88rem; }
  .price-card__base { margin-top: 0.6rem; font-size: 0.92rem; }
  .price-card__for { font-size: 0.83rem; }
  .price-card__list { gap: 0.5rem; margin-top: 1.05rem; padding-top: 1.05rem; }
  .price-card__list li { font-size: 0.84rem; padding-left: 1.4rem; }
  .price-card__term { font-size: 0.8rem; padding-top: 1rem; }

  /* Preise: leichte Tipp-Animation auf iPad (wie der PC-Hover); der Klick selbst löst nur die Animation aus */
  .preise__einmal, .price-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .preise__einmal { transition: transform 0.28s var(--ease-out), box-shadow 0.28s; }
  .preise__einmal:active, .price-card:active { transform: translateY(-9px) scale(1.03); box-shadow: 0 32px 70px rgba(0,0,0,0.20); }
  .price-card--featured:active { box-shadow: 0 34px 74px rgba(34,211,238,0.32); }

  /* Kontakt-Intro: die drei Vertrauens-Badges sauber in EINE Reihe + „Jetzt Anfrage starten" mittig */
  .kw-intro__badges { flex-wrap: nowrap; gap: 0.55rem; }
  .kw-intro__badges li { flex: 1 1 0; min-width: 0; font-size: 0.82rem; padding: 0.9rem 0.5rem; gap: 0.45rem; }
  .kw-intro__badges svg { width: 1.35rem; height: 1.35rem; }
  .kw-start { display: flex; width: fit-content; margin-inline: auto; }

  /* Kontakt: der weiße Wizard-Kasten unten ein kleines Stück länger */
  .kontakt__wizard { padding-bottom: 3.4rem; }

  /* Portfolio: Hintergrund-Gitter weiter nach rechts (wie Handy) */
  .pcard::before {
    -webkit-mask-image: radial-gradient(118% 84% at 0% 0%, #000 0%, #000 54%, transparent 93%);
            mask-image: radial-gradient(118% 84% at 0% 0%, #000 0%, #000 54%, transparent 93%);
  }
}

/* Portfolio: Vorder- + Hintergrund-Webseite auch auf schmalem iPad (768–899);
   ab 900px zeigt bereits das PC-Layout beide Ebenen. */
@media (min-width: 768px) and (max-width: 899px) {
  /* (1) Die ganze Karteikarte ein kleines Stück kleiner (alle Dimensionen). */
  .slide { flex: 0 0 min(760px, 78vw); }
  /* (2) Zusätzlich NUR der graue Webseiten-Kasten etwas kleiner IN der Karte – mittig,
     Text bleibt; Vorder-/Hintergrund-Fenster behalten ihre Lage (%-Positionen unverändert). */
  .pcard__visual { position: relative; aspect-ratio: 423 / 429; padding: 0; overflow: hidden; width: 86%; justify-self: center; }
  .shot__back { display: block; position: absolute; top: 0; right: 8px; bottom: 0; width: 60%; z-index: 1; opacity: 1; aspect-ratio: auto; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.05); }
  .shot__front { position: absolute; left: 8px; top: 38.7%; bottom: 0; width: 60%; z-index: 2; aspect-ratio: auto; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,0,0,0.06); }
}

/* ============================================================
   Rechtsseiten (impressum.html · datenschutz.html · agb.html)
   ============================================================ */
body.legal-page { background: #fff; color: var(--c-ink); }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--container); margin-inline: auto; padding: 1.2rem var(--pad-x); }
.legal-header__brand { font-size: 1.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); text-decoration: none; }   /* +3 Stufen (0,6rem) */
.legal-header__back { font-size: 0.88rem; font-weight: 500; color: var(--c-muted-light); text-decoration: none; border: 1px solid #ddd; border-radius: 999px; padding: 0.55rem 1.1rem; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.legal-header__back:hover { color: var(--c-ink); border-color: var(--c-ink); }
.legal { max-width: 860px; margin-inline: auto; padding: clamp(1.6rem, 4vw, 3rem) var(--pad-x) clamp(3rem, 7vw, 5rem); }
.legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.6rem; }
.legal-stand { display: block; font-size: 0.85rem; color: var(--c-muted-light); margin-bottom: 2.2rem; }
.legal h2 { font-size: 1.28rem; letter-spacing: -0.01em; margin: 2.3rem 0 0.7rem; }
.legal h3 { font-size: 1.04rem; margin: 1.5rem 0 0.45rem; }
.legal p, .legal li { font-size: 0.97rem; line-height: 1.7; color: var(--c-muted-light); }
.legal p { margin: 0 0 0.9rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.3rem; }
.legal a { color: #0d72a8; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--c-ink); font-weight: 600; }
mark.ph { background: #fff3bf; border: 1px dashed #e2c14b; border-radius: 6px; padding: 0.05em 0.4em; color: #7a5d00; font-weight: 500; }
.legal-footer { border-top: 1px solid #ececec; }
.legal-footer__in { max-width: var(--container); margin-inline: auto; padding: 1.5rem var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.84rem; color: var(--c-muted-light); }
.legal-footer__in nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.legal-footer__in a { color: var(--c-muted-light); text-decoration: none; }
.legal-footer__in a:hover { color: var(--c-ink); }

/* ============================================================ WORTMARKE ===== */
/* Wortmarke NEXUS (Alkatra, Vektor) — ersetzt den getippten Schriftzug in der
   Kopfleiste (Startseite + Rechtsseiten) und im Footer.
   Der Vektor liegt DIREKT im HTML (Inline-SVG), nicht als externe Datei. Grund:
   als CSS-Maske geladen blieb die Wortmarke in manchen Browsern/Kontexten (Safari,
   Öffnen per file://) unsichtbar — eine extern geladene Maske kann fehlschlagen,
   ein Inline-SVG nicht. fill="currentColor" im SVG sorgt dafür, dass die Wortmarke
   die Textfarbe annimmt: Der Header wechselt beim Scrollen zwischen dark (weiß) und
   light (schwarz), die Wortmarke geht automatisch mit.
   Höhe in em → skaliert mit den bestehenden font-size-Regeln (Handy/iPad).
   Steht bewusst am Dateiende: überschreibt das display der drei Elemente von oben. */
.brand,
.legal-header__brand,
.footer__logo { display: inline-flex; align-items: center; }

.wordmark {
  display: block;
  height: 0.75em;                        /* ≈ Versalhöhe des vorherigen Textes */
  width: auto;
  aspect-ratio: 2920 / 712;              /* viewBox der Wortmarke */
  flex: none;
  overflow: visible;                     /* Alkatra ist kalligrafisch: Schwünge ragen leicht aus der Box */
}

/* Text bleibt für Suchmaschinen und Screenreader im DOM, sichtbar ist die Wortmarke. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }