/* ============================================================
   Peak Lane — Webfonts, selbst gehostet (DSGVO, Ladezeit)
   Ersetzt tokens/fonts.css (Google-@import) für die Website.
   ============================================================ */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-700.woff2') format('woff2');
}

/* ============================================================
   Peak Lane — Color tokens
   Core palette is the OFFICIAL Peak Lane Studio brand export
   (peaklane css.pdf). Everything else is derived & harmonized.
   ============================================================ */
:root {
  /* ---- Brand core (official, do not alter) ---- */
  --prussian-blue: #000022; /* darkest — near-black navy        */
  --ink-black:     #040f16; /* near-black, slightly teal        */
  --deep-navy:     #001242; /* primary dark brand blue          */
  --baltic-blue:   #005e7c; /* mid teal-blue                    */
  --ocean-blue:    #0094c6; /* signature accent / primary action */

  /* ---- Ocean ramp (derived around the signature accent) ---- */
  --ocean-50:  #e9f7fc;
  --ocean-100: #cfeef8;
  --ocean-200: #a4ddf0;
  --ocean-300: #6cc8e8;
  --ocean-400: #2bb0db;
  --ocean-500: #0094c6; /* = --ocean-blue */
  --ocean-600: #007ba8;
  --ocean-700: #005e7c; /* = --baltic-blue */
  --ocean-800: #073f54;
  --ocean-900: #002a3b;

  /* ---- Navy ramp (derived around the brand navy) ---- */
  --navy-700: #001a52;
  --navy-800: #001242; /* = --deep-navy */
  --navy-900: #000c2e;
  --navy-950: #000022; /* = --prussian-blue */

  /* ---- Cool neutrals (slate, ~210° hue) ---- */
  --neutral-0:   #ffffff;
  --neutral-25:  #f6f9fc;
  --neutral-50:  #eef3f8;
  --neutral-100: #e4ebf2;
  --neutral-200: #cdd8e3;
  --neutral-300: #adbccc;
  --neutral-400: #8295a8;
  --neutral-500: #5e7185;
  --neutral-600: #455667;
  --neutral-700: #33414f;
  --neutral-800: #1f2a37;
  --neutral-900: #131c27;
  --neutral-950: #0a121b;

  /* ---- Signal / data accents (use sparingly) ---- */
  --signal-amber:  #f2a93b; /* warm contrast — highlights, stats */
  --signal-coral:  #f0654f; /* attention / negative delta        */
  --signal-teal:   #1fb6a6; /* positive delta / "after"          */
  --signal-violet: #6c6bdc; /* 4th categorical for charts        */

  /* ---- Semantic status ---- */
  --success:  #1f9d6b;
  --success-soft: #e3f5ec;
  --warning:  #e0992f;
  --warning-soft: #fbefd9;
  --danger:   #e0464b;
  --danger-soft:  #fbe4e5;
  --info:     var(--ocean-blue);
  --info-soft:    var(--ocean-50);

  /* ============================================================
     Semantic aliases — reference these in components, not raw hex
     ============================================================ */

  /* Surfaces */
  --surface-page:        var(--neutral-25);
  --surface-card:        var(--neutral-0);
  --surface-sunken:      var(--neutral-50);
  --surface-raised:      var(--neutral-0);
  --surface-hover:       var(--neutral-50);
  --surface-inverse:     var(--deep-navy);
  --surface-inverse-2:   var(--navy-900);
  --surface-inverse-deep: var(--prussian-blue);
  --surface-accent-soft: var(--ocean-50);

  /* Text */
  --text-strong:  #04121c;            /* headlines */
  --text-body:    var(--neutral-800); /* paragraphs */
  --text-muted:   var(--neutral-500); /* secondary */
  --text-subtle:  var(--neutral-400); /* captions, placeholders */
  --text-on-dark:        #eaf3f8;
  --text-on-dark-muted:  #9fc2d4;
  --text-on-accent:      #ffffff;
  --text-link:    var(--ocean-600);

  /* Borders */
  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-inverse: rgba(255,255,255,0.14);
  --border-accent:  var(--ocean-blue);

  /* Accent (interactive) */
  --accent:          var(--ocean-blue);
  --accent-hover:    var(--ocean-600);
  --accent-active:   var(--ocean-700);
  --accent-contrast: #ffffff;
  --accent-ring:     rgba(0, 148, 198, 0.32);

  /* Misc */
  --overlay-scrim:  rgba(0, 18, 66, 0.55);
  --selection-bg:   rgba(0, 148, 198, 0.22);
}

