/* ============================================================================
   Markus Scherreik — Portfolio
   Design System v2 · Stand 2026-08
   ----------------------------------------------------------------------------
   Struktur:  @layer reset, tokens, base, layout, components, utilities, print
   Theming:   color-scheme + light-dark()  (Baseline newly available, 05/2026)
              Fallback via prefers-color-scheme in @supports-Block
   A11y:      WCAG 2.2 AA — alle Paare >= 4.5:1 (Text) / 3:1 (UI)
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities, print;

/* ============================================================================
   TOKENS
   ========================================================================== */
@layer tokens {

  :root {
    color-scheme: light dark;

    /* ---- Flächen ------------------------------------------------------- */
    --c-bg:            light-dark(#fbfbfa, #0a0a0b);
    --c-bg-subtle:     light-dark(#f4f4f2, #101012);
    --c-surface:       light-dark(#ffffff, #131316);
    --c-surface-2:     light-dark(#f7f7f5, #191a1d);
    --c-surface-3:     light-dark(#eeeeeb, #1f2024);
    --c-border:        light-dark(#e5e5e1, #26272b);
    --c-border-strong: light-dark(#cfcfc9, #35363c);

    /* ---- Text (alle Werte AA-geprüft gegen --c-bg) ---------------------- */
    --c-text:          light-dark(#18181b, #ededf0);   /* 17.1 : 1  /  16.0 : 1 */
    --c-text-muted:    light-dark(#52525b, #a2a2ac);   /*  7.5 : 1  /   7.7 : 1 */
    --c-text-dim:      light-dark(#6b6b74, #8a8a94);   /*  5.1 : 1  /   5.8 : 1 */

    /* ---- Akzent: Grün --------------------------------------------------- */
    --c-accent:        light-dark(#2f7d4f, #5faf78);   /* Links / Text auf --c-bg */
    --c-accent-ink:    light-dark(#256540, #7cc491);   /* Text auf --c-accent-soft */
    --c-accent-solid:  light-dark(#256540, #2f7d4f);   /* Button-Fläche */
    --c-accent-solid-h:light-dark(#1c4f31, #389660);
    --c-accent-on:     #ffffff;                        /* Text auf --c-accent-solid */
    --c-accent-soft:   light-dark(#eef7f1, #16241c);
    --c-accent-line:   light-dark(#bcdcc8, #2c4a37);

    /* ---- Akzent: Gold --------------------------------------------------- */
    --c-gold:          light-dark(#6e5610, #d9bb63);
    /* Nur fuer den grossen Hero-Verlauf: Grosstext braucht 3:1, nicht 4.5:1,
       darum hier ein saettigeres Gold ohne die Lesbarkeit kleiner Texte zu senken. */
    --c-grad-end:      light-dark(#a8811f, #d9bb63);
    --c-gold-soft:     light-dark(#f7f2e2, #241f10);
    --c-gold-line:     light-dark(#e0d3a6, #463d1d);

    /* ---- Status --------------------------------------------------------- */
    --c-live:          light-dark(#15803d, #4ade80);
    --c-live-soft:     light-dark(#e9f7ee, #10241a);
    --c-live-line:     light-dark(#b6e0c5, #1f4a30);

    --c-proto:         light-dark(#a35c00, #f5b544);
    --c-proto-soft:    light-dark(#fdf2e2, #251a0a);
    --c-proto-line:    light-dark(#eed4ab, #4a3617);

    --c-rnd:           light-dark(#5b5b63, #a1a1aa);
    --c-rnd-soft:      light-dark(#f2f2f0, #1c1d20);

    /* ---- Effekte -------------------------------------------------------- */
    --c-glow-accent:   light-dark(rgba(47,125,79,.10),  rgba(95,175,120,.13));
    --c-glow-gold:     light-dark(rgba(110,86,16,.07),  rgba(217,187,99,.09));
    --c-scrim:         light-dark(rgba(251,251,250,.72), rgba(10,10,11,.72));

    --shadow-sm:  0 1px 2px light-dark(rgba(24,24,27,.05), rgba(0,0,0,.4));
    --shadow-md:  0 2px 4px light-dark(rgba(24,24,27,.04), rgba(0,0,0,.3)),
                  0 8px 20px light-dark(rgba(24,24,27,.06), rgba(0,0,0,.35));
    --shadow-lg:  0 4px 8px light-dark(rgba(24,24,27,.05), rgba(0,0,0,.35)),
                  0 16px 40px light-dark(rgba(24,24,27,.09), rgba(0,0,0,.45));

    /* ---- Typografie ----------------------------------------------------- */
    --f-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    /* Fluid type scale (clamp: 360px -> 1200px viewport) */
    --fs-2xs: 0.6875rem;
    --fs-xs:  0.75rem;
    --fs-sm:  0.8125rem;
    --fs-md:  0.9375rem;
    --fs-lg:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-xl:  clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    --fs-h3:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --fs-h2:  clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
    --fs-h1:  clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);

    /* ---- Raster & Abstände ---------------------------------------------- */
    --s-2xs: 0.25rem;
    --s-xs:  0.5rem;
    --s-sm:  0.75rem;
    --s-md:  1rem;
    --s-lg:  1.5rem;
    --s-xl:  2rem;
    --s-2xl: clamp(2.25rem, 1.8rem + 2vw, 3rem);
    --s-3xl: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);
    --s-4xl: clamp(3.5rem, 2rem + 6.5vw, 6.5rem);

    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 420ms cubic-bezier(.22, 1, .36, 1);

    --max-w: 1180px;
    --nav-h: 60px;
  }

  /* Explizite Nutzerwahl übersteuert die Systemeinstellung.
     color-scheme steuert light-dark(), Scrollbars und Form-Controls mit. */
  :root[data-theme='light'] { color-scheme: light; }
  :root[data-theme='dark']  { color-scheme: dark; }

  /* -------------------------------------------------------------------------
     Fallback für Engines ohne light-dark() (Baseline erst seit 05/2026).
     Identische Tokenwerte, aufgelöst über prefers-color-scheme + data-theme.
     ---------------------------------------------------------------------- */
  @supports not (color: light-dark(#fff, #000)) {

    :root,
    :root[data-theme='light'] {
      --c-bg:#fbfbfa; --c-bg-subtle:#f4f4f2; --c-surface:#fff; --c-surface-2:#f7f7f5;
      --c-surface-3:#eeeeeb; --c-border:#e5e5e1; --c-border-strong:#cfcfc9;
      --c-text:#18181b; --c-text-muted:#52525b; --c-text-dim:#6b6b74;
      --c-accent:#2f7d4f; --c-accent-ink:#256540; --c-accent-solid:#256540;
      --c-accent-solid-h:#1c4f31; --c-accent-soft:#eef7f1; --c-accent-line:#bcdcc8;
      --c-gold:#6e5610; --c-grad-end:#a8811f; --c-gold-soft:#f7f2e2; --c-gold-line:#e0d3a6;
      --c-live:#15803d; --c-live-soft:#e9f7ee; --c-live-line:#b6e0c5;
      --c-proto:#a35c00; --c-proto-soft:#fdf2e2; --c-proto-line:#eed4ab;
      --c-rnd:#5b5b63; --c-rnd-soft:#f2f2f0;
      --c-glow-accent:rgba(47,125,79,.10); --c-glow-gold:rgba(110,86,16,.07);
      --c-scrim:rgba(251,251,250,.72);
      --shadow-sm:0 1px 2px rgba(24,24,27,.05);
      --shadow-md:0 2px 4px rgba(24,24,27,.04), 0 8px 20px rgba(24,24,27,.06);
      --shadow-lg:0 4px 8px rgba(24,24,27,.05), 0 16px 40px rgba(24,24,27,.09);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme='light']) {
        --c-bg:#0a0a0b; --c-bg-subtle:#101012; --c-surface:#131316; --c-surface-2:#191a1d;
        --c-surface-3:#1f2024; --c-border:#26272b; --c-border-strong:#35363c;
        --c-text:#ededf0; --c-text-muted:#a2a2ac; --c-text-dim:#8a8a94;
        --c-accent:#5faf78; --c-accent-ink:#7cc491; --c-accent-solid:#2f7d4f;
        --c-accent-solid-h:#389660; --c-accent-soft:#16241c; --c-accent-line:#2c4a37;
        --c-gold:#d9bb63; --c-grad-end:#d9bb63; --c-gold-soft:#241f10; --c-gold-line:#463d1d;
        --c-live:#4ade80; --c-live-soft:#10241a; --c-live-line:#1f4a30;
        --c-proto:#f5b544; --c-proto-soft:#251a0a; --c-proto-line:#4a3617;
        --c-rnd:#a1a1aa; --c-rnd-soft:#1c1d20;
        --c-glow-accent:rgba(95,175,120,.13); --c-glow-gold:rgba(217,187,99,.09);
        --c-scrim:rgba(10,10,11,.72);
        --shadow-sm:0 1px 2px rgba(0,0,0,.4);
        --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
        --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
      }
    }

    :root[data-theme='dark'] {
      --c-bg:#0a0a0b; --c-bg-subtle:#101012; --c-surface:#131316; --c-surface-2:#191a1d;
      --c-surface-3:#1f2024; --c-border:#26272b; --c-border-strong:#35363c;
      --c-text:#ededf0; --c-text-muted:#a2a2ac; --c-text-dim:#8a8a94;
      --c-accent:#5faf78; --c-accent-ink:#7cc491; --c-accent-solid:#2f7d4f;
      --c-accent-solid-h:#389660; --c-accent-soft:#16241c; --c-accent-line:#2c4a37;
      --c-gold:#d9bb63; --c-grad-end:#d9bb63; --c-gold-soft:#241f10; --c-gold-line:#463d1d;
      --c-live:#4ade80; --c-live-soft:#10241a; --c-live-line:#1f4a30;
      --c-proto:#f5b544; --c-proto-soft:#251a0a; --c-proto-line:#4a3617;
      --c-rnd:#a1a1aa; --c-rnd-soft:#1c1d20;
      --c-glow-accent:rgba(95,175,120,.13); --c-glow-gold:rgba(217,187,99,.09);
      --c-scrim:rgba(10,10,11,.72);
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
      --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
    }
  }
}

/* ============================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 2;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
  }

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

  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

  :where(p, li) { text-wrap: pretty; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
}

/* ============================================================================
   BASE
   ========================================================================== */
@layer base {

  html {
    scroll-behavior: smooth;
    /* Sprungziele nicht unter der fixierten Navbar parken */
    scroll-padding-top: calc(var(--nav-h) + var(--s-md));
  }

  body {
    font-family: var(--f-sans);
    font-size: var(--fs-lg);
    line-height: 1.65;
    background-color: var(--c-bg);
    color: var(--c-text);
    overflow-x: hidden;
    /* Sanfter Theme-Wechsel statt harter Blitz */
    transition: background-color var(--t-base), color var(--t-base);
  }

  ::selection { background: var(--c-accent-solid); color: var(--c-accent-on); }

  /* Standard ist unterstrichungsfrei; Fließtext-Links bekommen die
     Unterstreichung gezielt zurück, damit sie nicht nur an der Farbe hängen. */
  a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color var(--t-fast);
  }
  a:hover { color: var(--c-gold); }

  .prose a,
  .legal a,
  .draft-banner a,
  .machine-readable a,
  .callout__text a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* Ein einziger, überall sichtbarer Fokus-Ring — WCAG 2.4.11/2.4.13 */
  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* Zahlenkolonnen ausrichten */
  .kpi__value, .stat__num, .proof-card__metric, .timeline__period { font-variant-numeric: tabular-nums; }

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

/* ============================================================================
   LAYOUT
   ========================================================================== */
@layer layout {

  .container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--s-lg);
  }

  .section {
    padding-block: var(--s-4xl);
    scroll-margin-top: calc(var(--nav-h) + var(--s-md));
  }

  /* Hinweis: content-visibility:auto wurde bewusst NICHT eingesetzt.
     Die Navigation dieser Seite besteht ausschliesslich aus Sprungmarken; die
     geschaetzte contain-intrinsic-size weicht von der echten Hoehe ab und laesst
     die Scroll-Position beim Anspringen verrutschen. Der Rendergewinn ist bei
     diesem Dokumentumfang zu klein fuer diesen Nebeneffekt. */

  .divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--c-border-strong), transparent);
  }

  .stack     { display: grid; gap: var(--s-md); }
  .stack--lg { display: grid; gap: var(--s-lg); }

  /* Auto-Grid ohne Overflow-Risiko auf schmalen Viewports */
  .auto-grid {
    display: grid;
    gap: var(--s-md);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col, 320px)), 1fr));
  }

  .split {
    display: grid;
    gap: var(--s-2xl);
    align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide { grid-template-columns: 1.15fr 1fr; }
  }
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---- Skip-Link ------------------------------------------------------- */
  .skip-link {
    position: fixed;
    top: var(--s-xs);
    left: var(--s-xs);
    z-index: 300;
    padding: 0.6rem 1rem;
    border-radius: var(--r-sm);
    background: var(--c-accent-solid);
    color: var(--c-accent-on);
    font-weight: 600;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(-100% - var(--s-md)));
    transition: transform var(--t-base);
  }
  .skip-link:focus-visible { transform: translateY(0); color: var(--c-accent-on); }

  /* ---- Icons ----------------------------------------------------------- */
  .icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--solid { fill: currentColor; stroke: none; }

  .icon-tile {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    color: var(--c-accent-ink);
    font-size: 1.125rem;
  }
  .icon-tile--gold {
    background: var(--c-gold-soft);
    border-color: var(--c-gold-line);
    color: var(--c-gold);
  }

  /* ---- Section-Kopf ---------------------------------------------------- */
  .section-label {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--s-xs);
  }

  .section-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin-bottom: var(--s-md);
  }
  .section-title--sub { font-size: var(--fs-xl); }

  .section-subtitle {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    max-width: 62ch;
    line-height: 1.7;
  }

  /* ---- Badges ---------------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text-muted);
  }
  .badge--accent { border-color: var(--c-accent-line); background: var(--c-accent-soft); color: var(--c-accent-ink); }
  .badge--gold   { border-color: var(--c-gold-line);   background: var(--c-gold-soft);   color: var(--c-gold); }
  .badge--live   { border-color: var(--c-live-line);   background: var(--c-live-soft);   color: var(--c-live); }
  .badge--proto  { border-color: var(--c-proto-line);  background: var(--c-proto-soft);  color: var(--c-proto); }
  .badge--rnd    { border-color: var(--c-border);      background: var(--c-rnd-soft);    color: var(--c-rnd); }

  .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

  .pulse {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--c-live);
    animation: status-pulse 2.4s ease-in-out infinite;
  }
  @keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-accent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
  }

  /* ---- Buttons --------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  }
  .btn .icon { font-size: 1.05em; }

  .btn--primary { background: var(--c-accent-solid); color: var(--c-accent-on); }
  .btn--primary:hover {
    background: var(--c-accent-solid-h);
    color: var(--c-accent-on);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .btn--ghost {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text);
  }
  .btn--ghost:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    transform: translateY(-1px);
  }

  .btn--sm { padding: 0.45rem 1rem; font-size: var(--fs-sm); }

  /* ---- Karte (Basis für alle Kartentypen) ------------------------------ */
  .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-lg);
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  }
  .card:hover {
    border-color: var(--c-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

  /* ---- Navigation ------------------------------------------------------ */
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--c-scrim);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid var(--c-border);
    transition: transform var(--t-base);
  }
  .nav[data-hidden='true'] { transform: translateY(-100%); }
  /* Bei Tastaturfokus innerhalb der Nav nie wegscrollen */
  .nav:focus-within { transform: translateY(0) !important; }

  .nav__progress {
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    transform-origin: 0 50%;
    transform: scaleX(var(--progress, 0));
    background: linear-gradient(90deg, var(--c-accent), var(--c-gold));
  }

  .nav__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--s-lg);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: var(--s-md);
    justify-content: space-between;
  }

  .nav__logo {
    font-weight: 700;
    font-size: var(--fs-lg);
    letter-spacing: -0.03em;
    color: var(--c-text);
  }
  .nav__logo:hover { color: var(--c-text); }
  .nav__logo span { color: var(--c-accent); }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
  }
  .nav__links a {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
  }
  .nav__links a:hover { color: var(--c-text); background: var(--c-surface-2); }
  .nav__links a[aria-current='true'] { color: var(--c-accent); background: var(--c-accent-soft); }

  .nav__actions { display: flex; align-items: center; gap: var(--s-xs); }

  .nav__icon-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 1.05rem;
    transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
  }
  .nav__icon-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }

  /* Theme-Umschalter: zeigt immer nur das Icon des aktiven Modus */
  .theme-toggle .icon { display: none; }
  :root[data-theme='light'] .theme-toggle .icon--sun     { display: block; }
  :root[data-theme='dark']  .theme-toggle .icon--moon    { display: block; }
  :root:not([data-theme]) .theme-toggle .icon--system    { display: block; }

  .nav__toggle { display: none; }

  @media (max-width: 1000px) {
    .nav__links {
      display: none;
      position: absolute;
      inset: var(--nav-h) 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0.15rem;
      padding: var(--s-md) var(--s-lg) var(--s-lg);
      background: var(--c-bg);
      border-bottom: 1px solid var(--c-border);
      box-shadow: var(--shadow-lg);
    }
    .nav__links[data-open='true'] {
      display: flex;
      animation: menu-in var(--t-base) both;
    }
    .nav__links a { padding: 0.7rem 0.75rem; font-size: var(--fs-lg); }
    .nav__toggle { display: grid; }
  }
  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Auf sehr schmalen Geräten weicht der Nav-CTA — der Hero hat denselben Button */
  @media (max-width: 430px) {
    .nav__actions > .btn { display: none; }
  }

  .nav__toggle .icon--close { display: none; }
  .nav__toggle[aria-expanded='true'] .icon--menu  { display: none; }
  .nav__toggle[aria-expanded='true'] .icon--close { display: block; }

  /* ---- Hero ------------------------------------------------------------ */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + var(--s-3xl)) var(--s-3xl);
    overflow: hidden;
  }

  .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .hero__bg::before,
  .hero__bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
  }
  .hero__bg::before {
    inset: -22rem -14rem auto auto;
    width: min(44rem, 90vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--c-glow-accent) 0%, transparent 68%);
    animation: drift 14s ease-in-out infinite;
  }
  .hero__bg::after {
    inset: auto auto -14rem -16rem;
    width: min(32rem, 80vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--c-glow-gold) 0%, transparent 68%);
    animation: drift 18s ease-in-out 2.5s infinite;
  }
  @keyframes drift {
    0%, 100% { transform: scale(1)    translate3d(0, 0, 0); }
    50%      { transform: scale(1.12) translate3d(0, 1.5rem, 0); }
  }

  .hero__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--c-border-strong) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-border-strong) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 72% 58% at 50% 45%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 45%, #000 20%, transparent 100%);
  }

  .hero__content { position: relative; z-index: 1; width: 100%; }

  .hero__layout {
    display: grid;
    gap: var(--s-2xl);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 1000px) {
    .hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  }

  .hero__name {
    font-size: var(--fs-h1);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    margin-block: var(--s-lg) var(--s-sm);
  }
  .hero__name .highlight {
    background: linear-gradient(120deg, var(--c-accent), var(--c-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__title {
    font-size: var(--fs-xl);
    font-weight: 400;
    color: var(--c-text-muted);
    letter-spacing: -0.01em;
    margin-bottom: var(--s-lg);
  }

  .hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-xs);
    margin-bottom: var(--s-lg);
  }

  .hero__desc {
    font-size: var(--fs-xl);
    font-weight: 400;
    color: var(--c-text-muted);
    max-width: 60ch;
    line-height: 1.7;
    margin-bottom: var(--s-xl);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-sm);
    margin-bottom: var(--s-2xl);
  }

  .hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--s-md) var(--s-lg);
    padding-top: var(--s-lg);
    border-top: 1px solid var(--c-border);
  }
  .hero__meta dt {
    font-family: var(--f-mono);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-text-dim);
    margin-bottom: 0.15rem;
  }
  .hero__meta dd {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
  }

  /* ---- Agent-Trace-Terminal -------------------------------------------
     Die Seite soll das Fachgebiet zeigen, nicht nur behaupten:
     ein echter, abgetippter Orchestrierungs-Lauf statt eines Stock-Bildes.
     -------------------------------------------------------------------- */
  .terminal {
    background: light-dark(#101014, #0e0e11);
    border: 1px solid light-dark(#2a2b31, var(--c-border-strong));
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: var(--f-mono);
    font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.78rem);
    line-height: 1.75;
    /* Terminal ist bewusst in beiden Themes dunkel — deshalb hier fixiert,
       damit UA-Styles und Systemfarben mitziehen. */
    color-scheme: dark;
  }
  @supports not (color: light-dark(#fff, #000)) {
    .terminal { background: #0e0e11; border-color: #2a2b31; }
  }

  .terminal__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .terminal__dots { display: flex; gap: 0.3rem; }
  .terminal__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
  .terminal__name { font-size: var(--fs-2xs); color: #8f9099; letter-spacing: .04em; }

  .terminal__body { padding: 0.85rem 0.95rem 1rem; margin: 0; }

  .terminal__line {
    display: grid;
    grid-template-columns: 1.1rem 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    color: #b9bac3;
  }
  .terminal__line + .terminal__line { margin-top: 0.1rem; }
  .terminal__line b { color: #e6e6ea; font-weight: 500; }
  .terminal__line .t-mark { color: #5faf78; }
  .terminal__line .t-ms   { color: #7b7c85; font-size: 0.92em; white-space: nowrap; }
  .terminal__line--cmd    { color: #7cc491; margin-bottom: 0.4rem; }
  .terminal__line--cmd .t-mark { color: #7cc491; }
  .terminal__line--ok     { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed rgba(255,255,255,.1); }
  .terminal__line--ok b   { color: #4ade80; }

  /* Zeilenweiser Einlauf, sobald das Terminal im Viewport ist */
  .js .terminal[data-run] .terminal__line {
    opacity: 0;
    transform: translateY(4px);
  }
  .js .terminal[data-run='true'] .terminal__line {
    animation: line-in .32s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 260ms);
  }
  @keyframes line-in { to { opacity: 1; transform: none; } }

  .terminal__caret {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    translate: 0 0.15em;
    background: #5faf78;
    animation: caret 1.1s steps(2) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .js .terminal[data-run] .terminal__line { opacity: 1; transform: none; animation: none; }
    .terminal__caret { animation: none; }
  }

  /* ---- Delivery-Pipeline ----------------------------------------------- */
  .pipeline {
    display: grid;
    gap: var(--s-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    counter-reset: step;
  }
  .pipeline__step {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-md);
    transition: border-color var(--t-base), transform var(--t-base);
  }
  .pipeline__step:hover { border-color: var(--c-accent-line); transform: translateY(-2px); }
  .pipeline__step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--f-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--c-accent);
    margin-bottom: var(--s-xs);
  }
  .pipeline__step h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 0.25rem; }
  .pipeline__step p  { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.55; }
  /* Verbindungspfeil nur, wenn die Schritte tatsächlich nebeneinander stehen */
  @media (min-width: 1000px) {
    .pipeline__step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      right: calc(var(--s-sm) * -1);
      width: var(--s-sm);
      height: 1px;
      background: var(--c-border-strong);
    }
  }
  .pipeline__step--owned { border-color: var(--c-accent-line); background: var(--c-accent-soft); }
  .pipeline__step--owned p { color: var(--c-text-muted); }

  /* ---- Maschinenlesbar-Hinweis (GEO / AI-Crawler) ---------------------- */
  .machine-readable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-sm) var(--s-md);
    margin-top: var(--s-xl);
    padding: var(--s-md) var(--s-lg);
    background: var(--c-surface-2);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }
  .machine-readable__links { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
  .machine-readable a { color: var(--c-accent); text-decoration: underline; }

  /* ---- Profil ---------------------------------------------------------- */
  .prose { color: var(--c-text-muted); line-height: 1.8; }
  .prose > * + * { margin-top: var(--s-md); }
  .prose strong { color: var(--c-text); font-weight: 600; }

  .stat {
    display: flex;
    align-items: baseline;
    gap: var(--s-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-md) var(--s-lg);
    transition: border-color var(--t-base), transform var(--t-base);
  }
  .stat:hover { border-color: var(--c-accent-line); transform: translateY(-2px); }
  .stat__num {
    font-family: var(--f-mono);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-accent);
    min-width: 3.25rem;
  }
  .stat__label { font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.5; }

  .callout {
    display: flex;
    gap: var(--s-md);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    border-left-width: 3px;
    border-radius: var(--r-md);
    padding: var(--s-lg);
    margin-top: var(--s-2xl);
  }
  .callout__title {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-accent-ink);
    margin-bottom: var(--s-xs);
  }
  .callout__text { font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.7; }
  .callout__text strong { color: var(--c-text); font-weight: 600; }
  .callout__text p + p { margin-top: var(--s-sm); }

  /* ---- Skill-Karten ---------------------------------------------------- */
  .skill-card { position: relative; overflow: hidden; }
  .skill-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-gold));
    opacity: 0;
    transition: opacity var(--t-base);
  }
  .skill-card:hover::before { opacity: 1; }
  .skill-card__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-block: var(--s-md) var(--s-xs);
  }

  .tag-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .tag {
    font-family: var(--f-mono);
    font-size: var(--fs-2xs);
    line-height: 1.5;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-xs);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
  }

  /* ---- Projekte -------------------------------------------------------- */
  .tier { margin-bottom: var(--s-3xl); }
  .tier:last-child { margin-bottom: 0; }

  .tier__header {
    display: flex;
    align-items: center;
    gap: var(--s-md);
    margin-bottom: var(--s-lg);
  }
  .tier__badge {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: var(--fs-md);
    font-weight: 700;
  }
  .tier__badge--a { background: var(--c-live-soft);  color: var(--c-live);  border: 1px solid var(--c-live-line); }
  .tier__badge--b { background: var(--c-proto-soft); color: var(--c-proto); border: 1px solid var(--c-proto-line); }
  .tier__badge--c { background: var(--c-rnd-soft);   color: var(--c-rnd);   border: 1px solid var(--c-border); }
  .tier__header h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
  .tier__header p  { font-size: var(--fs-sm); color: var(--c-text-dim); }

  .project-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-md);
    padding: var(--s-lg);
    /* Container-Query-Kontext für das KPI-Raster */
    container-type: inline-size;
    container-name: project;
  }
  .project-card--rnd { background: var(--c-bg-subtle); }

  .project-card__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--s-sm);
  }
  .project-card__name { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
  .project-card__type { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-dim); margin-top: 0.15rem; }
  .project-card__desc { font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.65; }
  .project-card__tech { margin-top: auto; }

  .kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-xs);
  }
  @container project (max-width: 340px) {
    .kpi-grid { grid-template-columns: 1fr; }
  }

  .kpi {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: var(--s-xs) var(--s-sm);
  }
  .kpi__value {
    font-family: var(--f-mono);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-accent);
  }
  .kpi__label {
    font-size: var(--fs-2xs);
    line-height: 1.35;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Herkunft der Zahl transparent machen — das ist im Applied-AI-Umfeld
     ein Vertrauens- und kein Schönheitsthema. */
  .kpi--projection .kpi__value { color: var(--c-text); }
  .kpi__tag {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: var(--r-xs);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--c-text-dim);
  }

  .project-card__note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: var(--s-sm);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-2xs);
    color: var(--c-text-dim);
    line-height: 1.4;
  }
  .project-card__note .icon { font-size: 0.85rem; flex: none; }

  /* ---- Impact-Balken --------------------------------------------------- */
  .impact-item { padding: var(--s-lg); }
  .impact-item__title {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--s-md);
  }
  /* Beschriftung steht NEBEN dem Balken, nicht darin: sonst läuft der Text bei
     kurzen Balken über die Füllung hinaus und der Kontrast kippt mitten im Wort. */
  .impact-bar {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: var(--s-sm);
  }
  .impact-bar + .impact-bar { margin-top: var(--s-sm); }
  .impact-bar__label { font-size: var(--fs-xs); font-weight: 600; }
  .impact-bar__label--before { color: var(--c-text-dim); }
  .impact-bar__label--after  { color: var(--c-accent); }

  .impact-bar__data { display: grid; gap: 0.3rem; min-width: 0; }
  .impact-bar__value {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--c-text);
  }
  .impact-bar--after .impact-bar__value { color: var(--c-accent); font-weight: 500; }

  .impact-bar__track {
    height: 0.6rem;
    border-radius: var(--r-pill);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    overflow: hidden;
  }
  .impact-bar__fill {
    height: 100%;
    width: var(--w, 0%);
    border-radius: var(--r-pill);
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
  }
  /* Ohne JS wird --w nie gesetzt — dann direkt die Zielbreite zeigen. */
  html:not(.js) .impact-bar__fill--before { --w: 90%; transition: none; }
  html:not(.js) .impact-bar__fill--after  { --w: 20%; transition: none; }

  .impact-bar__fill--before { background: var(--c-border-strong); }
  .impact-bar__fill--after  { background: var(--c-accent-solid); }

  /* ---- Timeline -------------------------------------------------------- */
  .timeline { position: relative; padding-left: 2.25rem; }
  .timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--c-accent), var(--c-border) 45%, var(--c-border));
  }

  .timeline__item { position: relative; margin-bottom: var(--s-2xl); }
  .timeline__item:last-child { margin-bottom: 0; }

  .timeline__dot {
    position: absolute;
    left: -2.25rem;
    top: .45rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--c-border-strong);
    background: var(--c-bg);
  }
  .timeline__item--current .timeline__dot {
    border-color: var(--c-accent);
    background: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
  }
  .timeline__item--highlight .timeline__dot { border-color: var(--c-gold); }

  .timeline__period {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    color: var(--c-accent);
    margin-bottom: 0.2rem;
  }
  .timeline__role    { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
  .timeline__company { font-size: var(--fs-md); color: var(--c-text-muted); margin-bottom: var(--s-xs); }

  .timeline__list { margin-top: var(--s-xs); }
  .timeline__list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: var(--fs-md);
    color: var(--c-text-muted);
    line-height: 1.6;
  }
  .timeline__list li + li { margin-top: 0.3rem; }
  .timeline__list li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-accent);
  }

  .timeline__proof {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--s-sm);
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-sm);
    background: var(--c-gold-soft);
    border: 1px solid var(--c-gold-line);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-gold);
  }

  /* ---- Tech-Gruppen ---------------------------------------------------- */
  .tech-group__title {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-accent);
    margin-bottom: var(--s-sm);
  }
  .pill {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    line-height: 1.5;
    padding: 0.28rem 0.65rem;
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
  }

  /* ---- Proof-Karten ---------------------------------------------------- */
  .proof-card { border-left: 3px solid var(--c-gold); }
  .proof-card__metric {
    font-family: var(--f-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-gold);
    margin-block: var(--s-sm) 0.2rem;
    line-height: 1.2;
  }
  .proof-card__label  { font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.5; }
  .proof-card__source { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-dim); margin-top: var(--s-sm); }

  /* ---- Zertifikate ----------------------------------------------------- */
  .cert-card { display: flex; align-items: flex-start; gap: var(--s-md); }
  .cert-card__title  { font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.15rem; }
  .cert-card__detail { font-size: var(--fs-sm); color: var(--c-text-muted); }
  .cert-card__year   { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-accent); }

  /* ---- Arbeitsmodell --------------------------------------------------- */
  .work-card { text-align: center; padding: var(--s-lg); }
  .work-card .icon-tile { margin-inline: auto; margin-bottom: var(--s-md); }
  .work-card h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.3rem; }
  .work-card p  { font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.55; }

  .work-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-md) var(--s-lg);
    margin-top: var(--s-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-lg);
  }
  .work-split__bar {
    flex: 1 1 12rem;
    display: flex;
    height: 10px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--c-surface-3);
  }
  .work-split__seg--b2b      { flex: 0 0 85%; background: var(--c-accent-solid); }
  .work-split__seg--employed { flex: 0 0 15%; background: var(--c-gold); }

  .work-split__labels { display: flex; flex-wrap: wrap; gap: var(--s-md); }
  .work-split__label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }
  .work-split__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .work-split__dot--b2b      { background: var(--c-accent-solid); }
  .work-split__dot--employed { background: var(--c-gold); }

  .work-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--s-xs) var(--s-md);
    margin-top: var(--s-lg);
  }
  .work-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-md);
    color: var(--c-text-muted);
  }
  .work-detail .icon { font-size: 1.05rem; }
  .work-detail--yes .icon { color: var(--c-accent); }
  .work-detail--no  { color: var(--c-text-dim); }
  .work-detail--no .icon { color: var(--c-text-dim); }

  /* ---- Kontakt --------------------------------------------------------- */
  .contact-item {
    display: flex;
    align-items: center;
    gap: var(--s-md);
    padding: var(--s-sm) var(--s-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color var(--t-base), transform var(--t-base);
  }
  .contact-item:hover { border-color: var(--c-accent); color: var(--c-text); transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .contact-item:hover { transform: none; } }

  .contact-item__text  { display: flex; flex-direction: column; min-width: 0; }
  .contact-item__label { font-family: var(--f-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-dim); }
  .contact-item__value { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }

  .contact-cta {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-2xl) var(--s-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .contact-cta::before {
    content: '';
    position: absolute;
    inset: -6rem -6rem auto auto;
    width: 20rem;
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--c-glow-accent), transparent 70%);
    pointer-events: none;
  }
  .contact-cta > * { position: relative; }
  .contact-cta h3 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s-xs); }
  .contact-cta p  { color: var(--c-text-muted); font-size: var(--fs-lg); margin-bottom: var(--s-lg); max-width: 40ch; margin-inline: auto; }

  .lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-md);
    margin-top: var(--s-sm);
    padding-top: var(--s-md);
    border-top: 1px solid var(--c-border);
  }
  .lang-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: var(--fs-md); }
  .lang-item__name  { font-weight: 500; }
  .lang-item__level { color: var(--c-text-dim); font-size: var(--fs-sm); }

  /* ---- Footer ---------------------------------------------------------- */
  .footer {
    border-top: 1px solid var(--c-border);
    padding-block: var(--s-xl);
    background: var(--c-bg-subtle);
  }
  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-md) var(--s-lg);
    justify-content: space-between;
    align-items: center;
  }
  .footer__copy  { font-size: var(--fs-sm); color: var(--c-text-dim); }
  .footer__links { display: flex; flex-wrap: wrap; gap: var(--s-md); }
  /* min-height 24px erfüllt WCAG 2.2 SC 2.5.8 (Target Size Minimum) */
  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-decoration: none;
  }
  .footer__links a:hover { color: var(--c-accent); text-decoration: underline; }

  /* ---- Rechtsseiten ---------------------------------------------------- */
  .legal { max-width: 68ch; }
  .legal h2 {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: var(--s-2xl);
    margin-bottom: var(--s-xs);
    scroll-margin-top: calc(var(--nav-h) + var(--s-md));
  }
  .legal h3 { font-size: var(--fs-lg); font-weight: 600; margin-top: var(--s-lg); margin-bottom: var(--s-2xs); }
  .legal p, .legal li { color: var(--c-text-muted); }
  .legal p + p { margin-top: var(--s-sm); }
  .legal ul { margin-top: var(--s-xs); padding-left: 1.2rem; list-style: disc; }
  .legal li + li { margin-top: 0.25rem; }
  .legal address { font-style: normal; color: var(--c-text); line-height: 1.7; }

  /* Unausgefüllte Pflichtangabe — im Entwurf sofort sichtbar */
  .todo {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-xs);
    background: var(--c-proto-soft);
    border: 1px dashed var(--c-proto);
    font-family: var(--f-mono);
    font-size: 0.85em;
    color: var(--c-proto);
  }

  .draft-banner {
    display: flex;
    gap: var(--s-sm);
    align-items: flex-start;
    padding: var(--s-md) var(--s-lg);
    border-radius: var(--r-md);
    background: var(--c-proto-soft);
    border: 1px solid var(--c-proto-line);
    border-left-width: 3px;
    color: var(--c-text);
    font-size: var(--fs-md);
    line-height: 1.6;
  }
  .draft-banner .icon { font-size: 1.15rem; color: var(--c-proto); margin-top: 0.15rem; }
  .draft-banner strong { color: var(--c-proto); }

  /* ---- Scroll-Reveal (nur mit aktivem JS) ------------------------------ */
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }
}

