/* COLIGHT&SOUND · Warenkorb freundlicher
   Legt sich über die bestehende Schublade (#cartDrawer). Felder, IDs und Absenden bleiben unverändert;
   warenkorb.js teilt nur in zwei Schritte auf und ergänzt Texte. */

.wk { --wk-line: var(--line, #282828); --wk-dim: var(--text-dim, #969696); --wk-dimmer: var(--text-dimmer, #666);
      --wk-bg1: var(--bg-1, #0a0a0a); --wk-text: var(--text, #f2f2f2); --wk-white: var(--white, #fff);
      width: min(520px, 100%) !important; }
@media (min-width: 1400px) { .wk { width: 560px !important; } }

/* ---------- Kopf: persönlich ---------- */
.wk .cart-head { padding-bottom: 14px !important; }
.wk-intro { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 0 26px 18px; }
.wk-intro img { width: 52px; height: 52px; object-fit: cover; object-position: 50% 17%; border-radius: 50%; background: var(--wk-bg1); }
.wk-intro p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wk-dim); max-width: none; }
.wk-intro b { color: var(--wk-text); font-weight: 600; }

/* ---------- Schritte ---------- */
.wk-steps { display: grid; grid-template-columns: 1fr 1fr; margin: 0 26px; border-top: 1px solid var(--wk-line); }
.wk-steps button {
  position: relative; background: none; border: 0; padding: 14px 0 12px; text-align: left; cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wk-dimmer);
}
.wk-steps button::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; transition: background .3s; }
.wk-steps button[aria-current="step"] { color: var(--wk-text); }
.wk-steps button[aria-current="step"]::before { background: var(--wk-white); }
.wk-steps button:disabled { cursor: default; }
.wk-steps button:focus-visible { outline: 2px solid var(--wk-text); outline-offset: 2px; }

/* Sichtbarkeit je Schritt */
.wk[data-step="1"] [data-wk="2"], .wk[data-step="2"] [data-wk="1"] { display: none !important; }

/* ---------- Schritt 1: Technik ---------- */
.wk .cart-tariff { margin-top: 18px !important; }
.wk-tariff-q, .wk-q { margin: 22px 26px 10px; font-size: 15px; color: var(--wk-text); }
.wk-tariff-q + .cart-tariff { margin-top: 0 !important; }
.wk .cs-cell:nth-child(2) { display: none !important; }            /* "Gesamtbetrag: Preis auf Anfrage" */
.wk .cart-sum { grid-template-columns: 1fr 1fr !important; }
.wk .cart-row .price { display: none !important; }                 /* je Zeile "Preis auf Anfrage" */
.wk .cart-row { padding: 18px 0 !important; align-items: center !important; }
.wk .cart-row .name { font-size: 16px !important; }
.wk .cart-row .qty-ctrl button { width: 34px; height: 34px; }
.wk .cart-total, .wk #cartWeight { display: none !important; }
.wk-price-note { margin: 4px 26px 0; font-size: 13px; line-height: 1.55; color: var(--wk-dimmer); }

.wk-empty { display: grid; gap: 10px; margin-top: 18px; }
.wk-empty .btn { justify-content: center; }
.wk .cart-empty p { color: var(--wk-dim); font-size: 15px; line-height: 1.6; }

.wk-next { display: grid; gap: 12px; }
.wk-next .btn { width: 100%; justify-content: center; }
.wk-next-sum { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wk-dim); }
.wk-next-sum b { color: var(--wk-text); font-weight: 400; }
.wk[data-step="1"] .cart-foot { padding-top: 16px !important; }
.wk .cart-clear { display: block; margin: 12px auto 0; }

/* ---------- Schritt 2: Deine Daten ---------- */
.wk[data-step="2"] .cart-foot { position: static !important; border-top: 0 !important; }
.wk-back { display: block; background: none; border: 0; padding: 0; margin: 22px 26px 0; cursor: pointer; color: var(--wk-dim);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.wk-back:hover { color: var(--wk-text); }
.wk .cart-ctype { margin: 0 26px !important; width: auto !important; }
.wk .cf-row label, .wk .cf-row.cf-two label, .wk .cf-check span {
  font-family: Barlow, system-ui, sans-serif !important; font-size: 14.5px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--wk-text) !important; margin-bottom: 8px !important; display: block;
}
.wk .cf-row input { height: 50px; font-size: 16px !important; padding: 0 16px !important; }
.wk .cart-contact { gap: 18px !important; }
.wk .cf-group-title {
  margin: 10px 0 4px !important; padding-top: 18px; border-top: 1px solid var(--wk-line);
  font-family: Barlow, system-ui, sans-serif !important; font-size: 17px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--wk-text) !important;
}
.wk .cf-hint { font-size: 13px !important; color: var(--wk-dimmer) !important; }
.wk-assure { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--wk-dim); }
.wk #cartSubmit { width: 100%; justify-content: center; margin-top: 18px; }

/* angehängte Packliste aus der Automatischen Anfrage */
.wk #cartSetup summary { font-size: 14.5px; }

@media (max-width: 520px) {
  .wk-intro, .wk-tariff-q, .wk-q, .wk-price-note { margin-left: 20px; margin-right: 20px; padding-left: 0; padding-right: 0; }
  .wk-intro { padding: 0 0 16px; }
  .wk-steps, .wk .cart-ctype, .wk-back { margin-left: 20px !important; margin-right: 20px !important; }
}