/* Konfigurator-Styles (aus index.html ausgelagert) */

/* =========================
   APP BOOT LOADER (Meisterschlaf)
   Vollbild bis Szene + Startzustand bereit (asm.js revealViewer)
   ========================= */
body.is-boot-loading {
  background: linear-gradient(165deg, #f6f8fb 0%, #eef2f7 45%, #e8edf4 100%);
}

body.is-boot-loading .app {
  visibility: hidden;
  pointer-events: none;
}

.app-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: linear-gradient(165deg, #f6f8fb 0%, #eef2f7 45%, #e8edf4 100%);
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.app-boot-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-boot-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  max-width: min(32.5rem, 100%);
}


.app-boot-loader__logo {
  width: min(17.5rem, 80vw);
  height: auto;
  display: block;
  object-fit: contain;
}

.app-boot-loader__perks {
  list-style: none;
  margin: 0;
  padding: var(--pad-inline-md);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.app-boot-loader__perks li {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
  font-family: var(--font, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-06-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  opacity: 0;
  transform: translateY(6px);
  animation: appBootPerkIn 0.62 ease forwards;
}

.app-boot-loader__perks li:last-child {
  margin-bottom: 0;
}

.app-boot-loader__perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
}

.app-boot-loader__perks li:nth-child(1) {
  animation-delay: 0.2s;
}
.app-boot-loader__perks li:nth-child(2) {
  animation-delay: 1.0s;
}
.app-boot-loader__perks li:nth-child(3) {
  animation-delay: 1.8s;
}
.app-boot-loader__perks li:nth-child(4) {
  animation-delay: 2.6s;
}
.app-boot-loader__perks li:nth-child(5) {
  animation-delay: 3.4s;
}
.app-boot-loader__perks li:nth-child(6) {
  animation-delay: 4.2s;
}
.app-boot-loader__perks li:nth-child(7) {
  animation-delay: 5.0s;
}

@keyframes appBootPerkIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-boot-loader__text {
  margin: 0;
  font-family: var(--font, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-08-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.01em;
}

.app-boot-loader__spinner {
  width: calc(var(--space-6) + var(--space-4));
  height: calc(var(--space-6) + var(--space-4));
  border-radius: 50%;
  border: 3px solid rgba(31, 112, 173, 0.18);
  border-top-color: var(--accent, #1f70ad);
  animation: appBootLoaderSpin 0.85s linear infinite;
}

.reset-loader{
  position:fixed;
  inset:0;
  z-index:2147483638;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15, 23, 42, 0.16);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}

.reset-loader.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.reset-loader__card{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:170px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255, 255, 255, 0.96);
  box-shadow:0 10px 28px rgba(15, 23, 42, 0.16);
}

.reset-loader__spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(31, 112, 173, 0.24);
  border-top-color:var(--accent, #1f70ad);
  animation:appBootLoaderSpin 0.75s linear infinite;
}

.reset-loader__text{
  font-family:var(--font, ui-sans-serif, system-ui, sans-serif);
}

@keyframes appBootLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-loader {
    transition: none;
  }

  .app-boot-loader__spinner {
    animation: none;
    border-top-color: var(--accent, #1f70ad);
    opacity: 0.85;
  }

  .app-boot-loader__perks li {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/*
 * Medien-Breakpoints (Überblick — Werte je nach Komponente absichtlich verschieden)
 * ---------------------------------------------------------------------------------
 * 540px   enge Phones (u. a. Step-Grid)
 * 600px   kompakte Ansicht
 * 700px   schmale Zweiteilung (min/max-Paar)
 * 768px   Haupt-Mobile-Breakpoint (Layout, Tabs, viele Blöcke)
 * 820px   Sonderfall (Tabs/Scroll)
 * 900px   u. a. FAQ / mittlere Breite
 * 979px   unter Desktop (z. B. Sticky-Step-Nav aus); Paar zu min-width 980px
 * 980px   Desktop (u. a. Hotspot-Zoom-Button)
 * 1024px  breitere Grenze (u. a. Summary-Karte); in JS (hotspots, summary, WhatsApp)
 *         ebenfalls max-width 1024px — bei Änderungen dort und hier abgleichen.
 *
 * CSS-Variablen in @media sind in älteren WebViews unzuverlässig — Pixel bleiben explizit.
 *
 * Typografie-Skala (--fs-*, --lh-*, --fw-* in :root)
 * -----------------------------------------------------------------
 * Größen (rem, Basis html { font-size: --font-root }): --fs-01-3xs … --fs-11-4xl
 * Zeilenhöhe: --lh-tighter … --lh-extra
 * Gewicht: --fw-regular | medium | semibold | bold
 *
 * Nutzung: var(--fs-*), var(--lh-*), var(--fw-*) in Komponenten-Klassen (keine Typo-Utility-Klassen).
 * Responsive: --font-root clamp auf html; Skala nur in :root (keine Typo-@media).
 * Grid: --grid-cols-mobile/tablet-portrait/tablet/desktop/narrow (576/768/1200px + sheet-body-Container, s. GRID BREAKPOINTS).
 *
 * Abstand & Padding (--space-* → --pad-*)
 * -----------------------------------------------------------------
 * --space-1…6: primitive Abstände (gap, margin, padding), px.
 * --pad-1…6:   Padding-Stufen (alias auf --space-*).
 * Rollen: --pad-inline-sm/md, --pad-block-sm/md, --pad-card, --pad-sheet,
 *         --pad-section, --pad-modal. Shorthand: padding: var(--pad-card);
 */

:root{
  --bg:#f6f7f9;
  --cardGlass:rgba(255,255,255,.78);
  --stroke2:rgba(15,23,42,.08);

  --bg-page:#f6f7f9;
  --bg-soft:#f2f4f7;
  --bg-muted:#eef1f4;

  --text:rgba(15,23,42,.95);
  --muted:rgba(15,23,42,.62);

  --accent:#1f70ad;
  --good:#34c759;
  --warn:#ff9f0a;
  --bad:#ff3b30;

  --grey-light:rgba(239,239,239,1);
  --grey-dark:rgba(178,178,178,1);

  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);

  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --ms-modal-z:2147483000;
  --ms-modal-backdrop:rgba(2,6,23,.45);
  --ms-modal-bg:#fff;
  --ms-modal-radius:var(--radius-sm);
  --ms-modal-shadow:0 24px 80px rgba(0,0,0,.28);
  --ms-modal-w-sm:420px;
  --ms-modal-w-md:720px;
  --ms-modal-w-lg:920px;
  --ms-modal-maxh:90dvh;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-xs:0 1px 3px rgba(0,0,0,0.12);
  --shadow-sm:0 2px 6px rgba(0,0,0,0.15);
  --shadow-md:0 6px 18px rgba(0,0,0,0.18);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.22);

  --border-default:1px solid var(--grey-light);
  --border-hover:1px solid var(--accent);

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  /* Padding-Skala: --pad-* → semantische Rollen (px, nicht rem) */
  --pad-1:var(--space-1);
  --pad-2:var(--space-2);
  --pad-3:var(--space-3);
  --pad-4:var(--space-4);
  --pad-5:var(--space-5);
  --pad-6:var(--space-6);
  --pad-inline-sm:var(--pad-2) var(--pad-3);
  --pad-inline-md:var(--pad-3) var(--pad-4);
  --pad-block-sm:var(--pad-2) 0;
  --pad-block-md:var(--pad-3) 0;
  --pad-card:var(--pad-3);
  --pad-sheet:var(--pad-3);
  --pad-section:var(--pad-3);
  --pad-modal:var(--pad-3);
  --pad:var(--pad-4); /* legacy alias */
  --ms-modal-pad:var(--pad-modal);

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* html-Basis (clamp) — eigener Name, damit er nicht in --fs-*-Autocomplete gemischt wird */
  --font-root: clamp(1rem, 0.96rem + 0.28vw, 1.0625rem);

  /* font-size: --fs-01 … --fs-11 (Nummer = klein → groß, Suffix = früherer Name) */
  --fs-01-3xs:0.625rem;
  --fs-02-2xs:0.6875rem;
  --fs-03-xs:0.75rem;
  --fs-04-sm:0.8125rem;
  --fs-05-md:0.875rem;
  --fs-06-base:1rem;
  --fs-07-lg:1.0625rem;
  --fs-08-xl:1.25rem;
  --fs-09-2xl:1.375rem;
  --fs-10-3xl:1.75rem;
  --fs-11-4xl:2rem;

  /* line-height: klein → groß */
  --lh-tighter:1.15;
  --lh-tight:1.2;
  --lh-snug:1.25;
  --lh-normal:1.3;
  --lh-regular:1.35;
  --lh-relaxed:1.4;
  --lh-loose:1.45;
  --lh-extra:1.5;

  /* Buttons */

  --btn-h: 42px;
  --sticky-price-slot-h: 52px;
  --btn-px: 14px;
  --btn-radius: 10px;
  --btn-gap: 8px;

  --btn-bg: #fff;
  --btn-color: #111;
  --btn-border: 1px solid var(--grey-light);
  --btn-shadow: var(--shadow-sm);

  --btn-bg-hover: #EFEFEF;
  --btn-border-hover: 1px solid var(--accent);

  --btn-primary-bg: var(--accent);
  --btn-primary-color: #fff;

  --btn-muted-bg: #f5f6f8;
  --btn-muted-color: #111;

  /* Kachel-Raster: Spaltenanzahl (pro .grid überschreibbar) */
  --grid-cols-mobile: 2;
  --grid-cols-tablet-portrait: 3;
  --grid-cols-tablet: 3;
  --grid-cols-desktop: 3;
  --grid-cols-narrow: 2;
}

/* =========================
   RESET / BASE
   ========================= */
*{ box-sizing:border-box; }

html,
body{
  height:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

html{
  font-size:var(--font-root);
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  overflow:hidden;
  user-select:none;
  /* Außenränder bei zentrierter .app; Szene bleibt unten weiß (s. .app / .viewer) */
  background:var(--bg-page);
}

img,
svg,
canvas{
  max-width:100%;
}

button,
input,
select,
textarea{
  font:inherit;
  letter-spacing:inherit;
  font-weight:inherit;
  color:inherit;
  background:#fff;
}

/* macOS: native Options-Popups fallen bei appearance:none ohne explizite
 * font-family auf eine Serif-Schrift (Times) zurück. Familie explizit setzen.
 * font-size/-weight wirken sicher auf das geschlossene Feld; im nativen
 * macOS-Popup je nach Browser nur eingeschränkt. */
select,
option{
  font-family:var(--font);
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
}

/* Formulare: Typo über .ms-field (var(--fs-*)) */

/* =========================
   APP LAYOUT
   ========================= */
/* Responsive architecture:
   - Base styles are mobile-first.
   - Preferred viewport breakpoints: 576px, 768px, 992px, 1200px, 1400px.
   - Keep max-width queries only for deliberate micro-device exceptions.
   - Use container queries for component-width behavior (e.g. sheet-body). */
.app{
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  width:100%;
  /* Volle HD: etwas mehr Fläche als 1600px, Ränder bleiben (~80px je Seite bei 1920) */
  max-width:1760px;
  margin:0 auto;
  background:#fff;
}

/* Ultrawide (21∶9 o. ä.): oft 2560×1080 */
@media (min-aspect-ratio: 2/1) and (min-width: 2000px) {
  .app{
    max-width:min(1920px, 88vw);
  }
}

/* Sehr breite „5K“/Super-Ultrawide-Viewports: weiche Deckel, Proportionen bleiben lesbar */
@media (min-width: 2400px){
  .app{
    max-width:min(1920px, 82vw);
  }
}

@media (min-width: 3200px){
  .app{
    max-width:min(2100px, 76vw);
  }
}

.main{
  grid-row:1;
  height:100%;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  display:grid;
  gap:0;
  padding:0;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
}

@media (min-width: 576px) {
  .main{
    gap:var(--space-2);
    padding:var(--space-2);
  }
}

@media (orientation: landscape) and (max-width: 1199.98px) {
  .main{
    grid-template-columns:2fr 1fr;
    grid-template-rows:1fr;
  }
}

@media (min-width: 1200px) {
  .main{
    grid-template-columns:2fr 1fr;
    grid-template-rows:1fr;
  }
}

.viewer{
  min-height:0;
  min-width:0;
  position:relative;
  border-radius:0;
  border:none;
  overflow:hidden;
  /* Verhindert, dass body/--bg-page durch transparente WebGL-Bereiche scheint */
  background:#fff;
}

#v3d-container{
  position:relative;
  z-index:1;
  background:#fff;
}

#v3d-container canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

#v3d-container > div{
  width:100%;
  height:100%;
}

.v3d-canvas{
  position:relative;
  z-index:1 !important;
}

.sheet{
  min-height:0;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:0;
  border:none;
  overflow:hidden;
}

#sheet{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sheet-head{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  min-width:0;
  background:#fff;
  border:none;
  border-radius:0;
  box-shadow:0 2px 10px 0 rgba(0,0,0,0.22);
}

#sheetBody.sheet-body{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  overflow-anchor:none;
  padding:calc(var(--sheetHeadH, 0px) + var(--space-2)) var(--space-2) var(--space-2);
  container-type:inline-size;
  container-name:sheet-body;
}

@media (min-width: 576px){
  #sheetBody.sheet-body{
    padding:calc(var(--sheetHeadH, 0px) + var(--space-3)) var(--space-3) var(--space-3);
  }
}

/* Rechtliches: dezente Linkzeile unter dem Sheet-Inhalt */
.legal{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 6px;
  padding:6px var(--space-2) 8px;
  border-top:1px solid rgba(15,23,42,.08);
  background:#fff;
}

.legal--footer{
  grid-row:2;
  width:100%;
  justify-content:center;
  gap:2px 5px;
  padding:4px var(--space-2) 6px;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:0;
  background:#fff;
}

.legal__link{
  appearance:none;
  border:0;
  background:transparent;
  padding:2px 0;
  margin:0;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-regular);
  color:var(--muted);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal__link:hover,
.legal__link:focus-visible{
  color:var(--accent);
}

.legal__sep{
  user-select:none;
}

.legal__inline{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-regular);
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

.legal__inline:hover,
.legal__inline:focus-visible{
  color:#155a8a;
}

@media (min-width: 576px){
  .legal{
    padding-inline:var(--space-3);
  }
}

@media (max-width: 991.98px){
  /* Legal-Footer fixed: kein Grid-Platz → kein Layout-Springen beim Einblenden */
  .app{
    grid-template-rows:1fr;
  }

  .legal--footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    grid-row:auto;
    transform:translateY(100%);
    opacity:0;
    pointer-events:none;
    transition:transform 0.2s ease, opacity 0.2s ease;
  }

  .legal--footer.is-scroll-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* Platz für fixen Legal-Footer (nur sheetBody — kein Doppel-Padding) */
  .app.legal-footer-visible #sheetBody.sheet-body{
    padding-bottom:calc(var(--legal-footer-h, 0px) + var(--space-2));
  }

  @media (min-width: 576px){
    .app.legal-footer-visible #sheetBody.sheet-body{
      padding-bottom:calc(var(--legal-footer-h, 0px) + var(--space-3));
    }
  }

  .legal{
    gap:2px 5px;
    padding:3px var(--space-2) 5px;
    border-top:1px solid rgba(15,23,42,.05);
  }

  .legal__link{
    text-decoration:none;
  }

  .legal__link:hover,
  .legal__link:focus-visible{
    text-decoration:underline;
  }

  .legal__sep{
  }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce){
  .legal--footer{
    transition:none;
  }
}

.legal--footer .legal__link{
  text-decoration:none;
}

.legal--footer .legal__link:hover,
.legal--footer .legal__link:focus-visible{
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width: 575.98px){
  .legal__link--long{
    max-width:100%;
  }
}

/* Legal-Modals: Markdown-Inhalt */
.legal-modal__foot{
  justify-content:flex-end;
}

.legal-content{
  display:grid;
  gap:10px;
}

.legal-content{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

.legal-content__h1{
  margin:0 0 4px;
  font-size:var(--fs-10-3xl);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tighter);
}

.legal-content__h2{
  margin:14px 0 4px;
  font-size:var(--fs-09-2xl);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
}

.legal-content__h3{
  margin:10px 0 2px;
  font-size:var(--fs-09-2xl);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
}

.legal-content__p,
.legal-content__list{
  margin:0;
}

.legal-content__p,
.legal-content__list li{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

.legal-content__loading,
.legal-content__error{
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-snug);
}

