/* =============================================================
   Basis — Elementvorgaben und Textrollen

   Alle Textrollen sind hier gebündelt. Komponenten setzen keine
   Schriftgrößen selbst, sondern verwenden diese Klassen.
   ============================================================= */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
}

/* --- Schriftfamilien ----------------------------------------
   Soyuz Grotesk tragen Wortmarke, Rubriken, Buttons und der
   „nach oben"-Link. Einmal gesetzt statt viermal wiederholt.
   ------------------------------------------------------------ */

.type-brand,
.wordmark,
.section-heading,
.button,
.to-top {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
}

/* --- Überschriften ------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--text-h2);
  color: var(--color-heading);
}

/* h3 und h4 sehen gleich aus — die Ebene ergibt sich aus der
   Verschachtelung, nicht aus der Groesse. Im Entwurf tragen beide
   denselben Stil wie h2 (Body/H2 Desktop, 30/34 Bold): die
   Kartentexte der Startseite (49:2165) ebenso wie die Ueberschriften
   der Behandlungsbloecke (49:2262). Nur die Farbe unterscheidet sie,
   siehe .duo__text in layout.css. Die Zeilenhoehe kommt aus der
   Sammelregel oben. */
h3,
h4 {
  font-size: var(--text-h2);
  color: var(--color-accent);
}

/* Überschrift in h2-Optik, unabhängig von der Ebene — für Seiten,
   deren h1 optisch als Abschnittsüberschrift auftritt (12.1). */
.title-md {
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  color: var(--color-heading);
}

/* Rubrik über einem Abschnitt — im Figma als Pfade gezeichnet
   („mein ansatz" 49:2110, „der ablauf" 49:2152). Dort stehen die
   Buchstaben zusaetzlich auseinander: gemessen 0,0402 em bei
   „mein ansatz" und 0,0316 em bei „der ablauf". Die Vektoren wurden
   von Hand nachgerueckt, ein einzelner Wert trifft nur die Mitte. */
.section-heading {
  font-size: var(--text-section);
  line-height: 1;
  letter-spacing: 0.036em;
  color: var(--color-accent);
  text-transform: lowercase;
}

/* Wortmarke „Sophie Leisch" 49:636 — Figma-Stil Footer/Footer Desktop SL */
.wordmark {
  font-size: var(--text-brand);
  line-height: var(--leading-brand);
  color: var(--color-accent);
}

/* --- Textrollen ---------------------------------------------
   Namensschema: .text-<rolle>. Größe und Zeilenhöhe kommen
   immer aus einem Tokenpaar.
   ------------------------------------------------------------ */

/* Großes kursives Zitat, 49:2148 — Figma-Stil Body/Füller Text Desktop */
.text-quote {
  max-width: 45ch;
  margin-inline: auto;
  font-size: var(--text-quote);
  line-height: var(--leading-quote);
  letter-spacing: var(--tracking-quote);
  color: var(--color-heading);
  text-align: center;
  text-wrap: balance;
}

/* Hinweistext, z. B. Pflichtfeldhinweis 49:1678. Kein eigener
   Figma-Textstil — als Lesetext gesetzt. */
.text-small {
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

/* Spaltenlabel im Footer 49:628 — Figma-Stil Footer/Footer Subtitels */
.text-micro {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  line-height: var(--leading-micro);
}

.text-quote,
.text-small,
.field__label {
  font-style: italic;
}

/* --- Fließtext ---------------------------------------------- */

p {
  line-height: var(--leading-body);
}

/* Der Reset nullt alle Margins — Folgeabstände hier explizit. */
p + p {
  margin-top: 1lh;
}

:is(h1, h2, h3, h4) + * {
  margin-top: var(--space-m);
}

:is(ul, ol):not([role="list"]) {
  padding-inline-start: 1.2em;
}

* + :is(ul, ol) {
  margin-top: var(--space-2xs);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease);
}

/* Links im Fliesstext: im Entwurf fett und im dunkleren Korallton
   (Impressum 70:45, Datenschutz 184:656). Bewusst auf Absaetze und
   Listenpunkte innerhalb von main begrenzt — Navigation und Footer
   erben ihre Farbe vom Umfeld, der Terminbutton bringt seine mit. */
main :is(p, li) a:not(.button) {
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

a:hover {
  opacity: 0.7;
}

strong,
b {
  font-weight: var(--weight-bold);
}

/* --- Hilfsklassen ------------------------------------------- */

.measure {
  max-width: var(--layout-measure);
}

/* Bild füllt seinen Rahmen — Hero, Karten, Feature. */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* Sprungmarke: unsichtbar, bis sie den Fokus bekommt. */
.skip-link {
  position: absolute;
  z-index: 200;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-button);
  background-color: var(--color-urbangrau);
  color: var(--color-steingrau);
  font-size: var(--text-small);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease);
}

.skip-link:focus {
  transform: none;
  opacity: 1;
}