/* ============================================================================
   FXXL 2026 — FINALES DESIGN, 1:1 aus dem freigegebenen Design-Review.
   Teil 1 = Mockup-CSS WÖRTLICH übernommen (fxxl-design-mockups.html).
   Teil 2 = App-Glue: Token-Mapping für Alt-CSS, Alt-Komponenten (Modals,
            Verlauf, Toasts, Admin-Nebenseiten) in derselben Sprache.
   Teil 3 = Mobile (Bottom-Navigation, 2-Spalten-Grid, Stapel-Layouts).
   Lädt als LETZTES Stylesheet auf allen Seiten.
   ========================================================================== */

:root {
  color-scheme: light;
  --red: #E2001A;
  --red-hover: #C10016;
  --red-tint: #FCEDEE;
  --red-wash: #FEF7F7;
  --ink: #20242B;
  --ink-2: #3A4048;
  --gray: #666E7A;
  --mute: #9AA1AB;
  --line: #E6E8EB;
  --line-soft: #F0F1F3;
  --bg: #F6F7F8;
  --green: #1A9E5C;
  --green-tint: #E8F6EF;
  --r-card: 10px;
  --r-ctrl: 8px;
  --r-chip: 6px;
  --shadow-hover: 0 8px 24px rgba(32,36,43,.08);
  --shadow-pop: 0 20px 48px rgba(32,36,43,.16), 0 4px 12px rgba(32,36,43,.07);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; }

button { font-family: inherit; cursor: pointer; }

svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }


/* ===================== REVIEW-RAHMEN ===================== */
.rev-top {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px 28px;
}


/* ===================== GEMEINSAME SHOP-KOMPONENTEN ===================== */
.logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }

.logo .word { font-style: italic; font-weight: 800; font-size: 23px; color: var(--red); letter-spacing: -.02em; }

.logo .word b { font-weight: 900; }

.logo .sub { font-size: 7.6px; font-weight: 700; color: var(--ink-2); letter-spacing: .14em; margin-top: 3px; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-ctrl); font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }

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

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

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }

.btn-ghost:hover { border-color: var(--ink-2); }

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

.btn-red-ghost { background: #fff; color: var(--red); border-color: #F2C4CA; }

.btn-red-ghost:hover { border-color: var(--red); background: var(--red-wash); }

.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 7px; }

.btn-icon { width: 40px; padding: 0; }

.btn:disabled { background: var(--line-soft); color: var(--mute); border-color: var(--line-soft); cursor: default; }


.inp { height: 40px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: 0 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; }

.inp:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,0,26,.1); }

.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

.lbl small { color: var(--mute); font-weight: 500; }


.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--r-chip); font-size: 12px; font-weight: 600; }

.chip-gray { background: var(--line-soft); color: var(--ink-2); }

.chip-red { background: var(--red-tint); color: var(--red-hover); }

.chip-green { background: var(--green-tint); color: #11784A; }

.chip-outline { background: #fff; border: 1px solid var(--line); color: var(--gray); }

.chip-dark { background: var(--ink); color: #fff; }


.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }

.status i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.st-open i { background: var(--red); }
 .st-open { color: var(--ink); }

.st-ok i { background: var(--green); }
 .st-ok { color: var(--ink); }

.st-done i { background: var(--mute); }
 .st-done { color: var(--gray); }

.st-no i { background: #B9BFC7; }
 .st-no { color: var(--gray); }


.price { color: var(--red); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.strike { color: var(--mute); text-decoration: line-through; font-weight: 400; font-variant-numeric: tabular-nums; }


/* ===================== 01 STYLEGUIDE ===================== */
.sg { padding: 26px; display: grid; gap: 26px; }


/* ===================== SHOP HEADER ===================== */
.sh-head { background: #fff; border-bottom: 1px solid var(--line); }

.sh-row1 { display: flex; align-items: center; gap: 22px; padding: 14px 28px; }

.seg { display: inline-flex; background: var(--line-soft); border-radius: 9px; padding: 3px; }

.seg button { border: none; background: transparent; border-radius: 7px; height: 32px; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--gray); display: inline-flex; align-items: center; gap: 7px; }

.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(32,36,43,.12); }

.seg button.on svg { color: var(--red); }

.sh-search { flex: 1; max-width: 460px; position: relative; }

.sh-search svg { position: absolute; left: 13px; top: 11px; color: var(--mute); }

.sh-search input { padding-left: 40px; background: var(--bg); border-color: transparent; }

.sh-search input:hover { border-color: var(--line); }

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

.sh-iconbtn { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--ink-2); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }

.sh-iconbtn:hover { color: var(--red); background: var(--bg); }

.sh-iconbtn .bub { position: absolute; top: -2px; right: 4px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 99px;
  display: grid; place-items: center; border: 2px solid #fff; }

.sh-nav { display: flex; gap: 4px; padding: 0 20px; }

.sh-nav a { text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; padding: 12px 13px 10px; border-bottom: 3px solid transparent; cursor: pointer; }

.sh-nav a:hover { color: var(--red); }

.sh-nav a.on { color: var(--red); border-bottom-color: var(--red); }

.sh-band { background: var(--red); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 9px 20px; }

.sh-band b { font-weight: 700; }


/* ===================== PRODUKTKARTE ===================== */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; }

.pc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }

.pc:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: #D6D9DE; }

.pc-media { position: relative; background: #fff; height: 150px; display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); }

.pc-media svg.bike { width: 82%; height: auto; }

.pc-badge { position: absolute; top: 10px; left: 10px; background: var(--red); color: #fff;
  font-size: 12px; font-weight: 800; border-radius: 5px; padding: 3px 8px; }

.pc-flag { position: absolute; top: 10px; right: 10px; }

.pc-soldveil { position: absolute; inset: 0; background: rgba(255,255,255,.72); display: grid; place-items: center; }

.pc-soldveil span { background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 5px 12px; }

.pc-body { padding: 13px 15px 6px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

.pc-brand { font-size: 11.5px; font-weight: 700; color: var(--mute); letter-spacing: .05em; }

.pc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; min-height: 36px; }

.pc-attrs { display: flex; gap: 10px; font-size: 12px; color: var(--gray); }

.pc-attrs span { display: inline-flex; align-items: center; gap: 4px; }

.pc-attrs svg { width: 13px; height: 13px; }

.pc-makel { display: flex; gap: 7px; align-items: flex-start; background: var(--bg);
  border-radius: 7px; padding: 7px 9px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }

.pc-makel svg { width: 14px; height: 14px; color: var(--red); margin-top: 1px; }

.pc-prices { margin-top: auto; padding-top: 6px; }

.pc-strikes { font-size: 12px; color: var(--mute); display: flex; gap: 10px; }

.pc-mainrow { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; }

.pc-price { font-size: 20px; }

.pc-save { font-size: 12px; font-weight: 700; color: var(--green); }

.pc-avail { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray); margin-top: 4px; }

.pc-avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.pc-avail.low i { background: var(--red); }

.pc-foot { display: flex; gap: 8px; padding: 11px 15px 15px; }

.pc-foot .btn { flex: 1; height: 38px; font-size: 13.5px; }

.pc-foot .btn-icon { flex: none; width: 38px; }


/* ===================== SIDEBAR / TOOLBAR ===================== */
.shop-grid { display: grid; grid-template-columns: 236px 1fr; gap: 20px; padding: 22px 24px; align-items: start; }

.side { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; }

.side h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }

.side + .side { margin-top: 14px; }

.cat { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px;
  border-radius: 7px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; cursor: pointer; }

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

.cat.on { color: var(--red); font-weight: 700; background: var(--red-wash); }

.cat span { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }

.cat.on span { color: var(--red); }

.cat-sub { margin-left: 12px; border-left: 1px solid var(--line); padding-left: 6px; }

.cat-sub .cat { font-size: 13px; padding: 5px 9px; }

.toolbar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 12px 16px; }

.toolbar .count { font-size: 14px; }
 .toolbar .count b { font-size: 15px; }

.toolbar .sort { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--gray); }

.selectbox { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: var(--r-ctrl); height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 600; background: #fff; }

.selectbox svg { width: 15px; height: 15px; color: var(--mute); }

.fchips { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }

.fchip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 99px; padding: 5px 7px 5px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

.fchip button { width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--line-soft);
  color: var(--ink-2); display: grid; place-items: center; }

.fchip button:hover { background: var(--red); color: #fff; }

.fchip button svg { width: 11px; height: 11px; }

.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }

.pager .info { font-size: 13px; color: var(--gray); }

.pager .nav { display: flex; gap: 6px; }

.pager .nav button { min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--r-ctrl);
  border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); }

.pager .nav button:hover:not(.on):not(:disabled) { border-color: var(--ink-2); }

.pager .nav button.on { background: var(--red); border-color: var(--red); color: #fff; }

.pager .nav button:disabled { color: var(--mute); background: var(--bg); }


/* ===================== DETAIL-MODAL / DRAWER ===================== */
.dim { background: rgba(32,36,43,.45); padding: 40px; display: grid; place-items: center; }

.modal { background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop); width: 100%; max-width: 880px; overflow: hidden; }

.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }

.modal-head b { font-size: 15px; }

.xbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; color: var(--ink-2); }

.xbtn:hover { border-color: var(--ink-2); }

.det { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px; }

.det-img { background: var(--bg); border-radius: 10px; display: grid; place-items: center; min-height: 300px; }

.det-img svg { width: 86%; }

.det h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }

.det .artno { font-size: 12px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }

.det-prices { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 2px; }

.det-prices .price { font-size: 28px; }

.specs { margin-top: 14px; border-top: 1px solid var(--line-soft); }

.spec { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line-soft); }

.spec b { color: var(--gray); font-weight: 500; }

.qty { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctrl); overflow: hidden; }

.qty button { width: 38px; height: 42px; border: none; background: #fff; font-size: 17px; color: var(--ink); }

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

.qty input { width: 44px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 14px; font-weight: 600; }

.drawer-stage { display: flex; justify-content: flex-end; background: rgba(32,36,43,.45); }

.drawer { width: 400px; background: #fff; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; max-height: 640px; }

.dr-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }

.dr-head b { font-size: 16px; }

.dr-body { padding: 16px 20px; display: grid; gap: 12px; overflow: auto; }

.cart-it { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }

.cart-it .thumb { background: var(--bg); border-radius: 7px; display: grid; place-items: center; height: 64px; }

.cart-it .thumb svg { width: 85%; }

.cart-it b { font-size: 13px; display: block; line-height: 1.3; }

.cart-it .meta { font-size: 11.5px; color: var(--mute); margin-top: 2px; }

.cart-it .rowb { display: flex; align-items: center; gap: 10px; margin-top: 7px; }

.qty-sm { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }

.qty-sm button { width: 26px; height: 26px; border: none; background: #fff; font-size: 14px; color: var(--ink); }

.qty-sm span { width: 30px; display: grid; place-items: center; font-size: 13px; font-weight: 600; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.cart-it .rm { font-size: 12px; color: var(--mute); background: none; border: none; text-decoration: underline; }

.cart-it .rm:hover { color: var(--red); }

.cart-it .p { text-align: right; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.dr-foot { border-top: 1px solid var(--line); padding: 16px 20px; display: grid; gap: 8px; background: #FAFBFB; }

.dr-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; }

.dr-row.total { font-size: 16px; color: var(--ink); font-weight: 700; padding-top: 8px; border-top: 1px solid var(--line); }

.dr-row.total .price { font-size: 20px; }


/* ===================== CHECKOUT ===================== */
.ck-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; padding: 24px; align-items: start; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }

.card + .card { margin-top: 16px; }

.card-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }

.card-h .num { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }

.card-h b { font-size: 15px; }

.card-b { padding: 18px 20px; }

.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }

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

.dopt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dtile { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; gap: 12px; cursor: pointer; position: relative; }

.dtile:hover { border-color: #C9CDD3; }

.dtile.on { border-color: var(--red); background: var(--red-wash); box-shadow: 0 0 0 1px var(--red); }

.radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9CDD3; margin-top: 1px; flex: none; display: grid; place-items: center; }

.dtile.on .radio { border-color: var(--red); }

.dtile.on .radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }

