/* LM-B · Liquid-Mixer – Bau-Stil aus dem abgenommenen Entwurf MV-L1 (entwurf/assets/lm.css ohne Entwurfsrahmen).
   Präfix lm-; alles andere sind vorhandene Klassen (Theme + tools.css; die Seite trägt zusätzlich hk-tools-page--mixmate,
   damit die MixMate-Bausteine greifen, wie im Entwurf). Auch auf der Produktseite geladen (.hk-lm-pdp, Stufe 3/4).
   Gebaut von tools/build-liquid-mixer-assets.mjs zu public/tools-liquid-mixer.<hash>.css. Formregel S5: Wählen rund
   (Chips), Handeln/Eingeben Rechteck 8 px, Hauptknopf Tinte. */

/* ---------- Farben der Flasche (Aroma / Shot / Base) und Töne der Geschmacksrichtung */
body.hk-relaunch .hk-tools-page--liquid-mixer, body.hk-relaunch .hk-lm-pdp {
  --lm-aroma: #E0A21B; --lm-auf-aroma: #000; --lm-shot: var(--hk-vape-punkt, #0F7E84); --lm-auf-shot: #fff; --lm-base: var(--hk-n2, #E0E0E0); --lm-auf-base: #000;
  --lm-ton-suess: var(--hk-rose, #A8325E); --lm-auf-suess: var(--hk-on-rose, #fff);
  --lm-ton-kuehl: #6CB8D6; --lm-auf-kuehl: #000;
  --lm-ton-limette: var(--hk-limette, #4F7A12); --lm-auf-limette: var(--hk-on-limette, #fff);
  --lm-ton-wuerzig: var(--hk-braun, #6B4423); --lm-auf-wuerzig: var(--hk-on-braun, #fff);
}
html[data-theme="dark"] body.hk-relaunch .hk-tools-page--liquid-mixer, html[data-theme="dark"] body.hk-relaunch .hk-lm-pdp { --lm-aroma: #F2B93B; --lm-base: #5C5C5C; --lm-auf-base: #fff; --lm-auf-shot: #000; --lm-ton-kuehl: #8FD3EE; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.hk-relaunch .hk-tools-page--liquid-mixer, html:not([data-theme="light"]) body.hk-relaunch .hk-lm-pdp { --lm-aroma: #F2B93B; --lm-base: #5C5C5C; --lm-auf-base: #fff; --lm-auf-shot: #000; --lm-ton-kuehl: #8FD3EE; }
}
.lm-ton--suess { --lm-aroma: var(--lm-ton-suess); --lm-auf-aroma: var(--lm-auf-suess); }
.lm-ton--kuehl { --lm-aroma: var(--lm-ton-kuehl); --lm-auf-aroma: var(--lm-auf-kuehl); }
.lm-ton--limette { --lm-aroma: var(--lm-ton-limette); --lm-auf-aroma: var(--lm-auf-limette); }
.lm-ton--wuerzig { --lm-aroma: var(--lm-ton-wuerzig); --lm-auf-aroma: var(--lm-auf-wuerzig); }

/* ---------- Seite */
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug { display: grid; gap: var(--hk-space-3); }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero { padding-bottom: 0; }
.lm-form { display: grid; gap: var(--hk-space-3); margin: 0; }

/* Modus-Wahl (Wählen = rund) */
.lm-modi { display: grid; gap: 8px; }
.lm-modi .hk-eyebrow { margin: 0; }
.lm-modi .hk-werkzeug-chips .hk-chip img { width: 24px; height: 24px; image-rendering: pixelated; }

/* Rechner: Eingabe links, Flasche + Rezept rechts */
.lm-rechner { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--hk-space-4); align-items: start; }
.lm-eingabe { display: grid; gap: 0; min-width: 0; }
.lm-feldgruppe { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--hk-line); scroll-margin-top: 96px; }
.lm-eingabe > div:first-child > .lm-feldgruppe:first-child { border-top: 0; padding-top: 0; }
.lm-feldgruppe[hidden], .lm-eingabe [hidden] { display: none !important; }
.lm-feldgruppe__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-feldgruppe__titel { margin: 0; font: 500 var(--hk-fs-m)/var(--hk-lh-m) var(--hk-font); letter-spacing: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--hk-ink); }
.lm-feldgruppe__titel .lm-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lm-feldgruppe__hilfe { margin: 0; font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }
.lm-feldgruppe.is-markiert { animation: lm-markiert 1.2s var(--hk-ease); }
@keyframes lm-markiert { 0% { background: var(--hk-surface); } 100% { background: transparent; } }
.lm-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lm-punkt--aroma { background: var(--lm-aroma); }
.lm-punkt--shot { background: var(--lm-shot); }
.lm-punkt--base { background: var(--lm-base); outline: 1px solid var(--hk-line-strong); }
.lm-punkt--aroma2 { background: var(--lm-ton-kuehl); }