/* ============================================================
   Peak Lane — Typography tokens
   Display: Space Grotesk · Body/UI: Hanken Grotesk · Mono: Space Mono
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale (px) ---- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.25rem;    /* 20 */
  --text-xl:  1.5rem;     /* 24 */
  --text-2xl: 1.875rem;   /* 30 */
  --text-3xl: 2.375rem;   /* 38 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.75rem;    /* 60 */
  --text-6xl: 4.75rem;    /* 76 */
  --text-7xl: 6rem;       /* 96 */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* mono eyebrows */
  --tracking-widest: 0.2em;   /* small caps labels */

  /* ============================================================
     Semantic text roles (font / size / line / weight / tracking)
     ============================================================ */
  --font-display-family: var(--font-display);

  /* Eyebrow / kicker — the mono-uppercase signature label */
  --eyebrow-font:    var(--font-mono);
  --eyebrow-size:    var(--text-xs);
  --eyebrow-weight:  var(--weight-bold);
  --eyebrow-tracking:var(--tracking-wider);
  --eyebrow-transform: uppercase; /* @kind other */
}

/* ============================================================
   Peak Lane — Spacing & sizing tokens
   4px base grid.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* Layout */
  --gutter:       1.5rem;
  --gutter-wide:  2.5rem;
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-2xl:1440px;

  /* Control sizing (form/button heights) */
  --control-h-sm: 2rem;     /* 32 */
  --control-h-md: 2.625rem; /* 42 */
  --control-h-lg: 3.25rem;  /* 52 */
}

/* ============================================================
   Peak Lane — Effects: radius, shadow, motion, blur, layering
   Shadows are navy-tinted (cool), never neutral gray.
   ============================================================ */
:root {
  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Shadows (cool, navy-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 18, 66, 0.06);
  --shadow-sm:  0 1px 3px rgba(0, 18, 66, 0.08), 0 1px 2px rgba(0, 18, 66, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 18, 66, 0.08), 0 2px 4px rgba(0, 18, 66, 0.05);
  --shadow-lg:  0 12px 28px rgba(0, 18, 66, 0.10), 0 4px 8px rgba(0, 18, 66, 0.05);
  --shadow-xl:  0 24px 56px rgba(0, 18, 66, 0.14), 0 8px 16px rgba(0, 18, 66, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Accent glow — for focused/active accent surfaces */
  --shadow-glow: 0 6px 20px rgba(0, 148, 198, 0.32);
  --shadow-glow-strong: 0 10px 36px rgba(0, 148, 198, 0.45);

  /* Focus ring */
  --ring-accent: 0 0 0 3px var(--accent-ring);
  --ring-offset: 0 0 0 2px var(--surface-card), 0 0 0 5px var(--accent-ring);

  /* ---- Blur ---- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.78, 0.30, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0.04, 0.30, 1);  /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.50, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 1;       /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100;   /* @kind other */
  --z-toast: 1200;   /* @kind other */
}

/* ============================================================
   Peak Lane — Base element defaults
   Applied wherever styles.css is linked. Keeps specimens, cards,
   components and kits visually consistent.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'cv01' on;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--selection-bg); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

/* The signature Peak Lane eyebrow / kicker label */
.pl-eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pl-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

/* ============================================================
   PEAK LANE STUDIO — Website-Komponenten
   Baut auf den Design-System-Tokens auf. Nur semantische Aliase,
   keine rohen Hexwerte. Schatten navy-getönt. Kein zentrierter
   Fließtext. Pro Seite ein Motiv (Start: Topo).
   ============================================================ */

:root {
  /* Web-Ergänzungen aus vorhandenen Tokens (Kontrast AA auf hellem Grund) */
  --eyebrow-on-light: var(--ocean-700);
  --eyebrow-on-dark: var(--ocean-300);
  --action: var(--ocean-600);
  --action-hover: var(--ocean-700);
  --ring-solid: 0 0 0 3px var(--surface-card), 0 0 0 6px var(--ocean-600);
  --ring-solid-dark: 0 0 0 3px var(--navy-900), 0 0 0 6px var(--ocean-300);

  --gradient-dark: radial-gradient(120% 140% at 12% 8%, var(--navy-700) 0%, var(--deep-navy) 46%, var(--prussian-blue) 100%);
  --gradient-ocean: linear-gradient(120deg, var(--ocean-900) 0%, var(--ocean-800) 55%, var(--ocean-700) 100%);

  --header-h: 4.5rem;
  --section-y: clamp(4rem, 8vw, 7rem);
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-size: var(--text-md); line-height: var(--leading-relaxed); }
img { max-width: 100%; height: auto; display: block; }

h2 { font-size: clamp(var(--text-2xl), 3.6vw, var(--text-4xl)); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }

:focus-visible { box-shadow: var(--ring-solid); border-radius: var(--radius-xs); }

.container { width: min(100% - 2 * var(--gutter), var(--container-xl)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-modal); background: var(--surface-card); color: var(--text-strong); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-4); }

.lead { font-size: var(--text-lg); color: var(--text-body); max-width: 62ch; }