.dtile b { font-size: 14px; display: flex; align-items: center; gap: 7px; }

.dtile small { display: block; color: var(--gray); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }

.addr { margin-top: 14px; border: 1px dashed #C9CDD3; border-radius: 10px; padding: 14px; background: #FAFBFB; }

.addr-card { display: flex; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }

.addr-card svg { color: var(--red); margin-top: 2px; }

.addr-card b { white-space: pre-line; font-size: 13.5px; line-height: 1.45; }

.addr-card small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 4px; }

.addr-q { font-size: 13.5px; font-weight: 700; margin: 12px 0 9px; }

.terms { display: grid; gap: 1px; background: var(--line-soft); border-radius: 9px; overflow: hidden; }

.term { display: flex; gap: 12px; background: #fff; padding: 12px 14px; }

.term svg { color: var(--red); margin-top: 1px; }

.term b { font-size: 13.5px; }
 .term small { display: block; color: var(--gray); font-size: 12.5px; margin-top: 1px; }

.sumline { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; color: var(--gray); font-variant-numeric: tabular-nums; }

.sumline b { color: var(--ink); }

.sumline.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-size: 15px; color: var(--ink); font-weight: 700; }

.fb { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #FAFBFB; }

.fb-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }

.fb-h svg { color: var(--red); }

.fb-h .q { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; cursor: help; }

.fb-rows { display: grid; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--gray); }

.fb-row { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

.fb-row b { color: var(--ink); font-weight: 600; }

.fb-bar { height: 7px; border-radius: 99px; background: var(--line); margin-top: 10px; overflow: hidden; display: flex; }

.fb-bar .u { background: var(--red); }
 .fb-bar .n { background: #F0919E; }

.fb-rest { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: #11784A; display: flex; gap: 6px; align-items: center; }

.fb-rest svg { width: 15px; height: 15px; }


/* ===================== MEINE BESTELLUNGEN ===================== */
.mo-head { display: flex; justify-content: space-between; gap: 18px; padding: 20px 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-card); align-items: center; flex-wrap: wrap; }

.mo-id { display: flex; gap: 13px; align-items: center; }

.ava { width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }

.mo-id b { font-size: 15.5px; display: block; }

.mo-id small { color: var(--gray); font-size: 12.5px; }

.mo-kpis { display: flex; gap: 26px; }

.kpi small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 600; }

.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.mo-fb { min-width: 230px; }

.mo-fb .fb-bar { margin-top: 7px; }

.mo-fb small { font-size: 11.5px; color: var(--mute); font-weight: 600; }

.mo-fb b { font-size: 13px; font-variant-numeric: tabular-nums; }

.pin { margin-top: 16px; border: 1px solid #F2C4CA; background: var(--red-wash); border-radius: var(--r-card); padding: 14px 16px; }

.pin-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red-hover); margin-bottom: 11px; }

.oc { background: #fff; border: 1px solid var(--line); border-radius: 10px; }

.oc-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }

.oc-h .no { font-weight: 700; font-size: 14.5px; }

.oc-h .dt { color: var(--mute); font-size: 12.5px; margin-left: auto; }

.oc-b { padding: 12px 16px; display: grid; gap: 10px; }

.oc-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }

.oc-item .thumb { height: 48px; background: var(--bg); border-radius: 7px; display: grid; place-items: center; }

.oc-item .thumb svg { width: 80%; }

.oc-item b { font-size: 13.5px; }
 .oc-item small { display: block; color: var(--mute); font-size: 11.5px; }

.oc-item .p { font-weight: 700; font-variant-numeric: tabular-nums; }

.oc-f { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line-soft); background: #FAFBFB; border-radius: 0 0 10px 10px; }

.oc-f .tot { margin-left: auto; font-size: 13px; color: var(--gray); }

.oc-f .tot b { font-size: 15px; color: var(--ink); margin-left: 7px; }

.ybar { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 18px; margin-top: 12px; cursor: pointer; }

.ybar:hover { border-color: #C9CDD3; }

.ybar .y { font-size: 16px; font-weight: 700; display: flex; gap: 9px; align-items: center; }

.ybar .y svg { color: var(--red); }

.ybar .stats { margin-left: auto; display: flex; gap: 26px; }

.ybar .chev { color: var(--mute); transition: .2s; }

.ybar.open .chev { transform: rotate(180deg); }


/* ===================== ADMIN ===================== */
.ad-top { display: flex; align-items: center; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px; }

.ad-top .tag { font-size: 11.5px; font-weight: 700; color: var(--gray); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }

.ad-top .right { margin-left: auto; display: flex; gap: 8px; }

.ad-grid { display: grid; grid-template-columns: 212px 1fr; gap: 20px; padding: 20px 24px; align-items: start; }

.ad-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px; }

.ad-nav small { display: block; font-size: 11px; font-weight: 700; color: var(--mute); padding: 6px 10px; }

.ad-nav button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; }

.ad-nav button svg { color: var(--mute); }

.ad-nav button:hover { background: var(--bg); }

.ad-nav button.on { background: var(--red); color: #fff; }

.ad-nav button.on svg { color: #fff; }

.ad-nav button .n { margin-left: auto; font-size: 11.5px; background: var(--line-soft); color: var(--gray);
  border-radius: 99px; min-width: 20px; height: 18px; display: grid; place-items: center; padding: 0 5px; }

.ad-nav button.on .n { background: rgba(255,255,255,.25); color: #fff; }

.kgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.ktile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; display: flex; gap: 13px; align-items: center; }

.kic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }

.kic.red { background: var(--red-tint); color: var(--red); }

.kic.green { background: var(--green-tint); color: var(--green); }

.kic.gray { background: var(--line-soft); color: var(--ink-2); }

.ktile small { display: block; font-size: 12px; color: var(--gray); font-weight: 600; }

.ktile b { font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.ktile .d { font-size: 11.5px; color: var(--green); font-weight: 600; display: block; }

.wtabs { display: flex; gap: 8px; margin: 16px 0 12px; }

.wtab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.wtab .n { font-size: 11.5px; background: var(--line-soft); border-radius: 99px; min-width: 20px; height: 19px; display: grid; place-items: center; padding: 0 6px; }

.wtab.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.wtab.on .n { background: rgba(255,255,255,.22); color: #fff; }


/* Admin Bestellkarte */
.ao { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.ao-h { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }

.ao-h .no { font-size: 15px; font-weight: 700; }

.ao-h .dt { font-size: 12.5px; color: var(--mute); display: inline-flex; gap: 6px; align-items: center; }

.ao-h .total { margin-left: auto; text-align: right; }

.ao-h .total small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 600; }

.ao-h .total .price { font-size: 19px; }

.ao-cust { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }

.ao-cust .ava { width: 36px; height: 36px; font-size: 12.5px; background: var(--ink); }

.ao-cust .who b { font-size: 13.5px; display: block; }

.ao-cust .who small { font-size: 12px; color: var(--gray); }

.ao-cust .meta { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.ao-warn { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px 0; background: var(--red-wash);
  border: 1px solid #F2C4CA; border-radius: 9px; padding: 10px 13px; font-size: 12.5px; color: var(--ink-2); }

.ao-warn svg { color: var(--red); flex: none; margin-top: 1px; }

.ao-warn b { color: var(--red-hover); }

.ao-deliv { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px 0; background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; }

.ao-deliv svg { color: var(--ink-2); flex: none; margin-top: 1px; }

.ao-deliv b { display: block; font-size: 13px; }

.ao-deliv .a { white-space: pre-line; margin-top: 2px; color: var(--ink-2); }

.ao-deliv small { color: var(--mute); display: block; margin-top: 3px; }

.ao-items { padding: 6px 18px; }

.ao-it { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }

.ao-it:last-child { border-bottom: none; }

.ao-it .thumb { height: 52px; width: 64px; background: var(--bg); border-radius: 8px; display: grid; place-items: center; }

.ao-it .thumb svg { width: 85%; }

.ao-it .nm b { font-size: 13.5px; }

.ao-it .nm .sub { font-size: 11.5px; color: var(--mute); margin-top: 2px; display: flex; gap: 8px; align-items: center; }

.ao-it .ctx { text-align: right; font-size: 11.5px; color: var(--mute); font-variant-numeric: tabular-nums; }

.ao-it .ctx .p { display: block; font-size: 15px; margin-top: 2px; }

.ao-it .acts { display: flex; gap: 6px; }

.ao-it .acts .xbtn { width: 30px; height: 30px; border-radius: 7px; }

.ao-it .acts .xbtn svg { width: 14px; height: 14px; }

.ao-f { display: flex; gap: 8px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line-soft); background: #FAFBFB; }

.ao-f .sep { flex: 1; }


/* Testmodus / Sync */
.tm { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }

.tm .kic { width: 44px; height: 44px; }

.tm b { font-size: 14.5px; display: flex; gap: 9px; align-items: center; }

.tm p { font-size: 12.5px; color: var(--gray); margin-top: 3px; max-width: 560px; }


/* ===================== DIALOGE / TOASTS / EMPTY ===================== */
.dlg { background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop); max-width: 440px; width: 100%; padding: 24px; }

.dlg .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--red-tint); color: var(--red); display: grid; place-items: center; margin-bottom: 14px; }

.dlg h3 { font-size: 16px; font-weight: 700; }

.dlg p { font-size: 13.5px; color: var(--gray); margin-top: 7px; line-height: 1.55; }

.dlg .bts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.toast { display: flex; align-items: flex-start; gap: 11px; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px 14px; max-width: 360px; }

.toast svg { color: var(--green); margin-top: 1px; }

.toast b { font-size: 13.5px; display: block; }

.toast small { color: var(--gray); font-size: 12.5px; }

.toast .xbtn { margin-left: auto; width: 26px; height: 26px; border: none; }

.toast.err { border-left-color: var(--red); }
 .toast.err svg { color: var(--red); }

.empty { text-align: center; padding: 46px 20px; }

.empty .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--line-soft); color: var(--mute);
  display: grid; place-items: center; margin: 0 auto 14px; }

.empty .ico svg { width: 26px; height: 26px; }

.empty h3 { font-size: 15.5px; }
 .empty p { color: var(--gray); font-size: 13px; margin-top: 5px; }

.empty .bts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }


/* Admin Master-Detail (Bestellungen-Übersicht) */
.msf { display: flex; gap: 10px; align-items: center; padding: 18px 20px 14px; flex-wrap: wrap; }