.legal-content__list{
  padding-left:1.2rem;
}

.legal-content__list li + li{
  margin-top:4px;
}

.legal-content a{
  color:var(--accent);
  word-break:break-word;
}

.legal-content a:hover,
.legal-content a:focus-visible{
  color:#155a8a;
}

.legal-content__loading,
.legal-content__error{
  margin:0;
}

@media (min-width: 576px){
  .viewer{
    border-radius:var(--radius-sm);
    border:1px solid var(--stroke2);
  }

  .sheet{
    border-radius:var(--radius-sm);
    border:1px solid var(--stroke2);
  }

  .sheet-head{
    border:var(--border-default);
    border-radius:5px 5px 0 0;
  }
}

.sheet-body::-webkit-scrollbar{
  width:0;
  height:0;
}

@media (min-width: 992px) {
  #sheetBody,
  .sheet-body{
    overflow:auto !important;
    height:100% !important;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 991.98px) {
  .sheet{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .section{
    scroll-margin-top:70px;
  }
}

/* =========================
   PROGRESS / TABS
   ========================= */
/* Gemeinsame Tab-Basis: Layout/Skin + .btn (Overrides: .tab.btn) */
.tab{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Layout/Skin */
.step-tab{
  flex:1 0 auto;
}

/* Kein Hintergrund-Transition — verhindert Farbflackern bei Sync/Layout */
.step-tab.tab.btn{
  transition:transform .12s ease, box-shadow .18s ease;
}

.sub-tab{
  font-size: var(--fs-04-sm)!important;
}

/* Wie .step-tab: Zeile kann scrollen, einzelne Tabs wachsen nicht übermäßig */
#fabric .step-tab-nav--fabric-sub .sub-tab{
  flex:1 0 auto;
  max-width:none;
}

.tab:active{
  transform:translateY(1px);
  filter:brightness(.985);
}

.tab.is-active,
.tab.is-active:hover{
  background:var(--accent);
}

/* Tab + .btn: Button-Basis, Tab-Look (Höhe, Padding, Aktiv) beibehalten */

.tab.btn:not(.is-active){
  background:var(--btn-bg);
  color:var(--text);
}

.tab.btn.is-active,
.tab.btn.is-active:hover{
  background:var(--accent);
  border-color:transparent;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .tab.btn:not(.is-active):hover{
    background:var(--btn-bg-hover);
  }
}

.step-tab-nav{
  position:relative;
  display:flex;
  justify-content:space-around;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

.step-tab-nav::-webkit-scrollbar{
  width:0;
  height:0;
}

.step-tab-nav .tabs-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#fff;
  margin:0 var(--space-2);
}

.step-tab-nav .tabs-scroll::-webkit-scrollbar{
  display:none;
}

.step-tab-nav .tabs-row{
  display:flex;
  gap:8px;
  width:auto;
  justify-content:space-between;
  padding:var(--pad-block-sm);
}

@media (min-width: 48rem) {
  .step-tab-nav .tabs-scroll{
    margin:0 var(--space-3);
  }
}

#stepTabs{
  display:block !important;
}

#stepTabs .tab-progress{
  display:none !important;
  background:transparent !important;
  padding: 12px 0 0px 0;
  margin:0 var(--space-2);
}

#stepTabs .tab-progress-track{
  display:block !important;
  width:100% !important;
  height:6px !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.12) !important;
  overflow:hidden !important;
}

#stepTabs .tab-progress-fill{
  display:block !important;
  height:100% !important;
  width:0%;
  border-radius:999px !important;
  background:#1f70ad !important;
  transition:none;
}

@media (min-width: 48rem) {
  #stepTabs .tab-progress{
    margin:0 var(--space-3);
  }
}

/* Stoff-Subtabs: gleicher Aufbau wie #stepTabs (block + tabs-scroll + tabs-row), ohne Progress-Leiste */
#fabric .step-tab-nav--fabric-sub{
  display:block !important;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

/* Im scrollenden #sheetBody: gleiche Scroll-Spur wie Hauptschritte; pan-x schlägt #sheet * (pan-x pan-y) */
#fabric .step-tab-nav--fabric-sub .tabs-scroll{
  margin-left:0;
  margin-right:0;
  touch-action:pan-x;
}

#fabric .step-tab-nav--fabric-sub .tabs-row{
  padding:0;
  touch-action:pan-x;
}

#fabric .step-tab-nav--fabric-sub .tab{
  touch-action:pan-x;
}

/* =========================
   SECTIONS
   ========================= */
.section{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0;
  border:none;
  border-radius:0;
  overflow-anchor:none;
}

.section.is-disabled{
  display:none !important;
}

.section > button{
  position:sticky;
  top:0;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:0;
  border-bottom:1px solid rgba(15,23,42,.07);
  cursor:default;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.section-content{
  display:flex;
  flex-direction:column;
  height:auto;
  overflow:visible;
  overflow-anchor:none;
  scroll-padding-top:0;
}

.sec-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.chev{
  display:none !important;
}

.section-wrapper{
  display:flex;
  flex-direction:column;
  padding:var(--space-2);
}

@media (min-width: 576px){
  .section-wrapper{
    padding:0;
  }
}

.option-wrapper{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.grid-wrapper{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding: var(--pad-card);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--pad-card);
  border:var(--border-default);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}

.dropdown{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--pad-card);
  border:var(--border-default);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}

/* Gemeinsamer Hinweis-/CTA-Block (z. B. Fabric-/Topper-Kommentar) */
.section-comment{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid rgba(15, 23, 42, 0.10);
  border-radius:12px;
  background:rgba(15, 23, 42, 0.03);
  gap:10px 12px;
}

.section-comment__text{
  margin:0;
  flex:1 1 320px;
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color:var(--muted);
}

.section-comment__actions{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
}

.section-comment__actions .btn{
  flex:1 1 0;
  min-width:0;
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
}

/* Stoffgruppen Vergleichs-Modal */
#fabricCompareBtn[hidden]{
  display:none !important;
}

#fabricCompareModal .ms-modal__dialog{
  width:min(1080px, calc(100vw - 24px));
}

/* Topper-Vergleich: auf Desktop alle Varianten in einer Zeile */
#topperCompareModal .ms-modal__dialog{
  width:min(1240px, calc(100vw - 24px));
}

@media (min-width: 992px){
  /* 7 Stoffgruppen: 4 Spalten, zwei Zeilen (4 + 3), feste Spaltenbreite */
  #fabricCompareModal .fabric-compare__grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  #topperCompareModal .fabric-compare__grid{
    grid-template-columns:repeat(var(--topper-cols, 4), minmax(0, 1fr));
  }

  #topperCompareModal .fabric-compare__stat-val,
  #topperCompareModal .info-stat__value,
  #fabricCompareModal .fabric-compare__stat-val,
  #fabricCompareModal .info-stat__value{
    white-space:normal;
    text-align:right;
  }

  #topperCompareModal .info-stat__name-row,
  #fabricCompareModal .info-stat__name-row{
    min-width:0;
  }
}

/* Pflege (Fabric-Vergleich) soll bei Zeilenumbruch sauber rechtsbündig bleiben */
#fabricCompareModal .fabric-compare__stat--care{
  align-items:flex-start;
}
#fabricCompareModal .fabric-compare__stat--care .fabric-compare__stat-val{
  white-space:normal;
  text-align:right;
}

/* Stoff- & Topper-Vergleich: Zeilen über alle Spalten auf gleicher Höhe (CSS Subgrid) */
#fabricCompareModal .fabric-compare__grid--aligned,
#topperCompareModal .fabric-compare__grid--aligned{
  align-items:start;
}

#fabricCompareModal .fabric-compare__grid--aligned .fabric-compare__col,
#topperCompareModal .fabric-compare__grid--aligned .fabric-compare__col{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span var(--fabric-compare-rows, 9);
}

#fabricCompareModal .fabric-compare__tagline-slot,
#fabricCompareModal .fabric-compare__meta-row,
#fabricCompareModal .fabric-compare__stat-slot,
#topperCompareModal .fabric-compare__tagline-slot,
#topperCompareModal .fabric-compare__meta-row,
#topperCompareModal .fabric-compare__stat-slot,
#topperCompareModal .fabric-compare__suited-slot{
  padding-inline:var(--pad-card);
}

#fabricCompareModal .fabric-compare__tagline-slot,
#topperCompareModal .fabric-compare__tagline-slot{
  padding-top:var(--space-2);
}

#fabricCompareModal .fabric-compare__tagline-slot .tagline,
#topperCompareModal .fabric-compare__tagline-slot .tagline{
  margin:0;
  padding:0 0 var(--space-2);
}

#fabricCompareModal .fabric-compare__tagline-slot--empty,
#topperCompareModal .fabric-compare__tagline-slot--empty{
  padding-top:0;
  min-height:0;
}

#fabricCompareModal .fabric-compare__meta-row,
#topperCompareModal .fabric-compare__meta-row{
  padding-block:var(--space-1);
}

#fabricCompareModal .fabric-compare__meta-row.fabric-compare__stat--plain,
#topperCompareModal .fabric-compare__meta-row.fabric-compare__stat--plain{
  padding-block:var(--space-1);
}

#fabricCompareModal .fabric-compare__meta-row--material,
#topperCompareModal .fabric-compare__meta-row--first{
  padding-top:var(--space-2);
  border-top:1px solid rgba(15, 23, 42, 0.10);
}

#fabricCompareModal .fabric-compare__meta-row--care,
#topperCompareModal .fabric-compare__meta-row--memory,
#topperCompareModal .fabric-compare__meta-row--gesamthoehe{
  border-top:1px solid rgba(15, 23, 42, 0.08);
}

#topperCompareModal .fabric-compare__meta-row{
  align-items:flex-start;
}

#topperCompareModal .fabric-compare__meta-row .fabric-compare__stat-val{
  white-space:normal;
  text-align:right;
}

#fabricCompareModal .fabric-compare__stat-slot--scale,
#topperCompareModal .fabric-compare__stat-slot--scale{
  border-top:1px solid rgba(15, 23, 42, 0.08);
  padding-bottom:0;
}

#fabricCompareModal .fabric-compare__stat-slot--scale-first,
#topperCompareModal .fabric-compare__stat-slot--scale-first{
  margin-top:0;
  padding-top:var(--space-1);
}

#fabricCompareModal .fabric-compare__stat-slot--empty,
#topperCompareModal .fabric-compare__stat-slot--empty{
  min-height:0;
}

#fabricCompareModal .fabric-compare__stat-slot .fabric-compare__info-stat,
#topperCompareModal .fabric-compare__stat-slot .fabric-compare__info-stat{
  margin:0;
}

#fabricCompareModal .fabric-compare__stat-slot .info-stat__head,
#topperCompareModal .fabric-compare__stat-slot .info-stat__head{
  padding-top:var(--space-1);
  margin-bottom:var(--space-1);
}

#fabricCompareModal .fabric-compare__stat-slot .info-stat__bar,
#topperCompareModal .fabric-compare__stat-slot .info-stat__bar{
  margin-bottom:var(--space-1);
}

#topperCompareModal .fabric-compare__suited-slot{
  border-top:1px solid rgba(15, 23, 42, 0.08);
  padding-block:var(--space-2);
}

#topperCompareModal .fabric-compare__suited-slot--empty{
  min-height:0;
  padding-block:0;
  border-top:1px solid rgba(15, 23, 42, 0.08);
}

#topperCompareModal .fabric-compare__suited-text{
  margin:0;
  font-size:var(--fs-05-md);
  line-height:var(--lh-normal);
}

.fabric-compare__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  align-items:stretch;
}

.fabric-compare__filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}

.fabric-compare__filter-chip{
  font-size: var(--fs-05-md);
  font-weight: var(--fw-semibold);
  appearance:none;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.fabric-compare__filter-chip--action{
  border-color:rgba(15,23,42,.28);
}

.fabric-compare__filter-chip.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.fabric-compare__col{
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.fabric-compare__media{
  position:relative;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.04);
}

.fabric-compare__swatch{
  width:100%;
  aspect-ratio:16 / 9;
  background-size:cover;
  background-position:center;
}

.fabric-compare__swatch--empty{
  background:linear-gradient(135deg, #dbe2ea, #f1f4f7);
}

.fabric-compare__title{
  color: #fff;
  font-size: var(--fs-06-base);
  font-weight: var(--fw-regular);
  position:absolute;
  right:40px;
  top:8px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
}

.fabric-compare__remove-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(15,23,42,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: #fff;
}

.fabric-compare__remove-btn:hover{
  background:rgba(15,23,42,.88);
}

.fabric-compare__rows{
  display:flex;
  flex-direction:column;
}

.fabric-compare__row{
  padding:8px 10px;
}

.fabric-compare__row + .fabric-compare__row{
  border-top:1px solid rgba(15,23,42,.08);
}

.fabric-compare__row-label{
  margin-bottom:2px;
}

.fabric-compare__row-val{
}

.fabric-compare__stats{
  border-top:1px solid rgba(15,23,42,.10);
  padding:8px 10px 10px;
  background:rgba(15,23,42,.02);
}

.tagline{
  font-size: var(--fs-05-md);
  font-weight: var(--fw-semibold);
  margin:0 0 8px;
  padding:0 0 10px;
}

.fabric-compare__stats-title{
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.fabric-compare__stat{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:3px 0;
}

.fabric-compare__stat-key{
  font-size: var(--fs-05-md);
  font-weight: var(--fw-medium);
}

.fabric-compare__stat-val{
  font-size: var(--fs-05-md);
  white-space:nowrap;
}

.fabric-compare__stats-scale{
  border-top:1px solid rgba(15,23,42,.10);
  margin-top:4px;
  padding-top:4px;
}

.fabric-compare__stats-suited{
  border-top:1px solid rgba(15,23,42,.10);
  margin-top:8px;
  padding-top:10px;
}

.fabric-compare__suited-text{
  margin:0;
}

.fabric-compare__suited-text strong{
}

.fabric-compare__stat--plain{
  padding:6px 0;
}

.fabric-compare__stat--block{
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}

.fabric-compare__stat--block .fabric-compare__stat-val{
  white-space:normal;
  text-align:left;
}

.fabric-compare__stat--plain + .fabric-compare__info-stat,
.fabric-compare__info-stat + .fabric-compare__stat--plain,
.fabric-compare__info-stat + .fabric-compare__info-stat{
  border-top:1px solid rgba(15,23,42,.08);
}

.fabric-compare__info-stat .info-stat__head{
  padding:8px 0 0;
  margin-bottom:6px;
}

.fabric-compare__info-stat .info-stat__name{
}

.fabric-compare__info-stat .info-stat__value{
  opacity:1;
}

.fabric-compare__info-stat .info-stat__bar{
  margin:0 0 8px;
}

.fabric-compare__empty{
  padding:14px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#fff;
}

.fabric-compare__actions{
  margin-top:auto;
  padding:10px;
  border-top:1px solid rgba(15,23,42,.08);
  background:#fff;
}

.fabric-compare__select-btn{
  width:100%;
}

#box .card > .btn{
  font-size:var(--fs-04-sm);
}

#box-details .txt{
  font-size:var(--fs-05-md);
}

@media (min-width: 992px){
  #box-details .txt{
    font-size:var(--fs-06-base);
  }
}

#done .option-wrapper{
  position: relative;
}

#headboard .option-wrapper > .switch__top,
#fabric .switch__top{
  display:none;
}

/* =========================
   GRIDS / CARDS
   ========================= */
.grid{
  display:grid;
  /* mobile; tablet/desktop: GRID BREAKPOINTS unten (Reihenfolge in CSS wichtig) */
  --grid-cols:var(--grid-cols-mobile, 2);
  grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));
  gap:var(--space-2);
  min-width:0;
}

/* Spalten pro Section (Viewport-Stufen) */
#wood .grid{
  --grid-cols-mobile:3;
  --grid-cols-tablet-portrait:3;
  --grid-cols-tablet:3;
  --grid-cols-desktop:3;
  --grid-cols-narrow:3;
}

#fabric .grid{
  --grid-cols-mobile:4;
  --grid-cols-tablet-portrait:4;
  --grid-cols-tablet:3;
  --grid-cols-desktop:4;
  --grid-cols-narrow:3;
}

#feet .grid{
  --grid-cols-mobile:3;
  --grid-cols-tablet-portrait:3;
  --grid-cols-tablet:3;
  --grid-cols-desktop:3;
  --grid-cols-narrow:3;
}