/* Chips aus tools.css; T-0040b (Bert 30.09.): die kleinen grauen Pillen des Shops (.hk-chip--sm-Maß 12/16, 30 px,
   ohne Rahmen; gewählt = Tinte). Auf der grauen Gruppenkarte der Rechnerseite eine Stufe dunkler (Block T-0040 unten). */
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips { gap: var(--hk-space-1); }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip { position: relative; height: 30px; min-height: 0; padding: 0 12px; gap: 4px; border-color: transparent; background: var(--hk-surface); font: var(--hk-fw-regular) var(--hk-fs-s)/var(--hk-lh-s) var(--hk-font); }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip::after { position: absolute; inset: -7px 0; content: ''; } /* 44-px-Trefferfläche wie .hk-chip--sm */
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip:hover { background: var(--hk-hover-2); }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip:has(input:checked) { background: var(--hk-ink); border-color: var(--hk-ink); color: var(--hk-paper); box-shadow: inset 0 0 0 2px var(--hk-paper); }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-chips .hk-chip:has(input:focus-visible) { outline: var(--hk-focus-ring); outline-offset: 2px; }
body.hk-relaunch :is(.hk-tools-page--liquid-mixer, .hk-lm-pdp) .lm-feldgruppe .lm-chips .hk-chip img { width: 16px; height: 16px; image-rendering: pixelated; }

/* Eingeben = Rechteck 8 px */
.lm-feld { display: inline-flex; align-items: center; gap: 6px; }
.lm-feld input { width: 72px; height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--hk-line-strong); border-radius: var(--hk-radius-feld); background: var(--hk-paper); color: var(--hk-ink); font: 500 var(--hk-fs-m)/1 var(--hk-font); font-variant-numeric: tabular-nums; text-align: right; }
.lm-feld input:focus-visible { outline: var(--hk-focus-ring); outline-offset: 2px; }
.lm-feld input[aria-invalid="true"] { border-color: var(--hk-error); }
.lm-feld__einheit { font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }
.lm-feld label, .lm-feld > span:first-child { font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }

/* Longfill-Auswahl: Serien-Karten (Auswahlpunkt rund) + Sorte */
.lm-produkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lm-pwahl { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: var(--hk-space-1); align-items: center; padding: var(--hk-space-1); border: 1px solid transparent; border-radius: var(--hk-radius-feld); cursor: pointer; background: var(--hk-paper); color: var(--hk-ink); }
.lm-pwahl[hidden] { display: none; }
.lm-pwahl:hover { border-color: var(--hk-line-strong); }
.lm-pwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lm-pwahl:has(input:checked) { border-color: var(--hk-ink); }
.lm-pwahl:has(input:focus-visible) { outline: var(--hk-focus-ring); outline-offset: 2px; }
.lm-pwahl__bild { width: 40px; height: 40px; background: var(--hk-surface); border-radius: var(--hk-radius-s); overflow: hidden; display: grid; place-items: center; }
.lm-pwahl__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lm-pwahl__bild img.lm-pixel { width: 36px; height: 36px; image-rendering: pixelated; object-fit: contain; }
.lm-pwahl__text { display: grid; gap: 0; min-width: 0; }
.lm-pwahl__marke { font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-ink-2); }
.lm-pwahl__name { font-size: var(--hk-fs-m); line-height: var(--hk-lh-m); font-weight: 500; overflow-wrap: anywhere; }
.lm-pwahl__info { font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-ink-2); font-variant-numeric: tabular-nums; }
.lm-pwahl__info.is-luecke { color: var(--hk-warning-text); }
.lm-pwahl__radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hk-line-strong); box-sizing: border-box; }
.lm-pwahl:has(input:checked) .lm-pwahl__radio { border: 5px solid var(--hk-ink); }
.lm-mehr { justify-self: start; padding: 0; }
.lm-sorte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lm-sorte[hidden] { display: none; }
.lm-select { position: relative; min-width: 240px; max-width: 100%; }
.lm-select select { width: 100%; height: 36px; box-sizing: border-box; padding: 0 32px 0 10px; border: 1px solid var(--hk-line-strong); border-radius: var(--hk-radius-feld); background: var(--hk-paper); color: var(--hk-ink); font: 400 var(--hk-fs-m)/1 var(--hk-font); }
.lm-select select:focus-visible { outline: var(--hk-focus-ring); outline-offset: 2px; }