.msf .sh-search { max-width: 280px; }

.msf .right { margin-left: auto; font-size: 12px; color: var(--mute); }

.ms { display: grid; grid-template-columns: 345px 1fr; gap: 16px; padding: 0 20px 20px; align-items: start; }

.ol { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.ol-tabs { display: flex; border-bottom: 1px solid var(--line); background: #FAFBFB; }

.ol-tab { flex: 1; border: none; background: none; padding: 11px 4px 9px; font-size: 12.5px; font-weight: 600;
  color: var(--gray); border-bottom: 2.5px solid transparent; display: inline-flex; justify-content: center; gap: 6px; align-items: center; }

.ol-tab .n { font-size: 10.5px; background: var(--line-soft); color: var(--gray); border-radius: 99px;
  min-width: 17px; height: 16px; display: grid; place-items: center; padding: 0 4px; }

.ol-tab.on { color: var(--red); border-bottom-color: var(--red); background: #fff; }

.ol-tab.on .n { background: var(--red); color: #fff; }

.ol-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; }

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

.ol-row.on { background: var(--red-wash); box-shadow: inset 3px 0 0 var(--red); }

.ol-row .t { font-size: 13.5px; font-weight: 700; display: flex; gap: 7px; align-items: center; }

.ol-row .t .no { color: var(--mute); font-weight: 600; font-variant-numeric: tabular-nums; }

.ol-row .t .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }

.ol-row .p { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.ol-row .sub { grid-column: 1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--gray); }

.ol-row .d { grid-column: 2; font-size: 11px; color: var(--mute); text-align: right; }

.mini { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px;
  border-radius: 5px; font-size: 10.5px; font-weight: 700; }

.mini.open { background: #FFF4E8; color: #9A5B00; }

.mini.red { background: var(--red-tint); color: var(--red-hover); }

.mini.gray { background: var(--line-soft); color: var(--ink-2); }

.mini.green { background: var(--green-tint); color: #11784A; }

.ol-more { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px;
  font-size: 12px; color: var(--mute); }

.ol-more a { color: var(--red); font-weight: 700; cursor: pointer; }

.od { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.od-head { display: flex; gap: 14px; padding: 16px 20px 14px; align-items: flex-start; }

.od-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }

.od-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }

.od-right { margin-left: auto; text-align: right; flex: none; }

.od-right .nav { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--mute); margin-bottom: 5px; }

.od-right .nav button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; display: grid; place-items: center; color: var(--ink-2); }

.od-right .nav svg { width: 13px; height: 13px; }

.od-right small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 600; }

.od-right .price { font-size: 22px; }

.od-sub { display: flex; gap: 16px; padding: 0 20px 14px; font-size: 12px; color: var(--gray);
  align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }

.od-sub span { display: inline-flex; gap: 6px; align-items: center; }

.od-sub svg { width: 13px; height: 13px; color: var(--mute); }

.od-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-soft); }

.od-cell { padding: 13px 16px; border-right: 1px solid var(--line-soft); min-width: 0; }

.od-cell:last-child { border-right: none; }

.od-cell small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); margin-bottom: 4px; }

.od-cell b { font-size: 13px; display: flex; gap: 6px; align-items: center; }

.od-cell b svg { width: 14px; height: 14px; color: var(--ink-2); }

.od-cell .v2 { font-size: 11.5px; color: var(--gray); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }

.od-body { padding: 14px 20px; display: grid; gap: 10px; }

.od-banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line);
  background: var(--bg); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; }

.od-banner svg { width: 15px; height: 15px; color: var(--ink-2); flex: none; margin-top: 1px; }

.od-banner b { font-size: 12.5px; }

.od-banner .when { color: var(--mute); font-weight: 500; font-size: 11.5px; }

.od-banner p { color: var(--ink-2); margin-top: 2px; }

.od-banner.alert { background: var(--red-wash); border-color: #F2C4CA; }

.od-banner.alert svg { color: var(--red); }

.od-banner .ack { margin-left: auto; flex: none; }

.od-items-h { display: flex; align-items: center; padding: 4px 20px 0; }

.od-items-h b { font-size: 14px; }
 .od-items-h i { font-style: normal; color: var(--mute); margin-left: 6px; }

.od-items { padding: 4px 20px; }

.od-it { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); }

.od-it:last-child { border-bottom: none; }

.od-it .thumb { width: 64px; height: 50px; background: var(--bg); border-radius: 8px; display: grid; place-items: center; }

.od-it .thumb svg { width: 85%; }

.od-it .nm b { font-size: 13.5px; }

.od-it .nm .sub { font-size: 11.5px; color: var(--mute); margin-top: 3px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.od-it .nm .ctx { font-size: 11.5px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }

.od-it .pr { text-align: right; }

.od-it .pr .strike { display: block; font-size: 11.5px; }

.od-it .pr .price { font-size: 15px; }

.od-it .pr .vt { display: block; font-size: 11px; color: var(--gray); margin-top: 2px; }

.od-foot { display: grid; grid-template-columns: 1fr 300px; gap: 20px; padding: 6px 20px 16px; }

.att { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: #fff; cursor: pointer; }

.att:hover { border-color: var(--ink-2); }

.att small { color: var(--mute); font-weight: 500; }

.od-tot .sumline { font-size: 12.5px; padding: 4px 0; }

.od-tot .sumline.total { font-size: 14px; padding-top: 10px; margin-top: 4px; }

.od-actions { display: flex; gap: 8px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--line);
  background: #FAFBFB; }

.od-actions .sep { flex: 1; }


/* Kompakte Bedingungen (Checkout) */
.terms-mini { margin-top: 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px; font-size: 12px; color: var(--gray); }

.terms-mini b { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }

.terms-mini span { display: flex; gap: 7px; align-items: flex-start; line-height: 1.55; }

.terms-mini span::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); margin-top: 6px; flex: none; }


/* Neuware: Artikel-Eingabe + Varianten-Auswahl */
.nw-input { display: flex; gap: 10px; align-items: flex-end; }

.nw-input > div { flex: 1; }

.vp { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 16px; }

.vp-h { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }

.vp-h .thumb { width: 72px; height: 50px; background: var(--bg); border-radius: 8px; display: grid; place-items: center; flex: none; }

.vp-h .thumb svg { width: 85%; }

.vp-h b { font-size: 15px; display: block; }

.vp-h small { color: var(--gray); font-size: 12.5px; }

.vp-b { padding: 16px 18px; display: grid; gap: 18px; }

.vp-g small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 9px; }

.vp-g small i { color: var(--mute); font-weight: 500; font-style: normal; }

.sizes { display: flex; gap: 8px; flex-wrap: wrap; }

.size { min-width: 52px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); position: relative; }

.size:hover:not(.on):not(:disabled) { border-color: var(--ink-2); }

.size.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); color: var(--red); }

.size:disabled { color: var(--mute); background: var(--bg); text-decoration: line-through; cursor: default; }

.vp-note { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mute); }

.vp-note svg { width: 14px; height: 14px; }

.vp-result { border-top: 1px solid var(--line-soft); background: #FAFBFB; padding: 14px 18px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.vp-result .nm b { font-size: 13.5px; display: block; }

.vp-result .nm small { font-size: 11.5px; color: var(--mute); }

.vp-result .pr { margin-left: auto; text-align: right; }

.vp-result .pr .strike { font-size: 12px; display: block; }

.vp-result .pr .price { font-size: 19px; }


/* Login */
.lg { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 560px; }

.lg-hero { position: relative; background: linear-gradient(170deg, #FFFFFF, #EFF0F2); padding: 44px 48px; display: flex; flex-direction: column; }

.lg-hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(640px 420px at 88% -8%, rgba(226,0,26,.12), transparent 60%); }

.lg-hero > * { position: relative; }

.lg-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: #fff;
  border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 700; width: fit-content; margin-top: 40px; }

.lg-h1 { font-size: 36px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; margin-top: 18px; }

.lg-h1 span { color: var(--red); }

.lg-sub { color: var(--gray); font-size: 14.5px; max-width: 420px; margin-top: 12px; line-height: 1.55; }

.lg-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; max-width: 480px; }

.lg-feat { display: flex; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; align-items: center; }

.lg-feat .kic { width: 34px; height: 34px; border-radius: 8px; }

.lg-feat b { font-size: 13px; display: block; }
 .lg-feat small { font-size: 11.5px; color: var(--mute); }

.lg-form { display: grid; place-items: center; padding: 44px; background: #fff; border-left: 1px solid var(--line); }

.lg-card { width: 100%; max-width: 380px; }

.lg-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 14px; }

.lg-card .sub { color: var(--gray); font-size: 13.5px; margin-top: 6px; }

.ms-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 24px; background: var(--ink);
  color: #fff; border: none; border-radius: 10px; padding: 13px 16px; font-size: 14.5px; font-weight: 600; }

.ms-btn:hover { background: #343A43; }

.ms-btn .mslogo { background: #fff; border-radius: 6px; padding: 5px; display: grid; place-items: center; }

.ms-btn .arr { margin-left: auto; }

.lg-secure { display: flex; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 13px; margin-top: 16px; font-size: 12.5px; color: var(--gray); }

.lg-secure svg { color: var(--green); }
/* ============================================================================
   TEIL 2 — APP-GLUE
   ========================================================================== */
/* Legacy-Token auf die Mockup-Palette mappen */
:root {
  --primary: var(--red);
  --primary-dark: var(--red-hover);
  --primary-light: var(--red-tint);
  --primary-tint: var(--red-wash);
  --accent: var(--red);
  --border: var(--line);
  --border-strong: #D2D5DA;
  --text: var(--ink);
  --text-soft: var(--gray);
  --text-mute: var(--mute);
  --x-red: var(--red);
  --x-red-dark: var(--red-hover);
  --x-red-light: #EE3348;
  --x-red-soft: var(--red-tint);
  --x-red-wash: var(--red-wash);
  --surface: #fff;
  --surface-2: #FAFBFB;
  --surface-3: var(--line-soft);
}
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: #C9CDD3 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C9CDD3; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

/* Lucide-Icons in Mockup-Buttons/Labels */
.btn i, .btn svg, .sh-iconbtn i, .sh-iconbtn svg, .chip i, .chip svg,
.xbtn i, .xbtn svg, .fchip i, .fchip svg, .mini i, .mini svg,
.cat i, .cat svg, .dtile b i, .dtile b svg, .term i, .term svg,
.addr-card > i, .addr-card > svg, .fb-h > i, .fb-h > svg,
.ol-tab i, .ol-tab svg, .od-nav i, .od-nav svg,
.pc-attrs i, .pc-attrs svg, .pc-makel i, .pc-makel svg, .pc-avail i.lucide {
  width: 15px; height: 15px; flex: none;
}
.sh-iconbtn i, .sh-iconbtn svg { width: 21px; height: 21px; }
.xbtn i, .xbtn svg { width: 15px; height: 15px; }
.seg .fxxl-mode-item i, .seg .fxxl-mode-item svg { width: 15px; height: 15px; }
.seg .fxxl-mode-item.on i, .seg .fxxl-mode-item.on svg { color: var(--red); }

/* Segment-Umschalter: echte App nutzt .fxxl-mode-item in .seg */
.seg .fxxl-mode-item {
  border: none; background: transparent; cursor: pointer;
  border-radius: 7px; height: 32px; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--gray);
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
  transition: background .15s, color .15s;
}
.seg .fxxl-mode-item.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(32,36,43,.12); }

