/* drawer-uebersicht.css — Stylesheet des SSOT `DrawerUebersicht`
   (js/components/drawers/_shared/drawer-uebersicht.js): 360°-Beziehungskacheln
   in einem Drawer.

   ── WARUM DIESE DATEI EXISTIERT ────────────────────────────────────────────
   Die Regeln lagen bis 2026-07-30 in `sections/firmen/firmen.css` unter den Namen
   `.fi-uebersicht` / `.fi-stat*`. Der ko-Drawer benutzte sie mitsamt einem
   Kommentar, der das zugab („Nutzt die generischen fi-uebersicht/fi-stat-Klassen
   aus firmen.css"). Zwei Dinge waren daran falsch:

   1. **Der Name log.** `fi-` ist der Domänen-Präfix für Firma; die Kacheln sind
      aber generisch und werden von fi- UND ko-Drawer gerendert, seit der
      SSOT-Extraktion sogar aus EINEM Modul.
   2. **Die Abhängigkeitsrichtung war verkehrt.** Ein body-montierter Drawer hing
      an einer SECTION-CSS. Das ist genau die Kopplung, die `check:css-scope`
      verhindert — nur greift der Check bei `styles/domain/**`, nicht bei
      `styles/sections/**`, also fiel es dort durch. Kein Fehler heute, aber eine
      Zeitbombe: wer `firmen.css` verschiebt, umbenennt oder (naheliegend!) unter
      `#tab-content-firmen` scopet, lässt die Kacheln in BEIDEN Drawern still
      unstyled zurück — CSS wirft nie.

   Jetzt gilt: das Modul bringt seine Optik selbst mit, und der Name sagt, was es
   ist. Kernel-geladen wie das JS-Modul (beide sind bereichsneutral).

   Bewusst NICHT unter einer Drawer-Wurzelklasse gescopt: die Kacheln werden in
   einen Host gerendert, den der Consumer stellt (`[data-fi-uebersicht]` /
   `[data-ko-uebersicht]`), und ein Drawer hat keine gemeinsame Wurzel, auf die
   sich beide verlassen könnten. Die Eindeutigkeit kommt aus dem Namensraum
   `drawer-uebersicht`/`drawer-stat`. */

/* GRID, nicht Flex — und das ist der Unterschied zwischen „eine Reihe ist nicht
   voll" und „sieht kaputt aus". Vorher: `display:flex` + `flex: 1 1 28%` an der
   Kachel. `flex-grow: 1` zieht die LETZTE Kachel einer unvollen Reihe über die
   gesamte Breite — bei der Firma mit ihren SIEBEN Kacheln stand „Lizenzen" allein
   und vollbreit unter zwei 3er-Reihen (gemessen 2026-07-31, Reihenbelegung 3/3/1).
   Eine Waise ist bei sieben Kacheln unvermeidbar (7 ist prim); sie darf nur ihre
   Spaltenbreite behalten statt sich aufzublasen.

   `auto-fill` statt Breakpoints: der Host ist ein DRAWER, seine Breite hängt am
   Container und nicht am Viewport. Die frühere Mobile-Regel war deshalb doppelt
   wirkungslos — sie las den Viewport UND verlor den Spezifitäts-Vergleich
   (`.drawer-stat` 0,1,0 gegen `.drawer-uebersicht .drawer-stat` 0,2,0; ein
   @media erhöht die Spezifität nicht). Gemessen: bei 380px Viewport standen
   weiter 3 Kacheln je Reihe, die 44%-Regel hat nie gegriffen. */
.drawer-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

/* Unter .drawer-uebersicht gescopt (Spezifitaet 0,2,0), damit der globale Reset
   `.app-scope button { border:none; background:none; padding:0 }` (app-scope.css)
   die klickbare Kachel (ein <button>) NICHT entrandet/entpaddet — sonst sieht
   genau diese eine Kachel anders aus als die uebrigen <div>-Kacheln. */
.drawer-uebersicht .drawer-stat {
  /* Keine flex-/Breiten-Angabe mehr: die Spalten kommen vom Grid des Hosts.
     `min-width: 0` verhindert, dass ein langes Label (z.B. „Offene Anfragen") die
     Spur über ihre 1fr hinaus aufdrückt. */
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Icon als ruhiger Akzent oben rechts statt zentral ueber der Zahl. */
.drawer-stat .ui-ico { position: absolute; top: var(--space-2); right: var(--space-2); }
.drawer-stat .ui-ico img { width: 16px; height: 16px; opacity: 0.4; }

.drawer-stat-n {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-900);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.drawer-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Nullwerte: nur die Zahl dezent grau — NICHT die ganze Kachel ausgrauen (das
   wirkte wie deaktiviert / „kaputt", eine Wand aus blassen Boxen). Kacheln ohne
   Treffer treten trotzdem zurueck: bei jungen/leeren Firmen dominieren sonst
   sechs fette Nullen den Drawer-Einstieg. */
.drawer-stat.is-zero { opacity: 0.5; }
.drawer-stat.is-zero .drawer-stat-n { color: var(--lod-gray-400); font-weight: var(--fw-semibold); }

/* Klickbare Kachel (Drilldown) — Button-Reset + deutliches Hover (Lift). */
button.drawer-stat { font: inherit; color: inherit; }
.drawer-stat--link { cursor: pointer; }
.drawer-stat--link:hover {
  border-color: var(--lod-turquoise);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--lod-darkblue-900) 30%, transparent);
}
.drawer-stat--link:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 2px; }

/* KEIN Mobile-Breakpoint mehr — er wäre hier eine Attrappe. Die Spaltenzahl folgt
   der CONTAINER-Breite über `auto-fill` (schmaler Drawer → 2 Spalten, breiter → 4),
   und genau das braucht eine body-montierte Fläche, deren Breite nicht am Viewport
   hängt. Die alte Regel `@media (max-width:599px) { .drawer-stat { flex-basis:44% } }`
   stand hier und hat NIE gegriffen (Spezifität, s. Kopf der Grid-Regel). */