/* ============================================================
   Komponente: sektion (Sektions-Header + Cover-Reihe)
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web"
     · Sektion / Regionale Tageszeitungen  12850:11197
     · Frisör Mustermann empfiehlt          13863:60272
   ausgelesen am 04.09.2026.

   Das Sektions-Header-Pattern aus SKILL.md §8, in zwei Klassen:
     Klasse 1  Titel allein         (selbsterklärende Sektion)
     Klasse 2  Titel + Sub-Info     (ohne Erklärung mehrdeutig)
   Rechts steht immer der Link „Alle →".

   Setzt tokens.css, base.css und components/link-button.css
   voraus. Für die Reihe zusätzlich components/cover.css.

   VERWENDUNG
     <section class="sektion">
       <header class="sektion__kopf">
         <div class="sektion__titelblock">
           <h2 class="sektion__titel">Regionale Tageszeitungen</h2>
           <p class="sektion__sub">Aktuelle Ausgabe</p>
         </div>
         <button class="link-button">…</button>
       </header>
       <div class="sektion__reihe">…Cover…</div>
     </section>

   ------------------------------------------------------------
   DIE REIHE LÄUFT ÜBER DEN RAND
   In Figma ist die Cover-Reihe breiter als der Inhaltsbereich —
   sie ragt rechts über den Screen hinaus. Das ist kein
   Überlauf-Fehler, sondern die Ansage „hier geht es weiter".

   Umgesetzt über einen negativen Außenabstand rechts in Höhe des
   Screen-Randes: die Reihe reicht damit bis an die Screenkante,
   und was danach kommt, ist gescrollt. Das Polster rechts INNEN
   sorgt dafür, dass das letzte Cover am Ende des Scrollens nicht
   an der Kante klebt.

   --sektion-rand kommt vom Screen, nicht von hier — die Reihe
   weiß nicht, wie breit der Rand ist, in dem sie liegt.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     45   Höhe der Kopfzeile. Sie folgt dem Link Button, der das
          Touch-Target trägt — nicht dem Titel.
   ============================================================ */

.sektion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                    /* 12 */
}

.sektion__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 45px;                        /* gemessen, siehe Kopf */
}

.sektion__titelblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                   /* 4 */
  flex: 1 0 0;
  min-width: 0;
}

/* H3, Outfit Bold, text-primary — so schreibt es §8 vor. Die
   Größe kommt aus dem Token und wechselt mit dem Breakpoint
   (Tablet 22). */
.sektion__titel {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

/* Sub-Info: extra small oder small in text-description (§8).
   Hier extra small, so gemessen. */
.sektion__sub {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-description);
}

/* ------------------------------------------------------------
   Cover-Reihe
   ------------------------------------------------------------ */

.sektion__reihe {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);                    /* 12 */

  overflow-x: auto;
  /* Fasst man die Reihe an, soll nicht die Seite mitscrollen. */
  overscroll-behavior-x: contain;

  /* Bis an die Screenkante und darüber hinaus. Der Rand kommt
     vom Screen. */
  margin-right: calc(-1 * var(--sektion-rand, var(--space-lg)));
  padding-right: var(--sektion-rand, var(--space-lg));

  /* Kein Scrollbalken: in Figma ist keiner, und auf dem Tablet
     gibt es keinen. Auf dem Zeigergerät bleibt das Scrollen über
     Rad und Trackpad möglich, und die Reihe läuft sichtbar über
     den Rand — das ist die Affordanz.
     ZU KLÄREN: reicht das für Maus-Bedienung im Web? */
  scrollbar-width: none;
}

.sektion__reihe::-webkit-scrollbar {
  display: none;
}

/* DER FOKUS-RING BRAUCHT LUFT, UND DIE LUFT DARF NICHTS
   VERSCHIEBEN. overflow-x: auto schneidet auch oben und unten ab
   — ohne Polster wäre der Ring des ersten Covers gekappt. Das
   Polster wird durch negative Außenabstände wieder
   herausgerechnet: die Reihe liegt danach genau dort, wo sie ohne
   beides läge. 4 px Ring-Abstand plus 2 px Ring. */
.sektion__reihe {
  --fokus-luft: calc(var(--focus-ring-offset) + var(--focus-ring-width));   /* 6 */
  padding-block: var(--fokus-luft);
  margin-block: calc(-1 * var(--fokus-luft));
}

/* ------------------------------------------------------------
   Abstand Kopf zu Reihe: 12 oder 16
   ------------------------------------------------------------
   FIGMA WIDERSPRICHT SICH HIER. Auf der Inhalte-Seite haben alle
   elf Sektionen 12 (Cover-Reihe bei y=57 bis 59 unter einem
   45er Kopf). Auf „Vor Ort" hat die einzige Sektion 16
   (Cover-Reihe bei y=61). Nachgemessen am 04.09.2026.

   12 ist deshalb der Standard, 16 eine benannte Variante — statt
   einen Mittelwert zu erfinden oder die Mehrheit zu überstimmen.
   IN FIGMA ZU KLÄREN: einer der beiden Werte ist ein Versehen.
   ------------------------------------------------------------ */

.sektion--luft {
  gap: var(--space-md);                    /* 16 */
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Titel ist in Figma auf BEIDEN Screens Outfit
     ExtraBold, SKILL.md §8 sagt Bold. In Figma ist es eine
     losgelöste Textebene ohne benannten Stil — deshalb folgt
     diese Datei §8. Wenn ExtraBold gewollt ist, gehört es in
     §8 und in base.css, nicht hierher.
   · Ob der versteckte Scrollbalken im Web reicht, ist offen.
   ============================================================ */