/* Design-Tokens. Neutrale Standardwerte – der Mandant überschreibt alle --c-*, --radius-*, --font-*
   über <style id="cp-theme"> (:root[data-theme="tenant"]), erzeugt von theme/derive.js. */
:root {
  --c-surface: #FFFFFF;
  --c-surface-muted: #F1F3F8;
  --c-ink: #1C1D1F;
  --c-ink-muted: #5B5E63;
  --c-line: #8A8D92;
  --c-line-subtle: #E3E4E6;
  --c-brand: #3D4450;
  --c-on-brand: #FFFFFF; /* nur große Schrift/Deko – Buttons und Text: --c-brand-strong + --c-on-brand-strong */
  --c-brand-strong: #3D4450;
  --c-on-brand-strong: #FFFFFF;
  --c-brand-ink: #3D4450;
  --c-brand-tint-1: #F6F7F8;
  --c-brand-tint-2: #ECEEF1;
  --c-brand-tint-3: #DDE0E5;
  --c-brand-deep: #23272E;
  --c-on-brand-deep: #FFFFFF;
  --c-on-brand-deep-muted: #D5D8DD;
  --c-accent: #3D4450;
  --c-accent-on-deep: #FFFFFF;
  --c-focus: #1C1D1F;
  --c-focus-contrast: #FFFFFF;
  --c-scrim: #1C1D1F;
  --scrim-opacity: 0.7;

  /* Pastelltoene fuer die Icon-Kreise der Jobfakten (Art-Director-Vorlage 17.09.2026).
     BEWUSST ausserhalb der --c-*-Familie: Die --c-* werden pro Mandant aus der Markenfarbe abgeleitet
     (theme/derive.js). Diese fuenf sollen gerade NICHT mitwandern - sie unterscheiden die Fakten voneinander
     und muessen bei jedem Mandanten gleich aussehen, sonst verliert die Reihe ihre Ordnungsfunktion.
     Alle fuenf sind so hell, dass --c-ink (#1C1D1F) darauf weit ueber dem geforderten Kontrast liegt; das
     misst der Browser-Test ohnehin fuer jeden sichtbaren Text und jedes Icon nach. */
  /* Neutrales Grau fuer die Kachelflaeche selbst (Art-Director-Entscheidung 17.09.2026). Bewusst NICHT
     --c-surface-muted: Das wird pro Mandant aus der Markenfarbe abgeleitet und war bei der AWO zartrosa
     statt grau. Die Kacheln sollen wie in der Vorlage markenunabhaengig sein. */
  --tag-surface: #F3F4F6;
  --tag-bg-1: #CFE6F5;
  --tag-bg-2: #FBDCC0;
  --tag-bg-3: #F8CBD2;
  --tag-bg-4: #C9E9D2;
  --tag-bg-5: #E2DAF5;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-button: 999px;
  --radius-pill: 999px;

  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading-weight: 800;

  /* Typo-Skala: GENAU VIER Textgroessen plus eine Kleintext-Stufe (Art-Director-Entscheidung 21.09.2026).
     Vorher waren es sieben. Zusammengelegt wurden Hero-Claim + h1 zur H1 sowie h3 + Einleitungssatz zur
     Sub-Headline. Die Hierarchie traegt ab jetzt Fettung und Schriftfamilie, nicht mehr eine feine
     Groessenabstufung -- ein fetter Jobkartentitel in der Headline-Schrift hebt sich auch bei 22 px
     deutlich vom Fliesstext ab.
     Hier kommt KEINE sechste Stufe dazu: Wer eine neue Groesse braucht, nimmt die naechstliegende.
     Alle Werte laufen ueber denselben Bereich 320 px -> 1440 px. */
  --text-sm: 0.875rem;                                   /* 14, nur Label, Meta, Copyright */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 -> 18, Fliesstext */
  --text-sub: clamp(1.2rem, 1.14rem + 0.29vw, 1.4rem);   /* 19 -> 22, Sub-Headline UND h3 */
  --text-h2: clamp(1.75rem, 1.2rem + 2.75vw, 3.25rem);   /* 28 -> 52 */
  --text-h1: clamp(2.5rem, 1.5rem + 5vw, 5rem);          /* 40 -> 80 */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --weight-lead: 350;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 8.5rem);        /* 64 → 136, Abschnittsabstand */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 80rem;
  --container-text: 44rem;
  --header-h: 4rem;
  --touch: 2.75rem;

  --duration: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --z-header: 50;
  --z-overlay: 1000;
}