/* === Systemweite Schriftgestaltung (Osmium) ===
 *
 * Globale Type-Utilities, Skalendefinitionen und Inhaltstypografie.
 * Komponentenspezifische Typografie bleibt in den jeweiligen Komponenten-CSS.
 */

:root {
  --osmium-font-display: "Anton", sans-serif;
  --osmium-font-body:    "Public Sans", sans-serif;
  --osmium-font-mono:    "ibm-plex-mono", monospace;
}

/* Globales Font-Rendering */
* {
  -webkit-font-smoothing: antialiased;
}

/* ---- Utility-Klassen ---- */

/* Anton – Display-Schrift für Headlines */
.osmium-display-font {
  font-family: var(--osmium-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* IBM Plex Mono – für Labels, Daten, Metaangaben */
.osmium-mono {
  font-family: var(--osmium-font-mono);
}

/* ---- Typografische Skalenreferenzen ---- */

/* Sektionsüberschrift: systemweite Größenreferenz */
.osmium-section-title {
  font-family: var(--osmium-font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1;
  margin: 0.6rem 0 1rem;
  text-transform: uppercase;
}

/* Eyebrow-Label: Mono, Großbuchstaben, Messing-Strich */
.osmium-eyebrow {
  align-items: center;
  color: var(--osmium-kastanie);
  display: inline-flex;
  font-family: var(--osmium-font-mono);
  font-size: 0.72rem;
  gap: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.osmium-eyebrow::before {
  background: var(--osmium-messing);
  content: "";
  display: inline-block;
  height: 2px;
  width: 2rem;
}

/* ---- Seitenheader-Typografie (Unterseiten) ---- */

.osmium-page-header__title {
  font-family: var(--osmium-font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  margin: 0.6rem 0 0;
  text-transform: uppercase;
}

.osmium-page-header__breadcrumb {
  color: rgba(239, 230, 214, 0.6);
  font-family: var(--osmium-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  margin-top: 1.2rem;
  text-transform: uppercase;
}

.osmium-page-header__breadcrumb a {
  color: rgba(239, 230, 214, 0.8);
  text-decoration: none;
}

.osmium-page-header__breadcrumb a:hover {
  color: var(--osmium-messing-hell);
}

.osmium-page-header__breadcrumb-sep {
  color: var(--osmium-messing);
  margin: 0 0.5rem;
}

/* ---- Fließtext (osmium-page-content) ---- */

.osmium-page-content h2,
.osmium-page-content h3,
.osmium-page-content h4,
.osmium-page-content h5,
.osmium-page-content h6 {
  color: var(--osmium-gruen);
}

.osmium-page-content h2 {
  font-family: var(--osmium-font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  margin: 2.5rem 0 1rem;
  text-transform: uppercase;
}

.osmium-page-content h2:first-child {
  margin-top: 0;
}

.osmium-page-content p {
  color: rgba(19, 32, 26, 0.8);
  line-height: 1.65;
}

.osmium-page-content ul li {
  color: rgba(19, 32, 26, 0.8);
  padding: 0.3rem 0;
}

.osmium-page-content ul li::marker {
  color: var(--osmium-messing);
}