/*! hf-core · Mix it – Frontend v0.4.4 (mobile-first; Runde 2: Größen per calc() skaliert, Grün für Höchststufe, CTA-Spalte fest; Runde 3: mehr Luft zwischen den Blöcken, Summenleiste über die volle Breite mit containerbündigem Inhalt, Hinweis-Link „→ Schritt 1“ entfernt, Vorlage-Leiste mobil zweizeilig; 15.09. Primär-Button: gold auch im Fokus, Hover = Ghost – der Kit-Fokus-Stil ließ den fokussierten Dialog-Button als Ghost erscheinen). Design-Quelle = Elementor-Kit 17: alle --hfm-*-Tokens sind Aliase der Kit-Globals (Farben --e-global-color-*, Typo --e-global-typography-ID-*); gemessene Nachbarn: Produktkarte Loop 89279, Warenkorb-Summe, Kit-Button. Eigene Pixelwerte nur für Layout-Abstände und 44-px-Tap-Ziele. Kopf (H1/Intro) kommt aus dem Pagebuilder. */
.hf-mixit{
  /* Farben (Kit 17) */
  --hfm-gold:var(--e-global-color-secondary,#c49955);
  --hfm-ink:var(--e-global-color-primary,#2d2d2c);
  --hfm-text:var(--e-global-color-text,#000001);
  --hfm-line:var(--e-global-color-7d20f97,#dcdcdc);
  --hfm-panel:var(--e-global-color-92e32c6,#f7f7f6);
  --hfm-white:var(--e-global-color-2a119df,#ffffff);
  /* Typo (Kit 17): Text = Lato 300 18/1.5 · Text_variant_2 (eb95fcb) = Lato 300 16 · Grid_sub-title (abcf68f) = Roboto Mono 300 15/1.5 ls 1 · Grid_title (df32c90) = Oswald 22/1.5 ls 2.3 uppercase · Grid_Preis (9d43842) = Roboto Mono 600 22 · Preis (86f9044) = Lato 700 27 · Button (d01ced7) = Roboto Mono 16 ls 3 uppercase */
  --hfm-f-body:var(--e-global-typography-text-font-family,"Lato"),sans-serif;
  --hfm-f-mono:var(--e-global-typography-abcf68f-font-family,"Roboto Mono"),monospace;
  --hfm-f-head:var(--e-global-typography-df32c90-font-family,"Oswald"),sans-serif;
  --hfm-t-text:var(--e-global-typography-text-font-weight,300) var(--e-global-typography-text-font-size,18px)/var(--e-global-typography-text-line-height,1.5em) var(--hfm-f-body);
  --hfm-t-text-ls:var(--e-global-typography-text-letter-spacing,.2px);
  --hfm-t-small:var(--e-global-typography-eb95fcb-font-weight,300) var(--e-global-typography-eb95fcb-font-size,16px)/var(--e-global-typography-eb95fcb-line-height,1.5em) var(--hfm-f-body);
  --hfm-t-small-ls:var(--e-global-typography-eb95fcb-letter-spacing,.5px);
  --hfm-t-mono:var(--e-global-typography-abcf68f-font-weight,300) var(--e-global-typography-abcf68f-font-size,15px)/var(--e-global-typography-abcf68f-line-height,1.5em) var(--hfm-f-mono);
  --hfm-t-mono-ls:var(--e-global-typography-abcf68f-letter-spacing,1px);
  --hfm-t-title:var(--e-global-typography-df32c90-font-weight,400) var(--e-global-typography-df32c90-font-size,22px)/var(--e-global-typography-df32c90-line-height,1.5em) var(--hfm-f-head);
  --hfm-t-title-ls:var(--e-global-typography-df32c90-letter-spacing,2.3px);
  --hfm-t-gridprice:var(--e-global-typography-9d43842-font-weight,600) var(--e-global-typography-9d43842-font-size,22px)/1 var(--hfm-f-mono);
  --hfm-t-price:var(--e-global-typography-86f9044-font-weight,700) var(--e-global-typography-86f9044-font-size,27px)/1 var(--hfm-f-body);
  --hfm-t-btn:var(--e-global-typography-d01ced7-font-weight,400) var(--e-global-typography-d01ced7-font-size,16px)/1.5 var(--hfm-f-mono);
  --hfm-t-btn-ls:var(--e-global-typography-d01ced7-letter-spacing,3px);
  /* Kit-H4 (.elementor-kit-17 h4 = Lato 500 18, Zeilenhöhe 1.2 vom Theme; keine Global-Variable vorhanden): Set-Namen in Quickcards + Auswahlliste */
  --hfm-t-h4:500 18px/1.2 var(--hfm-f-body);
  --hfm-fs-h4:18px;
  /* Größen-Feinabstimmung (Tommy 14.09., Runde 2): Kit-Größen bleiben die Basis, Widget-Elemente werden per calc() skaliert – Grid-Karten .8, Schnellstart-Set-Titel .7, Summenzeile/Hinweis/Step-Tabs/Chips/Listen .85 */
  --hfm-s-card:.8;
  --hfm-s-quick:.7;
  --hfm-s-sum:.85;
  --hfm-fs-title:var(--e-global-typography-df32c90-font-size,22px);
  --hfm-fs-mono:var(--e-global-typography-abcf68f-font-size,15px);
  --hfm-fs-small:var(--e-global-typography-eb95fcb-font-size,16px);
  --hfm-fs-btn:var(--e-global-typography-d01ced7-font-size,16px);
  --hfm-fs-gridprice:var(--e-global-typography-9d43842-font-size,22px);
  --hfm-fs-price:var(--e-global-typography-86f9044-font-size,27px);
  /* Einzige Nicht-Kit-Farbe (Freigabe Tommy 14.09.): Grün für den Hinweis bei erreichter Höchststufe */
  --hfm-green:#44795a;
  --hfm-green-soft:#e8efe9;
  --hfm-tap:44px;
  /* Luft zwischen den Blöcken (Tommy 14.09., Runde 3): mobil 24 px, ab 1024 px 40 px */
  --hfm-sp:24px;
  --hf-mixit-sticky-top:0px;
  display:block;width:100%;max-width:none;min-height:100vh;position:relative;
  color:var(--hfm-text);font:var(--hfm-t-text);letter-spacing:var(--hfm-t-text-ls);-webkit-font-smoothing:antialiased}
.hf-mixit[data-hf-mixit] *,.hf-mixit[data-hf-mixit] *::before,.hf-mixit[data-hf-mixit] *::after{box-sizing:border-box;min-width:0}
.hf-mixit[data-hf-mixit] img{max-width:100%;display:block}
.hf-mixit[data-hf-mixit] :focus-visible{outline:2px solid var(--hfm-gold);outline-offset:2px}
.hf-mixit .hf-mixit__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hf-mixit .hf-mixit__boot{padding:0 0 24px}.hf-mixit .hf-mixit__boot-skel{height:120px;background:var(--hfm-panel);border:1px solid var(--hfm-line)}
@media (prefers-reduced-motion:reduce){.hf-mixit[data-hf-mixit] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Buttons: nacktes button-Element erbt den Kit-Button (Gold, weiß, Radius 3, 8/20, Roboto Mono 16/3 uppercase, Hover transparent/Gold).
   Bedienelemente OHNE Button-Optik werden je Klasse (0,2,0 + Hover 0,3,0) zurückgesetzt. */
.hf-mixit .hf-mixit__benefits-head,.hf-mixit .hf-mixit__summary-toggle,.hf-mixit .hf-mixit__thumb,.hf-mixit .hf-mixit__quickcard,.hf-mixit .hf-mixit__textbtn,.hf-mixit .hf-mixit__modebar button,.hf-mixit .hf-mixit__ministep button,.hf-mixit .hf-mixit__step{background:none;border:0;border-radius:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-align:left;box-shadow:none;cursor:pointer;white-space:normal}
.hf-mixit .hf-mixit__benefits-head:hover,.hf-mixit .hf-mixit__benefits-head:focus,.hf-mixit .hf-mixit__summary-toggle:hover,.hf-mixit .hf-mixit__summary-toggle:focus,.hf-mixit .hf-mixit__quickcard:hover,.hf-mixit .hf-mixit__quickcard:focus,.hf-mixit .hf-mixit__textbtn:hover,.hf-mixit .hf-mixit__textbtn:focus,.hf-mixit .hf-mixit__modebar button:hover,.hf-mixit .hf-mixit__modebar button:focus,.hf-mixit .hf-mixit__ministep button:hover,.hf-mixit .hf-mixit__ministep button:focus,.hf-mixit .hf-mixit__step:hover,.hf-mixit .hf-mixit__step:focus,.hf-mixit .hf-mixit__thumb:hover,.hf-mixit .hf-mixit__thumb:focus{background:none;border-width:0;border-color:transparent;color:inherit}
/* Ghost-Variante = Optik „Gutschein anwenden“ (weiß/Gold, Button-Typo) */
.hf-mixit .hf-mixit__quick-tab,.hf-mixit .hf-mixit__color,.hf-mixit .hf-mixit__cta--secondary{background:var(--hfm-white);color:var(--hfm-gold);border:1px solid var(--hfm-gold);border-radius:3px;font:var(--hfm-t-btn);letter-spacing:var(--hfm-t-btn-ls);text-transform:uppercase;padding:0 16px;min-height:var(--hfm-tap);cursor:pointer;text-align:center;white-space:normal}
.hf-mixit .hf-mixit__quick-tab:hover,.hf-mixit .hf-mixit__color:hover,.hf-mixit .hf-mixit__cta--secondary:hover,.hf-mixit .hf-mixit__quick-tab[aria-selected="true"],.hf-mixit .hf-mixit__color[aria-selected="true"],.hf-mixit .hf-mixit__quick-tab[aria-selected="true"]:focus,.hf-mixit .hf-mixit__color[aria-selected="true"]:focus{background:var(--hfm-gold);color:var(--hfm-white);border-color:var(--hfm-gold)}
.hf-mixit .hf-mixit__quick-tab:focus,.hf-mixit .hf-mixit__color:focus,.hf-mixit .hf-mixit__cta--secondary:focus{border-color:var(--hfm-gold)}
/* Kit-Buttons mit Icon: Icon folgt der Textfarbe (Hover transparent/Gold) */
.hf-mixit button svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Vorteile („So funktioniert's“) */
.hf-mixit .hf-mixit__benefits{background:var(--hfm-panel);border:1px solid var(--hfm-line);margin:16px 0 var(--hfm-sp);overflow:hidden}
.hf-mixit .hf-mixit__benefits-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 16px;min-height:var(--hfm-tap)}
.hf-mixit .hf-mixit__benefits-head strong{display:block;font:var(--hfm-t-title);letter-spacing:var(--hfm-t-title-ls);text-transform:uppercase;color:var(--hfm-ink)}
.hf-mixit .hf-mixit__benefits-sub{display:block;font:var(--hfm-t-mono);letter-spacing:var(--hfm-t-mono-ls);color:var(--hfm-text)}
.hf-mixit .hf-mixit__chev{width:24px;height:24px;flex:none;transition:transform .25s}
.hf-mixit .hf-mixit__chev svg{width:24px;height:24px;stroke:var(--hfm-ink);fill:none;stroke-width:1.6}
.hf-mixit .hf-mixit__benefits[data-open="false"] .hf-mixit__chev{transform:rotate(-180deg)}
.hf-mixit .hf-mixit__benefits-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.hf-mixit .hf-mixit__benefits[data-open="false"] .hf-mixit__benefits-body{grid-template-rows:0fr}
.hf-mixit .hf-mixit__benefits.is-instant .hf-mixit__benefits-body,.hf-mixit .hf-mixit__benefits.is-instant .hf-mixit__chev{transition:none}
.hf-mixit .hf-mixit__benefits-inner{overflow:hidden}
.hf-mixit .hf-mixit__benefits-list{list-style:none;margin:0;padding:0 16px 16px;display:grid;gap:12px}
.hf-mixit .hf-mixit__benefits-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0}
.hf-mixit .hf-mixit__num{font:var(--hfm-t-title);letter-spacing:0;color:var(--hfm-gold);min-width:1.2em}
.hf-mixit .hf-mixit__benefits-list b{display:block;font:var(--hfm-t-mono);letter-spacing:var(--hfm-t-mono-ls);text-transform:uppercase;color:var(--hfm-ink);margin-bottom:2px}
.hf-mixit .hf-mixit__benefits-list p{margin:0;font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-text)}
.hf-mixit .hf-mixit__tierline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:0 16px 16px;font:var(--hfm-t-mono);letter-spacing:var(--hfm-t-mono-ls);color:var(--hfm-text)}
.hf-mixit .hf-mixit__tierline-steps{display:flex;gap:8px;flex-wrap:wrap}
.hf-mixit .hf-mixit__tierchip{border:1px solid var(--hfm-line);padding:2px 8px;background:var(--hfm-white);white-space:nowrap;font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-sum))}
.hf-mixit .hf-mixit__tierchip span{opacity:.7}
.hf-mixit .hf-mixit__tierchip.is-active{border-color:var(--hfm-gold);color:var(--hfm-ink)}
.hf-mixit .hf-mixit__tierchip.is-done{border-color:var(--hfm-gold);color:var(--hfm-gold)}

/* Schritte (Reiter) */
.hf-mixit .hf-mixit__steps{position:sticky;top:var(--hf-mixit-sticky-top);z-index:20;background:var(--hfm-white);border-bottom:1px solid var(--hfm-line);display:flex;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--hf-mixit-bleed,0px));padding:0 8px}
.hf-mixit .hf-mixit__steps::-webkit-scrollbar{display:none}
.hf-mixit .hf-mixit__step{flex:1 0 auto;min-height:52px;border:0;border-bottom:3px solid transparent;padding:8px 12px;display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--hfm-text);font:var(--hfm-t-btn);font-size:calc(var(--hfm-fs-btn) * var(--hfm-s-sum));letter-spacing:calc(var(--hfm-t-btn-ls) * var(--hfm-s-sum));text-transform:uppercase}
.hf-mixit .hf-mixit__step:hover,.hf-mixit .hf-mixit__step:focus{border-width:0 0 3px;border-style:solid;border-color:transparent;color:var(--hfm-gold)}
.hf-mixit .hf-mixit__step-num{width:24px;height:24px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:0;flex:none}
.hf-mixit .hf-mixit__step[aria-selected="true"],.hf-mixit .hf-mixit__step[aria-selected="true"]:hover,.hf-mixit .hf-mixit__step[aria-selected="true"]:focus{color:var(--hfm-ink);border-bottom-color:var(--hfm-gold)}
.hf-mixit .hf-mixit__step[aria-selected="true"] .hf-mixit__step-num{background:var(--hfm-gold);border-color:var(--hfm-gold);color:var(--hfm-white)}
.hf-mixit .hf-mixit__step-badge{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:0;background:var(--hfm-gold);color:var(--hfm-white);padding:0 8px;border-radius:3px}
.hf-mixit .hf-mixit__step-badge[hidden]{display:none}
.hf-mixit .hf-mixit__step--soon{opacity:.55}
.hf-mixit .hf-mixit__step-soon{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));border:1px dashed var(--hfm-line);padding:0 6px}
/* Vorlage-/Bearbeiten-Leiste: mobil Text und Link untereinander (der Link „Vorlage verwerfen“ lief sonst rechts aus der Box), ab 640 px in einer Zeile */
.hf-mixit .hf-mixit__modebar{display:flex;flex-direction:column;align-items:flex-start;gap:2px 12px;margin:12px 0 0;padding:8px 16px;background:var(--hfm-panel);border:1px solid var(--hfm-gold);color:var(--hfm-ink);font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls)}
.hf-mixit .hf-mixit__modebar[hidden]{display:none}
.hf-mixit .hf-mixit__modebar button{flex:none;text-decoration:underline;text-underline-offset:3px;color:var(--hfm-gold);min-height:var(--hfm-tap);white-space:nowrap}
.hf-mixit .hf-mixit__modebar button:hover,.hf-mixit .hf-mixit__modebar button:focus{color:var(--hfm-ink)}
.hf-mixit .hf-mixit__panel[hidden]{display:none}