/* ---- Eyebrow: AA-Kontrast auf Hell, Ocean-300 auf Dunkel ---- */
.pl-eyebrow { color: var(--eyebrow-on-light); margin: 0 0 var(--space-4); }
.pl-eyebrow::before { background: var(--eyebrow-on-light); }
.pl-eyebrow--dark { color: var(--eyebrow-on-dark); }
.pl-eyebrow--dark::before { background: var(--eyebrow-on-dark); }

/* ---- Buttons & Links ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h-md); padding: 0 var(--space-6);
  font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-base);
  color: var(--text-on-accent); background: var(--action);
  border: 0; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--action-hover); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--text-md); }
.btn--light { background: var(--surface-card); color: var(--ocean-800); }
.btn--light:hover { background: var(--ocean-50); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--text-link); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--dark { color: var(--text-on-dark); }
.link-arrow--dark:hover { color: var(--ocean-300); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-inverse-deep); border-bottom: 1px solid var(--border-inverse); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-8); min-height: var(--header-h); }
.site-header :focus-visible, .hero :focus-visible, .band :focus-visible, .site-footer :focus-visible { box-shadow: var(--ring-solid-dark); }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 44px; height: auto; }
.brand__word { display: flex; flex-direction: column; font-family: var(--font-display); line-height: 1; }
.brand__name { font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-wide); color: var(--neutral-0); }
.brand__studio { font-weight: var(--weight-semibold); font-size: var(--text-2xs); letter-spacing: 0.34em; color: var(--ocean-300); margin-top: 0.3em; }

.site-nav { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.site-nav__list { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-nav__list a, .site-nav__contact { color: var(--text-on-dark); font-weight: var(--weight-medium); font-size: var(--text-base); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.site-nav__list a:hover, .site-nav__contact:hover { color: var(--neutral-0); border-bottom-color: var(--ocean-400); text-decoration: none; }
.site-nav__actions { display: flex; align-items: baseline; gap: var(--space-5); }

.nav-toggle { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-inverse); border-radius: var(--radius-md); background: transparent; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.25rem; height: 2px; background: var(--text-on-dark); margin-inline: auto; position: relative; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--space-6); padding: var(--space-6) var(--gutter) var(--space-8); background: var(--surface-inverse-deep); border-bottom: 1px solid var(--border-inverse); }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); border-bottom: 1px solid var(--border-inverse); }
  .site-nav__actions { justify-content: space-between; }
}

/* ---- Hero (nur Topo-Motiv) ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--gradient-dark); color: var(--text-on-dark); padding: clamp(5rem, 11vw, 9rem) 0 clamp(7rem, 13vw, 11rem); }
.hero__topo, .hero__sweep, .hero__veil { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero__topo { background: url('/assets/img/motif-topo.svg') center / cover no-repeat; opacity: 0.26; animation: hero-drift 26s ease-in-out infinite; }
.hero__sweep { background: linear-gradient(120deg, transparent 38%, rgba(0, 148, 198, 0.18) 72%, rgba(0, 148, 198, 0.34)); animation: hero-sweep 26s ease-in-out infinite; }
.hero__veil { background: linear-gradient(90deg, rgba(0, 0, 34, 0.55) 0%, rgba(0, 0, 34, 0.15) 60%, transparent 100%); }
.hero__title { font-size: clamp(2.25rem, 6vw, var(--text-6xl)); color: var(--neutral-0); max-width: 17ch; margin: 0; }
.hero__title em { font-style: normal; color: var(--ocean-300); display: block; }
.hero__sub { font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); line-height: var(--leading-normal); font-weight: var(--weight-medium); color: var(--text-on-dark); max-width: 40ch; margin: var(--space-8) 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-10); }
@keyframes hero-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); } 50% { transform: translate3d(-3%, 1.5%, 0) scale(1.06); } }
@keyframes hero-sweep { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .hero__topo, .hero__sweep { animation: none; } }

/* ---- Wegweiser: drei Türen, überlappen den Hero ---- */
.doors { position: relative; z-index: 2; margin-top: calc(-1 * clamp(3.5rem, 7vw, 5.5rem)); }
.doors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.door { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); color: var(--text-body); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.door:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--border-accent); }
.door__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); }
.door__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-strong); padding-right: var(--space-8); }
.door__text { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.door__go { position: absolute; right: var(--space-6); top: var(--space-6); font-size: var(--text-xl); color: var(--action); transition: transform var(--dur-base) var(--ease-out); }
.door:hover .door__go { transform: translateX(4px); }
@media (max-width: 860px) { .doors__grid { grid-template-columns: 1fr; gap: var(--space-3); } .door { padding-bottom: var(--space-6); } }

/* ---- Sektionen ---- */
.section { padding: var(--section-y) 0; }
.section--sunken { background: var(--surface-sunken); }
.section__head { max-width: 56rem; margin-bottom: var(--space-12); }
.section__head h2 { margin-bottom: var(--space-5); }
.section__head--sub { margin-top: var(--section-y); }
.section__head--row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); max-width: none; }
.section__head--row h2 { margin-bottom: 0; max-width: 24ch; }
@media (max-width: 760px) { .section__head--row { flex-direction: column; align-items: start; } }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

