/* =========================================================================
   name: MarahMerch Theme
   version: 1.0
   author:
     name: 'LetsDesign'
     url: 'https://let.design'

   [HB 1.18] Aufbau & Design-Grundwerte
   ========================================================================= */

/* [HB 1.19] Selbst gehostete Schrift „Assistant" (DSGVO) */
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/assistant-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/assistant-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/assistant-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/assistant-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/assistant-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/assistant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/assistant-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/assistant-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* [HB 1.18] Design-Grundwerte: Schrift, Farben, Maße (Werte aus dem Original) */
  --mm-font-heading: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-body: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --mm-bg: #ffffff;
  --mm-bg2: #f3f3f3;
  --mm-fg: #121212;
  --mm-accent: #334fb4;
  --mm-muted: rgba(18, 18, 18, .72);
  --mm-border: #e2e2e2;
  --mm-bar-bg: #121212;
  --mm-bar-fg: #ffffff;
  --mm-btn-bg: #121212;
  --mm-btn-fg: #ffffff;
  --mm-footer-bg: #121212;
  --mm-footer-fg: #ffffff;

  --mm-radius: 0px;
  --mm-maxw: 1200px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-fg);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* kein horizontales Scrollen (Mobil) */
}

h1, h2, h3 { overflow-wrap: break-word; }

a { color: inherit; }
/* Inhaltslinks in Akzentfarbe – Buttons behalten ihre eigene Textfarbe */
.mm-page a:not(.mm-btn), .mm-product-desc a:not(.mm-btn), .mm-collection-intro a:not(.mm-btn) { color: var(--mm-accent); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--mm-font-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0 0 .5em;
}

/* --- Ankündigungsleisten ------------------------------------------------- */

.mm-announcebar {
  background: var(--mm-bar-bg);
  color: var(--mm-bar-fg);
  text-align: center;
  font-size: 14px;
  letter-spacing: .4px;
  padding: 11px 16px;
}
.mm-announcebar--light {
  background: var(--mm-bg);
  color: var(--mm-fg);
  border-bottom: 1px solid var(--mm-border);
}
.mm-announcebar a {
  color: inherit;
  text-decoration: none;
}
.mm-announcebar a:hover { text-decoration: underline; }

/* --- Header -------------------------------------------------------------- */

.mm-header {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--mm-maxw);
  margin: 0 auto;
  padding: 22px 24px;
}
.mm-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.mm-logo img { max-height: 64px; width: auto; }
.mm-logo-text {
  font-family: var(--mm-font-heading);
  font-size: 26px;
  letter-spacing: 2px;
  text-transform: lowercase;
}

.mm-nav {
  flex: 1 1 auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
.mm-nav a {
  text-decoration: none;
  font-size: 17px;
  color: var(--mm-fg);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.mm-nav a:hover,
.mm-nav a.is-active { border-bottom-color: var(--mm-fg); }

.mm-icons { flex: 0 0 auto; display: flex; gap: 20px; align-items: center; }
.mm-icons a { color: var(--mm-fg); display: inline-flex; opacity: .9; }
.mm-icons a:hover { opacity: 1; }

/* Burger nur auf kleinen Screens (Standard: aus) */
.mm-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--mm-fg); }

/* Mobile Filter-Elemente standardmäßig aus */
.mm-coll-mbar,
.mm-coll-panel-head,
.mm-coll-panel-foot { display: none; }

/* --- Buttons ------------------------------------------------------------- */

.mm-btn {
  display: inline-block;
  background: var(--mm-btn-bg);
  color: var(--mm-btn-fg);
  text-decoration: none;
  font-family: var(--mm-font-body);
  font-size: 15px;
  letter-spacing: .3px;
  padding: 10px 30px;
  border: 1px solid var(--mm-btn-bg);
  border-radius: var(--mm-radius);
  cursor: pointer;
  transition: opacity .15s ease;
}
.mm-btn:hover { opacity: .85; }

/* --- Hero (Startseite) --------------------------------------------------- */

.mm-hero {
  max-width: var(--mm-maxw);
  margin: 0 auto 70px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.mm-hero-media { grid-column: 1; }
.mm-hero-media img { width: 100%; height: auto; display: block; }
.mm-hero-media.mm-ph { background: #ededed; min-height: 460px; }
.mm-hero-text {
  grid-column: 2;
  background: var(--mm-bg);
  position: relative;
  z-index: 2;
  margin-left: -40px;       /* überlappt den rechten Bildrand wie im Original */
  padding: 40px 0 40px 56px;
}
.mm-hero-heading { font-size: clamp(38px, 8vw, 52px); margin-bottom: .35em; font-weight: 400; }
.mm-hero-body { color: var(--mm-muted); font-size: 16px; margin-bottom: 1.6em; max-width: 40ch; }
.mm-hero-body strong { color: var(--mm-fg); }

/* --- Standard-Seiten ----------------------------------------------------- */

.mm-main { min-height: 40vh; }
.mm-page {
  max-width: 820px;
  margin: 48px auto 72px;
  padding: 0 24px;
}
.mm-page h1 { font-size: clamp(27px, 6vw, 40px); }
.mm-page table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.mm-page th, .mm-page td { border: 1px solid var(--mm-border); padding: 10px 14px; text-align: left; }

/* --- Shop-Liste (Produktraster) ----------------------------------------- */

.mm-collection { max-width: var(--mm-maxw); margin: 36px auto 72px; padding: 0 24px; }
.mm-collection-title { font-size: clamp(27px, 6vw, 40px); font-weight: 400; margin: 0 0 18px; }
.mm-coll-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border);
  padding: 12px 0; margin-bottom: 30px; font-size: 14px;
}
.mm-coll-filter, .mm-coll-sort { display: flex; align-items: center; gap: 18px; }
.mm-coll-muted { color: var(--mm-muted); }
.mm-coll-count { color: var(--mm-muted); }