/* Ergebnis: Flasche + Rezept */
/* T-0080: unter dem klebenden Seitenkopf (--hk-kopf-h). */
.lm-ergebnis { position: sticky; top: calc(var(--hk-kopf-h, 0px) + 16px); display: grid; gap: 16px; padding: 16px; border: 1px solid var(--hk-line); background: var(--hk-paper); min-width: 0; }
.lm-ergebnis__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lm-ergebnis__kopf .hk-eyebrow { margin: 0; }
.lm-ergebnis__staerke { font: 500 var(--hk-fs-2xl)/var(--hk-lh-2xl) var(--hk-font); letter-spacing: var(--hk-tracking-tight); font-variant-numeric: tabular-nums; }
.lm-ergebnis__staerke small { font-size: var(--hk-fs-s); font-weight: 400; color: var(--hk-ink-2); letter-spacing: 0; }
.lm-flaschenfeld { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: end; }
.lm-flaschenfeld .lm-legende { align-self: center; }

/* ---------- LM-B4 Pixel-Longfill-Flasche (Misch-Illustration A, Bert 26.09.): Sprite-Hülle je Größe (hell/dunkel, nie skaliert),
   Füllfläche mit clip-path des gestanzten Innenraums, Schichten ganzzahlig auf dem Raster --u (Server/JS), pixelated. */
body.hk-relaunch .hk-tools-page--liquid-mixer, body.hk-relaunch .hk-lm-pdp {
  --lm-glas: #F3F7F7; --lm-glas-licht: #FFFFFF; --lm-glas-schatten: #E3EBEB; --lm-umriss: #15191b;
}
html[data-theme="dark"] body.hk-relaunch .hk-tools-page--liquid-mixer, html[data-theme="dark"] body.hk-relaunch .hk-lm-pdp { --lm-glas: #1E2A2C; --lm-glas-licht: #2C3C3E; --lm-glas-schatten: #172224; --lm-umriss: #7C989A; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.hk-relaunch .hk-tools-page--liquid-mixer, html:not([data-theme="light"]) body.hk-relaunch .hk-lm-pdp { --lm-glas: #1E2A2C; --lm-glas-licht: #2C3C3E; --lm-glas-schatten: #172224; --lm-umriss: #7C989A; }
}
.lm-mx { position: relative; display: block; flex: none; }
.lm-mx img { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
.lm-mx__huelle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.lm-mx__huelle--d { display: none; }
html[data-theme="dark"] .lm-mx__huelle--h { display: none; }
html[data-theme="dark"] .lm-mx__huelle--d { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lm-mx__huelle--h { display: none; }
  html:not([data-theme="light"]) .lm-mx__huelle--d { display: block; }
}
.lm-mx__innen { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    var(--lm-glas) 0 calc(var(--ix0) + var(--u) * 2),
    var(--lm-glas-licht) calc(var(--ix0) + var(--u) * 2) calc(var(--ix0) + var(--u) * 4),
    var(--lm-glas) calc(var(--ix0) + var(--u) * 4) calc(var(--ix1) - var(--u) * 4),
    var(--lm-glas-schatten) calc(var(--ix1) - var(--u) * 4) 100%); }