/* ---- Karte mit 4-px-Topline ---- */
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--shadow-md); padding: var(--space-8); }
.card--top { border-top: 4px solid var(--ocean-blue); }
.card--baltic { border-top-color: var(--baltic-blue); }
.card--amber { border-top-color: var(--signal-amber); }
.card__kicker { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-4); }
.card p:last-child { margin-bottom: 0; }

/* ---- Szenenkasten ---- */
.scene { margin-top: var(--space-16); max-width: 52rem; background: var(--surface-accent-soft); border-left: 4px solid var(--ocean-blue); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--space-8) var(--space-10); }
.scene__time { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); margin-bottom: var(--space-4); }
.scene p { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-strong); }
.scene__point { font-family: var(--font-display); font-weight: var(--weight-semibold); margin-bottom: 0; }
@media (max-width: 560px) { .scene { padding: var(--space-6); } }

/* ---- Situationen ---- */
.situation { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-body); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
a.situation:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-accent); }
.situation__quote { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl)); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-strong); text-wrap: balance; }
.situation__text { color: var(--text-muted); }
.situation__go { margin-top: auto; padding-top: var(--space-4); font-weight: var(--weight-semibold); color: var(--text-link); }
.situation--soon { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--border-default); }
.situation--soon .situation__quote { color: var(--text-body); }
.situation--soon .situation__go { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }

/* ---- Leistungsfelder ---- */
.fields { border-top: 1px solid var(--border-default); }
.field { display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: var(--space-6); padding: var(--space-8) 0; border-bottom: 1px solid var(--border-default); text-decoration: none; color: var(--text-body); transition: padding var(--dur-base) var(--ease-out), background var(--dur-base); }
.field:hover { text-decoration: none; padding-left: var(--space-4); padding-right: var(--space-4); background: var(--surface-card); }
.field__num { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--action); line-height: 1; }
.field__body { display: grid; grid-template-columns: minmax(16rem, 1fr) 1.4fr; gap: var(--space-8); align-items: baseline; }
.field__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.field__text { color: var(--text-body); }
.field__go { font-size: var(--text-2xl); color: var(--action); transition: transform var(--dur-base) var(--ease-out); }
.field:hover .field__go { transform: translateX(4px); }
@media (max-width: 860px) { .field { grid-template-columns: 3rem 1fr; } .field__body { grid-template-columns: 1fr; gap: var(--space-2); } .field__go { display: none; } .field__title { font-size: var(--text-xl); } }

/* ---- Schrittkarten ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.step { background: var(--surface-page); border: 1px solid var(--border-subtle); border-top: 3px solid var(--ocean-blue); border-radius: var(--radius-lg); padding: var(--space-6); }
.step--baltic { border-top-color: var(--baltic-blue); }
.step--navy { border-top-color: var(--deep-navy); }
.step--amber { border-top-color: var(--signal-amber); }
.step__num { display: block; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-strong); margin-bottom: var(--space-3); }
.step p { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- Bänder: dunkel / ocean ---- */
.band { padding: var(--section-y) 0; color: var(--text-on-dark); }
.band--dark { background: var(--gradient-dark); }
.band--ocean { background: var(--gradient-ocean); }
.band h2 { color: var(--neutral-0); max-width: 20ch; }
.band p { max-width: 58ch; color: var(--text-on-dark); }
.band__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-16); align-items: end; }
.band__grid--center { align-items: center; }
.band__action { display: flex; flex-direction: column; align-items: start; gap: var(--space-8); }
@media (max-width: 860px) { .band__grid { grid-template-columns: 1fr; gap: var(--space-10); } }

.kpi { display: flex; flex-direction: column; gap: var(--space-4); border-left: 1px solid var(--border-inverse); padding-left: var(--space-10); }
.kpi__value { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: clamp(4rem, 10vw, 8.5rem); line-height: 0.9; letter-spacing: var(--tracking-tight); color: var(--ocean-300); white-space: nowrap; }
.kpi__unit { font-size: 0.6em; margin-left: 0.08em; }
.kpi__label { font-size: var(--text-md); color: var(--text-on-dark-muted); max-width: 24ch; }
@media (max-width: 860px) { .kpi { border-left: 0; padding-left: 0; } }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.chips li { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-on-dark); border: 1px solid var(--border-inverse); background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }

/* ---- Zitate ---- */
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: 1.35; letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.quote figcaption { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.quote figcaption span { display: block; }
.quote--wide { margin-top: var(--space-6); padding: var(--space-10); background: var(--surface-inverse); border-color: transparent; box-shadow: var(--shadow-lg); }
.quote--wide blockquote { color: var(--neutral-0); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); max-width: 60ch; }
.quote--wide figcaption { color: var(--ocean-300); }
@media (max-width: 560px) { .quote figcaption span { display: block; }
.quote--wide { padding: var(--space-6); } }

/* ---- Buch ---- */
.book { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: center; }
.book__cover { border-radius: var(--radius-sm); box-shadow: var(--shadow-xl); transform: rotate(-2deg); }
.book__body h2 { margin-bottom: var(--space-5); }
.book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } .book__cover { max-width: 14rem; } }

/* ---- Artikelkarten ---- */
.post { display: flex; flex-direction: column; gap: var(--space-4); min-height: 15rem; padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.post:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-accent); }
.post__meta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); }
.post__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.post__go { margin-top: auto; font-weight: var(--weight-semibold); color: var(--text-link); }

/* ---- Newsletter-Formular ---- */
.signup { margin-top: var(--space-12); display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-10); background: var(--surface-accent-soft); border: 1px solid var(--ocean-100); border-radius: var(--radius-xl); }
.signup h3 { margin-bottom: var(--space-1); }
.signup p { margin: 0; color: var(--text-body); font-size: var(--text-base); }
.signup__fields { display: flex; gap: var(--space-3); }
.signup input { flex: 1; min-width: 0; min-height: var(--control-h-lg); padding: 0 var(--space-5); font: inherit; font-size: var(--text-base); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--neutral-400); border-radius: var(--radius-pill); }
.signup input::placeholder { color: var(--text-muted); }
.signup .btn { min-height: var(--control-h-lg); }
.signup__note { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--text-body); }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; padding: var(--space-6); } }
@media (max-width: 480px) { .signup__fields { flex-direction: column; } }

/* ---- Abschluss-CTA ---- */
.band--cta h2 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); max-width: none; }
.band__cta p { font-size: var(--text-lg); }

/* ---- Footer ---- */
.site-footer { background: var(--surface-inverse-deep); color: var(--text-on-dark-muted); padding: var(--space-20) 0 var(--space-8); font-size: var(--text-base); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-10); }
.site-footer__claim { margin: var(--space-6) 0 var(--space-4); max-width: 30ch; color: var(--text-on-dark); }
.site-footer__address { margin: 0; line-height: var(--leading-relaxed); }
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--ocean-300); text-decoration: none; }
.site-footer__title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ocean-300); margin: 0 0 var(--space-5); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border-inverse); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.site-footer__legal-links { display: flex; gap: var(--space-6); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* ---- Einfache Inhaltsseite (404, Platzhalter) ---- */
.plain { padding: var(--section-y) 0; min-height: 50vh; }
.plain h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
.plain__links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }

/* ---- Dezentes Einblenden ---- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Unterseiten
   ============================================================ */

/* ---- Seitenkopf (dunkel, ein Motiv je Seite) ---- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--gradient-dark); color: var(--text-on-dark); padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/img/motif-topo.svg') center / cover no-repeat; opacity: 0.2; }
.page-hero--neural::before { background: url('/assets/img/motif-neural.svg') right -6% center / min(60vw, 640px) no-repeat; opacity: 0.16; }
.page-hero--plain::before { display: none; }
.page-hero h1 { color: var(--neutral-0); font-size: clamp(2rem, 5vw, var(--text-5xl)); max-width: 20ch; margin: 0; }
.page-hero__lead { font-size: clamp(var(--text-md), 1.8vw, var(--text-xl)); line-height: var(--leading-normal); max-width: 52ch; margin: var(--space-6) 0 0; color: var(--text-on-dark); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }

.breadcrumb { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-on-dark-muted); margin: 0 0 var(--space-8); }
.breadcrumb a { color: var(--text-on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ocean-300); }
.breadcrumb span[aria-hidden] { margin: 0 var(--space-2); }

/* ---- Textspalte ---- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: var(--space-16); margin-bottom: var(--space-5); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-10); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: var(--space-3); }
.prose li::marker { color: var(--action); }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section__head--narrow { margin-bottom: var(--space-8); }

.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

/* ---- Zahl mit Quelle ---- */
.stat { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--baltic-blue); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: var(--shadow-sm); }
.stat p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-strong); }
.stat cite { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* ---- Barrieren / Definitionskarten ---- */
.defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: var(--space-8) 0; }
.def { padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.def__key { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--deep-navy); color: var(--neutral-0); font-family: var(--font-mono); font-weight: var(--weight-bold); margin-bottom: var(--space-4); }
.def h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.def p { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
@media (max-width: 700px) { .defs { grid-template-columns: 1fr; } }

/* ---- Formate ---- */
.formats { border-top: 1px solid var(--border-default); margin: var(--space-8) 0; }
.format { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.9fr); gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.format__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }
.format__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); }
.format__meta strong { display: block; color: var(--ocean-700); font-size: var(--text-base); }
.format__text { font-size: var(--text-base); line-height: var(--leading-normal); }
@media (max-width: 860px) { .format { grid-template-columns: 1fr; gap: var(--space-2); } }
.note { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Preiskarten ---- */
.prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.price { display: flex; flex-direction: column; padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 4px solid var(--ocean-blue); border-radius: 18px; box-shadow: var(--shadow-md); }
.price:nth-child(2) { border-top-color: var(--baltic-blue); }
.price:nth-child(3) { border-top-color: var(--signal-amber); }
.price:nth-child(4) { border-top-color: var(--deep-navy); }
.price__meta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3); }
.price h3 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); }
.price__value { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); color: var(--ocean-700); line-height: 1; margin: 0 0 var(--space-5); }
.price p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .prices { grid-template-columns: 1fr; } }

