/*
  Key-Facts-Box: kompaktes Zahlen-Raster. 'spalten' (2/3/4) steuert die
  Spaltenzahl ab dem mittleren Breakpoint per data-Attribut -- gleiches Muster
  wie faq-accordion[data-hintergrund]. Farben ausschliesslich System-Tokens.
*/@layer komponenten{.key-facts-box{container-type:inline-size;padding-block:var(--space-12);/* Content-Container (Guido 2026-10-13): die Box lief bisher von Viewportrand
       zu Viewportrand, Einzelkarten klebten bei x=0. Jetzt wie jede andere
       Sektion im Seiten-Container zentriert. */max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)}.key-facts-box__titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-2xl);font-weight:var(--weight-normal);color:var(--farbe-text);text-align:center;margin-block-end:var(--space-8)}.key-facts-box__raster{display:grid;grid-template-columns:1fr;gap:var(--space-5)}/* Weniger Karten als Spalten (1 oder 2): Raster schmal halten und mittig setzen,
     statt eine Karte ueber ein Drittel/Viertel der Seite zu ziehen. */.key-facts-box[data-anzahl="1"] .key-facts-box__raster{max-width:32rem;margin-inline:auto}.key-facts-box[data-anzahl="2"] .key-facts-box__raster{max-width:52rem;margin-inline:auto}.key-facts-box__karte{background:linear-gradient(155deg,
      color-mix(in oklch, var(--farbe-akzent) 8%, var(--farbe-flaeche)),
      var(--farbe-flaeche));border:1px solid var(--farbe-linie);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;overflow-wrap:break-word}/* Icon-Badge -- optional (Feld 'iconName'/'icon'), gleicher Baustein wie
     .card__icon/.page-guide__eintrag-icon: eingefaerbte Kreisflaeche in
     --farbe-akzent. Macht dramatische Einzelfakten schneller erfassbar statt
     reiner Typografie (Lotti-Audit Punkt 3). Karten ohne 'iconName' bleiben
     unveraendert. */.key-facts-box__icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-inline:auto;margin-block-end:var(--space-3);border-radius:var(--radius-full);background:color-mix(in oklch, var(--farbe-akzent) 18%, transparent);color:var(--farbe-akzent)}.key-facts-box__icon svg{width:1.5rem;height:1.5rem;display:block}.key-facts-box__wert{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--farbe-akzent);line-height:var(--leading-tight);margin:0}/* Dunkelmodus: der Markenakzent (Blau) ist auf Fast-Schwarz zu matt, Wert deshalb aufgehellt. */@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .key-facts-box__wert{color:color-mix(in oklch, var(--farbe-akzent) 45%, white)}}:root[data-theme="dark"] .key-facts-box__wert{color:color-mix(in oklch, var(--farbe-akzent) 45%, white)}.key-facts-box__label{margin-block-start:var(--space-2);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft)}.key-facts-box__label{text-wrap:balance}/* Zentrierter Text nur bis 3 Zeilen (Briefing Langtext 2026-10-13): in den
     zweispaltigen Kacheln (< 52rem) werden lange Labels 4+ Zeilen -- dort
     linksbuendig, inkl. Icon. */@container (max-width: 51.99rem){.key-facts-box__karte{text-align:start}.key-facts-box__icon{margin-inline:0}}/* Kennzahl mit langem Wert (Text statt Zahl, > 20 Zeichen, siehe site-lib.js) laeuft in
     schmalen Kacheln ueber 4 Zeilen: nie zentriert. */.key-facts-box__karte[data-text="lang"]{text-align:start;hyphens:auto}.key-facts-box__karte[data-text="lang"] .key-facts-box__icon{margin-inline:0}@container (min-width: 36rem){.key-facts-box[data-spalten="2"] .key-facts-box__raster{grid-template-columns:repeat(2, minmax(0, 1fr))}.key-facts-box[data-spalten="3"] .key-facts-box__raster{grid-template-columns:repeat(3, minmax(0, 1fr))}.key-facts-box[data-spalten="4"] .key-facts-box__raster{grid-template-columns:repeat(2, minmax(0, 1fr))}}@container (min-width: 52rem){.key-facts-box[data-spalten="4"] .key-facts-box__raster{grid-template-columns:repeat(4, minmax(0, 1fr))}}/* Weniger Karten als Spalten: Raster nach den Spalten-Regeln ueberschreiben (hoehere Spezifitaet
     plus Reihenfolge), damit 1 Karte einspaltig und 2 Karten zweispaltig bleiben. */@container (min-width: 36rem){.key-facts-box[data-spalten][data-anzahl="2"] .key-facts-box__raster{grid-template-columns:repeat(2, minmax(0, 1fr))}.key-facts-box[data-spalten][data-anzahl="1"] .key-facts-box__raster{grid-template-columns:minmax(0, 1fr)}}}