/* ============================================================
   TYPOGRAPHY
   Absatzformate fuer redaktionelle Inhalte und optionale
   Utility-Klassen fuer manuelle Layout-Kontexte.

   Architekturprinzip: Locality of Behavior
   Jedes Absatzformat definiert seine semantischen Tokens
   und responsiven Breakpoints direkt bei sich – nicht in
   einem zentralen Block. Wer ein Format anpasst, findet
   alles an einer Stelle: Token, Regel und Breakpoint.

   Token-Hierarchie:
   Zwei Ebenen – Primitive benennen Rohwerte, semantische
   Tokens benennen Bedeutung:
   --font-size-7           (Primitiv)
   --font-size-headline-1  (Semantisch)

   Struktur pro Absatzformat:
   1. :root-Block mit semantischen Tokens (Desktop-Werte)
   2. Selektorregel(n) – vollstaendig fuer Desktop
   3. @media-Bloecke am Ende, ein Block pro Breakpoint –
      :root-Overrides und Selektor-Anpassungen nebeneinander.
      Breakpoint weglassen wenn sich dort nichts aendert.
      Formate ohne responsive Varianten: Hinweis als Kommentar.

   Reihenfolge:
   Die Absatzformate stehen in der Reihenfolge, in der sie
   in einem Artikel oder Editorial-Template vorkommen.

   Technische Randbedingung:
   CSS kann Custom Properties nicht in @media-Bedingungen
   verwenden – Breakpoint-Werte bleiben deshalb als Literale:
   tablet: 980px  |  mobile: 660px
   ============================================================ */

/* ============================================================
   Absatzformat: Eyebrow
   Kleine redaktionelle Vorzeile, z.B. Kategorie, Format oder Datum.
   Structural-Automatik liegt in page-type-*.css.
   Utility: .text-eyebrow.
   ============================================================ */

:root {
  --font-size-eyebrow:      var(--font-size-1);
  --line-height-eyebrow:    var(--line-height-1);
  --letter-spacing-eyebrow: 0.08em;
  --font-weight-eyebrow:    var(--font-weight-bold);
  --text-transform-eyebrow: uppercase;
  --color-eyebrow:          var(--color-muted);
  --margin-bottom-eyebrow:  var(--space-3);
}

.text-eyebrow {
  margin: 0 0 var(--margin-bottom-eyebrow);
  color: var(--color-eyebrow);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-eyebrow);
  line-height: var(--line-height-eyebrow);
  text-transform: var(--text-transform-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  font-variant-ligatures: no-common-ligatures no-contextual;
  font-feature-settings: "case" 1, "kern" 1;
}

/* Keine responsiven Varianten */

/* ============================================================
   Absatzformat: Headline 1
   Hauptueberschrift eines Artikels oder einer Seite.
   Markdown/HTML: h1. Utility: .text-headline-1.
   ============================================================ */

:root {
  --font-size-headline-1:      var(--font-size-13);
  --line-height-headline-1:    var(--line-height-9);
  --font-weight-headline-1:    var(--font-weight-bold);
  --letter-spacing-headline-1: -0.01em;
  --color-headline-1:          var(--color-ink);
  --margin-bottom-headline-1:  var(--space-3);
}

h1,
.text-headline-1 {
  margin: 0 0 var(--margin-bottom-headline-1);
  color: var(--color-headline-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-headline-1);
  line-height: var(--line-height-headline-1);
  letter-spacing: var(--letter-spacing-headline-1);
  text-wrap: balance;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "ss01" 1;
}

@media (max-width: 980px) {
  :root {
    --font-size-headline-1:   var(--font-size-12);
    --line-height-headline-1: var(--line-height-8);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-headline-1:   var(--font-size-11);
    --line-height-headline-1: var(--line-height-7);
  }
}

/* ============================================================
   Absatzformat: Lead
   Einfuehrender Absatz nach Headline 1.
   Structural-Automatik liegt in page-type-*.css.
   Utility: .text-lead.
   ============================================================ */

:root {
  --font-size-lead:      var(--font-size-7);
  --line-height-lead:    var(--line-height-5);
  --color-lead:          var(--color-ink);
  --margin-bottom-lead:  var(--space-4);
}