/* ---- Fälle ---- */
.case { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-10); padding: var(--space-10); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); margin-bottom: var(--space-6); }
.case__sector { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); margin: 0 0 var(--space-3); }
.case h2, .case h3 { font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl)); margin: 0 0 var(--space-4); line-height: var(--leading-snug); }
.case p { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.case__side { display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-10); border-left: 1px solid var(--border-default); }
.case__kpi { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); line-height: 0.95; letter-spacing: var(--tracking-tight); color: var(--action); }
.case__kpi-label { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); margin-top: var(--space-2); }
.case__quote { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); line-height: 1.35; color: var(--text-strong); margin: 0; }
.case__steps { padding-left: 1.2em; margin: var(--space-4) 0; }
.case__steps li { margin-bottom: var(--space-3); font-size: var(--text-base); line-height: var(--leading-normal); }
.tag { align-self: start; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ocean-700); background: var(--ocean-50); border: 1px solid var(--ocean-200); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); text-decoration: none; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); } .case__side { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-default); padding-top: var(--space-6); } }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--border-default); margin-top: var(--space-6); }
.faq details { border-bottom: 1px solid var(--border-default); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) 0; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--action); flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 var(--space-6); max-width: 60ch; }

/* ---- Nummerierte Schritte (Problemseiten) ---- */
.moves { list-style: none; counter-reset: move; padding: 0; margin: var(--space-8) 0; display: grid; gap: var(--space-4); }
.moves li { counter-increment: move; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5) var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.moves li::before { content: counter(move, decimal-leading-zero); font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--action); }
.moves strong { color: var(--text-strong); }
.offer { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); background: var(--surface-inverse); color: var(--text-on-dark); border-radius: var(--radius-lg); }
.offer p { margin: 0; }
.offer strong { color: var(--neutral-0); }
.offer__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--signal-amber); margin-bottom: var(--space-2) !important; }

/* ---- Verwandte Links ---- */
.related { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }

/* ---- Person & Partner ---- */
.person { display: grid; grid-template-columns: minmax(14rem, 24rem) 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.person__photo { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.person__credit { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-2); }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; } .person__photo { max-width: 22rem; } }

.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.partner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--shadow-sm); }
.partner__logo { height: 2.5rem; display: flex; align-items: center; }
.partner__logo img { max-height: 2.5rem; max-width: 11rem; width: auto; object-fit: contain; }
.partner__field { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); margin: 0; }
.partner h3 { margin: 0; }
.partner p { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.partner .link-arrow { margin-top: auto; }
@media (max-width: 860px) { .partners { grid-template-columns: 1fr; } }

.values { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.values li { padding: var(--space-6); border-left: 3px solid var(--ocean-blue); background: var(--surface-card); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }
@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }

/* ---- Kontaktspuren ---- */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lane { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 4px solid var(--ocean-blue); border-radius: 18px; box-shadow: var(--shadow-md); }
.lane h2 { font-size: var(--text-xl); margin: 0; }
.lane p { margin: 0; font-size: var(--text-base); }
.lane .btn, .lane .link-arrow { margin-top: auto; align-self: start; }
@media (max-width: 960px) { .lanes { grid-template-columns: 1fr; } }
.address { font-style: normal; line-height: var(--leading-relaxed); }

/* ---- Keynote-Themen ---- */
.topics { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-default); }
.topics li { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); }
.topics strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }

/* ---- Rechtstexte ---- */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-10); }
.legal p, .legal li { font-size: var(--text-base); }

.chips--light li { color: var(--ocean-700); background: var(--ocean-50); border-color: var(--ocean-200); }

