/* ============================================================================
   Illustrationen · Kopfband, Icon, Personen-Avatar (src/Helpers/Illu.php)
   Stil der Concept Cartoons: neutrale Figuren, Requisiten je Art, ruhige Flächen.
   Wofür: Wiedererkennung und Orientierung — nie die einzige Information.
   Alles ist aria-hidden; der Text daneben bleibt HTML.
   Farben nur über Kit-Tokens mit Rückfallwert. Web-Ebene: Radius 12px.
   ========================================================================== */

/* Kopfband: volle Breite, niedrig, mittig zugeschnitten (viewBox 960×160, slice). */
.illu-kopf {
  --illu-h: 120px;
  display: block;
  width: 100%;
  height: var(--illu-h);
  max-height: 240px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--brd-tuerkis-tint, #B7DCE9);
  background: var(--brd-tuerkis-soft, #E8F4F8);
  box-sizing: border-box;
  margin: 0 0 16px;
}
.illu-kopf--hell { background: var(--brd-weiss, #FFFFFF); border-color: var(--brd-hellgrau, #F2F2F2); }
.illu-kopf > svg { display: block; width: 100%; height: 100%; }

/* Handy: niedriger, die Szene bleibt mittig (die Ränder werden abgeschnitten). */
@media (max-width: 639px) {
  .illu-kopf { height: calc(var(--illu-h) * 0.75); max-height: 96px; margin-bottom: 12px; }
}

/* Rundes Icon und Avatar: Größe über --illu-px, ruhiger Rand aus dem Türkis-Tint. */
.illu-icon {
  --illu-px: 40px;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--illu-px);
  height: var(--illu-px);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  background: var(--brd-tuerkis-soft, #E8F4F8);
  box-shadow: inset 0 0 0 1px var(--brd-tuerkis-tint, #B7DCE9);
  line-height: 0;
}
.illu-icon > svg { display: block; width: 100%; height: 100%; }

/* Druck: Kopfbänder entfallen (Papier spart Fläche), Icons bleiben klein und graustufig. */
@media print {
  .illu-kopf { display: none !important; }
  .illu-icon { filter: grayscale(1); box-shadow: inset 0 0 0 1px var(--brd-text, #3F3F3F); }
}

/* Druckansichten (Dokument-Ebene, Output-Matrix in design-system/VISUALISIERUNG.md):
   Wer das Kopfband ausdrücklich in .illu-druck setzt, behält es auf Papier — niedrig, volle
   Satzbreite, Radius 2px, Trennlinie #BEBEBE statt Türkis-Rahmen. */
.illu-druck .illu-kopf { height: 20mm; max-height: none; border-radius: 2px; border-color: var(--brd-grau, #BEBEBE); margin: 0 0 4mm; }
.illu-druck-icon { display: inline-flex; align-items: center; gap: 2mm; }
.illu-druck-icon .illu-icon { width: 7mm; height: 7mm; box-shadow: inset 0 0 0 1px var(--brd-grau, #BEBEBE); }
@media print {
  .illu-druck .illu-kopf { display: block !important; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .illu-druck-icon .illu-icon { filter: none; box-shadow: inset 0 0 0 1px var(--brd-grau, #BEBEBE); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Musterseite (Einstellungen → Bausteine): Raster der Arten. */
.illu-muster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 16px; margin: 0 0 16px; }
.illu-muster-karte { margin: 0; background: var(--brd-weiss, #FFFFFF); border: 1px solid var(--brd-tuerkis-tint, #B7DCE9); border-radius: 12px; padding: 12px; }
.illu-muster-karte .illu-kopf { margin-bottom: 8px; }
.illu-muster-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.illu-muster-kopf code { font-size: .85rem; }
.illu-muster-meta { font-size: .85rem; color: var(--brd-text-weich, #5A5A5A); margin: 0; }
.illu-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }