/* Druck und Zauber — Konfiguratoren auf Mobilgeräten: Vorschau erst auf Knopfdruck, dann als Vollbild-Ansicht.
   Gilt für alle Konfigurator-Seiten (.configurator mit .fc-preview-col). Ab 900 px ist alles wie bisher nebeneinander. */
@media (max-width: 900px) {
  /* Einspaltig: die Konfigurator-Stile setzen sonst zwei Spalten, die zweite bliebe leer und das Formular halb so breit */
  .configurator .product-layout,
  .configurator.has-mobile-preview .product-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .configurator .product-buy, .configurator .fc-preview-col { min-width: 0; max-width: none; }
  /* Formular zuerst, Vorschau steckt im Overlay */
  .configurator.has-mobile-preview .fc-preview-col { display: none; }
  .configurator.has-mobile-preview.preview-open .fc-preview-col {
    display: block; position: fixed; inset: 0; z-index: 120; background: var(--white);
    padding: 3.6rem 1rem 1.2rem; overflow-y: auto; overscroll-behavior: contain;
  }
  /* Vorschau füllt im Overlay die Höhe, damit man auf kleinen Displays wirklich etwas sieht */
  .configurator.preview-open .forge-viewport { aspect-ratio: auto; height: min(58vh, 460px); }
  .configurator.preview-open .fc-preview { min-height: min(52vh, 420px); }
  .configurator.preview-open .gm-preview { min-height: min(52vh, 420px); }

  .mp-bar {
    position: sticky; bottom: 0; z-index: 40; padding: 0.7rem 0 0.9rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--white) 22%, var(--white) 100%);
  }
  .mp-open { width: 100%; background: var(--white); box-shadow: 0 6px 18px rgba(47, 98, 83, 0.18); }
  .mp-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
  .mp-close {
    position: fixed; top: 0.7rem; right: 0.9rem; z-index: 130; display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px; padding: 0.5rem 1rem; border-radius: var(--radius-pill); border: 2px solid var(--border);
    background: var(--white); color: var(--black); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  }
  .mp-close:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 2px; }
  .configurator:not(.preview-open) .mp-close { display: none; }

  /* Bedienelemente fingergerecht (mindestens ~44 px) */
  .configurator .gm-swatch { width: 40px; height: 40px; }
  .configurator .gm-swatch svg { width: 40px; height: 40px; }
  .configurator .gm-color { max-width: none; gap: 8px; }
  .configurator .sz-select, .configurator .forge-text, .configurator .gm-name, .configurator .fc-qty input { min-height: 46px; font-size: 1rem; }
  .configurator .sz-select { max-width: none; width: 100%; }
  .configurator .sz-font { display: grid; gap: 0.35rem; width: 100%; }
  .configurator .forge-size { width: 100%; }
  .configurator .forge-size input[type="range"] { flex: 1; width: auto; min-width: 0; height: 44px; }
  .configurator .chip, .configurator .fc-swatch, .configurator .fc-key-head, .configurator .gm-remove { min-height: 44px; }
  .configurator .fc-letter-grid .chip { width: 2.8rem; }
  .configurator .forge-font { min-height: 46px; }
  .configurator .fc-keylist .fc-key-body { padding-bottom: 1rem; }
  /* WhatsApp-Knopf würde den Vorschau-Knopf überdecken */
  body.has-configurator .wa-fab { display: none; }
}
html.mp-locked, html.mp-locked body { overflow: hidden; }
@media (min-width: 901px) {
  .mp-bar, .mp-open, .mp-close { display: none; }
}