/* Filter-Dropdowns (Verfügbarkeit / Preis) */
.mm-coll-dd { position: relative; }
.mm-coll-dd > summary {
  list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center;
}
.mm-coll-dd > summary::-webkit-details-marker { display: none; }
.mm-coll-dd > summary i { font-style: normal; color: var(--mm-muted); margin-left: 4px; }
.mm-dd-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 30;
  background: #fff; border: 1px solid var(--mm-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
  padding: 16px 20px; min-width: 244px;
}
.mm-dd-panel--price { min-width: 332px; }
.mm-dd-head {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--mm-border); white-space: nowrap;
}
.mm-dd-muted { color: var(--mm-muted); }
.mm-dd-reset {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--mm-fg); text-decoration: underline;
}
.mm-dd-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; }
.mm-dd-check.is-disabled { color: var(--mm-muted); cursor: default; }
.mm-dd-check input { width: 16px; height: 16px; accent-color: var(--mm-fg); }
.mm-dd-price-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.mm-dd-price-field {
  display: flex; align-items: center; gap: 8px; flex: 1;
  border: 1px solid var(--mm-border); padding: 9px 12px;
}
.mm-dd-price-field span { color: var(--mm-muted); }
.mm-dd-price-field input { border: 0; outline: 0; width: 100%; font: inherit; background: transparent; }
.mm-dd-price-field input::-webkit-outer-spin-button,
.mm-dd-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sortier-Select */
.mm-sort-wrap { position: relative; display: inline-flex; }
.mm-sort-select {
  appearance: none; -webkit-appearance: none; background: transparent;
  border: 1px solid var(--mm-border); border-radius: 0;
  padding: 8px 36px 8px 14px; font: inherit; color: var(--mm-fg); cursor: pointer;
}
.mm-sort-wrap::after {
  content: "\25BE"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--mm-muted);
}

.mm-coll-empty { color: var(--mm-muted); margin: 40px 0; text-align: center; }

.mm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.mm-card { text-decoration: none; color: inherit; display: block; }
.mm-card-media { overflow: hidden; background: #f3f3f3; aspect-ratio: 60 / 89; }
.mm-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mm-card:hover .mm-card-img { transform: scale(1.04); }
.mm-card-media.mm-ph, .mm-card-img.mm-ph { background: #ededed; aspect-ratio: 60 / 89; }
.mm-card-title { font-size: 16px; margin: 14px 0 4px; font-weight: 500; }
.mm-card-price { color: var(--mm-muted); font-size: 15px; }

/* --- Produktseite -------------------------------------------------------- */

.mm-product {
  max-width: var(--mm-maxw);
  margin: 28px auto 70px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}
.mm-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mm-gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--mm-bg); }
/* Karussell-Navigation (nur Mobil sichtbar, per JS aktiviert) */
.mm-gallery-nav { display: none; }
.mm-product-title { font-size: clamp(28px, 6.5vw, 40px); font-weight: 400; margin: 0 0 18px; line-height: 1.1; }
.mm-product-price { font-size: 20px; margin: 0 0 4px; }
.mm-tax { font-size: 13px; color: var(--mm-muted); margin: 0 0 18px; }
.mm-tax a { color: var(--mm-muted); }