/* Schnellstart (fertige Sets) */
.hf-mixit .hf-mixit__quick{margin:var(--hfm-sp) 0 0}
.hf-mixit .hf-mixit__quick-head,.hf-mixit .hf-mixit__sectionhead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px}
.hf-mixit .hf-mixit__sectionhead{margin:calc(var(--hfm-sp) + 8px) 0 12px}
.hf-mixit .hf-mixit__quick-head h2,.hf-mixit .hf-mixit__sectionhead h2{margin:0;font:var(--hfm-t-title);letter-spacing:var(--hfm-t-title-ls);text-transform:uppercase;color:var(--hfm-ink)}
.hf-mixit .hf-mixit__quick-head span,.hf-mixit .hf-mixit__sectionhead span{font:var(--hfm-t-mono);letter-spacing:var(--hfm-t-mono-ls);color:var(--hfm-text)}
.hf-mixit .hf-mixit__quick-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:2px 0}
.hf-mixit .hf-mixit__quick-nav::-webkit-scrollbar{display:none}
.hf-mixit .hf-mixit__quick-nav[hidden]{display:none}
.hf-mixit .hf-mixit__quick-tab{flex:none;white-space:nowrap;font-size:calc(var(--hfm-fs-btn) * var(--hfm-s-sum));letter-spacing:calc(var(--hfm-t-btn-ls) * var(--hfm-s-sum))}
.hf-mixit .hf-mixit__quick-row{display:flex;gap:12px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.hf-mixit .hf-mixit__quick-row::-webkit-scrollbar{display:none}
.hf-mixit .hf-mixit__quickcard{flex:0 0 260px;scroll-snap-align:start;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;border:1px solid var(--hfm-line);background:var(--hfm-panel);padding:8px;min-height:88px}
.hf-mixit .hf-mixit__quickcard:hover,.hf-mixit .hf-mixit__quickcard:focus{border:1px solid var(--hfm-gold);background:var(--hfm-panel)}
.hf-mixit .hf-mixit__quick-collage{width:72px;height:72px;display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden;background:var(--hfm-white)}
.hf-mixit .hf-mixit__quick-collage img{width:100%;height:100%;object-fit:cover}
.hf-mixit .hf-mixit__quickcard b{display:block;font:var(--hfm-t-title);font-size:calc(var(--hfm-fs-title) * var(--hfm-s-quick));line-height:1.25;letter-spacing:calc(var(--hfm-t-title-ls) * var(--hfm-s-quick));text-transform:uppercase;color:var(--hfm-ink);overflow-wrap:anywhere;hyphens:auto}
.hf-mixit .hf-mixit__quickcard small{display:block;font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));color:var(--hfm-text);margin-top:4px}
.hf-mixit .hf-mixit__quickcard em{font-style:normal;color:var(--hfm-gold)}

