/*
 * Gewichtserfassung am Tablet.
 *
 * Das Geraet haengt fest an der Waage und wird mit Handschuhen bedient. Daraus
 * folgt fast alles hier: grosse Flaechen statt kleiner Symbole, ein einziger
 * Bildschirm ohne Blaettern, und ein dunkler Grund, der unter Hallenlicht
 * nicht spiegelt.
 *
 * Es gibt bewusst kein helles Thema. Das Geraet kennt nur eine Beleuchtung.
 */

:root[data-modus="waage"] { height: 100%; overflow: hidden; }
:root[data-modus="waage"] body {
  height: 100%; margin: 0; overflow: hidden;
  background: #0b1211; color: #e9f0ed;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Kein Doppeltipp-Zoom und keine Textauswahl: beides loest an einem
     Bediengeraet nur Unfaelle aus. */
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
:root[data-modus="waage"] .app,
:root[data-modus="waage"] #mobil { display: none !important; }

#waage {
  --grund: #0b1211; --panel: #141d1b; --panel-2: #1b2523;
  --linie: #27332f; --linie-hell: #3a4b45;
  --text: #e9f0ed; --text-2: #8ba39c; --text-3: #5f736d;
  --kupfer: #e09a5f; --teal: #45b8a8;
  --ok: #52c07f; --warn: #e0b13d; --bad: #e8695c;

  position: fixed; inset: 0; display: none;
  grid-template-rows: auto 1fr; background: var(--grund); font-size: 15px;
}
:root[data-modus="waage"] #waage { display: grid; }

#waage .mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
#waage .schild {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── Statusband ────────────────────────────────────────────────────────── */

#waage .band {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--linie); background: var(--panel);
}
#waage .band-fall {
  display: flex; align-items: center; gap: 18px; padding: 13px 20px;
  flex: 1; min-width: 0; border-right: 1px solid var(--linie);
}
#waage .fall-nr { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--kupfer); }
#waage .fall-text { min-width: 0; }
#waage .fall-text b { display: block; font-size: 15px; font-weight: 600; }
#waage .fall-text span {
  display: block; font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#waage .wechseln {
  display: flex; align-items: center; gap: 9px; padding: 0 22px;
  border-right: 1px solid var(--linie); background: var(--panel-2);
  color: var(--text-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border-top: 0; border-bottom: 0; border-left: 0; cursor: pointer;
}
#waage .wechseln:active { background: var(--linie); }
#waage .band-uhr { padding: 13px 20px; text-align: right; }
#waage .band-uhr b { display: block; font-size: 18px; font-weight: 600; }
#waage .band-uhr span { font-size: 11.5px; color: var(--text-3); }

/* ── Rumpf ─────────────────────────────────────────────────────────────── */

#waage .rumpf { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 0; }
#waage .links {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 13px;
  border-right: 1px solid var(--linie); min-height: 0;
}
#waage .rechts {
  padding: 12px 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  background: var(--panel); min-height: 0;
}

#waage .stufen { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#waage .stufe {
  padding: 10px 13px; border-radius: 8px; border: 1px solid var(--linie-hell);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 1px;
  text-align: left; color: var(--text); cursor: pointer;
}
#waage .stufe b { font-size: 15px; font-weight: 650; }
#waage .stufe span { font-size: 11.5px; color: var(--text-3); }
#waage .stufe.an { background: color-mix(in srgb, var(--teal) 17%, var(--panel-2)); border-color: var(--teal); }
#waage .stufe.an span { color: var(--teal); }

#waage .fraktionen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
#waage .frak {
  padding: 8px 6px; border-radius: 8px; border: 1px solid var(--linie);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 2px;
  min-height: 54px; justify-content: center; align-items: center;
  color: var(--text); cursor: pointer;
}
#waage .frak em { font-style: normal; font-size: 11px; line-height: 1.2; color: var(--text-2); text-align: center; }
#waage .frak b { font-size: 13.5px; font-weight: 650; }
#waage .frak.an { border-color: var(--kupfer); background: color-mix(in srgb, var(--kupfer) 16%, var(--panel-2)); }
#waage .frak.an em { color: var(--kupfer); }
#waage .fraktionen.aus { opacity: .32; pointer-events: none; }

