/* ===== tokens/colors.css (Design-System, unverändert) ===== */
:root {
  /* ---------- Marke: Türkis ---------- */
  /* Signal. Flächen, Icons, Rahmen, UND Text auf dunklem Grund. */
  --rk-turquoise: #18C7D4;
  --rk-turquoise-deep: #0E97A1;  /* Buttons + große Schrift auf Hell (3,3:1) */
  --rk-turquoise-ink: #0A6E74;   /* kleine Schrift/Links auf Hell (4,7:1, AA) */
  --rk-turquoise-wash: rgba(24, 199, 212, 0.20); /* Hinterlegung auf Hell */
  --rk-turquoise-veil: rgba(24, 199, 212, 0.14); /* Hinterlegung auf Dunkel */
  --rk-turquoise-line: rgba(24, 199, 212, 0.28);

  /* ---------- Basis & Neutrale ---------- */
  --rk-ink: #101820;        /* dunkle Basis, Fließtext auf Hell (18:1) */
  --rk-ink-deep: #0B1017;   /* tiefste Fläche (Footer, Hero-Grund) */
  --rk-slate: #1B2530;      /* Karte/Panel auf Dunkel */
  --rk-slate-raised: #121A24;
  --rk-grey: #5C6770;       /* gedämpfter Text auf Hell (5,4:1) */
  --rk-grey-light: #636E78; /* Meta/Quellen auf Hell: 5,2:1 auf #FFF, 4,9:1 auf #F5F8F9 (AA) */
  --rk-line: #E5EAEC;       /* Border auf Hell */
  --rk-mist: #F5F8F9;       /* Trenn-Fläche */
  --rk-white: #FFFFFF;

  /* Text auf dunklem Grund */
  --rk-on-dark: #FFFFFF;
  --rk-on-dark-muted: #B9C4CC;
  --rk-on-dark-meta: #8695A3; /* Meta/Legal auf Dunkel: 6,2:1 auf #0B1017, 5,9:1 auf #101820 (AA) */
  --rk-line-on-dark: rgba(255, 255, 255, 0.10);

  /* ---------- Semantisch ---------- */
  --rk-star: #E8A200;       /* Bewertungssterne */
  --rk-warn: #E8B931;
  --rk-error: #C0392B;
  --rk-success: #2E8B57;

  /* ================================================================
     FLÄCHEN-SETS. Jedes Modul erbt das Set seiner Fläche.
     Kernregel (Kundenfreigabe): Türkis ist auf hellen Flächen KEINE
     Textfarbe, sondern Akzent (Button-Füllung, Hinterlegung, Marker).
     Text auf Weiß ist schwarz. Auf Dunkel trägt Türkis auch Schrift.
     ================================================================ */

  /* Weiß — Standard-Fläche der Website */
  --surface-default: var(--rk-white);
  --text-body: var(--rk-ink);
  --text-heading: var(--rk-ink);
  --text-muted: var(--rk-grey);
  --text-meta: var(--rk-grey-light);
  --text-link: var(--rk-turquoise-ink);
  --border-default: var(--rk-line);
  --accent-fill: var(--rk-turquoise);      /* Button-Füllung */
  --accent-on-fill: var(--rk-ink);         /* Text auf Türkis-Füllung */
  --accent-backing: var(--rk-turquoise-wash); /* Label-/Chip-Hinterlegung */

  /* Nebel — Trenn-Fläche zwischen gleichartigen Modulen */
  --surface-mist: var(--rk-mist);

  /* Dunkel — Akzent-Fläche: Hero, Zwischen-Break, CTA, Footer */
  --surface-dark: var(--rk-ink);
  --surface-dark-deep: var(--rk-ink-deep);
  --surface-dark-card: var(--rk-slate);
  --surface-dark-panel: var(--rk-slate-raised);
  --text-on-dark: var(--rk-on-dark);
  --text-on-dark-muted: var(--rk-on-dark-muted);
  --text-on-dark-signal: var(--rk-turquoise); /* hier DARF Türkis Text sein */
  --text-on-dark-meta: var(--rk-on-dark-meta); /* Meta/Legal auf Dunkel */
  --border-on-dark: var(--rk-line-on-dark);

  /* Fokus — sichtbar auf hell und dunkel */
  --focus-ring: var(--rk-turquoise);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* ===== tokens/typography.css (Design-System, unverändert) ===== */
:root {
  /* Familien */
  --font-display: "Outfit", system-ui, sans-serif; /* Headlines, Kennzahlen */
  --font-text: "Public Sans", system-ui, sans-serif; /* Fließtext, UI */

  /* Gewichte — Display bewusst 500, nicht 700: ruhiger, seriöser Auftritt */
  --weight-display: 500;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Skala (fluid, Website) */
  --text-h1: clamp(34px, 5vw, 58px);
  --text-h2: clamp(26px, 3.4vw, 40px);
  --text-h3: 20px;
  --text-lead: clamp(17px, 2vw, 21px);
  --text-body-size: 16px;
  --text-small: 14px;
  --text-eyebrow: 13px;

  /* Zeilenhöhen */
  --leading-display: 1.05;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --leading-tight: 1.45;

  /* Laufweiten */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-eyebrow: 0.2em;

  /* Lesbarkeit */
  --measure: 68ch; /* max. Zeilenlänge Fließtext */
}

/* ===== tokens/spacing.css (Design-System, unverändert) ===== */
:root {
  /* Spacing-Skala 4 / 8 / 16 / 24 / 44 / 88 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 44px;
  --space-6: 88px;

  /* Layout */
  --content-width: 1180px;
  --gutter: 24px;
  --gutter-lg: 40px;
  --section-rhythm: var(--space-6); /* vertikaler Sektionsabstand */

  /* Mindest-Trefferfläche (Mobil) */
  --tap-target: 44px;
}

/* ===== tokens/shape.css (Design-System, unverändert) ===== */
:root {
  /* Radien */
  --radius-button: 6px;
  --radius-card: 10px;
  --radius-box: 14px;
  --radius-pill: 100px;
  --radius-input: 8px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Elevation — sparsam. Karten tragen Border, nicht Schatten. */
  --shadow-none: none;
  --shadow-hover: 0 8px 20px rgba(10, 110, 116, 0.30);
  --shadow-card: 0 2px 8px rgba(16, 24, 32, 0.06);
  --shadow-drawer: 0 20px 60px rgba(11, 16, 23, 0.45);
}

/* ===== tokens/motion.css (Design-System, unverändert) ===== */
:root {
  /* Hover/Transition */
  --duration-fast: 150ms;
  --duration-reveal: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --transition-default: all var(--duration-fast) var(--ease-standard);

  /* Hover hebt an */
  --lift-hover: -2px;
}

/* Scroll-Reveal ("Einfliegen") — nur Verstärkung. Inhalte stehen
   serverseitig im HTML, nie JS-gated (Crawling / KI-SEO). */
@keyframes rk-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

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

/* ===== tokens/base.css (Design-System, unverändert) ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--text-heading);
}
h1 { font-size: var(--text-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-h3); line-height: var(--leading-heading); }

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

/* Links: auf Hell nie Türkis als Textfarbe — Türkis-Ink erfüllt AA. */
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ===== v5 „Papier, Tinte, ein Rot" (28.09.2026; Akzent seit 18.10.2026 Rot statt Grün, von den Anwälten freigegeben) =====
   Look des Vercel-Entwurfs rk-legal.vercel.app. Überschreibt die Design-System-
   Werte oben (Türkis, Outfit/Public Sans, runde Radien) und ersetzt die v3/v4-
   Overrides (Sand, Terracotta). Muss NACH den DS-Tokens stehen.
   Achtung Namen: --rk-turquoise* heißen aus Kompatibilität weiter so, tragen aber
   CI-Rot (#B63D4B: -deep/-ink) bzw. Rosé (#E7B0B6: --rk-turquoise) — main.css
   verwendet sie an über 100 Stellen. Bis 18.10.2026: Grün #1F4A3A / Mint #9CC3B2.
   Grund #F5F2EC · Fläche 2 #ECE7DE · Tinte #15151A · Text #2C2C31 · gedämpft #6E6A63
   · Akzent #B63D4B (auf Dunkel Rosé #E7B0B6). Instrument Serif + Figtree
   (assets/fonts/fonts.css). Boxen 4–6 px, zart dunkel umrandet, Buttons als Pille. */
:root {
  /* ---------- Farbe ---------- */
  --rk-ink: #15151A;
  --rk-turquoise: #E7B0B6;            /* Rosé: Flächen hinter Tinte, Signal auf Dunkel (9,9:1 auf #15151A) */
  --rk-turquoise-deep: #B63D4B;       /* CI-Rot: Rahmen, große Schrift auf Hell */
  --rk-turquoise-ink: #B63D4B;        /* CI-Rot: Links/kleine Schrift auf Hell (5,0:1 auf Papier) */
  --rk-turquoise-wash: #F4E6E4;
  --rk-turquoise-veil: rgba(231, 176, 182, .16);
  --rk-turquoise-line: rgba(182, 61, 75, .30);
  --rk-turquoise-glow: transparent;   /* keine Lichtflecken */
  --rk-star: #C98A2B;
  --rk-terracotta: #9A5B12;
  --rk-terracotta-ink: #7A4710;
  --terra-wash: transparent;
  --terra-line: rgba(154, 91, 18, .35);

  --surface-default: #F5F2EC;
  --surface-mist: #ECE7DE;
  --surface-hero: #F5F2EC;
  --header-bg: rgba(245, 242, 236, .92);
  --text-body: #2C2C31;
  --text-heading: #15151A;
  --text-muted: #6E6A63;
  --text-meta: #6E6A63;
  --text-link: #B63D4B;
  --border-default: rgba(21, 21, 26, .16); /* „zart schwarz umrandet" */
  --accent-fill: #B63D4B;
  --accent-on-fill: #FFFFFF;
  --accent-backing: #F4E6E4;

  --surface-dark: #15151A;
  --surface-dark-deep: #111114;
  --surface-dark-card: #1E1E23;
  --surface-dark-panel: #1A1A1F;
  --text-on-dark: #F5F2EC;
  --text-on-dark-muted: #DCD8D0;
  --text-on-dark-signal: #E7B0B6;
  --text-on-dark-meta: #B9B4AA;
  --border-on-dark: rgba(245, 242, 236, .16);

  --focus-ring: #B63D4B;
  --focus-ring-offset: 3px;

  /* ---------- Schrift ---------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "Figtree", system-ui, -apple-system, sans-serif;
  --weight-display: 400;
  --text-h1: clamp(44px, 6vw, 88px);
  --text-h2: clamp(34px, 4.2vw, 56px);
  --text-h3: 24px;
  --text-lead: clamp(17px, 1.4vw, 20px);
  --text-body-size: 17px;
  --text-eyebrow: 11.5px;
  --leading-display: 1;
  --leading-heading: 1.06;
  --leading-body: 1.65;
  --tracking-display: -.01em;
  --tracking-heading: 0;
  --tracking-eyebrow: .2em;

  /* ---------- Form ---------- */
  --radius-button: 999px;
  --radius-card: 4px;
  --radius-box: 6px;
  --radius-input: 4px;
  --shadow-card: none;
  --shadow-hover: none;
  --lift-hover: 0px;
  --content-width: 1240px;
  --section-rhythm: 112px;

  /* Einfliegen (aus v4 übernommen) */
  --reveal-offset: 48px;
  --duration-reveal-long: 700ms;
}