:root { --mm-ink:#151515; --mm-bg:#f6f4ef; --mm-panel:#fff; --mm-accent:#e2233b; --mm-line:#dedbd4; --mm-muted:#6f6b66; }
.lofi-mixmate--wizard .lofi-mixmate__panel { display:none !important; }
.lofi-mixmate--wizard .lofi-mixmate__panel.is-active { display:block !important; }
.lofi-mixmate__helper { margin:.35rem 0 1rem; color:var(--mm-muted); font-size:.88rem; }
.lofi-mixmate__slot small { display:block; color:var(--mm-muted); margin-top:.2rem; }
.lofi-mixmate__slot-profile { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }.lofi-mixmate__slot-profile span { padding:.14rem .35rem; font-size:.68rem; border:1px solid var(--mm-line); color:var(--mm-muted); }
.lofi-mixmate-page { max-width:1280px; margin:0 auto; padding:clamp(1.25rem,4vw,4.5rem) 1rem 5rem; color:var(--mm-ink); }
.lofi-mixmate__seed { display:inline-block; margin:.9rem 0 0; padding:.45rem .7rem; border-left:3px solid var(--mm-accent); background:var(--mm-bg); color:var(--mm-muted); font-size:.86rem; }
.lofi-mixmate__label--space { margin-top:1.5rem; }.lofi-mixmate__modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }.lofi-mixmate__modes button { appearance:none; border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); padding:.75rem; text-align:left; cursor:pointer; }.lofi-mixmate__modes button strong,.lofi-mixmate__modes button small { display:block; }.lofi-mixmate__modes button small { margin-top:.2rem; color:var(--mm-muted); font-size:.72rem; line-height:1.35; }.lofi-mixmate__modes button.is-active { border-color:var(--mm-ink); box-shadow:inset 0 -3px var(--mm-accent); }.lofi-mixmate__house { display:flex; gap:.55rem; align-items:flex-start; margin-top:.85rem; padding:.75rem; background:var(--mm-bg); cursor:pointer; }.lofi-mixmate__house input { margin-top:.2rem; accent-color:var(--mm-accent); }.lofi-mixmate__house strong,.lofi-mixmate__house small { display:block; }.lofi-mixmate__house small { color:var(--mm-muted); font-size:.74rem; margin-top:.15rem; }.lofi-mixmate__weights { margin-top:.85rem; color:var(--mm-muted); font-size:.84rem; }.lofi-mixmate__ratio-note { margin:.8rem 0; padding:.7rem .8rem; border-left:3px solid var(--mm-accent); background:#fff4f5; color:#7f1d2d; font-size:.84rem; line-height:1.4; }.lofi-mixmate__result-actions { display:flex; gap:.5rem; margin-top:.6rem; }.lofi-mixmate__result-actions button,.lofi-mixmate__feedback button { border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); padding:.55rem .7rem; cursor:pointer; font:inherit; font-size:.8rem; }.lofi-mixmate__feedback { display:flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--mm-muted); font-size:.8rem; }.lofi-mixmate__feedback button { width:2rem; padding:.35rem; }.lofi-mixmate__saved { margin-top:2rem; padding:1.25rem; border:1px solid var(--mm-line); background:#fff; }.lofi-mixmate__saved h2 { margin:.1rem 0 1rem; font-size:1.25rem; }.lofi-mixmate__saved-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; }.lofi-mixmate__saved-card { border:1px solid var(--mm-line); background:var(--mm-bg); padding:.75rem; text-align:left; cursor:pointer; }.lofi-mixmate__saved-card strong,.lofi-mixmate__saved-card small { display:block; }.lofi-mixmate__saved-card small { margin-top:.2rem; color:var(--mm-muted); }
.lofi-mixmate-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:1.5rem; align-items:end; padding:clamp(1.5rem,5vw,4.5rem); background:var(--mm-ink); color:#fff; }
.lofi-mixmate__eyebrow { display:block; color:var(--mm-accent); letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; font-weight:800; margin-bottom:.8rem; }
.lofi-mixmate-hero h1 { font-size:clamp(2.7rem,7vw,6.5rem); line-height:.88; margin:0; letter-spacing:-.065em; }
.lofi-mixmate-hero p { max-width:52ch; line-height:1.6; color:#dedbd4; margin:1.4rem 0 0; }
.lofi-mixmate-hero__note { border-left:3px solid var(--mm-accent); padding:1rem 0 1rem 1rem; display:grid; gap:.4rem; font-size:.9rem; line-height:1.45; color:#d4d0ca; }
.lofi-mixmate-hero__note strong { color:#fff; }
.lofi-mixmate-builder { background:var(--mm-bg); padding:clamp(1.25rem,3vw,3rem); }
.lofi-mixmate-builder__head { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:baseline; margin-bottom:2rem; }.lofi-mixmate-builder__head span,.lofi-mixmate-step__number { color:var(--mm-accent); font-weight:800; font-size:.75rem; letter-spacing:.1em; }.lofi-mixmate-builder__head h2 { margin:0; font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.04em; }.lofi-mixmate-builder__head p { grid-column:2; color:var(--mm-muted); margin:.35rem 0 0; }
.lofi-mixmate-builder__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--mm-line); border:1px solid var(--mm-line); }
.lofi-mixmate-step { min-height:245px; padding:1.5rem; background:var(--mm-panel); }.lofi-mixmate-step h2 { font-size:1.3rem; margin:.8rem 0 .35rem; }.lofi-mixmate-step>p { color:var(--mm-muted); font-size:.9rem; line-height:1.45; margin:0 0 1.15rem; }.lofi-mixmate-step--result { background:#ece9e2; }
.lofi-mixmate-chips { display:flex; flex-wrap:wrap; gap:.45rem; }.lofi-mixmate-chips button,.lofi-mixmate-bowls button { border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); padding:.55rem .7rem; font:inherit; font-size:.85rem; cursor:pointer; }.lofi-mixmate-chips button small { display:block; color:var(--mm-muted); font-size:.68rem; }.lofi-mixmate-chips button.is-active,.lofi-mixmate-bowls button.is-active { background:var(--mm-ink); color:#fff; border-color:var(--mm-ink); }.lofi-mixmate-chips--subtle button { font-size:.78rem; }.lofi-mixmate-chips--subtle button.is-active { background:var(--mm-accent); border-color:var(--mm-accent); }
.lofi-mixmate-weights { display:grid; gap:.5rem; margin-top:1rem; }.lofi-mixmate-weight { display:grid; grid-template-columns:1fr 4rem; gap:.75rem; align-items:center; font-size:.85rem; }.lofi-mixmate-weight input { accent-color:var(--mm-accent); width:100%; }.lofi-mixmate-weight output { text-align:right; font-weight:700; }
.lofi-mixmate-bowls { display:flex; gap:.4rem; margin:.5rem 0 1rem; }.lofi-mixmate-build,.lofi-mixmate-dock__cta,.lofi-mixmate-pdp-notice__cta { display:inline-flex; align-items:center; gap:.6rem; border:0; padding:.8rem 1rem; background:var(--mm-accent); color:#fff; font-weight:800; text-decoration:none; cursor:pointer; }.lofi-mixmate-build[disabled] { opacity:.45; cursor:not-allowed; }.lofi-mixmate-result { margin-top:1rem; }.lofi-mixmate-result>p,.lofi-mixmate-loading { color:var(--mm-muted); font-size:.9rem; }.lofi-mixmate-result__row { display:grid; grid-template-columns:42px 1fr auto; gap:.7rem; align-items:center; padding:.65rem 0; border-top:1px solid var(--mm-line); }.lofi-mixmate-result__row img { width:42px; height:42px; object-fit:contain; background:#fff; }.lofi-mixmate-result__row a { color:inherit; text-decoration:none; font-weight:700; }.lofi-mixmate-result__row small { color:var(--mm-muted); display:block; }.lofi-mixmate-result__total { display:flex; justify-content:space-between; margin-top:1rem; padding-top:1rem; border-top:2px solid var(--mm-ink); font-weight:800; }
.lofi-mixmate-page__how { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mm-line); margin-top:3rem; border:1px solid var(--mm-line); }.lofi-mixmate-page__how article { background:#fff; padding:1.5rem; }.lofi-mixmate-page__how span { color:var(--mm-accent); font-size:.75rem; font-weight:800; }.lofi-mixmate-page__how h2 { font-size:1.1rem; margin:.8rem 0 .5rem; }.lofi-mixmate-page__how p { color:var(--mm-muted); margin:0; line-height:1.5; font-size:.9rem; }
.lofi-mixmate-pdp-notice { display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:1rem; margin-top:1rem; border:1px solid var(--mm-line); background:var(--mm-bg); }.lofi-mixmate-pdp-notice__mark { color:var(--mm-accent); font-size:1.3rem; }.lofi-mixmate-pdp-notice p { margin:.2rem 0 0; color:var(--mm-muted); font-size:.84rem; }.lofi-mixmate-pdp-notice__cta { font-size:.8rem; white-space:nowrap; }
.lofi-mixmate-dock { position:fixed; right:1rem; bottom:1rem; z-index:1040; }.lofi-mixmate-dock__trigger { border:0; background:var(--mm-ink); color:#fff; padding:.8rem 1rem; display:grid; grid-template-columns:auto 1fr; gap:0 .45rem; text-align:left; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.2); }.lofi-mixmate-dock__trigger>span:first-child { grid-row:span 2; color:var(--mm-accent); }.lofi-mixmate-dock__trigger small { color:#c9c5be; font-size:.7rem; }.lofi-mixmate-dock__panel { position:absolute; right:0; bottom:calc(100% + .7rem); width:min(330px,calc(100vw - 2rem)); padding:1.25rem; background:#fff; border:1px solid var(--mm-line); box-shadow:0 14px 45px rgba(0,0,0,.18); }.lofi-mixmate-dock__panel h2 { margin:.25rem 0 .6rem; font-size:1.45rem; }.lofi-mixmate-dock__panel p { font-size:.88rem; color:var(--mm-muted); line-height:1.5; }.lofi-mixmate-dock__close { float:right; background:transparent; border:0; font-size:1.5rem; cursor:pointer; }.lofi-mixmate-dock__tastes { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0; }.lofi-mixmate-dock__tastes button { border:1px solid var(--mm-line); background:#fff; padding:.4rem .55rem; cursor:pointer; font-size:.78rem; }.lofi-mixmate-dock__tastes button.is-active { background:var(--mm-ink); color:#fff; }.lofi-mixmate-dock__cta { width:100%; justify-content:center; box-sizing:border-box; }
.lofi-mixmate__sensory { margin:.8rem 0 1rem; padding:.85rem 1rem; border:1px solid var(--mm-line); background:var(--mm-bg); color:var(--mm-ink); }.lofi-mixmate__sensory strong { display:block; font-size:.9rem; }.lofi-mixmate__sensory ul { margin:.55rem 0; padding-left:1.1rem; color:var(--mm-muted); font-size:.8rem; line-height:1.5; }.lofi-mixmate__sensory small { display:block; color:var(--mm-muted); font-size:.7rem; }
.lofi-mixmate__modes--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lofi-mixmate__companions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }.lofi-mixmate__companion { position:relative; min-height:118px; padding:.85rem; border:1px solid var(--mm-line); background:var(--mm-panel); color:var(--mm-ink); text-align:left; cursor:pointer; }.lofi-mixmate__companion>span,.lofi-mixmate__companion>strong,.lofi-mixmate__companion>small { display:block; }.lofi-mixmate__companion>span { color:var(--mm-accent); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.lofi-mixmate__companion>strong { margin:.35rem 0; font-size:.92rem; }.lofi-mixmate__companion>small { color:var(--mm-muted); font-size:.72rem; line-height:1.35; }.lofi-mixmate__companion.is-active { border-color:var(--mm-ink); box-shadow:inset 0 -3px var(--mm-accent); }.lofi-mixmate__companion.is-bold>span { color:#a16207; }.lofi-mixmate__companion:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }.lofi-mixmate__compat-loading,.lofi-mixmate__compat-note { color:var(--mm-muted); font-size:.78rem; }.lofi-mixmate__compat-note { margin:.8rem 0 0; }.lofi-mixmate__chip--exclude.is-active { border-color:#a5162b !important; box-shadow:inset 0 -3px #a5162b !important; }.lofi-mixmate__advanced { margin-top:1rem; border:1px solid var(--mm-line); background:var(--mm-panel); padding:.8rem; }.lofi-mixmate__advanced summary { cursor:pointer; font-weight:750; }.lofi-mixmate__advanced>p { color:var(--mm-muted); font-size:.78rem; margin:.65rem 0; }.lofi-mixmate__advanced .lofi-mixmate__modes { margin-top:.65rem; }.lofi-mixmate__auto-decision { display:flex; align-items:flex-start; gap:.55rem; margin:.75rem 0 1rem; padding:.75rem .85rem; border-left:3px solid var(--mm-accent); background:var(--mm-bg); }.lofi-mixmate__auto-decision strong { white-space:nowrap; }.lofi-mixmate__auto-decision span { color:var(--mm-muted); font-size:.82rem; line-height:1.4; }
@media (max-width:700px) { .lofi-mixmate-hero,.lofi-mixmate-builder__grid,.lofi-mixmate-page__how,.lofi-mixmate__modes,.lofi-mixmate__companions { grid-template-columns:1fr; }.lofi-mixmate-builder__head p { grid-column:1/-1; }.lofi-mixmate-pdp-notice { grid-template-columns:auto 1fr; }.lofi-mixmate-pdp-notice__cta { grid-column:1/-1; justify-content:center; }.lofi-mixmate-dock { right:.7rem; bottom:.7rem; }.lofi-mixmate__auto-decision { display:grid; gap:.2rem; } }
.lofi-mixmate-pdp-notice--integrated { display:flex; flex-direction:column; gap:.75rem; padding:1.15rem; background:var(--mm-bg); border:1px solid var(--mm-line); border-radius:4px; margin-top:1.2rem; }
.lofi-mixmate-pdp-notice__header { display:grid; gap:.38rem; }
.lofi-mixmate-pdp-notice__badge { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mm-accent); }
.lofi-mixmate-pdp-notice__profile { color:var(--mm-muted); font-size:.75rem; font-weight:650; }
.lofi-mixmate-pdp-notice__recipe { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--mm-ink); }
.lofi-mixmate-pdp-notice__ratio { background:#fff; padding:.25rem .55rem; border:1px solid var(--mm-line); border-radius:4px; }
.lofi-mixmate-pdp-notice__ratio a { color:inherit; text-decoration:underline; }
.lofi-mixmate-pdp-notice__plus { color:var(--mm-accent); font-weight:800; font-size:1.1rem; }
.lofi-mixmate-pdp-notice__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:.25rem; }
.lofi-mixmate-pdp-notice__bundle-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; padding:.75rem 1.25rem; background:var(--mm-ink); color:#fff; font-weight:700; font-size:.88rem; border-radius:3px; cursor:pointer; transition:background .18s ease; }
.lofi-mixmate-pdp-notice__bundle-btn:hover { background:var(--mm-accent); }
.lofi-mixmate-pdp-notice__bundle-btn:disabled { cursor:wait; opacity:.7; }
.lofi-mixmate-pdp-notice__custom-link { font-size:.82rem; color:var(--mm-muted); text-decoration:none; font-weight:600; }
.lofi-mixmate-pdp-notice__custom-link:hover { color:var(--mm-accent); text-decoration:underline; }
@media (max-width:700px) { .lofi-mixmate-pdp-notice--integrated { padding:1rem; }.lofi-mixmate-pdp-notice__actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }.lofi-mixmate-pdp-notice__bundle-btn { width:100%; min-width:0; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.25; }.lofi-mixmate-pdp-notice__custom-link { text-align:center; } }

/* ── Schnellstart auf der Liste: Platz auf dem Handy (2026-08-04) ───────
   Die Leiste sass unten rechts fest und lag damit auf der Tab-Leiste des
   Shops, dem Maskottchen und dem Seitenrand — drei Dinge auf demselben Fleck.
   Sie steht jetzt UEBER der Tab-Leiste (64px plus Sicherheitsabstand des
   Geraets) und links vom Maskottchen, und sie faellt auf das Noetige zusammen:
   ein Wort statt zwei Zeilen. */
@media (max-width: 991.98px) {
    .lofi-mixmate-dock {
        right: auto;
        left: .7rem;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + .55rem);
        z-index: 1030;
    }
    .lofi-mixmate-dock__trigger {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem .7rem;
        border-radius: 999px;
        font-size: .78rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }
    /* Die zweite Zeile („Mix erstellen") ist auf dem Handy Ballast — die
       Tab-Leiste nennt dasselbe Ziel bereits. */
    .lofi-mixmate-dock__trigger small { display: none; }
    .lofi-mixmate-dock__panel {
        right: auto;
        left: 0;
        width: min(330px, calc(100vw - 1.4rem));
    }
}