/* Spannbettlaken-Farbraster (51 Swatches) */
#fitted-sheet-grid{
  --grid-cols-mobile:3;
  --grid-cols-tablet-portrait:4;
  --grid-cols-tablet:4;
  --grid-cols-desktop:5;
  --grid-cols-narrow:3;
}

#headboard .grid,
#headboard-type{
  --grid-cols-mobile:3;
  --grid-cols-tablet-portrait:3;
  --grid-cols-tablet:3;
  --grid-cols-desktop:3;
  --grid-cols-narrow:3;
}

/* GRID BREAKPOINTS: nach .grid + Section-Vars (Reihenfolge in CSS wichtig)
 * <576 mobile | 576–767 tablet-portrait | 768–1199 tablet | ≥1200 desktop
 * Schmales Sheet (nur 2-spaltiges .main): @container → --grid-cols-narrow
 */
@media (min-width: 576px) and (max-width: 767.98px){
  .grid{
    --grid-cols:var(--grid-cols-tablet-portrait, var(--grid-cols-mobile, 2));
  }
}

@media (min-width: 768px) and (max-width: 1199.98px){
  .grid{
    --grid-cols:var(--grid-cols-tablet, 2);
    gap:var(--space-3);
  }
}

@media (min-width: 1200px){
  .grid{
    --grid-cols:var(--grid-cols-desktop, 3);
  }
}

/* narrow nur bei Viewer|Sheet – nicht gestapelt (Mobile-Hochformat nutzt --grid-cols-mobile) */
@media (orientation: landscape) and (max-width: 1199.98px),
       (min-width: 1200px){
  @container sheet-body (max-width: 31.25rem){
    .grid{
      --grid-cols:var(--grid-cols-narrow, 2);
      gap:var(--space-2);
    }
  }
}

.flex-grid{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.opt{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:var(--pad-card);
  border:var(--border-default);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Mobile: Double-Tap-Zoom auf Fabric-Kacheln verhindern */
#fabric .opt,
#fabric .opt .swatch,
#fabric .opt .txt {
  touch-action: manipulation;
}

#fabric .opt .swatch,
#fabricPickerModal .opt.opt--sample-picker .swatch {
  background-size: 220%;
  background-position: center;
}

#fabric .opt[data-subcat="stoff-grob"] .swatch,
#fabricPickerModal .opt[data-subcat="stoff-grob"] .swatch {
  background-size: 200%;
}

#fabric .opt[data-subcat="stoff-fein"] .swatch,
#fabricPickerModal .opt[data-subcat="stoff-fein"] .swatch {
  background-size: 120%;
}

#fabric .opt[data-subcat="kunstleder"] .swatch,
#fabricPickerModal .opt[data-subcat="kunstleder"] .swatch {
  background-size: 220%;
}

#fabric .opt[data-subcat="cord"] .swatch,
#fabricPickerModal .opt[data-subcat="cord"] .swatch {
  background-size: 110%;
}

#fabric .opt[data-subcat="boucle"] .swatch,
#fabricPickerModal .opt[data-subcat="boucle"] .swatch {
  background-size: 160%;
}

#fabric .opt[data-subcat="cremona"] .swatch,
#fabricPickerModal .opt[data-subcat="cremona"] .swatch {
  background-size: 140%;
}

#fabric .opt[data-subcat="harmony"] .swatch,
#fabricPickerModal .opt[data-subcat="harmony"] .swatch {
  background-size: 170%;
}

.opt:active{
  transform:translateY(1px);
  filter:brightness(.985);
}

.opt .txt{
  min-width:0;
}

.opt .name{
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

.opt.is-active{
  border: 2px solid var(--accent);
}

.swatch{
  width:100%;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.swatch img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.opt.no-swatch{
  justify-content:center;
  width:100%;
}

.opt.no-swatch .swatch{
  display:none !important;
}

.opt.no-swatch .txt{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* mobile-first */
#mattress .opt.no-swatch .txt{
  align-items:flex-start;
}

@media (min-width: 48rem) {
  #mattress .opt.no-swatch .txt{
    align-items:center;
  }
}

.opt.no-swatch.is-active,
.opt.no-swatch.is-active:hover{
  background:var(--accent);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .opt.no-swatch:not(.is-active):hover{
    background:#EFEFEF;
  }
}

/* =========================
   BADGES / META / FEATURES
   ========================= */
.badge{
  padding:2px 6px;
  border-radius:6px;
  background:var(--accent);
  color: #fff;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-medium);
}

.features{
  flex:1;
  list-style:none;
  margin:0;
  padding-left:20px;
}

.features li{
  position:relative;
  padding-left:22px;
  margin-bottom:4px;
  font-size: var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

.features li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: var(--good);
}

/* =========================
   SPECIFIC OPTION LAYOUTS
   ========================= */
#topper .opt{
  flex-direction:row;
  gap:var(--space-6);
}

#topper .swatch{
  width:25%;
}

#topper .txt{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

#topper .opt .name{
  text-align:left;
  font-size: var(--fs-06-base);
}

#topper .opt .tagline{
  margin:2px 0 0;
  padding:0 0 8px;
  border-bottom:1px solid rgba(15,23,42,.10);
  text-align:left;
  font-size: var(--fs-05-md);
}

.option-content{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.option-image{
  flex:0 0 160px;
}

.option-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

#box .swatch{
  width:44%;
  aspect-ratio:16 / 9;
  border:none;
  box-shadow:none;
  background-position:bottom;
  background-size:contain !important;
}

#box .option-content{
  gap:0;
  align-items:center;
}

/* =========================
   SLIDER / TOGGLES
   Maße: <md-slider> (@material/web, Material Design 3)
   https://material-web.dev/components/slider/
   ========================= */
.config-slider{
  width:100%;
  margin:10px 0 6px;
  accent-color:var(--accent);
}

.slider-wrap{
  position:relative;
  padding-top:22px;
}

.sliderTop,
.slider-label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.sliderTop{
  margin-bottom:8px;
}

.slider-label{
}

.slider-label span{
}

.ticks{
  display:flex;
  justify-content:space-between;
  gap:6px;
  user-select:none;
  pointer-events:none;
}

/*
 * Zahlenzeile: gleiche nutzbare Spurbreite wie md-slider (Ticks nutzen inset-inline-start/end).
 * WICHTIG: position:absolute + left:% bezieht sich auf die volle Breite — padding-inline rückt Kinder nicht mit.
 * Daher: left = pad + (100% - 2*pad) * fraction  (tick-pad wie Material Web)
 */
.sliderTicks[data-for]{
  --tick-pad:calc(
    var(--md-slider-state-layer-size) / 2 - var(--md-slider-with-tick-marks-container-size)
  );
}

.sliderTicks{
  position:relative;
  display:block;
  min-height:1.35em;
  margin-top:2px;
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  opacity:.72;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.01em;
  user-select:none;
  pointer-events:none;
}

.sliderTicks span{
  position:absolute;
  top:0;
  left:calc(var(--tick-pad) + (100% - 2 * var(--tick-pad)) * var(--tick-fr, 0));
  text-align:center;
  white-space:nowrap;
  transform:translateX(-50%);
}

.slider{
  /* M3: greifzone/Tick-Einzug — muss mit md-slider intern übereinstimmen */
  --md-slider-state-layer-size:40px;
  --md-slider-with-tick-marks-container-size:3px;

  padding:var(--pad-card);
  border:1px solid var(--grey-light);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}

/* − / + neben dem Slider (vgl. M3: Icons außerhalb der Spur) */
.sliderStepper{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  width:100%;
  min-width:0;
}

.sliderStepper__track{
  flex:1;
  min-width:0;
}

.sliderStepper__btn{
  flex:0 0 auto;
  box-sizing:border-box;
  width:2.75rem;
  height:2.75rem;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--stroke2, var(--grey-light));
  border-radius:var(--radius-sm);
  background:rgba(255, 255, 255, 0.92);
  cursor:pointer;
  touch-action:pan-x pan-y;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.sliderStepper__btn:hover:not(:disabled){
  background:color-mix(in srgb, var(--accent) 8%, #fff);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--grey-light));
}

.sliderStepper__btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.sliderStepper__btn:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

/* Material Web Slider: Theme an Konfigurator koppeln (M3-Tokens) */
.slider md-slider{
  display:block;
  width:100%;
  margin:6px 0 4px;
  --md-sys-color-primary:var(--accent);
  --md-sys-color-on-primary:#fff;
  --md-sys-color-surface-container-highest:color-mix(in srgb, var(--text) 10%, var(--grey-light));
  /* Spur: M3-Default 4px — etwas höher für bessere Lesbarkeit */
  --md-slider-active-track-height:6px;
  --md-slider-inactive-track-height:6px;
  /* Griff: M3-Default ist Kreis (gleiche Breite/Höhe + corner-full). Hier schmaler „Balken“. */
  --md-slider-handle-width:7px;
  --md-slider-handle-height:26px;
  --md-slider-handle-shape:4px;
  /* Value indicator (labeled bubble): rechteckig, leichter Radius — nicht Pille */
  --md-sys-shape-corner-full:var(--radius-sm, 6px);
  --md-slider-active-track-shape:9999px;
  --md-slider-inactive-track-shape:9999px;
  --md-slider-label-container-color:var(--accent);
  --md-slider-label-text-color:#fff;
  --md-slider-label-text-font:var(--font);
  --md-slider-label-text-size:var(--fs-02-2xs);
}

.slider md-slider:not(:defined){
  min-height:48px;
  opacity:0.35;
}

.slider md-slider:defined{
  opacity:1;
  transition:opacity 0.2s ease;
}

/* Wert-Bubble: lange Texte wie „300 cm“ in einer Zeile */
.slider md-slider::part(label){
  white-space:nowrap;
  flex-shrink:0;
}

@media (max-width:768px), (pointer:coarse) and (max-width:991.98px), (orientation:landscape) and (max-width:1199.98px){
  .sliderTicks{
  }

  /*
   * Stepper: #sheet * gilt nicht in .sliderStepper — Touch-Overrides nur hier.
   * - ±-Buttons: pan-x pan-y (Basis-Regel .sliderStepper__btn).
   * - md-slider: manipulation → Ziehen zuverlässiger als pan-x pan-y auf dem Host.
   * - Track: auto (Ticks + Slider-Umfeld).
   */
  .sliderStepper__btn{
    position:relative;
    width:2.35rem;
    height:2.35rem;
  }
  .sliderStepper__btn::before{
    content:"";
    position:absolute;
    inset:-4px;
  }
  .sliderStepper__track{
    touch-action:auto;
  }
  /*
   * WebKit/iOS: Kreis = große Thumb-Fläche. state-layer = Zeilenhöhe im M3-Layout;
   * enger als zuvor + weniger margin → weniger „luftige“ Slider-Karten.
   */
  .slider{
    /* Große Touch-Hitarea behalten, obwohl der sichtbare Thumb kleiner wird */
    --md-slider-state-layer-size:50px;
  }
  .slider .sliderTop{
    margin-bottom:4px;
  }
  .slider md-slider{
    touch-action:manipulation;
    --md-slider-handle-width:30px;
    --md-slider-handle-height:30px;
    --md-slider-handle-shape:9999px;
    --md-slider-active-track-height:8px;
    --md-slider-inactive-track-height:8px;
    min-height:52px;
    margin:3px 0 2px;
  }
}

/*
 * Width-Ticks reagieren auf reale Spaltenbreite (Container) statt auf Viewport.
 * Nur bei wirklich schmaler Konfig-Spalte ausdünnen.
 */
@container sheet-body (max-width: 31.25rem){
  .sliderTicks[data-for="sliderWidth"] span{
    display:none;
  }
  .sliderTicks[data-for="sliderWidth"] span:nth-child(1),
  .sliderTicks[data-for="sliderWidth"] span:nth-child(3),
  .sliderTicks[data-for="sliderWidth"] span:nth-child(5),
  .sliderTicks[data-for="sliderWidth"] span:nth-child(7),
  .sliderTicks[data-for="sliderWidth"] span:nth-child(9),
  .sliderTicks[data-for="sliderWidth"] span:nth-child(12){
    display:block;
  }
}

.optionTitle{
  font-size: var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
}

/* OptionTitle nur bei bestimmten Segment-Toggles ausblenden */
.optionTitle.optionTitle--hide{
  display:none !important;
}

.switch{
  display: flex;
  flex-direction: column;
  gap:var(--space-2);
  padding:var(--pad-card);
  border:1px solid var(--grey-light);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}

.switch__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-direction: column;
}

#extras-mounting .switch__titleRow,
#extras-fitted-sheet .switch__titleRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
  width:100%;
  min-width:0;
}

#extras-mounting .switch__priceTag,
#extras-fitted-sheet .switch__priceTag{
  flex-shrink:0;
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  color:var(--muted);
  white-space:nowrap;
}

.fitted-sheet-qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:0 var(--pad-card) var(--pad-card);
}

.fitted-sheet-qty[hidden]{
  display:none !important;
  pointer-events:none;
}

.qtyStepper{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-shrink:0;
  pointer-events:auto;
}

.qtyStepper__btn{
  flex:0 0 auto;
  box-sizing:border-box;
  width:2.25rem;
  height:2.25rem;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--stroke2, var(--grey-light));
  border-radius:var(--radius-sm);
  background:rgba(255, 255, 255, 0.92);
  font-size:var(--fs-06-base);
  line-height:1;
  cursor:pointer;
  touch-action:pan-x pan-y;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.qtyStepper__btn:hover:not(:disabled){
  background:color-mix(in srgb, var(--accent) 8%, #fff);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--grey-light));
}

.qtyStepper__btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.qtyStepper__btn:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.qtyStepper__input{
  box-sizing:border-box;
  width:2.75rem;
  height:2.25rem;
  margin:0;
  padding:0 var(--space-1);
  border:1px solid var(--stroke2, var(--grey-light));
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  text-align:center;
  -moz-appearance:textfield;
}

.qtyStepper__input::-webkit-outer-spin-button,
.qtyStepper__input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.qtyStepper__input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.qtyStepper__input:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.switch__bottom{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
}

.switch__wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.switch__label{
  text-align:center;
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
}

.switch__desc{
  margin-top:6px;
  font-size: var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

.msSwitch{
  position:relative;
  display:inline-block;
  width:48px;
  height:26px;
}

.msSwitch input{
  opacity:0;
  width:0;
  height:0;
}

.sliderSwitch{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#d1d5db;
  transition:.3s;
  border-radius:34px;
}

.sliderSwitch:before{
  content:"";
  position:absolute;
  left:3px;
  bottom:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:white;
  transition:.3s;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.msSwitch input:checked + .sliderSwitch{
  background:#1f70ad;
}

.msSwitch input:checked + .sliderSwitch:before{
  transform:translateX(22px);
}

.msSwitch{
  cursor:pointer;
}

.msSlider{
  position:absolute;
  inset:0;
  transition:.25s;
  border:1px solid var(--grey-dark);
  border-radius:999px;
  background:var(--accent);
}

.msSlider:before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  transition:.25s;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.msSwitch input:checked + .msSlider:before{
  transform:translateX(22px);
}

.msSwitch input:disabled + .msSlider{
  opacity:.65;
  cursor:not-allowed;
}

.segToggle{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  width:100%;
  overflow:hidden;
  border:var(--border-default);
  border-radius: var(--radius-sm);
  background:#f3f5f7;
}

.segBtn{
  appearance:none;
  width:100%;
  min-width:72px;
  padding: 9px;
  border:0;
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-medium);
  line-height:var(--lh-loose);
  color:var(--text);
  background: var(--btn-bg-hover);
  cursor:pointer;
  transition:transform .12s ease;
}

.segBtn + .segBtn{
  border-left:1px solid #d5dbe3;
}

.segBtn:hover{
  background:#e9edf2;
}

.segBtn.is-active{
  background:var(--accent);
  color: #fff;
}

/* =========================
   MATTRESS / CORE
   ========================= */
.core-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}

.core-col{
  padding:10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
}

.core-head{
  margin-bottom:8px;
}

.core-btn{
  display:block;
  width:100%;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
}

.core-btn:last-child{
  margin-bottom:0;
}

.core-btn.is-active{
  border-color:rgba(31,112,173,.9);
  box-shadow:0 0 0 2px rgba(31,112,173,.18) inset;
}

.core-summary{
  grid-column:1 / -1;
  padding-top:2px;
}

.matt-split{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.matt-split--single{
  grid-template-columns:1fr;
}

.matt-col{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
}

.matt-split-select-wrap{
  position:relative;
  width:100%;
  min-width:0;
}

.matt-split-select-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:14px;
  width:8px;
  height:8px;
  border-right:2px solid rgba(15,23,42,.45);
  border-bottom:2px solid rgba(15,23,42,.45);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.matt-split-select{
  width:100%;
  min-height:48px;
  padding:12px 36px 12px 14px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  background:#fff;
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-medium);
  line-height:var(--lh-loose);
  color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.matt-split-select:hover{
  border-color:rgba(31,112,173,.35);
}

.matt-split-select:focus-visible{
  outline:2px solid var(--accent, #1f70ad);
  outline-offset:2px;
}

.matt-split-info,
#mattress .matt-split-info{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  transform:none;
}

.matt-split-info:hover,
#mattress .matt-split-info:hover{
  transform:scale(1.05);
}

.matt-row{
  grid-column:1 / -1;
  display:none;
  align-items:center;
  gap:12px;
}

.matt-none{
  width:auto;
  padding:10px 18px;
}

.matt-summary{
}

.section[data-key="mattress"][data-zone="single"] #mattSingleBlock{
  display:block !important;
}

.section[data-key="mattress"][data-zone="single"] #mattSplitBlock{
  display:none !important;
}

.section[data-key="mattress"][data-zone="split"] #mattSingleBlock{
  display:none !important;
}

.section[data-key="mattress"][data-zone="split"] #mattSplitBlock{
  display:block !important;
}

/* =========================
   FOOTER / CTA / PRICE
   ========================= */
.sheet-footer{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  gap:var(--space-2);
  padding:var(--pad-2);
  min-width:0;
  box-sizing:border-box;
  border-top:var(--border-default);
  background:var(--btn-bg);
  box-shadow:0 calc(-1 * var(--space-1)) 10px rgba(0, 0, 0, 0.12);
}

/* Portrait 1-Spalte: Preis in #controlsOverlay */
#sheetFooter{
  display:none !important;
}

/* 2-Spalten (Landscape <xl oder xl+) */
@media (orientation: landscape) and (max-width: 1199.98px),
       (min-width: 1200px) {
  #sheetFooter{
    display:flex !important;
  }
}

/* Landscape sm (576–767): schmales Sheet, kompakter Footer */
@media (orientation: landscape) and (max-width: 767.98px) {
  #sheetFooter{
    padding:var(--pad-1);
    gap:var(--space-1);
  }

  #sheetFooter .sheet-price{
    gap:var(--space-1);
  }

  #sheetFooter .sheet-price__summary{
    align-items:center;
    gap:var(--space-1);
  }

  #sheetFooter .sheet-price__label{
    font-size:var(--fs-03-xs);
    letter-spacing:0.03em;
  }

  #sheetFooter .sheet-price__amount{
    font-size:var(--fs-05-md);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #sheetFooter .sheet-price__hint{
    font-size:var(--fs-01-3xs);
  }
}

/* Landscape md (768–991) */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 991.98px) {
  #sheetFooter{
    padding:var(--pad-2);
  }

  #sheetFooter .sheet-price__label{
    font-size:var(--fs-05-md);
  }

  #sheetFooter .sheet-price__amount{
    font-size:var(--fs-07-lg);
  }
}

/* Landscape lg (992–1199) */
@media (orientation: landscape) and (min-width: 992px) and (max-width: 1199.98px) {
  #sheetFooter{
    padding:var(--pad-2);
  }

  #sheetFooter .sheet-price__amount{
    font-size:var(--fs-08-xl);
  }
}

/* xl+ (≥1200, Portrait + Landscape) */
@media (min-width: 1200px) {
  #sheetFooter{
    padding:var(--pad-3);
    gap:var(--space-2);
  }
}

.sum{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.sum .k{
  margin-bottom:2px;
}

.sum--mobile {
  display: flex;
  position: static;
  text-align: right;
  margin-left: auto;
}

/* Im 2-Spalten-Layout ausblenden, im 1-Spalten-Layout sichtbar lassen */
@media (orientation: landscape) and (max-width: 1199.98px) {
  .sum--mobile {
    display:none;
  }
}

@media (min-width: 1200px) {
  .sum--mobile {
    display:none;
  }
}

.price{
}


/* =========================
   VIEWER TOP / CAMERA NAV
   ========================= */

.viewer-topbar {
  position: absolute;
  bottom: 10px;
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.viewer-topbar.controls,
#controlsOverlay {
  position: absolute;
  width: auto;
}

/* Desktop / Tablet: unten rechts, vertikal mit Text unter Icons */
#controlsOverlay {
  top: auto;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  left: auto;
  height: auto;
  transform: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-2);
}

.controls {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

#controlsOverlay.controls {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.controls-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
}

#controlsOverlay .controls-toolbar {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--pad-2);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  box-shadow: var(--shadow-md);
}

.controls .btn,
.controls-toolbar .btn{
  width:38px;
  height:38px;
  min-height:38px;
}

#controlsOverlay .controls-toolbar .btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--pad-1) var(--pad-2);
}

#controlsOverlay .btn__icon {
  flex: 0 0 auto;
}

#controlsOverlay .btn__text {
  display: block;
  font-size: var(--fs-02-2xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-align: center;
  white-space: normal;
  max-width: 4.75rem;
}

#controlsOverlay #priceMobile {
  position: static;
  margin-left: 0;
  align-self: stretch;
}

/* <lg Portrait (xs/sm/md): horizontale Pill – Toolbar links, Preis rechts */
@media (max-width: 991.98px) and (orientation: portrait) {
  #controlsOverlay {
    right: max(8px, env(safe-area-inset-right, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    pointer-events: auto;
  }

  #controlsOverlay.controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #controlsOverlay .controls-toolbar {
    position: static;
    transform: none;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #controlsOverlay .controls-toolbar .btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  #controlsOverlay .btn__text {
    display: none;
  }

  #controlsOverlay #priceMobile {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    align-self: center;
    overflow: hidden;
  }

  #controlsOverlay #priceMobile .btn--price {
    min-height: 38px;
    max-width: 100%;
    min-width: 0;
    width: auto;
    padding-block: var(--space-1);
    padding-inline: var(--pad-1);
    gap: var(--space-1);
  }

  #controlsOverlay #priceMobile .btn__content {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  #controlsOverlay #priceMobile .btn__price {
    font-size: var(--fs-05-md);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #controlsOverlay #priceMobile .btn__sub {
    display: none;
  }
}

/* xs Portrait (<576): kompakte Icons */
@media (max-width: 575.98px) and (orientation: portrait) {
  #controlsOverlay .controls-toolbar .btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  #controlsOverlay #priceMobile .btn--price {
    min-height: 34px;
  }
}


/* md Portrait (768–991): mehr Platz → „inkl. MwSt.“ sichtbar */

  #controlsOverlay #priceMobile .btn--price {
    padding-inline: var(--pad-2);
  }

  #controlsOverlay #priceMobile .btn__price {
    font-size: var(--fs-06-base);
  }

  #controlsOverlay #priceMobile .btn__sub {
    display: block;
    font-size: var(--fs-03-xs);
    line-height: var(--lh-tight);
  }
}

/* lg+ (≥992) und Landscape <lg: vertikal unten rechts, Icon + Label */
@media (min-width: 992px),
       (max-width: 991.98px) and (orientation: landscape) {
  #controlsOverlay {
    left: auto;
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  #controlsOverlay.controls {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }

  #controlsOverlay .controls-toolbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--pad-2);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    box-shadow: var(--shadow-md);
  }

  #controlsOverlay .controls-toolbar .btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: var(--pad-1) var(--pad-2);
  }

  #controlsOverlay .btn__text {
    display: block;
  }

  #controlsOverlay #priceMobile {
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    align-self: stretch;
  }

  #controlsOverlay #priceMobile .btn--price {
    min-width: 140px;
    max-width: none;
    width: auto;
    min-height: 38px;
    padding-block: var(--space-1);
    padding-inline: var(--pad-2);
  }

  #controlsOverlay #priceMobile .btn__content {
    overflow: visible;
  }

  #controlsOverlay #priceMobile .btn__price {
    font-size: var(--fs-08-xl);
    overflow: visible;
    text-overflow: clip;
  }

  #controlsOverlay #priceMobile .btn__sub {
    display: block;
    font-size: var(--fs-04-sm);
    line-height: var(--lh-relaxed);
  }
}

/* 2-Spalten (.main): Toolbar unten mittig im Viewer */
@media (orientation: landscape) and (max-width: 1199.98px),
       (min-width: 1200px) {
  #controlsOverlay {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }

  #controlsOverlay.controls {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }

  #controlsOverlay .controls-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }

  #controlsOverlay .controls-toolbar .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }
}

.texture-dev-tools{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  z-index:21;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-2);
  width:min(18rem, calc(100% - var(--space-6)));
  max-width:100%;
}

.texture-dev-tools__btn{
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  padding:var(--pad-inline-sm);
  white-space:nowrap;
}

.texture-dev-tools__btn.is-active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.uv-tune-panel{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--pad-card);
  border:1px solid var(--grey-light);
  border-radius:var(--radius-sm);
  background:var(--ms-modal-bg);
  box-shadow:var(--shadow-sm);
  max-height:min(36rem, calc(100dvh - var(--safe-t) - var(--safe-b) - 8.5rem));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.uv-tune-panel[hidden]{
  display:none !important;
}

.uv-tune-panel__meta{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  color:var(--muted);
}

.uv-tune-panel__group{
  font-weight:var(--fw-semibold);
  color:var(--text);
}

.uv-tune-panel__readout{
  font-family:var(--font-mono, ui-monospace, monospace);
  word-break:break-all;
}

.uv-tune-panel__tabs{
  display:flex;
  gap:var(--space-1);
  border-bottom:var(--border-default);
  margin-bottom:var(--space-2);
}

.uv-tune-panel__tab{
  flex:1;
  padding:var(--pad-inline-sm);
  border:none;
  border-bottom:2px solid transparent;
  background:transparent;
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  font-weight:var(--fw-medium);
  color:var(--muted);
  cursor:pointer;
}

.uv-tune-panel__tab.is-active{
  color:var(--text);
  border-bottom-color:var(--accent);
}

.uv-tune-panel__pane[hidden]{
  display:none !important;
}

.uv-tune-panel__toggles{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.uv-tune-panel__map-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.uv-tune-panel__map-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}

.uv-tune-panel__map-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  min-width:5.5rem;
}

.uv-tune-panel__map-row.is-unavailable .uv-tune-panel__map-actions .uv-tune-panel__quality{
  display:none;
}

.uv-tune-panel__map-row.is-unavailable .uv-tune-panel__toggle input{
  display:none;
}

.uv-tune-panel__map-unavailable{
  font-size:var(--fs-02-2xs);
  line-height:var(--lh-tight);
  color:var(--muted);
  white-space:nowrap;
}

.uv-tune-panel__map-label{
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
}

.uv-tune-panel__quality{
  flex:0 0 auto;
  min-width:5.5rem;
  padding:var(--space-1) var(--space-2);
  border:var(--border-default);
  border-radius:var(--radius-sm);
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  font-family:var(--font);
  color:var(--text);
  background:var(--ms-modal-bg);
}

.uv-tune-panel__quality:focus{
  outline:none;
  border-color:var(--accent);
}

.uv-tune-panel__pixel-ratio{
  margin-top:var(--space-1);
  padding-top:var(--space-2);
  border-top:var(--border-default);
}

.uv-tune-panel__pixel-ratio-hint{
  margin:0;
  font-size:var(--fs-02-2xs);
  line-height:var(--lh-tight);
  color:var(--muted);
}

.screenshot-dev-panel__status--error{
  color:var(--danger, #c0392b);
}

.shadow-tune-panel__global-toggle{
  margin-bottom:var(--space-1);
}

.shadow-tune-panel__lights{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.shadow-tune-panel__light{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding-top:var(--space-2);
  border-top:var(--border-default);
}

.shadow-tune-panel__light:first-child{
  padding-top:0;
  border-top:none;
}

.shadow-tune-panel__light-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}

.shadow-tune-panel__light-title{
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  color:var(--text);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shadow-tune-panel__cast{
  flex:0 0 auto;
}

.shadow-tune-panel__field.slider{
  margin-bottom:0;
}

.shadow-tune-panel__pos-head{
  margin-top:var(--space-3);
  margin-bottom:var(--space-1);
}

.shadow-tune-panel__range{
  width:100%;
  margin-top:var(--space-1);
  accent-color:var(--accent);
}

.shadow-tune-panel__empty{
  margin:0;
  font-size:var(--fs-02-2xs);
  line-height:var(--lh-tight);
  color:var(--muted);
}

.shadow-tune-panel [title]{
  cursor:help;
}

.ao-tune-panel__global-toggle{
  margin-bottom:var(--space-1);
}

.ao-tune-panel__field.slider{
  margin-bottom:0;
}

.ao-tune-panel__range{
  width:100%;
  margin-top:var(--space-1);
  accent-color:var(--accent);
}

.ao-tune-panel__empty{
  margin:0;
  font-size:var(--fs-02-2xs);
  line-height:var(--lh-tight);
  color:var(--muted);
}

.ao-tune-panel [title]{
  cursor:help;
}

.uv-tune-panel__toggle{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  cursor:pointer;
}

.uv-tune-panel__toggle input{
  flex:0 0 auto;
}

.uv-tune-panel__section{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.uv-tune-panel__section-title{
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  color:var(--text);
}

.uv-tune-panel__row{
  align-items:center;
}

.uv-tune-panel__input{
  width:4.5rem;
  min-width:0;
  padding:var(--space-1) var(--space-2);
  border:var(--border-default);
  border-radius:var(--radius-sm);
  font-size:var(--fs-03-xs);
  line-height:var(--lh-tight);
  font-family:var(--font);
  text-align:right;
  color:var(--text);
  background:var(--ms-modal-bg);
}

.uv-tune-panel__input:focus{
  outline:none;
  border-color:var(--accent);
}

.uv-tune-panel__input:disabled{
  opacity:0.45;
  pointer-events:none;
}

.uv-tune-panel__slider.slider{
  padding:var(--space-2);
  box-shadow:none;
}

.uv-tune-panel__slider md-slider{
  width:100%;
}

.uv-tune-panel__slider md-slider[disabled]{
  opacity:0.45;
  pointer-events:none;
}

.viewer-logo{
  position:absolute;
  top:20px;
  right:20px;
  z-index:20;
  pointer-events:none;
}

.viewer-overlays{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}

.viewer-overlays > *{
  pointer-events:auto;
}

/* Klicks durchreichen zur WebGL-Fläche; nur interaktive Kinder (z. B. .hotspot) fangen Events. */
#hotspotOverlay,
#measureOverlay{
  pointer-events:none;
}

.viewer-overlays.is-hidden-for-debug{
  display:none !important;
}

#summaryOverlay.is-hidden-for-debug{
  display:none !important;
}

/* Mobile: Link "Alle Produktdetails anzeigen" sichtbar halten */
@media (max-width: 768px) {
  #done .open-summary.clean-link{
    display:inline-block !important;
    margin:10px 0 4px;
  }
}

/* HUD-only: Bottom-Sheet / Caption nicht mehr anzeigen. */
#summaryOverlay .summary-sheet,
#summaryOverlay .summary-hud__caption{
  display:none !important;
}

.viewer-logo img{
  width:auto;
  height:20px;
  opacity:.9;
}

@media (min-width: 576px){
  #stepTabs .tab-progress{
    display:block !important;
  }

  .controls:not(#controlsOverlay){
    justify-content:center;
  }

  .controls:not(#controlsOverlay) .btn{
    width:auto;
    height:auto;
    min-height:var(--btn-h);
  }

  .viewer-logo img{
    height:35px;
  }
}


/* =========================
   HOTSPOTS
   ========================= */
.hotspot-layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:300;
}

/* HS_*-Empty: Zoom-Button + Summary-Nummer gemeinsam ausgerichtet */
.hotspot-marker-stack{
  position:absolute;
  z-index:20;
  left:0;
  top:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  transform:translate(-50%, -50%);
  pointer-events:none;
}

.hotspot-marker-stack .summary-anchor-badge{
  position:relative;
  left:auto;
  top:auto;
  flex-shrink:0;
  transform:none;
  pointer-events:none;
}

