/* Weser Theme – Typografie-Skala (Literata Headings / Poppins Copy)
   Mobile-first. Breakpoints: Tablet ≥768px, Desktop ≥1200px.
   Werte laut Design (Desktop / Tablet / Mobile):
   H1 64/44/32 Bold · SL1 42/28/20 Regular · H2 40/–/25 · H3 34/–/22 · H4 18/–/18 SemiBold
   Copy M 20 · Copy S 16 · Copy XS 14 (Poppins) */

/* ── Headings – Basis = Mobile ───────────────────────────── */
h1, .h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);          /* 700 */
    font-size: 32px;
    line-height: 36px;
}

h2, .h2 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);      /* 600 */
    font-size: 25px;
    line-height: 35px;
}

h3, .h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 22px;
    line-height: 26px;
}

h4, .h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 18px;
    line-height: 20px;
}

/* ── Subline / Lead (SL1) – Poppins Regular ──────────────── */
.sl1 {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);        /* 400 */
    font-size: 20px;
    line-height: 24px;
}

/* ── Copy-Größen (Poppins) ───────────────────────────────── */
.copy-m       { font-family: var(--font-body); font-size: var(--fs-copy-m);  font-weight: var(--fw-normal); line-height: 1.6; }
.copy-m-bold  { font-family: var(--font-body); font-size: var(--fs-copy-m);  font-weight: var(--fw-bold);   line-height: 1.6; }
.copy-s       { font-family: var(--font-body); font-size: var(--fs-copy-s);  font-weight: var(--fw-normal); line-height: 1.6; }
.copy-s-bold  { font-family: var(--font-body); font-size: var(--fs-copy-s);  font-weight: var(--fw-bold);   line-height: 1.6; }
.copy-xs      { font-family: var(--font-body); font-size: var(--fs-copy-xs); font-weight: var(--fw-normal); line-height: 1.5; }

/* ── Mobil: lange Wörter in Überschriften ────────────────────
   Kundenfeedback 01, Mobil 22: „Hier wird die Überschrift abgeschnitten"
   (/vario-line/, „…Gestaltungsmöglichkeiten" lief bei 320px 39px über).
   Nachgemessen 2026-09-16 traf es auch Kartentitel und die Kategorien im
   Infomaterial.

   Drei Stufen, damit kurze Wörter unberührt bleiben:
   1. hyphens: auto – echte Silbentrennung (das Dokument trägt lang="de").
   2. hyphenate-limit-chars – nur Wörter ab 12 Zeichen, mindestens 5 vor und
      nach der Trennstelle. „Gestaltungsmöglichkeiten" wird getrennt,
      „Wohnzimmer" nicht. Safari kennt die Eigenschaft nicht und trennt dort
      etwas freier – auf Mobil hingenommen.
   3. overflow-wrap: break-word – greift NUR, wenn ein Wort allein nicht in
      die Zeile passt (etwa ohne Trennwörterbuch). Lieber ein harter Umbruch
      als abgeschnittener Text.
   Ab Tablet unverändert: Dort passt jedes Wort, und Trennungen in großen
   Überschriften sähen fremd aus. */
@media (max-width: 767.98px) {
    h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
        overflow-wrap: break-word;
    }
}

/* ── Tablet (≥768px) ─────────────────────────────────────── */
@media (min-width: 768px) {
    h1, .h1 { font-size: 44px; line-height: 1.03; }
    .sl1    { font-size: 28px; line-height: 1.25; }

    /* Für H2–H4 ist keine separate Tablet-Größe vorgegeben → Desktop-Werte ab Tablet */
    h2, .h2 { font-size: var(--fs-h2); line-height: 1.2; }
    h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; }
    h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }
}

/* ── Desktop (≥1200px) ───────────────────────────────────── */
@media (min-width: 1200px) {
    h1, .h1 { font-size: var(--fs-h1); line-height: 1.1; }
    .sl1    { font-size: var(--fs-sl1); line-height: 1.2; }
}