/* A.0.101.0 — die Blut- und Organbank (tafeln/bank.js, daten/bankportale.js). Zwei Dinge im Raum als das, was sie sind: der
   Blutkühlschrank (Glastür, Fächer, Beutel mit Menge und Haltbarkeit, Anzeige oben) und das Kühlfach der Organe (Transportboxen mit
   Deckel); daneben je ein Protokoll auf Papier. Zwei Dienste als Seiten im Netz, Adressleiste wie Shoppital: die Blutbörse
   „lebenssaft“ (Weinrot, Creme) und die „Organvermittlung Mitte“ (Petrol, Nachtblau — sachlich, ohne Witz). */

/* ── Kühlschrank und Kühlfach (im Pergament der Tafel) ───────────────── */
.bk-tafel { width: min(96%, 58em); }
.bk-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: 0 0 .7em; }
.bk-wege > span { font-size: .82em; color: #6b5a44; font-weight: 700; }
.bk-haupt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1em; align-items: start; }
.bk-schrank, .kf-fach { padding: .55em; border-radius: .7em; background: linear-gradient(#e9edf1, #cdd5dd); border: 2px solid #8d99a6;
  box-shadow: inset 0 0 0 3px #f6f8fa, 0 .2em .5em rgba(40, 50, 60, .18); }
.bk-anzeige { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin-bottom: .45em; padding: .25em .6em; border-radius: .35em;
  background: #1d2a33; color: #8ff0c0; font: 700 .85em/1.3 ui-monospace, 'DejaVu Sans Mono', monospace; letter-spacing: .03em; }
.bk-anzeige b { color: #e8fff4; font-weight: 700; }
.bk-glas { position: relative; padding: .5em; border-radius: .45em; background: linear-gradient(115deg, rgba(220, 240, 255, .75), rgba(190, 220, 240, .55) 45%, rgba(230, 245, 255, .8));
  border: 1px solid #a9b7c4; min-height: 9em; }
.bk-glas::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 38%, transparent 46%); pointer-events: none; }
/* je Posten ein Fach: eine Reihe Beutel auf dem Gitterboden, darunter Menge und Haltbarkeit */
.bk-faecher { display: flex; flex-direction: column; gap: .35em; }
.bk-posten { margin: 0; padding: .2em .3em .15em; border-bottom: 3px solid #9fb0bf; }
.bk-reihe { display: flex; flex-wrap: wrap; gap: .1em .2em; align-items: flex-end; }
.bk-beutel { width: 2.6em; height: auto; filter: drop-shadow(0 .1em .1em rgba(40, 20, 20, .25)); }
.bk-reihe .bk-beutel { width: 1.75em; }
.bk-posten figcaption { margin-top: .15em; font-size: .72em; line-height: 1.25; color: #24313c; }
/* A.0.109.0: angebotenes Blut bleibt im Kühlschrank, bis ein Käufer es holt — mit gelbem Etikett am Fach */
.bk-posten.bk-angeboten { border-bottom-color: #d9a52c; background: rgba(255, 214, 102, .22); }
.bk-angeboten .bk-beutel { opacity: .8; }
.bk-angeboten figcaption b { color: #7a4f00; }
.bk-leer { margin: .4em 0; color: #50606e; font-weight: 700; font-size: .9em; }
.bk-schrank > .balken { display: block; width: 100%; margin-top: .45em; }
.bk-protokoll { padding: .55em .8em .7em; background: #fffdf5; border: 1px solid #d9cfb4; border-radius: .3em; box-shadow: 0 .15em .35em rgba(60, 40, 10, .15);
  background-image: repeating-linear-gradient(transparent 0 1.55em, #ece3cb 1.55em calc(1.55em + 1px)); }
.bk-protokoll h3 { margin: 0 0 .2em; font: 700 1.05em/1.3 var(--zier); }
.bk-protokoll h4 { margin: .5em 0 .1em; font-size: .85em; color: #6b5a44; }
.bk-zeile { display: flex; justify-content: space-between; gap: .6em; margin: 0; font-size: .82em; line-height: 1.55; }
.bk-zeile span { color: #5c4d38; }
.bk-zeile.warnung b { color: #b0281b; }
.bk-zeile .fehlt { color: #b0281b; font-style: normal; }
.kf-fach > h4 { margin: .6em 0 .3em; font-size: .85em; color: #2c3d4c; }
.kf-innen { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr)); gap: .45em; padding: .5em; border-radius: .45em;
  background: linear-gradient(#5d6d7c, #485765); box-shadow: inset 0 .2em .5em rgba(0, 0, 0, .35); }
.kf-innen.kf-unterwegs { background: repeating-linear-gradient(135deg, #e7ecf0 0 .6em, #dde3e8 .6em 1.2em); box-shadow: none; border: 1px dashed #9aa7b3; }
.kf-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .65em .35em .4em; text-align: center; border-radius: .35em;
  background: #fbfcfd; border: 1px solid #c7d0d8; box-shadow: 0 .12em .2em rgba(0, 0, 0, .25); font-size: .8em; line-height: 1.2; color: #24313c; }
.kf-deckel { position: absolute; left: -1px; right: -1px; top: -1px; height: .45em; border-radius: .35em .35em 0 0; background: #2f6fb3; }
.kf-box.alt .kf-deckel { background: #a35a3b; }
.kf-box.kommt { background: rgba(255, 255, 255, .75); border-style: dashed; }
.kf-box.kommt .kf-deckel { background: #7fa7cf; }
.kf-box.leer { min-height: 4.6em; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .35); box-shadow: none; }
.kf-organ { font-size: 1.7em; line-height: 1.1; }
.kf-box small { color: #50606e; }
.kf-box em { font-style: normal; font-weight: 700; color: #2f6fb3; }
.kf-box .balken { width: 100%; }

/* ── Die Dienste im Netz: gemeinsamer Rahmen ─────────────────────────── */
.tafel.bp-tafel { width: min(98%, 60em); height: min(100%, 44em); background: var(--bp-grund); color: var(--bp-tinte); border: 1px solid #b0a9a4; border-radius: .55em; }
.bp-tafel .tafel-kopf { background: linear-gradient(#eff0f2, #dee1e5); color: var(--bp-tinte); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--bp-linie); }
.bp-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--bp-linie); color: var(--bp-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.bp-tafel .tafel-zu { color: var(--bp-tinte); width: 1.9em; height: 1.6em; border-radius: .35em; display: grid; place-items: center; background: transparent; }
.bp-tafel .tafel-zu:hover, .bp-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }
.bp-tafel .tafel-inhalt { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bp-tafel .tafel-fuss { background: var(--bp-sand); border-top: 1px solid var(--bp-linie); }
.bp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bp .knopf:focus-visible { outline: 2px solid var(--bp-farbe); outline-offset: 2px; }
.bp-kopf { flex: none; display: flex; align-items: center; gap: .9em; padding: .45em 1em; background: var(--bp-kopf); color: #fff; }
.bp-logo { display: flex; align-items: center; gap: .35em; }
.bp-zeichen { width: 1.8em; height: 1.8em; flex: none; }
.bp-logo b { font: 700 1.38em/1 var(--zier); letter-spacing: -.01em; color: #fff; }
.bp-claim { color: var(--bp-kopf-leise); font-weight: 700; font-size: .86em; }
.bp-claim i { color: #fff; font-style: italic; }
.bp-kunde { margin-left: auto; display: flex; align-items: center; gap: .35em; padding: .2em .7em .2em .5em; border-radius: 999px; background: rgba(255, 255, 255, .12);
  font-size: .85em; white-space: nowrap; min-width: 0; }
.bp-kunde b { overflow: hidden; text-overflow: ellipsis; }
.bp-kunde small { color: var(--bp-kopf-leise); font-weight: 700; margin-right: .15em; }
.bp-kunde .logo { width: 1.5em; height: 1.5em; flex: none; }
.bp-leiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .4em; padding: .35em 1em; background: var(--bp-sand); border-bottom: 1px solid var(--bp-linie); }
.bp .knopf.bp-reiter { padding: .25em .85em; border-radius: 999px; border: 1px solid var(--bp-linie); background: #fff; color: var(--bp-tinte); font-weight: 700; font-size: .88em; }
.bp .knopf.bp-reiter.an { background: var(--bp-farbe); border-color: var(--bp-farbe); color: #fff; }
.bp-band { margin-left: auto; font-size: .82em; color: var(--bp-leise); }
.bp-band b { color: var(--bp-tinte); }
.bp-seite { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .8em 1em 1em; }
.bp-erklaerung { margin: 0 0 .8em; font-size: .86em; line-height: 1.45; color: var(--bp-leise); }
.bp-leer { margin: .3em 0; padding: .7em .9em; border: 1px dashed var(--bp-linie); border-radius: .6em; color: var(--bp-leise); font-weight: 700; }
.bp h3 { margin: 0 0 .5em; font: 700 1.05em/1.2 var(--zier); color: var(--bp-tinte); }

/* ── lebenssaft: die Blutbörse ───────────────────────────────────────── */
.tafel.ls-tafel { --bp-grund: #fffaf6; --bp-tinte: #2a1a1f; --bp-leise: #7a6266; --bp-linie: #ecdcd6; --bp-sand: #f8eee9; --bp-farbe: #b3122b;
  --bp-kopf: #6d0f20; --bp-kopf-leise: #f0c8cf; }
.ls-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
.ls-karte { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .7em; align-items: start; padding: .65em .75em; background: #fff;
  border: 1px solid var(--bp-linie); border-radius: .7em; box-shadow: 0 .12em .35em rgba(109, 15, 32, .08); }
.ls-karte .bk-beutel { width: 3.2em; }
.ls-text { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.ls-text h4 { margin: 0; font: 700 1em/1.2 var(--zier); }
.ls-menge { margin: 0; font-size: .95em; }
.ls-marke { display: inline-block; margin-left: .3em; padding: .05em .45em; border-radius: .3em; font: 700 .72em/1.4 var(--schrift); font-style: normal; vertical-align: .1em; }
.ls-marke.guenstig { background: #dff3e6; color: #1d6b3c; }
.ls-marke.teuer { background: #fbe3dc; color: #9b3b1d; }
.ls-klein { margin: 0; font-size: .78em; color: var(--bp-leise); }
.bp .knopf.ls-kaufen { align-self: flex-start; margin-top: .2em; padding: .35em 1em; border: none; border-radius: .5em; background: var(--bp-farbe); color: #fff; font-weight: 700; }
.bp .knopf.ls-kaufen:hover:not(:disabled) { background: #8e0d22; }
.bp .knopf.ls-kaufen:disabled { background: #cdbfc1; filter: none; opacity: 1; }
.ls-grund { margin: 0; font-size: .74em; font-weight: 700; color: #9b1c2e; }
.ls-verkauf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1em; align-items: start; }
.ls-formular, .ls-eigene { padding: .7em .9em; background: #fff; border: 1px solid var(--bp-linie); border-radius: .7em; }
.ls-bestand { margin: 0 0 .5em; font-size: .85em; color: var(--bp-leise); }
.ls-summe { display: flex; align-items: center; gap: .6em; margin: .6em 0 0; padding-top: .5em; border-top: 1px dashed var(--bp-linie); }
.ls-summe .bk-beutel { width: 2.2em; }
.ls-eigenes { display: flex; justify-content: space-between; align-items: center; gap: .5em; margin: 0 0 .4em; font-size: .88em; }
.ls-eigenes span { display: flex; flex-direction: column; }
.ls-eigenes small { color: var(--bp-leise); }

/* ── Organvermittlung Mitte: sachlich wie eine Behörde ───────────────── */
.tafel.ov-tafel { --bp-grund: #f7fafb; --bp-tinte: #12304a; --bp-leise: #546a7b; --bp-linie: #d5e1e6; --bp-sand: #edf3f5; --bp-farbe: #1f7f78;
  --bp-kopf: #12304a; --bp-kopf-leise: #b9d6dc; }
.ov-formular { padding: .7em .9em .8em; background: #fff; border: 1px solid var(--bp-linie); border-top: .25em solid var(--bp-farbe); border-radius: .4em; }
.ov-zeile { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto; align-items: center; gap: .3em .8em; padding: .45em 0; border-top: 1px solid var(--bp-linie); }
.ov-zeile:first-of-type { border-top: none; }
.ov-organ { font-size: 1.5em; text-align: center; }
.ov-wer { display: flex; flex-direction: column; min-width: 0; }
.ov-wer small { color: var(--bp-leise); }
.ov-status { font-size: .82em; color: var(--bp-leise); display: flex; align-items: center; gap: .4em; }
.ov-status .balken { width: 4em; }
.ov-status.bereit { color: #1d6b3c; font-weight: 700; }
.ov-status.unterwegs { color: #8a5a00; font-weight: 700; }
.bp .knopf.ov-knopf { padding: .3em .9em; border: 1.5px solid var(--bp-farbe); border-radius: .35em; background: var(--bp-farbe); color: #fff; font-weight: 700; }
.bp .knopf.ov-knopf:hover:not(:disabled) { background: #16615b; }
.bp .knopf.ov-knopf.leise { background: #fff; color: var(--bp-farbe); }

/* schmal (Handy) */
@container (max-width: 700px) {
  .bk-haupt, .ls-verkauf { grid-template-columns: minmax(0, 1fr); }
  .ls-karten { grid-template-columns: minmax(0, 1fr); }
  .bp-claim { display: none; }
  .bp-band { margin-left: 0; width: 100%; }
  .ov-zeile { grid-template-columns: 2em minmax(0, 1fr) auto; }
  .ov-status { grid-column: 2 / -1; grid-row: 2; }
}
@container (max-width: 480px) { .bp-kunde small { display: none; } }
@media (max-height: 500px) {
  .bp-kopf { padding: .3em .8em; }
  .bp-logo b { font-size: 1.15em; }
  .bp-zeichen { width: 1.5em; height: 1.5em; }
  .bp-erklaerung { display: none; }
}