/* ── KOMOS Base ──────────────────────────────────────────────────────────
   Reset, Typografie-Grundraster, Layout-Primitive.
   Setzt ausschließlich Werte aus tokens.css. Keine Einzelfallfarben,
   keine Einzelfallgrößen.
   ──────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  /* Silbentrennung bewusst aus. wp-typography setzt im Live-System weiche
     Trennzeichen, wodurch in schmalen Spalten "Elektro-nik" oder
     "Lie-fertermine" entstehen. */
  hyphens: manual;
  /* Lange Komposita ("Werkzeugmechaniker/in", "Komplexitätskosten-Rechner")
     dürfen im Notfall umbrechen, damit auf schmalen Geräten nichts über den
     Rand läuft. Greift nur, wenn ein Wort sonst nicht passt. */
  overflow-wrap: break-word;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg);  line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
h4 { font-size: var(--fs-md);  line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
h5, h6 { font-size: var(--fs-sm); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }

/* Überschriften trennen nach deutschen Regeln, sobald ein Wort sonst nicht
   passt. Das ist dem harten Umbruch mitten im Wort vorzuziehen: aus
   "Komplexitätskoste / nrechner" wird "Komplexitäts- / kostenrechner".
   Vorher galt das nur bis 700 px Fensterbreite; die Abfrage misst aber das
   Fenster, nicht die Spalte, und in einer schmalen Spalte auf einem breiten
   Schirm griff sie deshalb nie. Im Fließtext bleibt die Trennung aus, dort
   erzeugte sie im Live-System die zerrissenen Spalten. */
h1, h2, h3, h4 { hyphens: auto; }

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 var(--sp-4); }
:is(p, ul, ol, dl, blockquote, table, figure, h1, h2, h3, h4):last-child { margin-bottom: 0; }

a {
  color: var(--c-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-blue-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: var(--fw-bold); }
em, i { font-style: italic; }
small { font-size: var(--fs-xs); }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--sp-2); }

/* Zitate bringen ihre eigene Fläche mit und setzen deshalb auch ihre
   eigene Textfarbe. Sonst erben sie in dunklen Sektionen weiße Schrift
   und stehen weiß auf hellgrau. */
blockquote {
  margin-inline: 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-gold);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
blockquote :is(p, cite, span, strong, em) { color: inherit; }
blockquote p { margin-bottom: var(--sp-3); }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-border); }
th { font-weight: var(--fw-semibold); background: var(--c-surface); }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-7) 0; }

::selection { background: var(--c-gold-soft); color: var(--c-text); }

/* ── Layout-Primitive ──────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* Ein einziger vertikaler Sektionsrhythmus statt 35 Einzelwerten. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

/* Flächenwechsel. Zwei gleiche Flächen hintereinander verschmelzen zu einer,
   damit kein doppelter Abstand entsteht. */
.section--surface { background: var(--c-surface); }
.section--dark    { background: var(--c-navy); color: var(--c-text-on-dark); }
.section--darker  { background: var(--c-navy-deep); color: var(--c-text-on-dark); }

.section--surface + .section--surface,
.section--dark + .section--dark,
.section--darker + .section--darker { padding-top: 0; }

.section--dark :is(h1,h2,h3,h4,h5,h6),
.section--darker :is(h1,h2,h3,h4,h5,h6) { color: var(--c-text-on-dark); }
.section--dark a:not(.btn),
.section--darker a:not(.btn) { color: var(--c-gold); }
.section--dark a:not(.btn):hover,
.section--darker a:not(.btn):hover { color: var(--c-gold-soft); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Raster richten sich nach dem Platz, den sie tatsächlich haben, nicht
   nach der Fensterbreite. Sonst erzwingt ein zweispaltiges Raster auch in
   einer 244 px schmalen Spalte noch zwei Spalten — dann bricht der Text
   Buchstabe für Buchstabe um. */
/* Die Kopfzeile ist bewusst ausgenommen: container-type entzieht einer
   Flex-Leiste die Breitenberechnung nach Inhalt, dadurch würden Logo,
   Navigation und Knopf übereinanderliegen. */
.container, .cols__col, .split__text, .card__body, .job-body, .section-head {
  container-type: inline-size;
}
/* Die Kopfzeile bleibt ausgenommen. container-type entzieht einer
   Flex-Leiste die Breitenberechnung nach Inhalt — Logo, Navigation und
   Knopf würden übereinanderliegen. */
.site-header .container { container-type: normal; }

.grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.grid > * { min-width: 0; }
/* Karten folgen ihrer eigenen Höhe statt der höchsten in der Reihe. */
.grid--top { align-items: start; }

@container (min-width: 34rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 52rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 64rem) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Rückfallebene für Browser ohne Container-Queries */
@supports not (container-type: inline-size) {
  @media (min-width: 860px) {
    .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1080px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose :is(h2, h3, h4) { margin-top: var(--sp-7); }
.prose > :first-child { margin-top: 0; }

.text-muted { color: var(--c-text-muted); }
/* Auf dunklem Grund steht jeder Text weiss; der gedaempfte Ton liess
   Flaechen fleckig wirken. */
.section--dark .text-muted,
.section--darker .text-muted { color: var(--c-text-on-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  z-index: 200; transform: translateY(-200%);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-navy); color: var(--c-white);
  border-radius: var(--r-md); font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--c-white); }