/* ============================================================
   Die Lehrakte — Basis (Reset, Typografie, Dokumentstruktur)
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--la-papier);
  color: var(--la-tinte);
  font-family: var(--la-font-text);
  font-size: var(--la-fs-base);
  line-height: var(--la-lh-text);
  -webkit-font-smoothing: antialiased;
  /* feine Linierung als Papier-Textur, sehr zurückhaltend */
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 1px),
    rgb(34 48 46 / 0.025) calc(100% - 1px)
  );
  background-size: 100% 2rem;
}

h1, h2, h3, h4 {
  font-family: var(--la-font-display);
  font-weight: 560;
  line-height: var(--la-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--la-space-3);
  text-wrap: balance;
}

h1 { font-size: var(--la-fs-hero); }
h2 { font-size: var(--la-fs-xl); }
h3 { font-size: var(--la-fs-l); }
h4 { font-size: var(--la-fs-m); }

p { margin: 0 0 var(--la-space-3); max-width: var(--la-mass); }

a {
  color: var(--la-petrol);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--la-dauer) var(--la-ease);
}
a:hover { color: var(--la-petrol-tief); }

ul, ol { padding-left: 1.2em; max-width: var(--la-mass); }

img { max-width: 100%; display: block; }

hr {
  border: 0;
  border-top: var(--la-border);
  margin: var(--la-space-5) 0;
}

::selection { background: var(--la-ocker-hell); }

:focus-visible {
  outline: 2px solid var(--la-petrol);
  outline-offset: 3px;
  border-radius: var(--la-radius-s);
}

/* ---- Layout-Grundmuster ---- */

.la-content {
  max-width: var(--la-content);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.la-abschnitt { padding-block: var(--la-space-7); }
.la-abschnitt--knapp { padding-block: var(--la-space-6); }

/* ---- Akten-Metadaten: die Kennzeile ----
   Das wiederkehrende dokumentarische Element der Marke:
   VERSALIEN · MONO · gesperrter Lauf, immer über Abschnitten. */
.la-kennzeile {
  font-family: var(--la-font-akte);
  font-size: var(--la-fs-xs);
  letter-spacing: var(--la-tracking-akte);
  text-transform: uppercase;
  color: var(--la-tinte-soft);
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  margin-bottom: var(--la-space-3);
}
.la-kennzeile::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--la-ocker);
}
.la-kennzeile strong { color: var(--la-ocker); font-weight: 500; }

/* ---- Einblendung beim Laden (dezent, gestaffelt) ---- */
@media (prefers-reduced-motion: no-preference) {
  .la-auftritt {
    animation: la-auftritt 0.7s var(--la-ease) both;
    animation-delay: calc(var(--la-stagger, 0) * 90ms);
  }
  @keyframes la-auftritt {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}