/* ============================================================================
   breit.css — additiver Breit-Pass für vitalitgroup.de (ab 1280 px)
   Angelegt 17.09.2026 (Basti 14.09. / Pascal 17.09.: die Seite soll auf 14 bis
   27 Zoll passen — auf großen Monitoren stand der Inhalt als 1120 px schmale
   Mitte, bei 1920 px waren 42 %, bei 2560 px 56 % der Breite leer).

   WARUM EINE EIGENE DATEI: wie mobile.css. Der Container (--wrap:1160px) ist
   auf der Startseite 14-mal deklariert (Chrome-:root und jede Sektion einzeln),
   auf jeder Unterseite noch einmal. Eine Datei, eine Zeile im <head> je Seite.
   Unterhalb von 1280 px greift hier NICHTS — Handy und Tablet bleiben exakt
   wie vorher (bei 390 und 768 px byte-gleiche Screenshots, siehe Workspace
   des Hires vit-website-breit-0917).

   ZWEI HEBEL, beide fließend, beide bei 1280 px exakt der heutige Wert:

     1  Typo-Maßstab. Die Wurzelschrift wächst linear von 16 px (1280) über
        18 px (1920) auf 20 px (2560). Alles, was in rem/ch/em gesetzt ist —
        Überschriften, Abstände, Karten, Lesebreiten wie 56ch — wächst mit.
        Die Komposition jeder Sektion bleibt, wie sie für 1160/16 entworfen
        wurde, nur größer. Warum Maßstab statt mehr Rasterspalten: mehr
        Spalten ordnen Inhalte um (die Paare der sechs Schmerzpunkte, die
        Reihenfolge der Stufen) — das wäre ein Umbau. Maßstab ist keiner.

     2  Container. --wrap wächst mit 82 vw, nach unten begrenzt auf 72,5 rem
        (= 1160 px bei 16 px), nach oben auf 84 rem (= 1680 px bei 20 px).
        Die Obergrenze steht in rem, damit das Verhältnis von Zeilenlänge zu
        Schriftgröße auf jedem Monitor gleich bleibt.
        Ergebnis: 1280 → 1160 px · 1440 → 1196 · 1600 → 1312 · 1920 → 1512 ·
        2560 → 1680 px Container.

   Was in den Seiten fest in px steht und mitwachsen muss, ist unten in rem
   übersetzt (bei 16 px Wurzelschrift identisch mit dem alten Wert).

   SPEZIFITÄT: Die Sektionen der Startseite tragen ihre Styles im <body>,
   also NACH diesem <link>. Bei gleicher Spezifität gewönnen sie. Deshalb
   stehen die Startseiten-Regeln hier als `.sx[data-slot] .klasse` (0,3,0)
   über den Sektionsregeln `.sx-r4-…-final .klasse` (0,2,0). Kein !important.
   ============================================================================ */

@media (min-width:1280px){

  /* --- 1 · Typo-Maßstab: 1280 → 16 px, 1920 → 18 px, 2560 → 20 px ---------
     Gerade durch (1280,16) und (2560,20): 0,3125 vw + 12 px. */
  html{font-size:clamp(16px,.3125vw + 12px,20px)}
  /* body und jede Sektion setzen 16px fest — auf die Wurzel zurückführen */
  body,.sx[data-slot]{font-size:1rem}

  /* --- 2 · Container --------------------------------------------------- */
  :root,.sx[data-slot]{--wrap:clamp(72.5rem,82vw,84rem)}
  .wrap,.sx[data-slot] .wrap{padding-inline:1.25rem}          /* 20px */

  /* --- 3 · Feste Pixelmaße, die mit dem Maßstab wachsen ----------------- */
  /* Lesebreiten */
  .schmal,.sx[data-slot] .schmal{max-width:47.5rem}           /* 760px */
  .sx[data-slot] .kopf-mitte{max-width:47.5rem}               /* 760px */
  .sx[data-slot] .rc-gitter.schmal{max-width:35rem}           /* 560px */
  .sx[data-slot] .kr-bild{max-width:27.5rem}                  /* 440px */
  .sx[data-slot] .htat .btn{max-width:28.75rem}               /* 460px */
  /* Kopfleiste und Fuß */
  .nav-inner,.sx[data-slot] .nav-inner{min-height:4rem}       /* 64px */
  .brand-mark,.sx[data-slot] .brand-mark{height:1.5rem}       /* 24px */
  .ft .brand-mark,.sx[data-slot] .ft .brand-mark{height:1.375rem} /* 22px */
  .nav-cta,.sx[data-slot] .nav-cta{min-height:3.25rem}        /* 52px */
  /* EKG-Linie im Hero */
  .sx[data-slot] .ekg-wrap,.sx[data-slot] .ekg-svg{height:8.75rem} /* 140px (Wert ab 600px) */
  /* Sprungmarken unter der gewachsenen Kopfleiste */
  :where([id]){scroll-margin-top:5.25rem}                     /* 84px */
}