/* ---- Artikel ---- */
.article__title { max-width: 24ch !important; }
.article__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-on-dark-muted); margin: var(--space-6) 0 0; }
.article > p:first-child { font-size: var(--text-xl); line-height: var(--leading-normal); color: var(--text-strong); }
.article h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); }
.article img { border-radius: var(--radius-lg); margin: var(--space-8) 0; box-shadow: var(--shadow-md); }
.article blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--ocean-blue); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: 1.4; color: var(--text-strong); }
.article blockquote p:last-child { margin-bottom: 0; }
.article hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-12) 0; }
.article table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--text-base); line-height: var(--leading-normal); }
.article th { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--eyebrow-on-light); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--border-strong); }
.article td { padding: var(--space-4); border-bottom: 1px solid var(--border-default); vertical-align: top; width: 50%; }
.article td:first-child { color: var(--text-muted); }
.article td:last-child { color: var(--text-strong); font-weight: var(--weight-medium); }
.article .scene { margin: var(--space-8) 0; }
.article__cta { margin-top: var(--space-16); }

/* ---- Newsletter: Bot-Falle und Status ---- */
.signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__note a { color: var(--text-link); }
.signup__status { grid-column: 1 / -1; margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.signup__status[data-state="ok"] { color: var(--ocean-800); }
.signup__status[data-state="error"] { color: var(--danger); }

.partner__logo--tall { height: 5.5rem; }
.partner__logo--tall img { max-height: 5.5rem; }

/* ---- Fotos ---- */
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; }
.photo--wide img { aspect-ratio: 21 / 9; }
.photo-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); margin-top: var(--space-16); }
.photo-row img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.photo-row .photo:first-child img { aspect-ratio: auto; }
@media (max-width: 860px) { .photo-row { grid-template-columns: 1fr 1fr; } .photo-row .photo:first-child { grid-column: 1 / -1; } .photo-row .photo:first-child img { aspect-ratio: 16 / 9; } }
.page-hero--photo { padding-bottom: clamp(7rem, 12vw, 10rem); }
.photo--lift { margin-top: calc(-1 * clamp(5rem, 9vw, 8rem)); position: relative; z-index: 2; }
.lanes-intro { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; margin-bottom: var(--space-16); }
.lanes-intro img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .lanes-intro { grid-template-columns: 1fr; } .lanes-intro img { max-width: 20rem; } }
.site-footer__motto { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ocean-300); margin: var(--space-6) 0 0; }

/* ============================================================
   Farblogik nach Inhaltsart — dezent, aber durchgängig
   Ocean = Insights/Aktion · Baltic = Cases · Amber = Wissensnuggets
   Violet = Lab/Tools · Teal = Evidenz/Zahlen · Coral = Warnung
   --tone: Fläche/Marke · --tone-soft: Hintergrund · --tone-ink: Text (AA)
   ============================================================ */
.tone-insight  { --tone: var(--ocean-600);    --tone-soft: var(--ocean-50);  --tone-ink: var(--ocean-700); }
.tone-case     { --tone: var(--baltic-blue);  --tone-soft: color-mix(in srgb, var(--baltic-blue) 9%, var(--neutral-0));  --tone-ink: var(--ocean-800); }
.tone-tip      { --tone: var(--signal-amber); --tone-soft: var(--warning-soft); --tone-ink: color-mix(in srgb, var(--signal-amber) 48%, var(--neutral-950)); }
.tone-lab      { --tone: var(--signal-violet);--tone-soft: color-mix(in srgb, var(--signal-violet) 10%, var(--neutral-0)); --tone-ink: color-mix(in srgb, var(--signal-violet) 72%, var(--neutral-950)); }
.tone-evidence { --tone: var(--signal-teal);  --tone-soft: color-mix(in srgb, var(--signal-teal) 11%, var(--neutral-0));  --tone-ink: color-mix(in srgb, var(--signal-teal) 55%, var(--neutral-950)); }
.tone-caution  { --tone: var(--signal-coral); --tone-soft: var(--danger-soft); --tone-ink: color-mix(in srgb, var(--signal-coral) 62%, var(--neutral-950)); }

/* ---- Icons ---- */
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--tone-soft, var(--ocean-50)); color: var(--tone-ink, var(--ocean-700)); margin-bottom: var(--space-5); }
.icon-chip--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); margin-bottom: 0; }
.icon-chip--sm .icon { width: 1.2rem; height: 1.2rem; }
.door .icon-chip { margin-bottom: var(--space-3); }
.field__num { display: flex; flex-direction: column; gap: var(--space-3); }
.field__num .icon { width: 1.75rem; height: 1.75rem; color: var(--text-muted); }
.step .icon { display: block; margin-bottom: var(--space-4); color: var(--text-muted); width: 1.75rem; height: 1.75rem; }
.lane .icon-chip { margin-bottom: 0; }