/* Shop-Seitengrundgerüst */
body.fxxl { background: var(--bg); padding: 0; margin: 0; }
.sh-head { position: sticky; top: 0; z-index: 40; }
.sh-nav .sale { margin-left: auto; color: var(--red); }
.sh-band:empty { display: none; }
.sh-band .fxxl-ticker-item { color: #fff; font-weight: 600; background: none; border: none; display: inline-flex; gap: 8px; align-items: center; }
.sh-band .fxxl-ticker-item i { color: #fff; width: 14px; height: 14px; }
.sh-band a.fxxl-ticker-item { text-decoration: underline; }
.shop-wrap { max-width: 1400px; margin: 0 auto; }
.shop-grid { grid-template-columns: 240px minmax(0, 1fr); }
.fchips:empty { display: none; margin: 0; }
.pgrid { padding: 0; margin-top: 14px; }
.pc-foot .btn { font-size: 13px; }

/* Skeleton */
.skl { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.skl i { display: block; background: linear-gradient(90deg, var(--bg) 25%, var(--line-soft) 50%, var(--bg) 75%);
  background-size: 200% 100%; animation: fxShimmer 1.3s linear infinite; }
.skl .im { height: 150px; }
.skl .l1 { height: 12px; margin: 14px 15px 8px; border-radius: 4px; width: 40%; }
.skl .l2 { height: 12px; margin: 0 15px 8px; border-radius: 4px; width: 75%; }
.skl .l3 { height: 20px; margin: 0 15px 16px; border-radius: 4px; width: 55%; }

/* Alt-Overlays (Modal/Drawer) behalten ihr Open/Close-Verhalten, Look = Mockup.
   Performance: kein backdrop-filter (ruckelt beim Scrollen/Öffnen), nur
   GPU-günstige opacity/transform-Übergänge. */
.fxxl-modal-ov { position: fixed; inset: 0; background: rgba(32,36,43,.5);
  display: flex; align-items: center; justify-content: center; padding: 30px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s; }
.fxxl-modal-ov.open { opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease, visibility 0s; }
.fxxl-modal-ov .modal { opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.fxxl-modal-ov.open .modal { opacity: 1; transform: none; }
.fxxl-drawer-ov { position: fixed; inset: 0; background: rgba(32,36,43,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 64; }
.fxxl-drawer-ov.open { opacity: 1; pointer-events: auto; }
.fxxl-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 94vw; z-index: 65;
  background: #fff; box-shadow: var(--shadow-pop); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.7,.3,1);
  will-change: transform; }
.fxxl-drawer.open { transform: none; }
.modal { max-height: 90vh; overflow: auto; }

/* Toasts: weiße Karte, farbige Akzentleiste, unten rechts */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toasts .toast, .dadm-toast {
  background-image: none !important; background: #fff !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-left: 4px solid var(--green) !important;
  border-radius: 10px !important; box-shadow: var(--shadow-pop) !important;
  font-weight: 600; padding: 12px 16px; max-width: 360px; font-size: 13.5px;
  animation: fxToastIn .24s cubic-bezier(.2,.7,.3,1) both;
  display: flex; gap: 10px; align-items: flex-start;
}
.toasts .toast.error, .dadm-toast.err { border-left-color: var(--red) !important; }
.toasts .toast.warn { border-left-color: var(--red) !important; }
.toasts .toast::before, .toast::before, .fxxl-toast::before { display: none !important; }
.dadm-toast i, .dadm-toast svg { color: var(--green) !important; width: 16px; height: 16px; }
.dadm-toast.err i, .dadm-toast.err svg { color: var(--red) !important; }
.dadm-toast-wrap { position: fixed !important; top: auto !important; bottom: 20px !important; right: 20px !important;
  z-index: 90; display: flex; flex-direction: column; gap: 8px; }

/* Verlauf-Timeline (bestehende vlf-Klassen in Mockup-Sprache) */
.vlf-overlay { background: rgba(32,36,43,.5) !important; backdrop-filter: none !important; }
.vlf-overlay.open .vlf-modal, .msg-overlay.open .msg-modal { animation: fxPop .2s cubic-bezier(.2,.7,.3,1) both; }
.vlf-modal, .msg-modal { border-radius: 14px !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-pop) !important; background: #fff !important; }
.vlf-event-dot { border: none !important; box-shadow: none !important; color: #fff !important; }
.vlf-color-rose .vlf-event-dot, .vlf-color-violet .vlf-event-dot, .vlf-color-indigo .vlf-event-dot { background: var(--red) !important; }
.vlf-color-emerald .vlf-event-dot { background: var(--green) !important; }
.vlf-color-amber .vlf-event-dot, .vlf-color-cyan .vlf-event-dot, .vlf-color-slate .vlf-event-dot { background: var(--ink-2) !important; }
.vlf-event-line { background: var(--line) !important; }
.vlf-event-card { background: #fff !important; border: 1px solid var(--line-soft) !important;
  border-radius: 10px !important; box-shadow: none !important; }
.vlf-event-fresh { background: var(--red-tint) !important; color: var(--red-hover) !important; border-radius: 99px; }
.vlf-event-cat { color: var(--mute) !important; text-transform: none !important; letter-spacing: 0 !important; }
.vlf-msg-bubble { background: var(--bg) !important; border: 1px solid var(--line-soft) !important;
  border-left: 3px solid var(--red) !important; border-radius: 8px !important; color: var(--ink-2) !important; }
.vlf-grund { background: var(--bg) !important; border-left: 3px solid var(--red) !important;
  border-radius: 8px !important; padding: 8px 11px !important; }
.vlf-status-pill { border-radius: 5px !important; }
.msg-btn-send { background: var(--red) !important; border: none !important; font-weight: 700; }
.msg-btn-send:hover { background: var(--red-hover) !important; }

/* Neuware-Seite + Varianten-Picker in Mockup-Sprache */
.fxxl-neuware-page { max-width: 1400px; margin: 0 auto; }
.fxxl-neuware-help, .fxxl-neuware-intro { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.neuware-row input, .fxxl-neuware-inputs input { border: 1px solid var(--line) !important; border-radius: var(--r-ctrl) !important; }
.vp-modal { border-radius: 14px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-pop) !important; }
.vp-color-card { border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
.vp-color-card.is-selected, .vp-color-card.selected { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red) !important; }
.vp-size-card { border: 1px solid var(--line) !important; border-radius: var(--r-ctrl) !important; background: #fff !important; box-shadow: none !important; }
.vp-size-card:hover:not(:disabled) { border-color: var(--ink-2) !important; }
.vp-size-card:disabled { background: var(--bg) !important; color: var(--mute) !important; }
.vp-section-title { color: var(--ink) !important; }
.vp-avail-green .vp-avail-dot { background: var(--green) !important; }
.vp-avail-red .vp-avail-dot { background: var(--red) !important; }

/* Admin: restliche Tabs (Artikel, Rabatte, Sync, Audit …) in gleicher Sprache */
body.bright {
  --d-red: var(--red); --d-red-light: #EE3348; --d-red-dark: var(--red-hover);
  --d-red-glow: rgba(226,0,26,.2); --d-red-soft: var(--red-tint);
  --d-bg: var(--bg); --d-bg-soft: #F0F1F3;
  --d-panel: #fff; --d-panel-2: #FAFBFB; --d-panel-3: var(--line-soft);
  --d-border: var(--line); --d-border-soft: var(--line-soft); --d-border-hi: #D2D5DA;
  --d-text: var(--ink); --d-text-soft: var(--gray); --d-text-mute: var(--mute); --d-text-dim: #B4BAC3;
  --d-success: var(--green); --d-blue: #4A5362; --d-blue-soft: var(--line-soft);
  --d-orange: var(--red-hover); --d-yellow: var(--red); --d-yellow-soft: var(--red-tint);
  --d-purple: var(--gray);
  --d-shadow-1: 0 1px 2px rgba(32,36,43,.05); --d-shadow-2: 0 4px 14px rgba(32,36,43,.07);
  --d-shadow-3: var(--shadow-pop); --d-shadow-red: 0 8px 20px rgba(226,0,26,.2);
  background: var(--bg); font-family: var(--font);
}
body.bright .dadm-topbar { display: none !important; }   /* ersetzt durch .ad-top */
body.bright .dadm-shell { display: none !important; }    /* ersetzt durch .ad-grid */

/* Admin-Rahmen: admin.js schaltet .active (Mockup nennt es .on) */
.ad-nav button { cursor: pointer; font-family: inherit; }
.ad-nav button i, .ad-nav button svg { width: 16px; height: 16px; color: var(--mute); flex: none; }
.ad-nav button.active, .ad-nav button.on { background: var(--red); color: #fff; }
.ad-nav button.active i, .ad-nav button.active svg,
.ad-nav button.on i, .ad-nav button.on svg { color: #fff; }
.ad-top .right .btn i, .ad-top .right .btn svg { width: 15px; height: 15px; }
.ad-main { min-width: 0; }
.ad-grid { max-width: 1500px; margin: 0 auto; }
@media (max-width: 1000px) {
  .ad-grid { grid-template-columns: 1fr; }
  .ad-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .ad-nav small { width: 100%; }
  .ad-nav button { width: auto; }
}
body.bright .dadm-card { background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important; box-shadow: none !important; }
body.bright .dadm-card h2 { font-weight: 700 !important; letter-spacing: -.012em; text-transform: none !important; }
body.bright .dadm-card h2 i, body.bright .dadm-card h2 svg { color: var(--red) !important; }
body.bright .dadm-head h1 { font-weight: 800; letter-spacing: -.02em; }
body.bright .dadm-head .sub { color: var(--gray); }
body.bright .dadm-btn { background: var(--red) !important; border: none !important;
  border-radius: var(--r-ctrl) !important; font-weight: 700 !important; box-shadow: none !important; }
body.bright .dadm-btn:hover:not(:disabled) { background: var(--red-hover) !important; box-shadow: none !important; }
body.bright .dadm-ghost-btn { border: 1px solid var(--line) !important; border-radius: var(--r-ctrl) !important;
  color: var(--ink) !important; background: #fff !important; font-weight: 600 !important; box-shadow: none !important; }
body.bright .dadm-ghost-btn:hover { border-color: var(--ink-2) !important; background: #fff !important; }
body.bright .dadm-btn-sm { border-radius: 7px !important; font-weight: 700; box-shadow: none !important; }
body.bright .dadm-btn-sm.ok { background: var(--green) !important; border-color: var(--green) !important; }
body.bright .dadm-btn-danger { background: var(--red) !important; border: none !important; border-radius: var(--r-ctrl) !important; }
body.bright .dadm-field input, body.bright .dadm-field select, body.bright .dadm-field textarea,
body.bright .dadm-input, body.bright .dadm-select, body.bright .dadm-num-input {
  border: 1px solid var(--line) !important; border-radius: var(--r-ctrl) !important;
  background: #fff !important; color: var(--ink) !important; box-shadow: none !important; }
body.bright .dadm-field input:focus, body.bright .dadm-field textarea:focus, body.bright .dadm-input:focus {
  border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(226,0,26,.09) !important; outline: none; }
body.bright .dadm-stat, body.bright .dadm-kpi { background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important; box-shadow: none !important; }
body.bright .dadm-stat::before, body.bright .dadm-kpi::before { display: none !important; }
body.bright .dadm-stat-label { color: var(--gray) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-weight: 600 !important; }
body.bright .dadm-stat-val { font-weight: 800; letter-spacing: -.02em; }
body.bright .dadm-table th { background: var(--bg) !important; color: var(--gray) !important; font-weight: 700;
  border-bottom: 1px solid var(--line) !important; text-transform: none !important; letter-spacing: 0 !important; }
body.bright .dadm-table td { border-bottom: 1px solid var(--line-soft) !important; }
body.bright .dadm-table tbody tr:hover { background: var(--red-wash) !important; }
body.bright input[type="checkbox"] { accent-color: var(--red); }
body.bright .dadm-table .endpreis-cell { color: var(--red) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
body.bright .dadm-tag { border-radius: 5px !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; }
body.bright .dadm-status-pending { background: #FFF4E8 !important; color: #9A5B00 !important; border-color: #F3DCBE !important; }
body.bright .dadm-status-approved { background: var(--green-tint) !important; color: #11784A !important; border-color: #BFE5D2 !important; }
body.bright .dadm-status-declined, body.bright .dadm-status-cancelled { background: var(--red-tint) !important; color: var(--red-hover) !important; border-color: #F2C4CA !important; }
body.bright .dadm-status-fulfilled { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.nice-overlay { background: rgba(32,36,43,.5) !important; backdrop-filter: blur(2px); }
.nice-overlay .nice-dialog { animation: fxPop .2s cubic-bezier(.2,.7,.3,1) both; }
body.bright .nice-dialog { border-radius: 14px !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-pop) !important; background: #fff !important; }
body.bright .amsg-modal, body.bright .adj-modal, body.bright .reset-modal {
  border-radius: 14px !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-pop) !important; animation: fxPop .2s cubic-bezier(.2,.7,.3,1) both; }
body.bright .dadm-spinner { border-top-color: var(--red) !important; }
body.bright .dadm-result.ok { background: var(--green-tint) !important; border-color: #BFE5D2 !important; color: #0C7A47 !important; border-radius: var(--r-card) !important; }
body.bright .dadm-result.err { background: var(--red-tint) !important; border-color: #F2C4CA !important; color: var(--red-hover) !important; border-radius: var(--r-card) !important; }
body.bright .dadm-upload { border: 2px dashed #C9CDD3 !important; border-radius: var(--r-card) !important; background: var(--bg) !important; }
body.bright .dadm-upload:hover, body.bright .dadm-upload.dragging { border-color: var(--red) !important; background: var(--red-wash) !important; }
body.bright .dadm-prog { background: var(--line-soft) !important; border-radius: 99px; }
body.bright .dadm-prog-fill { background: var(--red) !important; border-radius: 99px; }

/* Admin-Rahmen (neues Markup in admin.html) */
.ad-shell { max-width: 1500px; margin: 0 auto; }
.ad-nav button { font-family: inherit; cursor: pointer; }
.ad-nav button.js-tab.active { background: var(--red); color: #fff; }
.ad-nav button.js-tab.active i, .ad-nav button.js-tab.active svg { color: #fff; }
.ad-nav button i, .ad-nav button svg { width: 16px; height: 16px; color: var(--mute); }
.ad-grid > main { min-width: 0; }
.ad-top .right .dadm-ghost-btn { height: 34px; }

/* Bestell-Detailkarte (ao-*) Feinheiten für echte Inhalte */
.ao + .ao { margin-top: 14px; }
.ao-banner { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; }
.ao-banner i, .ao-banner svg { width: 15px; height: 15px; color: var(--ink-2); flex: none; margin-top: 1px; }
.ao-banner b { font-size: 12.5px; }
.ao-banner .when { color: var(--mute); font-weight: 500; font-size: 11.5px; }
.ao-banner p { color: var(--ink-2); margin-top: 2px; }
.ao-banner.alert { background: var(--red-wash); border-color: #F2C4CA; }
.ao-banner.alert i, .ao-banner.alert svg { color: var(--red); }
.ao-banner.danger { background: var(--red-wash); border-color: #F2C4CA; }
.ao-banner.danger i, .ao-banner.danger svg { color: var(--red); }
.ao-banner .ack { margin-left: auto; flex: none; }
.ao-atts { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 18px 2px; }
.ao-atts-label { display: block; font-size: 11px; font-weight: 600; color: var(--mute); padding: 10px 18px 0; }
.att { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: #fff; cursor: pointer; font-family: inherit; }
.att:hover { border-color: var(--ink-2); }
.att small { color: var(--mute); font-weight: 500; }
.att i, .att svg { width: 13px; height: 13px; }
.ao-sum { padding: 10px 18px 4px; max-width: 360px; margin-left: auto; }
.ao-sum .sumline { font-size: 12.5px; padding: 3px 0; }
.ao-sum .sumline.total { font-size: 14px; padding-top: 9px; margin-top: 4px; }
.ao-it .sub .chip { height: 17px; font-size: 10px; padding: 0 6px; }
.ao-it .ctx-under { font-size: 11.5px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ao-it.struck .nm, .ao-it.struck .pr { opacity: .55; text-decoration: line-through; }

/* Meine Bestellungen: Zusatzinhalte in den oc-Karten */
.oc + .oc, .pin .oc + .oc { margin-top: 10px; }
.oc-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 16px 10px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
.oc-note i, .oc-note svg { width: 14px; height: 14px; color: var(--ink-2); flex: none; margin-top: 1px; }
.oc-note.admin { border-left: 3px solid var(--red); }
.oc-note b { display: block; font-size: 12px; margin-bottom: 2px; }
.oc-note .when { color: var(--mute); font-weight: 500; font-size: 11px; }
.oc-deliv { display: flex; gap: 10px; background: var(--bg); border-radius: 8px; padding: 10px 13px; font-size: 12.5px; }
.oc-deliv i, .oc-deliv svg { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.oc-item .p .adj-old { display: block; font-size: 11px; color: var(--mute); text-decoration: line-through; font-weight: 500; }
.oc-item.struck b, .oc-item.struck .p { opacity: .55; text-decoration: line-through; }
.oc-extra { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); padding: 2px 0; font-variant-numeric: tabular-nums; }
.oc-atts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 16px 10px; }
/* Notizen/Anhänge innerhalb von .oc-b: Grid-Gap übernimmt den Abstand */
.oc-b .oc-note, .oc-b .oc-atts { margin: 0; }
.oc-note.oc-alert { background: var(--red-wash); border: 1px solid #F6CDD3; border-left: 3px solid var(--red); }
.oc-note .btn { flex: none; height: 28px; font-size: 12px; padding: 0 10px; }
.oc.is-attention { border-color: #F2B9C0; }
.oc-h .chip i, .oc-h .chip svg { width: 12px; height: 12px; }
.oc-item .thumb img { max-width: 86%; max-height: 86%; object-fit: contain; }
.oc-extra span { display: inline-flex; align-items: center; gap: 6px; }
.oc-extra i, .oc-extra svg { width: 13px; height: 13px; color: var(--mute); }
.oc-f .tot .oc-vorteil { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px;
  color: var(--gray); cursor: help; }
.oc-f .tot .oc-vorteil i, .oc-f .tot .oc-vorteil svg { width: 13px; height: 13px; color: var(--ink-2); }
.oc-f .tot .oc-vorteil b { font-size: 13px; color: var(--ink-2); margin-left: 2px; }
.mo-wrap { max-width: 100%; }
.ybar-body { margin-top: 10px; }
.fb-q { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute);
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; cursor: help; }

/* Checkout Erfolgsseite (sx) + Stepper (ckst) */
.sx-wrap { max-width: 760px; margin: 36px auto; text-align: center; padding: 0 20px; }
.sx-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px 32px 28px; }
.sx-check { width: 72px; height: 72px; border-radius: 50%; background: var(--green-tint); color: var(--green);
  display: grid; place-items: center; margin: 0 auto 16px; }
.sx-check i, .sx-check svg { width: 34px; height: 34px; }
.sx-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.sx-sub { color: var(--gray); font-size: 14px; line-height: 1.6; }
.sx-sub b { color: var(--ink); }
.sx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 8px; text-align: left; }
.sx-step { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; background: #FAFBFB; }
.sx-step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; margin-bottom: 8px; }
.sx-step b { display: block; font-size: 13px; margin-bottom: 3px; }
.sx-step p { font-size: 12px; color: var(--gray); line-height: 1.5; margin: 0; }
.sx-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.ck-top { display: flex; align-items: center; gap: 22px; background: #fff; border-bottom: 1px solid var(--line); padding: 11px 26px; position: sticky; top: 0; z-index: 40; }
.ck-top-brand { display: flex; align-items: center; gap: 12px; }
.ck-top-brand img { height: 34px; width: auto; }
.ck-top-brand .t b { display: block; font-size: 13.5px; line-height: 1.2; }
.ck-top-brand .t small { color: var(--gray); font-size: 11.5px; }
.ckst { display: flex; align-items: center; gap: 10px; margin: 0 auto; }
.ckst .st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.ckst .st i.b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--line-soft); color: var(--mute); flex: none; }
.ckst .st.done { color: var(--ink); }
.ckst .st.done i.b { background: var(--green); color: #fff; }
.ckst .st.cur { color: var(--ink); }
.ckst .st.cur i.b { background: var(--red); color: #fff; }
.ckst .ln { width: 34px; height: 1.5px; background: var(--line); flex: none; }
.ck-top-back { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13.5px;
  font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.ck-top-back:hover { background: var(--bg); color: var(--red); }
.ck-top-back i, .ck-top-back svg { width: 15px; height: 15px; }
.addr-edit { width: 100%; margin-top: 10px; border: 1px solid #C9CDD3; border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: 13.5px; min-height: 88px; resize: vertical; background: #fff; }
.addr-edit:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,0,26,.09); }
.addr-hint { font-size: 12px; color: var(--mute); margin-top: 6px; }
.addr-confirmed { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #11784A; font-weight: 700; font-size: 13px; }
.addr-loading { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 13px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #C9CDD3; border-top-color: var(--gray);
  border-radius: 50%; animation: ckspin .7s linear infinite; }
@keyframes ckspin { to { transform: rotate(360deg); } }
.fb-info { position: relative; display: inline-flex; margin-left: auto; cursor: help; }
.fb-tip { position: absolute; bottom: calc(100% + 10px); right: -8px; width: 290px; background: var(--ink); color: #F2F4F6;
  border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.55; font-weight: 500; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: all .18s; box-shadow: 0 10px 30px rgba(32,36,43,.35); text-align: left; }
.fb-tip::after { content: ""; position: absolute; top: 100%; right: 12px; border: 7px solid transparent; border-top-color: var(--ink); }
.fb-info:hover .fb-tip, .fb-info:focus-within .fb-tip { opacity: 1; visibility: visible; transform: none; }
.fb-bar .n2 { background: #F0919E; height: 100%; }
.fb-bar.is-over .u, .fb-bar.is-over .n2 { background: var(--red-hover); }
.fb-rest.warn { color: var(--red-hover); }
.fb-rest.over { color: var(--red-hover); }

@keyframes fxPop { from { opacity: 0; transform: translateY(8px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes fxReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fxToastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.pgrid > .pc { animation: fxReveal .35s cubic-bezier(.2,.7,.3,1) both; }
.pgrid > .pc:nth-child(1) { animation-delay: .02s; } .pgrid > .pc:nth-child(2) { animation-delay: .05s; }
.pgrid > .pc:nth-child(3) { animation-delay: .08s; } .pgrid > .pc:nth-child(4) { animation-delay: .11s; }
.pgrid > .pc:nth-child(5) { animation-delay: .14s; } .pgrid > .pc:nth-child(6) { animation-delay: .17s; }
/* Stagger-Reveal nur beim ersten Laden — bei Sortieren/Filtern/Blättern
   erscheinen die Karten sofort (fühlt sich deutlich flüssiger an). */
.pgrid.did-anim > .pc { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   TEIL 3 — MOBILE (Handy-Mockups)
   ========================================================================== */
.fxxl-bottomnav { display: none; }
@media (max-width: 860px) {
  body.fxxl { padding-bottom: 70px; }
  .sh-row1 { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .sh-search { order: 3; flex: 1 1 100%; max-width: none; }
  .sh-acts .sh-iconbtn { display: none; }
  .sh-nav { overflow-x: auto; scrollbar-width: none; padding: 0 10px; }
  .sh-nav a { padding: 11px 10px 9px; font-size: 12px; white-space: nowrap; }
  .shop-grid { grid-template-columns: 1fr; padding: 12px; }
  .shop-grid > aside, .shop-grid > .shop-side { display: none; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pc-name { font-size: 12.5px; min-height: 34px; }
  .pc-price { font-size: 17px; }
  .pc-foot { padding: 9px 11px 12px; }
  .pc-foot .btn { height: 36px; font-size: 12.5px; padding: 0 8px; }
  .pc-foot .btn-icon { display: none; }
  .fxxl-drawer { width: 100%; max-width: 100%; }
  .modal { max-width: 96vw; }
  .det { grid-template-columns: 1fr; }
  .ck-page-grid { grid-template-columns: 1fr !important; }
  .sx-steps { grid-template-columns: 1fr; }
  .ms { grid-template-columns: 1fr; }
  .ol { position: static; max-height: none; }
  .ms.show-detail .ol { display: none; }
  .ms:not(.show-detail) .od { display: none; }
  .od-nav .back { display: inline-flex !important; align-items: center; gap: 6px; }
  .ad-grid { grid-template-columns: 1fr !important; }
  .kgrid { grid-template-columns: 1fr 1fr !important; }
  .od-meta { grid-template-columns: 1fr 1fr !important; }
  .od-meta .od-cell { border-bottom: 1px solid var(--line-soft); }
  .mo-head { flex-direction: column; align-items: stretch; }
  .fxxl-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .fxxl-bottomnav button {
    border: none; background: none; display: inline-flex; flex-direction: column;
    align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600;
    color: var(--gray); padding: 4px 10px; border-radius: 8px; position: relative;
    cursor: pointer; font-family: inherit;
  }
  .fxxl-bottomnav button i, .fxxl-bottomnav button svg { width: 21px; height: 21px; }
  .fxxl-bottomnav button.on { color: var(--red); }
  .fxxl-bottomnav .bn-bub {
    position: absolute; top: 0; right: 6px; background: var(--red); color: #fff;
    font-size: 9.5px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 99px;
    display: grid; place-items: center; border: 2px solid #fff; padding: 0 3px;
  }
}
/* od-nav Zurück-Button standardmäßig verstecken (nur mobil sichtbar) */
.od-nav .back { display: none; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  font-size: 12.5px; font-weight: 600; padding: 0 12px; height: 30px; width: auto; }

/* Nachträge: Bestell-Liste (Admin) + Kleinigkeiten */
.ol { position: sticky; top: 76px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.ol-body { overflow: auto; }
.ol-empty { padding: 28px 16px; text-align: center; color: var(--mute); font-size: 13px; }
.ol-row .t .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od { min-width: 0; }
.od-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.od-nav .lbl2 { font-size: 12.5px; color: var(--gray); font-weight: 600; }
.od-nav > button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.od-nav > button:hover:not(:disabled) { border-color: var(--ink-2); }
.od-nav > button:disabled { color: #C9CDD3; cursor: default; }
.msf .dadm-input, .msf .dadm-select { height: 38px; }
.sh-nav a, .sh-nav button { cursor: pointer; background: none; border: none; font-family: inherit; }
.side select.selectbox { width: 100%; appearance: auto; cursor: pointer; font-family: inherit; }
.side + .side { margin-top: 14px; }
.sh-band { display: block; }
.sh-band.is-hidden { display: none; }
.mini i, .mini svg { width: 11px; height: 11px; }
.pc-makel { margin-top: 2px; }
.dec-chip { height: 30px !important; font-size: 12px !important; border-radius: 99px !important; }

/* ======================================================================
   HOTFIXES v10 (Live-Feedback 23.10.2026)
   ====================================================================== */

/* 1) Chips/Status/Minis duerfen NIE umbrechen (z. B. "1.080 € überschritten") */
.chip, .status, .mini, .ao-h .dt, .oc-h .dt { white-space: nowrap; }

/* 2) Produktbilder: Prozent-max-height ist in Grid-Boxen nicht aufloesbar
      (implizite Zeile = auto) -> Bilder liefen ueber den Kartentext.
      Feste px-Grenzen + overflow:hidden auf allen Medien-/Thumb-Boxen. */
.pc-media { overflow: hidden; }
.pc-media img { max-width: 88% !important; max-height: 132px !important;
  width: auto !important; height: auto !important; object-fit: contain; }
.oc-item .thumb { overflow: hidden; }
.oc-item .thumb img { max-width: 86% !important; max-height: 42px !important;
  width: auto !important; height: auto !important; object-fit: contain; }
.ao-it .thumb { overflow: hidden; }
.ao-it .thumb img { max-width: 86% !important; max-height: 46px !important;
  width: auto !important; height: auto !important; object-fit: contain; }
.cart-it .thumb { overflow: hidden; }
.cart-it .thumb img { max-width: 86% !important; max-height: 56px !important;
  width: auto !important; height: auto !important; object-fit: contain; }
.det-img { overflow: hidden; }

/* 3) Admin-Bestellfilter: admin2/admin-bright machen Inputs/Selects 100% breit
      -> alles stapelte untereinander. Kompakte Inline-Zeile erzwingen. */
.msf { display: flex !important; flex-wrap: wrap; gap: 10px !important; align-items: center !important; }
.msf .grow { flex: 1 1 280px !important; min-width: 220px; max-width: 460px; width: auto !important; }
.msf .dadm-input { width: 100% !important; display: block; }
.msf .dadm-select { width: auto !important; min-width: 170px; max-width: 320px; flex: none !important; display: inline-flex; }
.msf .dadm-ghost-btn { flex: none !important; width: auto !important; white-space: nowrap; }

/* 4) Erfolgsseite: Alt-CSS (design-refresh) presste .sx-card in einen 88px-Kreis
      und faerbte alles weiss. Komplett neutralisieren — Look kommt von .sx-*. */
.js-success { background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; animation: none !important; }
.js-success > div:first-child { width: auto !important; height: auto !important;
  border-radius: 14px !important; background: #fff !important; color: var(--ink) !important;
  box-shadow: none !important; margin: 0 !important; display: block !important; animation: none !important; }
.js-success > div:first-child i { width: auto !important; height: auto !important; }
.js-success .sx-card { border: 1px solid var(--line) !important; }
.js-success .sx-check { width: 72px !important; height: 72px !important; border-radius: 50% !important;
  background: var(--green-tint) !important; color: var(--green) !important;
  display: grid !important; place-items: center !important; margin: 0 auto 18px !important; }
.js-success .sx-check i, .js-success .sx-check svg { width: 34px !important; height: 34px !important; color: var(--green) !important; }
.js-success h2 { color: var(--ink) !important; font-size: 24px !important; }
.js-success .sx-step b { color: var(--ink) !important; }
.js-success .sx-step .n { color: #fff !important; }
.js-success .sx-actions .btn { background: var(--red) !important; color: #fff !important;
  border-radius: var(--r-ctrl) !important; box-shadow: none !important; padding: 0 18px !important;
  height: 40px !important; margin-top: 0 !important; background-image: none !important; }
.js-success .sx-actions .btn:hover { background: var(--red-hover) !important; transform: none !important; }
.js-success .sx-actions .btn-ghost { background: #fff !important; color: var(--ink) !important; }

/* 5) Neuware-Modal (Preis-Aufschluesselung): lila/gelb/cyan raus — weiss/rot/grau */
.nw-modal-online { background: #fff !important; border: 1px solid var(--line) !important;
  color: var(--ink-2) !important; border-radius: 8px !important; box-shadow: none !important; }
.nw-modal-online i, .nw-modal-online svg { color: var(--red) !important; }
.nw-modal-online b { color: var(--ink) !important; }
.nw-price-hint, .nw-2wahl-hint { background: var(--bg) !important; border: 1px solid var(--line-soft) !important;
  border-left: 3px solid var(--red) !important; color: var(--ink-2) !important; border-radius: 8px !important; }
.nw-price-hint i, .nw-price-hint svg, .nw-2wahl-hint i, .nw-2wahl-hint svg { color: var(--red) !important; }
.neuware-bd-tbl td { color: var(--ink-2) !important; }
.neuware-bd-tbl tr.total td { color: var(--ink) !important; border-top: 1px solid var(--line) !important; }
.neuware-bd-tbl tr.total td:last-child b { color: var(--red) !important; font-size: 16px; }
.nw-modal-section h4 { color: var(--ink) !important; }
.nw-modal-section h4 i, .nw-modal-section h4 svg { color: var(--red) !important; }

/* 6) Neuware-Positionen in Bestelluebersichten: sanfter gruener Hintergrund */
.oc-item.is-neuware { background: var(--green-tint); border: 1px solid #CDEBDA;
  border-radius: 8px; padding: 8px 10px; }
.oc-item.is-neuware .thumb { background: #fff; }
.ao-it.is-neuware { background: var(--green-tint); border-radius: 8px;
  padding: 11px 10px; margin: 3px 0; border-bottom: none; }
.ao-it.is-neuware .thumb { background: #fff; }
.cart-it.is-neuware { background: var(--green-tint); border-color: #CDEBDA; }
.cart-it.is-neuware .thumb { background: #fff; }

/* ======================================================================
   POLISH v11 — schlanker Hinweis-Banner + freundliche Farbakzente
   (rot / grün / hellblau) in den Bestelluebersichten
   ====================================================================== */

/* 1) Rote Hinweis-Leiste: kleiner, abgerundet, mit weichem Schatten */
.sh-band {
  width: calc(100% - 48px); max-width: 1400px; margin: 12px auto 0;
  padding: 8px 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-hover) 100%);
  font-size: 12.5px; font-weight: 600; letter-spacing: .005em;
  box-shadow: 0 10px 22px -12px rgba(226,0,26,.55), 0 2px 6px rgba(226,0,26,.15);
}
.sh-band .fxxl-ticker-item i, .sh-band .fxxl-ticker-item svg { width: 13px; height: 13px; }
@media (max-width: 860px) { .sh-band { width: calc(100% - 24px); font-size: 12px; padding: 8px 12px; } }

/* 2) Bestellkarten: weiche Schatten, Status als farbige Pille */
.oc, .ao { box-shadow: 0 1px 2px rgba(32,36,43,.03), 0 12px 26px -20px rgba(32,36,43,.28); }
.oc-h .status, .ao-h .status { padding: 3px 11px 3px 9px; border-radius: 99px; font-size: 12.5px; }
.oc-h .st-open, .ao-h .st-open { background: var(--red-tint); color: var(--red-hover); }
.oc-h .st-ok, .ao-h .st-ok { background: var(--green-tint); color: #11784A; }
.oc-h .st-done, .ao-h .st-done { background: var(--line-soft); color: var(--ink-2); }
.oc-h .st-no, .ao-h .st-no { background: var(--line-soft); color: var(--gray); }

/* 3) Nachrichten-Bloecke: Einkauf/Mitarbeiter in sanftem Hellblau,
      Warnungen bleiben rot (werden unten erneut gesetzt und gewinnen) */
.oc-note.admin { background: #EDF5FC; border-left: 3px solid #2D7FC1; }
.oc-note.admin i, .oc-note.admin svg { color: #2D7FC1; }
.ao-banner.from-user { background: #EDF5FC; border-color: #CBE3F6; }
.ao-banner.from-user i, .ao-banner.from-user svg { color: #2D7FC1; }
/* Alerts erneut setzen, damit sie gegen das Blau gewinnen */
.oc-note.oc-alert { background: var(--red-wash); border: 1px solid #F6CDD3; border-left: 3px solid var(--red); }
.oc-note.oc-alert i, .oc-note.oc-alert svg { color: var(--red); }
.ao-banner.alert, .ao-banner.danger { background: var(--red-wash); border-color: #F2C4CA; }
.ao-banner.alert i, .ao-banner.alert svg,
.ao-banner.danger i, .ao-banner.danger svg { color: var(--red); }

/* 4) Lieferung in Hellblau (Logistik), Vorteil in Gruen (Ersparnis) */
.oc-deliv, .ao-deliv { background: #F3F8FD; }
.oc-deliv i, .oc-deliv svg, .ao-deliv i, .ao-deliv svg { color: #2D7FC1; }
.oc-f .tot .oc-vorteil b { color: #11784A; }

/* 5) Avatar: rot mit weichem Schatten statt schwarz */
.ava, .ao-cust .ava {
  background: linear-gradient(135deg, var(--red), #B30016) !important;
  box-shadow: 0 5px 12px -4px rgba(226,0,26,.5);
}

/* 6) Anhang-Chips: Datei-Icon rot, leichter Schatten */
.att { background: #fff; box-shadow: 0 1px 3px rgba(32,36,43,.06); }
.att i:first-child, .att svg:first-child { color: var(--red); }

/* ======================================================================
   MOBILE-FIX v12 — Handy-Layout (Live-Feedback 24.10.2026)
   ====================================================================== */

/* 1) Hinweis-Leiste: inline-flex-Items wurden max-content-breit und
      sprengten die Seitenbreite (horizontales Scrollen am Handy).
      Jetzt echter Fliesstext, der normal umbricht. */
.sh-band { overflow: hidden; }
.sh-band .js-ticker-track { display: inline; white-space: normal; }
.sh-band .fxxl-ticker-item { display: inline !important; white-space: normal !important;
  background: none !important; border: none !important; color: #fff !important; }
.sh-band .fxxl-ticker-item span { display: inline; }
.sh-band .fxxl-ticker-item i, .sh-band .fxxl-ticker-item svg {
  display: inline-block; vertical-align: -2px; margin-right: 6px; width: 13px; height: 13px; }

/* 2) Bestellkarten duerfen nie breiter als ihr Container werden
      (lange Namen/Chips/Preise haben das Modal gesprengt) */
.oc-item > div, .oc-item .inf, .oc-b, .oc { min-width: 0; }
.oc-item b, .oc-item small { overflow-wrap: anywhere; }
.oc-item .p { white-space: nowrap; text-align: right; }
.oc-item .p .adj-old { white-space: nowrap; }
.ao-it .nm b, .ao-it .nm .sub { overflow-wrap: anywhere; min-width: 0; }
.ao-it > .nm { min-width: 0; }
.att { height: auto; min-height: 26px; max-width: 100%; flex-wrap: wrap; row-gap: 2px; padding-top: 4px; padding-bottom: 4px; }
.att small { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  /* Sicherheitsnetz gegen horizontales Scrollen */
  body.fxxl, body.bright { overflow-x: clip; }

  /* Kopf: Logo + Umschalter in Zeile 1, Suche volle Breite in Zeile 2 */
  .sh-row1 { row-gap: 8px; }
  .sh-row1 .fxxl-logo img { height: 28px !important; }
  .seg { margin-left: auto; }
  .sh-acts { display: none; }
  .sh-band { width: calc(100% - 20px); margin-top: 10px; font-size: 12px;
    padding: 8px 12px; text-align: left; }

  /* Meine-Bestellungen-Modal: enger, Positionen kompakt */
  .fxxl-modal-ov { padding: 8px; }
  .modal { max-width: 100%; max-height: 96vh; }
  .js-myorders-body { padding: 12px 10px !important; }
  .oc-h { padding: 10px 12px; gap: 8px; }
  .oc-h .dt { flex: 1 1 100%; margin-left: 0; order: 9; }
  .oc-b { padding: 10px 12px; gap: 8px; }
  .oc-item { grid-template-columns: 40px 1fr auto; gap: 8px; }
  .oc-item .thumb { height: 40px; }
  .oc-item .thumb img { max-height: 34px !important; }
  .oc-f { flex-wrap: wrap; padding: 10px 12px; }
  .oc-f .tot { flex: 1 1 100%; text-align: right; }
  .oc-atts { margin: 0; }
  .att { white-space: normal; }

  /* Admin-Bestellkarte am Handy */
  .ao-h { padding: 11px 12px; gap: 8px; }
  .ao-h .total { flex: 1 1 100%; text-align: left; margin-left: 0; }
  .ao-cust { padding: 10px 12px; }
  .ao-cust .meta { margin-left: 0; }
  .ao-it { grid-template-columns: 44px 1fr; }
  .ao-it .ctx { grid-column: 2; text-align: left; }
  .ao-it .ctx .p { display: inline; margin-left: 8px; }
  .ao-it .acts { grid-column: 2; justify-content: flex-start; }
}

/* ======================================================================
   v13 — Ungelesen-Badges, Suchfeld-Fix, Neuware-Modal-Polish
   ====================================================================== */

/* Admin-Nav: roter Zaehler bei ungelesenen Mitarbeiter-Nachrichten */
.ad-nav button .n.alert { background: var(--red); color: #fff; }
.ad-nav button.active .n.alert, .ad-nav button.on .n.alert { background: rgba(255,255,255,.3); color: #fff; }

/* Suchfeld im Admin-Bestellfilter: Lupe darf den Text nicht ueberlappen
   (admin-bright setzt padding mit !important) */
.msf .grow .dadm-input { padding-left: 36px !important; }

/* ---------- Neuware "Artikel-Details" (Preis-Aufschluesselung) ---------- */
.neuware-modal .nw-modal-head { display: flex; gap: 18px; align-items: flex-start; }
.neuware-modal .nw-modal-img { background: #fff; border: 1px solid var(--line) !important;
  border-radius: 10px !important; box-shadow: none !important; }
.neuware-modal .nw-modal-brand { font-size: 11.5px; font-weight: 700; color: var(--mute) !important;
  letter-spacing: .05em; text-transform: uppercase; }
.neuware-modal .nw-modal-name { font-weight: 800; letter-spacing: -.015em; color: var(--ink) !important; }
.neuware-modal .nw-modal-art { background: var(--bg) !important; border: 1px solid var(--line-soft) !important;
  border-radius: 6px !important; color: var(--gray) !important; display: inline-block; padding: 2px 8px; }
.neuware-modal .nw-pill { background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: 99px !important; color: var(--ink-2) !important; font-weight: 600; box-shadow: none !important; }
.neuware-modal .nw-pill i, .neuware-modal .nw-pill svg { color: var(--mute) !important; width: 13px; height: 13px; }
.neuware-modal .nw-modal-section { background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.neuware-modal .nw-modal-section h4 { font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gray) !important;
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px !important; }
.neuware-modal .neuware-bd-tbl { width: 100%; border-collapse: collapse; }
.neuware-modal .neuware-bd-tbl td { padding: 8px 0 !important; border-bottom: 1px solid var(--line-soft) !important;
  font-size: 13.5px; font-variant-numeric: tabular-nums; }
.neuware-modal .neuware-bd-tbl td:last-child { text-align: right; font-weight: 600; }
.neuware-modal .neuware-bd-tbl tr.total td { border-top: 2px solid var(--ink) !important;
  border-bottom: none !important; padding-top: 11px !important; font-size: 15px; }
.neuware-modal .nw-modal-highlights li { font-size: 13px; color: var(--ink-2); margin: 3px 0; }
.neuware-modal .nw-modal-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ======================================================================
   v14 — LAGER-ANSICHT (Abwertung), Shop-Fotogalerie, Admin-Abwertung
   ====================================================================== */

/* ---------- LAGER (mobile-first) ---------- */
.lw-body { background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.lw-noscroll { overflow: hidden; }
.lw-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px 14px calc(10px); }
.lw-head img { height: 26px; width: auto; }
.lw-head .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--gray); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; }
.lw-head .tag i, .lw-head .tag svg { width: 13px; height: 13px; color: var(--red); }
.lw-head .js-logout { margin-left: auto; }
.lw-iconbtn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer; flex: none; }
.lw-iconbtn i, .lw-iconbtn svg { width: 18px; height: 18px; }
.lw-search { position: sticky; top: 56px; z-index: 29; display: flex; align-items: center; gap: 10px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.lw-search i, .lw-search svg { width: 18px; height: 18px; color: var(--mute); flex: none; }
.lw-search input { flex: 1; border: none; outline: none; font-size: 16px; font-family: inherit;
  color: var(--ink); background: transparent; min-width: 0; }
.lw-search .n { background: var(--line-soft); color: var(--gray); font-size: 11.5px; font-weight: 700;
  border-radius: 99px; padding: 3px 9px; flex: none; }
.lw-list { max-width: 760px; margin: 0 auto; padding: 12px 12px 40px; display: grid; gap: 8px; }
.lw-loading { padding: 40px 16px; text-align: center; color: var(--mute); font-size: 14px; }
.lw-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 2px rgba(32,36,43,.03); transition: border-color .15s ease; }
.lw-item:active { border-color: var(--red); }
.lw-item .thumb { width: 64px; height: 56px; background: var(--bg); border-radius: 8px;
  display: grid; place-items: center; overflow: hidden; flex: none; }
.lw-item .thumb img { max-width: 88%; max-height: 50px; object-fit: contain; }
.lw-item .inf { min-width: 0; flex: 1; }
.lw-item .inf b { display: block; font-size: 14px; line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lw-item .inf small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.lw-item .inf small.st { display: flex; align-items: center; gap: 6px; color: var(--gray); margin-top: 4px; flex-wrap: wrap; }
.lw-item .inf .chip { height: 19px; font-size: 10.5px; padding: 0 7px; }
.lw-item > i, .lw-item > svg { width: 18px; height: 18px; color: var(--mute); flex: none; }

/* Bewertungs-Sheet (Vollbild) */
.lw-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex;
  flex-direction: column; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.7,.3,1);
  will-change: transform; }
.lw-sheet.open { transform: none; }
.lw-sheet-head { display: flex; align-items: center; gap: 12px; background: #fff;
  border-bottom: 1px solid var(--line); padding: 10px 14px; flex: none; }
.lw-sheet-head .t { min-width: 0; flex: 1; }
.lw-sheet-head .t b { display: block; font-size: 14.5px; line-height: 1.25; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lw-sheet-head .t small { color: var(--mute); font-size: 12px; }
.lw-step { background: var(--red-tint); color: var(--red-hover); font-size: 11.5px; font-weight: 700;
  border-radius: 99px; padding: 4px 10px; flex: none; white-space: nowrap; }
.lw-sheet-body { flex: 1; overflow-y: auto; padding: 16px 14px 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.lw-sheet-foot { flex: none; display: flex; gap: 10px; background: #fff; border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
.lw-big { flex: 1; height: 50px; font-size: 15px; }
.lw-big2 { height: 50px; padding: 0 16px; }
.lw-bike { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 18px; }
.lw-bike img { width: 72px; height: 56px; object-fit: contain; background: var(--bg); border-radius: 8px; }
.lw-bike b { font-size: 14px; display: block; }
.lw-bike small { color: var(--mute); font-size: 12px; }
.lw-h { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800;
  letter-spacing: -.015em; margin: 0 0 4px; }
.lw-h .n { width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff;
  display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.lw-sub { color: var(--gray); font-size: 13px; margin: 0 0 14px; }
.lw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lw-chip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lw-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.lw-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.lw-lbl small { color: var(--mute); font-weight: 500; }
.lw-note { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 15px; background: #fff; resize: vertical; min-height: 76px; }
.lw-note:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,0,26,.09); }
.lw-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 18px; }
.lw-ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); }
.lw-ph img { width: 100%; height: 100%; object-fit: cover; }
.lw-ph .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(32,36,43,.75); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; }
.lw-ph .x i, .lw-ph .x svg { width: 14px; height: 14px; }
.lw-ph.add { display: grid; place-items: center; align-content: center; gap: 6px; cursor: pointer;
  border: 2px dashed #C9CDD3; background: var(--bg); color: var(--gray); font-size: 12.5px; font-weight: 700; }
.lw-ph.add input { display: none; }
.lw-ph.add i, .lw-ph.add svg { width: 26px; height: 26px; color: var(--red); }
.lw-makel-sum { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.lw-done { text-align: center; padding: 40px 16px; }
.lw-done .ok { width: 76px; height: 76px; border-radius: 50%; background: var(--green-tint);
  color: var(--green); display: inline-grid; place-items: center; margin-bottom: 16px; }
.lw-done .ok i, .lw-done .ok svg { width: 36px; height: 36px; }
.lw-done h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.lw-done p { color: var(--gray); font-size: 14px; }
.lw-done .err { color: var(--red-hover); font-size: 12.5px; margin-top: 10px; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid #C9CDD3;
  border-top-color: var(--red); border-radius: 50%; animation: ckspin .7s linear infinite; vertical-align: -2px; }

/* ---------- SHOP: Fotogalerie auf der Produktkarte + im Detail ---------- */
.pc-media.has-gallery { padding: 0; }
.pc-strip { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pc-strip::-webkit-scrollbar { display: none; }
.pc-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; height: 100%; }
.pc-slide img { max-width: 88% !important; max-height: 132px !important;
  width: auto !important; height: auto !important; object-fit: contain; }
.pc-shots { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(32,36,43,.72); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 3px 8px; pointer-events: none; }
.pc-shots i, .pc-shots svg { width: 12px; height: 12px; }
.det-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.det-th { width: 64px; height: 52px; flex: none; border: 2px solid var(--line); border-radius: 8px;
  background: #fff; display: grid; place-items: center; overflow: hidden; cursor: pointer; padding: 0; }
.det-th.on { border-color: var(--red); }
.det-th img { max-width: 90%; max-height: 44px; object-fit: contain; }

/* ---------- ADMIN: Abwertung ---------- */
.aw { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(32,36,43,.03), 0 12px 26px -20px rgba(32,36,43,.28); overflow: hidden; }
.aw.is-open { border-color: #F2B9C0; }
.aw-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.aw-h .no { font-weight: 700; font-size: 14.5px; }
.aw-h .dt { margin-left: auto; color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.aw-b { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 16px; }
.aw-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.aw-ph { display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 8px; aspect-ratio: 4/3; overflow: hidden; }
.aw-ph img { width: 100%; height: 100%; object-fit: cover; }
.aw-ph.main { grid-column: 1 / -1; aspect-ratio: 16/9; }
.aw-ph.main img { object-fit: contain; background: #fff; }
.aw-noph { grid-column: 1 / -1; text-align: center; color: var(--mute); font-size: 12px; padding: 8px 0; }
.aw-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.aw-makel { background: var(--red-wash); border: 1px solid #F6CDD3; border-radius: 10px; padding: 11px 13px; }
.aw-makel .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-makel .note { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.aw-makel small { display: block; margin-top: 7px; color: var(--mute); font-size: 11.5px; }
.aw-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.aw-prices .k { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 12px; }
.aw-prices .k small { display: block; font-size: 11px; font-weight: 700; color: var(--mute); margin-bottom: 2px; }
.aw-prices .k b { font-size: 15px; font-variant-numeric: tabular-nums; }
.aw-prices .k span { display: block; font-size: 10.5px; color: var(--mute); }
.aw-calc { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.aw-calc .in .wrap { position: relative; }
.aw-calc .in .wrap input { width: 100%; padding-right: 30px; font-size: 16px; font-weight: 700; height: 44px; }
.aw-calc .in .wrap span { position: absolute; right: 12px; top: 11px; color: var(--mute); font-weight: 700; }
.aw-calc .calc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.aw-calc .calc .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2);
  padding: 4px 0; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line-soft); }
.aw-calc .calc .row.total { border-bottom: none; border-top: 2px solid var(--ink); margin-top: 2px;
  padding-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.aw-calc .calc .row.total .price { font-size: 17px; }
.aw-calc .calc small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 6px; }
.aw-f { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--line-soft); background: #FAFBFB; flex-wrap: wrap; }
.aw-f .sep { flex: 1; }

@media (max-width: 1000px) {
  .aw-b { grid-template-columns: 1fr; }
  .aw-media { grid-template-columns: repeat(4, 1fr); }
  .aw-ph.main { grid-column: auto; aspect-ratio: 4/3; }
  .aw-prices { grid-template-columns: 1fr 1fr; }
  .aw-calc { grid-template-columns: 1fr; }
}

/* ======================================================================
   v15 — iOS-Zoom-Fix (Handy): Safari zoomt bei Fokus auf Inputs mit
   Schrift < 16px automatisch hinein und bleibt gezoomt haengen -> Seite
   wirkt riesig und seitlich abgeschnitten. 16px verhindert das komplett.
   ====================================================================== */
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 860px) {
  input, select, textarea, .inp, .selectbox {
    font-size: 16px !important;
  }
  /* Sicherheitsnetz: nichts darf die Seite seitlich aufziehen */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .sh-head, .sh-band, .shop-grid, .pgrid, .toolbar { max-width: 100vw; }
  .sh-row1 .seg, .sh-search, .sh-search .inp { min-width: 0; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* v16 — Neuware: B-Ware-Hinweis (gehoert in die 2.WAHL-Ansicht) */
.nw-bware-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--red-wash); border: 1px solid #F6CDD3; border-left: 3px solid var(--red);
  border-radius: 10px; padding: 12px 14px; margin-top: 8px;
  font-size: 13px; color: var(--ink-2); font-weight: 600; line-height: 1.5; }
.nw-bware-hint i, .nw-bware-hint svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.nw-bware-hint span { flex: 1; min-width: 200px; }
.nw-bware-hint .btn { flex: none; }

/* v17 — Neuware: "nicht in Rodgau"-Karte + Online-Shop-Buttons */
.nw-norod { grid-column: 1 / -1; background: #fff; border: 1px solid #F2B9C0;
  border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(32,36,43,.03), 0 12px 26px -20px rgba(226,0,26,.3); }
.nw-norod .top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.nw-norod .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--red-tint);
  color: var(--red); display: grid; place-items: center; flex: none; }
.nw-norod .ico i, .nw-norod .ico svg { width: 22px; height: 22px; }
.nw-norod .t { flex: 1; min-width: 0; }
.nw-norod h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.nw-norod .t small { color: var(--mute); font-size: 12.5px; }
.nw-norod .top img { height: 52px; max-width: 90px; object-fit: contain; flex: none; }
.nw-norod p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 8px; }
.nw-norod .op { display: inline-block; margin-left: 6px; color: var(--gray); }
.nw-norod .op b { color: var(--ink); }
.nw-norod .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.nw-norod .acts .btn { text-decoration: none; }

/* v18 — "nicht in Rodgau": Kopier-Zeilen fuer das Jira-Formular */
.nw-copy { display: grid; gap: 6px; margin: 4px 0 6px; }
.nw-copy small { font-size: 11.5px; color: var(--mute); font-weight: 600; }
.nw-copy-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  cursor: pointer; font-family: inherit; transition: border-color .15s ease, background-color .15s ease; }
.nw-copy-row:hover { border-color: var(--ink-2); }
.nw-copy-row .k { font-size: 11.5px; font-weight: 700; color: var(--gray); flex: none; width: 112px; }
.nw-copy-row .v { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-copy-row i, .nw-copy-row svg { width: 15px; height: 15px; color: var(--mute); flex: none; }
.nw-copy-row.ok { border-color: var(--green); background: var(--green-tint); }
.nw-copy-row.ok i, .nw-copy-row.ok svg { color: var(--green); }

/* v19 — Neuware: Einkaufsanfrage automatisch per Jira-API */
.nw-copy.is-hidden, .js-nw-ticket.is-hidden { display: none !important; }
.nw-auto { display: grid; gap: 6px; margin: 6px 0 4px; }
.nw-auto .btn { justify-self: start; height: 44px; padding: 0 20px; font-size: 14.5px;
  box-shadow: 0 8px 18px -10px rgba(226,0,26,.55); }
.nw-auto small { font-size: 12px; color: var(--mute); }
.nw-auto-ok { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--green-tint); border: 1px solid #CDEBDA; border-radius: 10px; padding: 11px 14px; }
.nw-auto-ok .ok { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; flex: none; }
.nw-auto-ok .ok i, .nw-auto-ok .ok svg { width: 18px; height: 18px; }
.nw-auto-ok > div { flex: 1; min-width: 200px; }
.nw-auto-ok b { display: block; font-size: 14px; color: #11784A; }
.nw-auto-ok small { font-size: 12px; color: var(--ink-2); }
.nw-auto-ok .btn { text-decoration: none; flex: none; }