/*
 * Die Tastatur bekommt den Platz, die Anzeige gibt ihn her.
 *
 * Getroffen werden muss die Taste, nicht die Zahl - eine Ziffer liest man
 * auch klein, aber ein Handschuh trifft keine kleine Flaeche. Die
 * Gewichtszeilen sind deshalb knapper gesetzt als im ersten Entwurf.
 */
#waage .werk { display: grid; grid-template-columns: 1fr 308px; gap: 14px; flex: 1; min-height: 0; }
#waage .anzeige { display: flex; flex-direction: column; gap: 7px; min-height: 0; }

#waage .zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 13px; border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--linie); color: var(--text); text-align: left; cursor: pointer;
}
#waage .zeile.aktiv { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
/* Die Zahl waechst mit dem Bildschirm: 4.8vh sind auf einem 800er-Tablet die
   vollen 38 Pixel, auf einem knappen Schirm entsprechend weniger - besser
   eine kleinere Zahl als eine Spalte, die ueberlaeuft. */
#waage .zeile .wert { font-size: clamp(26px, 4.8vh, 38px); font-weight: 600; letter-spacing: -.025em; }
#waage .zeile.aktiv .wert { color: var(--teal); }
#waage .zeile .einheit { font-size: 14px; color: var(--text-3); margin-left: 6px; }
#waage .zeile.netto { background: color-mix(in srgb, var(--kupfer) 13%, var(--panel-2)); border-color: var(--kupfer); cursor: default; }
#waage .zeile.netto .wert { color: var(--kupfer); font-size: clamp(30px, 5.8vh, 46px); }
#waage .zeile.netto.negativ { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, var(--panel-2)); }
#waage .zeile.netto.negativ .wert { color: var(--bad); }

/* Der Schreibzeiger ist selbst gezeichnet: es gibt kein Eingabefeld, das
   einen mitbraechte - genau deshalb erscheint auch nie eine Tastatur. */
#waage .caret {
  display: inline-block; width: 4px; height: .88em; margin-left: 3px;
  background: var(--teal); vertical-align: -.12em; animation: blinken 1.1s step-end infinite;
}
@keyframes blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #waage .caret { animation: none; } }

/*
 * Qualitaet und Entnahmeort als offene Auswahl.
 *
 * Alle Moeglichkeiten sichtbar, jede ein Griff. Die Alternative - eine Zeile,
 * die bei jedem Tippen weiterspringt - verlangt, sich den Zustand zu merken
 * und bis zu fuenfmal zu tippen. An einem Geraet, das mit Handschuhen und
 * halber Aufmerksamkeit bedient wird, ist das die schlechteste aller
 * Loesungen.
 */
/*
 * Qualitaet und Entnahmeort untereinander, jede Gruppe ueber die volle
 * Breite der Werkbank.
 *
 * Nebeneinander sass die Qualitaet in einem festen 220-Pixel-Kaefig - kamen
 * mehr oder breiter beschriftete Qualitaeten dazu, liefen ihre Chips ueber
 * den Kaefig hinaus mitten in die Entnahmeorte. Untereinander gibt es keine
 * Breite zu verteilen: jede Gruppe nimmt die ganze Zeile, und wie viele
 * Qualitaeten es gibt, entscheidet nur, wie breit jeder einzelne Chip wird.
 */
#waage .cu-details {
  display: flex; flex-direction: column; gap: 8px; padding: 9px 14px;
  border-radius: 9px; background: var(--panel-2); border: 1px solid var(--linie);
}
#waage .wahlgruppe { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; }
/* Gleich breite Spalten statt Umbruch: mit flex-wrap bekamen Cu1 bis Cu3
   78 Pixel und Cu4/Cu5 in der zweiten Reihe 120 - eine Reihe gleichrangiger
   Werte darf nicht ungleich aussehen. */
#waage .chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
#waage .chips .chip {
  min-height: 48px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--linie-hell); background: var(--grund); color: var(--text-2);
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; overflow: hidden;
}
#waage .chips .chip b {
  font-size: 16px; font-weight: 650;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