/* ============================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .mt-lg  { margin-top: var(--s-lg); }
  .mt-xl  { margin-top: var(--s-xl); }
  .mt-2xl { margin-top: var(--s-2xl); }
  .mt-3xl { margin-top: var(--s-3xl); }
  .text-dim { color: var(--c-text-dim); }
  [hidden] { display: none !important; }
}

/* ============================================================================
   PRINT — die Seite ist faktisch ein Lebenslauf, also druckbar machen
   ========================================================================== */
@layer print {
  @media print {
    :root { color-scheme: light; --nav-h: 0px; }

    .nav, .skip-link, .hero__bg, .hero__grid,
    .nav__progress, .contact-cta::before { display: none !important; }

    body { background: #fff; color: #000; font-size: 10.5pt; }

    .section { padding-block: 1rem; break-inside: avoid; }
    .hero { min-height: auto; padding-block: 0 1rem; }

    .card, .stat, .contact-item, .work-split, .contact-cta, .kpi, .impact-item {
      border: 1px solid #bbb !important;
      background: #fff !important;
      box-shadow: none !important;
      break-inside: avoid;
    }

    .js .reveal { opacity: 1 !important; transform: none !important; }

    a { color: #000; text-decoration: underline; }
    /* Ziel-URL sichtbar machen, aber nur bei externen Links */
    a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }

    .divider { display: none; }
    h2, h3 { break-after: avoid; }
  }
}