/* Farben (Step 2) */
.hf-mixit .hf-mixit__colors{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}
.hf-mixit .hf-mixit__colors::-webkit-scrollbar{display:none}
.hf-mixit .hf-mixit__color{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:calc(var(--hfm-fs-btn) * var(--hfm-s-sum));letter-spacing:calc(var(--hfm-t-btn-ls) * var(--hfm-s-sum))}
.hf-mixit .hf-mixit__color-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--hfm-line)}
.hf-mixit .hf-mixit__hint{margin:12px 0 0;padding:8px 16px;background:var(--hfm-panel);border:1px solid var(--hfm-line);color:var(--hfm-text);font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls)}
.hf-mixit .hf-mixit__hint strong{font-weight:700}
.hf-mixit .hf-mixit__hint[hidden]{display:none}

/* Grid + Karte (wie Produktkarte Loop 89279: Grid_title / Grid_sub-title / Grid_Preis) */
.hf-mixit .hf-mixit__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.hf-mixit .hf-mixit__card{background:var(--hfm-panel);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .2s}
.hf-mixit .hf-mixit__card.is-selected{box-shadow:inset 0 0 0 2px var(--hfm-gold)}
.hf-mixit .hf-mixit__media{display:block;aspect-ratio:1/1;background:var(--hfm-panel);position:relative;overflow:hidden}
.hf-mixit .hf-mixit__media img{width:100%;height:100%;object-fit:cover}
.hf-mixit .hf-mixit__flag{position:absolute;left:8px;top:8px;background:var(--hfm-ink);color:var(--hfm-white);font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));text-transform:uppercase;padding:0 8px}
.hf-mixit .hf-mixit__flag--low{background:var(--hfm-gold)}
.hf-mixit .hf-mixit__card-body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.hf-mixit .hf-mixit__card-name{margin:0;font:var(--hfm-t-title);font-size:calc(var(--hfm-fs-title) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-title-ls) * var(--hfm-s-card));text-transform:uppercase;color:var(--hfm-ink);text-wrap:balance}
.hf-mixit .hf-mixit__card-sub{margin:0;font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));color:var(--hfm-text)}
.hf-mixit .hf-mixit__card-price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-variant-numeric:tabular-nums}
.hf-mixit .hf-mixit__card-now{font:var(--hfm-t-gridprice);font-size:calc(var(--hfm-fs-gridprice) * var(--hfm-s-card));color:var(--hfm-text)}
.hf-mixit .hf-mixit__card-was{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));color:var(--hfm-text);opacity:.5;text-decoration:line-through}
.hf-mixit .hf-mixit__card-was[hidden]{display:none}
.hf-mixit .hf-mixit__card-unit{flex-basis:100%;font:var(--hfm-t-mono);letter-spacing:var(--hfm-t-mono-ls);color:var(--hfm-text);opacity:.7}
.hf-mixit .hf-mixit__card-ctl{margin-top:4px;min-height:var(--hfm-tap)}
.hf-mixit .hf-mixit__add{width:100%;min-height:var(--hfm-tap);display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;white-space:normal;font-size:calc(var(--hfm-fs-btn) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-btn-ls) * var(--hfm-s-card))}
.hf-mixit .hf-mixit__add:disabled,.hf-mixit .hf-mixit__add:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--hfm-gold);color:var(--hfm-white)}
.hf-mixit .hf-mixit__add svg{width:18px;height:18px}
.hf-mixit .hf-mixit__stepper{display:grid;grid-template-columns:var(--hfm-tap) 1fr var(--hfm-tap);border:1px solid var(--hfm-gold);border-radius:3px;background:var(--hfm-white);overflow:hidden;min-height:var(--hfm-tap)}
.hf-mixit[data-hf-mixit] .hf-mixit__stepper button{border:0;border-radius:0;padding:0;min-height:var(--hfm-tap);display:grid;place-items:center}
.hf-mixit[data-hf-mixit] .hf-mixit__stepper button:hover,.hf-mixit[data-hf-mixit] .hf-mixit__stepper button:focus{border:0;background:var(--hfm-white);color:var(--hfm-gold)}
.hf-mixit .hf-mixit__stepper button svg{width:18px;height:18px}
.hf-mixit[data-hf-mixit] .hf-mixit__stepper button:disabled{opacity:.45;cursor:not-allowed;background:var(--hfm-gold);color:var(--hfm-white)}
.hf-mixit .hf-mixit__stepper output{display:grid;place-items:center;font:var(--hfm-t-small);font-weight:400;letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-ink);font-variant-numeric:tabular-nums}
.hf-mixit .hf-mixit__card-note{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));color:var(--hfm-gold);min-height:1.5em}
.hf-mixit .hf-mixit__card.is-out{opacity:.85}
.hf-mixit .hf-mixit__card.is-out .hf-mixit__media img{filter:grayscale(1);opacity:.55}
.hf-mixit .hf-mixit__out{min-height:var(--hfm-tap);display:flex;align-items:center;justify-content:center;border:1px dashed var(--hfm-line);font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:var(--hfm-t-mono-ls);text-transform:uppercase;color:var(--hfm-text);opacity:.7}
.hf-mixit .hf-mixit__placeholder{padding:28px 16px;text-align:center;border:1px dashed var(--hfm-line);margin-top:16px;color:var(--hfm-text);font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls)}
.hf-mixit .hf-mixit__placeholder b{display:block;font:var(--hfm-t-title);letter-spacing:var(--hfm-t-title-ls);text-transform:uppercase;color:var(--hfm-ink);margin-bottom:6px}

