/* Gemeinsame Gestaltungswerte für Partnerseiten und Förderkompass.
   Schriftdateien: /foerderkompass/schriften.css (lokal, SIL OFL).
   rem-basierte Grenzen erhalten die individuelle Schriftgrößeneinstellung. */
:root {
  --layout-max: 100rem;
  --layout-gutter: clamp(1rem, 3vw, 4rem);
  --layout-gap: clamp(1rem, 1rem + 0.5vw, 2rem);
  --layout-section: clamp(3rem, 2.25rem + 3vw, 6rem);
  --layout-reading: 72ch;

  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --type-meta: 0.875rem;
  --type-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --type-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --type-heading-sm: clamp(1.25rem, 1.16rem + 0.4vw, 1.625rem);
  --type-heading-md: clamp(1.625rem, 1.4rem + 1vw, 2.5rem);
  --type-heading-lg: clamp(2rem, 1.65rem + 1.6vw, 3.5rem);
  --type-display: clamp(2.5rem, 2rem + 2.3vw, 5rem);
  --leading-body: 1.6;
  --leading-heading: 1.15;

  --brand-red: #e30613;
  --brand-red-strong: #b8050f;
  --brand-slate: #384150;
  --brand-gray: #dcdcdc;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --radius-control: 0.125rem;
  --radius-panel: 0.25rem;
  --target-min: 2.75rem;
}

.khit-arrow { display: inline-block; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; vertical-align: -.25em; }
.khit-arrow--down { transform: rotate(90deg); }
.khit-arrow--left { transform: rotate(180deg); }
.khit-arrow--up-right { transform: rotate(-45deg); }