/* =============================================================
   desktop-typography.css
   Premium-Level Typografie (Apple / Stripe / Linear)
   Scope: Desktop >= 1024px ONLY (mobile bleibt unverändert)
   Erstellt: 2026-05-12
   Ziel: H1 80-96px Hero, H2 36-56px, Body 17px, Lead 20px
   ============================================================= */

@media (min-width: 1024px) {

  /* ---------------------------------------------------------------
     1) DISPLAY-HEADLINES (H1)
     - Hero-H1 gross & cinematisch, Apple-Level (clamp 64-96px)
     - normales H1 (nicht im Hero) etwas kleiner gehalten
     --------------------------------------------------------------- */
  html body section.hero h1,
  html body header.hero h1,
  html body .hero h1,
  html body .page-hero h1,
  html body .hero-content h1,
  html body .hero-text h1,
  html body .hero-section h1 {
    font-size: clamp(64px, 5.5vw, 96px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
    font-family: "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    text-wrap: balance;
  }

  html body h1,
  html body .h1 {
    font-size: clamp(48px, 4.2vw, 72px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
    font-family: "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  }

  /* Hero gewinnt explizit gegen pures h1 */
  html body section.hero h1,
  html body header.hero h1,
  html body .hero h1 {
    font-size: clamp(64px, 5.5vw, 96px) !important;
  }

  /* ---------------------------------------------------------------
     2) SECTION-HEADLINES (H2)
     --------------------------------------------------------------- */
  html body h2,
  html body .h2,
  html body section h2,
  html body .section h2 {
    font-size: clamp(36px, 3.2vw, 56px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    font-weight: 700 !important;
    font-family: "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    text-wrap: balance;
  }

  /* ---------------------------------------------------------------
     3) H3 / H4
     --------------------------------------------------------------- */
  html body h3,
  html body .h3 {
    font-size: clamp(24px, 1.9vw, 32px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
  }

  html body h4,
  html body .h4 {
    font-size: clamp(20px, 1.4vw, 24px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    font-weight: 600 !important;
  }

  /* ---------------------------------------------------------------
     4) BODY TEXT (17px global Desktop)
     - paragraphs, list-items, generic copy
     - text size NICHT auf form-controls erzwingen (sonst Eingabefelder
       werden mit-vergroessert und Layouts brechen)
     --------------------------------------------------------------- */
  html body p,
  html body li,
  html body dd,
  html body dt,
  html body blockquote,
  html body figcaption,
  html body .text-body,
  html body .body-text,
  html body .copy {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* Tabellenzellen ebenfalls lesbar */
  html body table td,
  html body table th {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* ---------------------------------------------------------------
     5) LEAD / HERO-SUBLINE
     - Hero-Subline 18-22px (clamp)
     - Lead-Text in Sections grösser
     --------------------------------------------------------------- */
  html body .lead,
  html body .lede,
  html body .intro,
  html body .subtitle,
  html body .hero-subtitle,
  html body section.hero p,
  html body header.hero p,
  html body .hero p,
  html body .page-hero p,
  html body .hero-content p,
  html body .hero-text p,
  html body .pp-spotlight__desc,
  html body .section-intro p,
  html body .section-lead {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.55 !important;
    letter-spacing: -0.005em !important;
    font-weight: 400 !important;
    max-width: 64ch;
  }

  /* Wenn Lead direkt nach H1 in Hero kommt -> 20-22px */
  html body .hero h1 + p,
  html body section.hero h1 + p,
  html body header.hero h1 + p {
    font-size: clamp(20px, 1.5vw, 22px) !important;
    line-height: 1.5 !important;
  }

  /* ---------------------------------------------------------------
     6) BUTTONS / CTAs - Letter-spacing & Line-height polish
     - Font-Size NICHT global ueberschreiben, nur Mikro-Tuning
     --------------------------------------------------------------- */
  html body .btn,
  html body a.btn,
  html body button.btn,
  html body .cta,
  html body .btn-primary,
  html body .btn-secondary,
  html body button[type="submit"] {
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    font-weight: 600 !important;
  }

  /* ---------------------------------------------------------------
     7) GLOBAL READING POLISH
     --------------------------------------------------------------- */
  html body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Kleine Labels / Eyebrows */
  html body .eyebrow,
  html body .label,
  html body .kicker,
  html body .badge--label {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    font-weight: 600 !important;
  }

  /* ---------------------------------------------------------------
     8) SONDERFALL: SECONDARY PAGES mit besonders kleinem Body
        komponenten.html, referenzen.html, photovoltaik-anbieter-vergleich.html
        (Audit: Body z.T. 12-13px!)
     --------------------------------------------------------------- */
  html body.page-komponenten p,
  html body.page-komponenten li,
  html body.page-komponenten span,
  html body.page-referenzen p,
  html body.page-referenzen li,
  html body.page-referenzen span,
  html body.page-anbieter-vergleich p,
  html body.page-anbieter-vergleich li,
  html body.page-anbieter-vergleich span {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* Wenn keine body-Klassen vorhanden sind: greifen wir auch ueber
     gemeinsame Containerklassen, die in diesen Pages haeufig sind */
  html body .component-card p,
  html body .component-card li,
  html body .component-card .text,
  html body .reference-card p,
  html body .reference-card li,
  html body .anbieter-card p,
  html body .anbieter-card li,
  html body .vergleich-table td,
  html body .comparison-table td {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Spezialfall: extrem kleine Text-Helper auf Komponenten-Pages */
  html body .text-xs,
  html body .text-sm,
  html body small {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  html body .text-tiny,
  html body .meta,
  html body .caption {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* =============================================================
   XL DESKTOP (>= 1440px) – noch eine Spur grosszuegiger
   ============================================================= */
@media (min-width: 1440px) {
  html body section.hero h1,
  html body header.hero h1,
  html body .hero h1,
  html body .page-hero h1 {
    font-size: clamp(72px, 5.2vw, 96px) !important;
    letter-spacing: -0.022em !important;
  }

  html body p,
  html body li,
  html body .text-body {
    font-size: 17px !important;
  }
}

/* =============================================================
   SAFETY: Mobile (<1024px) wird hier NICHT angefasst.
   Alle obigen Regeln sind in @media (min-width: 1024px) gekapselt.
   ============================================================= */