.mm-accordion { border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border); margin-bottom: 24px; }
.mm-accordion summary { list-style: none; cursor: pointer; padding: 15px 0; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.mm-accordion summary::-webkit-details-marker { display: none; }
.mm-accordion summary::after { content: "\203A"; transform: rotate(90deg); font-size: 32px; line-height: 1; color: var(--mm-muted); transition: transform .15s; }
.mm-accordion[open] summary::after { transform: rotate(-90deg); }
.mm-accordion-body { padding-bottom: 16px; color: var(--mm-muted); }

.mm-decide { background: #f6f0e4; border: 1px solid #e8ddc6; border-left: 4px solid #c9b48a; padding: 16px 20px; margin: 24px 0; }
.mm-decide-title { margin: 0 0 8px; }
.mm-decide ol, .mm-decide ul { margin: 0; padding-left: 20px; }
.mm-decide li { margin-bottom: 6px; }
.mm-decide li:last-child { margin-bottom: 0; }

.mm-opt { margin-bottom: 20px; }
.mm-label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--mm-fg); }
.mm-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-pill {
  font-family: var(--mm-font-body);
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--mm-fg);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.mm-pill:hover { border-color: var(--mm-fg); }
.mm-pill.is-selected { background: var(--mm-fg); color: #fff; border-color: var(--mm-fg); }

.mm-qty { display: inline-flex; align-items: center; border: 1px solid #d0d0d0; border-radius: 4px; }
.mm-qty button { background: none; border: none; width: 42px; height: 46px; font-size: 18px; cursor: pointer; color: var(--mm-fg); }
.mm-qty input { width: 46px; height: 46px; border: none; text-align: center; font-family: var(--mm-font-body); font-size: 15px; }

.mm-btn-add { width: 100%; margin-top: 26px; padding: 16px; }

/* --- Bestickung (Produktseite) ------------------------------------------ */

.mm-emb-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.mm-emb-toggle input { width: 16px; height: 16px; accent-color: var(--mm-fg); }
.mm-emb-toggle em { color: var(--mm-muted); font-style: normal; }
.mm-emb-field { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mm-emb-field input {
  flex: 1; font-family: var(--mm-font-body); font-size: 15px;
  padding: 12px 14px; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff; color: var(--mm-fg);
}
.mm-emb-field input:focus { outline: none; border-color: var(--mm-fg); }
.mm-emb-counter { font-size: 13px; color: var(--mm-muted); white-space: nowrap; }

/* Hinweis: Individualisierte Artikel vom Widerruf/Umtausch ausgeschlossen */
.mm-emb-note {
  display: flex; gap: 8px; margin-top: 12px;
  padding: 10px 0px; font-size: 13px; line-height: 1.5; color: var(--mm-muted);
}
.mm-emb-note svg { flex: 0 0 auto; margin-top: 2px; }
/* display:flex würde sonst das hidden-Attribut aushebeln */
.mm-emb-field[hidden], .mm-emb-note[hidden] { display: none; }

/* --- Button-Varianten --------------------------------------------------- */

.mm-btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.mm-btn-outline { background: #fff; color: var(--mm-fg); border: 1px solid var(--mm-fg); }
.mm-btn-outline:hover { background: var(--mm-bg2); opacity: 1; }

/* --- Warenkorb-Badge (Header) ------------------------------------------- */

.mm-cart-link { position: relative; }
.mm-cart-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--mm-fg); color: #fff; font-size: 11px; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- Warenkorb-Drawer --------------------------------------------------- */

.mm-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.mm-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mm-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; padding: 22px;
}
.mm-drawer-overlay.is-open .mm-drawer { transform: translateX(0); }
.mm-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--mm-border); }
.mm-drawer-added { font-size: 14px; font-weight: 600; }
.mm-drawer-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--mm-fg); }
.mm-drawer-body { flex: 1; padding: 20px 0; overflow-y: auto; }
.mm-drawer-item { display: flex; gap: 14px; }
.mm-drawer-item img { width: 80px; height: 100px; object-fit: cover; background: var(--mm-bg2); flex: 0 0 auto; }
.mm-drawer-title { font-weight: 600; margin-bottom: 4px; }
.mm-drawer-variant { font-size: 13px; color: var(--mm-muted); }
.mm-drawer-price { margin-top: 6px; }
.mm-drawer-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--mm-border); }
.mm-drawer-continue { background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; color: var(--mm-fg); padding: 4px; }

/* --- Warenkorb-Seite ---------------------------------------------------- */

.mm-cart { max-width: var(--mm-maxw); margin: 40px auto 72px; padding: 0 24px; }
.mm-cart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.mm-cart-head h1 { font-size: clamp(30px, 7vw, 44px); font-weight: 400; margin: 0; }
.mm-cart-continue { font-size: 14px; color: var(--mm-fg); }
/* Leerer Warenkorb – zentriert (alle Breiten) */
.mm-cart-empty { padding: 48px 0 80px; text-align: center; }
.mm-cart-empty-title { font-size: clamp(30px, 7vw, 44px); font-weight: 400; margin: 0 0 24px; }
.mm-cart-empty .mm-btn { display: inline-block; }

.mm-cart-colhead {
  display: grid; grid-template-columns: 110px 1fr 220px 130px; gap: 20px;
  border-bottom: 1px solid var(--mm-border); padding-bottom: 12px;
  font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--mm-muted);
}
.mm-cart-colhead span:first-child { grid-column: 1 / 3; }
.mm-cart-colhead-qty { text-align: center; }
.mm-cart-colhead-sum { text-align: right; }

.mm-cart-row {
  display: grid; grid-template-columns: 110px 1fr 220px 130px; gap: 20px;
  align-items: start; padding: 26px 0; border-bottom: 1px solid var(--mm-border);
}
.mm-cart-thumb { flex: 0 0 auto; }
.mm-cart-thumb img { width: 90px; height: 116px; object-fit: cover; background: var(--mm-bg2); }
.mm-cart-detail { display: flex; flex-direction: column; gap: 6px; }
.mm-cart-name { font-size: 16px; font-weight: 600; text-decoration: none; }
.mm-cart-unit { color: var(--mm-muted); font-size: 14px; }
.mm-cart-edits { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }
.mm-cart-edit { display: flex; flex-direction: column; font-size: 12px; color: var(--mm-muted); gap: 4px; }
.mm-cart-edit select, .mm-cart-edit input {
  font-family: var(--mm-font-body); font-size: 14px; color: var(--mm-fg);
  padding: 7px 10px; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff;
}
.mm-cart-edit--text { flex: 1 1 180px; }
.mm-cart-edit--text input { width: 100%; }
.mm-cart-surcharge { font-size: 12px; color: var(--mm-muted); margin-top: 4px; }
.mm-cart-emb { grid-column: 1 / -1; }       /* volle Zeilenbreite statt enge Detail-Spalte */
.mm-cart-emb .mm-emb-field { margin-top: 10px; max-width: 420px; }
.mm-cart-emb .mm-emb-counter { order: -1; }  /* Zähler links neben das Feld */
.mm-cart-qty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mm-cart-remove { background: none; border: 0; cursor: pointer; color: var(--mm-muted); }
.mm-cart-remove:hover { color: var(--mm-fg); }
.mm-cart-line { text-align: right; font-size: 15px; }