.hotspot{
  position:absolute;
  z-index:20;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  cursor:pointer;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}

.hotspot-marker-stack .hotspot{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  pointer-events:auto;
}

.hotspot:hover{
  transform:translate(-50%, -50%) scale(1.04);
}

.hotspot-marker-stack .hotspot:hover{
  transform:scale(1.04);
}

.hotspot:active{
  transform:translate(-50%, -50%) scale(.98);
}

.hotspot-marker-stack .hotspot:active{
  transform:scale(.98);
}

.hotspot-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hotspot-svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:#1f2937;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hotspot-icon--zoom-out .hotspot-svg__minus{
  stroke-width:2.4;
}

/* Feste Zoom-out-Schaltfläche (Detailansicht) — unten rechts im Viewer */
.hotspot-zoom-out-fixed{
  position:absolute;
  right:max(var(--pad-4), env(safe-area-inset-right, 0px));
  bottom:max(var(--pad-4), env(safe-area-inset-bottom, 0px));
  z-index:310;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  padding:0;
  border:0;
  border-radius:var(--radius-pill, 999px);
  background:var(--btn-bg, #fff);
  color:var(--text, #1f2937);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  pointer-events:auto;
  transition:transform .15s ease, box-shadow .15s ease;
}

.hotspot-zoom-out-fixed[hidden]{
  display:none !important;
}

.hotspot-zoom-out-fixed:hover{
  transform:scale(1.05);
  box-shadow:var(--shadow-lg, 0 10px 28px rgba(0, 0, 0, .18));
}

.hotspot-zoom-out-fixed:active{
  transform:scale(.97);
}

.hotspot-zoom-out-fixed .hotspot-icon{
  width:1rem;
  height:1rem;
}

.hotspot-zoom-out-fixed .hotspot-svg{
  width:1rem;
  height:1rem;
  stroke-width:2.2;
}

@media (min-width: 768px){
  .hotspot-zoom-out-fixed{
    width:3.25rem;
    height:3.25rem;
  }

  .hotspot-zoom-out-fixed .hotspot-icon,
  .hotspot-zoom-out-fixed .hotspot-svg{
    width:1.625rem;
    height:1.625rem;
  }
}

.hotspot-dot{
  width:18px;
  height:18px;
  border:2px solid #ffffff;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 0 0 4px rgba(255,255,255,.4);
}

.hotspot-dot::before,
.hotspot-dot::after{
  display:none;
}

.hotspot[aria-expanded="true"] .hotspot-pop{
  display:flex;
}

.hotspot-pop > .hotspot-content{
  pointer-events:auto;
  width:clamp(260px, 48vw, 420px);
  max-width:calc(100% - 24px);
  max-height:70vh;
  overflow:auto;
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 20px 50px rgba(2,6,23,.18);
  -webkit-overflow-scrolling:touch;
}

.hotspot-card{
  position:relative !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
}

.hotspot-table{
  width:100%;
  border-collapse:collapse;
  text-align:center;
}

.hotspot-table thead{
  background-color:#f8f8f8;
}

.hotspot-table tbody tr{
  border-bottom:1px solid #ddd;
}

.hotspot-table tbody tr:nth-child(even){
  background:#f8f8f8;
}

.viewer:has(#hotspotZoomOutBtn:not([hidden])) .viewer-topbar{
  display:none;
}

/* Volle Zusammenfassung („Alle Produktdetails“): weniger UI über der Szene */
.viewer:has(#summaryOverlay.is-active.summary-overlay--all-details) .viewer-topbar{
  display:none;
}

/* In all-details Badge-Stacks behalten, aber Hotspot-Buttons selbst ausblenden */
.viewer:has(#summaryOverlay.is-active.summary-overlay--all-details) .hotspot-marker-stack .hotspot{
  display:none !important;
}

/* Während Maße eingeblendet sind, Hotspots ausblenden */
.viewer:has(#measureOverlay.is-visible:not([data-measure-transient="1"])) #hotspotOverlay{
  display:none;
}

.viewer:has(#measureOverlay.is-visible:not([data-measure-transient="1"])) .summary-anchor-badge{
  display:none !important;
}

/* Mobile/Touch:
 * - Viewer-Bereich: touch-action none, damit OrbitControls Touch-Gesten exklusiv bekommt
 *   und Chrome nicht in den Scroll-Pfad (cancelable=false) kippt.
 * - Sheet/Viewer-UI/Modal: pan-x pan-y über Container-Regeln (#sheet *, .viewer *, .ms-modal *).
 * - Ausnahmen: .sliderStepper (eigene Touch-Regeln), Fabric-Subtabs (pan-x), Stoff-Kacheln (manipulation). */
.viewer,
.viewer *,
#v3d-container,
#v3d-container canvas,
#hotspotOverlay,
#sheet{
  touch-action:pan-x pan-y;
}

/* Verge3D Interaktionsfläche exklusiv */
.viewer,
#v3d-container,
#v3d-container canvas,
#hotspotOverlay{
  touch-action:none;
  overscroll-behavior:contain;
}

#sheet *:not(.sliderStepper):not(.sliderStepper *):not(.qtyStepper):not(.qtyStepper *){
  touch-action:pan-x pan-y;
}

.ms-modal,
.ms-modal *{
  touch-action:pan-x pan-y;
}

/* =========================
   MEASURE OVERLAY
   ========================= */
.measure-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
  overflow:visible;
  opacity:0;
  transition:opacity .2s;
}

.measure-overlay.is-visible{
  opacity:1;
  /* Über .hotspot-layer (300), damit Maßlinien sichtbar bleiben */
  z-index:320;
}

.measure-figure-height-tag{
  position:absolute;
  left:0;
  top:0;
  z-index:331;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  border:1px solid rgba(255, 255, 255, .32);
  background:rgba(15, 23, 42, .5);
  color:#fff;
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tighter);
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, -50%);
  transition:opacity .15s, visibility .15s;
  box-shadow:none;
  user-select:none;
  -webkit-user-select:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.measure-figure-height-tag.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.measure-figure-height-tag__body{
  display:inline-flex;
  align-items:baseline;
  gap:var(--space-1);
  pointer-events:none;
  padding-inline:var(--space-1);
}

.measure-figure-height-tag__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--space-4);
  height:var(--space-4);
  min-width:var(--space-4);
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:inherit;
  opacity:.8;
  line-height:0;
  cursor:pointer;
  touch-action:manipulation;
}

.measure-figure-height-tag__icon{
  width:var(--space-2);
  height:var(--space-2);
}

.measure-figure-height-tag__arrow:hover:not(:disabled){
  opacity:1;
  background:rgba(255, 255, 255, .1);
}

.measure-figure-height-tag__arrow:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.measure-figure-height-tag__value{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-semibold);
  line-height:1;
}

.measure-figure-height-tag__unit{
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-regular);
  opacity:.85;
}

@media (max-width: 767.98px){
  .measure-figure-height-tag{
    padding:var(--space-1);
    gap:var(--space-1);
    background:rgba(15, 23, 42, .42);
    border-color:rgba(255, 255, 255, .22);
  }

  .measure-figure-height-tag__body{
    padding-inline:0;
    gap:var(--space-1);
  }

  .measure-figure-height-tag__value{
    font-size:var(--fs-04-sm);
  }

  .measure-figure-height-tag__unit{
    font-size:var(--fs-02-2xs);
  }

  .measure-figure-height-tag__arrow{
    width:var(--space-3);
    height:var(--space-3);
    min-width:var(--space-3);
  }

  .measure-figure-height-tag__icon{
    width:var(--space-2);
    height:var(--space-2);
  }
}

.measure-overlay .dim-line,
.measure-overlay .dim-cap{
  stroke:#fff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.dim-dot{
  fill:white;
  stroke:rgba(0,0,0,0.35);
  stroke-width:1.5;
}

.measure-overlay .dim-text,
.dim-text{
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:middle;
  paint-order:stroke;
  stroke:rgba(0,0,0,.35);
  stroke-width:3px;
  stroke-linejoin:round;
  font-size:var(--fs-02-2xs);
}

@media (min-width: 768px) {
  .measure-overlay .dim-text,
  .dim-text{
    font-size:var(--fs-04-sm);
  }
}

/* =========================
   FORMS / MODALS
   ========================= */
body.ms-modal-open{
  overflow:hidden !important;
}

/* Sheet scrollt sonst unter dem Vollbild-Modal weiter (Touch/Wheel) */
body.ms-modal-open .sheet,
body.ms-modal-open .sheet-body,
body.ms-modal-open #sheetBody{
  overflow:hidden !important;
  overscroll-behavior:none;
}

.ms-modal{
  position:fixed;
  inset:0;
  /* Über .measure-overlay.is-visible (320), damit Modals die Maßlinien verdecken */
  z-index:var(--ms-modal-z);
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--ms-modal-pad);
}

.ms-modal[aria-hidden="false"]{
  display:flex;
}

.ms-modal__backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--ms-modal-backdrop);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.ms-modal__dialog{
  position:relative;
  z-index:1;
  width:min(var(--ms-modal-w-md), calc(100vw - 24px));
  max-height:min(var(--ms-modal-maxh), calc(100dvh - 24px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--ms-modal-radius);
  box-shadow:var(--ms-modal-shadow);
  background:#fff;
}

.ms-modal--sm .ms-modal__dialog{
  width:min(var(--ms-modal-w-sm), calc(100vw - 24px));
}

.ms-modal--md .ms-modal__dialog{
  width:min(var(--ms-modal-w-md), calc(100vw - 24px));
}

.ms-modal--lg .ms-modal__dialog{
  width:min(var(--ms-modal-w-lg), calc(100vw - 24px));
}

.ms-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.ms-modal__title{
  font-size: var(--fs-08-xl);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
}

.ms-modal__sub{
  margin-top:3px;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

.ms-modal__close{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:rgba(0,0,0,.06);
  cursor:pointer;
  min-width: 34px;
}

.ms-modal__body{
  padding:14px 16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

.ms-modal__body:focus{
  outline:none;
}

.ms-modal__foot{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.ms-form{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 20px;
  max-width:100%;
  font-family:inherit;
}

.ms-form--single{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.ms-full{
  grid-column:1 / -1;
}

.ms-col{
  display:flex;
  flex-direction:column;
}

.ms-field{
  width:100%;
}

.ms-form label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  clip:rect(0,0,0,0);
  border:0;
}

.ms-form input,
.ms-form select{
  width:100%;
  height:42px;
  padding:0 12px;
  border:1px solid #d1d5db;
  border-radius:6px;
  transition:all .2s ease;
}

.ms-form textarea{
  display:block;
  width:100%;
}

.ms-form input:focus,
.ms-form select:focus{
  outline:none;
  border-color:var(--accent);
}

.ms-note,
.sample-counter{
  opacity:.75;
}

.ms-right{
  text-align:right;
}

.ms-modal--pdf .ms-modal__dialog{
  width:min(1100px, 96vw);
  max-width:1100px;
  height:min(90vh, 920px);
  padding:0;
}

.ms-modal__body--pdf{
  flex:1 1 auto;
  min-height:0;
  padding:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y;
}

.ms-modal__body--pdf iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  border:0;
  background:#fff;
}

/* Über anderen .ms-modal (z. B. #fabricPickerModal), sonst opt-info-btn-Info unsichtbar */
#infoModal{
  z-index:calc(var(--ms-modal-z) + 20);
}

#infoModal .ms-modal__dialog{
  width:min(520px, 92vw);
  max-width:520px;
}

#infoModal .ms-modal__body{
  overflow-anchor:none;
}

/* Info-Modal: Text + Bullets übersichtlicher */
#infoModal .info-modal__content{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#infoModal .info-modal__text{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#infoModal #infoModalDesc{
  margin:2px 0 0;
  padding:0;
  display:block;
  border:1px solid rgba(15, 23, 42, 0.10);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

#infoModal #infoModalDesc p{
  margin:0 0 10px;
}

#infoModal #infoModalDesc p:last-child{
  margin-bottom:0;
}

/* Beschreibung: nur info-desc <p> clamp + Toggle */
#infoModal #infoModalDesc .info-desc__content.is-clamped{
  max-height: calc(1.6em * 3);
  overflow:hidden;
  position:relative;
  padding:10px 12px;
}

#infoModal #infoModalDesc .info-desc__content.is-clamped::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1.4em;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%);
  pointer-events:none;
}

#infoModal #infoModalDesc .info-desc__content{
  padding:10px 12px;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

#infoModal .info-panel__title{
  padding:10px 12px;
  font-size: var(--fs-05-md);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  background:rgba(15, 23, 42, 0.03);
  border-bottom:1px solid rgba(15, 23, 42, 0.08);
}

#infoModal #infoModalDesc > .info-desc__toggle{
  align-self:flex-start;
  margin-top:1px;
  margin-left:12px;
  margin-bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:0;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-regular);
  cursor:pointer;
}

#infoModal #infoModalDesc > .info-desc__toggle .info-desc__toggle-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 50%, #fff);
}

#infoModal #infoModalBullets{
  margin:2px 0 0;
  padding:0;
  display:block;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #fff;
  overflow:hidden;
}

#infoModal #infoModalBullets:empty{
  display:none;
}

#infoModal #infoModalDatasheet{
  margin:2px 0 0;
  padding:0;
  display:block;
  border:1px solid rgba(15, 23, 42, 0.10);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

#infoModal #infoModalDatasheet:empty{
  display:none;
}

#infoModal #infoModalStats:empty{
  display:none;
}

#infoModal #infoModalDatasheet .info-datasheet__row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:baseline;
  padding:8px 12px;
}

#infoModal #infoModalDatasheet .info-datasheet__row + .info-datasheet__row{
  border-top:1px solid rgba(15, 23, 42, 0.08);
}

#infoModal #infoModalDatasheet .info-datasheet__key{
  font-size: var(--fs-05-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

#infoModal #infoModalDatasheet .info-datasheet__val{
  font-size: var(--fs-05-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  white-space:nowrap;
}

#infoModal #infoModalDatasheet .info-datasheet__row--block{
  grid-template-columns:minmax(0, 1fr);
  gap:4px;
  align-items:start;
}

#infoModal #infoModalDatasheet .info-datasheet__row--block .info-datasheet__val{
  white-space:normal;
}

#infoModal #infoModalBullets > .info-kv,
#infoModal #infoModalBullets > .info-bullet{
  position:relative;
  padding:8px 12px;
}

#infoModal #infoModalBullets > * + *{
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#infoModal #infoModalBullets > .info-kv{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:12px;
  align-items:baseline;
}

#infoModal #infoModalBullets .info-kv__key{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

#infoModal #infoModalBullets .info-kv__val{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-relaxed);
  white-space:nowrap;
}

#infoModal #infoModalBullets > .info-bullet{
  padding-left:34px;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

#infoModal #infoModalBullets > .info-bullet::before{
  content:"✓";
  position:absolute;
  left:12px;
  top:10px;
}

/* =========================
   PICKER / SAMPLE
   ========================= */
#sampleBtn.is-on{
  background:#1F70AD;
}

.sample-limit-reached{
  opacity:.45;
}

.opt[data-action="setFabric"]{
  position:relative;
}

.opt.sample-selected::after{
  content:"Muster";
  position:absolute;
  top: 11%;
  left:8px;
  padding:4px 8px;
  border-radius:6px;
  background:var(--accent);
  color: #fff;
  font-size: var(--fs-01-3xs);
  font-weight: var(--fw-regular);
}

.badge-popular{
  display: none;
  position:absolute;
  top:20%;
  left:8px;
  padding:4px 8px;
  border-radius:6px;
  background:#f5b400;
}

#samplesSelectionList .sample-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}

#samplesSelectionList .sample-thumb{
  width:32px;
  height:20px;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.15);
  border-radius:6px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.picker-group-title{
  margin:16px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.08);
  opacity:.85;
}

/* Muster-Picker: gleiche Kacheln wie Konfig (.opt), eigenes Raster + Multi-Select */
#fabricPickerGrid .grid{
  --grid-cols-mobile:4;
  --grid-cols-tablet-portrait:4;
  --grid-cols-tablet:4;
  --grid-cols-desktop:4;
  margin-bottom:10px;
}

#fabricPickerModal .opt.opt--sample-picker{
  cursor:pointer;
}

#fabricPickerModal .opt.opt--sample-picker:hover{
  background:rgba(0,0,0,.03);
}

#fabricPickerModal .opt.opt--sample-picker.is-selected{
  border:2px solid var(--accent);
}

