/* ===========================================================================
   CUSTODIA PROTECTION — tokens.css
   Nur Custom Properties, @font-face und der globale Reduced-Motion-Kill-Switch.
   Keine Selektoren, keine Komponenten.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FONTS — self-hosted Variable Fonts (H8: kein Google-Fonts-CDN).
   Im Network-Tab darf fonts.gstatic.com niemals auftauchen.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/inter-tight-var.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   METRISCH ANGEPASSTE FALLBACKS — der Grund, warum CLS 0.00 erreichbar ist.

   font-display: swap rendert zuerst die Systemschrift. Arial ist deutlich
   breiter als Inter Tight: die Hero-H1 misst in Arial 1266 px, in Inter Tight
   nur 1068 px (bei 76 px). In einer 616 px breiten Spalte sind das DREI statt
   ZWEI Zeilen — beim Schriftwechsel schrumpft die Spalte, und die daneben
   zentrierte Grafik springt. Gemessen: CLS 0,016.

   size-adjust skaliert den Fallback so, dass er exakt dieselbe Breite belegt
   (Werte empirisch gemessen, nicht geschätzt). Damit bricht der Fallback
   identisch um und der Swap verschiebt nichts mehr.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106.73%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* size-adjust 96 %: NICHT aus einer Einzelstring-Breitenmessung abgeleitet
   (die ergab 84,36 % — und brach die Hero-H1 auf 3 statt 4 Zeilen um, was den
   Sprung nur umdrehte). Stattdessen über die Zeilenzahl kalibriert: bei
   1440/1280/1024/960 px ist die H1-Höhe von 90 % bis 102 % identisch mit der
   echten Schrift. 96 % ist die Mitte dieses stabilen Bands — am weitesten von
   beiden Kipp-Punkten entfernt. */
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 96%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* -------------------------------------------------------------------------
     FARBEN — Basis
     ------------------------------------------------------------------------- */
  --ink: #14181F;                    /* Anthrazit. 16,3:1 auf --bg. Bewusst kein Navy. */
  --ink-soft: #2A2F38;               /* Sekundärflächen auf dunklem Grund */
  --ink-line: #343A44;               /* Borders auf dunklem Grund */
  --ink-wash: rgba(20, 24, 31, .06); /* Dezente Flächen */

  --bg: #F4F5F6;                     /* Kundenwunsch — der Hintergrundton des Logos */
  --surface: #FFFFFF;                /* Cards, Formulare */
  --surface-warm: #F2F5F9;           /* Navy-getönte Card, z. B. ausgewählte Radio-Option */

  /* -------------------------------------------------------------------------
     FARBEN — Navy-Akzent.  ZWEI TÖNE, EINE EINFACHE REGEL.

     Die Basis ist monochrom: schwarz/weiß/grau tragen die Seite. Navy ist ein
     SPARSAMER Akzent — er blitzt nur dort auf, wo es wirklich Akzent braucht
     (CTA, Eyebrow-Marker, Globus, Fokus). Kundenwunsch; die farbliche Nähe zum
     Wettbewerber ist ausdrücklich akzeptiert.

     Die Regel ist simpler als beim früheren Messing (das drei Abstufungen
     brauchte, weil Gold auf Hell zu hell wurde):

       --accent / --accent-ink   #1E3A5F   ALLES auf HELLEM Grund
                                 10,54:1 auf --bg ✅ · 11,50:1 mit weißer Schrift ✅
                                 → Fläche, Icon, Border, Button (weiße Schrift),
                                   Text, Link, Eyebrow, Label. Ein Ton für alles.

       --accent-lit              #79ADDC   ALLES auf DUNKLEM Grund
                                 7,48:1 auf --ink ✅
                                 → Eyebrow, Link, Globus, Fokus-Ring auf dunkel.

     🔴 --accent-lit NIEMALS als Text auf hellem Grund (zu hell → unlesbar).
     ------------------------------------------------------------------------- */
  --accent: #1E3A5F;
  --accent-ink: #1E3A5F;
  --accent-lit: #79ADDC;
  --accent-hover: #254B75;
  --accent-wash: rgba(30, 58, 95, .08);
  --accent-line: rgba(30, 58, 95, .28);

  /* -------------------------------------------------------------------------
     FARBEN — Text
     ------------------------------------------------------------------------- */
  --text: #14181F;                   /* 16,3:1 auf --bg */
  --text-muted: #63676E;             /* 5,21:1 auf --bg ✅ AA — NICHT aufhellen */
  --text-on-dark: #FFFFFF;           /* 17,8:1 auf --ink */
  --text-on-dark-muted: #9BA1AB;     /* 6,85:1 auf --ink ✅ AA */

  /* -------------------------------------------------------------------------
     FARBEN — Linien
     ------------------------------------------------------------------------- */
  --border: #E3E5E9;
  --border-strong: #CFD3D9;
  --border-on-dark: rgba(255, 255, 255, .14);

  /* -------------------------------------------------------------------------
     FARBEN — Signal.  AUSSCHLIESSLICH für Notruf-Elemente.
     Kein Fehler-Rot, kein Sale-Rot, kein Hover-Rot, kein Badge-Rot.
     Einzige Ausnahme: Pflichtfeld-Sternchen und Formular-Fehlermeldung.
     ------------------------------------------------------------------------- */
  --signal: #C1272D;                 /* 5,35:1 auf --bg  ✅ */
  --signal-lit: #E5484D;             /* 4,55:1 auf --ink ✅ */

  /* -------------------------------------------------------------------------
     TYPOGRAFIE
     ------------------------------------------------------------------------- */
  --font-display: 'Inter Tight', 'Inter Tight Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 6.2vw, 4.75rem);   /* 44 → 76 px */
  --fs-h1: clamp(2.25rem, 4.4vw, 3.25rem);        /* 36 → 52 px */
  --fs-h2: clamp(1.75rem, 3vw, 2.375rem);         /* 28 → 38 px */
  --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);      /* 18 → 22 px */
  --fs-stat: clamp(3rem, 5.5vw, 4.5rem);          /* 48 → 72 px */
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.25rem);    /* 17 → 20 px */
  --fs-body: 1rem;                                /* 16 px */
  --fs-small: 0.875rem;                           /* 14 px */
  --fs-eyebrow: 0.75rem;                          /* 12 px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-head: 1.15;
  --lh-body: 1.65;

  --ls-display: -0.025em;
  --ls-head: -0.015em;
  --ls-eyebrow: 0.14em;

  --measure: 62ch;
  --measure-narrow: 48ch;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-py: clamp(80px, 10vw, 140px);

  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Schatten zweistufig, in Ink-Ton — nicht in Schwarz */
  --shadow-card: 0 1px 2px rgba(20, 24, 31, .04), 0 8px 24px rgba(20, 24, 31, .06);
  --shadow-lift: 0 2px 4px rgba(20, 24, 31, .05), 0 18px 44px rgba(20, 24, 31, .10);

  --header-h: 72px;
  --notruf-h: 36px;

  --z-header: 100;
  --z-modal: 200;

  /* 8-Punkt-Abstands-Skala */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* Reveals, Hover */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* Modal, Accordion */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
}

/* ---------------------------------------------------------------------------
   GLOBALER REDUCED-MOTION-KILL-SWITCH (H13)

   Dies ist die EINZIGE Stelle im gesamten Projekt, an der !important erlaubt ist.
   Der Universalselektor muss jede Animation überstimmen können, egal wo sie
   deklariert wurde.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}