.text-lead {
  margin-bottom: var(--margin-bottom-lead);
  color: var(--color-lead);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

@media (max-width: 980px) {
  :root {
    --font-size-lead: var(--font-size-6);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-lead: var(--font-size-5);
  }
}

/* ============================================================
   Absatzformat: Address (Autorenzeile)
   Nebeninfos unter dem Lead: Autor, Datum, Quelle.
   Markdown/HTML: address.
   ============================================================ */

:root {
  --font-size-address:     var(--font-size-2);
  --line-height-address:   var(--line-height-3);
  --color-address:         var(--color-muted);
  --font-style-address:    normal;
  --margin-bottom-address: var(--space-6);
}

address {
  margin-bottom: var(--margin-bottom-address);
  color: var(--color-address);
  font-size: var(--font-size-address);
  font-style: var(--font-style-address);
  line-height: var(--line-height-address);
}

/* Keine responsiven Varianten */

/* ============================================================
   Absatzformat: Headline 2
   Abschnittsueberschrift im Artikel.
   Markdown/HTML: h2. Utility: .text-headline-2.
   ============================================================ */

:root {
  --font-size-headline-2:      var(--font-size-11);
  --line-height-headline-2:    var(--line-height-7);
  --font-weight-headline-2:    var(--font-weight-bold);
  --letter-spacing-headline-2: -0.005em;
  --color-headline-2:          var(--color-ink);
  --margin-top-headline-2:     var(--space-9);
  --margin-bottom-headline-2:  var(--space-3);
}

h2,
.text-headline-2 {
  margin: var(--margin-top-headline-2) 0 var(--margin-bottom-headline-2);
  color: var(--color-headline-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-headline-2);
  font-weight: var(--font-weight-headline-2);
  line-height: var(--line-height-headline-2);
  letter-spacing: var(--letter-spacing-headline-2);
  text-wrap: balance;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "ss01" 1;
}

@media (max-width: 980px) {
  :root {
    --font-size-headline-2:   var(--font-size-10);
    --line-height-headline-2: var(--line-height-5);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-headline-2: var(--font-size-9);
  }
}

/* ============================================================
   Absatzformat: Headline 3
   Untergeordnete Abschnittsueberschrift im Artikel.
   Markdown/HTML: h3. Utility: .text-headline-3.
   ============================================================ */

:root {
  --font-size-headline-3:      var(--font-size-8);
  --line-height-headline-3:    var(--line-height-5);
  --font-weight-headline-3:    var(--font-weight-bold);
  --letter-spacing-headline-3: 0;
  --color-headline-3:          var(--color-ink);
  --margin-top-headline-3:     var(--space-6);
  --margin-bottom-headline-3:  var(--space-2);
}

h3,
.text-headline-3 {
  margin: var(--margin-top-headline-3) 0 var(--margin-bottom-headline-3);
  color: var(--color-headline-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-headline-3);
  font-weight: var(--font-weight-headline-3);
  line-height: var(--line-height-headline-3);
  letter-spacing: var(--letter-spacing-headline-3);
  text-wrap: balance;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "ss01" 1;
}

@media (max-width: 980px) {
  :root {
    --font-size-headline-3: var(--font-size-7);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-headline-3:   var(--font-size-6);
    --line-height-headline-3: var(--line-height-3);
  }
}

/* ============================================================
   Absatzformat: Body
   Normaler Lesetext.
   Markdown/HTML: p.
   ============================================================ */

:root {
  --font-size-body:   var(--font-size-5);
  --line-height-body: var(--line-height-4);
}

p {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

@media (max-width: 660px) {
  :root {
    --font-size-body:   var(--font-size-3);
    --line-height-body: var(--line-height-3);
  }
}

/* ============================================================
   Absatzformat: List
   Redaktionelle Listen im Fliesstext.
   Markdown/HTML: ul, ol, li.
   ============================================================ */

:root {
  --font-size-list:   var(--font-size-5);
  --line-height-list: var(--line-height-4);
}

ul,
ol {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.35rem;
}

li {
  font-size: var(--font-size-list);
  line-height: var(--line-height-list);
}

li + li {
  margin-top: var(--space-1);
}

@media (max-width: 660px) {
  :root {
    --font-size-list:   var(--font-size-3);
    --line-height-list: var(--line-height-3);
  }
}

/* ============================================================
   Absatzformat: Blockquote
   Ruhiges Zitat im Fliesstext.
   Markdown/HTML: blockquote.
   ============================================================ */

:root {
  --font-size-blockquote:      var(--font-size-6);
  --line-height-blockquote:    var(--line-height-5);
  --font-weight-blockquote:    var(--font-weight-regular);
  --letter-spacing-blockquote: 0;
  --padding-left-blockquote:   var(--space-3);
  --color-blockquote:          var(--color-muted);
  --margin-blockquote:         var(--space-8) 0;
}

blockquote {
  margin: var(--margin-blockquote);
  padding-left: var(--padding-left-blockquote);
  border-left: 4px solid var(--color-ink);
  color: var(--color-blockquote);
  font-family: var(--font-family-body);
  font-size: var(--font-size-blockquote);
  font-weight: var(--font-weight-blockquote);
  line-height: var(--line-height-blockquote);
  letter-spacing: var(--letter-spacing-blockquote);
}

blockquote p {
  margin: 0;
  font: inherit;
  line-height: inherit;
}

@media (max-width: 980px) {
  :root {
    --font-size-blockquote: var(--font-size-5);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-blockquote:    var(--font-size-4);
    --line-height-blockquote:  var(--line-height-3);
    --padding-left-blockquote: 18px;
  }
}

/* ============================================================
   Absatzformat: Pullquote
   Grosses redaktionelles Statement. Bewusste Utility, nicht der
   Markdown-Standard fuer blockquote.
   ============================================================ */

:root {
  --font-size-pullquote:      var(--font-size-11);
  --line-height-pullquote:    var(--line-height-7);
  --padding-left-pullquote:   28px;
  --font-weight-pullquote:    var(--font-weight-heavy);
  --letter-spacing-pullquote: 0;
  --color-pullquote:          var(--color-ink);
}

.text-pullquote {
  padding-left: var(--padding-left-pullquote);
  border-left: 6px solid var(--color-ink);
  color: var(--color-pullquote);
  font-family: var(--font-family-display);
  font-size: var(--font-size-pullquote);
  font-weight: var(--font-weight-pullquote);
  line-height: var(--line-height-pullquote);
  letter-spacing: var(--letter-spacing-pullquote);
  text-wrap: balance;
}

.text-pullquote p {
  margin: 0;
  font: inherit;
  line-height: inherit;
}

@media (max-width: 980px) {
  :root {
    --font-size-pullquote:   var(--font-size-10);
    --line-height-pullquote: var(--line-height-5);
  }
}

@media (max-width: 660px) {
  :root {
    --font-size-pullquote:    var(--font-size-9);
    --padding-left-pullquote: 18px;
  }
}

/* ============================================================
   Absatzformat: Small
   Kleiner Sekundaertext fuer Hinweise und Metainformationen.
   Utility: .text-small.
   ============================================================ */

:root {
  --font-size-small:   var(--font-size-2);
  --line-height-small: var(--line-height-3);
  --color-small:       var(--color-muted);
}

.text-small {
  color: var(--color-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* Keine responsiven Varianten */

/* ============================================================
   Inline-Auszeichnung: Marker
   Textmarker-Hervorhebung fuer einzelne Worte oder Satzteile.
   HTML: <mark class="white">Text</mark>
   Utility auf anderen Elementen: <span class="marker white">Text</span>
   ============================================================ */

/* Keine Tokens – Marker erbt Schriftgroesse und -farbe aus dem Kontext */

mark,
.marker {
  --marker-color: var(--color-marker-yellow);

  margin-inline: -0.08em;
  padding-inline: 0.08em;
  color: inherit;
  background:
    linear-gradient(
      to bottom,
      transparent 8%,
      var(--marker-color) 8%,
      var(--marker-color) 96%,
      transparent 96%
    );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark.yellow, .marker.yellow { --marker-color: var(--color-marker-yellow); }
mark.blue,   .marker.blue   { --marker-color: var(--color-marker-blue);   }
mark.green,  .marker.green  { --marker-color: var(--color-marker-green);  }
mark.pink,   .marker.pink   { --marker-color: var(--color-marker-pink);   }
mark.white,  .marker.white  { --marker-color: var(--color-marker-white);  }
mark.black,  .marker.black  { --marker-color: var(--color-marker-black);
                              color: var(--color-paper);                  }

/* ============================================================
   Pattern: Note
   Redaktionelles Hinweis-Widget. Bewusst kein Markdown-
   Absatzformat, deshalb weiterhin mit Klasse.
   ============================================================ */

/* Keine Tokens – Note ist ein zusammengesetztes Pattern mit eigenen internen Groessen */

.note {
  margin: var(--space-5) 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  border-left: 6px solid var(--color-ink);
}

.note strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-family-display);
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-3);
}

.note p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}