/* ============================================================
   P28 — Preis-Logik / Mengenstaffeln · Lagertechnik Direkt
   Baut auf den Tokens aus site.css auf. Eigene, kollisionsfreie
   Klassen (pt- für die PDP-Tabelle, .cart-tier / .co-tier für die
   Hinweise in Warenkorb & Kasse).
   ============================================================ */

/* ---------- PDP: Staffelpreis-Tabelle (#pdp-tiers) ---------- */
.pdp-tiers{
  margin:1.2rem 0 .2rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(0,0,0,.02),transparent);
  overflow-x:auto;
}
.pdp-tiers[hidden]{display:none}

.pdp-tiers .pt-head{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.pdp-tiers .pt-head svg{color:var(--steel-2);flex:none;margin-top:.15rem}/* Design-Refresh 2026-07-16 P6: Deko-Icon → steel-2 */
.pdp-tiers .pt-head b{display:block;font:var(--fw-semibold) var(--fs-base)/1.2 'Sora',sans-serif;color:var(--text)}
.pdp-tiers .pt-head span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:.15rem}

.pt-table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.pt-table th,.pt-table td{padding:.6rem 1rem;text-align:left}
.pt-table thead th{
  font:var(--fw-semibold) var(--fs-2xs)/var(--lh-caps) 'Inter',sans-serif;letter-spacing:var(--ls-caps-sm);text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.pt-table thead th:nth-child(2),.pt-table thead th:nth-child(3){text-align:right}
.pt-table tbody th{font:var(--fw-semibold) var(--fs-base)/1.2 'Inter',sans-serif;color:var(--text)}
.pt-table tbody tr+tr th,.pt-table tbody tr+tr td{border-top:1px solid var(--line)}
.pt-table tbody tr:hover{background:rgba(0,0,0,.03)}
.pt-table .pt-price{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);color:var(--text)}
.pt-table .pt-save{text-align:right;white-space:nowrap}
.pt-table tr.is-base{color:var(--muted-2)}
.pt-table tr.is-base .pt-price{color:var(--muted-2)}

.pt-pct{
  display:inline-block;font:var(--fw-semibold) var(--fs-sm)/1 'Inter',sans-serif;color:var(--good-text);
  background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:999px;padding:.2rem .55rem;
}
.pt-flat{color:var(--muted);font-size:var(--fs-sm)}

/* Klartext-Ersparnis „Sie sparen X €/Stk" unter dem %-Badge (perf-pdp-staffel-trust).
   --good (#1a9e46) auf #fff erreicht nur 3,49:1 → für Fließtext das globale, dunklere
   Grün-Token --good-text (#127a37 = 5,4:1 auf #fff, a11y-F1-Muster, site.css :root). */
.pt-save-txt{
  display:block;margin-top:.28rem;
  font:var(--fw-semibold) var(--fs-xs)/1.2 'Inter',sans-serif;color:var(--good-text);
  white-space:nowrap;
}
.pt-table tr.is-base .pt-save-txt{display:none}

/* ---------- Warenkorb: Mengenrabatt-Hinweis pro Zeile ---------- */
.cart-tier{
  display:inline-block;margin-top:.25rem;font-size:var(--fs-xs);line-height:1.2;
  color:var(--muted-2);
}
.cart-tier.is-active{
  color:var(--good-text);font-weight:var(--fw-semibold);
}
.cart-tier .pt-dot{color:var(--steel);margin:0 .35rem}

/* Summen-Zeile „Mengenvorteil" (eigene Klasse, neben .save aus cart.css) */
.cart-summary .sum .tier-save dt,.cart-summary .sum .tier-save dd{color:var(--good-text)}

/* ---------- Kasse: Mengenrabatt-Hinweis in der Übersicht ---------- */
.co-tier{
  display:block;margin-top:.15rem;font-size:var(--fs-xs);color:var(--good-text);font-weight:var(--fw-semibold);
}
.co-summary .sum-row.tier-save span{color:var(--good-text)}

/* ---------- PDP: „Bis zu Y % Mengenrabatt"-Badge an der Pricebox ---------- */
/* Kompakter Einzeiler unter dem Preisblock. Grün = Vorteil/Ersparnis (semantische
   Farbtrennung wie RAJA). --good-text = 5,44:1 auf hellem Grund (a11y). */
.pdp-tier-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  margin:.1rem 0 .35rem;
  /* Refresh 2026-07-16: neutraler Chip statt grüner Vollfläche — der ::before-Punkt bleibt
     das einzige Grün-Signal (semantische Farbtrennung, kein Flächen-Grün). */
  font:var(--fw-semibold) var(--fs-sm)/1 'Inter',sans-serif;color:var(--muted-2);
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:.32rem .7rem;
}
.pdp-tier-badge[hidden]{display:none}
.pdp-tier-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--good);flex:none;
}

/* ---------- PDP: Verfügbarkeits-/Lieferzeit-Badge (#pdp-delivery) ---------- */
/* Nur Darstellung — Text bleibt exakt family.default.delivery_label + pdp.js-Sync.
   Grün signalisiert „verfügbar/lieferbar" (RAJAPACK-Muster); Kontrast über --good-text. */
.pdp-vat .pdp-delivery-badge{
  display:inline-flex;align-items:center;gap:.32rem;
  /* Refresh 2026-07-16: neutraler Chip statt grüner Vollfläche — Grün nur noch als Punkt (::before). */
  font-weight:var(--fw-semibold);color:var(--muted-2);
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:.1rem .5rem;
  line-height:1.4;
}
.pdp-vat .pdp-delivery-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--good);flex:none;
}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .pt-table th,.pt-table td{padding:.55rem .7rem}
  .pdp-tiers .pt-head{padding:.75rem .7rem}
  .pt-save-txt{white-space:normal}
}