/* Auswahl-Box (sticky unten) */
.hf-mixit .hf-mixit__summary{position:sticky;bottom:var(--hf-mixit-sticky-bottom,0px);z-index:30;background:var(--hfm-white);border-top:1px solid var(--hfm-line);box-shadow:0 -10px 30px rgba(0,0,0,.08);margin:var(--hfm-sp) calc(-1 * var(--hf-mixit-bleed-r,var(--hf-mixit-bleed,0px))) 0 calc(-1 * var(--hf-mixit-bleed-l,var(--hf-mixit-bleed,0px)));padding-bottom:env(safe-area-inset-bottom)}
/* Innenabstände der Leiste: Inhalt bündig mit dem Container (gemessener Rand links/rechts), mindestens 16 px */
.hf-mixit .hf-mixit__hintbar,.hf-mixit .hf-mixit__summary-main,.hf-mixit .hf-mixit__list{padding-left:max(16px,var(--hf-mixit-bleed-l,0px));padding-right:max(16px,var(--hf-mixit-bleed-r,0px))}
.hf-mixit .hf-mixit__hintbar{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;background:var(--hfm-panel);border-bottom:1px solid var(--hfm-line);font:var(--hfm-t-small);font-size:calc(var(--hfm-fs-small) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-ink)}
.hf-mixit .hf-mixit__hintbar.is-tier{background:var(--hfm-white);border-bottom-color:var(--hfm-gold)}
.hf-mixit .hf-mixit__hintbar.is-max{background:var(--hfm-green-soft);border-bottom-color:var(--hfm-green);color:var(--hfm-green)}
.hf-mixit .hf-mixit__hintbar.is-max .hf-mixit__pct{background:var(--hfm-green)}
.hf-mixit .hf-mixit__hintbar strong{font-weight:700}
.hf-mixit .hf-mixit__pct{flex:none;min-width:52px;text-align:center;padding:2px 8px;border-radius:3px;background:var(--hfm-gold);color:var(--hfm-white);font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-sum));font-weight:600;letter-spacing:0}
.hf-mixit .hf-mixit__pct.is-zero{background:var(--hfm-white);color:var(--hfm-text);border:1px solid var(--hfm-line)}
/* overflow-x:clip: die Stufenmarke bei 100 % ragt 1 px über das Balkenende – seit die Leiste die volle Breite hat, wäre das 1 px horizontaler Seiten-Overflow (scrollWidth = Viewport + 1) */
.hf-mixit .hf-mixit__progress{height:4px;background:var(--hfm-line);position:relative;overflow-x:clip}
.hf-mixit .hf-mixit__progress-fill{height:100%;background:var(--hfm-gold);width:0;transition:width .3s}
.hf-mixit .hf-mixit__progress-tick{position:absolute;top:-3px;width:2px;height:10px;background:var(--hfm-white);border:1px solid var(--hfm-line);margin-left:-1px}
@supports not (overflow-x:clip){.hf-mixit .hf-mixit__progress-tick{margin-left:-2px}}
.hf-mixit .hf-mixit__summary-main{padding-top:12px;padding-bottom:12px;display:grid;gap:12px}
/* Summenzeile (mobile-first): Zeile 1 = Toggle | Preis, Zeile 2 = Ersparnis (links) | MwSt.-Hinweis (rechts); unter 360 px drei Zeilen. */
.hf-mixit .hf-mixit__summary-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"toggle now" "save save" "vat vat";align-items:center;column-gap:12px;font-variant-numeric:tabular-nums}
.hf-mixit .hf-mixit__totals{display:contents}
.hf-mixit .hf-mixit__summary-toggle{grid-area:toggle;display:flex;align-items:center;gap:6px;min-height:var(--hfm-tap);font:var(--hfm-t-title);font-size:calc(var(--hfm-fs-title) * var(--hfm-s-sum));letter-spacing:calc(var(--hfm-t-title-ls) * var(--hfm-s-sum));text-transform:uppercase;color:var(--hfm-ink);white-space:nowrap}
.hf-mixit .hf-mixit__summary-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .25s}
.hf-mixit .hf-mixit__summary[data-expanded="true"] .hf-mixit__summary-toggle svg{transform:rotate(180deg)}
.hf-mixit .hf-mixit__save{grid-area:save;justify-self:start;font:var(--hfm-t-small);font-size:calc(var(--hfm-fs-small) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-gold);white-space:nowrap}
.hf-mixit .hf-mixit__save b{font-weight:700}
.hf-mixit .hf-mixit__price{grid-area:now;display:flex;justify-content:flex-end;align-items:baseline;gap:10px}
.hf-mixit .hf-mixit__was{font:var(--hfm-t-small);font-size:calc(var(--hfm-fs-small) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-text);opacity:.5;text-decoration:line-through}
.hf-mixit .hf-mixit__was[hidden]{display:none}
.hf-mixit .hf-mixit__now{font:var(--hfm-t-price);font-size:calc(var(--hfm-fs-price) * var(--hfm-s-sum));color:var(--hfm-text)}
.hf-mixit .hf-mixit__vat{grid-area:vat;justify-self:end;font:var(--hfm-t-small);font-size:calc(var(--hfm-fs-small) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-text);opacity:.7;white-space:nowrap}
@media (min-width:360px){
  .hf-mixit .hf-mixit__summary-row{grid-template-areas:"toggle now" "meta meta"}
  .hf-mixit .hf-mixit__save,.hf-mixit .hf-mixit__vat{grid-area:meta}
}
.hf-mixit .hf-mixit__thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-height:46px;align-items:center}
.hf-mixit .hf-mixit__thumbs::-webkit-scrollbar{display:none}
.hf-mixit .hf-mixit__thumbs[hidden]{display:none}
.hf-mixit .hf-mixit__thumb{position:relative;flex:none;width:var(--hfm-tap);height:var(--hfm-tap);overflow:hidden;background:var(--hfm-panel);border:1px solid var(--hfm-line)}
.hf-mixit .hf-mixit__thumb:hover,.hf-mixit .hf-mixit__thumb:focus{border:1px solid var(--hfm-gold);background:var(--hfm-panel)}
.hf-mixit .hf-mixit__thumb img{width:100%;height:100%;object-fit:cover}
.hf-mixit .hf-mixit__thumb-qty{position:absolute;right:0;bottom:0;background:var(--hfm-ink);color:var(--hfm-white);font:var(--hfm-t-mono);line-height:1.2;letter-spacing:0;padding:0 4px}
.hf-mixit .hf-mixit__thumb--jar{border-color:var(--hfm-gold)}
.hf-mixit .hf-mixit__cta{width:100%;min-height:var(--hfm-tap);display:flex;align-items:center;justify-content:center;gap:10px;white-space:normal;text-align:center}
.hf-mixit .hf-mixit__cta:disabled,.hf-mixit .hf-mixit__cta:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--hfm-gold);color:var(--hfm-white)}
/* Primär-Button (ohne --secondary): gold, auch im Fokus (Kit 17 macht button:focus zum Ghost – im Dialog bekommt der erste Button sofort Fokus und sah wie der zweite aus); Hover = Ghost mit goldenem Rahmen (Tommy 15.09.); Tastaturfokus behält den Ring */
.hf-mixit .hf-mixit__cta:not(.hf-mixit__cta--secondary),.hf-mixit .hf-mixit__cta:not(.hf-mixit__cta--secondary):focus{background:var(--hfm-gold);color:var(--hfm-white);border:1px solid var(--hfm-gold)}
.hf-mixit .hf-mixit__cta:not(.hf-mixit__cta--secondary):not(:disabled):hover{background:var(--hfm-white);color:var(--hfm-gold);border-color:var(--hfm-gold)}
.hf-mixit .hf-mixit__cta svg{width:20px;height:20px}
.hf-mixit .hf-mixit__error{padding:8px 16px;background:var(--hfm-panel);border:1px solid var(--hfm-gold);color:var(--hfm-ink);font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls)}
.hf-mixit .hf-mixit__error[hidden]{display:none}
.hf-mixit .hf-mixit__list{display:none;border-bottom:1px solid var(--hfm-line);max-height:min(46vh,380px);overflow-y:auto;padding-top:0;padding-bottom:8px;overscroll-behavior:contain}
.hf-mixit .hf-mixit__list-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:16px;padding:8px 0;background:var(--hfm-white);border-bottom:1px solid var(--hfm-line);font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:var(--hfm-t-mono-ls);text-transform:uppercase;color:var(--hfm-text)}
.hf-mixit .hf-mixit__list-head span{margin-right:auto}
.hf-mixit .hf-mixit__summary[data-expanded="true"] .hf-mixit__thumbs{display:none}
.hf-mixit .hf-mixit__summary[data-expanded="true"] .hf-mixit__list{display:block}
.hf-mixit .hf-mixit__list-group{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:var(--hfm-t-mono-ls);text-transform:uppercase;color:var(--hfm-text);padding:12px 0 4px}
.hf-mixit .hf-mixit__line{display:grid;grid-template-columns:var(--hfm-tap) 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hfm-line)}
.hf-mixit .hf-mixit__line.is-flash{background:var(--hfm-panel)}
.hf-mixit .hf-mixit__line-img{width:var(--hfm-tap);height:var(--hfm-tap);overflow:hidden;background:var(--hfm-panel)}
.hf-mixit .hf-mixit__line-img img{width:100%;height:100%;object-fit:cover}
.hf-mixit .hf-mixit__line-name{font:var(--hfm-t-h4);font-size:calc(var(--hfm-fs-h4) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-text-ls);color:var(--hfm-ink)}
.hf-mixit .hf-mixit__line-sub{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-card));letter-spacing:calc(var(--hfm-t-mono-ls) * var(--hfm-s-card));color:var(--hfm-text);opacity:.7}
.hf-mixit .hf-mixit__line-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hf-mixit .hf-mixit__line-price{font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-sum));font-weight:600;letter-spacing:0;color:var(--hfm-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hf-mixit .hf-mixit__line-was{font-weight:300;opacity:.5;text-decoration:line-through;margin-right:6px}
.hf-mixit .hf-mixit__ministep{display:inline-grid;grid-template-columns:32px 32px 32px;border:1px solid var(--hfm-line);overflow:hidden;background:var(--hfm-white)}
.hf-mixit .hf-mixit__ministep button{min-height:32px;display:grid;place-items:center;color:var(--hfm-ink)}
.hf-mixit .hf-mixit__ministep button:hover,.hf-mixit .hf-mixit__ministep button:focus{color:var(--hfm-gold)}
.hf-mixit .hf-mixit__ministep button:disabled{opacity:.35;cursor:not-allowed}
.hf-mixit .hf-mixit__ministep button svg{width:14px;height:14px;stroke-width:2.2}
.hf-mixit .hf-mixit__ministep output{display:grid;place-items:center;font:var(--hfm-t-mono);font-size:calc(var(--hfm-fs-mono) * var(--hfm-s-sum));font-weight:600;letter-spacing:0;color:var(--hfm-ink)}
.hf-mixit .hf-mixit__textbtn{padding:6px 0;font:var(--hfm-t-small);font-size:calc(var(--hfm-fs-small) * var(--hfm-s-sum));letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-gold);text-decoration:underline;text-underline-offset:3px;min-height:32px;text-transform:none;white-space:nowrap}
.hf-mixit .hf-mixit__textbtn:hover,.hf-mixit .hf-mixit__textbtn:focus{color:var(--hfm-ink)}
.hf-mixit .hf-mixit__textbtn--danger{color:var(--hfm-ink)}