.lm-mx__s { position: absolute; left: 0; right: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; font: inherit;
  --t: var(--lm-base); --auf: var(--lm-auf-base);
  background:
    linear-gradient(color-mix(in srgb, var(--t) 55%, #fff) 0 var(--u), transparent var(--u)),
    linear-gradient(90deg,
      var(--t) 0 calc(var(--ix0) + var(--u) * 2),
      color-mix(in srgb, var(--t) 60%, #fff) calc(var(--ix0) + var(--u) * 2) calc(var(--ix0) + var(--u) * 4),
      var(--t) calc(var(--ix0) + var(--u) * 4) calc(var(--ix1) - var(--u) * 5),
      color-mix(in srgb, var(--t) 78%, #000) calc(var(--ix1) - var(--u) * 5) 100%);
  transition: top var(--hk-dur-2) var(--hk-ease-out), height var(--hk-dur-2) var(--hk-ease-out); }
.lm-mx__s--aroma { --t: var(--lm-aroma); --auf: var(--lm-auf-aroma); }
.lm-mx__s--aroma2 { --t: var(--lm-ton-kuehl); --auf: var(--lm-auf-kuehl); }
.lm-mx__s--shot { --t: var(--lm-shot); --auf: var(--lm-auf-shot); }
.lm-mx__s--base { --t: var(--lm-base); --auf: var(--lm-auf-base); }
button.lm-mx__s { cursor: pointer; }
button.lm-mx__s:hover, button.lm-mx__s:focus-visible { filter: brightness(1.12) saturate(1.08); outline: none; }
button.lm-mx__s:focus-visible { box-shadow: inset 0 0 0 2px var(--lm-umriss); }
.lm-mx__text { font: 500 11px/1 var(--hk-font); font-variant-numeric: tabular-nums; color: var(--auf); pointer-events: none; white-space: nowrap; }
/* Größe je Anzeige: 218 px, bis 575 px das 176er-Sprite (beide im Markup, eines sichtbar – nie skaliert) */
.lm-mx--mobil { display: none; }
/* Pixel-Marke statt rundem Punkt in der Legende (eckig mit Umriss wie die Sprites) */
.lm-mx-marke { display: inline-block; flex: none; width: 10px; height: 10px; --t: var(--lm-base); background: var(--t); box-shadow: inset 0 0 0 1px var(--lm-umriss), inset 2px 2px 0 1px color-mix(in srgb, var(--t) 55%, #fff); }
.lm-mx-marke--aroma { --t: var(--lm-aroma); } .lm-mx-marke--aroma2 { --t: var(--lm-ton-kuehl); } .lm-mx-marke--shot { --t: var(--lm-shot); } .lm-mx-marke--base { --t: var(--lm-base); }
.lm-mx-marke--luft { --t: var(--lm-glas); }
.lm-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.lm-legende li { min-width: 0; }
.lm-legende button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 6px 8px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--hk-ink); text-align: left; font: inherit; cursor: pointer; border-radius: 0; }
.lm-legende button:hover { background: var(--hk-surface); }
.lm-legende button:focus-visible { outline: var(--hk-focus-ring); outline-offset: 1px; }
.lm-legende__ml { font: 500 var(--hk-fs-l)/var(--hk-lh-l) var(--hk-font); font-variant-numeric: tabular-nums; }
.lm-legende__was { grid-column: 2; font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }
.lm-legende__leer .lm-legende__ml { color: var(--hk-ink-2); }

.lm-rezept { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--hk-ink); }
.lm-rezept:empty { display: none; }
.lm-rezept > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hk-line); font-size: var(--hk-fs-m); }
.lm-rezept dt { font-weight: 400; color: var(--hk-ink); }
.lm-rezept dt small { display: block; color: var(--hk-ink-2); font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); }
.lm-rezept dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lm-rezept .lm-summe { border-bottom: 0; }
.lm-rezept .lm-summe dt, .lm-rezept .lm-summe dd { font-weight: 500; }
.lm-vgpg { display: grid; gap: 4px; }
.lm-vgpg:empty { display: none; }
.lm-vgpg__balken { display: flex; height: 8px; border-radius: var(--hk-radius-pill); overflow: hidden; background: var(--hk-line); }
.lm-vgpg__pg { background: var(--hk-ink-2); }
.lm-vgpg__vg { background: var(--hk-line-strong); flex: 1; }
.lm-vgpg__text { display: flex; justify-content: space-between; gap: 8px; font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-ink-2); font-variant-numeric: tabular-nums; }
.lm-meldung { margin: 0; padding: 8px 10px; font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); border-left: 3px solid var(--hk-line-strong); background: var(--hk-surface); color: var(--hk-ink); }
.lm-meldung--fehler { border-left-color: var(--hk-error); background: var(--hk-error-bg); color: var(--hk-error-text); }
.lm-meldung--warnung { border-left-color: var(--hk-warning); background: var(--hk-warning-bg); color: var(--hk-ink); }
.lm-meldungen { display: grid; gap: 6px; }
.lm-meldungen:empty { display: none; }
.lm-aktion { padding: 0; font-size: inherit; vertical-align: baseline; }
.lm-genau { display: flex; gap: 6px; flex-wrap: wrap; }
.lm-genau[hidden] { display: none; }
.lm-ohne-js { padding-top: 16px; }
.lm-ohne-js[hidden] { display: none; }

