/* desktop-bedarf.css: das Bild-Widget `bedarf` (19.10.2026), gezeichnet von desktop-bedarf.js.
   Nur Farben aus den Variablen des Designs; im dunklen Design keine helle Fläche. */
.bdFlaeche { --bdGrund: var(--gold); --bdBrain: #1D9E75; --bdMensch: #7F77DD; --bdSicherung: #BA7517;
  --bdLeer: color-mix(in srgb, var(--dim) 30%, transparent); --bdFlaeche: color-mix(in srgb, var(--gold) 32%, transparent);
  gap: 10px; overflow: hidden; }
.bdFein { margin: 0; font-size: 11.5px; color: var(--dim); }

.bdOben { display: flex; align-items: center; gap: 14px; min-height: 0; }
.bdRing { position: relative; flex: none; width: clamp(84px, 30cqh, 128px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; animation: bdDrehen .9s ease-out both; }
.bdRing::before { content: ''; position: absolute; inset: 13%; border-radius: 50%; background: var(--panel); }
.bdRingMitte { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-align: center; }
.bdRingMitte b { font-size: clamp(14px, 6cqh, 19px); color: var(--kopf, var(--text)); font-variant-numeric: tabular-nums; }
.bdRingMitte span { font-size: 11px; color: var(--dim); max-width: 9ch; }
@keyframes bdDrehen { from { transform: rotate(-90deg) scale(.7); opacity: 0; } }

.bdKacheln { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; min-width: 0; }
.bdKachel { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--rundKlein, 9px);
  border: 1px solid var(--linie); background: color-mix(in srgb, var(--linie) 25%, transparent); min-width: 0; animation: bdAuf .4s ease-out both; }
.bdKachel b { font-size: 15px; color: var(--kopf, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdKachel span:last-child { font-size: 10.5px; color: var(--dim); line-height: 1.2; overflow-wrap: anywhere; }
.bdSymbol .ikon { width: 16px; height: 16px; color: var(--gold); }
@keyframes bdAuf { from { opacity: 0; transform: translateY(5px); } }

.bdLast .bdMini { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 30%, transparent); overflow: hidden; margin: 2px 0 1px; }
.bdMiniRuhe { display: block; height: 100%; background: var(--gold); }
.bdMiniWort { font-size: 10.5px; color: var(--dim); }
.bdAnnahme b::after { content: ' ~'; color: var(--dim); }
.bdAnnahmen { display: flex; flex-wrap: wrap; gap: 6px; }
.bdAnnahmeChip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  color: var(--text); border: 1px solid var(--linie); background: color-mix(in srgb, var(--linie) 25%, transparent); }
.bdAnnahmeChip .ikon { width: 13px; height: 13px; color: var(--gold); }
.bdBalken { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.bdZeileKopf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); }
.bdZeileKopf b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdBahn { position: relative; height: 10px; border-radius: 5px; background: var(--bdLeer); overflow: hidden; }
.bdFuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; animation: bdWachsen .8s ease-out both; transform-origin: left; }
.bdSpanne { position: absolute; top: 0; bottom: 0; opacity: .35; border-radius: 5px; }
@keyframes bdWachsen { from { transform: scaleX(0); } }

.bdLegende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--dim); }
.bdChip { display: inline-flex; align-items: center; gap: 5px; }
.bdChip b { white-space: nowrap; }
.bdChip b { color: var(--text); font-variant-numeric: tabular-nums; }
.bdPunkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.bdStufen { display: flex; gap: 6px; align-items: flex-end; flex: 1 1 40%; min-height: 70px; }
.bdStufe { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: 100%; padding: 4px 3px 0;
  border-radius: 8px; }
.bdStufe.bdZiel { background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.bdSaeulen { flex: 1; display: flex; gap: 3px; align-items: flex-end; min-height: 0; }
.bdSaeule { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bdEnde { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; display: flex; align-items: flex-end;
  position: relative; animation: bdSteigen .8s ease-out both; transform-origin: bottom; }
.bdHeute { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; }
@keyframes bdSteigen { from { transform: scaleY(0); } }
.bdStufeFuss { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--dim); }
.bdStufeFuss .ikon { width: 13px; height: 13px; }
.bdZiel .bdStufeFuss { color: var(--gold); }

.bdZielZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.bdZielMarke { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent); animation: bdPuls 2.4s ease-in-out infinite; }
.bdZielMarke .ikon { width: 14px; height: 14px; }
@keyframes bdPuls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 10%, transparent); } }
.bdKurve { width: 100%; flex: 1 1 35%; min-height: 70px; display: block; }

@container (max-height: 260px) { .bd_einheiten .bdBalken, .bd_kunden .bdKurve { display: none; } }
@media (prefers-reduced-motion: reduce) { .bdFlaeche * { animation: none !important; } }