#fabricPickerModal .opt.opt--sample-picker,
#fabricPickerModal .opt.opt--sample-picker .swatch,
#fabricPickerModal .opt.opt--sample-picker .txt{
  touch-action:manipulation;
}

#fabricPickerGrid{
  display:block !important;
}

/* Fabric-Picker: Titelzeile + Auswahl im Head — nur das Raster scrollt im Body */
#fabricPickerModal .ms-modal__head--fabric-picker{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding-bottom:12px;
}

#fabricPickerModal .ms-modal__head-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  width:100%;
  position:relative;
  padding-right:46px;
}

#fabricPickerModal .ms-modal__close{
  position:absolute;
  right:0;
  top:0;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Kurzübersicht ausgewählter Muster */
.fabric-picker-selection-summary{
  margin:0 0 14px;
  padding:10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius:var(--radius-sm);
  background: rgba(15, 23, 42, 0.03);
}

#fabricPickerModal .fabric-picker-selection-summary{
  margin:0;
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
}

#fabricPickerModal .ms-modal__body{
  flex:1;
  min-height:0;
}

/* Wenn infoModal über dem Picker offen ist: Picker dahinter nicht scroll-/klickbar */
#fabricPickerModal.is-underlay-locked .ms-modal__dialog{
  pointer-events:none;
}

#fabricPickerModal.is-underlay-locked .ms-modal__body{
  overflow:hidden !important;
  overscroll-behavior:contain;
}

.fabric-picker-selection-summary__title{
  margin:0 0 8px;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-regular);
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.fabric-picker-selection-summary__empty{
  margin:0;
  padding:2px 0 0;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

/* Kurz-Hinweis nur wenn ein 6. Stoffmuster gewählt werden soll (Toast unter der Summary) */
#fabricPickerModal .fabric-picker-limit-toast{
  box-sizing:border-box;
  width:100%;
  margin:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 12px;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--accent) 14%, #fff);
  border:1px solid transparent;
  pointer-events:none;
  transition:max-height 0.22s ease, opacity 0.22s ease, margin 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}

#fabricPickerModal .fabric-picker-limit-toast.is-visible{
  margin-top:8px;
  max-height:8rem;
  opacity:1;
  padding:8px 12px;
  border-color:color-mix(in srgb, var(--accent) 30%, var(--grey-light));
}

.fabric-picker-selection-chips{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:10px 12px;
  justify-items:center;
  align-items:start;
}

.fabric-picker-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:100%;
  max-width:104px;
  min-width:0;
}

.fabric-picker-chip__frame{
  position:relative;
  width:48px;
  height:48px;
  flex-shrink:0;
}

.fabric-picker-chip__swatch{
  width:100%;
  height:100%;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  background-size:220%;
  background-position:center;
  background-repeat:no-repeat;
}

.fabric-picker-chip__remove{
  position:absolute;
  top:-6px;
  right:-6px;
  width:22px;
  height:22px;
  padding:0;
  margin:0;
  border:1px solid rgba(0,0,0,.14);
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.fabric-picker-chip__remove:hover{
  background:#fef2f2;
  border-color:rgba(220,38,38,.35);
}

.fabric-picker-chip__label{
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  text-align:center;
  width:100%;
  max-width:104px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

/* Picker-Summary: Mobile — sehr kompakte Chips, Namen eine Zeile mit … */
@media (max-width:768px), (pointer:coarse) and (max-width:991.98px){
  .fabric-picker-selection-summary{
    margin:0 0 8px;
    padding:6px 8px;
  }

  .fabric-picker-selection-summary__title{
    margin:0 0 4px;
  }

  .fabric-picker-selection-summary__empty{
    padding:0;
  }

  #fabricPickerModal .fabric-picker-limit-toast.is-visible{
    padding:6px 8px;
  }

  .fabric-picker-selection-chips{
    grid-template-columns:repeat(auto-fill, minmax(52px, 1fr));
    gap:5px 4px;
  }

  .fabric-picker-chip{
    max-width:100%;
    min-width:0;
    gap:2px;
  }

  .fabric-picker-chip__frame{
    width:30px;
    height:30px;
  }

  .fabric-picker-chip__swatch{
    border-radius:5px;
  }

  .fabric-picker-chip__remove{
    top:-4px;
    right:-4px;
    width:16px;
    height:16px;
  }

  .fabric-picker-chip__label{
    max-width:100%;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
    text-align:center;
  }
}

#fabricPickerGrid .picker-group-title{
  margin-top:18px;
}

/* =========================
   CART SUMMARY
   ========================= */
#cartSummary{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.cart-row:last-child{
  border-bottom:none;
}

.cart-key{
  min-width:90px;
}

.cart-val{
  text-align:right;
}

/* =========================
   SUCCESS / INFO MODAL
   ========================= */
.share-success{
  margin-top:10px;
  text-align:center;
}

.form-msg{
  margin:8px 0 0;
}

.form-msg--error{
}

.success-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  border-radius:50%;
  background:#27ae60;
}

.success-text{
  margin-bottom:12px;
}

.opt-info-btn{
  position:absolute;
  right:9px;
  bottom:30px;
  z-index:3;
  width:24px;
  height:24px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background-color: var(--btn-bg-hover);
  border: 1px solid darkgrey;
  font-size: var(--fs-03-xs);
  font-weight: var(--fw-medium);
}


#mattress .opt > .opt-info-btn{
  top: 50%;
  transform: translateY(-50%);
}

#topper .opt-info-btn{
  top:8px;
  right:9px;
  bottom:auto;
  transform:none;
}

#topper .opt-info-btn:hover{
  transform:scale(1.05);
}


#fabric .opt-info-btn,
#fabricPickerModal .opt-info-btn{
  right:10%;
  top:8%;
}

@media (min-width: 48rem) {
  #fabric .opt-info-btn,
  #fabricPickerModal .opt-info-btn{
    right:13%;
    top:11%;
  }
}

.opt-info-btn:hover{
  transform:scale(1.05);
}

.info-modal__media{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:14px;
}

.info-modal__media img,
.info-modal__media video,
#infoModal .info-modal__media img,
#infoModal .info-modal__media video,
#infoModalImg,
#infoModalVideo{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  object-fit:cover;
}

/* YouTube: 16∶9-Fläche — ohne diese Klasse kollabiert die Box (nur absolute Kinder + 1∶1-Ratio) */
.info-modal__media.info-modal__media--yt {
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: #0f0f0f;
}

/* YouTube-Embed im Info-Modal (Topper etc.) */
.info-modal__youtube {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #0f0f0f;
}

.info-modal__youtube iframe,
.info-modal__youtube-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.info-modal__youtube-preview{
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: #0f0f0f;
  cursor: pointer;
}

.info-modal__youtube-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
  transform:scale(1.14);
  transform-origin:center center;
  filter:saturate(0.92) contrast(1.02);
}

@media (min-width: 48rem){
  .info-modal__youtube-thumb{
    object-position:center 56%;
    transform:scale(1.08);
  }
}

.info-modal__youtube-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:56px;
  height:40px;
  border-radius:10px;
  background:rgba(235, 25, 35, 0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.info-carousel-btn{
  position:absolute;
  top:50%;
  z-index:5;
  width:20px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border:0;
  border-radius:0px;
  background:rgba(255,255,255,0.9);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}

.info-carousel-btn--prev{
  left:0px;
}

.info-carousel-btn--next{
  right:0px;
}

.info-carousel-btn.is-hidden{
  display:none;
}

.info-carousel-dots{
  display:none !important;
}

.info-carousel-dots button{
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.6);
  cursor:pointer;
}

.info-carousel-dots button.is-active{
  background:#fff;
}

.info-carousel-btn::after{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* =========================
   UTILITY
   ========================= */
.hint{
  display:none !important;
}

.hidden-mob{
  display:none;
}

.manual-mobile{
  display:none !important;
}

.topper-hint{
  margin-bottom:12px;
  padding:12px 14px;
  font-size:var(--fs-06-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-loose);
  border:1px solid #ffe69c;
  border-radius:8px;
  background:#fff3cd;
}

.topper-advisor-entry__lead{
  min-width:0;
  flex:1;
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

/* Topperfinder-Einstieg: etwas auffälliger als Standard-switch */
.switch.topper-advisor-entry{
  border-left:4px solid var(--accent);
}

/* Topperfinder (einheitlich mit ms-modal + Design-Tokens) */
#topperAdvisorOpenBtn[hidden]{
  display:none !important;
}

#topperAdvisorModal #topperAdvisorRestart{
  display:none !important;
}

#topperAdvisorModal.topper-advisor--result #topperAdvisorRestart{
  display:inline-flex !important;
}

#topperAdvisorModal .ms-modal__sub{
}

.ms-modal__foot.topper-advisor-foot{
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
}

.topper-advisor-foot__right{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}

.topper-advisor-body{
  max-height:min(60dvh, 520px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.topper-advisor-step{
  max-width:100%;
  font-size:var(--fs-06-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-loose);
}

.topper-advisor-error{
  margin:0 0 var(--space-3);
  padding:var(--space-2) var(--space-3);
  font-size:var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-relaxed);
  border-radius:var(--radius-sm);
  background:rgba(255,59,48,.08);
  border:1px solid rgba(255,59,48,.25);
}

.topper-advisor-error:empty,
.topper-advisor-error[hidden]{
  display:none;
}

.topper-advisor-progress{
  display:flex;
  gap:6px;
  margin-bottom:var(--space-4);
}

.topper-advisor-progress__seg{
  flex:1;
  height:5px;
  border-radius:3px;
  background:var(--stroke2);
}

.topper-advisor-progress__seg.is-active{
  background:var(--accent);
}

.topper-advisor-flash{
  animation:topperAdvisorFlash .45s ease;
}

@keyframes topperAdvisorFlash{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

.topper-wizard__step-inner{
}

.topper-wizard__question{
  margin:0 0 var(--space-3);
  text-align:center;
}

.topper-wizard__subheading{
  margin:var(--space-4) 0 var(--space-2);
}

.topper-wizard__hint{
  margin:calc(-1 * var(--space-1)) 0 var(--space-3);
  text-align:center;
}

.topper-wizard__block{
  margin-bottom:var(--space-3);
}

.topper-wizard__label{
  display:block;
  margin-bottom:var(--space-2);
}

.topper-wizard__input{
  width:100%;
  height:var(--btn-h);
  padding:0 var(--btn-px);
  border:var(--border-default);
  border-radius:var(--btn-radius);
  background:var(--btn-bg);
}

.topper-wizard__input:focus{
  outline:none;
  border-color:var(--accent);
}

.topper-wizard__tiles{
  display:grid;
  gap:var(--space-3);
}

.topper-wizard__tiles--2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.topper-wizard__tiles--3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.topper-wizard__tiles--4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.topper-wizard__tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:88px;
  padding:var(--space-2) var(--space-2);
  border:1px solid var(--stroke2);
  border-radius:var(--radius-md);
  background:var(--ms-modal-bg);
  cursor:pointer;
  font:inherit;
  text-align:center;
  box-shadow:var(--shadow-xs);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.topper-wizard__tile:hover{
  border-color:rgba(31,112,173,.35);
  box-shadow:var(--shadow-sm);
}

.topper-wizard__tile.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
  background:rgba(31,112,173,.06);
}

.topper-wizard__tile--word{
  min-height:96px;
}

.topper-wizard__tile-title{
  text-align:center;
}

.topper-wizard__tile-word{
  letter-spacing:0.02em;
}

.topper-wizard__tile--climate{
  min-height:152px;
  padding:var(--space-3) var(--space-2);
}

.topper-wizard__tile-img{
  width:120px;
  height:120px;
  object-fit:contain;
  flex-shrink:0;
  pointer-events:none;
  user-select:none;
}

.topper-wizard__tile-img--climate{
  width:52px;
  height:52px;
}

.topper-wizard__tile-sub{
}

.topper-wizard__tile-title-sm{
  letter-spacing:0.03em;
  text-align:center;
  text-transform:uppercase;
}

.topper-wizard__tile-desc{
  text-align:center;
}

.topper-wizard__checks{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  max-width:440px;
  margin:0 auto;
}

.topper-wizard__check-row{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  cursor:pointer;
}

.topper-wizard__check-row input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

.topper-wizard__result-note{
  text-align:center;
  padding:var(--space-2);
}

.topper-wizard__result-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-4);
  align-items:stretch;
}

.topper-wizard__result-card{
  background:var(--bg-soft);
  border:1px solid var(--stroke2);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.topper-wizard__result-card-title{
  margin:0;
}

.topper-wizard__result-name{
}

.topper-wizard__result-img{
  height:100px;
  border-radius:var(--radius-sm);
  background:center/cover no-repeat;
  background-color:var(--grey-light);
}

.topper-wizard__result-list{
  margin:0;
  padding-left:1.1rem;
}

.topper-wizard__result-card > .btn{
  margin-top:auto;
}

/* =========================
   MOBILE-FIRST UI TOGGLES
   ========================= */
.manual-desktop{
  display:none !important;
  font-size: var(--fs-04-sm) !important;
}

.manual-mobile{
  display:inline-flex !important;
  font-size: var(--fs-04-sm) !important;
}

.mobile-br{
  display:inline;
}

@media (min-width: 768px) {
  #fabricPickerGrid .grid{
    --grid-cols-mobile:7;
    --grid-cols-tablet-portrait:7;
    --grid-cols-tablet:7;
    --grid-cols-desktop:7;
  }
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .manual-desktop{
    display:inline-flex !important;
  }

  .manual-mobile{
    display:none !important;
  }

  .mobile-br{
    display:none;
  }
}

@media (max-width: 575.98px) {
  .topper-wizard__tiles--4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topper-wizard__tiles--3{
    grid-template-columns:1fr;
  }

  .topper-wizard__result-cards{
    grid-template-columns:1fr;
  }

  :root{
    --pad:0px;
    --safe-b:0px;
    --safe-t:0px;
  }

  .section > button{
    padding:12px;
  }

  .grid2mob{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid4mob{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .grid5mob{ grid-template-columns:repeat(5, minmax(0, 1fr)); }

  .opt{
    padding:3px;
    gap:3px;
  }

  .opt.no-swatch{
    min-height:30px;
    padding:10px 12px;
  }

  .sum .k{
  }

  #hotspotOverlay{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    pointer-events:none;
  }

  #hotspotOverlay .hotspot{
    pointer-events:auto;
    width:26px;
    min-width:26px;
    height:26px;
    min-height:26px;
  }

  #hotspotOverlay .hotspot-icon{
    width:18px;
    height:18px;
  }

  #hotspotOverlay .hotspot-svg{
    width:18px;
    height:18px;
  }

  #fabricPickerModal .opt.opt--sample-picker{
    padding:3px;
    gap:3px;
  }

  .badge-popular{
    top:7%;
    left:-2px;
    padding:4px 4px;
    border-radius:6px;
  }

  .opt.sample-selected::after{
    top:10%;
    left:-2px;
    padding:4px 4px;
    border-radius:6px;
  }

  #topper .opt{
    gap:var(--space-3);
    padding:var(--space-2);
  }

  #topper .swatch{
    width:30%;
  }

  #topper .txt{
    gap:var(--space-1);
  }

  #topper .opt .name{
    text-align:left;
  }

  .features{
    padding-left:0;
  }
}

@media (orientation: landscape) and (max-width: 1199.98px),
       (min-width: 1200px) {
  #cartMobile{
    display:none;
  }
}

.info-modal__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

#infoModalSampleBtn.is-selected {
  /* Beispiel */
  background: #111;
  border-color: #111;
}

/* Basis */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  padding: var(--pad-inline-sm);
  border:var(--btn-border);
  border-radius: var(--radius-sm);
  background:var(--btn-bg);
  color:var(--btn-color);
  font-size:var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-loose);
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--btn-shadow);
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .12s ease,
    box-shadow .18s ease;
}

.btn:hover{
  background:var(--btn-bg-hover);
}

.btn:active{
  transform:translateY(1px);
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/* Varianten */
.btn--primary{
  background:var(--btn-primary-bg);
  border-color:transparent;
  color:var(--btn-primary-color);
}

.btn--primary:hover{
  color:var(--btn-primary-color);
}

.btn--secondary{
  background:#fff;
  color:var(--btn-color);
}

.btn--ghost{
  background:transparent;
  box-shadow:none;
}

.btn--muted{
  background:var(--btn-muted-bg);
}

/* Zustände (Auswahl/Toggle an .btn — Tabs nutzen weiter .tab.is-active) */
.btn.is-selected{
  border:var(--btn-border-hover);
}

.btn--primary.is-selected{
  background:var(--accent);
  border-color:transparent;
  color:var(--btn-primary-color);
}

.btn--secondary.is-selected{
  background:var(--accent);
  border-color:transparent;
  color:var(--btn-primary-color);
}


/* Größen */
.btn--sm{
  min-height:36px;
  padding:0 12px;
}

.btn--lg{
  min-height:48px;
  padding:0 18px;
}

/* Nur Icon */
.btn--icon{
  width:40px;
  min-width:40px;
  padding:0;
}

.btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.btn__text{
  white-space:nowrap;
}

/* mobile-first: Controls zuerst icon-only, ab Tablet mit Text */
.controls .btn__text{
  display:none;
}

@media (min-width: 48rem) {
  .controls:not(#controlsOverlay) .btn__text{
    display:inline;
  }
}

.segToggle .btn{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.segToggle .btn + .btn{
  border-left:1px solid #d5dbe3;
}

.segToggle .btn.is-selected{
  background:var(--accent);
}

.is-hidden {
  display:none;
}

/* Muster-Counter (4/5 Muster + Punkte) */
.fabricPickerCounter--dots{
  display:flex;
  align-items:center;
  gap:12px;
}

.fabricPickerCounterRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.fabricPickerCounter--dots{
  gap:8px;
}

.fabricPickerCounter__dots{
  gap:4px;
}

.fabricPickerCounter__dot{
  width:12px;
  height:12px;
}

/* Im Fabric-/Sample-Picker den Counter kompakter halten */
#fabricPickerModal .fabricPickerCounterRow,
#sampleModal .fabricPickerCounterRow{
  gap:20px;
  flex-wrap:nowrap;
  overflow:hidden;
}

#fabricPickerModal .fabricPickerCounter--dots,
#sampleModal .fabricPickerCounter--dots{
  gap:5px;
  min-width:0;
}

#fabricPickerModal .fabricPickerCounter__text,
#sampleModal .fabricPickerCounter__text{
}

#fabricPickerModal .fabricPickerCounter__dots,
#sampleModal .fabricPickerCounter__dots{
  gap:3px;
}

#fabricPickerModal .fabricPickerCounter__dot,
#sampleModal .fabricPickerCounter__dot{
  width:10px;
  height:10px;
}

.fabricPickerCounter__text{
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  white-space:nowrap;
}

.fabricPickerCounter__dots{
  display:flex;
  gap:6px;
  align-items:center;
}

.fabricPickerCounter__dot{
  width:16px;
  height:16px;
  border-radius:999px;
  background:rgba(15,23,42,.18);
}

@media (min-width: 48rem) {
  .fabricPickerCounterRow{
    gap:18px;
    flex-wrap:wrap;
  }

  .fabricPickerCounter--dots{
    gap:12px;
  }

  .fabricPickerCounter__dots{
    gap:6px;
  }

  .fabricPickerCounter__dot{
    width:16px;
    height:16px;
  }

  #fabricPickerModal .fabricPickerCounterRow,
  #sampleModal .fabricPickerCounterRow{
    gap:18px;
    overflow:visible;
  }

  #fabricPickerModal .fabricPickerCounter--dots,
  #sampleModal .fabricPickerCounter--dots{
    gap:12px;
  }

  #fabricPickerModal .fabricPickerCounter__text,
  #sampleModal .fabricPickerCounter__text{
  }

  #fabricPickerModal .fabricPickerCounter__dots,
  #sampleModal .fabricPickerCounter__dots{
    gap:6px;
  }

  #fabricPickerModal .fabricPickerCounter__dot,
  #sampleModal .fabricPickerCounter__dot{
    width:16px;
    height:16px;
  }
}

.fabricPickerCounter__dot.is-filled{
  background:var(--accent);
}

.fabricPickerCounter__dot:not(.is-filled){
  background:transparent;
  border:1px solid var(--accent);
}

.info-modal__content{
  opacity:1;
  transform:translateX(0);
  transition:
    opacity .18s ease,
    transform .18s ease;
  will-change:opacity, transform;
}

.info-modal__content.is-switching-out{
  opacity:0;
  transform:translateX(-8px);
}

.info-modal__content.is-switching-in{
  opacity:0;
  transform:translateX(8px);
}


.info-modal__media{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1; /* oder 4/3 je nach Design */
  background:#f3f3f3; /* optional Skeleton */
  overflow:hidden;
  border-radius:12px;
}

.btn__content{
  display:flex;
  flex-direction:column;
  align-items: flex-end;
  text-align:left;
}

.btn__price{
  font-size: var(--fs-08-xl);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  white-space:nowrap;
}

.btn__sub{
  font-size: var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
  white-space:nowrap;
}

.btn--price {
  min-width: 140px;
  justify-content: space-between;
}

.btn--wide {
  width:100%;
  min-width:0;
  flex:1 1 100%;
}

.btn--with-badge{
  position: relative;
}

.btn-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d92d20;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none;
  color: #fff;
  font-size: var(--fs-02-2xs);
}

.btn-badge.is-hidden{
  display: none;
}

#sampleBtn.btn {
  position:relative;
}

.summary-overlay{
  position:absolute;
  inset:0;
  z-index:25;
  pointer-events:none;
}

.summary-overlay.summary-overlay--hud{
  display:block;
}

.summary-hud__tags{
  position:absolute;
  top:0;
  left:0;
  right:auto;
  bottom:auto;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
  padding: var(--pad-2);
  max-width:min(280px, 50vw);
  pointer-events:none;
}

@media (min-width: 992px) {
  .summary-hud__tags{
    top:0;
    left:50%;
    transform:translateX(-50%);
    align-items:center;
    max-width:min(360px, 42vw);
  }

  .summary-overlay--overview .summary-hud__tags{
    left:0;
    transform:none;
    align-items:flex-start;
  }

  .summary-overlay--overview .summary-hud-tag__glass{
    text-align:left;
  }
}

@media (max-width: 991.98px) {
  .summary-overlay--overview .summary-hud__tags{
    gap:var(--space-1);
    padding:var(--pad-1);
    max-width:min(13.75rem, 52vw);
  }

  .summary-overlay--overview .summary-hud-tag__glass{
    padding:2px 5px;
    gap:0;
  }

  .summary-overlay--overview .summary-hud-tag__title,
  .summary-overlay--overview .summary-hud-tag__value{
    font-size:var(--fs-01-3xs);
    line-height:var(--lh-tighter);
  }

  .summary-overlay--overview .summary-hud-tag__title{
    letter-spacing:0.03em;
  }
}

.summary-hud-tag{
  position:relative;
  left:auto;
  top:auto;
  max-width:100%;
  pointer-events:none;
  transition:opacity 0.2s ease;
}

.summary-hud-tag__glass{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255, 255, 255, 0.72);
  background:rgba(255, 255, 255, 0.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(15, 23, 42, 0.14);
  text-align:left;
}

@media (min-width: 992px) {
  .summary-hud-tag__glass{
    text-align:center;
  }
}

.summary-hud-tag__icon{
  display:none;
}

.summary-hud-tag__title{
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size: var(--fs-05-md);
  font-weight: var(--fw-semibold);
}

.summary-hud-tag__value{
  overflow-wrap:anywhere;
  font-size: var(--fs-04-sm);
  white-space:pre-line;
}

.summary-hud-tag--unset .summary-hud-tag__value{
  font-style:italic;
}

.summary-overlay--overview .summary-hud-tag--column{
  max-width:min(148px, calc(50vw - 20px));
  box-sizing:border-box;
}

.summary-overlay--overview .summary-hud-tag--column-left{
  max-width:min(148px, calc(50% - 18px));
}

.summary-overlay--overview .summary-hud-tag--column-right{
  max-width:min(148px, calc(50% - 18px));
}

.summary-overlay.summary-overlay--overview{
  overflow:hidden;
}

.summary-overview-hide-btn{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:30;
  width:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  pointer-events:auto;
}

.summary-overview-hide-btn > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  transform:translateY(-1px);
}

.summary-overview-hide-btn[hidden]{
  display:none !important;
}

.summary-overview-hide-btn:hover{
  border-color:rgba(31, 112, 173, 0.35);
  background:#fff;
}

.summary-overview-hide-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.summary-overview-hide-btn{
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  right:10px;
  width:38px;
  min-width:38px;
  min-height:38px;
}

.summary-overview-hide-btn > span{
}

@media (min-width: 48rem){
  .summary-overview-hide-btn{
    width:40px;
    min-width:40px;
    min-height:40px;
  }

  .summary-overview-hide-btn > span{
  }
}

.summary-overlay--overview .summary-hud-tag--column .summary-hud-tag__glass{
  box-shadow:0 6px 20px rgba(15, 23, 42, 0.12);
}

.summary-hud-tag--focus .summary-hud-tag__glass,
.summary-hud-tag.is-highlight .summary-hud-tag__glass{
  background:rgba(255, 255, 255, 0.96);
  box-shadow:0 10px 32px rgba(31, 112, 173, 0.18);
}

.summary-hud-tag.is-highlight .summary-hud-tag__glass{
  animation:summary-hud-pulse 0.65s ease;
}

@keyframes summary-hud-pulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}

.summary-hud__caption{
  position:absolute;
  left:50%;
  bottom:72px;
  z-index:4;
  transform:translateX(-50%);
  max-width:min(92vw, 720px);
  margin:0;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255, 255, 255, 0.65);
  background:rgba(15, 23, 42, 0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.28);
  pointer-events:none;
}

.summary-overlay--sheet-open .summary-hud__caption{
  display:none !important;
}

.summary-sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  pointer-events:auto;
}

.summary-sheet__bar{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:52px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border:0;
  border-top:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255, 255, 255, 0.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font:inherit;
  cursor:pointer;
  text-align:left;
  box-shadow:0 -8px 28px rgba(15, 23, 42, 0.08);
}

.summary-sheet__bar:hover{
  background:rgba(248, 250, 252, 0.98);
}

.summary-sheet__bar:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.summary-sheet__grab{
  flex:0 0 auto;
  width:36px;
  height:4px;
  border-radius:999px;
  background:rgba(15, 23, 42, 0.18);
}

.summary-sheet__bar-label{
  flex:0 0 auto;
}

.summary-sheet__bar-preview{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.summary-sheet__chevron{
  flex:0 0 auto;
  transition:transform 0.25s ease;
}

.summary-sheet.is-open .summary-sheet__chevron{
  transform:rotate(180deg);
}

.summary-sheet__panel{
  max-height:min(58vh, 480px);
  overflow:hidden;
  border-top:1px solid rgba(15, 23, 42, 0.06);
  background:rgba(255, 255, 255, 0.98);
}

.summary-sheet__head{
  padding:12px 16px 8px;
  border-bottom:1px solid rgba(15, 23, 42, 0.06);
}

.summary-sheet__title{
  margin:0;
}

.summary-sheet__progress{
  margin:4px 0 0;
}

.summary-sheet__list{
  max-height:calc(min(58vh, 480px) - 72px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.summary-sheet-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:12px;
  background:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.summary-sheet-row:hover{
  border-color:rgba(31, 112, 173, 0.35);
  background:rgba(31, 112, 173, 0.04);
}

.summary-sheet-row:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.summary-sheet-row__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(31, 112, 173, 0.1);
}

.summary-sheet-row--has-thumb .summary-sheet-row__icon{
  display:none;
}

.summary-sheet-row__media{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(15, 23, 42, 0.1);
}

.summary-sheet-row__media[hidden]{
  display:none !important;
}

.summary-sheet-row__thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.summary-sheet-row__body{
  flex:1 1 auto;
  min-width:0;
}

.summary-sheet-row__title{
  display:block;
  margin-bottom:3px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.summary-sheet-row__values span{
  display:block;
}

.summary-sheet-row__values span:first-child{
}

.summary-sheet-row__values span:empty{
  display:none;
}

.summary-sheet-row--unset .summary-sheet-row__values span:first-child{
  font-style:italic;
}

.summary-sheet-row__idx{
  flex:0 0 auto;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  text-align:center;
}

.summary-sheet-row__idx:empty{
  display:none;
}

/* mobile-first summary hud sizing */
#summaryOverlay .summary-hud__caption{
}

#summaryOverlay .summary-hud__tags{
}

@media (min-width: 48rem) {
  #summaryOverlay .summary-hud__caption{
  }

  #summaryOverlay .summary-hud__tags{
  }
}

.summary-hud-tag__glass{
  padding:3px 6px;
  border-radius:8px;
  gap:1px;
}

.summary-hud-tag__title{
  letter-spacing:0.04em;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-semibold);
}

  .summary-hud-tag__value{
    font-size:var(--fs-02-2xs);
    white-space:pre-line;
  }

.summary-sheet__bar{
  min-height:48px;
  padding-left:12px;
  padding-right:12px;
}

.summary-sheet__grab{
  width:28px;
}

@media (min-width: 48rem) {
  .summary-hud-tag{
    max-width:none;
  }

  .summary-hud-tag__glass{
    padding:6px 10px;
    border-radius:10px;
    gap:2px;
  }

  .summary-hud-tag__title{
    letter-spacing:0.03em;
    font-size:var(--fs-05-md);
  }

  .summary-hud-tag__value{
    font-size:var(--fs-04-sm);
    white-space:pre-line;
  }

  .summary-sheet__bar{
    min-height:56px;
    padding-left:16px;
    padding-right:16px;
  }

  .summary-sheet__grab{
    width:36px;
  }
}

#feetMiddleToggle{
  display:none !important;
}

#summaryOverlay{
  display:none;
}

#summaryOverlay.is-active.summary-overlay--hud,
body.cart-summary-active #summaryOverlay.summary-overlay--hud{
  display:block;
}

#cartModal{
  display:none;
}

#cartTotal{
  margin-right:auto;
  font-size:var(--fs-06-base);
  font-weight:var(--fw-bold);
  line-height:var(--lh-loose);
}

body.cart-summary-active #priceMobile {
  margin-left: 0px;
}

.done-headline {
  display: block;
  margin-bottom: 12px;
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-05-md);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.08);
}

.done-headline__text {
  display: block;
}

#done .done-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
}

.done-rating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}

.done-rating-row[hidden] {
  display: none !important;
}

.done-stars {
  position: relative;
  display: inline-block;
  font-size:var(--fs-08-xl);
  line-height:var(--lh-tight);
  letter-spacing: 0.12em;
  user-select: none;
}

.done-stars__bg {
}

.done-stars__fgwrap {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
}

.done-stars__fg {
  display: block;
  color: var(--warn);
}

.done-rating-meta {
  font-size: var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

#done .done-delivery {
  margin: 0;
  font-size: var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

#done .done-delivery[hidden] {
  display: none !important;
}

/* mobile-first done-meta spacing */
#done .done-headline {
  padding: 7px 9px;
  margin-bottom: 8px;
}

#done .done-summary-meta {
  gap: 2px;
  margin: 0 0 6px;
}

#done #payment-btn-top {
  margin-top: 0;
}

@media (min-width: 48rem) {
  #done .done-headline {
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  #done .done-summary-meta {
    gap: 4px;
    margin: 0 0 8px;
  }
}

#btnOpenSummaryDone {
  width: 100%;
}

#btnOpenSamplesDone[hidden] {
  display: none !important;
}

#done .features-block,
#done .contact-block{
  margin-top:var(--space-3);
}

#done .features-block .features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap:var(--space-1) var(--space-3);
  flex:none;
  width:100%;
  min-width:0;
  padding-left:0;
}

#done .features-block .features li{
  margin-bottom:0;
}

/* Kontakt-Panel (#done, #contactModal – nur innerhalb .contact-options) */
.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  min-width: 0;
  padding: 0;
  container-type: inline-size;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

#contactModal .contact-block {
  min-width: 0;
}

.contact-options .contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-2) var(--pad-1);
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  position: relative;
  transition: background 0.12s ease;
}

.contact-options button.contact-card {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
}

.contact-options .contact-card:hover {
  background: rgba(255, 255, 255, 0.92);
}

.contact-options .contact-card.is-loading {
  pointer-events: none;
  cursor: progress;
}

.contact-options .contact-card.is-loading::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid rgba(15, 23, 42, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: contactCardSpinner 0.7s linear infinite;
}

@keyframes contactCardSpinner {
  to {
    transform: rotate(360deg);
  }
}

