/* Tokens: Farben, Schrift, Abstände, Raster, Bewegung und die Rollen-Variablen der Hintergründe (.ground--*).
   Einzige Stelle mit festen Farbwerten. Werte stammen aus dem Designsystem (tokens/*.css), Abgleich: tools/css/check-tokens.py.
   Breakpoints (CSS-Variablen gehen in @media nicht): 1200 Menü · 1000 Tablet quer · 900 Tablet · 560 Handy · 782 nur WP-Adminleiste. */
:root {
  color-scheme: light;
  /* [BRAND] Farben */
  --clary-forest: #21423c;
  --clary-lime: #a5dc77;
  --clary-sage: #99c2ba;
  --clary-coral: #eb5d48;
  --clary-white: #ffffff;
  /* [DERIVED] / [PROPOSED] */
  --clary-moss: #648f5a;
  --clary-forest-raised: #2f514a;
  --clary-forest-deep: #17302b;
  --clary-forest-80: #4d6863;
  --clary-sage-100: #e3eeeb;
  --clary-sage-50: #f2f7f5;
  --clary-coral-ink: #b8402d;
  --clary-coral-light: #f4907f;
  --clary-coral-50: #fbe3df; /* Hintergrund Fehlermeldung */
  --clary-on-brand-muted: #c9d6d3;
  --clary-line-subtle: rgba(33, 66, 60, 0.14);
  --clary-line-on-brand: rgba(255, 255, 255, 0.18);
  /* Schrift */
  --font-display: "finalsix", "Montserrat", system-ui, sans-serif;
  --font-text: "Montserrat", system-ui, sans-serif;
  --weight-display: 900;
  --weight-body: 400;
  --weight-body-light: 300;
  --weight-emphasis: 600;
  --weight-label: 500;
  --type-display-xl: clamp(2.5rem, 5.75vw, 6rem);
  --type-display-l: clamp(2rem, 4.1vw, 3.875rem);
  --type-display-m: clamp(1.625rem, 2.75vw, 2.5rem);
  --type-statement: clamp(1.25rem, 2vw, 1.875rem);
  --type-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --type-body: 1.0625rem;
  --type-small: 0.9375rem;
  --type-label: 0.875rem;
  --type-micro: 0.75rem;
  --type-tagline: clamp(1.25rem, 2vw, 1.75rem);
  --leading-display: 1.1;
  --leading-statement: 1.28;
  --leading-body: 1.6;
  --leading-label: 1.35;
  --tracking-statement: 0.01em;
  --tracking-body: 0.015em;
  --tracking-label: 0.08em;
  --measure-body: 62ch;
  --measure-lead: 48ch;
  /* Abstand, Raster, Form */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gap-couple: var(--space-2);
  --gap-related: clamp(16px, 1.6vw, 24px);
  --gap-group: clamp(40px, 4.5vw, 64px);
  --gap-block: clamp(72px, 8vw, 128px);
  --gap-section: clamp(112px, 13vw, 240px);
  /* Zusatzabstand in einem Stapel mit --gap-related, damit vor einem eigenständigen Block genau --gap-group steht */
  --gap-to-group: calc(var(--gap-group) - var(--gap-related));
  /* Innenabstand von Flächen (Panels, Formular) */
  --pad-panel: clamp(24px, 3vw, 48px);
  --page-margin: clamp(20px, 6.25vw, 120px);
  --grid-gutter: clamp(16px, 2vw, 32px);
  --content-max: 1440px;
  --radius-none: 0;
  --radius-full: 9999px;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 180ms;
  /* Rollen-Variablen, Standard = heller Grund */
  --on-ground: var(--clary-sage-50);
  --on-text: var(--clary-forest);
  --on-muted: var(--clary-forest-80);
  --on-label: var(--clary-coral-ink);
  --on-accent: var(--clary-forest);
  --on-line: var(--clary-line-subtle);
  --on-panel: var(--clary-sage-100);
  --on-ring: var(--clary-forest);
}
.ground--forest {
  --on-ground: var(--clary-forest);
  --on-text: var(--clary-white);
  --on-muted: var(--clary-on-brand-muted);
  --on-label: var(--clary-coral-light);
  --on-accent: var(--clary-lime);
  --on-line: var(--clary-line-on-brand);
  --on-panel: var(--clary-forest-raised);
  --on-ring: var(--clary-lime);
}
.ground--deep {
  --on-ground: var(--clary-forest-deep);
  --on-text: var(--clary-white);
  --on-muted: var(--clary-on-brand-muted);
  --on-label: var(--clary-coral-light);
  --on-accent: var(--clary-lime);
  --on-line: var(--clary-line-on-brand);
  --on-panel: var(--clary-forest);
  --on-ring: var(--clary-lime);
}
.ground--sage {
  --on-ground: var(--clary-sage);
  --on-text: var(--clary-forest);
  --on-muted: var(--clary-forest);
  --on-label: var(--clary-forest);
  --on-accent: var(--clary-forest);
  --on-line: rgba(33, 66, 60, 0.25);
  --on-panel: var(--clary-sage-100);
  --on-ring: var(--clary-forest);
}
.ground--lime {
  --on-ground: var(--clary-lime);
  --on-text: var(--clary-forest);
  --on-muted: var(--clary-forest);
  --on-label: var(--clary-forest);
  --on-accent: var(--clary-forest);
  --on-line: rgba(33, 66, 60, 0.3);
  --on-panel: var(--clary-lime);
  --on-ring: var(--clary-forest);
}
.ground--paper {
  --on-ground: var(--clary-sage-50);
}
.ground--sage-light {
  --on-ground: var(--clary-sage-100);
  --on-text: var(--clary-forest);
  --on-muted: var(--clary-forest-80);
  --on-label: var(--clary-coral-ink);
  --on-accent: var(--clary-forest);
  --on-line: rgba(33, 66, 60, 0.2);
  --on-panel: var(--clary-white);
  --on-ring: var(--clary-forest);
}
.ground--forest,
.ground--deep,
.ground--sage,
.ground--sage-light,
.ground--lime,
.ground--paper {
  background: var(--on-ground);
  color: var(--on-text);
}