.mm-cart-foot { display: grid; grid-template-columns: 1fr 360px; gap: 40px; margin-top: 34px; }
.mm-cart-note label { display: block; font-size: 14px; margin-bottom: 8px; }
.mm-cart-note textarea {
  width: 100%; font-family: var(--mm-font-body); font-size: 15px;
  padding: 12px 14px; border: 1px solid #c9c9c9; border-radius: 4px; resize: vertical;
}
.mm-cart-summary { text-align: right; }
.mm-cart-subtotal-row { display: flex; justify-content: space-between; font-size: 20px; margin-bottom: 6px; }
.mm-cart-taxnote { font-size: 13px; color: var(--mm-muted); margin: 0 0 16px; }

/* --- Checkout ----------------------------------------------------------- */

.mm-checkout {
  max-width: 1100px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1fr 420px; gap: 0; min-height: 60vh;
}
.mm-checkout-main { padding: 40px 56px; }
.mm-checkout-aside {
  background: var(--mm-bg2); padding: 40px 48px; border-left: 1px solid var(--mm-border);
}
/* Nach Bestellabschluss: Bestellübersicht ausblenden, Layout einspaltig. */
.mm-checkout.is-complete { grid-template-columns: 1fr; }
.mm-checkout.is-complete .mm-checkout-aside { display: none; }
.mm-co-block { border: 0; padding: 0; margin: 0 0 30px; }
.mm-co-block legend, .mm-co-legend { display: block; font-size: 19px; font-weight: 600; padding: 0; margin-bottom: 14px; }
.mm-co-field { margin-bottom: 14px; }
.mm-co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm-co-form input, .mm-co-form select {
  width: 100%; font-family: var(--mm-font-body); font-size: 15px;
  padding: 14px 15px; border: 1px solid #c9c9c9; border-radius: 6px; background: #fff; color: var(--mm-fg);
}
.mm-co-form input:focus, .mm-co-form select:focus { outline: none; border-color: var(--mm-fg); }
.mm-co-form input.is-invalid { border-color: #c0392b; }
.mm-co-error { display: none; color: #c0392b; font-size: 13px; margin-top: 5px; }

.mm-co-shipping {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  border: 1px solid var(--mm-accent); border-radius: 6px; background: #f4f6fd;
}
.mm-co-shipping-radio { width: 16px; height: 16px; border-radius: 50%; border: 5px solid var(--mm-accent); flex: 0 0 auto; }
.mm-co-shipping-label { flex: 1; }
.mm-co-shipping-price { font-weight: 600; }

.mm-co-billbox { border: 1px solid #c9c9c9; border-radius: 6px; overflow: hidden; }
.mm-co-bill {
  display: flex; align-items: center; gap: 12px; padding: 15px; cursor: pointer; margin: 0;
}
.mm-co-bill + .mm-co-bill,
.mm-co-billfields { border-top: 1px solid #c9c9c9; }
.mm-co-bill input { position: absolute; opacity: 0; width: 0; height: 0; }
.mm-co-bill-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid #b5b5b5;
  flex: 0 0 auto; position: relative; background: #fff;
}
.mm-co-bill.is-selected { background: #f4f6fd; }
.mm-co-bill.is-selected .mm-co-bill-dot { border-color: var(--mm-accent); }
.mm-co-bill.is-selected .mm-co-bill-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mm-accent);
}
.mm-co-billfields { padding: 16px 15px; }
.mm-co-submit { margin-top: 8px; padding: 17px; font-size: 16px; }
.mm-co-hint { font-size: 13px; color: var(--mm-muted); text-align: center; margin-top: 14px; }

.mm-co-confirm { max-width: 520px; margin: 40px auto; text-align: center; }
.mm-co-confirm-icon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--mm-fg); color: #fff; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}
.mm-co-confirm h1 { font-size: 30px; font-weight: 400; }
.mm-co-confirm p { color: var(--mm-muted); margin-bottom: 24px; }

/* Checkout-Zusammenfassung (rechte Spalte) */
.mm-sum-list { margin-bottom: 22px; }
.mm-sum-item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mm-sum-thumb { position: relative; flex: 0 0 auto; }
.mm-sum-thumb img { width: 56px; height: 70px; object-fit: cover; background: #fff; border: 1px solid var(--mm-border); border-radius: 6px; }
.mm-sum-qty {
  position: absolute; top: -8px; right: -8px; background: rgba(18,18,18,.78); color: #fff;
  font-size: 12px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-sum-meta { flex: 1; }
.mm-sum-title { font-weight: 600; font-size: 14px; }
.mm-sum-variant { font-size: 13px; color: var(--mm-muted); }
.mm-sum-price { font-size: 14px; white-space: nowrap; }
.mm-sum-rows { border-top: 1px solid var(--mm-border); padding-top: 18px; }
.mm-sum-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.mm-sum-total { font-size: 20px; align-items: baseline; padding-top: 8px; }
.mm-sum-total small { font-size: 12px; color: var(--mm-muted); }
.mm-sum-vatnote { font-size: 12px; color: var(--mm-muted); text-align: right; }

/* Aufklappbare Bestellübersicht – nur Mobil sichtbar (per Media-Query) */
.mm-co-summary-toggle { display: none; }

/* Mini-Zusammenfassung vor dem Bestell-Button – nur Mobil sichtbar */
.mm-co-minisum-wrap { display: none; }

/* --- Footer -------------------------------------------------------------- */

.mm-footer { margin-top: 64px; }
.mm-footer--bare { border-top: 1px solid var(--mm-border); }
.mm-footer-band {
  position: relative;
  background: #0f1f3d;
  background-image: linear-gradient(135deg, #16284c 0%, #0b1730 100%);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.mm-twitch-embed { position: relative; overflow: hidden; width: 100%; max-width: 620px; aspect-ratio: 16 / 9; background: #0e0e10; box-shadow: 0 10px 40px rgba(0,0,0,.35); container-type: inline-size; container-name: mstw; }
.mm-twitch-embed iframe { width: 100%; height: 100%; display: block; border: 0; }

/* [HB 1.20] Twitch „Klick zum Laden"-Fassade (DSGVO) */
.mm-twitch-facade {
  position: relative; width: 100%; height: 100%; margin: 0; border: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 4.2cqw;
  font: inherit; color: #fff; background-size: cover;
  background-position-x: 50%; background-position-y: center;
}
.mm-twitch-facade--offline { cursor: default; }
.mm-twitch-facade--live { cursor: pointer; text-align: center; }
.mm-twitch-facade--live::before { content: ""; position: absolute; inset: 0; background: rgba(14,20,36,.45); }

/* Markenname in Twitch-Lila */
.mm-tw-brand { color: #9146FF; font-weight: 700; text-decoration: none; }
a.mm-tw-brand:hover { text-decoration: underline; }
.mm-twitch-facade--live .mm-tw-brand { color: #b79bff; font-weight: 500; }

/* LIVE-Badge oben links – Größen skalieren mit der Kartenbreite (cqw), Screenshot-kalibriert */
.mm-twitch-live-badge {
  position: absolute; top: 3.6cqw; left: 3.6cqw; z-index: 2;
  display: flex; align-items: center; gap: 1.8cqw;
  background: #e91916; color: #fff; font-weight: 500;
  font-size: clamp(11px, 3.64cqw, 23px); padding: 0.9cqw 2.7cqw;
}
.mm-tw-dot { width: clamp(6px, 2.1cqw, 13px); height: clamp(6px, 2.1cqw, 13px); border-radius: 50%; background: #fff; }

/* Offline: weiße Karte über dem Banner (zentriert) */
.mm-twitch-card {
  position: relative; z-index: 1; background: #fff; color: #18181b;
  padding: 4.85cqw 5.45cqw; max-width: 65%; text-align: left;
}
.mm-twitch-card-title { margin: 0 0 3cqw; font-size: clamp(13px, 4.55cqw, 29px); font-weight: 600; line-height: 1.4; }
.mm-twitch-card-sub { margin: 0 0 3.6cqw; font-size: clamp(12px, 4.24cqw, 27px); font-weight: 600; line-height: 1.4; }
.mm-twitch-visit {
  display: flex; align-items: center; gap: 1.8cqw;
  color: #9146FF; font-weight: 700; font-size: clamp(10px, 3.4cqw, 21px); text-decoration: none;
}
.mm-twitch-visit:hover { text-decoration: underline; }
.mm-tw-tri { width: clamp(12px, 4.24cqw, 27px); height: clamp(12px, 4.24cqw, 27px); fill: currentColor; }

/* Live: Text + zwei Player-Buttons (Twitch / YouTube), zentriert */
.mm-twitch-live-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 3.63cqw, 23px);
}
.mm-twitch-live-text { font-size: clamp(12px, 4.24cqw, 27px); color: #efeff1; }
.mm-stream-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.6cqw, 18px); }
.mm-stream-btn {
  display: inline-flex; align-items: center; gap: clamp(5px, 1.7cqw, 11px);
  margin: 0; border: 0; cursor: pointer; color: #fff; font: inherit; font-weight: 500;
  font-size: clamp(11px, 3.94cqw, 25px); padding: clamp(6px, 2.4cqw, 15px) clamp(12px, 5cqw, 32px);
  transition: background-color .15s ease;
}
.mm-stream-btn svg { width: clamp(14px, 4.6cqw, 30px); height: auto; fill: #fff; flex: none; }
.mm-stream-btn--twitch { background: #9146FF; }
.mm-stream-btn--twitch:hover, .mm-stream-btn--twitch:focus-visible { background: #772ce8; }
.mm-stream-btn--youtube { background: #FF0000; }
.mm-stream-btn--youtube:hover, .mm-stream-btn--youtube:focus-visible { background: #cc0000; }
.mm-twitch-note { margin: 0; font-size: clamp(10px, 3.1cqw, 18px); color: rgba(255,255,255,.72); max-width: 40ch; }
.mm-twitch-logo { position: absolute; right: 26px; bottom: 16px; color: #fff; font-weight: 800; letter-spacing: .3px; text-decoration: none; font-size: 18px; }
.mm-copybar {
  background: var(--mm-bg); color: var(--mm-muted); font-size: 13px; padding: 16px 24px;
  max-width: var(--mm-maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mm-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.mm-footer-links a { color: var(--mm-muted); text-decoration: none; }
.mm-footer-links a:hover { color: var(--mm-fg); text-decoration: underline; }
/* "Vertrag widerrufen" im Footer als <mark>: schwarz hinterlegt, weiße Schrift. */
.mm-footer-links a.mm-widerruf,
.mm-footer-links a.mm-widerruf:hover { text-decoration: none; }
.mm-footer-links a.mm-widerruf mark {
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 2px 8px;
}
.mm-footer-links a.mm-widerruf:hover mark { background: #222; }

/* [HB 1.21] Sticky Footer auf großen Screens */
@media (min-width: 901px) {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  .mm-main { flex: 1 0 auto; }
  .mm-footer { flex-shrink: 0; }
}

/* --- Größentabelle-Bild -------------------------------------------------- */

.mm-page img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; }
.mm-page > p > img { border: 1px solid var(--mm-border); }

/* --- Größentabelle (Skizze + HTML-Tabellen) ------------------------------ */

.page-groessentabelle .mm-page h2 { margin-top: 1.8em; font-size: 24px; }
.page-groessentabelle .mm-page > p > img { max-width: 300px; border: 0; margin: .6em auto 1.2em; }
.page-groessentabelle .mm-page table { max-width: 560px; margin: 0 auto 1.4em; }
.page-groessentabelle .mm-page th,
.page-groessentabelle .mm-page td { text-align: center; }
.page-groessentabelle .mm-page td:first-child,
.page-groessentabelle .mm-page th:first-child { background: var(--mm-bg2); }
.page-groessentabelle .mm-size-note { text-align: center; margin-top: 1.6em; }

@media (max-width: 480px) {
  .page-groessentabelle .mm-page table { display: block; overflow-x: auto; white-space: nowrap; }
  .page-groessentabelle .mm-page th,
  .page-groessentabelle .mm-page td { padding: 8px 10px; }
}

/* --- Kontaktformular ----------------------------------------------------- */

.mm-kontakt-intro { margin-bottom: 34px; }
.mm-kontakt-intro a { color: var(--mm-accent); }
.mm-form { max-width: 740px; }
.mm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm-form input, .mm-form textarea {
  width: 100%; font-family: var(--mm-font-body); font-size: 15px;
  padding: 14px 15px; border: 1px solid #c9c9c9; border-radius: 4px;
  margin-bottom: 16px; background: #fff; color: var(--mm-fg);
}
.mm-form input:focus, .mm-form textarea:focus { outline: none; border-color: var(--mm-fg); }
.mm-form textarea { resize: vertical; }
.mm-form .mm-btn { margin-top: 6px; }
.mm-form-field { display: block; }
.mm-form input.is-invalid, .mm-form textarea.is-invalid { border-color: #c0392b; }
.mm-form .mm-co-error { margin-top: -8px; margin-bottom: 14px; }

/* Anliegen-Auswahl (Radio-Kacheln) */
.mm-kontakt-anliegen { border: 0; padding: 0; margin: 0 0 16px; }
.mm-kontakt-anliegen legend {
  font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--mm-muted); margin-bottom: 10px; padding: 0;
}
.mm-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.mm-radio-group label {
  flex: 1 1 220px; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 13px 16px; border: 1px solid #c9c9c9; border-radius: 4px;
  background: #fff; color: var(--mm-fg); font-size: 15px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mm-radio-group input[type="radio"] {
  width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer;
  accent-color: var(--mm-fg);
}
.mm-radio-group label:hover { border-color: var(--mm-fg); }
.mm-radio-group label:has(input:checked) {
  border-color: var(--mm-fg); background: var(--mm-bg2);
  box-shadow: inset 0 0 0 1px var(--mm-fg);
}

/* --- Login (Grav Login-Plugin) ------------------------------------------ */

.mm-login { max-width: 440px; margin: 56px auto 84px; padding: 0 24px; }
.mm-login-title { font-size: clamp(28px, 6vw, 40px); font-weight: 400; margin: 0 0 26px; text-align: center; }

.mm-login-messages { margin-bottom: 22px; }
.mm-login-msg {
  padding: 12px 14px; margin-bottom: 10px; font-size: 14px;
  background: var(--mm-bg2); border: 1px solid var(--mm-border); border-left: 3px solid var(--mm-fg);
}
.mm-login-msg--error { background: #fdf3f2; border-color: #e9c4bf; border-left-color: #c0392b; color: #8e2a1f; }

.mm-login #grav-login { font-family: var(--mm-font-body); }
.mm-login #grav-login h4 { font-size: 18px; font-weight: 600; text-align: center; }
.mm-login #grav-login hr { border: 0; border-top: 1px solid var(--mm-border); margin: 18px 0; }
.mm-login #grav-login .fa { display: none; }

.mm-login #grav-login .form-field { margin-bottom: 16px; }
.mm-login #grav-login .form-label,
.mm-login #grav-login label.form-label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--mm-fg); }
.mm-login #grav-login input[type="text"],
.mm-login #grav-login input[type="email"],
.mm-login #grav-login input[type="password"] {
  width: 100%; box-sizing: border-box; font-family: var(--mm-font-body); font-size: 15px;
  padding: 14px 15px; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff; color: var(--mm-fg);
}
.mm-login #grav-login input[type="text"]:focus,
.mm-login #grav-login input[type="email"]:focus,
.mm-login #grav-login input[type="password"]:focus { outline: none; border-color: var(--mm-fg); }

.mm-login #grav-login .form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mm-login #grav-login .rememberme { order: 0; }
.mm-login #grav-login .rememberme .form-input-wrapper { display: flex; align-items: center; gap: 8px; }
.mm-login #grav-login .rememberme label { margin: 0; font-size: 14px; color: var(--mm-muted); }
.mm-login #grav-login input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mm-fg); }

.mm-login #grav-login .button,
.mm-login #grav-login button[type="submit"] {
  display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none;
  font-family: var(--mm-font-body); font-size: 15px; letter-spacing: .3px;
  padding: 14px 30px; border-radius: var(--mm-radius); cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.mm-login #grav-login .button.primary,
.mm-login #grav-login .button.logout,
.mm-login #grav-login button[type="submit"] {
  order: 1; background: var(--mm-btn-bg); color: var(--mm-btn-fg); border: 1px solid var(--mm-btn-bg);
}
.mm-login #grav-login .button.primary:hover,
.mm-login #grav-login .button.logout:hover,
.mm-login #grav-login button[type="submit"]:hover { opacity: .85; }
.mm-login #grav-login .button.secondary {
  order: 2; background: #fff; color: var(--mm-fg); border: 1px solid var(--mm-fg);
}
.mm-login #grav-login .button.secondary:hover { background: var(--mm-bg2); opacity: 1; }

/* --- Responsiv [HB 1.21] ------------------------------------------------- */

@media (max-width: 900px) {
  .mm-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-form-row { grid-template-columns: 1fr; }

  /* Hero (Startseite): Bild oben, Text darunter – grid-column zurücksetzen */
  .mm-hero { grid-template-columns: 1fr; gap: 24px; padding: 16px; margin-bottom: 40px; }
  .mm-hero-media, .mm-hero-text { grid-column: auto; }
  /* Overlap wie im Desktop-/Originaldesign: Textkarte überlappt das Bild */
  .mm-hero-text { width: 90%; margin: -3rem auto 0; padding: 28px 28px 8px; }

  /* Produktseite: Galerie als Karussell oben, Infos darunter */
  .mm-product { grid-template-columns: 1fr; gap: 28px; padding: 0 16px; }
  .mm-gallery-wrap { order: -1; }
  .mm-gallery {
    grid-template-columns: none;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mm-gallery::-webkit-scrollbar { display: none; }
  .mm-gallery-img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;        /* ganzes Bild zeigen, nicht beschneiden */
    scroll-snap-align: center;
  }
  .mm-gallery-nav {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 14px 0 2px; font-size: 14px; color: var(--mm-muted);
  }
  .mm-gallery-nav button {
    background: none; border: 0; cursor: pointer; color: var(--mm-fg);
    font-size: 24px; line-height: 1; padding: 2px 10px;
  }
  .mm-gallery-nav button:disabled { opacity: .25; cursor: default; }
  .mm-gallery-count { min-width: 46px; text-align: center; }

  /* Warenkorb: kompakte, gestapelte Zeile ohne Overflow */
  .mm-cart { padding: 0 16px; }
  .mm-cart-colhead { display: none; }
  .mm-cart-row {
    grid-template-columns: 80px 1fr auto;
    grid-template-areas:
      "thumb detail line"
      "thumb qty    qty";
    column-gap: 14px; row-gap: 6px;
    padding: 22px 0;
  }
  .mm-cart-thumb { grid-area: thumb; }
  .mm-cart-thumb img { width: 80px; height: 104px; }
  .mm-cart-detail { grid-area: detail; }
  .mm-cart-line { grid-area: line; }
  .mm-cart-qty {
    grid-area: qty; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 16px; margin-top: 6px;
  }
  .mm-cart-edit select, .mm-cart-edit input { max-width: 100%; }
  .mm-cart-edit--text { flex: 1 1 150px; }
  .mm-cart-emb .mm-emb-toggle { font-size: 13px; }
  .mm-cart-foot { grid-template-columns: 1fr; gap: 26px; }
  .mm-cart-summary { text-align: left; }
  .mm-cart-subtotal-row { font-size: 18px; }

  /* Checkout: einspaltig, Bestellübersicht als aufklappbarer Balken oben */
  .mm-checkout { grid-template-columns: 1fr; min-height: 0; }
  .mm-checkout-aside {
    order: -1; background: var(--mm-bg2);
    border-left: 0; border-bottom: 1px solid var(--mm-border); padding: 0;
  }
  .mm-checkout-main { padding: 28px 18px 44px; }
  .mm-co-row { grid-template-columns: 1fr; }
  .mm-co-summary-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; cursor: pointer; font: inherit; color: var(--mm-fg);
    padding: 18px;
  }
  .mm-co-summary-toggle-label {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--mm-accent); font-size: 15px;
  }
  .mm-co-summary-toggle-total { font-size: 18px; font-weight: 700; }
  .mm-co-summary-toggle svg { transition: transform .2s ease; }
  .mm-checkout-aside.is-open .mm-co-summary-toggle svg { transform: rotate(180deg); }
  .mm-co-summary-collapse { display: none; padding: 2px 18px 22px; }
  .mm-checkout-aside.is-open .mm-co-summary-collapse { display: block; }

  /* Mini-Zusammenfassung vor dem Bestell-Button */
  .mm-co-minisum-wrap { display: block; margin: 6px 0 16px; }
  .mm-co-minisum {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--mm-bg2); border: 0; cursor: pointer;
    padding: 12px 16px; font: inherit; color: var(--mm-fg); text-align: left;
  }
  .mm-co-minisum-thumb {
    width: 40px; height: 50px; object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--mm-border); border-radius: 6px; background: #fff;
  }
  .mm-co-minisum-meta { display: flex; flex-direction: column; line-height: 1.25; }
  .mm-co-minisum-title { font-weight: 600; }
  .mm-co-minisum-count { font-size: 13px; color: var(--mm-muted); }
  .mm-co-minisum-total { margin-left: auto; font-size: 18px; font-weight: 700; white-space: nowrap; }
  .mm-co-minisum-total small { font-size: 11px; color: var(--mm-muted); font-weight: 400; }
  .mm-co-minisum > svg { flex: 0 0 auto; color: var(--mm-muted); transition: transform .2s ease; }
  .mm-co-minisum[aria-expanded="true"] > svg { transform: rotate(180deg); }
  .mm-co-minisum-detail { background: var(--mm-bg2); padding: 14px 16px 4px; }

  /* Warenkorb-Drawer auf voller Breite */
  .mm-drawer { width: 100%; max-width: 100%; }

  /* Footer: Copyright + Links zentriert */
  .mm-copybar { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
  .mm-footer-links { justify-content: center; gap: 2px 6px; }
  .mm-footer-links a { display: inline-block; padding: 11px 12px; font-size: 15px; }

  /* Header: Burger links, Logo zentriert, Icons rechts */
  .mm-header { flex-wrap: wrap; gap: 14px; justify-content: space-between; }
  .mm-burger { display: inline-flex; align-items: center; order: 0; flex: 0 0 auto; padding: 6px 0; }
  .mm-logo { order: 1; margin: 0 auto; min-width: 0; }
  .mm-logo img { max-height: 46px; }
  .mm-icons { order: 2; flex: 0 0 auto; gap: 16px; }
  .mm-nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; display: none; }
  .mm-header.is-nav-open .mm-nav { display: flex; }
  .mm-nav a { padding: 13px 2px; border-top: 1px solid var(--mm-border); }

  /* Filter: Trigger-Leiste + Slide-out-Panel */
  .mm-coll-mbar {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border);
    padding: 12px 0; margin-bottom: 28px;
  }
  .mm-coll-mtrigger { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; font: inherit; cursor: pointer; color: var(--mm-fg); }
  .mm-coll-mcount { color: var(--mm-muted); font-size: 14px; }

  body.mm-filter-open { overflow: hidden; }

  .mm-coll-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 100%;
    background: #fff; z-index: 1001; transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column; margin: 0;
  }
  body.mm-filter-open .mm-coll-panel { transform: translateX(0); }

  .mm-coll-panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mm-border); }
  .mm-coll-panel-title { font-weight: 600; flex: 1; }
  .mm-coll-panel-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--mm-fg); }

  .mm-coll-toolbar { flex-direction: column; align-items: stretch; gap: 0; border: 0; padding: 0 20px; margin: 0; overflow-y: auto; flex: 1; }
  .mm-coll-filter { flex-direction: column; align-items: stretch; gap: 0; }
  .mm-coll-filter > .mm-coll-muted { display: none; }
  .mm-coll-dd { border-bottom: 1px solid var(--mm-border); }
  .mm-coll-dd > summary { padding: 16px 0; justify-content: space-between; width: 100%; }
  .mm-dd-panel, .mm-dd-panel--price { position: static; box-shadow: none; border: 0; padding: 0 0 16px; min-width: 0; }
  .mm-coll-sort { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 0; }
  .mm-coll-sort .mm-coll-count { display: none; }
  .mm-sort-wrap, .mm-sort-select { width: 100%; }

  .mm-coll-panel-foot { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--mm-border); margin-top: auto; }
  .mm-coll-panel-foot .mm-btn { flex: 1; font-size: 13px; padding: 12px 14px; text-align: center; }
}

/* --- Code-/Struktur-Block (z. B. Konzept-Schaubild) [HB 1.22] ------------ */
.mm-page pre {
  background: #44403c;
  color: #ffffff;
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  font-size: 14px;
  line-height: 1.55;
  padding: 20px 22px;
  border: 1px solid #57514b;
  border-radius: 6px;
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-font-smoothing: antialiased;
}
.mm-page pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}