/* Die Bezeichnung darf umbrechen, aber nicht aus dem Chip laufen. */
#waage .chips .chip em {
  font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--text-3);
  text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
#waage .chips .chip:active { transform: translateY(1px); }
#waage .chips .chip.an {
  background: color-mix(in srgb, var(--kupfer) 22%, var(--grund));
  border-color: var(--kupfer); color: var(--kupfer);
}
#waage .chips .chip.an em { color: color-mix(in srgb, var(--kupfer) 70%, var(--text)); }

/*
 * Die Tasten fuellen ihre Zelle, statt eine feste Hoehe zu haben.
 *
 * `1fr` je Reihe macht sie so gross, wie der Platz hergibt - aber eine
 * Grid-Reihe schrumpft nie unter die Mindesthoehe ihres Inhalts. Mit
 * min-height 58 sprengten vier Reihen samt Speichern-Taste auf einem
 * 660 Pixel hohen Schirm die Zelle um 50 Pixel, und die danach gezeichnete
 * Qualitaetsauswahl lag ueber dem Knopf: ein Tipp auf "Speichern" traf
 * "Qualitaet". Deshalb ist die Untergrenze jetzt 48 Pixel - immer noch
 * handschuhtauglich - und der Speichern-Knopf haengt gar nicht mehr in der
 * Tastatur, sondern steht als .speichern-balken unter allem.
 */
#waage .tastatur {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr); gap: 8px; min-height: 0;
}
#waage .taste {
  min-height: 48px; border-radius: 10px; border: 1px solid var(--linie-hell);
  background: linear-gradient(180deg, var(--panel-2), #131c1a); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 600; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); cursor: pointer;
}
#waage .taste:active { transform: translateY(3px); box-shadow: none; }
#waage .taste.klein { font-size: 20px; color: var(--text-2); }

#waage .speichern-balken {
  min-height: 58px; border-radius: 10px; font-size: 20px; font-weight: 700;
  background: var(--teal); border: 1px solid var(--teal); color: #06201c; cursor: pointer;
}
#waage .speichern-balken:active { transform: translateY(2px); }
#waage .speichern-balken:disabled { opacity: .35; cursor: default; }

/* Der Platz der Werkbank, wenn nichts mehr zu wiegen ist. Die Marke oben
   ist dieselbe wie in der Fallwahl - ein Zustand, eine Sprache. */
#waage .uebergeben-hinweis {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 24px;
  border-radius: 9px; border: 1px dashed var(--linie-hell); color: var(--text-2);
}
#waage .uebergeben-hinweis b { font-size: 18px; color: var(--text); font-weight: 650; }
#waage .uebergeben-hinweis > span:last-child { font-size: 13px; line-height: 1.5; }

/* ── Statistik ─────────────────────────────────────────────────────────── */

#waage .statistik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#waage .kz { padding: 7px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--linie); }
#waage .kz .zahl { font-size: clamp(20px, 3.4vh, 26px); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
#waage .kz .neben { font-size: 11px; color: var(--text-2); margin-top: 1px; }
#waage .kz.kupfer { border-color: var(--kupfer); background: color-mix(in srgb, var(--kupfer) 12%, var(--panel-2)); }
#waage .kz.kupfer .zahl { color: var(--kupfer); }
/* Unter dem vereinbarten Cu-Gehalt: warnen, aber nicht alarmieren - waehrend
   der Verarbeitung ist die Ausbeute fast immer noch unvollstaendig. */
#waage .kz.kupfer.unter { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, var(--panel-2)); }
#waage .kz.kupfer.unter .zahl { color: var(--warn); }

/*
 * Mengenbalken, einzeilig: Name, Balken, Zahl.
 *
 * Die zweizeilige Form der mobilen App kostete hier zusammen mit den
 * Kennzahlen die halbe Bildschirmhoehe - auf einem Telefon ist die Spalte
 * der ganze Schirm, hier teilt sie ihn mit der Wiegehistorie, und die ist
 * das Arbeitswerkzeug.
 */