/* Passt dazu – Warenkorb-Vorschlag (Stufe 2) */
.lm-korb { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--hk-space-4); align-items: start; margin-top: 16px; }
.lm-korb__liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hk-ink); }
.lm-korb__zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hk-line); }
/* DA-1/D15 (Designaudit 27.09.): nur das Bild wird gedämpft – Deckkraft auf dem Preis drückte den
   Streichpreis im Dunkelmodus auf 2,56:1. Der Preis trägt den Zustand über die Tinte (--hk-ink-3 ≥ 4,5:1). */
.lm-korb__zeile.is-draussen .lm-korb__bild { opacity: .55; }
.lm-korb__zeile.is-draussen .lm-korb__preis { color: var(--hk-ink-3); }
.lm-korb__bild { width: 56px; height: 56px; background: var(--hk-surface); border-radius: var(--hk-radius-s); overflow: hidden; display: grid; place-items: center; }
.lm-korb__bild img { width: 100%; height: 100%; object-fit: contain; }
.lm-korb__bild img.lm-pixel { width: 40px; height: 40px; image-rendering: pixelated; }
.lm-korb__text { display: grid; gap: 2px; min-width: 0; }
.lm-korb__rolle { font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-ink-2); }
.lm-korb__name { font-size: var(--hk-fs-m); line-height: var(--hk-lh-m); font-weight: 500; }
.lm-korb__lager { font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-green-text); }
.lm-korb__lager.is-knapp { color: var(--hk-warning-text); }
.lm-korb__lager.is-aus { color: var(--hk-error-text); }
.lm-korb__menge { font-variant-numeric: tabular-nums; font-size: var(--hk-fs-m); color: var(--hk-ink-2); white-space: nowrap; }
.lm-korb__preis { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; white-space: nowrap; min-width: 72px; }
.lm-korb__preis s { display: block; font-weight: 400; font-size: var(--hk-fs-xs); color: var(--hk-ink-3); }
/* LM-B3 (PAngV): Grundpreis unter dem Preis, klein wie auf der Kachel */
.lm-korb__gp, .lm-pwahl__gp { display: block; font-weight: 400; font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); color: var(--hk-ink-2); }
.lm-karte__gp { list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--hk-fs-xs); line-height: var(--hk-lh-xs); }
.lm-korb__meldungen { margin-top: 10px; }
.lm-kasse { display: grid; gap: var(--hk-space-1); padding: var(--hk-space-3); border: 1px solid transparent; border-radius: var(--hk-radius-feld); background: var(--hk-surface); }
.lm-kasse__summe { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
.lm-kasse__summe b { font: 500 var(--hk-fs-xl)/var(--hk-lh-xl) var(--hk-font); }
.lm-kasse .btn, .lm-korb__form .btn { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.lm-korb__form { margin: 0; }
.lm-kasse__hinweis { margin: 0; }

/* Erklärung + Hinweise */
.lm-erklaer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hk-space-3); margin-top: 16px; }
.lm-formel { margin: 0; padding: var(--hk-space-1) var(--hk-space-2); border-radius: var(--hk-radius-feld); background: var(--hk-surface); font: 500 var(--hk-fs-s)/var(--hk-lh-s) var(--hk-font); font-variant-numeric: tabular-nums; }
body.hk-relaunch .lm-hinweise__eyebrow { margin: 0 0 12px; }
.lm-hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--hk-space-4); margin: 0; padding: 0; list-style: none; }
.lm-hinweise li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }
.lm-hinweise li b { color: var(--hk-ink); font-weight: 500; }
.lm-hinweise svg { width: 20px; height: 20px; color: var(--hk-ink); }
.lm-18 { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--hk-ink); border-radius: 50%; font: 700 8px/1 var(--hk-font); color: var(--hk-ink); box-sizing: border-box; }

