/*
  zahnärzte.online — Fluid Type Scale
  ─────────────────────────────────────────────────────────────
  T-shirt-Klassen für semantische Überschriften.
  HTML-Elemente (h1–h6) tragen KEINEN visuellen Stil mehr —
  sie strukturieren nur. Der Stil kommt ausschließlich über
  die .type-* Klassen im Markup.

  Skalierungsbereich: 375 px (min) → 1440 px (max)
  Formel: slope = (maxPx – minPx) / (1440 – 375)
          intercept = maxPx – slope × 1440
          clamp(min_rem, slope_vw + intercept_rem, max_rem)

  Alle max-Werte sind durch 4 oder 8 teilbar (px, Basis 16 px).
  ─────────────────────────────────────────────────────────────

  Scale — max-Werte und Verhältnisse:
  ┌───────────────┬──────────────────────┬─────────────┐
  │ Klasse        │ max → min            │ Ratio       │
  ├───────────────┼──────────────────────┼─────────────┤
  │ .type-display │  80 px / 5 rem       │ —           │
  │ .type-xxl     │  64 px / 4 rem       │ ÷ 1.25      │
  │ .type-l       │  48 px / 3 rem       │ ÷ 1.33      │
  │ .type-m       │  40 px / 2.5 rem     │ ÷ 1.20      │
  │ .type-s       │  28 px / 1.75 rem    │ ÷ 1.43      │
  └───────────────┴──────────────────────┴─────────────┘

  Migration — welche Komponente verwendet welche Klasse:
  ┌──────────────────────────────────┬───────────────────┬─────────────────────┐
  │ Bisheriger Selektor              │ Neue Klasse       │ Δ max               │
  ├──────────────────────────────────┼───────────────────┼─────────────────────┤
  │ .hero h1                         │ .type-display     │ 79.2 → 80 px        │
  │ .wide-head h2                    │ .type-display     │ 80 → 80 px          │
  │ .section-head h2 (+ Varianten)   │ .type-xxl         │ 74.4 → 64 px (−14%) │
  │ .principle-copy h3               │ .type-xxl         │ 70.4 → 64 px (−9%)  │
  │ .process-sticky h2               │ .type-xxl         │ 63.2 → 64 px        │
  │ .qual-card h2                    │ .type-xxl         │ 64 → 64 px          │
  │ .carousel-head h3                │ .type-l           │ 48 → 48 px          │
  │ .bento-card.statement p          │ .type-l           │ 48 → 48 px          │
  │ .modal-card h2                   │ .type-m           │ 43.2 → 40 px (−7%)  │
  │ .process-card h3                 │ .type-m           │ 39.2 → 40 px        │
  │ .navigator-card h4               │ .type-m           │ 37.6 → 40 px        │
  │ .status-quo .bento-card h3       │ .type-m           │ 36 → 40 px (+11%)   │
  │ .image-card h3 / .bento-card h3  │ .type-s           │ 28 → 28 px          │
  │ .intent-step-note h3             │ .type-s           │ 26.4 → 28 px        │
  └──────────────────────────────────┴───────────────────┴─────────────────────┘

  Anwendung im HTML:
  <h2 class="type-xxl">Abschnitt-Titel</h2>
  <h3 class="type-s">Karten-Titel</h3>
  <p  class="type-l">Statement-Text (hero-nahe Aussage)</p>
*/

/* ── Globaler Skalierungsfaktor ──────────────────────────────────
   Einen Wert ändern — alle Überschriften skalieren proportional.
   Fluid-Verhalten (clamp) bleibt vollständig erhalten.

   Beispiele:
     --type-scale: 0.85  → alle Überschriften 15 % kleiner
     --type-scale: 1     → Standardgröße (Design-Default)
     --type-scale: 1.15  → alle Überschriften 15 % größer
   ──────────────────────────────────────────────────────────── */
:root {
  --type-scale: 0.85;
}

/* ── CSS-Custom-Properties — font-size-Werte einzeln verwendbar ── */
:root {
  --font-display: calc(var(--type-scale) * clamp(2.5rem,  3.75vw + 1.625rem, 5rem));
  --font-xxl:     calc(var(--type-scale) * clamp(2rem,    3vw    + 1.3rem,   4rem));
  --font-l:       calc(var(--type-scale) * clamp(1.75rem, 1.9vw  + 1.29rem,  3rem));
  --font-m:       calc(var(--type-scale) * clamp(1.5rem,  1.5vw  + 1.15rem,  2.5rem));
  --font-s:       calc(var(--type-scale) * clamp(1.25rem, 0.75vw + 1.1rem,   1.75rem));
}

/* ── HTML-Reset: Elemente strukturieren, tragen keinen Stil ── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ─────────────────────────────────────────
   T-SHIRT-KLASSEN
   ───────────────────────────────────────── */

/* Display — 80 px max / Hero-Headline */
.type-display {
  font-family: var(--font);
  font-size: var(--font-display);
  font-weight: 430;
  line-height: .98;
  letter-spacing: -.028em;
}

/* XXL — 64 px max / Primäre Abschnitts-Headlines */
.type-xxl {
  font-family: var(--font);
  font-size: var(--font-xxl);
  font-weight: 430;
  line-height: 1.04;
  letter-spacing: -.024em;
}

/* L — 48 px max / Carousel-, Feature- & Alternating-Section-Headlines */
.type-l {
  font-family: var(--font);
  font-size: var(--font-l);
  font-weight: 480;
  line-height: 1.06;
  letter-spacing: -.020em;
}

/* M — 40 px max / Modal-, Navigator- & Prozess-Headlines */
.type-m {
  font-family: var(--font);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.018em;
}

/* S — 28 px max / Karten-Titel & Komponenten-Headlines */
.type-s {
  font-family: var(--font);
  font-size: var(--font-s);
  font-weight: 560;
  line-height: 1.10;
  letter-spacing: -.012em;
}