.contact-options .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.contact-options .contact-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.92;
}

.contact-options .contact-card > :not(.contact-icon) {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.contact-options .contact-title {
  font-size: var(--fs-03-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.contact-options .contact-text {
  font-size: var(--fs-03-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-options .contact-time {
  font-size: var(--fs-03-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-regular);
  color: var(--muted);
}

.contact-options .contact-time:empty {
  display: none;
}

/* Genug Breite im Panel → eine Zeile */
@container (min-width: 22rem) {
  #done .contact-options,
  #contactModal .contact-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  #done .contact-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.contact-block,
.payment-block,
.features-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

/* Titel + optionaler Kurz-Hinweis (mehrfach nutzbar, z. B. Bezahlarten, Topper-Beratung) */
.block-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.block-heading__title {
  font-size: var(--fs-05-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.block-heading__hint {
  font-size: var(--fs-03-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--muted);
}

.payment-icons-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Logo-Größen: Bezahlarten (Fertig) + FAQ-Zahlungsblock */
.payment-icons,
.ms-faq__pay-list {
  --pay-logo-h: 2.125rem;
  --pay-logo-max-w: 5.5rem;
}

.payment-icons{
  display:flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.pay-item{
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: calc(var(--pay-logo-h) + 8px);
  padding: 4px;
  margin: -4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pay-item:hover{
  opacity: 0.8;
  transform: scale(1.04);
}

.pay-item:focus-visible {
  outline: 2px solid var(--accent, #1f70ad);
  outline-offset: 2px;
}

.pay-item img{
  display: block;
  width: auto;
  height: var(--pay-logo-h);
  max-width: var(--pay-logo-max-w);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Tooltip — über der Icon-Zeile, am Wrapper ausgerichtet */
.payment-tooltip{
  position:absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 10px;
  transform: translateX(-50%) translateY(4px);
  background: var(--accent);
  padding: 12px 16px;
  border-radius: 12px;
  max-width: min(20rem, calc(100vw - 2rem));
  text-align: center;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22);
  opacity:0;
  visibility: hidden;
  pointer-events:none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
  color: #fff;
}

.payment-tooltip.is-active{
  opacity:1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 576px) {
  .payment-icons,
  .ms-faq__pay-list {
    --pay-logo-h: 2.375rem;
    --pay-logo-max-w: 6.25rem;
  }

  .payment-icons {
    gap: 14px 20px;
  }
}

@media (min-width: 768px) {
  .payment-icons,
  .ms-faq__pay-list {
    --pay-logo-h: 2.5rem;
    --pay-logo-max-w: 6.5rem;
  }
}

@media (min-width: 992px) {
  .payment-icons,
  .ms-faq__pay-list {
    --pay-logo-h: 2.625rem;
    --pay-logo-max-w: 6.75rem;
  }

  .payment-icons {
    gap: 12px 14px;
  }
}

@media (min-width: 1200px) {
  .payment-icons {
    flex-wrap: nowrap;
    gap: var(--space-2);
    --pay-logo-h: 2.125rem;
    --pay-logo-max-w: 100%;
  }

  .payment-icons .pay-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .payment-icons .pay-item img {
    max-width: 100%;
    margin-inline: auto;
  }
}

.clean-link {
  text-decoration: none;
  transition: color 0.15s ease;
}

.clean-link:hover {
  text-decoration: underline;
}

.share-options {
  display: grid;
  gap: 10px;
}

.share-option {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.share-option:hover {
  border-color: var(--accent);
  background: rgba(31,112,173,.04);
}

.share-option__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  flex: 0 0 auto;
}

.share-option strong,
.share-option small {
  display: block;
}

.share-option small {
  margin-top: 2px;
}

.share-option--wa .share-option__icon {
}

.share-option--copy .share-option__icon {
}

.share-option.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.share-options-msg {
  margin: 10px 0 0;
  text-align: center;
}

.share-options-msg.is-success {
}

.share-options-msg.is-error {
}

.contact-options-msg {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--fs-04-sm);
  line-height: var(--lh-normal);
}

.contact-options-msg.is-error {
  color:var(--bad);
  font-weight:var(--fw-medium);
  padding:var(--pad-1) var(--pad-2);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--bad) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--bad) 32%, transparent);
}

.share-email-panel {
  margin-top: 14px;
}

.share-email-panel .btn {
  width: 100%;
  margin-top: 10px;
}

.ms-faq {
  padding: 46px 16px;
  background: #f7f8fb;
  font-family: inherit;
}

.ms-faq * {
  box-sizing: border-box;
}

.ms-faq__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.ms-faq__side h2 {
  margin: 0 0 16px;
}

.ms-faq__side p {
  margin: 0 0 24px;
}

.ms-faq__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  width: 100%;
  border-radius: 5px;
  background: #262626;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.ms-faq__btn:hover {
  background: #111;
  transform: translateY(-1px);
}

.ms-faq__contact {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.ms-faq__contact a {
  display: block;
  text-decoration: none;
}

.ms-faq__contact a:hover {
  text-decoration: underline;
}

.ms-faq__contact span {
  display: block;
  margin-top: 5px;
}

.ms-faq__search {
  margin-bottom: 18px;
}

.ms-faq__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ms-faq__search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.ms-faq__search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 14px;
  border: 1px solid #d6d8dc;
  border-radius: 5px;
  background: #fff;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ms-faq__search-input::placeholder {
}

.ms-faq__search-input:focus {
  outline: none;
  border-color: rgba(31, 112, 173, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 112, 173, 0.12);
}

.ms-faq__search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #eef1f5;
  cursor: pointer;
}

.ms-faq__search-clear:hover {
  background: #e2e7ee;
}

.ms-faq__search-status {
  margin: 8px 0 0;
}

.ms-faq__main.is-searching .ms-faq__tabs {
  display: none;
}

.ms-faq__main.is-searching .ms-faq__panel.is-active::before {
  content: attr(data-faq-label);
  display: block;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ms-faq__main.is-searching .ms-faq__panel.is-active + .ms-faq__panel.is-active::before {
  margin-top: 18px;
}

.ms-faq__main.is-searching .ms-faq__panel {
  display: none;
}

.ms-faq__main.is-searching .ms-faq__panel.is-active {
  display: block;
}

.ms-faq__item.is-hidden {
  display: none;
}

/* FAQ-Tab-Leiste: gleiche Pill-Tabs wie .step-tab-nav / Stoff-Subtabs (.tab.sub-tab.btn) */
.ms-faq__tabs {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding: var(--pad-block-md);
  margin-bottom: var(--space-4);
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.ms-faq__tabs::-webkit-scrollbar {
  display: none;
}

.ms-faq__tabs .tab {
  flex:0 0 auto;
  max-width:none;
  scroll-snap-align:center;
  touch-action:pan-x;
}

@media (max-width: 575.98px) {
  .ms-faq__tabs {
    gap:var(--space-1);
    padding-inline:var(--space-2);
  }

  .ms-faq__tabs .tab.sub-tab {
    padding-inline:var(--pad-2);
  }
}

.ms-faq__panel {
  display: none;
}

.ms-faq__panel.is-active {
  display: block;
}

.ms-faq__item {
  background: #fff;
  border: 1px solid #d6d8dc;
  border-radius: 5px;
  margin-bottom: 9px;
  overflow: hidden;
}

.ms-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 48px 15px 18px;
  position: relative;
}

.ms-faq__item summary::-webkit-details-marker {
  display: none;
}

.ms-faq__item summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease;
}

.ms-faq__item[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.ms-faq__item > div {
  padding: 0 18px 18px;
}

.ms-faq__item p {
  margin: 0 0 12px;
}

.ms-faq__item p:last-child {
  margin-bottom: 0;
}

.ms-faq__item ul {
  margin: 10px 0 0 20px;
  padding: 0;
}

.ms-faq__item li {
  margin: 5px 0;
}

.ms-faq__pay-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ms-faq__pay {
  margin: 0;
}

.ms-faq__pay-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
}

.ms-faq__pay-logo {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.ms-faq__pay-logo img {
  display: block;
  width: auto;
  height: var(--pay-logo-h);
  max-width: var(--pay-logo-max-w);
  object-fit: contain;
  object-position: left center;
}

.ms-faq__pay-title {
  margin: 0;
}

.ms-faq__pay > p {
  margin: 0;
}

@media (min-width: 768px) {
  .ms-faq {
    padding: 72px 20px;
  }

  .ms-faq__wrap {
    grid-template-columns: 300px 1fr;
    gap: 54px;
  }

  .ms-faq__side h2 {
  }

  .ms-faq__btn {
    width: auto;
  }

}


#contactFaqSlot,
.ms-faq__main {
  min-width:0;
  max-width:100%;
}

#openFaqBtn[hidden],
#openFaqModal[hidden] {
  display: none !important;
}

#contactModal.faq-open .contact-block > .block-heading {
  display: none;
}

#contactModal.faq-open .contact-options .contact-card:not(#openFaqBtn) {
  display: none;
}

#contactModal.faq-open .contact-options {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-2);
}

#contactModal.faq-open #openFaqBtn .contact-icon,
#contactModal.faq-open #openFaqBtn .contact-title {
  display: none;
}

#contactModal.faq-open #openFaqBtn {
  flex-direction: row;
  justify-content: center;
  min-height: auto;
  padding: var(--pad-inline-md);
}

#contactModal.faq-open #openFaqBtn .contact-text {
  font-size: var(--fs-04-sm);
  font-weight: var(--fw-medium);
}

#faqModal.faq-open .ms-modal__dialog,
#contactModal.faq-open .ms-modal__dialog {
  min-height: 90dvh;
}

.sticky-step-nav {
  display: none;
  gap: var(--space-2);
  width: 100%;
  min-width:0;
  justify-content:space-between;
}

/* vorerst ausgeblendet
@media (min-width: 992px) {
  .sticky-step-nav {
    display: flex;
    align-items:stretch;
  }
}
*/

#stepNavPrev,
#stepNavNext {
  flex:0 0 6.5rem;
  width:6.5rem;
  min-width:6.5rem;
  max-width:6.5rem;
  min-height:var(--btn-h);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sheet-price {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-1);
  width:100%;
  min-width:0;
}

.sheet-price__summary {
  display:flex;
  align-items: flex-end;
  justify-content:space-between;
  gap:var(--space-2);
  width:100%;
}

.sheet-price__label {
  font-size:var(--fs-07-lg);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-regular);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.sheet-price__amount-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sheet-price__loader {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid rgba(15, 23, 42, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: contactCardSpinner 0.7s linear infinite;
}

.sheet-price__loader[hidden] {
  display: none;
}

.sheet-price__amount {
  font-size:var(--fs-08-xl);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  white-space:nowrap;
}

.sheet-price__hint {
  margin:0;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-regular);
  line-height:var(--lh-regular);
  color:var(--muted);
}

.sheet-price > #cartDesktop,
.sheet-price > #payment-btn-footer,
.sheet-price > #priceInquiryDesktop {
  display:none;
  width:100%;
  min-width:0;
  min-height:var(--btn-h);
}

body:not(.is-boot-loading):not(.asm-price-inquiry-active) .sheet-price > #cartDesktop {
  display:inline-flex;
}

body:not(.is-boot-loading):not(.asm-price-inquiry-active) .sheet-price > #payment-btn-footer:not([hidden]) {
  display:inline-flex;
}

/* Mobile (Portrait): Kasse-Button im #done-Inhalt; Desktop/2-Spalten: nur im Footer */
#done #payment-btn-bottom[hidden] {
  display:none !important;
}

@media (orientation: landscape) and (max-width: 1199.98px),
       (min-width: 1200px) {
  #done #payment-btn-bottom {
    display:none !important;
  }
}

body:not(.is-boot-loading).asm-price-inquiry-active .sheet-price > #priceInquiryDesktop {
  display:inline-flex;
}

.price-extra.btn__price {
    white-space: nowrap;
  }

.info-stats,
.fabric-stats {
  margin:2px 0 0;
  padding:0;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15, 23, 42, 0.10);
  overflow:hidden;
}

.info-stats__title,
.fabric-stats__title {
  margin:0;
}

.info-stat + .info-stat,
.fabric-stat + .fabric-stat {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.info-stat__head,
.fabric-stat__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding:8px 12px 0;
}

.info-stat__name-row,
.fabric-stat__name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.info-stat__name,
.fabric-stat__name {
  font-size:var(--fs-05-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-relaxed);
}

/* Info-Button neben dem Merkmalsnamen (kein Kachel-Layout wie in .opt) */
#infoModal .info-stat__info.opt-info-btn,
.info-stat .info-stat__info.opt-info-btn,
#infoModal .fabric-stat__info.opt-info-btn,
.fabric-stat .fabric-stat__info.opt-info-btn {
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  left: auto;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  transform: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

#infoModal .info-stat__info.opt-info-btn:hover,
.info-stat .info-stat__info.opt-info-btn:hover,
#infoModal .fabric-stat__info.opt-info-btn:hover,
.fabric-stat .fabric-stat__info.opt-info-btn:hover {
  transform: scale(1.05);
}

/* Über #infoModal (calc(ms-modal-z + 20)), Tooltip hängt an body */
.info-stat-help,
.fabric-stat-help {
  position: fixed;
  z-index: calc(var(--ms-modal-z) + 40);
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.info-stat__value,
.fabric-stat__value {
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
  opacity: .75;
  white-space: nowrap;
}

.info-stat__bar,
.fabric-stat__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  margin:0 12px;
}

.info-stat__fill,
.fabric-stat__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #222);
}

.info-stat__marker,
.fabric-stat__marker {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent, #222);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.info-stat__meta,
.fabric-stat__meta {
  margin:4px 12px 8px;
  font-size:var(--fs-02-2xs);
  font-weight:var(--fw-regular);
  line-height:var(--lh-regular);
  opacity: .7;
}

body.asm-price-inquiry-active #cartMobile {
  display: none !important;
}

body.asm-price-inquiry-active #priceInquiryMobile {
  display: inline-flex !important;
}

body:not(.asm-price-inquiry-active) #priceInquiryMobile {
  display: none !important;
}

body.asm-price-inquiry-active [data-step="done"],
body.asm-price-inquiry-active #done {
  display: none !important;
}

#stepNavPrev.is-disabled,
#stepNavNext.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================
   Komponenten-Typo (var(--fs-*), var(--lh-*), var(--fw-*))
   ========================= */
.btn--primary{
  color:var(--btn-primary-color);
}

.btn--primary:hover{
  color:#000;
}

.btn--primary.is-selected{
  color:#fff;
}

.ms-field label{
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
}

.ms-field input,
.ms-field select,
.ms-field textarea{
  font-size:var(--fs-06-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-loose);
}

.app-boot-loader__perks li::before{
  font-weight:var(--fw-bold);
  color:var(--accent);
}

.ms-faq__side h2{
  font-size:var(--fs-10-3xl);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tighter);
}

.ms-faq__side p{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

.ms-faq__btn{
  color:#fff;
}

.ms-faq__contact a{
  color:var(--accent);
}

.ms-faq__contact span{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

.ms-faq__search-input{
  font-size:var(--fs-06-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-loose);
}

.ms-faq__search-input::placeholder{
  color:var(--muted);
}

.ms-faq__search-clear{
  font-size:var(--fs-04-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
}

.ms-faq__search-status{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
  color:var(--muted);
}

.ms-faq__main.is-searching .ms-faq__panel.is-active::before{
  font-size:var(--fs-03-xs);
  font-weight:var(--fw-medium);
  line-height:var(--lh-snug);
  color:var(--muted);
}

.ms-faq__item summary{
  font-size:var(--fs-06-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-loose);
}

.ms-faq__item p,
.ms-faq__item li{
  font-size:var(--fs-05-md);
  font-weight:var(--fw-regular);
  line-height:var(--lh-relaxed);
}

/* Marketing / HQ-Screenshots: Viewer ohne UI-Chrome */
body.asm-marketing-capture .sheet,
body.asm-marketing-capture .legal,
body.asm-marketing-capture #controlsOverlay,
body.asm-marketing-capture .viewer-logo,
body.asm-marketing-capture .hotspot-layer,
body.asm-marketing-capture #measureOverlay,
body.asm-marketing-capture #summaryOverlay,
body.asm-marketing-capture .measure-figure-height-tag{
  visibility:hidden !important;
  pointer-events:none !important;
}

body.asm-marketing-demo-active .app-boot-loader{
  display:none !important;
}