/* ==========================================================================
   BASE — Body, Links, Typografie
   Typo-Skala exakt nach Spezifikation Abschnitt 02.1
   ========================================================================== */

/* Grid- und Flex-Kinder dürfen unter ihre min-content-Breite schrumpfen.
   Ohne das sprengt ein einziges langes Wort wie „Beitragsbemessungsgrenze"
   die ganze Spalte — und weil die Shell overflow: clip hat, schneidet sie
   den Inhalt stillschweigend ab, statt einen Scrollbalken zu zeigen. */
.grid-12 > *, .bento > *, .compare > *, .capsules > *,
.form-grid > *, .hero > *, .data-row > *, .lang-band > *,
.price-grid > *, .footer__links > *, .footer__top > *,
.section-head > *, .compare__item > *, .story-card__trigger > *,
.hero__facts > *, .bento__duo > *, .urgent > * { min-width: 0; }

body {
  overflow-wrap: break-word;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -.010em;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabisch: eigene Schrift, RTL, kein negatives Tracking (zerstört Ligaturen) */
[dir="rtl"] body,
[lang="ar"] body { font-family: var(--font-ar); }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .display-xl, [dir="rtl"] .section-title,
[dir="rtl"] .mission__title, [dir="rtl"] .footer__headline,
[dir="rtl"] .eyebrow {
  letter-spacing: 0;
  line-height: 1.24;
}

/* Arabische Schrift baut deutlich höher als lateinische. Gleiche Punktgröße
   ergibt hier viel mehr Höhe — deshalb kleinere Grade und mehr Zeichen pro Zeile,
   sonst läuft die Headline aus der Hero-Karte. */
[dir="rtl"] .display-xl {
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);   /* 36 → 56 px */
}
[dir="rtl"] .section-title,
[dir="rtl"] h1 {
  max-width: 24ch;
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* 30 → 44 px */
}
[dir="rtl"] h2, [dir="rtl"] .h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
}
[dir="rtl"] .mission__title { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); }
[dir="rtl"] .footer__headline { max-width: 20ch; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); }
[dir="rtl"] .capsule__word { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
[dir="rtl"] .stat__value { letter-spacing: 0; }
[dir="rtl"] .lead, [dir="rtl"] p { letter-spacing: 0; line-height: 1.75; }

/* --- Überschriften ------------------------------------------------------ */

/* Deutsche Komposita sind lang. Ohne Silbentrennung schiebt sich
   „Krankenversicherung" auf schmalen Displays aus der Karte — und weil die
   Shell overflow: clip hat, fällt das nicht als Scrollbalken auf, sondern
   schneidet den Text einfach ab. */
h1, h2, h3,
.display-xl, .section-title, .mission__title,
.footer__headline, .capsule__word, .data-row__title {
  overflow-wrap: break-word;
  hyphens: auto;
}
[dir="rtl"] :is(h1, h2, h3, .display-xl, .section-title) { hyphens: manual; }

/* Obergrenze 68 px statt der 82 px aus der Spezifikation: „Krankenversicherung"
   braucht bei 82 px 734 px, die Textspalte bietet aber nur 627 px. Bei 68 px
   passt das längste Wort ohne Trennstrich in eine Zeile. */
.display-xl {
  max-width: 14ch;
  font-size: clamp(2.25rem, 1.35rem + 3.7vw, 4.125rem);  /* 36 → 66 px */
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 500;
}

.section-title,
h1 {
  max-width: 18ch;
  font-size: clamp(2.375rem, 1.8rem + 2.5vw, 3.625rem); /* 38 → 58 px */
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
}

h2, .h2 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem);     /* 32 → 42 px */
  line-height: 1.07;
  letter-spacing: -.035em;
  font-weight: 500;
}

h3, .h3 {
  font-size: clamp(1.5rem, 1.35rem + .5vw, 1.75rem);    /* 24 → 28 px */
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 600;
}

.lead {
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);  /* 18 → 20 px */
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--color-muted);
}

p { max-width: 70ch; }

.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.caption {
  font-size: 13px;
  line-height: 19px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--color-muted);
}

.num { font-variant-numeric: tabular-nums; }

strong, b { font-weight: 650; }

/* --- Links -------------------------------------------------------------- */

a {
  text-decoration: none;
  text-underline-offset: .22em;
}

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 100%;
  transition: background-size var(--dur-arrow) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1.5px; }

/* --- Fokus (Spezifikation 08.1: 2 px Petrol + 3 px Aqua Halo) ----------- */

:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(147, 195, 202, .45);
}

/* Sticky Nav darf beim Ankern keine Überschrift verdecken */
[id] { scroll-margin-top: 112px; }

/* --- Skip-Link ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 24px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-control);
  background: var(--color-petrol);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--dur-hover) var(--ease-out);
}
.skip-link:focus { top: 24px; }