/* ===========================================================================
   kbs | Die Akademie für Gesundheitsberufe am St. Kamillus
   Design-Tokens, übernommen aus dem Design-System "kbs Akademie".

   Die drei Regeln, die das Erscheinungsbild tragen:
   1. Gelb ist eine Fläche, keine Schriftfarbe. Text auf Gelb ist #2C2E35.
   2. Alle Ecken sind eckig. border-radius: 0 — Kreise nur für Punkte.
   3. Sprache: Deutsch, formal mit "Sie", keine Emoji.
   =========================================================================== */

/* ---- Farben --------------------------------------------------------------- */
:root {
  --kbs-yellow: #ffd900;
  --kbs-yellow-deep: #fdd100;
  --kbs-yellow-soft: #f9de4b;
  --kbs-yellow-tint: #fff6cc;
  --kbs-yellow-tint-strong: #ffedaa;

  --kbs-ink: #2c2e35;
  --kbs-grey-800: #4d4d4d;
  --kbs-grey-700: #555555;
  --kbs-grey-600: #707176;
  --kbs-grey-500: #828282;
  --kbs-grey-400: #b4b5b8;
  --kbs-grey-300: #dddddd;
  --kbs-grey-200: #e8e8e8;
  --kbs-grey-100: #f4f4f2;
  --kbs-white: #ffffff;

  --surface-page: var(--kbs-white);
  --surface-subtle: var(--kbs-grey-100);
  --surface-card: var(--kbs-white);
  --surface-brand: var(--kbs-yellow);
  --surface-brand-soft: var(--kbs-yellow-tint);
  --surface-ink: var(--kbs-ink);

  --text-heading: var(--kbs-grey-700);
  --text-body: var(--kbs-grey-700);
  --text-strong: var(--kbs-grey-800);
  --text-muted: var(--kbs-grey-500);
  --text-inverse: var(--kbs-white);
  --text-on-brand: var(--kbs-ink);
  --text-link: var(--kbs-grey-700);
  --text-link-hover: var(--kbs-ink);

  --border-hairline: var(--kbs-grey-300);
  --border-strong: var(--kbs-grey-400);
  --rule-brand: var(--kbs-yellow-soft);
  --rule-brand-strong: var(--kbs-yellow);
  --focus-ring: var(--kbs-grey-800);

  --action-primary-bg: var(--kbs-yellow);
  --action-primary-bg-hover: var(--kbs-yellow-deep);
  --action-primary-bg-active: #e8c400;
  --action-primary-text: var(--kbs-ink);
  --action-secondary-border: var(--kbs-grey-400);
  --action-secondary-text: var(--kbs-grey-700);
  --action-secondary-bg-hover: var(--kbs-grey-100);
  --action-disabled-bg: var(--kbs-grey-200);
  --action-disabled-text: var(--kbs-grey-400);

  /* Statusfarben gibt es in der Marke nicht. Diese hier sind eine bewusste,
     dokumentierte Ergänzung für Formularrückmeldungen — bewusst gedeckt. */
  --status-ok: #2f6b3f;
  --status-ok-bg: #eef5ef;
  --status-warn: #8a5a00;
  --status-warn-bg: var(--kbs-yellow-tint);
  --status-err: #9a2b2b;
  --status-err-bg: #f9eeee;
}

/* ---- Schrift -------------------------------------------------------------- */
:root {
  --font-sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Barlow", "DIN 2014", "DIN Next", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
  --fw-din-light: 300;
  --fw-din-regular: 400;
  --fw-din-demi: 600;
  --fw-din-bold: 700;
  --fw-din-extrabold: 800;

  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-md: 19px;
  --text-lg: 22px;
  --text-xl: 27px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 58px;

  --leading-tight: 1.1;
  --leading-snug: 1.22;
  --leading-normal: 1.35;
  --leading-relaxed: 1.55;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.09em;
  --tracking-caps-wide: 0.14em;

  --type-campaign: var(--fw-din-extrabold) var(--text-4xl) / var(--leading-tight) var(--font-display);
  --type-display: var(--fw-light) var(--text-3xl) / var(--leading-snug) var(--font-sans);
  --type-h1: var(--fw-light) var(--text-2xl) / var(--leading-snug) var(--font-sans);
  --type-h2: var(--fw-light) var(--text-xl) / var(--leading-snug) var(--font-sans);
  --type-h3: var(--fw-regular) var(--text-lg) / var(--leading-snug) var(--font-sans);
  --type-body: var(--fw-regular) var(--text-base) / var(--leading-relaxed) var(--font-sans);
  --type-body-sm: var(--fw-regular) var(--text-sm) / var(--leading-relaxed) var(--font-sans);
  --type-nav: var(--fw-bold) var(--text-2xs) / 1.2 var(--font-sans);
  --type-label: var(--fw-din-demi) var(--text-xs) / 1.2 var(--font-display);
  --type-caption: var(--fw-regular) var(--text-3xs) / 1.4 var(--font-sans);
}

/* ---- Abstände ------------------------------------------------------------- */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 104px;

  --container-max: 1230px;
  --container-narrow: 820px;
  --gutter: var(--space-7);
  --section-y: var(--space-11);
  --section-y-tight: var(--space-9);
  --card-pad: var(--space-7);
  --card-pad-tight: var(--space-5);
}

/* ---- Form ----------------------------------------------------------------- */
:root {
  --radius-none: 0;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --rule-height: 6px;
  --rule-height-thin: 3px;
  --border-card: var(--border-width) solid var(--border-hairline);
  --shadow-none: none;
  --shadow-menu: 0 2px 10px rgba(44, 46, 53, 0.12);
  --shadow-dialog: 0 8px 40px rgba(44, 46, 53, 0.18);
}

/* ---- Bewegung ------------------------------------------------------------- */
:root {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 600ms;
  --transition-hover: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ---- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-heading);
  font-weight: var(--fw-light);
  line-height: var(--leading-snug);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: var(--fw-regular); }
h4 { font-size: var(--text-md); font-weight: var(--fw-regular); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }

a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-brand);
  transition: var(--transition-hover);
}
a:hover { color: var(--text-link-hover); border-bottom-color: var(--rule-brand-strong); }
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

hr { height: var(--rule-height); border: 0; background: var(--rule-brand); margin: var(--space-8) 0; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }