.svp-calc,
.svp-calc *,
.svp-calc *::before,
.svp-calc *::after { box-sizing: border-box; }

.svp-calc {
  --svp-red: #e31010;
  --svp-red2: #b50d0d;
  --svp-red-glow: rgba(227,16,16,.28);
  --svp-ink: #0a0a0a;
  --svp-ink2: #1a1a1a;
  --svp-ink3: #2a2a2a;
  --svp-bg3: #f8f8f8;
  --svp-white: #ffffff;
  --svp-f-disp: 'Bebas Neue', Impact, sans-serif;
  --svp-f-body: 'Rajdhani', system-ui, sans-serif;
  --svp-f-dash: 'Orbitron', ui-monospace, monospace;
  --svp-ease: cubic-bezier(.16,1,.3,1);
  --svp-fast: .22s;

  font-family: var(--svp-f-body);
  color: var(--svp-ink);
  background: var(--svp-bg3);
  border-top: 3px solid var(--svp-red);
  padding: 80px 28px;
}

.svp-calc-placeholder {
  padding: 20px;
  border: 1px dashed #d5d5d5;
  color: #777;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.svp-calc__wrap {
  max-width: 1340px;
  margin: 0 auto;
}

.svp-calc__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3px;
  align-items: start;
}

.svp-calc__main {
  min-width: 0;
}

/* ── Tabs ─────────────────────────────────── */
.svp-calc__tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
}
.svp-calc__tab {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--svp-f-disp);
  font-size: 1rem;
  letter-spacing: .08em;
  background: rgba(255,255,255,.04);
  color: rgba(0,0,0,.4);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  text-align: center;
}
.svp-calc__tab.is-active {
  color: var(--svp-ink);
  background: rgba(227,16,16,.1);
  border-bottom-color: var(--svp-red);
}

/* ── Panel ────────────────────────────────── */
.svp-calc__panel {
  display: none;
  background: var(--svp-ink2);
  padding: 28px;
}
.svp-calc__panel.is-active {
  display: block;
}

.svp-calc__note {
  font-family: var(--svp-f-dash);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 18px;
}

/* ── Add-ons ──────────────────────────────── */
.svp-calc__addons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svp-calc__addon {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  min-height: 0;
}

/* Align row contents to the top so the checkbox and price track the FIRST line of text when the name wraps to multiple lines. Small margin-top on the checkbox restores optical centering for single-line items. */
.svp-calc__addon { align-items: flex-start; }
.svp-calc__addon input[type="checkbox"] { margin-top: 2px; }
.svp-calc__addon-inner { align-items: flex-start; }
.svp-calc__addon:hover {
  background: rgba(227,16,16,.07);
  border-color: rgba(227,16,16,.2);
}
.svp-calc__addon input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--svp-red);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 0;
}
.svp-calc__addon-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 10px;
}
.svp-calc__addon-name {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.svp-calc__addon-price {
  font-family: var(--svp-f-disp);
  font-size: .95rem;
  color: var(--svp-red);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Summary ─────────────────────────────── */
.svp-calc__summary {
  background: var(--svp-ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.svp-calc__summary-title {
  font-family: var(--svp-f-dash);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 20px;
}
.svp-calc__summary-stage {
  font-family: var(--svp-f-disp);
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
}

.svp-calc__opts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 120px;
}
.svp-calc__opt-item {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.svp-calc__opt-item:last-child {
  border-bottom: none;
}
.svp-calc__opt-price {
  color: var(--svp-red);
  font-family: var(--svp-f-disp);
  font-size: .9rem;
  white-space: nowrap;
}
.svp-calc__opt-empty {
  font-size: .8rem;
  color: rgba(255,255,255,.25);
  padding-top: 8px;
}

.svp-calc__total-row {
  padding: 14px;
  background: rgba(227,16,16,.1);
  border: 1px solid rgba(227,16,16,.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.svp-calc__total-lbl {
  font-family: var(--svp-f-dash);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.svp-calc__total-num {
  font-family: var(--svp-f-disp);
  font-size: 2rem;
  letter-spacing: .06em;
  color: var(--svp-red);
  transition: transform .18s var(--svp-ease);
}

/* Form wrapper for cart submission: no layout box, no WC .cart interference */
.svp-calc__form,
.svp-calc__form.cart {
  display: contents;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Reset native <button> defaults when CTA renders as button */
button.svp-calc__cta {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: normal;
}

.svp-calc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--svp-f-disp);
  font-size: 1.05rem;
  letter-spacing: .06em;
  border: 1.5px solid var(--svp-red);
  background: var(--svp-red);
  color: var(--svp-white);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background var(--svp-fast), color var(--svp-fast),
              transform var(--svp-fast), box-shadow var(--svp-fast),
              border-color var(--svp-fast);
}
.svp-calc__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s var(--svp-ease);
  pointer-events: none;
}
.svp-calc__cta:hover::after { left: 140%; }
.svp-calc__cta:hover {
  background: var(--svp-red2);
  border-color: var(--svp-red2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--svp-red-glow);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1100px) {
  .svp-calc__layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .svp-calc { padding: 60px 18px; }
  .svp-calc__panel { padding: 22px 18px; }
  .svp-calc__summary { padding: 22px 18px; }
}


/* ===== Preiskalkulator tabs responsiveness ===== */
.svp-calc__tab {
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}
@media (max-width: 900px) {
  .svp-calc__tab {
    padding: 12px 10px;
    font-size: 0.85rem;
    letter-spacing: .04em;
  }
}
@media (max-width: 560px) {
  .svp-calc__tabs {
    flex-direction: column;
    gap: 4px;
  }
  .svp-calc__tab {
    flex: 1 1 auto;
    width: 100%;
    padding: 14px 12px;
    font-size: 0.9rem;
    letter-spacing: .05em;
    border-bottom: 2px solid transparent;
  }
}

/* ===== Preiskalkulator overflow guards ===== */

/* 1) Safety — prevent any horizontal overflow at any breakpoint */
.svp-calc, .svp-calc *, .svp-calc *::before, .svp-calc *::after {
  box-sizing: border-box;
}
.svp-calc { overflow-x: hidden; }
.svp-calc__wrap { max-width: 100%; }

/* 2) Long German addon names must wrap, not push the row */
.svp-calc__addon-name {
  min-width: 0;
  /* Wrap at word boundaries first; only break a long word when there is genuinely no room */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.3;
}
.svp-calc__addon-inner { min-width: 0; }

/* 3) Narrow phones (≤ 480px) — tighter padding so the panel doesn't crowd the edges */
@media (max-width: 480px) {
  .svp-calc { padding: 40px 12px; }
  .svp-calc__panel { padding: 18px 12px; }
  .svp-calc__addon { padding: 10px 12px; }
  .svp-calc__addon-name { font-size: .82rem; }
  .svp-calc__addon-price { font-size: .88rem; }
  .svp-calc__addon input[type="checkbox"] { margin-right: 10px; }
}

/* 4) Tiny phones (≤ 380px) — minimum comfortable spacing */
@media (max-width: 380px) {
  .svp-calc { padding: 32px 10px; }
  .svp-calc__panel { padding: 16px 10px; }
  .svp-calc__addon { padding: 10px 10px; }
  .svp-calc__addon-inner { gap: 8px; }
}