/* Farbige Akzente auf Karten */
.card[class*="tone-"], .post[class*="tone-"], .case[class*="tone-"] { border-top: 4px solid var(--tone); }
.post.tone-insight .post__meta { color: var(--tone-ink); }
.case.tone-case .case__sector { color: var(--tone-ink); }
.case.tone-case .case__kpi { color: var(--tone); }

/* ---- Hero mit Foto ---- */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: center; }
.hero__photo { margin: 0; position: relative; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-2xl); border: 1px solid var(--border-inverse); box-shadow: var(--shadow-xl); }
.hero__photo figcaption { position: absolute; left: var(--space-5); bottom: var(--space-5); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--neutral-0); background: color-mix(in srgb, var(--prussian-blue) 72%, transparent); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); }
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; } .hero__photo img { aspect-ratio: 16 / 9; } }

/* ---- Visualisierungen ---- */
.viz { margin: 0; }
.viz__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-body); margin-bottom: var(--space-2); }
.viz__value { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--text-strong); white-space: nowrap; }
.viz__source { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-style: normal; font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

.meter { height: 0.625rem; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: var(--radius-pill); background: var(--tone, var(--ocean-600)); }
.band .meter { background: rgba(255, 255, 255, 0.14); }
.band .viz__label { color: var(--text-on-dark-muted); }
.band .viz__value { color: var(--neutral-0); }

.people { display: flex; flex-wrap: wrap; gap: var(--space-1); color: var(--neutral-200); }
.people .icon { width: 1.75rem; height: 1.75rem; }
.people .is-on { color: var(--tone, var(--ocean-600)); }

.compare { display: grid; gap: var(--space-4); }
.compare__row { display: grid; grid-template-columns: 5.5rem 1fr 3.5rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.compare__bar { height: 1.25rem; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; width: calc(var(--v) * 1%); background: rgba(255, 255, 255, 0.28); }
.compare__bar--now { background: var(--ocean-300); }
.compare__row span:last-child { font-family: var(--font-mono); font-weight: var(--weight-bold); text-align: right; }

.range { position: relative; padding-top: var(--space-2); }
.range__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.range__track { position: relative; height: 1.25rem; background: var(--neutral-100); border-radius: var(--radius-xs); }
.range__span { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); border-radius: var(--radius-xs); background: var(--neutral-400); }
.range__span--hi { background: var(--ocean-600); }
.range__span b { position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); white-space: nowrap; }
.range__axis { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.range__axis div { display: flex; justify-content: space-between; }
@media (max-width: 640px) { .range__row, .range__axis { grid-template-columns: 1fr; gap: var(--space-1); } .range__axis span:first-child { display: none; } }

/* Zahlenkacheln */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.fact { padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-5); }
.fact__number { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-4xl); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.fact p { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
.fact .viz__source { margin-top: auto; }
@media (max-width: 960px) { .facts { grid-template-columns: 1fr; } }
.stat .viz { margin-top: var(--space-5); }
.case__side .viz { margin-top: var(--space-3); }

/* ---- Wissensnugget ---- */
.nugget { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--tone-soft); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 18px; }
.nugget__label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tone-ink); }
.nugget__label .icon { width: 1.15rem; height: 1.15rem; }
.nugget h3 { margin: 0; font-size: var(--text-xl); }
.nugget p { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); }
.nugget__try { font-weight: var(--weight-semibold); color: var(--text-strong) !important; }
.prose .nugget { margin: var(--space-10) 0; }
.not-help { padding: var(--space-6) var(--space-8); background: var(--tone-soft); border-left: 4px solid var(--tone); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.not-help p { margin: 0; }
.not-help .nugget__label { margin-bottom: var(--space-3); }
.stat[class*="tone-"] { border-left-color: var(--tone); }
.lab-tone .page-hero { }

/* ---- Evidenzlabel & Quadranten ---- */
.evidence { margin-left: var(--space-2); padding: 0.15em 0.7em; border-radius: var(--radius-pill); background: var(--tone-soft); color: var(--tone-ink); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); letter-spacing: var(--tracking-wide); }
.nugget .evidence.tone-tip { background: var(--surface-card); }
.quad { margin: 0; }
.quad__x { display: grid; grid-template-columns: 1fr 1fr; margin-left: 2rem; text-align: center; }
.quad__x span, .quad__y span { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); padding: var(--space-2); }
.quad__body { display: grid; grid-template-columns: 2rem 1fr; }
.quad__y { display: grid; grid-template-rows: 1fr 1fr; }
.quad__y span { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.quad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.quad__cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(var(--text-md), 2vw, var(--text-xl)); color: var(--neutral-0); }
.quad__cell small { font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0.85; }
.quad__cell--1 { background: var(--ocean-600); }
.quad__cell--2 { background: var(--baltic-blue); }
.quad__cell--3 { background: var(--ocean-200); color: var(--deep-navy); }
.quad__cell--4 { background: var(--deep-navy); }

.case__origin { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-4) !important; }