/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, bausteine/tokens.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Baustein-Tokens (Welle B0-Fundament, docs/website-katalog.md Abschnitt 3).
   EINE Stelle für Maße der Grundbausteine: Radius, Abstände, Schatten, Größen.
   Alle Werte leiten sich aus den Website-Tokens (--bm-*, src/site/design/
   tokens.css) bzw. /design/kern.css (--kern-*) ab – hier stehen keine Farben
   und keine festen Schriftwerte, nur die Zuordnung „Baustein → Token“.

   DESIGN GLOBAL ÄNDERN: Farben, Schriften, Grundrundungen in /design/kern.css;
   wie die Bausteine sie anwenden (Kartenradius, Innenabstand, Sektionsluft,
   Knopfhöhe …) hier. Module setzen dieselben Namen nur für ihre Varianten
   neu (z. B. .bb-m-karten--hervor { --bb-karte-radius: … }).

   Farben je Fläche (--bb-grund, --bb-text, --bb-linie …) setzt die Ton-Regel
   (flaeche.ts) als Inline-Stil an Sektion und Karte. Die Grundwerte unten
   entsprechen dem Ton „hell“ für Bausteine ohne umgebende Sektion. */

:root,
.bm-neu {
  /* ── Sektion ───────────────────────────────────────────────────────── */
  --bb-sektion-abstand: var(--bm-sektion);                    /* abstand="normal" */
  --bb-sektion-abstand-halb: var(--bm-sektion-halb);          /* abstand="halb" */
  --bb-sektion-abstand-gross: calc(var(--bm-sektion) * 1.25); /* abstand="gross" (Module heute) */
  --bb-inhalt-max: var(--bm-inhalt-max);                      /* breite="inhalt" */
  --bb-schmal-max: var(--bm-textbreite);                      /* breite="schmal" */
  --bb-rand: var(--bm-rand);                                  /* Seitenrand links/rechts */

  /* ── Sektionskopf ──────────────────────────────────────────────────── */
  --bb-kopf-abstand: calc(var(--bm-sektion) * 0.5);           /* Kopf → Inhalt */
  --bb-kopf-links-abstand: clamp(1.5rem, 2.6vw, 2.25rem);     /* Titel → Pillen */
  --bb-kopf-einleitung-abstand: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --bb-kopf-titel-max: 18em;
  --bb-kopf-titel-zh: var(--bm-zh-snug);

  /* ── Raster ────────────────────────────────────────────────────────── */
  --bb-raster-luecke: var(--bm-raster-luecke);                /* luecke="normal" */
  --bb-raster-luecke-eng: 0.75rem;                            /* luecke="eng", Wischstreifen */
  --bb-raster-luecke-weit: clamp(1.25rem, 2.6vw, 2.5rem);     /* luecke="weit" */
  --bb-wisch-breite: 85%;                                     /* Kartenbreite im Wischstreifen */

  /* ── Karte ─────────────────────────────────────────────────────────── */
  --bb-karte-radius: var(--bm-radius-karte);
  --bb-karte-radius-klein: var(--bm-radius-klein);            /* Bildkarten, Kacheln */
  --bb-karte-innen: clamp(1.5rem, 1rem + 1.1vw, 2.25rem);     /* Innenabstand */
  --bb-karte-schatten: var(--bm-schatten-karte);              /* Heben (Hover) */
  --bb-karte-bild-hoehe: auto;                                /* bild-oben: feste Bildhöhe statt Format */
  --bb-karte-verlauf-start: 60%;                              /* Bild läuft ab hier in die Kartenfläche aus */
  --bb-karte-verlauf-ueberlapp: 2rem;                         /* Inhalt beginnt so weit im Verlauf */
  --bb-karte-titel-groesse: var(--bm-t-kartentitel);
  --bb-karte-titel-zh: var(--bm-zh-titel);
  --bb-karte-titel-sp: var(--bm-sp-leicht);
  --bb-karte-text-abstand: 0.875rem;
  --bb-karte-text-zh: var(--bm-zh-lang);
  --bb-karte-aktionen-abstand: clamp(1.25rem, 2vw, 1.75rem);
  --bb-karte-zoom: 1.04;                                      /* Bild beim Überfahren */

  /* ── Knopf, Pille, Textlink ────────────────────────────────────────── */
  --bb-knopf-hoehe: var(--bm-knopf-hoehe);                    /* 48 */
  --bb-knopf-hoehe-klein: var(--bm-knopf-klein);              /* 40 */
  --bb-knopf-hoehe-tippen: var(--bm-knopf-punkt);             /* 44: kleinste Tippfläche mobil */
  --bb-knopf-radius: var(--bm-radius-pille);
  --bb-knopf-innen: 1.75rem;
  --bb-knopf-innen-klein: 1.25rem;
  --bb-pille-innen: 1.5rem;
  --bb-pille-luecke: 0.625rem;
  --bb-textlink-versatz: 0.3em;                               /* Unterstrich */

  /* ── Medium ────────────────────────────────────────────────────────── */
  --bb-medium-radius: var(--bm-radius);                       /* eckig (red-Prinzip) */

  /* ── Punkte ────────────────────────────────────────────────────────── */
  --bb-punkte-luecke: 0.625rem;

  /* ── Ton-Grundwerte = Ton „hell“ (Regel: flaeche.ts) ───────────────── */
  --bb-grund: var(--bm-bg);
  --bb-text: var(--bm-text);
  --bb-text-ruhig: var(--bm-text-leise);
  --bb-linie: var(--bm-linie);
  --bb-linie-zart: var(--bm-linie-zart);
  --bb-linie-feld: var(--bm-linie-feld);
  --bb-karte: var(--bm-bg-alt);
  --bb-akzent: var(--bm-signal-kontur);
  --bb-fokus: var(--bm-fokus-auf-hell);
}