/* VERM.Moto im DocuNorm-Design ("Lumen")
   Farben: #3b0f45 (tiefes Lila) · #7a146f (Magenta) · #cc1d77 (Pink) · Verlauf bis #ef4b6e
   Zum Zurückschalten auf Schwarz/Weiß: den <link> auf diese Datei in index.html entfernen. */

:root {
  --dn-deep: #3b0f45;
  --dn-mag: #7a146f;
  --dn-pink: #cc1d77;
  --dn-rose: #ef4b6e;
  --dn-text: #2a1233;
  --dn-muted: #7d6489;
  --dn-bg: #faf6fb;
  --dn-bg-2: #f3eaf5;
  --dn-soft: #f6eef8;
  --dn-line: #eadcee;
  --dn-grad: linear-gradient(90deg, #4a0f5a, #7a146f 35%, #cf2c85 75%, #ef4b6e);
  --dn-btn: linear-gradient(135deg, #7a146f, #3b0f45);
  --dn-btn-hot: linear-gradient(135deg, #cf2c85, #ef4b6e);
  --dn-shadow: 0 1px 2px rgba(122, 20, 111, .05), 0 8px 20px rgba(122, 20, 111, .07);
  --dn-shadow-lg: 0 2px 4px rgba(122, 20, 111, .06), 0 18px 40px rgba(122, 20, 111, .12);

  --paper: var(--dn-bg);
  --concrete: var(--dn-bg-2);
  --night: #ffffff;
  --night-2: var(--dn-soft);
  --smoke: var(--dn-muted);
  --ink: var(--dn-deep);
  --steel: var(--dn-muted);
  --line: var(--dn-line);
  --plate: #ffffff;
  --ok: #3b0f45;
  --err: #cc1d77;
  --wide: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--dn-bg); color: var(--dn-text); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--dn-pink); outline-offset: 2px; }
::selection { background: #f7d3e6; color: var(--dn-deep); }

/* Überschriften: Verlauf wie im DocuNorm-Seitenkopf */
h1, h2, h3, .panel-title, .band h2, .lookbook h2 {
  font-stretch: 100%; font-style: normal; text-transform: none; font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  background: var(--dn-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.band h2, .lookbook h2 { font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 30px; }

/* ------------------------------------------------------------ Kopfzeile */
.top { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); color: var(--dn-text); border-bottom: 1px solid var(--dn-line); box-shadow: 0 1px 0 rgba(122, 20, 111, .03); }
.top-logo { display: inline-block; background: var(--dn-grad); -webkit-mask: url("../img/verm-moto-logo.png") left center / contain no-repeat; mask: url("../img/verm-moto-logo.png") left center / contain no-repeat; }
.top-logo img { filter: none; opacity: 0; }
.top-nav a { color: var(--dn-deep); font-weight: 650; }
.top-nav a:hover { color: var(--dn-pink); text-decoration: none; }
.top-cart { background: var(--dn-btn); color: #fff; box-shadow: var(--dn-shadow); }
.top-cart-count { background: #fff; color: var(--dn-mag); font-stretch: 100%; }

/* ------------------------------------------------------------ 3D-Bühne */
.studio { background: var(--dn-bg); }
.stage { color: var(--dn-text); background:
  radial-gradient(ellipse 40% 48% at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 72%),
  radial-gradient(ellipse 60% 30% at 50% 100%, rgba(204, 29, 119, .10) 0%, rgba(204, 29, 119, 0) 70%),
  linear-gradient(180deg, #f8f1fa 0%, #f1e5f4 62%, #ead9ef 63%, #f3e8f6 100%); }
.stage::after { opacity: .08; mix-blend-mode: multiply; }
.stage-number { -webkit-text-stroke: 2px rgba(122, 20, 111, .10); }
.stage-hint, .stage-loading { color: var(--dn-muted); }
.stage-loading-bar, .stage-work-bar { background: rgba(122, 20, 111, .14); border-radius: 99px; }
.stage-loading-bar i, .stage-work-bar i { background: var(--dn-btn-hot); border-radius: 99px; }
.stage-views button, .stage-save { background: rgba(255, 255, 255, .88); color: var(--dn-deep); border: 1px solid rgba(122, 20, 111, .16); box-shadow: var(--dn-shadow); font-weight: 650; }
.stage-views button:hover, .stage-save:hover { background: #fff; border-color: #e9a8cf; }
.stage-views button.is-on, .stage-views .toggle-btn[aria-pressed=true] { background: var(--dn-mag); color: #fff; border-color: var(--dn-mag); }
.stage-work-inner { background: #fff; border: 1px solid var(--dn-line); color: var(--dn-text); border-radius: 18px; box-shadow: var(--dn-shadow-lg); }
.stage-work-inner strong { color: var(--dn-deep); }
.stage-work-inner span { color: var(--dn-muted); }
.stage-drop { border-color: rgba(204, 29, 119, .6); background: rgba(250, 246, 251, .6); }
.stage-drop span { background: var(--dn-btn); color: #fff; }

/* Start-Intro */
.hero-kicker { color: var(--dn-pink); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; font-weight: 800; }
.hero-title { font-style: normal; text-transform: none; font-stretch: 100%; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-size: clamp(48px, 6.6vw, 104px); }
.hero-title span { background: var(--dn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero-outline { -webkit-text-stroke: 0; opacity: .9; }
.hero-sub { color: var(--dn-muted); }

/* ------------------------------------------------------------ Buttons */
.btn { border-radius: 14px; font-stretch: 100%; }
.btn-go { background: var(--dn-btn); color: #fff; box-shadow: 0 6px 16px rgba(122, 20, 111, .22); }
.btn-go:hover:not(:disabled) { filter: brightness(1.08); }
.btn-go:disabled { background: #e7dcea; color: #a796ad; box-shadow: none; }
.btn-plate { background: var(--dn-btn-hot); color: #fff; clip-path: none; border-radius: 14px; font-stretch: 100%; font-weight: 800; box-shadow: 0 10px 24px rgba(204, 29, 119, .28); }
.btn-ghost { background: #fff; color: var(--dn-mag); border: 1px solid rgba(122, 20, 111, .18); border-radius: 14px; box-shadow: var(--dn-shadow); }
.btn-line { border: 1.5px solid rgba(122, 20, 111, .3); color: var(--dn-mag); background: #fff; }
.btn-line:hover { border-color: var(--dn-pink); color: var(--dn-pink); }

/* ------------------------------------------------------------ Seitenleiste / Schritte */
.panel { background: #fff; border-left: 1px solid var(--dn-line); }
.panel-title { font-size: 34px; }
.steps { border-top-color: var(--dn-line); }
.step { border-bottom-color: var(--dn-line); }
.step-n { background: var(--dn-soft); color: var(--dn-mag); clip-path: none; border-radius: 10px; width: 30px; height: 30px; font-style: normal; font-stretch: 100%; font-weight: 800; }
.step.is-open .step-n { background: var(--dn-btn); color: #fff; }
.step-t { color: var(--dn-deep); font-stretch: 100%; }
.step-v { color: var(--dn-muted); }

/* Karten & Auswahlfelder */
.product, .preset, .concept, .logo-row, .cart-item, .variant, .font, .motif, .drop, .ref-add, .palette {
  border: 1px solid rgba(122, 20, 111, .14); border-radius: 16px; background: #fff; box-shadow: var(--dn-shadow);
}
.product:hover, .preset:hover, .concept:hover, .variant:hover, .font:hover, .palette:hover { border-color: #e9a8cf; }
.product:has(input:checked), .preset[aria-checked=true], .concept.is-on, .variant.is-on, .font.is-on, .font[aria-checked=true], .palette.is-on, .logo-row.is-sel {
  border-color: var(--dn-pink); box-shadow: 0 0 0 2px rgba(204, 29, 119, .25), var(--dn-shadow);
}
.product-name, .concept strong { color: var(--dn-deep); font-stretch: 100%; }
.product-sub, .product-price, .concept p { color: var(--dn-muted); }
.concept-thumb { border-radius: 12px; background: var(--dn-soft); }
.concept-thumb.is-wait { background: linear-gradient(110deg, #f3e9f4 30%, #fbf6fc 50%, #f3e9f4 70%); background-size: 200% 100%; }
.analysis { border-left-color: var(--dn-pink); background: var(--dn-soft); border-radius: 0 14px 14px 0; padding: 10px 14px; }
.analysis-h { color: var(--dn-pink); font-size: 11px; letter-spacing: .08em; font-weight: 800; }
.analysis p { color: var(--dn-text); }
.switch { background: var(--dn-soft); border-radius: 14px; }
.switch button[aria-selected=true], .switch .is-on, .switch [aria-checked=true] { background: #fff; color: var(--dn-mag); box-shadow: var(--dn-shadow); border-radius: 11px; }
.chip { border: 1px solid rgba(122, 20, 111, .16); color: var(--dn-mag); background: #fff; }
.chip:hover { border-color: #e9a8cf; }
.chip.is-on, .chip[aria-pressed=true] { background: var(--dn-mag); color: #fff; border-color: var(--dn-mag); }
.toggle span { border-radius: 999px; border-color: rgba(122, 20, 111, .16); color: var(--dn-mag); background: #fff; }
.toggle input:checked + span { background: var(--dn-mag); color: #fff; border-color: var(--dn-mag); }
.palette { border-radius: 999px; padding: 3px; }
.variant { border-radius: 12px; }
.font { border-radius: 12px; }
.drop, .ref-add { border-style: dashed; border-color: rgba(204, 29, 119, .35); background: var(--dn-bg); box-shadow: none; }
body.is-dragging label.drop { border-color: var(--dn-pink); background: #fff; }
.field input, .field select, .field textarea, input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  border-color: rgba(122, 20, 111, .2); border-radius: 12px; background: #fff; color: var(--dn-text);
}
.field input:focus, .field select:focus, .field textarea:focus, select:focus, textarea:focus, input:focus { border-color: var(--dn-pink); outline: none; box-shadow: 0 0 0 3px rgba(204, 29, 119, .15); }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--dn-mag); }
.check { color: var(--dn-muted); }
.note { color: var(--dn-muted); }
.status.ok, .status.is-ok { color: var(--dn-deep); }
.status.error, .status.is-error { color: var(--dn-pink); }
.colors { border-top-color: var(--dn-line); }

/* Preis + Anfrage unten */
.buy { border-top-color: var(--dn-line); background: #fff; box-shadow: 0 -8px 20px rgba(122, 20, 111, .05); }
.plate { background: var(--dn-soft); color: var(--dn-deep); clip-path: none; border-radius: 14px; padding: 7px 16px; }
.plate-price { font-style: normal; font-stretch: 100%; font-weight: 800; color: var(--dn-mag); }
.plate-sub { color: var(--dn-muted); }
.btn-buy { clip-path: none; border-radius: 14px; }

/* ------------------------------------------------------------ Bänder unten */
.ticker { background: #fff; border-block: 1px solid var(--dn-line); }
.ticker span { font-style: normal; font-stretch: 100%; font-weight: 800; text-transform: none; letter-spacing: -.02em; background: var(--dn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticker span:nth-child(even) { background: none; color: transparent; -webkit-text-stroke: 1.5px var(--dn-pink); }
.ticker span::after { color: var(--dn-pink); -webkit-text-stroke: 0; }

.lookbook { background: var(--dn-bg-2); color: var(--dn-text); }
.lookbook-head p { color: var(--dn-muted); }
.look { clip-path: none; border-radius: 20px; background: #fff; box-shadow: var(--dn-shadow-lg); color: var(--dn-text); }
.look-meta { background: linear-gradient(0deg, rgba(255, 255, 255, .96) 30%, rgba(255, 255, 255, 0)); }
.look-meta strong { font-style: normal; font-stretch: 100%; text-transform: none; color: var(--dn-deep); font-weight: 800; }
.look-meta span { color: var(--dn-muted); }
.look-skel { background: linear-gradient(90deg, #f3e9f4, #fbf6fc, #f3e9f4); background-size: 200% 100%; }

.flow li { background: #fff; border: 1px solid rgba(122, 20, 111, .12); border-radius: 18px; padding: 22px 22px 24px; box-shadow: var(--dn-shadow); }
.flow li::before { -webkit-text-stroke: 0; font: 800 44px/1 var(--wide); background: var(--dn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background-color: var(--dn-soft); margin-bottom: 14px; }
.flow h3 { font-size: 20px; }
.flow p { color: var(--dn-muted); }

.band-prices { background: var(--dn-bg); color: var(--dn-text); }
.price-item { clip-path: none; border-radius: 20px; border: 1px solid rgba(122, 20, 111, .12); box-shadow: var(--dn-shadow); color: var(--dn-text); }
.price-big { font-style: normal; font-stretch: 100%; font-weight: 800; color: var(--dn-mag); }
.price-item-combo { background: var(--dn-btn); color: #fff; outline: 0; box-shadow: var(--dn-shadow-lg); }
.price-item-combo .price-big, .price-item-combo h3, .price-item-combo p, .price-item-combo li { color: #fff; background: none; -webkit-text-fill-color: #fff; }

.faq { border-top: 1px solid var(--dn-line); }
.faq details { border-bottom-color: var(--dn-line); }
.faq summary { color: var(--dn-deep); }
.faq summary::after { color: var(--dn-pink); }
.faq p { color: var(--dn-muted); }

.foot { background: linear-gradient(135deg, #3b0f45, #7a146f 70%, #a8166b); color: #fff; }
.foot img { filter: brightness(0) invert(1); }
.foot-claim { font-style: normal; font-stretch: 100%; text-transform: none; font-weight: 800; letter-spacing: -.03em; color: #fff !important; }
.foot p, .foot a { color: rgba(255, 255, 255, .78); }
.foot a:hover { color: #fff; }

/* Anfrage-Fenster & Hinweise */
.drawer-back { background: rgba(42, 18, 51, .35); }
.drawer-panel { border-radius: 22px 0 0 22px; box-shadow: -10px 0 40px rgba(122, 20, 111, .15); }
.drawer-head { border-bottom-color: var(--dn-line); }
.toast { background: var(--dn-btn); border-radius: 14px; box-shadow: var(--dn-shadow-lg); }

/* Rechtstexte */
.legal h1, .legal h2 { margin-bottom: 14px; }
.legal { color: var(--dn-text); }

@media (max-width: 860px) {
  .drawer-panel { border-radius: 0; }
  .hero-title { font-size: clamp(40px, 12vw, 64px); }
  .hero { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(122, 20, 111, .12); border-radius: 22px; padding: 18px 18px 20px; box-shadow: var(--dn-shadow-lg); bottom: 24px; }
  .hero-sub { margin: 12px 0 16px; font-size: 16px; }
}

/* Anleitung im DocuNorm-Stil */
.stage-help { background: rgba(255, 255, 255, .9); color: var(--dn-deep); border: 1px solid rgba(122, 20, 111, .16); box-shadow: var(--dn-shadow); }
.stage-help span { background: var(--dn-btn-hot); color: #fff; }
.tour-spot { box-shadow: 0 0 0 9999px rgba(42, 18, 51, .55), 0 0 0 3px #f7c4df inset; }
.tour-card { color: var(--dn-text); box-shadow: 0 24px 60px rgba(59, 15, 69, .28); border: 1px solid rgba(122, 20, 111, .1); }
.tour-icon { background: var(--dn-soft); }
.tour-count { color: var(--dn-pink); }
.tour-title { background: var(--dn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour-text { color: var(--dn-muted); }
.tour-dots i { background: #ead8ee; }
.tour-dots i.on { background: var(--dn-btn-hot); }
.tour-skip, .tour-back { color: var(--dn-muted); }
.tour-skip:hover, .tour-back:hover { color: var(--dn-mag); }

/* Geführter Ablauf im DocuNorm-Stil */
.wiz-count { color: var(--dn-pink); }
.wiz-mode, .wiz-guided-link { color: var(--dn-muted); }
.wiz-mode:hover, .wiz-guided-link:hover { color: var(--dn-mag); }
.wiz-progress i { background: #eadcee; }
.wiz-progress li.done i { background: #c99acb; }
.wiz-progress li.on i { background: var(--dn-btn-hot); }
.wiz-progress li { color: var(--dn-muted); }
.wiz-progress li.on span { color: var(--dn-mag); }
.wiz-help { color: var(--dn-muted); }
.wiz-card { border: 1px solid rgba(122, 20, 111, .14); box-shadow: var(--dn-shadow); }
.wiz-card:hover { border-color: #e9a8cf; }
.wiz-card.is-on { border-color: var(--dn-pink); box-shadow: 0 0 0 2px rgba(204, 29, 119, .25), var(--dn-shadow); }
.wiz-card-ico { background: var(--dn-soft); }
.wiz-card-ico svg { stroke: var(--dn-mag); }
.wiz-card strong { color: var(--dn-deep); }
.wiz-card small { color: var(--dn-muted); }
.wiz-morebtn { border-color: rgba(204, 29, 119, .35); color: var(--dn-mag); }
.wiz-morebtn:hover { background: var(--dn-soft); }
body.guided .wiz-next { background: var(--dn-btn-hot); box-shadow: 0 8px 20px rgba(204, 29, 119, .28); }
.look-sm { border-radius: 14px; box-shadow: var(--dn-shadow); }
.look-sm.is-on { outline-color: var(--dn-pink); }
.look-sm .look-meta strong { font-size: 13px; }
.tap-color { color: var(--dn-text); border: 1px solid rgba(122, 20, 111, .12); box-shadow: 0 18px 40px rgba(59, 15, 69, .22); }
.tap-head strong { color: var(--dn-deep); }
.tap-own { color: var(--dn-mag); }
.letter-pat { border: 1px solid rgba(122, 20, 111, .14); }
.letter-pat span { color: var(--dn-muted); }
.letter-pat[aria-checked=true] { border-color: var(--dn-pink); box-shadow: 0 0 0 2px rgba(204, 29, 119, .25); }
.letter-pat[aria-checked=true] span { color: var(--dn-mag); }

/* ---------- language switch + voice input ---------- */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--dn-soft); border: 1px solid var(--dn-line); flex: none; }
.lang-switch button { border: 0; background: transparent; color: var(--dn-muted); font: inherit; font-size: 12.5px; font-weight: 750; letter-spacing: .04em; padding: 5px 9px; border-radius: 999px; cursor: pointer; line-height: 1; }
.lang-switch button:hover { color: var(--dn-mag); }
.lang-switch button[aria-pressed="true"] { background: var(--dn-btn); color: #fff; }
.lang-switch + .top-cart { margin-left: 0; }
.mic-wrap { position: relative; display: block; }
.mic-wrap > textarea { width: 100%; padding-bottom: 40px; }
.mic-btn { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--dn-line); background: #fff; color: var(--dn-mag); font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 10px 5px 8px; border-radius: 999px; cursor: pointer; box-shadow: var(--dn-shadow); }
.mic-btn:hover { border-color: var(--dn-pink); color: var(--dn-pink); }
.mic-btn.on { background: var(--dn-btn-hot); color: #fff; border-color: transparent; animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(207, 44, 133, .45); } 50% { box-shadow: 0 0 0 7px rgba(207, 44, 133, 0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.on { animation: none; } }
@media (max-width: 860px) {
  .lang-switch { margin-left: auto; }
  .lang-switch button { padding: 5px 7px; font-size: 12px; }
}
@media (max-width: 420px) {
  .top { gap: 8px; }
  .top-logo img { width: 104px; }
  .lang-switch button { padding: 5px 5px; }
}

/* ---------- size charts ---------- */
.size-btn { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1.5px solid var(--dn-mag); background: #fff; color: var(--dn-mag); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.size-btn:hover { background: var(--dn-soft); color: var(--dn-pink); border-color: var(--dn-pink); }
.sizechart { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.sizechart[hidden] { display: none; }
.sizechart-back { position: absolute; inset: 0; background: rgba(42, 18, 51, .45); backdrop-filter: blur(3px); }
.sizechart-panel { position: relative; width: min(860px, 100%); max-height: calc(100svh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: var(--dn-shadow-lg); overflow: hidden; }
.sizechart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.sizechart-head h2 { margin: 0; font-size: 22px; color: var(--dn-deep); }
.sizechart-tabs { display: flex; gap: 6px; padding: 0 20px 12px; border-bottom: 1px solid var(--dn-line); }
.sizechart-tabs button { border: 1px solid var(--dn-line); background: var(--dn-soft); color: var(--dn-deep); font: inherit; font-weight: 700; padding: 7px 18px; border-radius: 999px; cursor: pointer; }
.sizechart-tabs button[aria-selected="true"] { background: var(--dn-btn); color: #fff; border-color: transparent; }
.sizechart-body { overflow: auto; padding: 16px 20px 20px; }
.sz-pane { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sz-pane[hidden] { display: none; }
.sz-pane img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.sz-pane img.sz-tall { max-width: 220px; }
@media (min-width: 760px) {
  .sz-pane[data-szpane="pants"] { grid-template-columns: 220px 1fr; align-items: start; }
  .sz-pane[data-szpane="pants"] .sz-legend { grid-column: 1; }
  .sz-pane[data-szpane="pants"] .sz-scroll { grid-column: 2; grid-row: 1 / span 2; }
}
.sz-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--dn-text); }
.sz-legend b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; border-radius: 50%; background: var(--dn-mag); color: #fff; font-size: 11.5px; }
.sz-scroll { overflow-x: auto; border: 1px solid var(--dn-line); border-radius: 12px; }
.sz-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sz-table th, .sz-table td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--dn-line); }
.sz-table thead th { position: sticky; top: 0; background: var(--dn-soft); color: var(--dn-mag); font-weight: 800; }
.sz-table th[scope="row"], .sz-table thead th:first-child { text-align: left; color: var(--dn-deep); font-weight: 750; }
.sz-table tbody tr:nth-child(even) { background: #fcf9fd; }
.sz-table tbody tr:last-child > * { border-bottom: 0; }
.sz-table .sz-na { text-align: center; color: var(--dn-muted); font-style: italic; }
body.sz-open { overflow: hidden; }
.concept-thumb.is-idle { display: grid; place-items: end center; padding: 6px; }
.concept-thumb.is-idle em { font-style: normal; font-size: 11px; font-weight: 750; background: rgba(255,255,255,.92); color: var(--dn-mag); padding: 3px 7px; border-radius: 999px; text-align: center; line-height: 1.2; }
.bold-pick { border: 0; padding: 0; margin: 10px 0 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bold-pick legend { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--dn-deep); padding: 0; }
.bold-pick label { position: relative; cursor: pointer; }
.bold-pick input { position: absolute; opacity: 0; }
.bold-pick span { display: block; text-align: center; padding: 9px 4px; border-radius: 12px; border: 1.5px solid var(--dn-line); background: #fff; font-weight: 700; font-size: 13.5px; color: var(--dn-text); }
.bold-pick label:nth-child(5) span { background: linear-gradient(#fff, #fff) padding-box, var(--dn-btn-hot) border-box; }
.bold-pick input:checked + span { background: var(--dn-btn); color: #fff; border-color: transparent; }
.bold-pick label:last-child input:checked + span { background: var(--dn-btn-hot); }
.bold-pick input:focus-visible + span { outline: 2px solid var(--dn-pink); outline-offset: 2px; }
.cart-lines { display: grid; gap: 4px; margin: -4px 0 18px; padding: 10px 0 0; border-top: 1px solid var(--dn-line); }
.cart-lines > div { display: flex; justify-content: space-between; align-items: baseline; }
.cart-grand { font-size: 18px; color: var(--dn-deep); }
.cart-grand small { font-size: 12px; color: var(--dn-muted); font-weight: 500; }
.order-done { background: var(--dn-soft); border: 1.5px solid var(--dn-pink); border-radius: 16px; padding: 16px; margin-bottom: 16px; display: grid; gap: 10px; }
.order-done h3 { margin: 0; color: var(--dn-deep); }
.order-done p { margin: 0; }
.order-done a { text-decoration: none; text-align: center; }
/* Kundenkonto im Warenkorb */
.acct-gate { background: var(--dn-soft); border: 1px solid var(--dn-line); border-radius: 16px; padding: 16px 18px; margin: 14px 0; }
.acct-gate h3 { margin: 0 0 6px; }
.acct-gate p { margin: 0 0 12px; color: var(--dn-text); }
.acct-gate .note { margin: 10px 0 0; color: var(--dn-muted); font-size: 13px; }
.acct-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct-btns .btn { text-decoration: none; justify-content: center; text-align: center; }
.acct-bar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--dn-soft); border: 1px solid var(--dn-line); border-radius: 12px; padding: 9px 12px; font-size: 14px; margin: 14px 0 4px; }
.acct-bar a { color: var(--dn-mag); font-weight: 700; }
#cEmail[readonly] { background: var(--dn-soft); color: var(--dn-muted); }
/* Knie-Besatz Leder / Kevlar */
.knee-pick { border: 0; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knee-pick[hidden] { display: none; }
.knee-pick legend { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--dn-deep); padding: 0; }
.knee-pick label { position: relative; cursor: pointer; }
.knee-pick input { position: absolute; opacity: 0; }
.knee-pick span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--dn-line); background: #fff; color: var(--dn-text); }
.knee-pick small { color: var(--dn-muted); font-size: 12.5px; }
.knee-pick input:checked + span { border-color: var(--dn-pink); background: var(--dn-soft); box-shadow: 0 0 0 3px rgba(204, 29, 119, .12); }
.knee-pick input:focus-visible + span { outline: 2px solid var(--dn-pink); outline-offset: 2px; }