/* ==========================================================================
   Basis: Reset, Schrift, Grundtypografie, Zugaenglichkeit
   ========================================================================== */

/* Der Bereich beginnt bei 300, nicht bei 400: das CD-Manual (S. 6) laesst als
   Fliesstext ausschliesslich Inter Light zu. Mit einer engeren Deklaration
   clampt der Browser jede Anfrage unter 400 stillschweigend hoch — die
   Schriftdatei selbst kann Light, die Deklaration verhinderte es.           */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("../assets/fonts/archivo-expanded-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-stretch: 125%;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cd-weiss);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 300;                        /* CD S. 6: Fliesstext = Light    */
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Ziffern auf feste Breite: Telefonnummern und Kennzahlen zappeln sonst
     zwischen den Zeilen. Haengende Interpunktion zieht Anfuehrungszeichen
     und Bindestriche an den Zeilenanfang optisch buendig (Safari).         */
  font-variant-numeric: tabular-nums lining-nums;
  hanging-punctuation: first last;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* h1/h2 laufen in Archivo Expanded — das ist die eine zusaetzliche Schriftart,
   die das CD frei waehlbar zulaesst, ohne einen Schnitt vorzuschreiben.
   h3/h4 laufen in Inter und muessen deshalb Bold sein (700), nicht 800.    */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.06;
  text-wrap: balance;
}
h1, h2 { font-weight: 800; }
h1, .display {
  font-family: var(--font-display);
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h3 { font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.18; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }

/* Deutsche Fachkomposita sprengen auf schmalen Viewports jede Box: gemessen
   misst „Rohrleitungsbau" bei 40px Schrift 522px, der Satzspiegel gibt auf
   einem 375er-Gerät aber nur 335px her — der Text lief rechts aus dem Bild,
   ohne dass die Box selbst ueberlief (ein reiner Container-Test findet das
   nicht). Silbentrennung loest es, ohne die Schrift zu verkleinern: dasselbe
   Wort braucht getrennt 316px. Sie greift nur, wenn es eng wird; auf breiten
   Viewports bleibt die Zeile ungetrennt. overflow-wrap ist das Sicherheits-
   netz fuer Browser ohne deutsche Trennmuster. Voraussetzung ist lang="de"
   am html-Element — das ist gesetzt.                                        */
h1, h2, h3 {
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Erst ab acht Zeichen trennen, und nie weniger als vier Zeichen stehen
     lassen: sonst wandert bei „Unbefristet" ein Rest von drei Buchstaben in
     die naechste Zeile. Browser ohne Unterstuetzung trennen wie bisher.     */
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

p { margin: 0 0 var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 36ch;
}

a { color: inherit; }
a:not([class]) {
  color: var(--cd-blau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:not([class]):hover { text-decoration-thickness: 2px; }

/* Auf dunklen Flaechen erreicht das CD-Blau nur 3,2:1 und faellt damit unter
   AA. Dort greift die aufgehellte Abstufung (7,5:1). */
.sektion--dunkel a:not([class]),
.seitenkopf a:not([class]),
.hero a:not([class]) { color: var(--blau-hell); }
.sektion--blau a:not([class]) { color: var(--cd-weiss); }

/* Telefon- und Mail-Links sind auf dem Handy echte Ziele, keine Fliesstext-
   Verweise: sie bekommen eine greifbare Hoehe. */
a[href^="tel:"], a[href^="mailto:"], a[data-mail] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Im Fliesstext bleibt der Link ein Link: die Mindesthoehe wuerde dort die
   Zeilenbox mitten im Absatz auf 44px aufblasen. */
p a[href^="tel:"], p a[href^="mailto:"], p a[data-mail],
li a[href^="tel:"], li a[href^="mailto:"], li a[data-mail] {
  display: inline;
  min-height: 0;
}

ul, ol { margin: 0 0 var(--s-3); padding-left: 1.15em; }
li { margin-bottom: var(--s-1); }
li::marker { color: var(--cd-blau); }

strong, b { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--cd-grau) 40%, transparent);
  margin: var(--s-6) 0;
}

/* --- Fokus: sichtbar, kontraststark, nie wegoptimiert --------------------- */
:focus-visible {
  outline: 3px solid var(--cd-blau);
  outline-offset: 3px;
  border-radius: 1px;
}
.sektion--dunkel :focus-visible,
.sektion--blau :focus-visible { outline-color: var(--blau-hell); }

/* --- Skip-Link ----------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--s-3);
  top: -100%;
  z-index: var(--z-modal);
  background: var(--cd-blau);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
  transition: top var(--dauer-kurz) var(--ease-aus);
}
.skip:focus { top: var(--s-3); }

/* --- Nur fuer Screenreader ----------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Layout-Grundbausteine ----------------------------------------------- */
.mass {
  width: min(100% - var(--rand) * 2, var(--mass));
  margin-inline: auto;
}
.mass--schmal { width: min(100% - var(--rand) * 2, var(--mass-schmal)); margin-inline: auto; }

.sektion { padding-block: var(--sektion); }
.sektion--weit { padding-block: var(--sektion-weit); }
.sektion--eng  { padding-block: var(--sektion-eng); }

/* Eine Ueberschrift von 57px braucht mehr als 16px Abstand zum Folgetext,
   sonst klebt sie daran.                                                   */
h2 + p, h2 + .lead { margin-top: var(--s-4); }
.sektion--dunkel {
  background: var(--grund);
  color: var(--auf-dunkel);
}
.sektion--dunkel h1, .sektion--dunkel h2, .sektion--dunkel h3 { color: var(--cd-weiss); }
.sektion--dunkel .lead { color: color-mix(in oklab, var(--cd-weiss) 92%, var(--grund)); }
.sektion--flaeche { background: var(--flaeche); }
.sektion--blau { background: var(--cd-blau); color: var(--cd-weiss); }
.sektion--blau h2, .sektion--blau h3 { color: var(--cd-weiss); }
.sektion--blau .lead { color: color-mix(in oklab, var(--cd-weiss) 86%, var(--cd-blau)); }

/* --- Print: die Kontaktseite wird ausgedruckt und ans Brett gehaengt ------ */
@media print {
  .kopf, .balken, .bogen-flaeche, video { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  a[href^="#"]::after, a[href^="mailto"]::after { content: ""; }
  .sektion { padding-block: 1rem; }
}