/* Kurzleiste mobil (Ergebnis immer sichtbar) */
.lm-kurz { display: none; }

/* ---------- Produktseite (Stufe 3: vorbelegter Mixer, Stufe 4: Flaschen-Vorschläge) */
.hk-lm-pdp .lm-pdp { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--hk-space-4); align-items: start; }
.hk-lm-pdp .lm-pdp__steuer { display: grid; gap: 12px; align-content: start; }
.hk-lm-pdp .lm-pdp__text { margin: 0; color: var(--hk-ink-2); }
.hk-lm-pdp .lm-ergebnis { position: static; }
.hk-lm-pdp .lm-pdp__aktion { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.hk-lm-pdp .lm-pdp__rest { display: grid; gap: 8px; }
.hk-lm-pdp .lm-korb__zeile { grid-template-columns: 40px minmax(0, 1fr) auto auto; padding: 8px 0; }
.hk-lm-pdp .lm-korb__bild { width: 40px; height: 40px; }
.hk-lm-pdp .lm-korb__bild img.lm-pixel { width: 28px; height: 28px; }
/* Nikotinshot (Bert 26.09.): eigenes 36er-Sprite ohne Warndreieck, in beiden Zusammenhängen in nativer Größe (je Größe ein Sprite). */
body.hk-relaunch .lm-korb__bild img.lm-pixel.lm-pixel--36 { width: 36px; height: 36px; }
.lm-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hk-space-3); }
.lm-karte { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--hk-line); background: var(--hk-paper); }
.lm-karte__titel { margin: 0; font: 500 var(--hk-fs-l)/var(--hk-lh-l) var(--hk-font); font-variant-numeric: tabular-nums; }
.lm-karte__unter { margin: 0; font-size: var(--hk-fs-s); line-height: var(--hk-lh-s); color: var(--hk-ink-2); }
.lm-karte__oben { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: end; }
.lm-karte .lm-legende__ml { font-size: var(--hk-fs-m); line-height: var(--hk-lh-m); }
.lm-karte .lm-legende { gap: 2px; }
.lm-karte .lm-legende li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 4px 0; }
.lm-karte .lm-legende li > span:last-child { display: grid; min-width: 0; }
.lm-karte .lm-legende__was { grid-column: auto; }
.lm-karte__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lm-karte__summe { font: 500 var(--hk-fs-l)/var(--hk-lh-l) var(--hk-font); font-variant-numeric: tabular-nums; }
.lm-karte form { margin: 0; }