/* Dialog + Toast */
.hf-mixit .hf-mixit__dialog{position:fixed;inset:0;z-index:9990;background:rgba(45,45,44,.5);display:none;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + var(--hf-mixit-sticky-bottom,0px))}
.hf-mixit .hf-mixit__dialog[data-open="true"]{display:flex}
.hf-mixit .hf-mixit__dialog-box{background:var(--hfm-white);padding:20px 16px;width:100%;max-width:440px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hf-mixit .hf-mixit__dialog-box h3{margin:0 0 6px;font:var(--hfm-t-title);font-size:calc(var(--hfm-fs-title) * var(--hfm-s-sum));letter-spacing:calc(var(--hfm-t-title-ls) * var(--hfm-s-sum));text-transform:uppercase;color:var(--hfm-ink)}
.hf-mixit .hf-mixit__dialog-box p{margin:0 0 16px;font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls);color:var(--hfm-text)}
.hf-mixit .hf-mixit__dialog-actions{display:grid;gap:8px}
.hf-mixit .hf-mixit__toast{position:fixed;left:50%;bottom:calc(24px + var(--hf-mixit-sticky-bottom,0px));transform:translateX(-50%);z-index:9991;background:var(--hfm-ink);color:var(--hfm-white);padding:12px 16px;font:var(--hfm-t-small);letter-spacing:var(--hfm-t-small-ls);box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s}
.hf-mixit .hf-mixit__toast.is-on{opacity:1}

