/* Bedarfsliste pflegen (#2589). Nur Bausteine-Tokens; Schrift mindestens 1rem, Tippflächen --tippflaeche. */

.bdp :focus-visible { outline: 3px solid var(--farbe-link); outline-offset: 2px; }

.bdp-kopf { align-items: flex-end; gap: var(--abstand-md); }
.bdp-kopf p { max-inline-size: 62ch; text-wrap: pretty; }

.bdp-lage { margin: 0 0 var(--abstand-md); color: var(--farbe-text-gedaempft); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.bdp .meldung { margin-block-end: var(--abstand-md); }

/* Editor */
.bdp-editor { margin-block-end: var(--abstand-lg); padding: var(--abstand-lg); }
.bdp-editor h2 { margin: 0 0 var(--abstand-md); }
.bdp-editor .feld { margin-block-end: var(--abstand-md); }
.bdp-zeile { display: grid; grid-template-columns: 1fr; gap: 0 var(--abstand-md); }
.bdp-auswahl { margin: 0 0 var(--abstand-md); }
.bdp-mehr { margin-block-end: var(--abstand-md); }
.bdp-mehr summary { min-block-size: var(--tippflaeche); display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--farbe-link); }
.bdp-mehr[open] summary { margin-block-end: var(--abstand-sm); }
.bdp-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); }
.bdp-aktionen .knopf { flex: 1 1 10rem; }

/* Liste */
.bdp-laden, .bdp-leer { color: var(--farbe-text-gedaempft); }
.bdp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-md); }
.bdp-karte { padding: var(--abstand-md); border-inline-start: 6px solid var(--farbe-linie); }
.bdp-karte--dringend { border-inline-start-color: var(--farbe-notfall); }
.bdp-karte--gedeckt { border-inline-start-color: var(--farbe-ok); }
.bdp-karte--aus { background: var(--farbe-neutral-bg); }
.bdp-karte__kopf { display: grid; gap: var(--abstand-xs); }
.bdp-karte__titel { margin: 0; font-size: var(--schrift-titel); overflow-wrap: anywhere; }
.bdp-marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-xs) var(--abstand-sm); margin: 0; }
.bdp-kategorie { color: var(--farbe-text-gedaempft); }

.bdp-balken { block-size: 0.75rem; margin-block-start: var(--abstand-sm); border-radius: var(--radius-rund); background: var(--farbe-neutral-bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--farbe-linie); }
.bdp-balken__fuellung { display: block; block-size: 100%; inline-size: 0; background: var(--farbe-marke); border-radius: inherit; }
.bdp-karte--gedeckt .bdp-balken__fuellung { background: var(--farbe-ok); }
.bdp-menge { margin: var(--abstand-xs) 0 var(--abstand-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.bdp-schnell, .bdp-weiter { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); }
.bdp-weiter { margin-block-start: var(--abstand-sm); }
.bdp-schnell .knopf, .bdp-weiter .knopf { min-block-size: var(--tippflaeche); }
.bdp-stufe { min-inline-size: 4.5rem; font-variant-numeric: tabular-nums; }
.bdp-weiter .knopf { flex: 1 1 12rem; }

.bdp-fuss { margin-block-start: var(--abstand-lg); color: var(--farbe-text-gedaempft); }

@media (min-width: 40rem) {
  .bdp-zeile { grid-template-columns: 1fr 1fr 1fr; }
  .bdp-zeile .feld__hilfe { grid-column: auto; }
}
@media (min-width: 64rem) {
  .bdp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .bdp-balken__fuellung { transition: inline-size 0.3s ease; }
}