<script lang="ts">
  // Zeigt die Typo-Skala aus global.css (02-typography)
</script>

<div class="space-y-8 text-stein-800">
  <section class="space-y-2">
    <h1>Überschrift 1 (H1)</h1>
    <p class="text-sm text-stein-500">1.75rem / 2.125rem · 700 · -0.015em</p>
  </section>

  <section class="space-y-2">
    <h2>Überschrift 2 (H2)</h2>
    <p class="text-sm text-stein-500">1.5rem / 1.875rem · 700 · -0.01em</p>
  </section>

  <section class="space-y-2">
    <h3>Überschrift 3 (H3)</h3>
    <p class="text-sm text-stein-500">1.25rem / 1.625rem · 600 · -0.005em</p>
  </section>

  <section class="space-y-2">
    <h4>Überschrift 4 (H4)</h4>
    <p class="text-sm text-stein-500">1.125rem / 1.5rem · 600</p>
  </section>

  <section class="space-y-2">
    <p class="text-base">
      Fließtext (Body): Inter, 1.125rem (18px), line-height 1.556. Erlaubte Gewichte: 300, 400, 500, 600, 700.
    </p>
    <p class="text-sm text-stein-500">--font-body · 1.125rem · 1.556</p>
  </section>

  <section class="space-y-2">
    <p class="font-light">Leicht (300): Windwiderstand für mehr Artenvielfalt.</p>
    <p class="font-normal">Normal (400): Windwiderstand für mehr Artenvielfalt.</p>
    <p class="font-medium">Medium (500): Windwiderstand für mehr Artenvielfalt.</p>
    <p class="font-semibold">Semibold (600): Windwiderstand für mehr Artenvielfalt.</p>
    <p class="font-bold">Bold (700): Windwiderstand für mehr Artenvielfalt.</p>
  </section>

  <section class="space-y-2">
    <p class="text-xl italic text-stein-700" style="font-family: var(--font-secondary)">
      „Lora Variable für Zitate und sekundäre Texte.“
    </p>
    <p class="text-sm text-stein-500">--font-secondary · Lora Variable</p>
  </section>

  <section class="space-y-2">
    <div class="pageTitle">
      <h1>Page-Titel (Beispiel)</h1>
      <h2>Unterzeile oder Teaser</h2>
    </div>
    <p class="text-sm text-stein-500">.pageTitle (wie windwiderstand.de)</p>
  </section>
</div>