/* Tablet / Desktop */
@media (min-width:640px){
  .hf-mixit .hf-mixit__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .hf-mixit .hf-mixit__modebar{flex-direction:row;align-items:center;justify-content:space-between}
  .hf-mixit .hf-mixit__modebar button{min-height:32px}
  .hf-mixit .hf-mixit__benefits-list{grid-template-columns:repeat(3,1fr);gap:16px}
  .hf-mixit .hf-mixit__summary-main{grid-template-columns:1fr auto;align-items:center}
  .hf-mixit .hf-mixit__summary-main .hf-mixit__summary-row{grid-column:1;grid-row:1}
  .hf-mixit .hf-mixit__summary-main .hf-mixit__cta{grid-column:2;grid-row:1;width:auto;min-width:280px}
  .hf-mixit .hf-mixit__summary-main .hf-mixit__thumbs,.hf-mixit .hf-mixit__summary-main .hf-mixit__error{grid-column:1/-1}
  .hf-mixit .hf-mixit__summary-row{grid-template-areas:"toggle now" "save vat";column-gap:16px}
  .hf-mixit .hf-mixit__save{grid-area:save}
  .hf-mixit .hf-mixit__vat{grid-area:vat}
}
@media (min-width:1024px){
  .hf-mixit{--hfm-sp:40px}
  .hf-mixit .hf-mixit__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .hf-mixit .hf-mixit__steps{margin:0;padding:0;justify-content:flex-start}
  .hf-mixit .hf-mixit__step{flex:0 0 auto;padding:12px 20px 10px}
  .hf-mixit .hf-mixit__summary-main{grid-template-columns:auto 1fr auto;gap:20px}
  .hf-mixit .hf-mixit__summary-main .hf-mixit__thumbs{grid-column:2;grid-row:1;max-width:520px}
  .hf-mixit .hf-mixit__summary-main .hf-mixit__cta{grid-column:3}
  .hf-mixit .hf-mixit__list{max-height:320px}
  .hf-mixit .hf-mixit__line{grid-template-columns:var(--hfm-tap) 1fr 200px auto}
  .hf-mixit .hf-mixit__dialog{align-items:center}
}
@media (min-width:1400px){
  .hf-mixit .hf-mixit__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}