#waage .mengen {
  grid-column: 1 / -1; padding: 8px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 6px;
}
#waage .srow { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 10px; }
#waage .sl-name { font-size: 12px; color: var(--text-2); white-space: nowrap; }
#waage .sl-wert { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
#waage .sl-wert small { font-size: 11px; color: var(--text-3); font-weight: 500; }
#waage .meter { height: 8px; border-radius: 5px; background: var(--linie); overflow: hidden; }
#waage .meter i { display: block; height: 100%; border-radius: 5px; background: var(--teal); }

/* ── Wiegehistorie ─────────────────────────────────────────────────────── */

#waage .historie {
  display: flex; flex-direction: column; min-height: 0; border-radius: 9px;
  border: 1px solid var(--linie); background: var(--panel-2); overflow: hidden;
}
#waage .hist-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 13px; border-bottom: 1px solid var(--linie); background: var(--grund);
}
#waage .hist-liste { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
/*
 * Feste Spalte fuer das Gewicht, rechtsbuendig.
 *
 * Mit `auto` schrumpfte sie auf die Breite ihres Inhalts: "530" bekam 28
 * Pixel, "12'000" das Doppelte - die wichtigste Zahl der Zeile war die
 * kleinste und sprang von Zeile zu Zeile. Zahlen in einer Liste muessen
 * fluchten, sonst muss man jede einzeln lesen.
 */
#waage .hz {
  display: grid; grid-template-columns: 46px 1fr 96px 22px; align-items: center; gap: 10px;
  padding: 3px 13px; min-height: 38px;
  width: 100%; text-align: left; background: none; color: var(--text); cursor: pointer;
  /* Erst alle Raender weg, dann den einen setzen, den wir wollen. Ohne das
     erste `border: 0` behaelt der Knopf oben, links und rechts den hellen
     Vorgaberahmen des Browsers - im dunklen Grund ein weisser Kasten. */
  border: 0; border-bottom: 1px solid var(--linie);
}
#waage .hz:last-child { border-bottom: 0; }
#waage .hz:active { background: var(--linie); }
#waage .hz .zeit { font-size: 12px; color: var(--text-3); }
#waage .hz .was { min-width: 0; }
#waage .hz .was b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
#waage .hz .was span {
  display: block; font-size: 10.5px; line-height: 1.25; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#waage .hz .kg { font-size: 16px; font-weight: 650; text-align: right; }
#waage .hz .kg::after { content: " kg"; font-size: 11px; font-weight: 500; color: var(--text-3); }
#waage .hz .griff { text-align: center; font-size: 17px; color: var(--text-3); }
#waage .hz.stufe1 { background: color-mix(in srgb, var(--teal) 7%, transparent); }
#waage .hz.gesperrt { cursor: default; }
#waage .hist-leer { padding: 26px 16px; text-align: center; color: var(--text-3); font-size: 13.5px; }

#waage .abschluss {
  height: 46px; border-radius: 9px; border: 1px solid var(--linie-hell);
  background: var(--panel-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; cursor: pointer; width: 100%;
}
#waage .abschluss.bereit { background: var(--teal); border-color: var(--teal); color: #06201c; }
#waage .abschluss:disabled { opacity: .5; cursor: default; }

/* ── Ueberlagerungen ───────────────────────────────────────────────────── */

#waage .schleier { position: fixed; inset: 0; background: rgba(4, 9, 8, .74); z-index: 20; }

/* Breit genug fuer Anzeige UND Tastatur nebeneinander. Ein schmales Blatt
   haette die Tastatur hinter dem Schleier gelassen - man haette eine Waegung
   oeffnen, aber nicht aendern koennen. */
#waage .blatt-werk { display: grid; grid-template-columns: 1fr 236px; gap: 13px; }

#waage .blatt {
  position: fixed; right: 0; top: 0; bottom: 0; width: 720px; z-index: 21;
  background: var(--panel); border-left: 1px solid var(--linie-hell);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .8);
}
#waage .blatt h4 { margin: 0; font-size: 19px; font-weight: 650; }
#waage .blatt .quelle {
  padding: 11px 14px; border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: baseline;
}
#waage .blatt .quelle b { font-size: 20px; font-weight: 650; }
#waage .knopfreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
#waage .knopf {
  height: 64px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 15.5px; font-weight: 650; border: 1px solid var(--linie-hell);
  background: var(--panel-2); color: var(--text); cursor: pointer;
}
#waage .knopf.loeschen { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--panel-2)); }
#waage .knopf.uebernehmen { grid-column: 1 / -1; background: var(--teal); border-color: var(--teal); color: #06201c; }
#waage .warnhinweis {
  font-size: 12.5px; color: var(--text-2); line-height: 1.45;
  border-left: 3px solid var(--warn); padding-left: 12px;
}