@media (max-width: 1199.98px) {
  .lm-rechner { grid-template-columns: minmax(0, 1fr) 360px; }
  .lm-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .lm-rechner, .lm-korb, .hk-lm-pdp .lm-pdp { grid-template-columns: minmax(0, 1fr); }
  .lm-ergebnis { position: static; }
  .lm-erklaer, .lm-hinweise, .lm-karten { grid-template-columns: minmax(0, 1fr); }
  .lm-kurz { display: flex; position: sticky; bottom: 0; z-index: 5; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; margin: 0 -16px; background: var(--hk-paper); border-top: 1px solid var(--hk-line); box-shadow: var(--hk-elev-2); font-size: var(--hk-fs-s); font-variant-numeric: tabular-nums; }
  .lm-kurz b { font-size: var(--hk-fs-m); font-weight: 500; }
}
@media (max-width: 575.98px) {
  .lm-produkte { grid-template-columns: minmax(0, 1fr); }
  .lm-flaschenfeld { grid-template-columns: 77px minmax(0, 1fr); }
  .lm-mx--gross { display: none; }
  .lm-mx--mobil { display: block; }
  .lm-korb__zeile { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .lm-korb__bild { width: 48px; height: 48px; }
  .lm-korb__menge { grid-column: 2; grid-row: 2; }
  .lm-korb__preis { grid-column: 3; grid-row: 1 / span 2; }
  .lm-kasse { padding: var(--hk-space-2); }
  .lm-select { min-width: 0; width: 100%; }
}

/* DA-1/D06 (Designaudit 27.09., KA-IOS-2-Regel): iOS zoomt beim Antippen jedes Feld unter 16 px –
   hochkant und auf Touch-Geräten 16 px für die Rechnerfelder (Zielmenge, eigene Flasche, Aroma-ml,
   Sorte). Nach den Grundregeln, gleiche Spezifität. */
@media (max-width: 767.98px), (pointer: coarse) {
  .lm-feld input, .lm-select select { font-size: var(--hk-input-mobile-size); }
}


/* ---------- T-0040 (Bert 30.09.): Seite ruhiger – Überschreibungen geteilter Bausteine nur für /liquid-rechner
   (Präfix .hk-tools-page--liquid-mixer; die PDP-Sektion .hk-lm-pdp teilt .lm-feldgruppe/.lm-ergebnis/.lm-chips/.lm-korb__zeile
   und bleibt unberührt; seiteneigene Bausteine .lm-pwahl/.lm-kasse/.lm-formel sind oben direkt geändert). Eingaben als
   flache Gruppenkarten (Fläche statt Linien), Ergebnis als ruhige Fläche rechts (sticky). Schrift auf der CI-Skala:
   H1 28/500, Abschnittstitel 18/24, Gruppentitel und Text 14/20, klein 12/16; Versalien nur noch in den Abschnitts-Eyebrows.
   Abstände nur als --hk-space-*-Token (8er-Raster, 4 als Halbschritt). Rahmen „1px solid transparent“ statt 0: im
   Zwangsfarbmodus (Windows-Kontrast) bleiben die Flächen umrandet. Wählen rund, Eingeben/Handeln eckig 8 px bleiben. */
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug { gap: var(--hk-space-4); }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-h2 { font-size: var(--hk-fs-xl); line-height: var(--hk-lh-xl); }

/* Kopf: Kennzahlen als ruhige Zeile unter dem Text statt eigener Spalte mit 22-px-Zahlen */
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero { grid-template-columns: minmax(0, 1fr); gap: var(--hk-space-2); padding: 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__text { gap: var(--hk-space-1); }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__text .hk-h1 { margin: 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__text .hk-text { margin: 0; color: var(--hk-ink-2); }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-mask__bild { width: 40px; height: 40px; border: 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__fakten { display: flex; flex-wrap: wrap; gap: var(--hk-space-1) var(--hk-space-4); padding: 0; border-top: 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__fakten li { display: flex; align-items: baseline; gap: var(--hk-space-1); }
body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__zahl { font: 500 var(--hk-fs-m)/var(--hk-lh-m) var(--hk-font); letter-spacing: 0; }

/* Modus-Wahl und Ergebnis-Kopf: Titel statt Versalien-Eyebrow */
body.hk-relaunch .hk-tools-page--liquid-mixer :is(.lm-modi, .lm-ergebnis__kopf) .hk-eyebrow { font: 500 var(--hk-fs-m)/var(--hk-lh-m) var(--hk-font); text-transform: none; letter-spacing: 0; color: var(--hk-ink); }

/* Rechner: Gruppenkarten links, Ergebnis rechts */
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-rechner { grid-template-columns: minmax(0, 1fr) 384px; gap: var(--hk-space-3); }
body.hk-relaunch .hk-tools-page--liquid-mixer :is(.lm-eingabe, .lm-eingabe > [data-lm-modus]) { display: grid; gap: var(--hk-space-1); min-width: 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-feldgruppe,
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-eingabe > div:first-child > .lm-feldgruppe:first-child { gap: var(--hk-space-1); padding: var(--hk-space-2) var(--hk-space-3) var(--hk-space-3); border: 1px solid transparent; border-radius: var(--hk-radius-feld); background: var(--hk-surface); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-reihe { gap: var(--hk-space-1) var(--hk-space-2); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-feldgruppe.is-markiert { animation: lm-markiert-karte 1.2s var(--hk-ease); }
@keyframes lm-markiert-karte { 0% { border-color: var(--hk-ink); } 100% { border-color: transparent; } }

/* Chips: gewählt = volle Tinte ohne Doppelring; auf der grauen Karte eine Stufe dunkler als die Karte (T-0040b) */
body.hk-relaunch .hk-tools-page--liquid-mixer :is(.lm-feldgruppe, .lm-ergebnis) .lm-chips .hk-chip { background: var(--hk-hover-2); }
body.hk-relaunch .hk-tools-page--liquid-mixer :is(.lm-feldgruppe, .lm-ergebnis) .lm-chips .hk-chip:hover { background: color-mix(in srgb, var(--hk-hover-2) 82%, var(--hk-ink)); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-chips .hk-chip:has(input:checked) { background: var(--hk-ink); border-color: var(--hk-ink); color: var(--hk-paper); box-shadow: none; }

/* Ergebnis: ruhige Fläche, eine große Zahl, Rezept mit feinen Linien */
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-ergebnis { gap: var(--hk-space-2); padding: var(--hk-space-3); border: 1px solid transparent; border-radius: var(--hk-radius-feld); background: var(--hk-surface); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-flaschenfeld { gap: var(--hk-space-2); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-legende { gap: var(--hk-space-05); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-legende button { padding: var(--hk-space-05) var(--hk-space-1); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-legende button:hover { background: var(--hk-paper); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-legende__ml { font-size: var(--hk-fs-m); line-height: var(--hk-lh-m); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-rezept { border-top: 1px solid var(--hk-line-strong); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-rezept > div:last-child { border-bottom: 0; }
/* neutrale Meldung hebt sich papierweiß von der Fläche ab; Fehler/Warnung behalten ihre Farbfläche */
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-ergebnis .lm-meldung:not(.lm-meldung--fehler, .lm-meldung--warnung) { background: var(--hk-paper); }

/* Warenkorb-Vorschlag: feine Linie statt 2 px Tinte */
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-korb__liste { border-top: 1px solid var(--hk-line-strong); }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-korb__zeile { grid-template-columns: 48px minmax(0, 1fr) auto auto; padding: var(--hk-space-1) 0; }
body.hk-relaunch .hk-tools-page--liquid-mixer .lm-korb__bild { width: 48px; height: 48px; }

@media (max-width: 1199.98px) {
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-rechner { grid-template-columns: minmax(0, 1fr) 344px; }
}
@media (max-width: 991.98px) {
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-rechner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug { gap: var(--hk-space-3); }
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-feldgruppe,
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-eingabe > div:first-child > .lm-feldgruppe:first-child,
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-ergebnis { padding: var(--hk-space-2); }
  body.hk-relaunch .hk-tools-page--liquid-mixer .hk-werkzeug-hero__fakten { gap: var(--hk-space-05) var(--hk-space-2); }
  body.hk-relaunch .hk-tools-page--liquid-mixer .lm-korb__zeile { grid-template-columns: 48px minmax(0, 1fr) auto; }
}