#waage .wahl {
  position: fixed; inset: 0; z-index: 21; background: var(--grund);
  display: grid; grid-template-rows: auto 1fr;
}
#waage .wahl-rumpf { padding: 20px 22px; overflow-y: auto; position: relative; }

/*
 * Ziehen zum Aktualisieren.
 *
 * Die Anzeige liegt hinter der Liste und wird erst sichtbar, wenn diese
 * nach unten wandert - so wie man es vom Telefon kennt. Der Balken fuellt
 * sich in einer Sekunde; ist er voll, wird geladen. Das ist die Rueckmeldung
 * auf die Frage "halte ich lang genug?", die eine blosse Beschriftung nicht
 * beantworten kann.
 */
#waage .zieh {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0 0; opacity: 0; pointer-events: none;
}
#waage .zieh b { font-size: 14px; font-weight: 600; color: var(--text-2); }
#waage .zieh i {
  display: block; width: 140px; height: 4px; border-radius: 3px;
  background: var(--linie); overflow: hidden;
}
#waage .zieh i::after {
  content: ""; display: block; height: 100%; width: 0; background: var(--teal);
}
#waage .zieh.bereit b { color: var(--teal); }
#waage .zieh.bereit i::after { animation: zieh-halten 1s linear forwards; }
@keyframes zieh-halten { to { width: 100%; } }
/* Ohne Bewegung bleibt der Balken als reine Zustandsanzeige stehen. */
@media (prefers-reduced-motion: reduce) {
  #waage .zieh.bereit i::after { animation: none; width: 100%; }
}
#waage .wahl-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
/* Gruppentitel ueber die volle Breite: kein Rahmen, kein Grund, nur die
   Schrift, die in dieser App ohnehin jede Rubrik traegt. */
#waage .wahl-titel {
  grid-column: 1 / -1; padding: 10px 2px 0;
}
#waage .wahl-titel:first-child { padding-top: 0; }
#waage .wahl-karte {
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 6px;
  text-align: left; color: var(--text); cursor: pointer;
}
#waage .wahl-karte.an { border-color: var(--kupfer); background: color-mix(in srgb, var(--kupfer) 12%, var(--panel-2)); }
#waage .wahl-oben { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#waage .wahl-oben b { font-size: 20px; font-weight: 700; color: var(--kupfer); }
#waage .marke {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid currentColor;
}
#waage .marke.laeuft { color: var(--teal); }
#waage .marke.offen { color: var(--text-3); }
#waage .marke.fertig { color: var(--ok); }
/* Die Ausbeute traegt die Kupferfarbe, aber nur zu gut der Haelfte: sie
   soll gefunden werden, nicht die Fallnummer bedraengen. */
#waage .wahl-cu {
  font-size: 15px; font-weight: 600;
  color: color-mix(in srgb, var(--kupfer) 62%, transparent);
}
#waage .wahl-karte .firma { font-size: 14.5px; font-weight: 600; }
#waage .wahl-karte .ware { font-size: 12.5px; color: var(--text-2); }
#waage .wahl-zahlen { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-2); }
#waage .wahl-zahlen b { color: var(--text); font-weight: 600; }

#waage .leerstand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; color: var(--text-2); text-align: center; padding: 40px;
}
#waage .leerstand b { font-size: 19px; color: var(--text); font-weight: 650; }

/* Meldungen */
#waage .meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 30;
  padding: 13px 22px; border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--linie-hell); font-size: 15px; font-weight: 600;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .8); max-width: 70vw; text-align: center;
}
#waage .meldung.bad { border-color: var(--bad); color: var(--bad); }
#waage .meldung.ok { border-color: var(--ok); color: var(--ok); }

#waage button:focus-visible, #waage [tabindex]:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}