/**
 * TeraPrint Frontend Konfigurator v7
 * Design-Referenz: konfig-v7-reorder.html
 * border-radius: 0 everywhere, KEIN #000000, NUR Roboto
 */

/* ══════════════════════════════════════
   CSS VARIABLES & RESET
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap {
  --blue: var(--color-tp-link, #337ab7);
  --blue-dark: var(--color-tp-link-hover, #2a6a9e);
  --blue-light: var(--color-tp-primary-soft, #edf4fb);
  --orange: var(--color-tp-orange, #f36f21);
  --orange-light: color-mix(in srgb, var(--orange) 6%, transparent);
  --orange-border: color-mix(in srgb, var(--orange) 35%, transparent);
  --dark: var(--color-tp-text, #2d2d2d);
  --text: var(--color-tp-text, #2d2d2d);
  --text-muted: var(--color-tp-text-secondary, #6b7280);
  --text-faint: var(--color-tp-text-secondary, #6b7280);
  --border: var(--color-tp-border, #e0e0e0);
  --border-light: color-mix(in srgb, var(--border) 68%, var(--color-tp-bg-card, #ffffff));
  --border-faint: var(--color-tp-surface, #F5F7FA);
  --bg-gray: var(--color-tp-surface, #F5F7FA);
  --bg-gray-light: var(--color-tp-bg-elevated, #f8f9fb);
  --bg-white: var(--color-tp-bg-card, #fff);
  --green: #2e9e45;
  --green-dark: #059669;
  --green-bg: rgba(16,185,129,.06);
  --red: #dc3545;
  --red-dark: #dc3545;
  --tp-card-radius: 0;
  --tp-card-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --tp-card-border: 1px solid var(--border);
  --tp-card-bg: var(--bg-white);
  --tp-inner-radius: 0;

  /* Upload Redesign v2 — CI-konforme Farben */
  --upl-primary: #337ab7;
  --upl-primary-light: #edf4fb;
  --upl-primary-dark: #2a6a9e;
  --upl-accent: #f36f21;
  --upl-accent-light: rgba(243,111,33,.04);
  --upl-success: #2F9E44;
  --upl-success-light: #EBFBEE;
  --upl-danger: #E03131;
  --upl-danger-light: #FFF5F5;
  --upl-gray50: #F8F9FA;
  --upl-gray100: #F1F3F5;
  --upl-gray200: #E9ECEF;
  --upl-gray300: #DEE2E6;
  --upl-gray400: #ADB5BD;
  --upl-gray500: #868E96;
  --upl-gray600: #495057;
  --upl-gray700: #343A40;
  --upl-gray800: #212529;
  --upl-font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  font-family: 'Roboto', sans-serif;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.teraprint-konfigurator-wrap *,
.teraprint-konfigurator-wrap *::before,
.teraprint-konfigurator-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════
   .tp — MAIN CONFIGURATOR CONTAINER
   ══════════════════════════════════════ */
.tp {
  width: 100%;
  max-width: 560px;
  background: var(--bg-white);
  border: var(--tp-card-border, 1px solid var(--border));
  border-radius: var(--tp-card-radius, 0);
  box-shadow: var(--tp-card-shadow, 0 2px 12px rgba(0,0,0,0.08));
  overflow: hidden;
  font-size: 14px;
}

/* ══════════════════════════════════════
   HEADER (Blue bar + info-bar)
   ══════════════════════════════════════ */
.konf-header {
  background: var(--blue, #337ab7);
  color: #fff;
  padding: 10px 16px;
  border-bottom: none;
}
.konf-header h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.konf-info-bar {
  display: flex;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 8px 10px;
  overflow: visible;
}
.konf-info-bar:empty {
  display: none;
}
.info-badge {
  flex: 1;
  padding: 10px 8px;
  background: var(--bg-gray-light);
  text-align: center;
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
}
.info-badge__icon {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}
.info-badge__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-faint);
  font-weight: 600;
}
.info-badge__value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark);
}

.tp-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tp-head h1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}
.tp-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   SECTION HEADERS (reusable)
   ══════════════════════════════════════ */
.tp-sec-hd {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  gap: 6px;
}
.tp-step-num {
  width: 20px;
  height: 20px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-sec-t {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--dark);
  flex: 1;
}
.tp-sec-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-left: auto;
}

/* ══════════════════════════════════════
   OPTIONS (Pill Buttons)
   ══════════════════════════════════════ */
.tp-opts {
  padding: 10px 16px;
  border-bottom: none;
}
.tp-pills {
  display: flex;
  gap: 3px;
}
.tp-pill {
  flex: 1;
  padding: 6px 3px;
  text-align: center;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .12s;
  background: var(--bg-white);
  position: relative;
  min-width: 0;
}
.tp-pill:hover {
  border-color: var(--blue);
}
.tp-pill.on {
  border-color: var(--blue);
}
.tp-pill.on::after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  height: 2.5px;
  background: var(--blue);
}
.tp-pill[disabled],
.tp-pill.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Pill Icon */
.tp-pill-ic {
  width: 20px;
  height: 20px;
  margin: 0 auto 2px;
  background: var(--bg-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-pill.on .tp-pill-ic {
  background: rgba(51,122,183,.1);
}
.tp-pill-ic svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}
.tp-pill.on .tp-pill-ic svg {
  color: var(--blue);
}

/* Pill Text */
.tp-pill-n {
  font-size: 10px;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-pill-pr {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
}
.tp-pill-pr.free {
  color: var(--green);
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}

/* ══════════════════════════════════════
   OPTION TILES (2x2 / 3-col Grid)
   ══════════════════════════════════════ */
.tp-tile-grid {
  display: grid;
  gap: 6px;
}
.tp-tile-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tp-tile-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tp-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg-white);
  text-align: left;
  font-family: inherit;
  position: relative;
  min-height: 44px;
  overflow: visible;
}
.tp-tile:not(.on):hover {
  border-color: #c0c6ce;
}
.tp-tile.on {
  border-color: #337ab7 !important;
  background: #edf4fb !important;
  color: #2d2d2d !important;
}
.tp-tile-ic {
  font-size: 18px;
  width: 26px;
  height: 26px;
  background: rgba(51,122,183,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0;
}
.tp-tile.on .tp-tile-ic,
.tp-tile.on .tp-tile-ico {
  background: rgba(51, 122, 183, 0.15) !important;
}
.tp-tile.on .tp-tile-n {
  color: #337ab7 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
/* .tp-tile-sub entfernt — wird nicht mehr gerendert, ersetzt durch tp-tile-info */
.tp-tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tp-tile-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.2;
  word-break: break-word;
}
/* .tp-tile-sub entfernt — ersetzt durch tp-tile-info (Tooltip-Icon) */
.tp-tile-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff !important;
  background: #16a34a !important;
  padding: 3px 8px !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  letter-spacing: .3px;
  white-space: nowrap;
  text-transform: uppercase !important;
}
/* Badge bleibt grün auch im selected State */
.tp-tile.on .tp-tile-badge {
  background: #16a34a !important;
  color: #fff !important;
}
/* Info-Icon ⓘ oben rechts im Tile */
.tp-tile-info {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  color: #337ab7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.15s;
  line-height: 1;
  z-index: 2;
}
.tp-tile:hover .tp-tile-info {
  opacity: 1;
  background: rgba(51, 122, 183, 0.12);
  color: #337ab7;
}
/* Tooltip */
.tp-tile-tooltip {
  position: fixed;
  transform: translateX(-50%);
  background: #fff;
  color: #2d2d2d;
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  pointer-events: none;
}
.tp-tile-price {
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
  white-space: nowrap;
}

.tp-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 9px 10px;
  cursor: pointer;
  background: var(--bg-white);
  min-height: 44px;
  transition: all 0.15s;
}
.tp-radio:not(.on):hover {
  border-color: #c0c6ce;
}
.tp-radio.on {
  border-color: #337ab7 !important;
  background: #edf4fb !important;
}
.tp-radio-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #337ab7;
  flex-shrink: 0;
}
.tp-radio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tp-radio-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
  word-break: break-word;
}
.tp-radio.on .tp-radio-n {
  color: #337ab7 !important;
  font-weight: 700 !important;
}
.tp-radio-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff !important;
  background: #16a34a !important;
  padding: 3px 8px !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  letter-spacing: .3px;
  white-space: nowrap;
  text-transform: uppercase !important;
}
.tp-radio-price {
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   SECTION INFO ICON — blauer Kreis
   ═══════════════════════════════════════ */
.tp-sec-info {
  position: relative;
  display: inline-flex;
}
.tp-sec-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #337ab7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  border: none;
  outline: none;
  flex-shrink: 0;
}
.tp-sec-info-btn:hover {
  background: #2968a0;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(51,122,183,0.15);
}
.tp-sec-info-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #2d2d2d;
  padding: 12px 14px 12px 16px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  width: 280px;
  z-index: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  pointer-events: none;
  
}
.tp-sec-info-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05));
}
.tp-sec-info-btn:hover + .tp-sec-info-tip,
.tp-sec-info-btn:focus + .tp-sec-info-tip {
  display: block;
}
.tp-tip-line {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
}
.tp-tip-line:first-child {
  margin-top: 0;
}
.tp-tip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #337ab7;
  flex-shrink: 0;
  margin-top: 6px;
}
.tp-sec-info-tip strong {
  font-weight: 600;
  color: #337ab7;
}

/* Text Input Step (inline) */
.tp-text-input-wrap {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
}
.tp-text-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  color: var(--dark);
  transition: border-color .12s;
  outline: none;
}
.tp-text-input:focus {
  border-color: var(--blue);
}
.tp-text-char-count {
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 3px;
}

/* Dependency reason label — see B4 section for full styles */

/* ═══════════════════════════════════════
   STAFFELPREISE — Connected Segments
   ═══════════════════════════════════════ */

/* =============================================
   STAFFELPREISE - Slider Track + Progress v2
   ============================================= */
.tp-tiers {
  padding: 8px 16px 10px;
}
.tp-tiers-wrap {
  padding: 0;
}

/* Header: Mengenrabatt + Stufen-Tag */
.tp-tiers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tp-tiers-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tp-tiers-current-tag {
  font-size: 11px;
  font-weight: 600;
  color: #337ab7;
  background: #fff9f5;
  padding: 2px 8px;
  border-radius: 0;
}

/* Progress-Bar: duenne Segmente */
.tp-tiers-progress {
  display: none;
  gap: 2px;
  margin-bottom: 10px;
}
.tp-tiers-seg {
  flex: 1;
  height: 3px;
  background: #eef0f3;
  border-radius: 0;
  transition: background 0.3s;
}
.tp-tiers-seg--filled {
  background: #337ab7;
}

/* Slider Track */
.tp-tiers-track {
  position: relative;
  padding-bottom: 4px;
}
.tp-tiers-track__line {
  position: absolute;
  top: 5px;
  left: 4px;
  right: 4px;
  height: 3px;
  background: #eef0f3;
  border-radius: 0;
  z-index: 0;
}
.tp-tiers-track__fill {
  position: absolute;
  top: 5px;
  left: 4px;
  height: 3px;
  background: linear-gradient(90deg, #337ab7, #2a6a9e);
  border-radius: 0;
  z-index: 1;
  transition: width 0.4s ease;
}
.tp-tiers-stops {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.tp-tiers-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1;
  transition: opacity 0.15s;
}
.tp-tiers-stop--future {
  opacity: 0.35;
}
.tp-tiers-stop--future:hover {
  opacity: 0.6;
}

/* Dots */
.tp-tiers-stop__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #dde0e4;
  margin-bottom: 5px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.tp-tiers-stop--passed .tp-tiers-stop__dot {
  border-color: #337ab7;
  background: #fff9f5;
}
.tp-tiers-stop--active .tp-tiers-stop__dot {
  border-color: #337ab7;
  background: #337ab7;
  box-shadow: 0 0 0 3px rgba(51,122,183,0.12);
}

/* Preis */
.tp-tiers-stop__price {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  line-height: 1;
}
.tp-tiers-stop--active .tp-tiers-stop__price {
  color: #337ab7;
  font-size: 14px;
}
.tp-tiers-stop--passed .tp-tiers-stop__price {
  color: #337ab7;
}

/* Name */
.tp-tiers-stop__name {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-top: 1px;
}
.tp-tiers-stop--active .tp-tiers-stop__name {
  color: #337ab7;
}

/* Schwellenwert */
.tp-tiers-stop__range {
  font-size: 10px;
  color: #6b7280;
  margin-top: 1px;
}
.tp-tiers-stop--active .tp-tiers-stop__range {
  color: #337ab7;
}

/* Ersparnis-Badge */
.tp-tiers-stop__save {
  font-size: 10px;
  font-weight: 600;
  color: #16a34a;
  margin-top: 2px;
}

/* Incentive-Bar */
.tp-tiers-incentive {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
  padding: 6px 10px;
  background: #f0fdf4;
  border-radius: 0;
  border: 1px solid rgba(22,163,74,0.12);
  font-weight: 500;
  transition: all 0.2s;
}
.tp-tiers-incentive b {
  font-weight: 700;
  color: #2d2d2d;
}
.tp-tiers-incentive__save {
  color: #16a34a !important;
}
.tp-tiers-incentive[data-state="hidden"] {
  display: none;
}

/* Legacy: alte Klassen Fallback */
.tp-tiers-bar {
  display: none;
}


/* ═══════════════════════════════════════
   PREIS-SUMMARY — Card-Design v7
   Gleicher weisser BG wie andere Sections
   ═══════════════════════════════════════ */
.tp-price-sec {
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f3;
  background: #fff;
}
.tp-ps-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 15px 3px 18px; /* Einrueckung buendig mit Card-Inhalt */
}
.tp-ps-label {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.tp-ps-value {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}
.tp-ps-divider {
  border: none;
  border-top: 1px solid #eef0f3;
  margin: 8px 15px 8px 18px; /* buendig mit Rows */
}
/* --- Inner-Card fuer Gesamt-Zeile --- */
.tp-ps-total {
  background: #fff9f5;
  border: 1.5px solid #f36f21;
  
  border-radius: 0;
  padding: 10px 14px;
  margin-top: 8px;
}
.tp-ps-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tp-ps-total-label {
  font-size: 12px;
  font-weight: 600;
  color: #1a2332;
}
.tp-ps-total-value {
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #f36f21;
}
.tp-ps-tax {
  text-align: right;
  font-size: 10px;
  color: #6b7280;
  margin-top: 1px;
}
/* --- Footer: Mindest + Lieferung --- */
.tp-ps-footer {
  margin-top: 10px;
}
.tp-ps-min {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #337ab7;
}
.tp-ps-min--ok {
  color: #16a34a;
}
.tp-ps-delivery {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #6b7280;
  margin-top: 6px;
}

/* Mindestmengen-Hinweis */
.tp-tier-min-hint {
  font-size: 12px;
  color: #92400e;
  background: #FFF7ED;
  padding: 6px 12px;
  margin: 0 18px 8px;
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
}

/* ═══════════════════════════════════════
   META-ZEILE — volle Breite, gestreckt
   ═══════════════════════════════════════ */
.tp-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid #eef0f3;
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}
.tp-meta-bar span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════
   HOVER-EFFEKTE — klickbare Elemente
   ═══════════════════════════════════════ */

/* Dropzone / Upload-Zone */
.tp-upl-zone:hover,
.upload-zone:hover,
.tp-upl-zone-v2:hover {
  background: var(--upl-primary-light, #e4eef7) !important;
  border-color: var(--upl-primary, #2968a0) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(43,108,176,0.1);
}

/* CTA-Button Hover (aktiv) */
.tp-cta:not(.tp-cta--disabled):not(.tp-cta--loading):not(.tp-cta--success):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(243,111,33,0.3);
}

/* Datei-Cards Hover */
.tp-fc:hover,
.tp-fc-v2:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Quantity Buttons Hover */
.tp-stk-b:hover {
  background: rgba(51,122,183,0.1);
  color: #337ab7;
}

/* ═══════════════════════════════════════
   CTA — DISABLED STATE (vor Upload)
   ═══════════════════════════════════════ */
.tp-cta--disabled {
  background: #6b7280 !important;
  cursor: default !important;
  pointer-events: none;
}

/* ══════════════════════════════════════
   DELIVERY INFO LINE
   ══════════════════════════════════════ */
.tp-delivery-info {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text-muted);
  border-radius: var(--tp-inner-radius);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-gray-light);
}

/* ══════════════════════════════════════
   EXPRESS BOX
   ══════════════════════════════════════ */
.tp-express {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 10px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--tp-inner-radius);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-express:hover {
  border-color: var(--orange);
}
.tp-express.on {
  border-color: var(--orange);
  background: #fff8f3;
}
.tp-express__icon {
  font-size: 24px;
  flex-shrink: 0;
}
.tp-express__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tp-express__body strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
}
.tp-express__body span {
  font-size: 10px;
  color: var(--text-muted);
}
.tp-express__badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(243,111,33,.08);
  padding: 3px 8px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   INNER CARD SECTIONS
   ══════════════════════════════════════ */
.tp-opts,
.tp-upl {
  margin: 6px 10px;
  background: var(--bg-gray-light);
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
}
.tp-trow {
  margin: 6px 10px;
  padding: 6px;
  background: var(--bg-gray-light);
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
}
.tp-delivery-info {
  margin: 0 10px;
  border-radius: var(--tp-inner-radius);
}
.tp-express {
  border-radius: var(--tp-inner-radius) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.konf-info-bar {
  border-radius: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════
   UPLOAD ZONE v2
   ══════════════════════════════════════ */
.tp-upl {
  padding: 10px 16px;
  border-bottom: none;
  font-family: var(--upl-font);
}
.tp-upl .tp-sec-hd,
.tp-files-v2 .tp-sec-hd {
  font-family: var(--upl-font);
}

/* ── Druckvorlagen-Download im Upload-Step ── */
.tp-template-downloads {
  background: #f0f6fb;
  border-left: 3px solid #337ab7;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
}
.tp-template-downloads__title {
  font-weight: 600;
  color: #2d2d2d;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-template-downloads__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-template-downloads__link {
  color: #337ab7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.tp-template-downloads__link:hover {
  text-decoration: underline;
}
.tp-template-downloads__badge {
  font-size: 10px;
  padding: 1px 5px;
  background: #e8f0f8;
  color: #337ab7;
  border-radius: 0;
  font-weight: 500;
}
.tp-template-downloads__hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

/* State 1: Empty Dropzone */
.tp-upl-zone-v2 {
  border: 2px dashed var(--upl-gray300);
  border-radius: 0;
  padding: 32px 20px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: transparent;
}
.tp-upl-zone-v2:hover {
  border-color: var(--upl-primary);
  background: var(--upl-primary-light);
}
.tp-upl-zone-v2.dragover,
.tp-upl-zone-v2.drag-over {
  border-color: var(--upl-primary);
  background: var(--upl-primary-light);
  transform: scale(1.01);
}
.tp-upl-zone-v2 .tp-upl-ic-v2 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-upl-zone-v2 .tp-upl-ic-v2 svg {
  width: 40px;
  height: 40px;
  stroke: var(--upl-primary);
}
.tp-upl-zone-v2 .tp-upl-txt-v2 {
  font-family: var(--upl-font);
  font-size: 14px;
  color: var(--upl-gray600);
  line-height: 1.5;
}
.tp-upl-zone-v2 .tp-upl-txt-v2 .tp-upl-browse {
  color: var(--upl-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tp-upl-zone-v2 .tp-upl-sub {
  font-family: var(--upl-font);
  font-size: 12px;
  color: var(--upl-gray500);
}

/* State 2: Upload Progress Card */
.tp-upl-progress-card {
  border: 1.5px solid var(--upl-primary-light);
  border-radius: 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(235,244,255,0.44), white);
  font-family: var(--upl-font);
}
.tp-upl-progress-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.tp-upl-progress-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--upl-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-upl-progress-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--upl-primary);
}
.tp-upl-progress-info {
  flex: 1;
  min-width: 0;
}
.tp-upl-progress-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--upl-gray800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-upl-progress-size {
  font-size: 11px;
  color: var(--upl-gray500);
  margin-top: 2px;
}
.tp-upl-progress-pct {
  font-size: 20px;
  font-weight: 800;
  color: var(--upl-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tp-upl-progress-bar-outer {
  height: 6px;
  background: var(--upl-gray200);
  border-radius: 0;
  overflow: hidden;
}
.tp-upl-progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--upl-primary), #4DABF7);
  border-radius: 0;
  transition: width 0.4s ease;
  width: 0%;
}
.tp-upl-progress-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--upl-gray500);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════
   FILES v2
   ══════════════════════════════════════ */
.tp-files-v2 {
  padding: 4px 10px 6px;
  font-family: var(--upl-font);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* File Card v2 */
.tp-fc-v2 {
  border: 1.5px solid var(--upl-success-light);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  font-family: var(--upl-font);
}
.tp-fc-v2--pending {
  border-color: var(--upl-primary-light);
}
.tp-fc-v2--error {
  border-color: var(--upl-danger-light);
}

/* A24: Invalid field highlight for validation */
.tp-fc-v2--invalid {
  outline: 2px solid var(--upl-danger);
  outline-offset: -1px;
  animation: tp-shake .3s ease;
}
@keyframes tp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* File Card Header */
.tp-fc-v2-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--upl-success-light), white);
}
.tp-fc-v2--pending .tp-fc-v2-header {
  background: linear-gradient(135deg, rgba(235,244,255,0.44), white);
}
.tp-fc-v2--error .tp-fc-v2-header {
  background: linear-gradient(135deg, var(--upl-danger-light), white);
}

/* Thumbnail */
.tp-fc-v2-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: linear-gradient(135deg, #a8e6cf, #88d8a8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.tp-fc-v2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Lazy-load thumbnail: placeholder state */
.tp-fc-v2-thumb img.tp-thumb-lazy {
  background: linear-gradient(135deg, #e0e0e0 25%, #eef0f3 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: tp-thumb-shimmer 1.2s ease infinite;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
@keyframes tp-thumb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lazy-load thumbnail: loaded state — fade in */
.tp-fc-v2-thumb img.tp-thumb-loaded {
  animation: tp-thumb-fadein 0.15s ease forwards;
}
@keyframes tp-thumb-fadein {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.tp-fc-v2-thumb-ph {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
.tp-fc-v2-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.tp-fc-v2-check svg {
  width: 14px;
  height: 14px;
}

/* PDF badge */
.tp-fc-v2-badge-pdf {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #dc3545;
  color: #fff;
  font: 700 8px/1 var(--upl-font);
  padding: 2px 4px;
  border-radius: 0;
  letter-spacing: 0.5px;
  z-index: 1;
}

/* Header Info */
.tp-fc-v2-hinfo {
  flex: 1;
  min-width: 0;
}
.tp-fc-v2-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--upl-gray800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-fc-v2-meta {
  font-size: 11.5px;
  color: var(--upl-gray500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tp-fc-v2-meta-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--upl-gray400);
  border-radius: 50%;
}
.tp-fc-v2-dpi-warn {
  color: var(--upl-accent);
  font-weight: 700;
}

/* Header Actions */
.tp-fc-v2-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tp-fc-v2-act-btn {
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: 1px solid var(--upl-gray200);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  color: var(--upl-gray500);
}
.tp-fc-v2-act-btn--edit:hover {
  border-color: var(--upl-primary);
  color: var(--upl-primary);
}
.tp-fc-v2-act-btn--del:hover {
  border-color: var(--upl-danger);
  color: var(--upl-danger);
}
.tp-fc-v2-act-btn svg {
  width: 14px;
  height: 14px;
}

/* Details Grid */
.tp-fc-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--upl-gray100);
  margin: 0;
}
.tp-fc-v2-grid-cell {
  background: #fff;
  padding: 6px 12px;
}
.tp-fc-v2-grid-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--upl-gray400);
  font-weight: 600;
  margin-bottom: 2px;
}
.tp-fc-v2-grid-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--upl-gray800);
}
.tp-fc-v2-grid-val--warn {
  color: var(--upl-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-fc-v2-grid-val--warn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* DPI Warning Box */
.tp-fc-v2-dpi-box {
  background: var(--upl-accent-light);
  border-radius: 0;
  padding: 7px 12px;
  margin: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-fc-v2-dpi-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--upl-accent);
}
.tp-fc-v2-dpi-box span {
  font-size: 12px;
  color: var(--upl-accent);
  font-weight: 500;
}

/* Quantity Row */
.tp-fc-v2-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--upl-gray100);
}
.tp-fc-v2-qty-label {
  font-size: 12px;
  color: var(--upl-gray500);
}
.tp-fc-v2-qty-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Quantity Stepper v2 */
.tp-stk-v2 {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--upl-gray200);
  border-radius: 0;
  overflow: hidden;
}
.tp-stk-v2-btn {
  width: 32px;
  height: 30px;
  background: var(--upl-gray50);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--upl-gray600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  line-height: 1;
}
.tp-stk-v2-btn:hover {
  background: var(--upl-gray200);
}
.tp-stk-v2-val {
  width: 36px;
  height: 30px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--upl-gray200);
  border-right: 1.5px solid var(--upl-gray200);
  font: 700 13px var(--upl-font);
  color: var(--upl-gray800);
  background: #fff;
  outline: none;
}
.tp-fc-v2-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--upl-gray800);
  white-space: nowrap;
}

/* File Counter */
.tp-file-counter {
  font-size: 12px;
  color: #6b7280;
  padding: 4px 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

/* Add More Button */
.tp-upl-add-btn {
  border: 1.5px dashed var(--upl-gray300);
  border-radius: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s ease;
  width: 100%;
  font-family: var(--upl-font);
}
.tp-upl-add-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--upl-gray500);
  transition: stroke .15s ease;
}
.tp-upl-add-btn span {
  font-size: 13px;
  font-weight: 600;
  color: var(--upl-gray500);
  transition: color .15s ease;
}
.tp-upl-add-btn:hover {
  border-color: var(--upl-primary);
  background: var(--upl-primary-light);
}
.tp-upl-add-btn:hover svg {
  stroke: var(--upl-primary);
}
.tp-upl-add-btn:hover span {
  color: var(--upl-primary);
}

/* Summary Card */
.tp-upl-summary {
  border: 1.5px solid rgba(43,108,176,0.22);
  border-radius: 0;
  background: linear-gradient(135deg, white, rgba(235,244,255,0.33));
  padding: 12px 14px;
  font-family: var(--upl-font);
}
.tp-upl-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tp-upl-summary-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--upl-gray400);
  font-weight: 600;
}
.tp-upl-summary-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--upl-success);
  background: var(--upl-success-light);
  padding: 2px 8px;
  border-radius: 0;
}
.tp-upl-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.tp-upl-summary-row-label {
  font-size: 13px;
  color: var(--upl-gray500);
}
.tp-upl-summary-row-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--upl-gray800);
}
.tp-upl-summary-divider {
  height: 1px;
  background: var(--upl-gray200);
  margin: 6px 0;
}
.tp-upl-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tp-upl-summary-total-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--upl-gray800);
}
.tp-upl-summary-total-right {
  text-align: right;
}
.tp-upl-summary-total-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--upl-accent);
  line-height: 1.1;
}
.tp-upl-summary-total-vat {
  font-size: 11.5px;
  color: var(--upl-gray400);
  margin-top: 2px;
}

/* Pending spinner for v2 card */
.tp-fc-v2-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--upl-primary-light);
  border-top-color: var(--upl-primary);
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
}

/* Breite-exceeded warning */
.tp-fc-v2-width-warn {
  background: var(--upl-danger-light);
  border-radius: 0;
  padding: 10px 14px;
  margin: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--upl-danger);
  font-weight: 500;
}

/* ══════════════════════════════════════
   PRICE BREAKDOWN
   ══════════════════════════════════════ */
.tp-price {
  padding: 10px 16px;
  margin: 6px 10px;
  background: var(--bg-gray-light);
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
}
.tp-price-lines {
  margin-bottom: 8px;
}
.tp-pl {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 12px;
}
.tp-pl-l {
  color: var(--text-muted);
}
.tp-pl-v {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  color: var(--dark);
}
.tp-pl-v.green {
  color: var(--green);
}
.tp-pl-sep {
  height: 1px;
  background: #e2e5ea;
  margin: 4px 0;
}

/* Total */
.tp-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}
.tp-total-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
}
.tp-total-r {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.tp-total-pr {
  font-size: 24px;
  font-weight: 900;
  color: var(--blue);
  font-family: 'Roboto Mono', monospace;
  letter-spacing: -1px;
  line-height: 1;
}
.tp-total-vat {
  font-size: 10px;
  color: var(--text-faint);
}
.tp-min {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
}
/* A30: Matrix-Overflow Warnung */
.tp-min--warn {
  color: #b45309;
  background: #FFF7ED;
  padding: 4px 8px;
}

/* Mindestpreis-Warnung */
.tp-min-notice {
  background: #fef5ee;
  border-left: 4px solid #f36f21;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #2d2d2d;
}
.tp-min-notice__icon {
  color: #f36f21;
}
.tp-min-notice__cur {
  color: var(--text-muted);
}
.tp-min-notice__hint {
  font-weight: 600;
  font-size: 12px;
}

/* Berechneter Preis (abgeschwaecht wenn Mindestpreis greift) */
.tp-calc-price--muted {
  opacity: 0.5;
}
.tp-calc-price--muted .tp-pl-v {
  text-decoration: line-through;
}

/* Mindestpreis-Zeile (prominent) */
.tp-min-price-row {
  font-weight: 600;
}
.tp-min-price-row .tp-pl-v {
  color: var(--blue);
  font-weight: 700;
}

/* Price upload hint (no files yet) */
.tp-price-hint {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 14px;
}
.tp-price-hint-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}

/* ══════════════════════════════════════
   CTA BUTTON
   ══════════════════════════════════════ */
.tp-cta {
  display: block;
  width: calc(100% - 20px);
  margin: 8px 10px 10px;
  padding: 14px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--tp-inner-radius);
  font: 700 13px 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.tp-cta:hover {
  background: #e05e10;
}
.tp-cta:disabled,
.tp-cta.disabled {
  background: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.6;
}
.tp-cta--success {
  background: #2e9e45;
}
.tp-cta--success:hover {
  background: #2e9e45;
}
/* A23: Mindestmengen-Hinweis */
.tp-tier-min-hint {
  padding: 6px 14px;
  margin: 0 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  background: rgba(243,111,33,.06);
  border: 1px solid rgba(243,111,33,.2);
  border-radius: var(--tp-inner-radius);
  text-align: center;
}
.tp-cta--loading {
  background: var(--orange);
  opacity: 0.8;
  pointer-events: none;
  cursor: wait;
}
.tp-cta--loading .tp-cta-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tp-spin .6s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

/* ══════════════════════════════════════
   TRUST LINE
   ══════════════════════════════════════ */
.tp-trust {
  padding: 8px 10px 10px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 10px;
  color: var(--text-faint);
  background: var(--bg-gray-light);
}

/* ══════════════════════════════════════
   SPINNER
   ══════════════════════════════════════ */
.tp-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  animation: tp-spin .6s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   NOTIFICATION
   ══════════════════════════════════════ */
#teraprintNotification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  padding: 14px 24px;
  background: #2d2d2d;
  color: #fff;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: opacity .3s;
  opacity: 0;
  max-width: 400px;
}

/* ══════════════════════════════════════
   MODAL (Resize Modal — keep existing)
   ══════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}
.modal-content {
  background: #fff;
  width: 90%;
  max-width: 1040px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.modal-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
}
.modal-close {
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.modal-close:hover {
  color: var(--red);
  border-color: var(--red);
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.modal-btn {
  padding: 8px 20px;
  font: 600 13px 'Roboto', sans-serif;
  border: none;
  cursor: pointer;
  transition: all .12s;
}
.modal-btn--cancel {
  background: var(--bg-gray);
  color: var(--text-muted);
}
.modal-btn--cancel:hover {
  background: var(--border);
}
.modal-btn--apply {
  background: var(--blue);
  color: #fff;
}
.modal-btn--apply:hover {
  background: var(--blue-dark);
}

/* Modal Dims */
.modal-dims {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.modal-field {
  flex: 1;
}
.modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.modal-field input {
  width: 100%;
  padding: 8px 10px;
  font: 500 14px 'Roboto Mono', monospace;
  border: 1.5px solid var(--border);
  color: var(--dark);
  outline: none;
  transition: border-color .12s;
}
.modal-field input:focus {
  border-color: var(--blue);
}
.modal-lock {
  width: 36px;
  height: 36px;
  margin-top: 18px;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.modal-lock--active {
  background: var(--blue-light);
  border-color: var(--blue);
}
.modal-info-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.modal-distort-preview {
  border: 1px solid var(--border);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-preview-area {
  background: #fff;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.modal-preview-area--dark {
  background: #2d2d2d;
}
.modal-distort-placeholder {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-faint);
}
.modal-distort-warning {
  padding: 8px 12px;
  background: rgba(239,68,68,.08);
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}
.tp-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.tp-modal-bg-toggle {
  padding: 3px 8px;
  font-size: 12px;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  transition: all .12s;
}
.tp-modal-bg-toggle--dark {
  background: #2d2d2d;
  color: #fff;
  border-color: #6b7280;
}

/* ══════════════════════════════════════
   SHARE MODAL
   ══════════════════════════════════════ */
.tp-share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}
.tp-share-modal {
  background: #fff;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.tp-share-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 700;
  font-size: 14px;
}
.tp-share-modal__close {
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-share-modal__body {
  padding: 16px;
}
.tp-share-modal__body p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tp-share-modal__url-row {
  display: flex;
  gap: 6px;
}
.tp-share-modal__input {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--dark);
  background: var(--bg-gray);
}
.tp-share-modal__copy {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.tp-share-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.tp-share-modal__btn {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--dark);
  transition: all .12s;
}
.tp-share-modal__btn:hover {
  background: var(--bg-gray);
}

/* ══════════════════════════════════════
   STANDALONE PAGE LAYOUT (Sidebar + Product)
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap .page-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 250px 1fr 416px;
  gap: 10px;
  align-items: start;
}

/* Sidebar */
.teraprint-konfigurator-wrap .sidebar {
  background: #fff;
  border: 1px solid var(--border);
  align-self: stretch;
}
.teraprint-konfigurator-wrap .sidebar-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
  background: var(--blue);
}
.teraprint-konfigurator-wrap .sidebar-nav {
  list-style: none;
}
.teraprint-konfigurator-wrap .sidebar-cat {
  border-bottom: 1px solid var(--border);
}
.teraprint-konfigurator-wrap .sidebar-cat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s;
}
.teraprint-konfigurator-wrap .sidebar-cat__header:hover {
  background: var(--bg-gray);
}
.teraprint-konfigurator-wrap .sidebar-cat__arrow {
  font-size: 10px;
  color: var(--text-muted);
}
.teraprint-konfigurator-wrap .sidebar-product {
  padding: 8px 14px 8px 24px;
  font-size: 14px;
  cursor: pointer;
  transition: all .12s;
  border-left: 3px solid transparent;
}
.teraprint-konfigurator-wrap .sidebar-product:hover {
  background: var(--bg-gray);
}
.teraprint-konfigurator-wrap .sidebar-product--active {
  background: var(--blue-light);
  border-left-color: var(--blue);
  font-weight: 600;
}

/* Product Main */
.teraprint-konfigurator-wrap .product-main {
  padding: 0 10px;
}
.teraprint-konfigurator-wrap .breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.teraprint-konfigurator-wrap .bc-item--active {
  color: var(--dark);
  font-weight: 600;
}
.teraprint-konfigurator-wrap .gallery-main {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.teraprint-konfigurator-wrap .gallery-placeholder {
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}
.teraprint-konfigurator-wrap .gallery-placeholder .icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.teraprint-konfigurator-wrap .pro-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--blue);
  color: #fff;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.teraprint-konfigurator-wrap .gallery-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.teraprint-konfigurator-wrap .gallery-thumb {
  flex: 1;
  aspect-ratio: 1;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
  transition: border-color .12s;
}
.teraprint-konfigurator-wrap .gallery-thumb--active,
.teraprint-konfigurator-wrap .gallery-thumb:hover {
  border-color: var(--blue);
}
.teraprint-konfigurator-wrap .product-title-area {
  margin-top: 12px;
}
.teraprint-konfigurator-wrap .product-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark);
}
.teraprint-konfigurator-wrap .product-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* Konfigurator wrapper in standalone */
.teraprint-konfigurator-wrap .tp {
  background: #fff;
  border: 1px solid var(--border);
}
.teraprint-konfigurator-wrap .konf-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.teraprint-konfigurator-wrap .konf-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

/* Info bar (standalone) */
.teraprint-konfigurator-wrap .konf-info-bar {
  display: flex;
  gap: 6px;
  background: transparent;
  border: none;
}
.teraprint-konfigurator-wrap .info-badge {
  flex: 1;
  padding: 10px 8px;
  background: var(--bg-gray-light);
  text-align: center;
  font-size: 12px;
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
}
.teraprint-konfigurator-wrap .info-badge__icon {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}
.teraprint-konfigurator-wrap .info-badge__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-faint);
}
.teraprint-konfigurator-wrap .info-badge__value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark);
}

/* ══════════════════════════════════════
   EMBED MODE OVERRIDES
   ══════════════════════════════════════ */
.teraprint-embed-mode {
  margin-top: 8px;
}
.teraprint-embed-mode .tp {
  max-width: 100%;
  border: var(--tp-card-border, 1px solid #dde3ea);
  border-radius: var(--tp-card-radius, 0);
  box-shadow: var(--tp-card-shadow, 0 1px 4px rgba(0,0,0,0.06));
  overflow: hidden;
}
.teraprint-embed-mode .sidebar,
.teraprint-embed-mode .product-main {
  display: none !important;
}
.teraprint-embed-mode .page-wrap {
  display: block;
  padding: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 1100px) {
  .teraprint-konfigurator-wrap .page-wrap {
    grid-template-columns: 200px 1fr;
    gap: 8px;
  }
  .teraprint-konfigurator-wrap .product-main {
    display: none;
  }
}

@media (max-width: 768px) {
  .teraprint-konfigurator-wrap .page-wrap {
    display: block;
    padding: 0;
  }
  .teraprint-konfigurator-wrap .sidebar {
    display: none;
  }
}

@media (max-width: 560px) {
  .tp {
    border-left: none;
    border-right: none;
  }

  /* Pills wrap on mobile */
  .tp-pills {
    flex-wrap: wrap;
  }
  .tp-pill {
    min-width: calc(50% - 2px);
  }

  /* Tier buttons smaller */
  .tp-t-p {
    font-size: 12px;
  }
  .tp-t-r {
    display: none;
  }

  /* File cards wrap */
  .tp-fc {
    flex-wrap: wrap;
  }
  .tp-fc-right {
    width: 100%;
    justify-content: flex-end;
    padding-top: 4px;
  }
  /* v2 file card responsive */
  .tp-fc-v2-grid {
    grid-template-columns: 1fr;
  }
  .tp-fc-v2-header {
    flex-wrap: wrap;
  }
  .tp-fc-v2-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }

  /* Total price smaller */
  .tp-total-pr {
    font-size: 24px;
  }
}

/* ══════════════════════════════════════
   PRINT
   ══════════════════════════════════════ */
@media print {
  .teraprint-konfigurator-wrap .sidebar,
  .teraprint-konfigurator-wrap .gallery-thumbs,
  .tp-upl,
  .tp-cta,
  .tp-trust {
    display: none !important;
  }
  .tp {
    border: none;
    box-shadow: none;
  }
}

/* ══════════════════════════════════════
   PRODUCT PAGE LAYOUT (restored from pre-v7)
   ══════════════════════════════════════ */
.tp-product-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 250px 1fr 416px;
  gap: 12px;
  align-items: start;
  font-family: 'Roboto', sans-serif;
}

/* Reset box-sizing within our layout */
.tp-product-page *,
.tp-product-page *::before,
.tp-product-page *::after {
  box-sizing: border-box;
}

/* WooCommerce Breadcrumb inside TeraPrint product page */
.tp-product-page .woocommerce-breadcrumb,
.tp-layout-v25 .woocommerce-breadcrumb {
  font-size: 12px !important;
  color: #6b7280 !important;
  padding: 6px 0;
  margin: 0;
}
.tp-product-page .woocommerce-breadcrumb a,
.tp-layout-v25 .woocommerce-breadcrumb a {
  color: #6b7280 !important;
  text-decoration: none;
  font-size: 12px !important;
}
.tp-product-page .woocommerce-breadcrumb a:hover,
.tp-layout-v25 .woocommerce-breadcrumb a:hover {
  color: #337ab7 !important;
}

/* Sidebar aligns to top of row */
.tp-row .tp-block--sidebar {
  align-self: start !important;
}

/* ── COLUMN 2: Product Main ── */
.tp-product-main {
  min-width: 0;
}

.tp-product-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Gallery */
.tp-product-gallery {
  width: 100%;
  position: relative;
}

/* ── Gallery Slideshow ── */
.tp-gallery-slideshow {
  position: relative;
  width: 100%;
}

.tp-gallery-main {
  width: 100%;
  overflow: hidden;
  background: #f8f8f8;
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tp-gallery-main img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.tp-gallery-main video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Slideshow Arrows */
.tp-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--tp-dark, #2d2d2d);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.tp-slide-arrow:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.tp-slide-prev {
  left: 10px;
}

.tp-slide-next {
  right: 10px;
}

/* Slideshow Dots */
.tp-slide-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
}

.tp-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0E0E0;
  cursor: pointer;
  transition: all 0.15s;
}

.tp-slide-dot.active {
  background: #337ab7;
  transform: scale(1.2);
}

.tp-slide-dot:hover {
  background: #6b7280;
}

/* Product Info - inline under gallery */
.tp-product-info--inline {
  margin-top: 12px;
}

.tp-product-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-dark, #2d2d2d);
  margin: 0 0 8px;
  line-height: 1.3;
}

.tp-product-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.tp-product-short-desc p {
  margin: 0 0 8px;
}

/* Tabs */
.tp-product-tabs {
  margin-top: 8px;
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  padding: 0 16px 16px;
  overflow: hidden;
}

.tp-product-tabs .woocommerce-tabs {
  padding: 0;
}

.tp-product-tabs .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 12px;
  list-style: none;
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tp-gray-200, #e8e8e8);
}

.tp-product-tabs .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
}

.tp-product-tabs .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--tp-gray-600, #6a6a6a);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}

.tp-product-tabs .woocommerce-tabs ul.tabs li.active a {
  color: var(--tp-blue, #337ab7);
  border-bottom-color: var(--tp-blue, #337ab7);
}

.tp-product-tabs .woocommerce-tabs .panel {
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

/* ── Grid spacer for empty cells in row-based layout ── */
.tp-block-spacer {
  min-height: 0;
}

/* ── Product Content Card (Tabs in einer Card) ── */
.tp-product-content-card {
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
}

.tp-pcc-header {
  padding: 20px 20px 16px;
}

.tp-pcc-header .tp-product-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-dark, #2d2d2d);
  margin: 0 0 8px;
  line-height: 1.3;
}

.tp-pcc-header .tp-product-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.tp-pcc-header .tp-product-short-desc p {
  margin: 0 0 6px;
}

.tp-pcc-tabs {
  padding: 12px 20px 20px;
}

.tp-pcc-tabs .tp-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tp-gray-200, #e8e8e8);
  padding-top: 2px;
}

.tp-pcc-tabs .tp-tab-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--tp-gray-600, #6a6a6a);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: inherit;
}

.tp-pcc-tabs .tp-tab-btn:hover {
  color: var(--tp-dark, #2d2d2d);
}

.tp-pcc-tabs .tp-tab-btn--active {
  color: var(--tp-blue, #337ab7);
  border-bottom-color: var(--tp-blue, #337ab7);
}

.tp-pcc-tabs .tp-tabs-content {
  padding-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.tp-pcc-tabs .tp-tab-panel {
  display: none;
}

.tp-pcc-tabs .tp-tab-panel--active {
  display: block;
}

/* ── Comparison Card (Vergleichstabelle auf Produktseite) ── */
.tp-compare-card {
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  overflow: hidden;
}

.tp-compare-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--tp-dark, #2d2d2d);
  padding: 16px 20px 0;
  margin: 0;
}

.tp-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tp-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px 0;
  background: transparent;
  font-size: 12px;
  min-width: 500px;
}

.tp-compare-table thead th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  color: var(--tp-dark, #2d2d2d);
  border-bottom: 2px solid #eee;
  border-radius: 0;
  vertical-align: bottom;
}

.tp-compare-table .tp-compare-label-col {
  width: 120px;
  min-width: 100px;
}

.tp-compare-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f3f3;
  color: #444;
  vertical-align: top;
  line-height: 1.5;
}

.tp-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.tp-compare-label {
  font-weight: 600;
  color: var(--tp-blue, #337ab7);
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.tp-compare-current {
  background: #f0f6ff;
}

.tp-compare-highlight {
  font-weight: 600;
}

.tp-cmp-yes {
  color: #27ae60;
  font-weight: 700;
}

.tp-cmp-no {
  color: #c0392b;
  font-weight: 700;
}

.tp-compare-cta-row td {
  padding: 14px 12px;
  border-bottom: none;
}

.tp-compare-btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.tp-compare-btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

.tp-compare-btn--orange {
  background: var(--orange, #f36f21);
  color: #fff;
}

.tp-compare-btn--blue {
  background: var(--tp-blue, #337ab7);
  color: #fff;
}

.tp-compare-btn--current {
  background: #e8e8e8;
  color: #888;
  cursor: default;
  font-size: 10px;
}

/* ── Sticky erste Spalte bei horizontalem Scroll ── */
.tp-compare-table .tp-compare-label-col,
.tp-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 2px solid #e0e0e0;
}

.tp-compare-table thead .tp-compare-label-col {
    z-index: 3;
    background: #fff;
}

.tp-compare-table .tp-compare-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
}

/* Current-product Spalte: Hintergrund beibehalten */
.tp-compare-table .tp-compare-current {
    background: #f0f6ff;
}

/* CTA-Zeile: erste Spalte sticky */
.tp-compare-cta-row td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

/* Responsive: comparison table scrollable on small screens */
@media (max-width: 768px) {
  .tp-compare-table {
    min-width: 400px;
  }
}

/* ── COLUMN 3: Configurator ── */
.tp-konfigurator-col {
  position: static; /* mitscrollend — kein sticky */
  min-width: 0;
  overflow: visible;
}

/* Block-basiert: Konfigurator + Sidebar (nur Desktop) */
@media (min-width: 769px) {
  .tp-block--configurator {
    position: static;
    align-self: start;
    overflow: visible;
  }
  .tp-block--sidebar {
    position: sticky;
    top: var(--tp-sticky-top, 100px);
    align-self: start;
  }
}
.tp-block--gallery {
  align-self: start;
}

.tp-konfigurator-col .teraprint-konfigurator-wrap,
.tp-block--configurator .teraprint-konfigurator-wrap {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}

.tp-konfigurator-col .teraprint-embed-mode,
.tp-block--configurator .teraprint-embed-mode {
  margin-top: 0;
}

.tp-konfigurator-col .tp,
.tp-block--configurator .tp {
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  background: var(--tp-card-bg);
  padding: 0;
  font-size: 14px;
  max-width: 100%;
  overflow: hidden;
}

/* Ensure embed-mode overrides don't strip styling in 3-column layout */
.tp-konfigurator-col .teraprint-embed-mode .tp,
.tp-block--configurator .teraprint-embed-mode .tp {
  border: var(--tp-card-border) !important;
  border-radius: var(--tp-card-radius) !important;
  box-shadow: var(--tp-card-shadow) !important;
  background: var(--tp-card-bg) !important;
  padding: 0 !important;
}

/* Konfigurator header: always white text on blue */
.tp-konfigurator-col .konf-header,
.tp-block--configurator .konf-header,
.tp-product-page .konf-header {
  background: var(--tp-bar-bg) !important;
  color: var(--tp-bar-color) !important;
  padding: var(--tp-bar-padding);
  line-height: var(--tp-bar-line-height);
  border-radius: 0;
}

.tp-konfigurator-col .konf-header h2,
.tp-block--configurator .konf-header h2,
.tp-product-page .konf-header h2,
.tp-konfigurator-col #konfTitle,
.tp-block--configurator #konfTitle,
.tp-product-page #konfTitle {
  color: var(--tp-bar-color) !important;
  font-size: var(--tp-bar-font-size);
  font-weight: var(--tp-bar-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--tp-bar-letter-spacing);
  margin: 0;
}

/* Prevent inner elements from overflowing */
.tp-konfigurator-col .staffel-boxes {
  overflow-x: auto;
}

.tp-konfigurator-col .tile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.tp-konfigurator-col .tp-tile-grid,
.tp-block--configurator .tp-tile-grid {
  gap: 6px;
}
.tp-konfigurator-col .tp-tile,
.tp-block--configurator .tp-tile {
  padding: 8px 6px;
  gap: 6px;
  min-height: 44px;
}
.tp-konfigurator-col .tp-sav-box,
.tp-block--configurator .tp-sav-box {
  margin: 6px 10px 0;
  padding: 8px 10px;
}
.tp-konfigurator-col .tp-sav-box__amount,
.tp-block--configurator .tp-sav-box__amount {
  font-size: 14px;
}
.tp-konfigurator-col .tp-t-p,
.tp-block--configurator .tp-t-p {
  font-size: 14px;
}
.tp-konfigurator-col .tp-delivery-info,
.tp-block--configurator .tp-delivery-info {
  font-size: 12px;
  gap: 10px;
  padding: 6px 10px;
}
.tp-konfigurator-col .tp-express,
.tp-block--configurator .tp-express {
  margin: 0 10px 6px;
  padding: 8px 12px;
}

/* When configurator is narrow (< 380px), fall back to 2 cols */
@container (max-width: 360px) {
  .tp-konfigurator-col .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tp-konfigurator-col .tile {
  padding: 8px 6px;
  gap: 6px;
  overflow: visible;
  border-radius: 0;
}

.tp-konfigurator-col .tile__name,
.tp-block--configurator .tile__name {
  font-size: 14px;
  word-break: break-word;
}

.tp-konfigurator-col .staffel-boxes,
.tp-konfigurator-col .staffel-tiers {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.tp-konfigurator-col .staffel-box,
.tp-konfigurator-col .staffel-tier {
  min-width: 0;
  padding: 6px 3px;
}

.tp-konfigurator-col .staffel-box__price,
.tp-block--configurator .staffel-box__price {
  font-size: 14px;
}

.tp-konfigurator-col .staffel-box__range,
.tp-block--configurator .staffel-box__range {
  font-size: 12px;
  white-space: nowrap;
}

.tp-konfigurator-col .staffel-box__name,
.tp-block--configurator .staffel-box__name {
  font-size: 12px;
  white-space: nowrap;
}

/* Info bar compact */
.tp-konfigurator-col .konf-info-bar {
  flex-wrap: wrap;
  padding: 0;
  gap: 6px;
  margin: 8px 10px;
  background: transparent;
  border: none;
}

.tp-konfigurator-col .info-badge,
.tp-konfigurator-col .konf-info-item {
  padding: 8px 6px;
  gap: 2px;
  border-radius: var(--tp-inner-radius);
  border: 1px solid var(--border-faint);
  background: var(--bg-gray-light);
}

.tp-konfigurator-col .info-badge__icon,
.tp-konfigurator-col .konf-info-icon {
  font-size: 18px;
}

.tp-konfigurator-col .info-badge__label,
.tp-block--configurator .info-badge__label {
  font-size: 12px;
}

.tp-konfigurator-col .info-badge__value,
.tp-block--configurator .info-badge__value {
  font-size: 12px;
}

.tp-konfigurator-col .cta-button {
  width: 100%;
  max-width: 100%;
}

.tp-konfigurator-col .price-total__value {
  word-break: break-word;
}

.tp-konfigurator-col .staffel-trust {
  flex-wrap: wrap;
}

.tp-konfigurator-col .price-delivery {
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TERAPRINT DESIGN SYSTEM — Zentrale Variablen
   Alle Cards, Header, Sidebar, Konfigurator etc. nutzen diese.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --tp-blue: #337ab7;
  --tp-blue-light: #edf4fb;
  --tp-orange: #f36f21;
  --tp-orange-dark: #e05e10;
  --tp-dark: #2d2d2d;
  --tp-text: #2d2d2d;

  /* Kadence-Theme Palette Override */
  --global-palette3: #2d2d2d;
  --global-palette4: #2d2d2d;
  --global-palette5: #6b7280;
  --tp-gray-50: #fafafa;
  --tp-gray-200: #e8e8e8;
  --tp-gray-400: #b0b0b0;
  --tp-gray-600: #6a6a6a;
  --tp-border: #e8e8e8;
  --tp-max-w: 1500px;

  /* Card Design System */
  --tp-card-radius: 0;
  --tp-card-shadow: 0 1px 4px rgba(0,0,0,0.06);
  --tp-card-border: 1px solid #e0e0e0;
  --tp-card-bg: #fff;

  /* Blue Header Bar (Sidebar, Konfigurator, etc.) */
  --tp-bar-padding: 10px 16px;
  --tp-bar-font-size: 14px;
  --tp-bar-font-weight: 700;
  --tp-bar-line-height: 1.3;
  --tp-bar-letter-spacing: 0.5px;
  --tp-bar-bg: var(--tp-blue);
  --tp-bar-color: #fff;
}

body {
  color: var(--tp-dark, #2d2d2d);
}

/* Container */
.tp-sidebar {
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  overflow: hidden;
  box-shadow: var(--tp-card-shadow);
}

/* Header "KATEGORIEN" — blauer Balken */
.tp-sidebar-header {
  padding: var(--tp-bar-padding);
  font-size: var(--tp-bar-font-size);
  font-weight: var(--tp-bar-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--tp-bar-letter-spacing);
  line-height: var(--tp-bar-line-height);
  color: var(--tp-bar-color);
  background: var(--tp-bar-bg);
  border-radius: 0;
}

/* Nav list reset */
.tp-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tp-sidebar-cat {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kategorie-Link (aufklappbar) */
.tp-sidebar-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-dark, #2d2d2d);
  text-decoration: none;
  border-bottom: 1px solid #eef0f3;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.tp-sidebar-cat-link:hover {
  background: #f7f8fa;
  color: var(--tp-blue, #337ab7);
}

/* Aktive Kategorie */
.tp-sidebar-cat-link.active {
  color: var(--tp-blue, #337ab7);
  font-weight: 600;
  border-left-color: var(--tp-orange, #f36f21);
  background: #f0f6fc;
}

/* Chevron */
.tp-sidebar-chevron {
  font-size: 14px;
  font-weight: 600;
  color: #bbb;
  transition: transform 0.2s, color 0.2s;
}

.tp-sidebar-cat-link.active .tp-sidebar-chevron {
  color: var(--tp-orange, #f36f21);
  transform: rotate(90deg);
}

/* ── Groups Container ── */
.tp-sidebar-groups {
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
  padding: 4px 0;
}

/* ── Single Group ── */
.tp-sidebar-group {
  padding: 0;
}

/* Group title — clickable accordion toggle */
.tp-sidebar-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tp-blue, #337ab7);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.tp-sidebar-group-title:hover {
  color: #2868a0;
  background: rgba(51, 122, 183, 0.05);
}

.tp-sidebar-group-title .tp-sidebar-chevron {
  font-size: 14px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tp-sidebar-group--open > .tp-sidebar-group-title .tp-sidebar-chevron {
  transform: rotate(90deg);
}

.tp-sidebar-group:first-child .tp-sidebar-group-title {
  margin-top: 0;
}

.tp-sidebar-group-icon {
  font-size: 13px;
  line-height: 1;
}

/* Active/open group — subtle highlight */
.tp-sidebar-group--active .tp-sidebar-group-title,
.tp-sidebar-group--open .tp-sidebar-group-title {
  color: var(--tp-orange, #f36f21);
}

.tp-sidebar-group--active,
.tp-sidebar-group--open {
  background: rgba(51, 122, 183, 0.04);
  border-left: 2px solid var(--tp-blue, #337ab7);
  margin-left: -1px;
}

/* Highlighted group (from mega menu: Klebefolien, DTF) */
.tp-sidebar-group--highlight .tp-sidebar-group-title {
  color: var(--tp-orange, #f36f21);
}

/* Produkt-Liste unter Gruppe */
.tp-sidebar-products {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

/* Produkt-Links */
.tp-sidebar-product-link {
  display: block;
  padding: 4px 14px 4px 34px;
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  position: relative;
  transition: all 0.12s;
  line-height: 1.4;
}

/* Dot */
.tp-sidebar-product-link::before {
  content: '\2022';
  position: absolute;
  left: 24px;
  color: #E0E0E0;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.tp-sidebar-product-link:hover {
  color: var(--tp-blue, #337ab7);
  background: #eef3f9;
}

/* Aktives Produkt */
.tp-sidebar-product-link.active {
  color: var(--tp-orange, #f36f21);
  font-weight: 600;
  background: rgba(243, 111, 33, 0.05);
}

.tp-sidebar-product-link.active::before {
  color: var(--tp-orange, #f36f21);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: Hamburger Menu + Sidebar Drawer
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.tp-sidebar-hamburger {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--tp-gray-200);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-text);
  width: 100%;
  margin-bottom: 8px;
}

.tp-hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 18px;
}

.tp-hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--tp-text);
  transition: all 0.2s;
}

/* Overlay */
.tp-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.25s;
}

.tp-sidebar-overlay--active {
  display: block;
  opacity: 1;
}

/* Tablet: narrower columns */
@media (min-width: 1101px) and (max-width: 1500px) {
  .tp-product-page {
    grid-template-columns: 240px 1fr 396px;
    gap: 10px;
    padding: 10px 16px;
  }
}

/* Mobile breakpoint: single column + hamburger sidebar */
@media (max-width: 1100px) {
  .tp-product-page {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 8px 0;
    gap: 10px;
  }

  /* Sidebar: hidden by default, slides in from left */
  .tp-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    z-index: 99999;
    overflow-y: auto;
    transition: left 0.3s ease;
    border: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  .tp-sidebar.tp-sidebar--open {
    left: 0;
  }

  /* Show hamburger button */
  .tp-sidebar-hamburger {
    display: flex;
  }

  /* Konfigurator: full width */
  .tp-konfigurator-col {
    position: static;
    order: -1; /* Show configurator above product on mobile */
    overflow: visible;
  }

  .tp-product-main {
    order: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v2.3.0 — BLOCK-BASED LAYOUT SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Layout wrapper (v2.3.0 block-based) */
.tp-layout-v23 {
  display: grid;
  gap: var(--tp-grid-gap, 16px);
  max-width: var(--tp-layout-max-width, 1500px);
  margin: 0 auto;
  padding: var(--tp-layout-padding, 16px 0);
  width: 100%;
  box-sizing: border-box;
}

/* Generic block wrapper */
.tp-block {
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

/* Block within a sticky container */
.tp-block[data-sticky="1"] {
  position: sticky;
  top: var(--tp-sticky-top, 100px);
  align-self: start;
}

/* Block visibility on mobile */
@media (max-width: 1100px) {
  .tp-block[data-mobile-visible="0"] {
    display: none !important;
  }

  /* v2.5.0 row-based: collapse rows to single column on mobile */
  .tp-layout-v25 .tp-row {
    grid-template-columns: 1fr !important;
  }

  .tp-layout-v25 .tp-block-spacer {
    display: none !important;
  }
}


/* ── Tech Data Table ───────────────────────────────────────── */

.tp-tech-data {
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  overflow: hidden;
}

.tp-tech-data__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-text, #1e1e1e);
  margin: 0;
  padding: 12px 16px 8px;
}

.tp-tech-data__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tp-tech-data__table th,
.tp-tech-data__table td {
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid var(--tp-gray-100, #F5F7FA);
}

.tp-tech-data__table th {
  font-weight: 600;
  color: var(--tp-text-light, #6b7280);
  width: 40%;
  background: var(--tp-gray-50, #f9fafb);
  white-space: nowrap;
}

.tp-tech-data__table td {
  color: var(--tp-text, #1e1e1e);
}

.tp-tech-data__table tr:last-child th,
.tp-tech-data__table tr:last-child td {
  border-bottom: none;
}

.tp-tech-data__table tr:hover {
  background: var(--tp-gray-50, #f9fafb);
}

/* Category group header */
.tp-tech-data__table .tp-td-category {
  background: var(--tp-gray-100, #F5F7FA);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tp-gray-500, #6b7280);
  padding: 6px 16px;
}

.tp-tech-data__table .tp-td-category td {
  background: var(--tp-gray-100, #F5F7FA);
  color: var(--tp-gray-500, #6b7280);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Value badges / tags */
.tp-tech-data__value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tp-tech-data__value-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--tp-blue-light, #eff6ff);
  color: var(--tp-blue, #3858e9);
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
}


/* ── Cross-Sell / Related Products ─────────────────────────── */

.tp-cross-sell {
  background: var(--tp-card-bg);
  border: var(--tp-card-border);
  border-radius: var(--tp-card-radius);
  box-shadow: var(--tp-card-shadow);
  padding: 16px;
}

.tp-cross-sell__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-text, #1e1e1e);
  margin: 0 0 12px;
}

.tp-cross-sell__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.tp-cross-sell__item {
  display: flex;
  flex-direction: column;
  background: var(--tp-gray-50, #f9fafb);
  border: 1px solid var(--tp-gray-200, #E0E0E0);
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
}

.tp-cross-sell__item:hover {
  border-color: var(--tp-orange, #f97316);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tp-cross-sell__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e2e5ea;
}

.tp-cross-sell__img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tp-gray-100, #F5F7FA);
  color: var(--tp-gray-400, #6b7280);
  font-size: 24px;
}

.tp-cross-sell__info {
  padding: 8px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tp-cross-sell__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-text, #1e1e1e);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tp-cross-sell__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  margin-top: auto;
}

.tp-cross-sell__empty {
  text-align: center;
  padding: 20px;
  color: var(--tp-gray-400, #6b7280);
  font-style: italic;
  font-size: 14px;
}


/* ── Cross-Sell: "Mehr anzeigen" Toggle ───────────────────── */

.tp-crosssell-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}

.tp-crosssell-item--hidden {
  display: none;
}

.tp-crosssell--expanded .tp-crosssell-item--hidden {
  display: flex;
}

.tp-crosssell-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  color: #337AB7;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-crosssell-toggle:hover {
  background: rgba(51, 122, 183, 0.06);
  border-color: #337AB7;
}

.tp-crosssell-toggle__icon {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tp-crosssell--expanded .tp-crosssell-toggle__icon {
  transform: rotate(180deg);
}


/* ── Custom HTML/Text Block ────────────────────────────────── */

.tp-custom-html {
  background: #fff;
  border: 1px solid var(--tp-gray-200, #E0E0E0);
  border-radius: 0;
  padding: 16px;
  line-height: 1.6;
}

.tp-custom-html h1,
.tp-custom-html h2,
.tp-custom-html h3,
.tp-custom-html h4 {
  margin-top: 0;
  color: var(--tp-text, #1e1e1e);
}

.tp-custom-html h1 { font-size: 24px; }
.tp-custom-html h2 { font-size: 24px; }
.tp-custom-html h3 { font-size: 18px; }
.tp-custom-html h4 { font-size: 14px; }

.tp-custom-html p {
  margin: 0 0 12px;
}

.tp-custom-html p:last-child {
  margin-bottom: 0;
}

.tp-custom-html img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.tp-custom-html ul,
.tp-custom-html ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.tp-custom-html table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
}

.tp-custom-html table th,
.tp-custom-html table td {
  padding: 6px 10px;
  border: 1px solid var(--tp-gray-200, #E0E0E0);
  font-size: 14px;
}

.tp-custom-html table th {
  background: var(--tp-gray-50, #f9fafb);
  font-weight: 600;
}


/* ── v2.3.0 Mobile: Auto-Stack ─────────────────────────────── */

@media (max-width: 1100px) {
  .tp-layout-v23 {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 10px !important;
  }

  .tp-layout-v23 .tp-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: var(--tp-mobile-order, 0);
  }

  .tp-layout-v23 .tp-block[data-sticky="1"] {
    position: static;
  }

  /* Cross-sell: 2 columns on mobile */
  .tp-cross-sell__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tp-cross-sell__item {
    font-size: 12px;
  }

  .tp-cross-sell__name {
    font-size: 12px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .tp-cross-sell__grid {
    grid-template-columns: 1fr;
  }
}


/* ── Print Styles (shared) ─────────────────────────────────── */

@media print {
  .tp-layout-v23 {
    display: block !important;
    max-width: none;
  }

  .tp-block {
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  .tp-block[data-mobile-visible="0"] {
    display: none !important;
  }

  .tp-cross-sell,
  .tp-sidebar {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v2.3.x — COMPACT FILE CARD + DISTORTION MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Clickable thumbnail */
.teraprint-konfigurator-wrap .file-card__thumb--clickable {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.1s;
}
.teraprint-konfigurator-wrap .file-card__thumb--clickable:hover {
  border-color: var(--blue, #3858e9);
  transform: scale(1.05);
}

/* Inline dimensions row (B x H x Stueck) */
.teraprint-konfigurator-wrap .file-card__inline-dims {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 12px;
  flex-wrap: wrap;
}

.teraprint-konfigurator-wrap .fc-dim-label {
  font-size: 10px;
  color: var(--gray-400, #6b7280);
  font-weight: 700;
  text-transform: uppercase;
}

.teraprint-konfigurator-wrap .fc-dim-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700, #374151);
  background: var(--gray-100, #F5F7FA);
  padding: 2px 6px;
  border-radius: 0;
  min-width: 32px;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.teraprint-konfigurator-wrap .fc-dim-value:hover {
  border-color: var(--blue, #3858e9);
  background: #e8f0fe;
}

.teraprint-konfigurator-wrap .fc-dim-x {
  font-size: 10px;
  color: var(--gray-400, #6b7280);
}

.teraprint-konfigurator-wrap .fc-dim-unit {
  font-size: 10px;
  color: var(--gray-400, #6b7280);
}

.teraprint-konfigurator-wrap .fc-dim-sep {
  font-size: 10px;
  color: var(--gray-300, #d1d5db);
  margin: 0 2px;
}

/* Mini qty controls (inline) */
.teraprint-konfigurator-wrap .qty-btn--mini {
  width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 0;
  border: 1px solid var(--gray-300, #d1d5db);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: all 0.1s;
}
.teraprint-konfigurator-wrap .qty-btn--mini:hover {
  border-color: var(--blue, #3858e9);
  color: var(--blue, #3858e9);
}

.teraprint-konfigurator-wrap .qty-input--mini {
  width: auto; min-width: 40px; max-width: 80px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}

/* ── Distortion Preview Modal ─────────────────────── */

.teraprint-konfigurator-wrap .modal-content--resize {
  width: 1080px;
  max-width: 95vw;
}

.teraprint-konfigurator-wrap .modal-distort-preview {
  background: #F5F7FA;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  min-height: 360px;
  max-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s, border-width 0.2s;
}

.teraprint-konfigurator-wrap .modal-distort-preview img {
  max-width: 90%;
  max-height: 520px;
  transition: transform 0.2s ease;
}

.teraprint-konfigurator-wrap .modal-distort-placeholder {
  font-size: 48px;
  color: var(--gray-400, #6b7280);
  font-weight: 700;
}

.teraprint-konfigurator-wrap .modal-distort-warning {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.teraprint-konfigurator-wrap .modal-info-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.teraprint-konfigurator-wrap .modal-info-row span {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: #F5F7FA;
  color: #6c757d;
  text-align: center;
  border-radius: 0;
  border: 1px solid #e8e8e8;
}


/* ═══════════════════════════════════════════════════════════════
   v2.3.x — CUSTOM CONFIGURABLE TABS
   ═══════════════════════════════════════════════════════════════ */

.tp-custom-tabs .tp-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8e8e8;
  margin-bottom: 12px;
  overflow-x: auto;
}

.tp-custom-tabs .tp-tab-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #6a6a6a;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.tp-custom-tabs .tp-tab-btn:hover {
  color: #337ab7;
}

.tp-custom-tabs .tp-tab-btn--active {
  color: #337ab7;
  border-bottom-color: #337ab7;
}

.tp-custom-tabs .tp-tab-panel {
  display: none;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.tp-custom-tabs .tp-tab-panel--active {
  display: block;
}

/* Attribute table inside tabs */
.tp-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tp-attr-table th,
.tp-attr-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e5ea;
}

.tp-attr-table th {
  font-weight: 600;
  color: #6b7280;
  width: 35%;
  background: #f9fafb;
}

/* ══════════════════════════════════════
   FILE SUMMARY BAR (compact upload summary)
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap .file-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 6px;
  background: var(--blue-light);
  border: 1px solid var(--blue);
}
.teraprint-konfigurator-wrap .file-summary-bar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-dark);
}
.teraprint-konfigurator-wrap .file-summary-bar__sep {
  color: var(--gray-400);
}
.teraprint-konfigurator-wrap .file-summary-bar__btn {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.teraprint-konfigurator-wrap .file-summary-bar__btn:hover {
  background: var(--blue-dark);
}
/* ── Inline File-Cards (direkt unter Summary-Bar, kein Popup) ── */
.teraprint-konfigurator-wrap .file-cards-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.teraprint-konfigurator-wrap .file-cards-inline .file-card {
  border-radius: 0;
  font-family: Roboto, sans-serif;
}
.teraprint-konfigurator-wrap .file-cards-inline .file-card__name {
  color: var(--tp-dark, #2d2d2d);
  font-family: Roboto, sans-serif;
}
.teraprint-konfigurator-wrap .file-cards-inline .fc-dim-value {
  color: #337ab7;
}
.teraprint-konfigurator-wrap .file-cards-inline .qty-input--mini,
.teraprint-konfigurator-wrap .file-cards-inline .qty-btn--mini {
  border-radius: 0;
}

/* ══════════════════════════════════════
   FILE LIST POPUP
   ══════════════════════════════════════ */
.file-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.file-popup {
  background: #fff;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.file-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.file-popup__header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-dark, #2d2d2d);
  margin: 0;
}
.file-popup__summary {
  font-size: 12px;
  color: #6a6a6a;
  margin-left: auto;
}
.file-popup__close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  margin-left: 8px;
}
.file-popup__close:hover {
  color: var(--tp-dark, #2d2d2d);
}
.file-popup__body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ══════════════════════════════════════
   SUMMARY BOX
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap .summary-box {
  background: #fff;
  border: 1px solid var(--gray-200);
  margin-top: 8px;
  display: none;
}
.teraprint-konfigurator-wrap .summary-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.teraprint-konfigurator-wrap .summary-header__icon { font-size: 14px; }
.teraprint-konfigurator-wrap .summary-header__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--dark);
}
.teraprint-konfigurator-wrap .summary-body {
  padding: 8px 14px;
}
.teraprint-konfigurator-wrap .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.teraprint-konfigurator-wrap .summary-item:last-child { border-bottom: none; }
.teraprint-konfigurator-wrap .summary-item__label {
  color: var(--gray-600);
  font-weight: 400;
  flex-shrink: 0;
  margin-right: 8px;
}
.teraprint-konfigurator-wrap .summary-item__value {
  font-weight: 500;
  color: var(--dark);
  text-align: right;
}
.teraprint-konfigurator-wrap .summary-item__price {
  font-size: 10px;
  color: var(--gray-500);
}
.teraprint-konfigurator-wrap .summary-footer {
  padding: 8px 14px;
  border-top: 2px solid var(--blue);
  background: var(--blue-light);
}
.teraprint-konfigurator-wrap .summary-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.teraprint-konfigurator-wrap .summary-price__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
}
.teraprint-konfigurator-wrap .summary-price__value {
  font-size: 18px;
  font-weight: 900;
  color: var(--blue);
}
.teraprint-konfigurator-wrap .summary-brutto {
  font-size: 10px;
  color: var(--gray-500);
  text-align: right;
  margin-top: 2px;
}

/* Summary Action Buttons */
.teraprint-konfigurator-wrap .summary-actions {
  display: flex;
  gap: 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--gray-200);
}
.teraprint-konfigurator-wrap .summary-action-btn {
  flex: 1;
  padding: 7px 12px;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  color: var(--dark);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.teraprint-konfigurator-wrap .summary-action-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.teraprint-konfigurator-wrap .summary-action-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.teraprint-konfigurator-wrap .summary-action-btn--pdf:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: #fff5f5;
}
.teraprint-konfigurator-wrap .summary-action-btn--share:hover {
  border-color: #25d366;
  color: #25d366;
  background: #f0fff4;
}

/* ══════════════════════════════════════
   SHARE MODAL
   ══════════════════════════════════════ */
.tp-share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-share-modal {
  background: #fff;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  overflow: hidden;
}
.tp-share-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #337ab7;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.tp-share-modal__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.tp-share-modal__body {
  padding: 16px;
}
.tp-share-modal__body p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #6b7280;
}
.tp-share-modal__url-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.tp-share-modal__input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  font-size: 12px;
  background: #f8f8f8;
  color: var(--tp-dark, #2d2d2d);
}
.tp-share-modal__copy {
  padding: 8px 14px;
  background: #337ab7;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tp-share-modal__copy:hover {
  background: #286090;
}
.tp-share-modal__actions {
  display: flex;
  gap: 8px;
}
.tp-share-modal__btn {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  color: #fff;
}
.tp-share-modal__btn--wa {
  background: #25d366;
}
.tp-share-modal__btn--wa:hover {
  background: #1eb851;
}
.tp-share-modal__btn--mail {
  background: #6b7280;
}
.tp-share-modal__btn--mail:hover {
  background: #2d2d2d;
}

/* ══════════════════════════════════════
   MOCKUP PREVIEW
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap .mockup-preview {
  margin-top: 10px;
  text-align: center;
}
.teraprint-konfigurator-wrap .mockup-preview__wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  background: #f8f8f8;
}
.teraprint-konfigurator-wrap .mockup-preview__bg {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
}
.teraprint-konfigurator-wrap .mockup-preview__motif {
  position: absolute;
  object-fit: contain;
  opacity: 0.88;
  pointer-events: none;
}
.teraprint-konfigurator-wrap .mockup-preview__motif--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51,122,183,.12);
  border: 1.5px dashed var(--blue);
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
}
.teraprint-konfigurator-wrap .mockup-preview__label {
  font-size: 10px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* ══════════════════════════════════════
   UPLOAD THUMBNAILS STRIP
   ══════════════════════════════════════ */
.teraprint-konfigurator-wrap .upload-thumbs-strip {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  overflow-x: auto;
  flex-wrap: wrap;
}
.teraprint-konfigurator-wrap .upload-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border: 2px solid var(--gray-200);
  background: var(--gray-100);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.12s;
}
.teraprint-konfigurator-wrap .upload-thumb:hover {
  border-color: var(--blue);
}
.teraprint-konfigurator-wrap .upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teraprint-konfigurator-wrap .upload-thumb__ext {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-500);
}
.teraprint-konfigurator-wrap .upload-thumb__qty {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
}
.teraprint-konfigurator-wrap .upload-thumb__del {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(220,53,69,.85);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  padding: 1px 3px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s;
}
.teraprint-konfigurator-wrap .upload-thumb:hover .upload-thumb__del {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE: Breadcrumb & Layout Fixes (v3.1.1)
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb Bar (above product grid) ── */
.tp-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.tp-breadcrumb .container-1400 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 14px;
    color: #6b7280;
}

.tp-breadcrumb a {
    color: #337ab7;
    text-decoration: none;
    transition: color .2s ease;
}

.tp-breadcrumb a:hover {
    color: #2a6399;
    text-decoration: underline;
}

.tp-bc-sep {
    margin: 0 8px;
    color: #E0E0E0;
}

.tp-breadcrumb strong,
.tp-bc-current {
    color: #6b7280;
    font-weight: 500;
}

/* ── SEO: H1 Produktseite nach Breadcrumb ── */
.tp-breadcrumb + h1.tp-product-title {
    max-width: 1500px;
    margin: 0 auto;
    padding: 16px 20px 0;
    font-size: 22px;
    font-weight: 700;
    color: #2d2d2d;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;
}

/* ── SEO: Screen-Reader-only H1 (Homepage) ── */
.tp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Product Page Grid: Sidebar alignment ── */
/* Grid-Layouts: alle Spalten starten oben */
.tp-product-page.tp-layout-v23,
.tp-product-page.tp-layout-v25 {
    align-items: start !important;
}

.tp-product-page .tp-row {
    align-items: start !important;
}

/* v2.3 Column-Wrapper: Jede Grid-Spalte ist ein Flex-Container.
   Bloecke stapeln sich vertikal innerhalb ihrer Spalte.
   Dadurch sind Spaltenhoehen unabhaengig — der Konfigurator (Spalte 3)
   beeinflusst NICHT die Hoehe zwischen Galerie und Tabs (Spalte 2). */
.tp-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
    min-width: 0;
}

/* Bloecke innerhalb Column-Wrapper: volle Breite (stretch).
   WICHTIG: align-self:start war fuer Grid (vertikal oben).
   In Flex-Column bedeutet align-self die HORIZONTALE Achse —
   start wuerde Bloecke auf Inhaltsbreite schrumpfen! */
.tp-col > .tp-block {
    align-self: stretch !important;
    width: 100%;
}

/* Sidebar-Block: kein extra Margin/Padding */
.tp-product-page .tp-block--sidebar,
.tp-row .tp-block--sidebar {
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar sticky — nur Desktop */
@media (min-width: 769px) {
  .tp-product-page .tp-block--sidebar {
    position: sticky;
    top: var(--tp-sticky-top, 100px);
  }
}

/* Konfigurator — kein sticky, kein interner Scroll. Seite scrollt natuerlich. */
@media (min-width: 769px) {
  .tp-product-page .tp-block--configurator {
    position: static !important;
    align-self: start !important;
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* Hide WooCommerce duplicate breadcrumb inside the grid */
.tp-product-page .woocommerce-breadcrumb {
    display: none !important;
}

/* ── Responsive: Breadcrumb ── */
@media (max-width: 768px) {
    .tp-breadcrumb .container-1400 {
        padding: 10px 16px;
        font-size: 12px;
    }

    .tp-bc-sep {
        margin: 0 5px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Phase 4: Konfigurator Tile-Hoehe + Upload-Info (v3.1.2)
   ═══════════════════════════════════════════════════════════════ */

/* ── 4a: Smaller tiles ── */
.teraprint-konfigurator-wrap .tile {
    min-height: 56px !important;
    padding: 6px 6px 5px !important;
    gap: 2px !important;
}

.teraprint-konfigurator-wrap .tile__icon {
    font-size: 18px !important;
}

.teraprint-konfigurator-wrap .tile__name {
    font-size: 10px !important;
}

.teraprint-konfigurator-wrap .tile__price {
    font-size: 10px !important;
}

/* ── 4b: Upload Info Button ── */
.teraprint-konfigurator-wrap .upload-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #337ab7;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    font-family: 'Roboto', sans-serif;
    cursor: help;
    margin-left: 8px;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 20px;
    text-align: center;
    transition: background .2s;
}

.teraprint-konfigurator-wrap .upload-info-btn:hover {
    background: #2a6499;
}

/* Upload Info Popover */
.teraprint-konfigurator-wrap .upload-info-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 6px;
    background: #fff;
    border: 2px solid #337ab7;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font-size: 14px;
    color: var(--tp-dark, #2d2d2d);
    line-height: 1.6;
}

.teraprint-konfigurator-wrap .upload-info-popover.show {
    display: block;
}

.teraprint-konfigurator-wrap .upload-info-popover__title {
    font-size: 14px;
    font-weight: 700;
    color: #337ab7;
    margin-bottom: 10px;
}

.teraprint-konfigurator-wrap .upload-info-popover__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #e2e5ea;
}

.teraprint-konfigurator-wrap .upload-info-popover__row:last-child {
    border-bottom: none;
}

.teraprint-konfigurator-wrap .upload-info-popover__label {
    font-weight: 500;
    color: #6b7280;
}

.teraprint-konfigurator-wrap .upload-info-popover__value {
    font-weight: 600;
    color: var(--tp-dark, #2d2d2d);
}

.teraprint-konfigurator-wrap .upload-info-popover__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.teraprint-konfigurator-wrap .upload-info-popover__close:hover {
    color: #337ab7;
}

/* ═══════════════════════════════════════
   Runde 8: B1/B3 Upload-Async + Validation
   ═══════════════════════════════════════ */

/* B1: Spinner-Animation fuer pending Uploads */
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}
.tp-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border, #ddd);
  border-top-color: var(--blue, #3b82f6);
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
  margin: 8px auto;
}

/* B1: Pending file card */
.file-card--pending {
  opacity: 0.7;
}
.file-card--pending .file-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #f5f5f5);
}

/* B3: Disabled CTA button */
.cta-button--disabled,
.cta-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--text-muted, #888) !important;
}

/* B14: Price footer placeholder transition */
#priceFooter {
  transition: opacity 0.3s ease;
}
/* ═══════════════════════════════════════
   Runde 9: B4 Dependency-Visualisierung
   ═══════════════════════════════════════ */

/* B4: Disabled option group — B14: opacity+pointerEvents via CSS instead of inline styles */
.tp-option-disabled {
  opacity: 0.5;
  position: relative;
}
/* Block clicks on tiles within disabled section, but allow hover/reading */
.tp-option-disabled .tile {
  pointer-events: none;
}
.tp-option-disabled input {
  pointer-events: none;
}

/* B4: Dependency reason text */
.tp-dep-reason {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--orange, #f36f21);
  font-weight: 500;
  font-style: italic;
}
.tp-dep-reason::before {
  content: '\26A0\FE0E ';
}
/* ═══════════════════════════════════════
   Paket 1: Konfigurator Aufwertung
   ═══════════════════════════════════════ */

/* P1: Tile click-tooltip */
.teraprint-konfigurator-wrap .tile__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark, #2d2d2d);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  padding: 8px 12px;
  max-width: 250px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  line-height: 1.4;
}
.teraprint-konfigurator-wrap .tile__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--dark, #2d2d2d);
}

/* P1: Tile hover enhancement */
.teraprint-konfigurator-wrap .tile:hover {
  border-color: var(--orange);
}

/* P1: Info-bar empty state hidden */
.teraprint-konfigurator-wrap .konf-info-bar:empty {
  display: none;
}

/* P1: Mobile responsive info-bar */
@media (max-width: 500px) {
  .teraprint-konfigurator-wrap .konf-info-bar {
    flex-direction: column;
    gap: 6px;
  }
  .teraprint-konfigurator-wrap .info-badge {
    border-right: none;
    border-bottom: none;
    padding: 8px;
  }
  .teraprint-konfigurator-wrap .info-badge:last-child {
    border-bottom: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAKET 6: Mobile Responsive Enhancements
   ═══════════════════════════════════════════════════════════════ */

/* Staffel-Boxen: Labels und Preise kleiner auf Mobile */
@media (max-width: 500px) {
    .teraprint-konfigurator-wrap .staffel-box__name { display: none; }
    .teraprint-konfigurator-wrap .staffel-box__price { font-size: 12px; }
    .teraprint-konfigurator-wrap .staffel-box { padding: 8px 3px; }
    .teraprint-konfigurator-wrap .staffel-incentive { font-size: 12px; }
}

/* Tile Grid: 1 Spalte auf sehr schmalen Screens */
@media (max-width: 400px) {
    .teraprint-konfigurator-wrap .tile-grid { grid-template-columns: 1fr !important; }
}

/* CTA Button sticky auf Mobile */
@media (max-width: 768px) {
    .teraprint-konfigurator-wrap .cta-area {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: #fff;
        padding: 12px;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }
}

/* Preismatrix horizontal scrollbar */
.teraprint-konfigurator-wrap .price-matrix-wrapper,
.teraprint-konfigurator-wrap .staffel-boxes {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* ── BUG 7: Staffel Mengen-Anzeige + Hint ── */
.teraprint-konfigurator-wrap .staffel-current-qty {
  font-size: 14px; font-weight: 600; color: var(--dark);
  margin-bottom: 6px; padding: 0 2px;
}
.teraprint-konfigurator-wrap .staffel-current-qty__value {
  color: var(--orange); font-weight: 700;
}
.teraprint-konfigurator-wrap .staffel-hint {
  border-left: 3px solid #f36f21; background: #fef5ee;
  padding: 8px 12px; margin-top: 8px; font-size: 12px;
  color: #5a3e1b; border-radius: 0;
}
.teraprint-konfigurator-wrap .staffel-hint--best {
  border-left-color: #27ae60; background: #f0faf0; color: #1a5928;
}
/* ── BUG 5: Modal Dark/Light Toggle (Toolbar über dem Bild) ── */
.tp-preview-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 4px 0; margin-bottom: 4px; gap: 6px;
}
.tp-preview-toolbar__label {
  font-size: 12px; color: #888;
}
.tp-modal-bg-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 0;
  border: 1px solid var(--gray-300); background: #fff;
  cursor: pointer; font-size: 12px; color: #6b7280;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tp-modal-bg-toggle:hover { border-color: var(--orange); color: var(--orange); }
.tp-modal-bg-toggle--dark { background: #2d2d2d; color: #eee; border-color: #6b7280; }

.modal-preview-area { background: #e2e5ea; border-radius: 0; padding: 12px; transition: background 0.2s ease; text-align: center; }
.modal-preview-area--dark { background: #2d2d2d; }

/* Thumbnail preview in file card: Hintergrund #e2e5ea statt #fff */
.teraprint-konfigurator-wrap .file-card__preview,
.teraprint-konfigurator-wrap .upload-thumb {
  background: #e2e5ea;
}

/* ═══════════════════════════════════════════════════════════ */
/* Phase 3: Pipeline Staffelleiste + Quantity + Hints         */
/* ═══════════════════════════════════════════════════════════ */

/* Mengenanzeige ueber der Staffelleiste */
.tp-quantity-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}
.tp-quantity-label {
    color: #6b7280;
}
.tp-quantity-value {
    font-weight: 600;
    color: var(--tp-dark, #2d2d2d);
}

/* Mindestpreis-Hinweis */
.price-min-notice {
    font-size: 12px;
    color: #92400e;
    background: #FFF7ED;
    padding: 4px 8px;
    margin: 4px 0;
    font-family: 'Roboto', sans-serif;
}

/* Dark/Light Toggle fuer Preview */
.tp-bg-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0;
}
.tp-bg-toggle:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #337ab7;
}
/* Scrollbarer Container fuer File-Cards bei vielen Dateien */
.tp-file-cards-scroll {
  overflow-x: hidden;
  padding-right: 4px;
}

.tp-file-cards-scroll--limited {
  max-height: 520px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #adb5bd #f1f3f5;
}
.tp-file-cards-scroll::-webkit-scrollbar {
  width: 6px;
}
.tp-file-cards-scroll::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 0;
}
.tp-file-cards-scroll::-webkit-scrollbar-thumb {
  background: #adb5bd;
  border-radius: 0;
}
.tp-file-cards-scroll::-webkit-scrollbar-thumb:hover {
  background: #868e96;
}


/* Stueckzahl-Input breiter (BUG 4) */
.tp-file-card input[type="number"],
.qty-input--mini {
    min-width: 48px;
    max-width: 80px;
    width: auto;
    text-align: center;
}

/* SideCart Mengen-Input breiter */
.tp-sc-qty input[type="number"] {
    min-width: 48px;
    max-width: 80px;
    width: auto;
    text-align: center;
}

/* Responsive: Staffelpreise auf kleinen Bildschirmen */
@media (max-width: 500px) {
    .tp-tier-seg__price {
        font-size: 12px;
    }
    .tp-tier-seg--current .tp-tier-seg__price {
        font-size: 14px;
    }
    .tp-tier-seg__name {
        font-size: 10px;
    }
    .tp-tiers-incentive {
        font-size: 10px;
    }
}

/* FIX: STK-Label in gleiche Zeile wie B/H/Qty + kleineres Input */
.teraprint-konfigurator-wrap .file-card__inline-dims {
    flex-wrap: nowrap;
}
.teraprint-konfigurator-wrap .qty-input {
    width: 32px;
    padding: 2px 0;
    text-align: center;
}

/* FIX: Native Browser-Spinner im Qty-Input ausblenden */
.teraprint-konfigurator-wrap .qty-input::-webkit-outer-spin-button,
.teraprint-konfigurator-wrap .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.teraprint-konfigurator-wrap .qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* FIX: Sidebar buendig mit Gallery/Konfigurator
   Ursache: .woocommerce-notices-wrapper im Grid erzeugt unsichtbaren Slot + row-gap */
.tp-product-page > .woocommerce-notices-wrapper:empty {
    display: none;
}
.tp-product-page > .woocommerce-notices-wrapper:not(:empty) {
    display: block;
    grid-column: 1 / -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIERUNG — konsolidiert
   Breakpoints:  768px (Smartphone)
                 480px (kleines Smartphone)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Modals & Popups: nie breiter als Viewport ── */
#teraprintNotification          { max-width: min(400px, 90vw); }
.modal-content                  { max-width: min(1040px, 95vw); }
.tp-share-modal                 { width: min(420px, 92vw); }
.file-popup                     { max-width: min(520px, 95vw); }

@media (max-width: 768px) {

  /* ── 2. Produktseite: sauberer 1-Spalten-Aufbau ── */
  .tp-product-page,
  .tp-layout-v23 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    padding: 0 12px !important;
    gap: 12px !important;
  }

  /* v2.3 Column-Wrapper: auf Mobile als 1-Spalte, Wrapper wird transparent */
  .tp-col {
    grid-column: 1 / -1 !important;
  }

  /* Reihenfolge Mobile: Konfigurator-Wrapper zuerst, Sidebar versteckt */
  .tp-col--configurator { order: -2 !important; }
  .tp-col--main         { order: 0 !important; }
  .tp-col--sidebar      { display: none !important; }

  /* Bloecke innerhalb der Wrapper: volle Breite */
  .tp-product-page .tp-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Konfigurator-Block Styles */
  .tp-block--configurator { position: static !important; max-height: none !important; overflow: visible !important; }

  /* ── 3. Konfigurator: volle Breite, kein Card-Rand ── */
  .tp-block--configurator .tp,
  .tp-block--configurator .teraprint-konfigurator-wrap {
    max-width: 100% !important;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  /* ── 4. Galerie: volle Breite ── */
  .tp-product-gallery {
    margin: 0 -12px;
  }
  .tp-gallery-main img {
    width: 100%;
    height: auto;
  }
  .tp-slide-dots {
    justify-content: center;
    padding: 8px 0;
  }

  /* ── 5. Touch-Targets: mindestens 44px Hoehe ── */
  .tp-pill,
  .tp-tile,
  .tp-tier-step,
  .teraprint-konfigurator-wrap .tile,
  .teraprint-konfigurator-wrap .staffel-box {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 6. Product-Content-Card ── */
  .tp-product-content-card {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .tp-pcc-header h2 {
    font-size: 24px;
  }
  .tp-pcc-header p {
    font-size: 14px;
  }
  .tp-pcc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tp-tab-btn {
    white-space: nowrap;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
  }

  /* ── 7. Vergleichstabelle: horizontal scrollbar ── */
  .tp-compare-card {
    border-left: none;
    border-right: none;
    border-radius: 0;
    overflow: visible;
  }
  .tp-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tp-compare-table {
    min-width: 400px;
  }

  /* ── 8. Font-Groessen: lesbarer auf Mobile ── */
  .tp-pcc-content h2,
  .tp-pcc-content h3 {
    font-size: 18px;
  }
  .tp-pcc-content h4 {
    font-size: 18px;
  }
  .tp-pcc-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 16px 14px;
  }

  /* ── 9. Upload-Zone: kompakter ── */
  .tp-upl-zone {
    padding: 16px 12px;
  }
  .tp-upl-zone .tp-upl-text {
    font-size: 14px;
  }
  .tp-upl-zone .tp-upl-ic {
    width: 36px;
    height: 36px;
  }
  .tp-upl-zone-v2 {
    padding: 20px 16px;
  }

  /* ── 10. CTA sticky am unteren Rand ── */
  .teraprint-konfigurator-wrap .cta-area {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: #fff;
    padding: 12px;
    border-top: 1px solid #E0E0E0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }

  /* ── 11. Cross-Sell: 2 Spalten ── */
  .tp-cross-sell__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* ── 12. Tech-Data Tabelle scrollbar ── */
  .tp-tech-data {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tp-tech-data table {
    min-width: 360px;
  }
}

/* ── Kleines Smartphone (< 480px) ── */
@media (max-width: 480px) {

  /* Titel kleiner */
  .tp-pcc-header h2 {
    font-size: 18px;
  }

  /* Tabs: 2-zeilig statt Scroll */
  .tp-pcc-tabs {
    flex-wrap: wrap;
  }
  .tp-tab-btn {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    padding: 8px 10px;
  }

  /* Tier-Steps: kompakter */
  .tp-tier-step {
    padding: 8px 4px;
  }
  .tp-tier-price {
    font-size: 14px;
  }
  .tp-tier-unit {
    font-size: 10px;
  }
  .tp-tier-name {
    font-size: 10px;
  }

  /* Cross-Sell: 1 Spalte */
  .tp-cross-sell__grid {
    grid-template-columns: 1fr !important;
  }

  /* Info-Bar: untereinander */
  .teraprint-konfigurator-wrap .konf-info-bar,
  .tp-konfigurator-col .konf-info-bar {
    flex-direction: column;
    gap: 4px;
  }

  /* Upload-Zone noch kompakter */
  .tp-upl-zone {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* Vergleichstabelle enger */
  .tp-compare-table {
    min-width: 320px;
  }
  .tp-compare-label-col {
    width: 80px;
    min-width: 70px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════
   B14: CLS Prevention
   Reserved heights prevent layout shift.
   Opacity transitions instead of display:none.
   ═══════════════════════════════════════ */

/* --- Container min-heights: reserve space before JS renders --- */
#tpHead:empty                { min-height: 42px; }
#tpOptionsContainer:empty    { min-height: 0; }
#tpUploadContainer:empty     { min-height: 80px; }
#tpPriceContainer:empty      { min-height: 0; }
#tpCtaContainer:empty        { min-height: 52px; }
#tpTiersContainer:empty      { min-height: 0; } /* varies per product */

/* --- Incentive bar: always in layout flow, opacity-based --- */
.tp-tiers-incentive {
  min-height: 36px;
  transition: opacity 0.2s ease;
}
.tp-tiers-incentive[data-state="hidden"] {
  opacity: 0;
  pointer-events: none;
}

/* Generic hide: collapses height smoothly, no layout shift on reveal */
.tp-section--hidden {
  overflow: hidden;
  max-height: 0;
  min-height: 0 !important;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
  transition: max-height 0.2s ease, opacity 0.15s ease;
}

/* Dependency hide: same collapse but specifically for dep engine */
.tp-dep--hidden {
  overflow: hidden;
  max-height: 0;
  min-height: 0 !important;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}

/* Dependency reason hidden state */
.tp-dep-reason--hidden {
  display: none;
}

/* Sidebar category body collapse */
.sidebar-cat__body--collapsed {
  display: none;
}

/* ══════════════════════════════════════
   Nesting: Spacing-Slider
   ══════════════════════════════════════ */
.tp-spacing-control {
  padding: 10px 14px;
  border: 1px solid #e2e5ea;
  border-top: none;
  background: #fff;
}
/* B14: max-height collapse instead of display:none */
.tp-spacing-control[data-state="hidden"] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.15s ease;
}
.tp-spacing-control__label {
  display: flex;
  justify-content: space-between;
  font: 600 11px/1 'Roboto', sans-serif;
  color: #6b7280;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tp-spacing-control__value {
  font-weight: 700;
  color: #337ab7;
}
.tp-spacing-control__slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e5ea;
  outline: none;
  border-radius: 0;
}
.tp-spacing-control__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #337ab7;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  border-radius: 50%;
}
.tp-spacing-control__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #337ab7;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  border-radius: 50%;
}
.tp-spacing-control__range {
  display: flex;
  justify-content: space-between;
  font: 400 10px 'Roboto', sans-serif;
  color: #6b7280;
  margin-top: 4px;
}

/* ══════════════════════════════════════
   Nesting: Vorschau
   ══════════════════════════════════════ */
.tp-nesting-preview {
  border: 1px solid #e2e5ea;
  margin: 0;
  background: #fff;
  border-top: none;
}
/* B14: max-height collapse instead of display:none */
.tp-nesting-preview[data-state="empty"] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-width: 0 !important;
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.15s ease;
}
.tp-nesting-preview__header {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e5ea;
  background: #f8f9fb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tp-nesting-preview__title {
  font: 600 11px/1 'Roboto', sans-serif;
  color: #6b7280;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tp-nesting-preview__info {
  font: 400 12px 'Roboto', sans-serif;
  color: #6b7280;
}
.tp-nesting-preview__canvas-wrapper {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: auto;
  background: #F5F7FA;
}
.tp-nesting-preview__canvas {
  width: 100%;
  display: block;
  cursor: pointer;
}
.tp-nesting-preview__canvas:hover {
  opacity: 0.95;
}
.tp-nesting-preview__footer {
  padding: 8px 14px;
  border-top: 1px solid #e2e5ea;
  font: 400 12px 'Roboto', sans-serif;
  color: #2d2d2d;
  background: #f8f9fb;
}
.tp-nesting-preview__footer strong {
  font-weight: 600;
  color: #337ab7;
}

/* Nesting: Zoom-Modal */
.tp-nesting-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-nesting-zoom-modal {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  min-width: 320px;
}

/* ══════════════════════════════════════════════════
   C3: Display-Modi (Wizard / Accordion / Tabs / Offcanvas)
   ══════════════════════════════════════════════════ */

/* ── C3: Wizard-Modus ── */

.tp-wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 8px;
  gap: 0;
}
.tp-wizard-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8ecf0;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tp-wizard-dot--active {
  background: #337ab7;
  color: #fff;
}
.tp-wizard-dot--done {
  background: #16a34a;
  color: #fff;
}
.tp-wizard-dot:hover {
  opacity: 0.85;
}
.tp-wizard-line {
  flex: 1;
  height: 2px;
  background: #e8ecf0;
  min-width: 20px;
  max-width: 60px;
  transition: background 0.2s;
}
.tp-wizard-line--done {
  background: #16a34a;
}
.tp-wizard-counter {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  padding: 4px 0 12px;
  letter-spacing: 0.5px;
}
.tp-opts--wizard {
  border-bottom: none;
}
.tp-wizard-nav {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.tp-wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #f36f21;
  background: #fff;
  color: #337ab7;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tp-wizard-btn:hover {
  background: #fff9f5;
}
.tp-wizard-btn--next {
  background: #337ab7;
  color: #fff;
}
.tp-wizard-btn--next:hover {
  background: #2a6a9e;
}

/* ── C3: Accordion-Modus ── */

.tp-acc-item {
  border-bottom: 1px solid #eef0f3;
}
.tp-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.tp-acc-header:hover {
  background: #F5F7FA;
}
.tp-acc-header .tp-step-num {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  background: #e8ecf0;
  color: #6b7280;
  flex-shrink: 0;
}
.tp-acc-item--done .tp-acc-header .tp-step-num {
  background: #16a34a;
  color: #fff;
}
.tp-acc-item--open .tp-acc-header .tp-step-num {
  background: #337ab7;
  color: #fff;
}
.tp-acc-header .tp-sec-t {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #2d2d2d;
}
.tp-acc-summary {
  font-size: 14px;
  color: #337ab7;
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-acc-chevron {
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.2s;
}
.tp-acc-item--open .tp-acc-chevron {
  color: #337ab7;
}
.tp-acc-body {
  padding: 0 16px 16px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s;
}

/* ── C3: Tabs-Modus ── */

.tp-tabs-bar {
  display: flex;
  border-bottom: 2px solid #eef0f3;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 8px;
}
.tp-tabs-bar::-webkit-scrollbar {
  display: none;
}
.tp-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.tp-tab-btn:hover {
  color: #337ab7;
}
.tp-tab-btn--active {
  color: #337ab7;
  border-bottom-color: #337ab7;
}
.tp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  border-radius: 50%;
}
.tp-tab-badge--done {
  background: #16a34a;
  color: #fff;
}
.tp-tab-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-opts--tab {
  border-bottom: none;
  padding-top: 8px;
}

/* ── C3: Offcanvas-Modus ── */

.tp-offcanvas-trigger {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #337ab7;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.tp-offcanvas-trigger:hover {
  background: #2a6a9e;
}
.tp-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 100010;
  pointer-events: none;
  visibility: hidden;
}
.tp-offcanvas--open {
  pointer-events: auto;
  visibility: visible;
}
.tp-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.3s;
}
.tp-offcanvas--open .tp-offcanvas__backdrop {
  opacity: 1;
}
.tp-offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.tp-offcanvas--open .tp-offcanvas__panel {
  transform: translateX(0);
}
.tp-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eef0f3;
}
.tp-offcanvas__title {
  font-size: 18px;
  font-weight: 700;
  color: #2d2d2d;
}
.tp-offcanvas__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
}
.tp-offcanvas__close:hover {
  color: #2d2d2d;
}
.tp-offcanvas__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ── C3: Mobile Override (< 768px alle Modi → Wizard) ── */

@media (max-width: 767px) {
  .tp-offcanvas__panel {
    width: 100vw;
  }
  .tp-tabs-bar {
    padding: 0 4px;
  }
  .tp-tab-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  .tp-tab-label {
    max-width: 80px;
  }
  .tp-wizard-dot {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .tp-wizard-line {
    min-width: 12px;
  }
}

/* ══════════════════════════════════════
   KONFIGURATOR FONT-SIZE OVERRIDE
   Minimum 12px inside .tp configurator
   10px → 12px, 12px → 14px
   ══════════════════════════════════════ */
.tp-block--configurator .tp [style*="font-size:10px"],
.tp-konfigurator-col .tp [style*="font-size:10px"] {
  font-size: 12px !important;
}

/* Badge/Tag/Meta: 10px → 12px */
.tp .info-badge__label,
.tp .tp-badge,
.tp .tp-sec-tag,
.tp .tp-pill-n,
.tp .tp-pill-pr,
.tp .tp-tile-badge,
.tp .tp-tile-info,
.tp .tp-tile-price,
.tp .tp-sec-info-btn,
.tp .tp-tier-seg__name,
.tp .tp-ps-tax,
.tp .tp-ps-min,
.tp .tp-ps-delivery,
.tp .tp-meta-bar,
.tp .tp-step-num,
.tp .tp-upl-txt small,
.tp .tp-fc-thumb-ph,
.tp .tp-fc-meta,
.tp .tp-fc-warning,
.tp .tp-fc-dpi,
.tp .tp-fc-price,
.tp .tp-cross-sell__price,
.tp .tp-express__badge,
.tp .tp-trust span {
  font-size: 12px !important;
}

/* Secondary text: 12px → 14px */
.tp .info-badge__value,
.tp .tp-sec-t,
.tp .tp-tile-n,
.tp .tp-tile-tooltip,
.tp .tp-sec-info-tip,
.tp .tp-text-char-count,
.tp .tp-tiers-incentive,
.tp .tp-ps-label,
.tp .tp-ps-value,
.tp .tp-tier-min-hint,
.tp .tp-express__body strong,
.tp .tp-upl-progress,
.tp .tp-fc-name,
.tp .tp-stk-b,
.tp .tp-upl-zone,
.tp .tp-upl-txt,
.tp .tp-fc-dims,
.tp .tp-spacing-control__label,
.tp .tp-nesting-preview__title {
  font-size: 14px !important;
}

/* ========================================================
   REDESIGN v3.1 - Filigran-Overrides (Specificity-Fix)
   Datum: 2026-02-25
   Prinzip: Gleiche Farben, feinere Ausfuehrung
   .tp-Prefix fuer hoehere Specificity als Size-Overrides
   ======================================================== */

/* --- Step Numbers: 18px, State-Klassen --- */
.tp .tp-step-num {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
  transition: all 0.15s;
}
.tp .tp-step-num--done {
  background: rgba(22,163,74,0.08) !important;
  color: #16a34a !important;
  border: 1.5px solid rgba(22,163,74,0.25) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.tp .tp-step-num--active {
  background: #f36f21 !important;
  color: #fff !important;
  border: none !important;
}

/* --- Section Title: Mixed Case statt UPPERCASE --- */
.tp .tp-sec-t {
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* --- Section Tags: Pill-Badges --- */
.tp .tp-sec-tag {
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 0 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.tp .tp-sec-tag--waehlbar {
  background: #edf4fb !important;
  color: #337ab7 !important;
}
.tp .tp-sec-tag--inklusive {
  background: rgba(22,163,74,0.06) !important;
  color: #16a34a !important;
}
.tp .tp-sec-tag--pflicht {
  background: rgba(243,111,33,0.04) !important;
  color: #f36f21 !important;
  border: 1px solid rgba(243,111,33,0.35) !important;
}

/* --- Tiles: duennere Borders, kompakter --- */
.tp .tp-tile {
  border-width: 1.5px !important;
  border-radius: 0 !important;
  padding: 7px 7px !important;
  min-height: 38px !important;
}
.tp .tp-tile.on::after {
  top: -1.5px !important;
  left: -1.5px !important;
  right: -1.5px !important;
  height: 2px !important;
  border-radius: 0 !important;
}
.tp .tp-tile.on .tp-tile-n {
  font-size: 12px !important;
}

/* --- Tile Badge: kleiner, sentence case --- */
.tp .tp-tile-badge {
  font-size: 8px !important;
  padding: 1.5px 5px !important;
  border-radius: 0 !important;
  letter-spacing: 0.2px !important;
}

/* --- Trust Bar: volle Breite, edge-to-edge --- */
.tp .tp-trust,
.tp-trust {
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 0 !important;
  border-top: 1px solid #F5F7FA !important;
  font-weight: 500 !important;
  background: #f8f9fb !important;
}

/* --- Upload Zone: feiner --- */
.tp .tp-upl-zone,
.tp .upload-zone.tp-upl-zone {
  border-width: 1.5px !important;
  border-radius: 0 !important;
}
.tp .tp-upl-zone-v2 {
  border-width: 2px !important;
  border-radius: 0 !important;
}

/* --- Info Button: minimal kleiner --- */
.tp .tp-sec-info-btn {
  width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
}

/* --- Produkt-Tab Beschreibungs-Headings --- */
.tp-tab-content h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  line-height: 1.4;
  color: #2d2d2d;
  margin: 0 0 0.75em 0;
}

.tp-tab-content h4 {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  line-height: 1.4;
  color: #2d2d2d;
  margin: 1.5em 0 0.5em 0;
}

.tp-tab-content h4:first-child {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FILIGRANERE SCHRIFTGRÖSSEN — Konfigurator Refinement
   Jeweils nur -1 bis -2px gegenüber vorherigen Werten.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Section-Header: 12px → 11px */
.tp .tp-sec-t {
  font-size: 11px !important;
}

/* 1b. Akkordeon-Header: 14px → 13px */
.tp-acc-header .tp-sec-t {
  font-size: 13px !important;
}

/* 2. Tile-Labels: 14px → 12px */
.tp .tp-tile-n {
  font-size: 12px !important;
}
.tp .tp-tile.on .tp-tile-n {
  font-size: 12px !important;
}

/* 3. Tile-Preise: 12px → 11px */
.tp .tp-tile-price {
  font-size: 11px !important;
}

/* 4. INKL-Badges: padding etwas reduzieren (font-size bleibt 8px) */
.tp .tp-tile-badge {
  padding: 1px 4px !important;
}

/* 6. Upload-Zone Text: 14px → 13px */
.tp .tp-upl-zone,
.tp .tp-upl-txt,
.tp .tp-upl-txt p {
  font-size: 13px !important;
}

/* 7. Upload-Hinweis (small): 12px → 11px */
.tp .tp-upl-txt small {
  font-size: 11px !important;
}

/* 8. Fläche/Preis Labels: 14px → 12px */
.tp .tp-ps-label,
.tp .tp-ps-value {
  font-size: 12px !important;
}

/* 9. Gesamt Netto Label: 14px → 13px */
.tp .tp-ps-total-label {
  font-size: 13px !important;
}

/* 10. Mindestbestellwert + Lieferung: 12px → 11px */
.tp .tp-ps-min,
.tp .tp-ps-delivery {
  font-size: 11px !important;
}

/* 11. Trust-Bar: 12px → 10px */
.tp .tp-trust span {
  font-size: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   DRUCKVORSCHAU MODAL v2
   ═══════════════════════════════════════════════════════════════ */

/* Modal: breiter — kein !important, damit JS-Resize funktioniert */
.tp-preview-modal {
  max-width: min(900px, 95vw);
  width: 95vw;
  min-height: 0;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}
.tp-preview-modal .modal-body {
  padding: 12px 20px 16px;
  overflow-y: auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* ── Toolbar v2 ── */
.tp-preview-toolbar-v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #F5F7FA;
  border-bottom: 1px solid #dde0e4;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tp-pvt-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  color: #2d2d2d;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
  font-family: 'Roboto', sans-serif;
  font-variant-emoji: text;
  -webkit-text-stroke: 0;
}
.tp-pvt-btn:hover {
  background: #fff9f5;
  border-color: #cde0f2;
}
.tp-pvt-btn:active {
  background: #d4e6f7;
}
.tp-pvt-btn--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.tp-pvt-sep {
  width: 1px;
  height: 20px;
  background: #dde0e4;
  margin: 0 4px;
  flex-shrink: 0;
}
.tp-pvt-bg {
  width: auto;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
}
.tp-pvt-bg--active {
  background: #337ab7;
  color: #fff;
  border-color: #337ab7;
}
.tp-pvt-bg--active:hover {
  background: #2a6a9e;
  border-color: #2a6a9e;
}
.tp-pvt-zoom-label {
  margin-left: auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  min-width: 40px;
  text-align: right;
}
.tp-pvt-pdf-hint {
  font-size: 11px;
  color: #f36f21;
  font-weight: 500;
  margin-left: 8px;
}

/* ── Viewport (Bild-Container) ── */
.tp-preview-viewport {
  flex: 1 1 250px;
  min-height: 150px;
  max-height: min(50vh, 450px);
  overflow: hidden;
  position: relative;
  border: 1px solid #dde0e4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.tp-preview-viewport:active {
  cursor: grabbing;
}
.tp-preview-viewport img {
  max-width: none;
  max-height: none;
  object-fit: fill;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hintergruende */
.tp-preview-bg--light {
  background: #ffffff;
}
.tp-preview-bg--dark {
  background: #2d2d2d;
}
.tp-preview-bg--checker {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
    linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
    linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* ── DPI-Qualitaetsanzeige ── */
.tp-dpi-bar {
  margin-bottom: 12px;
}
.tp-dpi-bar__track {
  width: 100%;
  height: 6px;
  background: #E0E0E0;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 4px;
}
.tp-dpi-bar__fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.tp-dpi--good .tp-dpi-bar__fill { background: #16a34a; }
.tp-dpi--ok .tp-dpi-bar__fill   { background: #6b7280; }
.tp-dpi--low .tp-dpi-bar__fill  { background: #dc3545; }

.tp-dpi-bar__text {
  font-size: 11px;
  font-weight: 500;
}
.tp-dpi--good .tp-dpi-bar__text { color: #16a34a; }
.tp-dpi--ok .tp-dpi-bar__text   { color: #6b7280; }
.tp-dpi--low .tp-dpi-bar__text  { color: #dc3545; }

/* ── Live Price Preview ── */
.tp-preview-price {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(39,174,96,0.1);
  border: 1px solid #27ae60;
  font-size: 14px;
  font-weight: 600;
  color: #27ae60;
  text-align: center;
}

/* ── Active toggle state for toolbar buttons (Mirror, Crop) ── */
.tp-pvt-btn--active {
  background: #337ab7;
  color: #fff;
  border-color: #337ab7;
}
.tp-pvt-btn--active:hover {
  background: #2a6a9e;
  border-color: #2a6a9e;
}

/* ── Distortion Warning ── */
.tp-distort-warning {
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(243, 111, 33, 0.1);
  border: 1px solid #f36f21;
  color: #f36f21;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* ── Crop Overlay (positioned dynamically to match image area) ── */
.tp-crop-overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}
.tp-crop-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.tp-crop-dark {
  position: absolute;
  background: rgba(0,0,0,0.5);
  pointer-events: none;
}
.tp-crop-sel {
  position: absolute;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  pointer-events: none;
}
.tp-crop-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid #f36f21;
}
.tp-crop-handle--tl { top: -5px; left: -5px; cursor: nwse-resize; }
.tp-crop-handle--tr { top: -5px; right: -5px; cursor: nesw-resize; }
.tp-crop-handle--bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.tp-crop-handle--br { bottom: -5px; right: -5px; cursor: nwse-resize; }

.tp-crop-actions {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  gap: 8px;
}
.tp-crop-actions .modal-btn {
  font-size: 12px;
  padding: 6px 14px;
}

/* ── Loading Overlay (fuer Uebernehmen / Zuschneiden) ── */
.tp-modal-loading {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.tp-modal-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #dde0e4;
  border-top-color: #337ab7;
  border-radius: 50%;
  animation: tp-spin 0.7s linear infinite;
}
.tp-modal-loading__text {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ── Resizable Modal (Fenster-artig) ── */
.tp-preview-modal {
  position: relative;
  overflow: hidden;
  /* Subtle border indicates resize-ability */
  border: 3px solid #dde0e4;
  transition: border-color 0.15s;
}
.tp-preview-modal:hover {
  border-color: #b8c0cc;
}
.tp-preview-modal .modal-header {
  cursor: move;
  user-select: none;
}

/* ── Responsive: Modal auf Laptops (kleine Bildschirmhoehe) ── */
@media (max-height: 900px) {
  .tp-preview-modal {
    max-height: 92vh !important;
    min-height: 0 !important;
  }
  .tp-preview-viewport {
    min-height: 200px;
    max-height: 35vh;
  }
  .tp-preview-modal .modal-body {
    padding: 8px 16px 12px;
  }
}
@media (max-height: 700px) {
  .tp-preview-modal {
    max-height: 95vh !important;
  }
  .tp-preview-viewport {
    min-height: 100px;
    max-height: 28vh;
  }
  .tp-preview-modal .modal-body {
    padding: 6px 12px 8px;
  }
  .tp-dpi-bar {
    margin-bottom: 6px;
  }
  .modal-dims {
    margin-top: 8px;
  }
}

/* ── Responsive: Modal auf Mobile ── */
@media (max-width: 768px) {
  .tp-preview-modal {
    min-height: auto !important;
    max-height: 95vh !important;
  }
  .tp-preview-viewport {
    min-height: 200px;
  }
  .tp-preview-toolbar-v2 {
    gap: 2px;
    padding: 4px 8px;
  }
  .tp-pvt-btn {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .tp-pvt-bg {
    font-size: 10px;
    padding: 0 5px;
  }
  .tp-pvt-pdf-hint {
    display: none;
  }
}

/* ══ Upload Progress Improvements v2 ══ */
@keyframes tp-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes tp-pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(43,108,176,0.15); }
  50% { box-shadow: 0 0 16px rgba(43,108,176,0.3); }
}
.tp-upl-progress-card {
  animation: tp-pulse-glow 2s ease infinite;
}
.tp-upl-progress-bar-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: tp-shimmer 1.5s infinite;
}
.tp-upl-progress-bar-outer {
  position: relative;
  overflow: hidden;
}
.tp-cta--loading {
  background: linear-gradient(135deg, #2a7de1, #1d6cc4) !important;
  opacity: 1 !important;
  animation: tp-pulse-glow 2s ease infinite;
}

/* Optional dynamic API configurator */
.tp-api-step {
  margin-bottom: 8px;
}
.tp-api-step--done .tp-sec-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tp-bg-card, #fff);
  border: 1px solid var(--tp-border, #E0E0E0);
  cursor: default;
}
.tp-api-done-val {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-text, #2d2d2d);
}
.tp-api-change-btn {
  background: none;
  border: none;
  color: var(--tp-primary, #337ab7);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 8px;
  text-decoration: underline;
}
.tp-api-change-btn:hover {
  color: var(--tp-primary-hover, #23527c);
}
.tp-api-step--active {
  background: var(--tp-bg-card, #fff);
  border: 1px solid var(--tp-border, #E0E0E0);
  padding: 0 14px 14px;
}
.tp-api-step--active .tp-sec-hd {
  padding: 12px 0;
}
.tp-api-price-card {
  border-radius: 0;
  margin-top: 16px;
  padding: 16px;
  background: var(--tp-bg-card, #fff);
  border: 1px solid var(--tp-border, #E0E0E0);
}

/* Optional API input fields */
.tp-api-input-wrap {
  padding: 8px 0;
}
.tp-api-input-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: 'Roboto', sans-serif;
  color: var(--text, #2d2d2d);
}
.tp-api-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tp-api-input-field {
  max-width: 200px;
  font-family: 'Roboto Mono', monospace;
  border-radius: 0;
}
.tp-api-input-unit {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
}
.tp-api-input-hint {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
  font-family: 'Roboto', sans-serif;
}

/* Optional API loading state */
.tp-api-loading {
  text-align: center;
  padding: 24px 0;
}
.tp-api-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.tp-api-loading-text {
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
}

/* Optional API price display */
.tp-api-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tp-api-price-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #2d2d2d);
  font-family: 'Roboto', sans-serif;
}
.tp-api-price-value {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  color: var(--text, #2d2d2d);
}
.tp-api-price-tax {
  text-align: right;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
  font-family: 'Roboto', sans-serif;
}

/* Optional API error display */
.tp-api-error {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red, #dc3545);
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  border-radius: 0;
}

/* Optional API shared UI components (frontend) */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  background: var(--tp-primary, #337ab7);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tp-btn:hover {
  background: var(--tp-primary-hover, #2a6291);
}
.tp-btn--sm {
  padding: 6px 14px;
  font-size: 13px;
}
.tp-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--text, #2d2d2d);
  background: #fff;
  border: 1px solid var(--tp-border, #e0e0e0);
  border-radius: 0;
  transition: border-color 0.15s ease;
}
.tp-input:focus {
  border-color: var(--tp-primary, #337ab7);
  outline: none;
}

.tp-price-stale-hint {
  text-align: right;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
}

.tp-cta--fullwidth {
  width: 100%;
  margin: 0;
}

/* ============================================================
 * BUGFIX v4.4.1 — Forex Product Page Fixes (2026-02-26)
 * Regel: Steps = Apple Card Design, NUR konf-header = blauer Balken
 * ============================================================ */

/* Hide WooCommerce default quantity for configurator API products */
.teraprint-konfigurator-wrap ~ form.cart .quantity,
.teraprint-konfigurator-wrap ~ .cart .quantity:not(.tp-api-cached-amount),
body.single-product .teraprint-konfigurator-wrap + .cart .quantity {
  display: none !important;
}

/* Konfigurator-Haupttitel: blauer Balken "KONFIGURATION - FOREX PVC-HARTSCHAUM" */
/* (konf-header hat bereits blauen Stil via Zeile 91+2925ff — hier nur sicherstellen) */
.teraprint-konfigurator-wrap .konf-header {
  background: #337ab7 !important;
  color: #fff !important;
  padding: 12px 18px;
  border-radius: 0;
  margin: 0;
}
.teraprint-konfigurator-wrap .konf-header h2 {
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Steps: Apple Card Design (NICHT blau!) */
.teraprint-konfigurator-wrap .tp-api-cached-step {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  min-height: 80px;
  contain: layout style;
  animation: tpCachedStepFadeIn 0.15s ease-out;
}

@keyframes tpCachedStepFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.teraprint-konfigurator-wrap .tp-sec-hd {
  background: #F5F7FA;
  color: #2d2d2d;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.teraprint-konfigurator-wrap .tp-sec-hd .tp-sec-t {
  color: #2d2d2d;
  font-weight: 600;
  font-size: 14px;
}

.teraprint-konfigurator-wrap .tp-sec-hd .tp-step-num {
  background: #337ab7;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.teraprint-konfigurator-wrap .tp-api-cached-step .tp-tile-grid {
  padding: 12px;
}

/* Text overflow fix — tiles use overflow:visible so text is not clipped */
.teraprint-konfigurator-wrap .tp-opts,
.teraprint-konfigurator-wrap .tp-api-cached-step,
.teraprint-konfigurator-wrap #tp-api-cached-price {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.teraprint-konfigurator-wrap .tp-tile-grid {
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.teraprint-konfigurator-wrap .tp-tile--api {
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.teraprint-konfigurator-wrap .tp-tile--api .tp-tile-n {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  display: block;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* Price box — Apple Card style */
#tp-api-cached-price {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Menge section — Apple Card style */
.teraprint-konfigurator-wrap .tp-api-cached-amount {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}

.teraprint-konfigurator-wrap .tp-api-cached-amount .tp-sec-hd {
  background: #F5F7FA;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
}

.teraprint-konfigurator-wrap .tp-api-cached-amount input {
  margin: 12px 16px;
}


/* ── Format-Mismatch Warnung (tp-style CI-konform) ── */
.tp-fc-v2-width-warn--format {
  background: #FFF7ED;
  color: #92400e;
  border: 1px solid #6b7280;
  border-radius: 0;
}
.tp-fc-v2-width-warn--format svg {
  color: #6b7280;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ── Staffelpreis-Tabelle (tp-style: CI-konform, MENGENRABATT) ── */
.tp-staffel-header {
  padding: 8px 0 6px;
}
.tp-staffel-title {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #337ab7;
}
.tp-staffel-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
}
.tp-staffel-th {
  padding: 8px 6px;
  font-weight: 600;
  font-size: 12px;
  color: #2d2d2d;
  border-bottom: 2px solid #e2e5ea;
  background: #F5F7FA;
}
.tp-staffel-th--left {
  text-align: left;
}
.tp-staffel-th--right {
  text-align: right;
}
.tp-staffel-row {
  transition: background 0.15s ease;
}
.tp-staffel-row--alt {
  background: #F5F7FA;
}
.tp-staffel-row--active {
  background: #F5F7FA;
  font-weight: 600;
}
.tp-staffel-row:hover {
  background: #F5F7FA;
}
.tp-staffel-td {
  padding: 6px;
  border-bottom: 1px solid #e2e5ea;
  color: #2d2d2d;
}
.tp-staffel-td--right {
  text-align: right;
}
.tp-staffel-td--price {
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
}
.tp-staffel-td--rabatt {
  font-family: 'Roboto Mono', monospace;
  color: #2e9e45;
  font-weight: 600;
}
.tp-staffel-footer {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  padding: 4px 0;
}
.tp-staffel-abpreis {
  font-size: 24px;
  font-weight: 700;
  color: #337ab7;
  font-family: 'Roboto Mono', monospace;
}
.tp-staffel-abpreis-suffix {
  font-size: 12px;
  color: #6b7280;
  margin-left: 6px;
}
.tp-api-price-overview {
  margin-bottom: 16px;
}

/* ── Druckvorlage-Hint (tp-style: CI-konform) ── */
.tp-druckvorlage-hint {
  margin-top: 8px;
  padding: 10px 12px;
  background: #F5F7FA;
  border-left: 3px solid #337ab7;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  color: #2d2d2d;
}
.tp-druckvorlage-hint strong {
  color: #337ab7;
}

/* ── Staffelpreis Ab-Preis Wrapper ── */
.tp-staffel-abpreis-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.tp-staffel-abpreis-label {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #6b7280;
}

/* ── tp-critic CI-Fix: border-radius 0 everywhere ── */
.tp-staffel-table,
.tp-staffel-row,
.tp-staffel-row--alt,
.tp-staffel-row--active,
.tp-druckvorlage-hint,
.tp-staffel-abpreis-wrap {
  border-radius: 0;
}

/* ── tp-critic CI-Fix: Inline-Style Klasse fuer Druckvorlage strong ── */
.tp-druckvorlage-hint strong,
.tp-druckvorlage-hint-strong {
  color: #337ab7;
}

/* ── tp-critic CI-Fix: Spezifikationen Summary ── */
.tp-api-specs summary {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  color: #337ab7;
  user-select: none;
  cursor: pointer;
}

/* ── Runde 2: Letzte Row ohne margin-bottom ── */
.tp-product-page .tp-row:last-child {
  margin-bottom: 0;
}

/* ── Upload-Fehlermeldung (falsche Datei) ── */
.tp .upload-zone .upload-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  border-radius: 0;
}
.tp .upload-zone .upload-error-icon {
  font-size: 28px;
}
.tp .upload-zone .upload-error-text {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #dc2626;
  line-height: 1.4;
}
.tp .upload-zone .upload-error-retry {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* ── Runde 2: Upload DPI-Warnung ── */
.tp-upload-warning {
  color: #2d2d2d;
  background: #FFF7ED;
  border: 1px solid #6b7280;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════
   DRUCKDATEN-BOX (Produktseite)
   ══════════════════════════════════════ */
.tp-druckdaten-box {
  margin-top: 16px;
  border: 1px solid #e0e0e0;
  padding: 14px 16px;
  font-family: 'Roboto', sans-serif;
}
.tp-druckdaten-box__title {
  font-size: 14px;
  font-weight: 600;
  color: #2d2d2d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 4px;
}
.tp-druckdaten-box__product {
  padding: 8px 0 4px;
}
.tp-druckdaten-box__product + .tp-druckdaten-box__product {
  border-top: 1px solid #f5f5f5;
}
.tp-druckdaten-box__name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #2d2d2d;
  margin-bottom: 6px;
}
.tp-druckdaten-box__files {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tp-druckdaten-box__btn {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid;
  background: #fff;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}
.tp-druckdaten-box__btn:hover {
  background: #f5f5f5;
}
.tp-druckdaten-box__footer {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  font-size: 12px;
  color: #337ab7;
  text-decoration: none;
}
.tp-druckdaten-box__footer:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════
   PAngV: Sonderanfertigung Widerrufshinweis
   ══════════════════════════════════════ */
.tp-sonderanfertigung-hint {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 12px 0 0;
  padding: 10px 12px;
  line-height: 1.4;
}

/* ══════════════════════════════════════
   Upload-Zone: Disabled State
   ══════════════════════════════════════ */
.tp-upl-zone--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ══════════════════════════════════════
   Upload-Zone: Cached Upload (renderCachedUploadZone)
   ══════════════════════════════════════ */
.tp-cached-upload {
  margin-top: 16px;
}
.tp-cached-upload-info {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}
.tp-cached-upload-placeholder {
  text-align: center;
  padding: 24px;
  color: #6b7280;
  border: 2px dashed #e0e0e0;
}

/* ══════════════════════════════════════
   P2: Maße-Inputs (renderCachedSizeInputs)
   ══════════════════════════════════════ */
.tp-dims-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tp-dims-label {
  font-size: 11px;
  color: #6b7280;
  display: block;
  margin-bottom: 2px;
}
.tp-dims-input {
  width: 110px;
  font-family: 'Roboto Mono', monospace;
}
.tp-dims-separator {
  font-size: 18px;
  color: #6b7280;
  padding-top: 16px;
}
.tp-dims-hint {
  font-size: 11px;
  color: #6b7280;
  margin-top: 6px;
}

/* Inline-Validierung Maß-Inputs */
.tp-dims-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444;
}
.tp-dims-input--error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}
.tp-dims-error {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
  min-height: 0;
  line-height: 1.3;
  font-family: 'Roboto', sans-serif;
}
.tp-dims-input-wrap {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════
   P2: Grundpreis (renderCachedM2Price)
   ══════════════════════════════════════ */
.tp-m2-price {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f0f7ff;
  border-left: 3px solid #337ab7;
  margin-bottom: 12px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
}
.tp-m2-price-label {
  color: #6b7280;
}
.tp-m2-price-value {
  font-weight: 700;
  color: #337ab7;
  font-size: 15px;
}
.tp-m2-price-suffix {
  color: #6b7280;
  font-size: 11px;
}

/* ══════════════════════════════════════
   P2: Preis-Card (updateCachedPriceDisplay)
   ══════════════════════════════════════ */
.tp-price-card-error {
  color: #ef4444;
  font-size: 13px;
  margin-bottom: 8px;
}
.tp-price-card-placeholder {
  color: #6b7280;
  font-size: 13px;
}
.tp-price-card-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tp-price-card-total-label {
  font-size: 13px;
  font-weight: 500;
}
.tp-price-card-total-value {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
}
.tp-price-card-tax {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.tp-price-card-grundpreis {
  text-align: right;
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.tp-price-card-delivery {
  font-size: 12px;
  color: #2d2d2d;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}
.tp-price-card-warning {
  text-align: right;
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

/* ══════════════════════════════════════
   P2: Größen-Staffel (tp-staffel-td--sqm)
   ══════════════════════════════════════ */
.tp-staffel-td--sqm {
  font-family: 'Roboto Mono', monospace;
  color: #6b7280;
}

/* ══════════════════════════════════════════════════════════════════
   Staffelpreis-Tabelle: Responsive (tp-style)
   Breakpoints: 768px (Tablet), 480px (kleines Smartphone)
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet / groesseres Smartphone (max 768px) ── */
@media (max-width: 768px) {

  /* Tabelle horizontal scrollbar machen */
  .tp-api-price-overview {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabelle behaelt min-width, scrollt bei Bedarf */
  .tp-staffel-table {
    min-width: 280px;
    font-size: 12px;
  }

  /* Header/Zellen: Padding reduzieren */
  .tp-staffel-th {
    padding: 6px 4px;
    font-size: 11px;
  }
  .tp-staffel-td {
    padding: 5px 4px;
  }

  /* Ab-Preis etwas kleiner */
  .tp-staffel-abpreis {
    font-size: 20px;
  }
  .tp-staffel-abpreis-suffix {
    font-size: 11px;
  }

  /* Footer kompakter */
  .tp-staffel-footer {
    font-size: 10px;
  }
}

/* ── Kleines Smartphone (max 480px) ── */
@media (max-width: 480px) {

  /* Tabelle: noch kompakter */
  .tp-staffel-table {
    font-size: 11px;
    min-width: 240px;
  }

  /* Zellen: minimaler Abstand */
  .tp-staffel-th {
    padding: 5px 3px;
    font-size: 10px;
    white-space: nowrap;
  }
  .tp-staffel-td {
    padding: 4px 3px;
    font-size: 11px;
  }

  /* Preis-Spalte: Font-Groesse beibehalten fuer Lesbarkeit,
     aber etwas kleiner als Desktop */
  .tp-staffel-td--price {
    font-size: 11px;
  }
  .tp-staffel-td--rabatt {
    font-size: 10px;
  }
  .tp-staffel-td--sqm {
    font-size: 10px;
  }

  /* Ab-Preis: kompakter */
  .tp-staffel-abpreis-wrap {
    gap: 4px;
    margin-bottom: 6px;
  }
  .tp-staffel-abpreis {
    font-size: 18px;
  }
  .tp-staffel-abpreis-label {
    font-size: 11px;
  }
  .tp-staffel-abpreis-suffix {
    font-size: 10px;
    margin-left: 3px;
  }

  /* Header kompakter */
  .tp-staffel-header {
    padding: 6px 0 4px;
  }
  .tp-staffel-title {
    font-size: 11px;
    letter-spacing: 0.3px;
  }

  /* Footer kleiner */
  .tp-staffel-footer {
    font-size: 9px;
    margin-top: 2px;
    padding: 2px 0;
  }

  /* Aktive Zeile: sicherstellen, dass Hervorhebung sichtbar bleibt */
  .tp-staffel-row--active {
    background: #eaf2fa;
    font-weight: 600;
  }
  .tp-staffel-row--active .tp-staffel-td--price {
    color: #337ab7;
  }
}

/* ─────────────────────────────────────────────────────────────
   DPI-Warnung fuer upload_first Produkte
   ───────────────────────────────────────────────────────────── */
.tp-uf-dpi-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-uf-dpi-warn > svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.tp-uf-dpi-warn__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tp-uf-dpi-warn__body strong {
  font-weight: 600;
  font-size: 13px;
}
.tp-uf-dpi-warn__body span {
  font-size: 12px;
  color: #6b7280;
}
/* Niedrige DPI — Orange Warnung */
.tp-uf-dpi-warn--low {
  background: #FFF4E6;
  border: 1px solid #F36F21;
}
.tp-uf-dpi-warn--low > svg {
  color: #E8590C;
}
.tp-uf-dpi-warn--low strong {
  color: #E8590C;
}
/* Akzeptable DPI — Dezentes Grau-Gruen */
.tp-uf-dpi-warn--ok {
  background: #f0fdf4;
  border: 1px solid rgba(34,197,94,0.25);
}
.tp-uf-dpi-warn--ok > svg {
  color: #16a34a;
}
.tp-uf-dpi-warn--ok strong {
  color: #16a34a;
}
/* Optimale DPI — Gruen */
.tp-uf-dpi-warn--good {
  background: #f0fdf4;
  border: 1px solid #16a34a;
}
.tp-uf-dpi-warn--good > svg {
  color: #16a34a;
}
.tp-uf-dpi-warn--good strong {
  color: #16a34a;
}

/* ─────────────────────────────────────────────────────────────
   DPI-Akzeptanz-Checkbox (Warnung bestaetigen)
   ───────────────────────────────────────────────────────────── */
.tp-dpi-accept-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  font-size: 13px;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2d2d2d;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tp-dpi-accept-label:hover {
  border-color: #337AB7;
  background: #f8fbff;
}
.tp-dpi-accept-cb {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #337AB7;
  cursor: pointer;
}
/* Innerhalb der upload_first DPI-Warnbox */
.tp-uf-dpi-warn--low .tp-dpi-accept-label {
  margin-top: 10px;
  border-color: rgba(243, 111, 33, 0.35);
}
/* Innerhalb der FileCard DPI-Box */
.tp-fc-v2-dpi-box + .tp-dpi-accept-label {
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────
   Urheberrechts-Checkbox (Copyright-Bestaetigung)
   ───────────────────────────────────────────────────────────── */
.tp-copyright-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  background: #f9fafb;
  font-size: 12px;
  color: #2d2d2d;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tp-copyright-label:hover {
  border-color: #337AB7;
  background: #f8fbff;
}
.tp-copyright-cb {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #337AB7;
  cursor: pointer;
}

/* ══════════════════════════════════════
   WCAG 2.1 AA: Sichtbarer Focus-Indikator
   ══════════════════════════════════════ */
.tp-upl-zone-v2:focus-visible,
.tp-crosssell-item:focus-visible,
[role="button"]:focus-visible,
.sidebar-cat__header:focus-visible,
.sidebar-product:focus-visible,
.tp-fc-v2-thumb:focus-visible,
.tp-tile:focus-visible,
.tp-pvt-btn:focus-visible,
.modal-btn:focus-visible,
.tp-editor-btn:focus-visible,
.tp-offcanvas__close:focus-visible,
.tp-sc-close:focus-visible,
.tp-sc-btn:focus-visible {
  outline: 2px solid #337AB7;
  outline-offset: 2px;
}

/* Keyboard-navigierbare Elemente: Cursor-Hinweis */
.sidebar-cat__header[role="button"],
.sidebar-product[role="button"],
.tp-fc-v2-thumb[role="button"] {
  cursor: pointer;
}

/* ======================================================
   GERMANIZED FOR WOOCOMMERCE — CI OVERRIDES
   ====================================================== */

/* --- Shop-Loop: Doppelte MwSt/Versand-Info ausblenden --- */
/* WooCommerce price-suffix zeigt bereits "inkl. MwSt., zzgl. Versandkosten".
   Germanized fügt redundante <p> hinzu → ausblenden. */
.products .wc-gzd-additional-info.tax-info,
.products .wc-gzd-additional-info.shipping-costs-info {
  display: none !important;
}

/* --- Shop-Loop: Lieferzeit CI-konform stylen --- */
.products .wc-gzd-additional-info.delivery-time-info {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 0 0;
  padding: 0;
  line-height: 1.4;
}

.products .wc-gzd-additional-info.delivery-time-info a {
  color: #337ab7;
  transition: color 0.15s ease;
}

.products .wc-gzd-additional-info.delivery-time-info a:hover {
  color: #2A6291;
}

/* --- Einzelprodukt: Germanized-Zusatzinfo (falls sichtbar) --- */
.product .wc-gzd-additional-info {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin: 2px 0;
  padding: 0;
}

.product .wc-gzd-additional-info a {
  color: #337ab7;
  transition: color 0.15s ease;
}

.product .wc-gzd-additional-info a:hover {
  color: #2A6291;
}


.tp-shipping-link {
  color: var(--tp-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.teraprint-konfigurator-wrap .tp-shipping-link {
  color: var(--blue);
}

.tp-shipping-link:hover,
.tp-shipping-link:focus-visible {
  color: color-mix(in srgb, var(--tp-blue) 82%, var(--tp-text-primary));
}

.teraprint-konfigurator-wrap .tp-shipping-link:hover,
.teraprint-konfigurator-wrap .tp-shipping-link:focus-visible {
  color: var(--blue-dark);
}

/* --- Germanized Unit-Price & Small-Business: Farb-Fix --- */
.wc-gzd-unit-price,
.wc-gzd-small-business-info {
  font-family: 'Roboto', sans-serif;
  color: #6b7280 !important;
  font-size: 12px;
}

/* --- Checkout-Modal: border-radius Fix --- */
.wc-gzd-checkout-modal-wrapper .wc-gzd-checkout-modal {
  border-radius: 0 !important;
  border-color: #e0e0e0;
}

/* --- Loading-Placeholder: border-radius Fix --- */
.wc-gzd-placeholder-loading .wc-gzd-placeholder-row > * {
  border-radius: 0 !important;
}

/* --- Checkout-Tabelle: Hintergrund-Fix --- */
.woocommerce-checkout .shop_table {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0;
}

/* --- Germanized Checkboxes (AGB etc.): CI-konform --- */
.wc-gzd-checkboxes .wc-gzd-checkbox {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #2d2d2d;
}

.wc-gzd-checkboxes .wc-gzd-checkbox a {
  color: #337ab7;
  transition: color 0.15s ease;
}

.wc-gzd-checkboxes .wc-gzd-checkbox a:hover {
  color: #2A6291;
}

/* --- Germanized Cart-Info in Blocks --- */
.wc-block-components-product-details__value .wc-gzd-cart-info,
.wc-block-components-product-details [class*="wc-block-components-product-details__gzd-"] .wc-block-components-product-details__value {
  font-family: 'Roboto', sans-serif;
  color: #6b7280;
  font-size: 12px;
}

/* ═══════════════════════════════════════════
   OPTIONAL API CONFIGURATOR — Print Configurator Design
   ═══════════════════════════════════════════ */
.tp-api-konfig { max-width: 100%; width: 100%; scroll-margin-top: 100px; }

/* CSS Variables → TeraPrint Design System (compact) */
.tp-api-konfig .connect-configurator-wrapper {
  --connect-color-primary: #337ab7;
  --connect-color-primary-hover: #2a6394;
  --connect-color-bg-primary: #ffffff;
  --connect-color-bg-secondary: #f5f6f8;
  --connect-color-text-primary: #2d2d2d;
  --connect-color-text-secondary: #6b7280;
  --connect-radius: 6px;
  --connect-border: 1px solid #e0e0e0;
  --connect-color-success: #22c55e;
  --connect-font-small: 0.75rem;
  --connect-font-medium: 0.875rem;
  --connect-font-large: 1rem;
  font-family: 'Roboto', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   Optional API Configurator — Print Configurator UI v7.3
   "Aus einem Guss" — nahtlose Integration
   ::part() rules as supplementary layer; primary styling via PHP Shadow DOM injection.
   Values here MUST match PHP single-source (class-teraprint-layout-blocks.php).
   ══════════════════════════════════════════════════════════════ */

/* === ::part() Shadow DOM Overrides (synchronized with PHP v7.3) === */
.tp-api-konfig connect-product-configurator::part(configurator) {
  font-family: 'Roboto', sans-serif !important;
}
.tp-api-konfig connect-product-configurator::part(step) {
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
.tp-api-konfig connect-product-configurator::part(step-title) {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2d2d2d !important;
}
.tp-api-konfig connect-product-configurator::part(step-subtitle) {
  font-size: 11px !important;
  color: #6b7280 !important;
}
.tp-api-konfig connect-product-configurator::part(option) {
  border-radius: 0 !important;
  outline: 1.5px solid #e0e0e0 !important;
  transition: all 0.15s ease !important;
}
.tp-api-konfig connect-product-configurator::part(option):hover {
  outline-color: rgba(51,122,183,0.3) !important;
  background: #f5f6f8 !important;
}
.tp-api-konfig connect-product-configurator::part(option-selected) {
  outline-color: #337ab7 !important;
  outline-width: 2px !important;
  background: #e8f0f8 !important;
}
.tp-api-konfig connect-product-configurator::part(option-title) {
  font-size: 13px !important;
  font-weight: 600 !important;
}
.tp-api-konfig connect-product-configurator::part(option-description) {
  font-size: 12px !important;
  color: #6b7280 !important;
}
.tp-api-konfig connect-product-configurator::part(state-indicator-icon) {
  color: #6b7280 !important;
}

/* === Optional API Header === */
.tp-api-konfig .tp-api-header {
  background: #337ab7;
  color: #fff;
  padding: 10px 16px;
  border-radius: 0;
  margin: 0;
}
.tp-api-konfig .tp-api-header .tp-sec-t {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}

/* === Web Component Container === */
.tp-api-konfig connect-product-configurator {
  max-width: 100%;
  display: block;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0;
  overflow: visible;
  background: #fff;
}

/* === Summary Section (outside Shadow DOM) === */
.tp-api-konfig .connect-configurator-summary {
  border: 1px solid #e0e0e0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  margin-top: 12px;
}
.tp-api-konfig .connect-configurator-summary h2 {
  font-size: 14px;
  font-weight: 700;
  color: #2d2d2d;
  margin: 0 0 12px;
  padding: 16px 20px 0;
  font-family: 'Roboto', sans-serif;
}
.tp-api-konfig .connect-configurator-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 20px 16px;
  border-bottom: 1px solid #e0e0e0;
}
.tp-api-konfig .connect-configurator-card > strong {
  display: none; /* "Produkt" heading is redundant */
}
.tp-api-konfig .connect-options-list {
  margin: 0;
  padding: 0;
}
.tp-api-konfig .connect-options-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}
.tp-api-konfig .connect-options-list > div:last-child {
  border-bottom: none;
}
.tp-api-konfig .connect-options-list dt {
  color: #6b7280;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
}
.tp-api-konfig .connect-options-list dd {
  color: #2d2d2d;
  font-weight: 500;
  font-size: 12px;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

/* Dateispezifikationen — Link */
.tp-api-konfig .connect-filespecs-link {
  font-size: 12px;
  color: #337ab7;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 6px 12px;
  margin: 12px 20px 16px;
  transition: all 0.15s ease;
}
.tp-api-konfig .connect-filespecs-link:hover {
  background: #e8f0f8;
  border-color: #337ab7;
}
/* Dateispezifikationen — Popover Position (nicht oben links!) */
.tp-api-konfig .connect-filespecs-popover,
.connect-filespecs-popover[popover],
.connect-filespecs-popover:popover-open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 420px;
  width: 90vw;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  font-family: 'Roboto', sans-serif;
  z-index: 100;
}
.connect-filespecs-popover::backdrop {
  background: rgba(0,0,0,0.3);
}
.tp-api-konfig .connect-filespecs-title {
  font-size: 14px;
  font-weight: 700;
  color: #2d2d2d;
  font-family: 'Roboto', sans-serif;
}
.tp-api-konfig .connect-filespecs-close {
  color: #6b7280;
  transition: color 0.15s ease;
}
.tp-api-konfig .connect-filespecs-close:hover {
  color: #2d2d2d;
}
.tp-api-konfig .connect-filespecs-row {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #f5f6f8;
}
.tp-api-konfig .connect-filespecs-row:last-child {
  border-bottom: none;
}
.tp-api-konfig .connect-filespecs-label {
  color: #6b7280;
}
.tp-api-konfig .connect-filespecs-value {
  color: #2d2d2d;
  font-weight: 500;
}

/* Price Section — Premium-Look (Apple/Vistaprint-Inspiration) */
.tp-api-konfig .connect-price-section {
  padding: 16px 20px;
  text-align: right;
  background: #f5f6f8;
  border-top: 1px solid #e0e0e0;
}
.tp-api-konfig .connect-price-row.connect-price-total {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.tp-api-konfig .connect-price-label {
  font-size: 13px;
  color: #6b7280;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.tp-api-konfig .connect-price-amount {
  font-size: 28px;
  font-weight: 700;
  color: #2d2d2d;
  font-family: 'Roboto', sans-serif;
  line-height: 1.1;
}
.tp-api-konfig .connect-price-amount .woocommerce-Price-amount,
.tp-api-konfig .connect-price-amount .amount {
  color: #2d2d2d !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}
.tp-api-konfig .connect-price-amount .woocommerce-Price-currencySymbol {
  font-size: 0.5em !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  vertical-align: super;
  line-height: 1;
}
/* Doppelpreis (excl+incl): Zweiter Preis dezenter */
.tp-api-konfig .connect-price-row.connect-price-total .connect-price-label + .connect-price-amount + .connect-price-label {
  font-size: 11px;
  flex-basis: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e0e0e0;
}
.tp-api-konfig .connect-price-row.connect-price-total .connect-price-label + .connect-price-amount + .connect-price-label + .connect-price-amount {
  font-size: 16px;
  color: #6b7280;
}
.tp-api-konfig .connect-price-shipping {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
  text-align: right;
  font-family: 'Roboto', sans-serif;
}
.tp-api-konfig .connect-price-shipping a {
  color: #337ab7;
  text-decoration: none;
}
.tp-api-konfig .connect-price-shipping a:hover {
  text-decoration: underline;
}

/* CTA → Orange */
.tp-api-konfig #connect-addtocart {
  background: #F36F21;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 16px 24px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  letter-spacing: 0.02em;
}
.tp-api-konfig #connect-addtocart:hover {
  background: #e05e10;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(243,111,33,0.25);
}

/* Footer */
.tp-api-konfig .connect-configurator-footer {
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
  border-top: none;
}

/* Delivery Moments */
.tp-api-konfig .connect-delivery-moments,
.tp-api-konfig .connect-delivery-moment {
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
}

/* === Sonderanfertigung Hint === */
.tp-api-konfig .tp-sonderanfertigung-hint {
  font-size: 11px;
  color: #6b7280;
  margin: 12px 0 0;
  padding: 0;
  line-height: 1.4;
}

/* === Trust Bar with SVG Icons === */
.tp-api-konfig .tp-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 10px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid #e0e0e0;
}
.tp-api-konfig .tp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  font-family: 'Roboto', sans-serif;
}
.tp-api-konfig .tp-trust svg {
  color: #337ab7;
  flex-shrink: 0;
}

/* === Wrapper overflow & spacing === */
.tp-konfigurator-col .tp-api-konfig,
.tp-block--configurator .tp-api-konfig { overflow: visible; }
.tp-api-konfig .connect-configurator-wrapper { overflow: visible; }
.tp-api-konfig .connect-configurator-columns { gap: 0; }

/* ═══════════════════════════════════════════════════════════════════
   OPTIONAL API CONFIGURATOR v2 — Accordion Steps + Info/Preis Split
   Stand: 3. März 2026
   ACHTUNG: Nur fuer optionale API-Produkte. Eigenprodukt-Tiles nicht betroffen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Konfigurator-Container ── */
.tp-configurator-v2 {
  background: var(--tp-card-bg, #ffffff);
  border-radius: 0;
  border: 1px solid var(--tp-border, #e2e5ea);
  overflow: hidden;
}

.tp-config-v2-header {
  padding: 14px 24px;
  background: var(--tp-primary, #337ab7);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tp-config-v2-header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.tp-config-v2-header-hint {
  font-size: 11px;
  opacity: 0.75;
}

/* ── Accordion Step ── */
.tp-step-v2 {
  border-bottom: 1px solid var(--tp-border, #e2e5ea);
}

.tp-step-v2-header {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.tp-step-v2-header:hover {
  background: var(--tp-bg, #f7f8fa);
}

.tp-step-v2.is-open .tp-step-v2-header {
  background: var(--tp-bg, #f7f8fa);
}

/* Step-Nummer (Kreis) */
.tp-step-v2-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tp-border, #e2e5ea);
  color: var(--tp-text-muted, #5a6072);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.tp-step-v2.is-done .tp-step-v2-num {
  background: var(--tp-success, #22a861);
  color: #ffffff;
}

.tp-step-v2.is-open .tp-step-v2-num {
  background: var(--tp-accent, #f36f21);
  color: #ffffff;
}

.tp-step-v2-title {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.tp-step-v2-value {
  font-size: 12px;
  color: var(--tp-text-muted, #5a6072);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-step-v2-chevron {
  width: 16px;
  height: 16px;
  color: var(--tp-text-muted, #5a6072);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tp-step-v2.is-open .tp-step-v2-chevron {
  transform: rotate(180deg);
}

.tp-step-v2-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-step-v2.is-open .tp-step-v2-body {
  max-height: 900px;
}

.tp-step-v2-content {
  padding: 4px 24px 16px;
}

/* ── Option Cards ── */
.tp-opts-grid-v2 {
  display: grid;
  gap: 8px;
}

.tp-opts-grid-v2--2col { grid-template-columns: 1fr 1fr; }
.tp-opts-grid-v2--3col { grid-template-columns: 1fr 1fr 1fr; }
.tp-opts-grid-v2--4col { grid-template-columns: 1fr 1fr 1fr 1fr; }
.tp-opts-grid-v2--list { grid-template-columns: 1fr 1fr 1fr; }

.tp-option-card-v2 {
  border: 2px solid var(--tp-border, #e2e5ea);
  border-radius: 0;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tp-card-bg, #ffffff);
  position: relative;
}

.tp-option-card-v2:hover {
  border-color: var(--tp-primary, #337ab7);
  background: var(--tp-primary-light, #eef5fb);
}

.tp-option-card-v2.is-selected {
  border-color: var(--tp-accent, #f36f21);
  background: var(--tp-accent-light, #fff4ec);
  box-shadow: 0 0 0 1px var(--tp-accent, #f36f21);
}

.tp-option-card-v2.is-selected::after {
  content: '\2713';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--tp-accent, #f36f21);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

.tp-option-card-v2.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

.tp-option-card-v2-img {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: #f0f2f5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tp-option-card-v2-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tp-option-card-v2-info {
  flex: 1;
  min-width: 0;
}

.tp-option-card-v2-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 1px;
}

.tp-option-card-v2-desc {
  font-size: 11px;
  color: var(--tp-text-muted, #5a6072);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tp-option-card-v2-badge {
  font-size: 9px;
  font-weight: 600;
  color: var(--tp-success, #22a861);
  background: #e8f8ef;
  padding: 1px 6px;
  border-radius: 0;
  display: inline-block;
  margin-top: 2px;
}

.tp-option-card-v2--compact {
  flex-direction: column;
  text-align: center;
  padding: 10px 6px;
  gap: 5px;
}

.tp-option-card-v2--compact .tp-option-card-v2-desc {
  display: none;
}

.tp-option-card-v2--format {
  padding: 9px 14px;
}

/* ── Mengen-Control ── */
.tp-amount-v2-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tp-amount-v2-control {
  display: flex;
  align-items: center;
  border: 2px solid var(--tp-border, #e2e5ea);
  border-radius: 0;
  overflow: hidden;
}

.tp-amount-v2-btn {
  width: 36px;
  height: 36px;
  background: var(--tp-bg, #f7f8fa);
  border: none;
  cursor: pointer;
  font-size: 17px;
  color: var(--tp-text, #1a1a2e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-amount-v2-btn:hover {
  background: var(--tp-border, #e2e5ea);
}

.tp-amount-v2-input {
  width: 50px;
  height: 36px;
  border: none;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  background: var(--tp-card-bg, #ffffff);
}

.tp-amount-v2-input:focus {
  outline: none;
}

.tp-amount-v2-hint {
  font-size: 11px;
  color: var(--tp-text-muted, #5a6072);
}

/* ── Cross-Sell (Zubehoer) ── */
.tp-crosssell-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tp-crosssell-v2-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 2px solid var(--tp-border, #e2e5ea);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tp-crosssell-v2-item:hover {
  border-color: var(--tp-primary, #337ab7);
  background: var(--tp-primary-light, #eef5fb);
}

.tp-crosssell-v2-item.is-added {
  border-color: var(--tp-accent, #f36f21);
  background: var(--tp-accent-light, #fff4ec);
}

.tp-crosssell-v2-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-crosssell-v2-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--tp-border, #e2e5ea);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.tp-crosssell-v2-item.is-added .tp-crosssell-v2-check {
  background: var(--tp-accent, #f36f21);
  border-color: var(--tp-accent, #f36f21);
  color: #ffffff;
}

.tp-crosssell-v2-name {
  font-size: 12px;
  font-weight: 500;
}

.tp-crosssell-v2-price {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--tp-accent, #f36f21);
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   BOTTOM SPLIT: Info (50%) LINKS + Preis (50%) RECHTS
   ══════════════════════════════════════════ */

.tp-config-v2-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--tp-accent, #f36f21);
}

/* ── LINKE SEITE: Info-Tabs ── */
.tp-config-v2-info {
  display: flex;
  flex-direction: column;
  background: var(--tp-card-bg, #ffffff);
  border-right: 1px solid var(--tp-border, #e2e5ea);
}

.tp-info-v2-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--tp-border, #e2e5ea);
  flex-shrink: 0;
}

.tp-info-v2-tab-btn {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tp-text-muted, #5a6072);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.tp-info-v2-tab-btn:hover {
  color: var(--tp-text, #1a1a2e);
  background: var(--tp-bg, #f7f8fa);
}

.tp-info-v2-tab-btn.is-active {
  color: var(--tp-accent, #f36f21);
}

.tp-info-v2-tab-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--tp-accent, #f36f21);
  border-radius: 0;
}

.tp-info-v2-panel {
  display: none;
  padding: 16px 20px;
  overflow-y: auto;
  max-height: 400px;
}

.tp-info-v2-panel.is-active {
  display: block;
}

/* Spezifikations-Tabelle */
.tp-specs-v2-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.tp-specs-v2-table tr {
  border-bottom: 1px solid #f0f2f5;
}

.tp-specs-v2-table td {
  padding: 7px 0;
}

.tp-specs-v2-table td:first-child {
  color: var(--tp-text-muted, #5a6072);
  width: 42%;
}

.tp-specs-v2-table td:last-child {
  font-weight: 600;
}

/* Produktvorteile */
.tp-vorteile-v2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tp-vorteile-v2-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--tp-text-muted, #5a6072);
}

.tp-vorteile-v2-check {
  width: 16px;
  height: 16px;
  background: var(--tp-success, #22a861);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  margin-top: 1px;
}

/* Downloads */
.tp-download-v2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tp-download-v2-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f6f8;
  font-size: 12px;
  color: var(--tp-primary, #337ab7);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tp-download-v2-item:hover {
  color: var(--tp-accent, #f36f21);
}

.tp-download-v2-item:last-child {
  border-bottom: none;
}

.tp-download-v2-icon {
  width: 28px;
  height: 28px;
  background: var(--tp-primary-light, #eef5fb);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.tp-download-v2-name {
  font-weight: 600;
}

.tp-download-v2-meta {
  font-size: 10px;
  color: var(--tp-text-muted, #5a6072);
}

/* FAQ Accordion */
.tp-faq-v2-item {
  border-bottom: 1px solid #f0f2f5;
}

.tp-faq-v2-q {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
}

.tp-faq-v2-q:hover {
  color: var(--tp-accent, #f36f21);
}

.tp-faq-v2-q svg {
  width: 14px;
  height: 14px;
  color: var(--tp-text-muted, #5a6072);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tp-faq-v2-item.is-open .tp-faq-v2-q svg {
  transform: rotate(180deg);
}

.tp-faq-v2-a {
  display: none;
  font-size: 11px;
  color: var(--tp-text-muted, #5a6072);
  line-height: 1.5;
  padding-bottom: 10px;
}

.tp-faq-v2-item.is-open .tp-faq-v2-a {
  display: block;
}

/* ── RECHTE SEITE: Preis + Warenkorb ── */
.tp-config-v2-price {
  padding: 24px;
  background: linear-gradient(to bottom, #fef8f4, var(--tp-card-bg, #ffffff));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tp-config-v2-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tp-border, #e2e5ea);
}

.tp-sum-v2-item {
  display: flex;
  gap: 4px;
  font-size: 11px;
}

.tp-sum-v2-label {
  color: var(--tp-text-muted, #5a6072);
}

.tp-sum-v2-val {
  font-weight: 600;
  color: var(--tp-text, #1a1a2e);
}

.tp-config-v2-price-big {
  text-align: center;
  padding: 8px 0;
}

.tp-config-v2-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.tp-config-v2-price-label {
  font-size: 12px;
  color: var(--tp-text-muted, #5a6072);
}

.tp-config-v2-price-value {
  font-family: 'Roboto Mono', monospace;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.tp-config-v2-price-value sup {
  font-size: 16px;
  vertical-align: super;
}

.tp-config-v2-price-tax {
  font-size: 11px;
  color: var(--tp-text-muted, #5a6072);
  margin-top: 3px;
}

.tp-config-v2-upload-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--tp-primary-light, #eef5fb);
  border: 1px solid rgba(51, 122, 183, 0.12);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--tp-primary-dark, #285f8f);
}

.tp-config-v2-upload-notice svg {
  flex-shrink: 0;
  color: var(--tp-primary, #337ab7);
  width: 16px;
  height: 16px;
}

.tp-config-v2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  background: var(--tp-accent, #f36f21);
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(243, 111, 33, 0.3);
}

.tp-config-v2-cta:hover {
  background: var(--tp-accent-hover, #e05e10);
  box-shadow: 0 6px 20px rgba(243, 111, 33, 0.4);
  transform: translateY(-1px);
}

.tp-config-v2-cta:active {
  transform: translateY(0);
}

.tp-config-v2-legal {
  text-align: center;
  font-size: 10px;
  color: var(--tp-text-muted, #5a6072);
}

.tp-config-v2-trust {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  color: var(--tp-text-muted, #5a6072);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tp-config-v2-bottom {
    grid-template-columns: 1fr;
  }
  .tp-config-v2-info {
    border-right: none;
    border-bottom: 1px solid var(--tp-border, #e2e5ea);
  }
  .tp-opts-grid-v2--3col,
  .tp-opts-grid-v2--4col {
    grid-template-columns: 1fr 1fr;
  }
  .tp-opts-grid-v2--list {
    grid-template-columns: 1fr 1fr;
  }
  .tp-crosssell-v2-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v2 Konfigurator — Full-Width Layout Override
   Wenn tp-v2-active gesetzt ist, bekommt die Konfigurator-Spalte
   die volle Breite (Spalte 2+3), die Main-Spalte wird ausgeblendet.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: 2-column layout (sidebar + full-width configurator) */
@media (min-width: 1101px) {
  .tp-product-page.tp-v2-active {
    grid-template-columns: 250px 1fr !important;
  }
  .tp-product-page.tp-v2-active .tp-col--main {
    display: none !important;
  }
  .tp-product-page.tp-v2-active .tp-col--configurator {
    grid-column: 2 / -1 !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1100px) {
  .tp-product-page.tp-v2-active {
    grid-template-columns: 1fr !important;
  }
  .tp-product-page.tp-v2-active .tp-col--main {
    display: none !important;
  }
  .tp-product-page.tp-v2-active .tp-col--configurator {
    grid-column: 1 / -1 !important;
  }
}

/* Mobile: configurator already spans full width */

/* ========================================================================
   OPTIONAL API WEB COMPONENT — UI OVERRIDES
   Betrifft: optionale API-Produkte die <connect-product-configurator> nutzen
   Stand: 2026-03-03
   ======================================================================== */

/* --- CSS Custom Properties Override --- */
:root {
    /* Geometrie */
    --connect-radius: 6px;

    /* Farben → TeraPrint CI */
    --connect-color-primary: #337ab7;
    --connect-color-primary-hover: #2a6394;
    --connect-color-primary-active: #337ab7;

    --connect-color-text-primary: #2d2d2d;
    --connect-color-text-secondary: #6b7280;
    --connect-color-text-accent-1: #ffffff;

    --connect-color-bg-primary: #ffffff;
    --connect-color-bg-secondary: #f5f6f8;

    --connect-border: 1px solid #e0e0e0;

    --connect-color-success: #22c55e;
    --connect-color-warning: #f59e0b;
    --connect-color-error: #ef4444;

    /* Typografie → Roboto */
    --connect-font-family-primary: 'Roboto', sans-serif;
    --connect-font-family-secondary: 'Roboto', sans-serif;
    --connect-font-small: 12px;
    --connect-font-medium: 14px;
    --connect-font-large: 16px;
}

/* --- Web Component ::part() Overrides --- */

/* Steps: Cards mit CI-Border + Radius */
connect-product-configurator::part(step) {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}

/* Step Title: Roboto 600, #2d2d2d */
connect-product-configurator::part(step-title) {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    color: #2d2d2d;
}

/* Step Subtitle: Roboto 400, #6b7280 */
connect-product-configurator::part(step-subtitle) {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
    font-size: 12px;
    color: #6b7280 !important;
}

/* Option Tiles: CI-Border + Radius */
connect-product-configurator::part(option) {
    border-radius: 0 !important;
    outline: 1px solid #e0e0e0;
    transition: outline-color 0.15s ease, background-color 0.15s ease;
}

connect-product-configurator::part(option):hover {
    outline-color: #337ab7;
}

connect-product-configurator::part(option-selected) {
    outline: 2px solid #337ab7 !important;
}

/* Option Text: CI-Fonts */
connect-product-configurator::part(option-title) {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #2d2d2d;
}

connect-product-configurator::part(option-description) {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #6b7280 !important;
}

/* Option Images: CI-konform */
connect-product-configurator::part(option-image) {
    border-radius: 0;
    object-fit: contain;
}

/* --- CTA-Button: ORANGE (nicht Blau!) --- */
#connect-addtocart {
    background: #f36f21 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 32px;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#connect-addtocart:hover {
    background: #e05e10 !important;
}

#connect-addtocart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Summary Section: CI-Fonts + Farben --- */
.connect-configurator-summary {
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
}

.connect-configurator-summary h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #2d2d2d;
}

.connect-configurator-card {
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.connect-options-list dt {
    font-family: 'Roboto', sans-serif;
    color: #6b7280;
}

.connect-options-list dd {
    font-family: 'Roboto', sans-serif;
    color: #2d2d2d;
}

/* --- Delivery Moments: CI-Farben --- */
.connect-delivery-moment {
    font-family: 'Roboto', sans-serif;
    color: #2d2d2d;
}

.connect-delivery-price {
    color: #6b7280;
}

/* --- File Specs: CI-Fonts --- */
.connect-filespecs-link {
    font-family: 'Roboto', sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    color: #2d2d2d;
}

.connect-filespecs-title {
    font-family: 'Roboto', sans-serif;
    color: #2d2d2d;
}

.connect-filespecs-label {
    font-family: 'Roboto', sans-serif;
    color: #6b7280;
}

.connect-filespecs-value {
    font-family: 'Roboto', sans-serif;
    color: #2d2d2d;
}

/* --- Uploader Web Component: CI-Override --- */
connect-uploader::part(container) {
    --font-family: 'Roboto', sans-serif;
    --font-color: #2d2d2d;
    --primary-color: #337ab7;
    --border-radius: 0;
    --button-border-radius: 0;
    --button-pending-color: #337ab7;
    --button-uploading-color: #f59e0b;
    --button-completed-color: #22c55e;
    --button-error-color: #ef4444;
    --status-color: #6b7280;
}

/* --- Checkout Shipping: CI-Override --- */
.connect-shipping-wrapper {
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
}

.connect-shipping-wrapper h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #2d2d2d;
}

.connect-shipping-dates-list,
.connect-shipping-methods-list {
    border: 1px solid #e0e0e0;
    border-radius: 0;
    overflow: hidden;
}

.connect-date-option,
.connect-method-option {
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.15s ease;
}

.connect-method-name {
    font-family: 'Roboto', sans-serif;
    color: #2d2d2d;
}

.connect-method-price {
    color: #337ab7;
    font-family: 'Roboto', sans-serif;
}

.connect-method-description,
.connect-method-transit,
.connect-method-packaging {
    font-family: 'Roboto', sans-serif;
    color: #6b7280;
}

/* ═══════════════════════════════════════════════════
   Product Specs Info-Box (optional API products)
   ═══════════════════════════════════════════════════ */
.tp-product-specs {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #f5f6f8;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #2d2d2d;
}
.tp-product-specs__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tp-product-specs__row + .tp-product-specs__row {
    margin-top: 6px;
}
.tp-product-specs__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tp-product-specs__label {
    font-weight: 500;
    color: #337ab7;
}
.tp-product-specs__dims {
    padding-left: 24px;
    color: #6b7280;
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════
   File Specs Box (optional print specifications)
   ═══════════════════════════════════════════════════ */

.tp-file-specs {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #2d2d2d;
}

.tp-file-specs:empty {
    display: none;
}

.tp-file-specs__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #337ab7;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.tp-file-specs__title svg {
    flex-shrink: 0;
}

.tp-file-specs__grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-file-specs__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.tp-file-specs__label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.tp-file-specs__value {
    font-family: 'Roboto Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: #2d2d2d;
    text-align: right;
}

/* ══════════════════════════════════════
   BRUTTO/NETTO PREISANZEIGE
   ══════════════════════════════════════ */
.tp-netto-hint {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
}
.tp-ps-total .tp-netto-hint {
    text-align: right;
}
.tp-upl-summary-total .tp-netto-hint,
.tp-api-price .tp-netto-hint {
    text-align: right;
    margin-top: 1px;
}


/* ══════════════════════════════════════════════════════════════
   DARK TECH THEME — v1
   Referenz: /srv/teraprint/docs/mockups/configurator-v2-dark-3flows.html
   Alle Light-Defaults werden hier überschrieben.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. CSS-Variablen auf Dark umschalten ── */
.teraprint-konfigurator-wrap {
  --blue: #337ab7;
  --blue-dark: #2a6291;
  --blue-light: rgba(51,122,183,0.14);
  --orange: #f36f21;
  --orange-light: rgba(243,111,33,0.12);
  --orange-border: rgba(243,111,33,0.5);
  --dark: #e2e8f0;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --border: rgba(148,163,184,0.16);
  --border-light: rgba(255,255,255,0.07);
  --border-faint: rgba(255,255,255,0.05);
  --bg-gray: #1a2a3c;
  --bg-gray-light: rgba(255,255,255,0.04);
  --bg-white: #1a2a3c;
  --green: #28a745;
  --green-dark: #22c55e;
  --green-bg: rgba(34,197,94,0.08);
  --red: #f87171;
  --red-dark: #ef4444;
  --tp-card-radius: 0;
  --tp-card-shadow: 0 28px 60px rgba(2,6,23,0.45);
  --tp-card-border: 1px solid rgba(148,163,184,0.16);
  --tp-card-bg: #1a2a3c;
  --tp-inner-radius: 0;
  --tp-border: rgba(148,163,184,0.16);
  --tp-primary: #337ab7;
  --tp-primary-light: rgba(51,122,183,0.14);
  --tp-accent: #f36f21;
  --tp-accent-light: rgba(243,111,33,0.12);
  --tp-text-muted: #94a3b8;
  --tp-success: #22c55e;
  --upl-primary: #337ab7;
  --upl-primary-light: rgba(51,122,183,0.14);
  --upl-primary-dark: #2a6291;
  --upl-accent: #f36f21;
  --upl-accent-light: rgba(243,111,33,0.08);
  --upl-success: #22c55e;
  --upl-success-light: rgba(34,197,94,0.1);
  --upl-danger: #f87171;
  --upl-danger-light: rgba(248,113,113,0.1);
  --upl-gray50: rgba(255,255,255,0.03);
  --upl-gray100: rgba(255,255,255,0.05);
  --upl-gray200: rgba(255,255,255,0.07);
  --upl-gray300: rgba(255,255,255,0.1);
  --upl-gray400: #64748b;
  --upl-gray500: #94a3b8;
  --upl-gray600: #cbd5e1;
  --upl-gray700: #e2e8f0;
  --upl-gray800: #f1f5f9;
  color: #e2e8f0;
}

/* ── 2. Konfigurator Shell (.tp) ── */
.teraprint-konfigurator-wrap .tp {
  background: linear-gradient(180deg, rgba(16,28,43,0.92), rgba(9,18,30,0.97));
  border: 1px solid rgba(148,163,184,0.16);
  border-top-color: rgba(255,255,255,0.18);
  box-shadow: 0 28px 60px rgba(2,6,23,0.45);
}

/* ── 3. Konfigurator-Header (blaues Banner) ── */
.teraprint-konfigurator-wrap .konf-header {
  background:
    radial-gradient(circle at top right, rgba(255,141,56,0.18), transparent 42%),
    linear-gradient(140deg, rgba(35,74,112,0.9), rgba(16,29,45,0.95) 72%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
}
.teraprint-konfigurator-wrap .konf-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* ── 4. Info-Badges (Lieferzeit, Formate, Service) ── */
.teraprint-konfigurator-wrap .info-badge {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.teraprint-konfigurator-wrap .info-badge__label {
  color: rgba(226,232,240,0.72);
}
.teraprint-konfigurator-wrap .info-badge__value {
  color: #f8fafc;
}

.teraprint-konfigurator-wrap .tp .konf-info-bar .info-badge {
  background: rgba(255,255,255,0.9);
  border-color: rgba(51,122,183,0.18);
}
.teraprint-konfigurator-wrap .tp .konf-info-bar .info-badge__icon {
  color: #1f2937;
}
.teraprint-konfigurator-wrap .tp .konf-info-bar .info-badge__label {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp .konf-info-bar .info-badge__value {
  color: #1f2937;
}

/* ── 5. tp-head (Produkttitel-Zeile) ── */
.teraprint-konfigurator-wrap .tp-head {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: transparent;
}
.teraprint-konfigurator-wrap .tp-head h1 {
  color: #e2e8f0;
}

/* ── 6. Section Headers ── */
.teraprint-konfigurator-wrap .tp-sec-hd {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-sec-title {
  color: #e2e8f0;
}

/* ── 7. Accordion Steps (tp-step-v2) ── */
.teraprint-konfigurator-wrap .tp-step-v2 {
  border: 1.5px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.02);
}
.teraprint-konfigurator-wrap .tp-step-v2-header {
  background: transparent;
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-step-v2-header:hover {
  background: rgba(255,255,255,0.03);
}
.teraprint-konfigurator-wrap .tp-step-v2.is-open .tp-step-v2-header {
  background: rgba(51,122,183,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.teraprint-konfigurator-wrap .tp-step-v2-num {
  background: linear-gradient(180deg, #337ab7, #2a6291);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.teraprint-konfigurator-wrap .tp-step-v2.is-done .tp-step-v2-num {
  background: linear-gradient(180deg, #22c55e, #16a34a);
}
.teraprint-konfigurator-wrap .tp-step-v2-title {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-step-v2-value {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-step-v2-chevron {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-step-v2-body {
  background: transparent;
}
.teraprint-konfigurator-wrap .tp-step-v2-content {
  color: #e2e8f0;
}

/* ── 8. Step-Num (klassisch) ── */
.teraprint-konfigurator-wrap .tp-step-num {
  background: linear-gradient(180deg, #337ab7, #2a6291);
  color: #fff;
}

/* ── 9. Option Cards (Material-Kacheln) ── */
.teraprint-konfigurator-wrap .tp-option-card-v2 {
  background: #1a2a3c;
  border: 1.5px solid rgba(148,163,184,0.16);
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-option-card-v2:hover {
  border-color: rgba(51,122,183,0.4);
  background: rgba(51,122,183,0.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.teraprint-konfigurator-wrap .tp-option-card-v2.is-selected {
  border-color: #337ab7;
  background: rgba(51,122,183,0.12);
  box-shadow: 0 0 0 2px rgba(51,122,183,0.2);
}
.teraprint-konfigurator-wrap .tp-option-card-v2.is-selected::after {
  background: #337ab7;
}
.teraprint-konfigurator-wrap .tp-option-card-v2-img {
  background: rgba(255,255,255,0.04);
}
.teraprint-konfigurator-wrap .tp-option-card-v2-name {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-option-card-v2-desc {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-option-card-v2-badge {
  background: rgba(34,197,94,0.12);
  color: #6dd590;
}

/* ── 10. Chips (Format, Größe etc.) ── */
.teraprint-konfigurator-wrap .tp-chip,
.teraprint-konfigurator-wrap .tp-size-btn {
  background: #1a2a3c;
  border: 1.5px solid rgba(148,163,184,0.16);
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-chip:hover,
.teraprint-konfigurator-wrap .tp-size-btn:hover {
  border-color: rgba(51,122,183,0.4);
}
.teraprint-konfigurator-wrap .tp-chip.active,
.teraprint-konfigurator-wrap .tp-chip.is-active,
.teraprint-konfigurator-wrap .tp-size-btn.active,
.teraprint-konfigurator-wrap .tp-size-btn.is-active,
.teraprint-konfigurator-wrap .tp-size-btn--active {
  border-color: #337ab7;
  background: rgba(51,122,183,0.14);
  color: #aad4f5;
  box-shadow: 0 0 0 2px rgba(51,122,183,0.1);
}

/* ── 11. Tier-Preise ── */
.teraprint-konfigurator-wrap .tp-tiers {
  background: transparent;
}
.teraprint-konfigurator-wrap .tp-tiers-header,
.teraprint-konfigurator-wrap .tp-tiers-title {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-tiers-stop__price {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-tiers-stop--active .tp-tiers-stop__price {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-tiers-stop__name,
.teraprint-konfigurator-wrap .tp-tiers-stop__range {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-tiers-incentive {
  background: rgba(243,111,33,0.08);
  border-color: rgba(243,111,33,0.25);
  color: #f9a96b;
}

/* ── 12. Felder / Inputs ── */
.teraprint-konfigurator-wrap input[type="number"],
.teraprint-konfigurator-wrap input[type="text"],
.teraprint-konfigurator-wrap input[type="email"],
.teraprint-konfigurator-wrap select,
.teraprint-konfigurator-wrap textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(148,163,184,0.18) !important;
  color: #e2e8f0 !important;
  caret-color: #337ab7;
}
.teraprint-konfigurator-wrap input[type="number"]:focus,
.teraprint-konfigurator-wrap input[type="text"]:focus,
.teraprint-konfigurator-wrap select:focus,
.teraprint-konfigurator-wrap textarea:focus {
  border-color: #337ab7 !important;
  box-shadow: 0 0 0 3px rgba(51,122,183,0.14) !important;
  outline: none !important;
}
.teraprint-konfigurator-wrap label {
  color: #64748b;
}

/* ── 13. Mengen-Spinner ── */
.teraprint-konfigurator-wrap .tp-stk-b {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.07);
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-stk-b:hover {
  background: rgba(51,122,183,0.14);
  color: #337ab7;
}
.teraprint-konfigurator-wrap .tp-stk-n {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-stk-l,
.teraprint-konfigurator-wrap .tp-stk-unit {
  color: #64748b;
}

/* ── 14. Upload Zone ── */
.teraprint-konfigurator-wrap .tp-upl-zone,
.teraprint-konfigurator-wrap .tp-upl-zone-v2 {
  background: linear-gradient(180deg, rgba(51,122,183,0.05), rgba(51,122,183,0.02)) !important;
  border: 2px dashed rgba(51,122,183,0.25) !important;
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-upl-zone:hover,
.teraprint-konfigurator-wrap .tp-upl-zone-v2:hover {
  background: rgba(51,122,183,0.08) !important;
  border-color: rgba(51,122,183,0.5) !important;
  box-shadow: none;
  transform: none;
}
.teraprint-konfigurator-wrap .tp-upl-ic,
.teraprint-konfigurator-wrap .tp-upl-ic-v2 {
  background: linear-gradient(180deg, rgba(51,122,183,0.14), rgba(51,122,183,0.06));
  color: #337ab7;
}
.teraprint-konfigurator-wrap .tp-upl-txt,
.teraprint-konfigurator-wrap .tp-upl-txt-v2 {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-upl-sub {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-upl-browse {
  color: #337ab7;
}

/* ── 15. Upload-Spezifikationen Box ── */
.teraprint-konfigurator-wrap .tp-file-specs,
.teraprint-konfigurator-wrap .tp-upload-specs {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-file-specs__title,
.teraprint-konfigurator-wrap .tp-upload-specs-title {
  color: #94a3b8;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.teraprint-konfigurator-wrap .tp-file-specs__label,
.teraprint-konfigurator-wrap .tp-upload-specs-label {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-file-specs__value,
.teraprint-konfigurator-wrap .tp-upload-specs-value {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-file-specs__row,
.teraprint-konfigurator-wrap .tp-upload-specs-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── 16. Progress-Card (nach Upload) ── */
.teraprint-konfigurator-wrap .tp-upl-progress-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.teraprint-konfigurator-wrap .tp-upl-progress-icon {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}

/* ── 17. Preis-Sektion ── */
.teraprint-konfigurator-wrap .tp-price-sec {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.teraprint-konfigurator-wrap .tp-ps-label {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-ps-value {
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-ps-divider {
  border-top: 1px solid rgba(255,255,255,0.07);
}
.teraprint-konfigurator-wrap .tp-ps-total {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid #f36f21;
}
.teraprint-konfigurator-wrap .tp-ps-total-label {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-ps-total-value {
  color: #f36f21;
}
.teraprint-konfigurator-wrap .tp-ps-tax,
.teraprint-konfigurator-wrap .tp-netto-hint {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-ps-delivery {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-meta-bar {
  border-top: 1px solid rgba(255,255,255,0.07);
  color: #64748b;
}

/* ── 18. Summary / Footer-Bereich ── */
.teraprint-konfigurator-wrap .tp-summary,
.teraprint-konfigurator-wrap .tp-conf-summary,
.teraprint-konfigurator-wrap .konf-sum {
  background: linear-gradient(135deg, rgba(13,25,40,0.98), rgba(7,14,24,0.99));
  border-top: 1px solid rgba(255,255,255,0.07);
}
.teraprint-konfigurator-wrap .tp-summary-title,
.teraprint-konfigurator-wrap .konf-sum__title {
  color: rgba(226,232,240,0.6);
}
.teraprint-konfigurator-wrap .tp-summary-row,
.teraprint-konfigurator-wrap .konf-sum dl > div {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(226,232,240,0.5);
}
.teraprint-konfigurator-wrap .tp-summary-row-value,
.teraprint-konfigurator-wrap .konf-sum dd {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-summary-notes {
  color: rgba(226,232,240,0.3);
}

/* ── 19. CTA-Button ── */
.teraprint-konfigurator-wrap .tp-cta {
  background: linear-gradient(180deg, #f36f21, #d85f18) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(243,111,33,0.28) !important;
}
.teraprint-konfigurator-wrap .tp-cta:not(.tp-cta--disabled):not(.tp-cta--loading):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(243,111,33,0.4) !important;
}
.teraprint-konfigurator-wrap .tp-cta--disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}

/* ── 20. Delivery-Info-Line ── */
.teraprint-konfigurator-wrap .tp-delivery-info {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #64748b;
}

/* ── 21. Express-Box ── */
.teraprint-konfigurator-wrap .tp-express {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(148,163,184,0.14);
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-express:hover {
  border-color: rgba(51,122,183,0.4);
  background: rgba(51,122,183,0.06);
}

/* ── 22. Datei-Karten (.tp-fc, .tp-fc-v2) ── */
.teraprint-konfigurator-wrap .tp-fc,
.teraprint-konfigurator-wrap .tp-fc-v2 {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.16);
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-fc-name,
.teraprint-konfigurator-wrap .tp-fc-v2-name {
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-fc-remove,
.teraprint-konfigurator-wrap .tp-fc-v2-remove {
  color: #64748b;
}
.teraprint-konfigurator-wrap .tp-fc-remove:hover,
.teraprint-konfigurator-wrap .tp-fc-v2-remove:hover {
  color: #f87171;
}

/* ── 23. Tier-Bar / Progress ── */
.teraprint-konfigurator-wrap .tp-tiers-track {
  background: rgba(255,255,255,0.08);
}
.teraprint-konfigurator-wrap .tp-tiers-track__fill {
  background: #337ab7;
}
.teraprint-konfigurator-wrap .tp-tiers-stop__dot {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.teraprint-konfigurator-wrap .tp-tiers-stop--active .tp-tiers-stop__dot {
  background: #337ab7;
  border-color: #337ab7;
  box-shadow: 0 0 0 4px rgba(51,122,183,0.2);
}
.teraprint-konfigurator-wrap .tp-tiers-stop--passed .tp-tiers-stop__dot {
  background: rgba(51,122,183,0.6);
}

/* ── 24. Tier-Min-Hint ── */
.teraprint-konfigurator-wrap .tp-tier-min-hint {
  background: rgba(243,111,33,0.08);
  color: #f9a96b;
  border: 1px solid rgba(243,111,33,0.2);
}

/* ── 25. Allgemeine Inner-Boxes / Karten ── */
.teraprint-konfigurator-wrap .tp-box,
.teraprint-konfigurator-wrap .tp-inner-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0;
}

/* ── 26. Upload Progress Bar ── */
.teraprint-konfigurator-wrap .tp-upl-progress-bar-track {
  background: rgba(255,255,255,0.08);
}
.teraprint-konfigurator-wrap .tp-upl-progress-bar-fill {
  background: linear-gradient(90deg, #337ab7, #5ba3d9);
}

/* ── 27. Warning / Error Boxen ── */
.teraprint-konfigurator-wrap .tp-upload-warning,
.teraprint-konfigurator-wrap .tp-upload-error {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.25);
  color: #fca5a5;
}
.teraprint-konfigurator-wrap .tp-upload-success {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.25);
  color: #86efac;
}

/* ── 28. More-Options Toggle ── */
.teraprint-konfigurator-wrap .tp-more-btn,
.teraprint-konfigurator-wrap .tp-options-toggle {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(148,163,184,0.14);
  color: #e2e8f0;
}
.teraprint-konfigurator-wrap .tp-more-btn:hover,
.teraprint-konfigurator-wrap .tp-options-toggle:hover {
  border-color: rgba(51,122,183,0.35);
  background: rgba(51,122,183,0.05);
}

/* ── 29. Img-Chips (4-Spalten Verarbeitung) ── */
.teraprint-konfigurator-wrap .tp-img-chip,
.teraprint-konfigurator-wrap .tp-finishing-chip {
  background: #1a2a3c;
  border: 1.5px solid rgba(148,163,184,0.16);
  color: #94a3b8;
}
.teraprint-konfigurator-wrap .tp-img-chip:hover,
.teraprint-konfigurator-wrap .tp-finishing-chip:hover {
  border-color: rgba(51,122,183,0.4);
  transform: translateY(-1px);
}
.teraprint-konfigurator-wrap .tp-img-chip.active,
.teraprint-konfigurator-wrap .tp-img-chip.is-active,
.teraprint-konfigurator-wrap .tp-finishing-chip.active {
  border-color: #337ab7;
  box-shadow: 0 0 0 2px rgba(51,122,183,0.12);
}
.teraprint-konfigurator-wrap .tp-img-chip-img-wrap {
  background: rgba(255,255,255,0.03);
}
.teraprint-konfigurator-wrap .tp-img-chip-label {
  color: #94a3b8;
}

/* ── 30. Trennlinien zwischen Sektionen ── */
.teraprint-konfigurator-wrap .tp-section-divider,
.teraprint-konfigurator-wrap .tp-divider {
  border-color: rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════════════
   END DARK TECH THEME v1
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Neutral demo configurator pass — profile/layout driven, scoped
   ══════════════════════════════════════════════════════════════ */

.tp-product-page.tp-layout-v25 {
  padding: 0 16px 48px;
}

.tp-product-page.tp-layout-v25 .tp-row {
  align-items: start;
}

@media (min-width: 900px) {
  .tp-product-page.tp-layout-v25 .tp-block--configurator {
    position: sticky;
    top: 18px;
  }
}

.teraprint-konfigurator-wrap .tp {
  background: #f7f9fb;
  color: #172033;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.12);
}

.teraprint-konfigurator-wrap #tp-configurator.tp {
  background: #f7f9fb !important;
  border-color: #d9e1e8 !important;
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.12) !important;
}

.teraprint-konfigurator-wrap .konf-header,
.teraprint-konfigurator-wrap .tp-opts,
.teraprint-konfigurator-wrap .tp-upl,
.teraprint-konfigurator-wrap .tp-files-v2,
.teraprint-konfigurator-wrap .tp-price-sec,
.teraprint-konfigurator-wrap .tp-tiers-wrap {
  background: #ffffff;
  border-color: #dfe6ee;
  color: #172033;
}

.teraprint-konfigurator-wrap .konf-header h2,
.teraprint-konfigurator-wrap .tp-sec-t,
.teraprint-konfigurator-wrap .tp-tile-n,
.teraprint-konfigurator-wrap .tp-ps-total-label,
.teraprint-konfigurator-wrap .tp-ps-total-value {
  color: #172033;
}

.teraprint-konfigurator-wrap .konf-header {
  border-bottom: 1px solid #dfe6ee;
}

.teraprint-konfigurator-wrap .konf-header h2 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.teraprint-konfigurator-wrap .tp-tile {
  background: #ffffff;
  border-color: #d8e2eb;
  color: #172033;
}

.teraprint-konfigurator-wrap .tp-tile:hover,
.teraprint-konfigurator-wrap .tp-tile.on {
  border-color: #287c7a;
  box-shadow: 0 0 0 3px rgba(40, 124, 122, 0.12);
}

.teraprint-konfigurator-wrap .tp-tile-badge,
.teraprint-konfigurator-wrap .tp-sec-tag {
  background: #eef6f5;
  color: #1f6764;
  border-color: #b8d8d5;
}

.teraprint-konfigurator-wrap .tp-sec-tag--pflicht {
  background: #fff4e6;
  color: #8a4a00;
  border-color: #f3ca92;
}

.teraprint-konfigurator-wrap .tp-sec-tag--waehlbar {
  background: #eef3ff;
  color: #2f5597;
  border-color: #bfcef2;
}

.teraprint-konfigurator-wrap .tp-step-num {
  background: #287c7a;
  color: #ffffff;
}

.teraprint-konfigurator-wrap .tp-step-num--done {
  background: #2f8d55;
}

.teraprint-konfigurator-wrap .upload-zone,
.teraprint-konfigurator-wrap .tp-upl-zone-v2 {
  background: #f7fbff;
  border-color: #b8cadb;
  color: #172033;
}

.teraprint-konfigurator-wrap .tp-upl-sub,
.teraprint-konfigurator-wrap .tp-ps-label,
.teraprint-konfigurator-wrap .tp-ps-min,
.teraprint-konfigurator-wrap .tp-text-char-count {
  color: #5a6575;
}

.teraprint-konfigurator-wrap #tpCtaContainer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: linear-gradient(180deg, rgba(247, 249, 251, 0), #f7f9fb 28%);
  padding-top: 12px;
}

.teraprint-konfigurator-wrap .tp .tp-cta {
  background: #287c7a !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(40, 124, 122, 0.24) !important;
}

.teraprint-konfigurator-wrap .tp .tp-cta:hover {
  background: #206a68 !important;
}

.teraprint-konfigurator-wrap .tp .tp-cta--disabled,
.teraprint-konfigurator-wrap .tp .tp-cta[disabled] {
  background: #e6ebf2 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1;
  box-shadow: none !important;
}

.teraprint-konfigurator-wrap .tp .tp-sonderanfertigung-hint {
  color: #5a6575;
  background: #ffffff;
  border-top: 1px solid #dfe6ee;
  margin: 12px 0 0;
  padding: 12px 14px;
}

.teraprint-konfigurator-wrap .tp-trust {
  background: transparent;
  border-top: 1px solid #dfe6ee;
  color: #475569;
  gap: 8px;
}

.teraprint-konfigurator-wrap .tp-trust .tp-trust-item {
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  color: #172033;
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
}

.teraprint-konfigurator-wrap .tp-trust-item__icon {
  color: #287c7a;
  font-weight: 700;
  line-height: 1.2;
}

.teraprint-konfigurator-wrap .tp-trust-item__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.teraprint-konfigurator-wrap .tp-trust-item__copy strong {
  color: #172033;
  font-size: 11px;
  line-height: 1.2;
}

.teraprint-konfigurator-wrap .tp-trust-item__copy small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 899px) {
  .tp-product-page.tp-layout-v25 {
    padding: 0 12px 32px;
  }

  .tp-product-page.tp-layout-v25 .tp-row {
    display: block !important;
  }

  .tp-product-page.tp-layout-v25 .tp-block {
    margin-bottom: 16px;
  }

  .teraprint-konfigurator-wrap .tp {
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(23, 32, 51, 0.10);
  }

  .teraprint-konfigurator-wrap .konf-header h2 {
    font-size: 20px;
  }

  .teraprint-konfigurator-wrap .tp-trust {
    flex-direction: column;
  }
}

/* ========================================================================
 * Mobile Sticky Bottom-Bar (Preis + CTA) — 5.17.4
 * Hält Live-Preis und "In den Warenkorb"-Button auf Mobile sichtbar.
 * Greift nur auf der Produktseite (.tp-product-page) und ≤ 768 px.
 * ====================================================================== */
@media (max-width: 768px) {
  .tp-product-page #tpPriceContainer,
  .tp-product-page #tpCtaContainer {
    position: sticky;
    z-index: 90;
    background: var(--tp-demo-bg, #ffffff);
  }
  .tp-product-page #tpPriceContainer {
    bottom: 56px;
    padding: 8px 12px;
    margin: 0 -12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  }
  .tp-product-page #tpCtaContainer {
    bottom: 0;
    padding: 8px 12px env(safe-area-inset-bottom, 8px);
    margin: 0 -12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }
  .tp-product-page #tpCtaContainer .tp-cta {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
  /* Avoid double-borders when the two containers stack as one visual bar */
  .tp-product-page #tpPriceContainer + #tpCtaContainer {
    border-top-color: rgba(0, 0, 0, 0.04);
  }
}

/* ========================================================================
 * Visual Polish 5.17.7 — Konfigurator-Karte schöner
 * ====================================================================== */

/* Konfigurator-Wrapper als Karte mit Schatten */
.teraprint-konfigurator-wrap {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 24px 24px 28px;
  border: 1px solid #eef1f6;
}

/* Step-Header */
.tp-step-header,
.tp-step-title {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f172a;
  margin-bottom: 12px;
  font-size: 15px;
}

/* Tile-Optionen — moderner, klare Cards */
.tp-tile,
.tp-tile-option,
button.tp-tile {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 160ms ease;
  cursor: pointer;
  position: relative;
}
.tp-tile:hover,
.tp-tile-option:hover {
  background: #ffffff;
  border-color: var(--tp-demo-accent, #287c7a);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 124, 122, 0.08);
}
.tp-tile.tp-tile--selected,
.tp-tile.is-selected,
.tp-tile-option.is-selected,
.tp-tile-option[aria-pressed="true"] {
  background: rgba(40, 124, 122, 0.06);
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 2px rgba(40, 124, 122, 0.15);
}

/* Preis-Container betont */
#tpPriceContainer {
  background: linear-gradient(135deg, #f0f7f6 0%, #ffffff 100%);
  border: 1px solid rgba(40, 124, 122, 0.15);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
#tpPriceContainer .tp-price-total,
#tpPriceContainer [data-role="price-total"] {
  font-size: 28px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  line-height: 1.1;
}

/* CTA */
.tp-cta {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 50px;
  font-size: 16px;
  background: var(--tp-demo-accent, #287c7a);
  color: #ffffff;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 2px 6px rgba(40, 124, 122, 0.18);
}
.tp-cta:not(.tp-cta--disabled):hover {
  background: #1f6766;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 124, 122, 0.25);
}
.tp-cta--disabled,
.tp-cta:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* Trust-Badges */
.tp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}
.tp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  background: #f8fafc;
  padding: 6px 12px;
  border-radius: 999px;
}
.tp-trust-item__icon {
  color: var(--tp-demo-accent, #287c7a);
  font-weight: 700;
}

/* InfoBadges — kompakt + auffällig */
.tp-info-badges,
.tp-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.tp-info-badge {
  background: rgba(40, 124, 122, 0.08);
  color: var(--tp-demo-accent, #287c7a);
  border: 1px solid rgba(40, 124, 122, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

/* Step-Nummer-Badge — verspielter */
.tp-step-num,
.tp-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tp-demo-accent, #287c7a);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
}

/* Mengen-Step besonders gut sichtbar — falls Step "Menge" heißt */
.tp-step[data-step-name="Menge"] .tp-tile,
.tp-step[data-step-key="menge"] .tp-tile {
  background: #ffffff;
  border-width: 2px;
}
.tp-step[data-step-name="Menge"] .tp-tile.is-selected,
.tp-step[data-step-key="menge"] .tp-tile.is-selected {
  background: rgba(40, 124, 122, 0.08);
}

/* Konfigurator-Card-Title */
.tp-konfigurator-wrap > h2,
.teraprint-konfigurator-wrap > h2,
.tp-configurator-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #0f172a;
}

/* Konfigurator-Card-Desc */
.tp-konfigurator-wrap > p.tp-desc,
.teraprint-konfigurator-wrap > .tp-desc {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ========================================================================
 * 5.17.7 Hotfix: Per-Datei-Mengeneingabe als editierbares number-Input
 * ====================================================================== */
.tp-stk-v2 {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.tp-stk-v2-btn {
  background: #f1f5f9;
  border: none;
  color: var(--tp-demo-accent, #287c7a);
  width: 34px;
  height: 34px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}
.tp-stk-v2-btn:hover {
  background: rgba(40, 124, 122, 0.12);
}
.tp-stk-v2-val {
  border: none;
  outline: none;
  text-align: center;
  width: 56px;
  height: 34px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  -moz-appearance: textfield;
  background: #fff;
}
.tp-stk-v2-val::-webkit-outer-spin-button,
.tp-stk-v2-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tp-stk-v2-val:focus {
  background: #f8fafc;
}
.tp-fc-v2-qty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.tp-fc-v2-qty-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.tp-fc-v2-qty-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tp-fc-v2-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
}

/* ========================================================================
 * 5.17.9 Polish — Sales-Page-Konsistenz, Font-Notbremse, Tabs-Fix
 * ====================================================================== */

/* === 1. Font-Notbremse für Demo-Mode === */
body.teraprint-demo-mode,
body.teraprint-demo-mode * {
  font-family: var(--tp-font, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif) !important;
}
body.teraprint-demo-mode pre,
body.teraprint-demo-mode code,
body.teraprint-demo-mode .tp-mono,
body.teraprint-demo-mode kbd,
body.teraprint-demo-mode samp {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace !important;
}

/* === 2. Sales-Pages konsistent (.tp-sales-page) === */
.tp-sales-page { max-width: 920px; margin: 32px auto; padding: 0 24px; color: #17202a; }
.tp-sales-page .tp-hero-card {
  background: linear-gradient(135deg, #f0f7f6 0%, #ffffff 100%);
  border: 1px solid rgba(40, 124, 122, 0.18);
  border-radius: 14px;
  padding: 32px 28px;
  margin-bottom: 28px;
}
.tp-sales-page h1 { font-size: 32px; line-height: 1.15; margin: 0 0 12px; color: #0f172a; }
.tp-sales-page .tp-hero-card p {
  font-size: 17px; line-height: 1.55; color: #64748b; margin: 0; max-width: 760px;
}
.tp-sales-page .tp-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 24px 26px; margin: 20px 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.tp-sales-page .tp-card h2 { font-size: 22px; margin: 0 0 8px; color: #0f172a; }
.tp-sales-page .tp-card .tp-sub { font-size: 14px; color: #64748b; margin: 0 0 18px; }
.tp-sales-page .tp-card h3 {
  font-size: 15px; font-weight: 600; color: var(--tp-demo-accent, #287c7a);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 22px 0 8px;
}
.tp-sales-page .tp-card ul { padding-left: 22px; line-height: 1.65; }
.tp-sales-page .tp-tag {
  display: inline-block; background: rgba(40, 124, 122, 0.1); color: var(--tp-demo-accent, #287c7a);
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; margin: 0 6px 6px 0;
}
.tp-sales-page .tp-mock-frame {
  border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
  margin: 14px 0; background: #f8fafc;
}
.tp-sales-page .tp-mock-bar {
  background: #1e293b; color: #cbd5e1; padding: 8px 14px;
  font-size: 12px; font-family: ui-monospace, monospace !important;
}
.tp-sales-page pre {
  background: #0f172a; color: #e2e8f0; padding: 18px 22px; border-radius: 8px;
  overflow: auto; font-size: 13px; font-family: ui-monospace, monospace !important;
  line-height: 1.55; margin: 14px 0;
}
.tp-sales-cta {
  display: inline-block; background: var(--tp-demo-accent, #287c7a); color: #ffffff !important;
  padding: 14px 28px; border-radius: 8px; font-weight: 600; text-decoration: none;
  transition: all 160ms ease; box-shadow: 0 2px 6px rgba(40, 124, 122, 0.18);
  border: 1.5px solid transparent;
}
.tp-sales-cta:hover {
  background: #1f6766; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 124, 122, 0.25);
  text-decoration: none;
}
.tp-sales-cta--secondary {
  background: transparent; color: var(--tp-demo-accent, #287c7a) !important;
  border-color: var(--tp-demo-accent, #287c7a); box-shadow: none;
}
.tp-sales-cta--secondary:hover { background: rgba(40, 124, 122, 0.08); transform: translateY(-1px); }

/* === 3. SEO-Hilfe-Strip Refactor (.tp-help-strip) === */
.tp-help-strip {
  max-width: 1500px; margin: 32px auto 0; padding: 20px 24px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 14px;
}
.tp-help-strip__label { font-weight: 600; color: #0f172a; }
.tp-help-strip a { color: var(--tp-demo-accent, #287c7a); text-decoration: none; font-weight: 500; }
.tp-help-strip a:hover { text-decoration: underline; }

/* === 4. Alu-Tabs Desktop-Fix === */
@media (min-width: 900px) {
  .tp-tabs-bar {
    scroll-snap-type: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  .tp-tabs-bar .tp-tab { flex: 1 1 auto; min-width: 0; }
}

/* === 5. Shop-Grid: doppelter Produktname von Mockup-Bild verstecken (Theme-Hook) === */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-weight: 700; font-size: 16px; color: #0f172a;
  line-height: 1.3; margin: 12px 0 6px;
}

/* === 6. Cross-Sell-Preis Override gegen WooCommerce-Default === */
.tp-cross-sell__price,
.tp-cross-sell__price .woocommerce-Price-amount,
.tp-cross-sell__price bdi {
  color: var(--tp-demo-accent, #287c7a) !important;
  font-weight: 700;
}

/* === 7. Header-Site-Title visuell zurückstellen (Fallback wenn PHP-Filter nicht greift) === */
body.teraprint-demo-mode .wp-block-site-title h1,
body.teraprint-demo-mode header h1.wp-block-site-title,
body.teraprint-demo-mode .wp-block-site-title h1 a {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #64748b !important;
  text-decoration: none !important;
}

/* === 8. Shop-Hero (vor Produkt-Grid, falls als .tp-shop-hero gerendert) === */
.tp-shop-hero {
  background: linear-gradient(135deg, #f0f7f6 0%, #ffffff 100%);
  border: 1px solid rgba(40, 124, 122, 0.18);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 0 0 24px;
}
.tp-shop-hero h2 { font-size: 26px; margin: 0 0 6px; color: #0f172a; }
.tp-shop-hero p { font-size: 15px; color: #64748b; margin: 0; }

/* === 5.17.9 Mobile-Order für v2.5 Row-Layout ============================
 * Auf Mobile werden alle Rows aufgelöst, alle Blocks landen in einem
 * Flex-Container und respektieren --tp-mobile-order. Dadurch wirkt das
 * mobileOrder-Array tatsächlich (vorher: Konfigurator vor Galerie).
 * ====================================================================== */
@media (max-width: 768px) {
  .tp-product-page.tp-layout-v25 {
    display: flex;
    flex-direction: column;
  }
  .tp-product-page.tp-layout-v25 .tp-row {
    display: contents;
  }
  .tp-product-page.tp-layout-v25 .tp-block {
    order: var(--tp-mobile-order, 99);
  }
  .tp-product-page.tp-layout-v25 .tp-block[data-mobile-visible="0"] {
    display: none !important;
  }
}

/* === 5.17.9 CTA-Skeleton (enabled vor JS-Hydration) ===================
 * Vorher: disabled-grau, wirkte tot. Jetzt: aktiv aussehender Brand-Button.
 * JS überschreibt den Inhalt sobald hydratiert ist.
 * ====================================================================== */
.tp-cta.tp-cta--skeleton {
  background: var(--tp-demo-accent, #287c7a);
  color: #ffffff;
  cursor: pointer;
  opacity: 0.92;
  border: none;
  border-radius: 10px;
  min-height: 50px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  box-shadow: 0 2px 6px rgba(40, 124, 122, 0.15);
}
.tp-cta.tp-cta--skeleton::before {
  content: "▸ ";
  margin-right: 4px;
  opacity: 0.85;
}

/* === 5.17.9 Site-Title Demoted Style ====================================
 * Greift sowohl auf den server-side (vor JS-Demote) H1 als auch auf das
 * client-side ersetzte <p class="site-title-demoted">. Doppelter H1-Header
 * wird optisch zur kleinen Subline statt zur konkurrierenden Hauptüberschrift.
 * ====================================================================== */
body.teraprint-demo-mode header > h1,
body.teraprint-demo-mode .wp-site-blocks header h1,
body.teraprint-demo-mode header h1.wp-block-site-title,
body.teraprint-demo-mode .site-header h1,
body.teraprint-demo-mode .site-title-demoted {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #64748b !important;
  margin: 0 !important;
  letter-spacing: 0;
}
body.teraprint-demo-mode header > h1 a,
body.teraprint-demo-mode .wp-site-blocks header h1 a,
body.teraprint-demo-mode .site-title-demoted a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}

/* ========================================================================
 * 5.17.10 — Neue Option-Types (Sprint 1)
 *   .tp-dropdown · .tp-toggle · .tp-stepper · .tp-checkbox-group
 * ====================================================================== */

/* === Dropdown ============================================================ */
.tp-dropdown-wrap {
  position: relative;
  display: block;
  max-width: 380px;
}
.tp-dropdown {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 36px 12px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
}
.tp-dropdown:hover { border-color: var(--tp-demo-accent, #287c7a); }
.tp-dropdown:focus {
  outline: none;
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 3px rgba(40, 124, 122, 0.15);
}
.tp-dropdown-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tp-demo-accent, #287c7a);
  font-size: 12px;
}

/* === Toggle / Switch ===================================================== */
.tp-toggle-wrap {
  display: flex;
  align-items: center;
}
.tp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.tp-toggle-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tp-toggle-track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 160ms ease;
  flex-shrink: 0;
}
.tp-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-toggle.on .tp-toggle-track { background: var(--tp-demo-accent, #287c7a); }
.tp-toggle.on .tp-toggle-thumb { transform: translateX(24px); }
.tp-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tp-toggle-n {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.tp-toggle-price {
  font-size: 13px;
  color: var(--tp-demo-accent, #287c7a);
  font-weight: 600;
}

/* === Stepper ============================================================= */
.tp-stepper-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.tp-stepper-btn {
  background: #f1f5f9;
  border: none;
  width: 44px;
  font-size: 22px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  cursor: pointer;
  transition: background 120ms ease;
}
.tp-stepper-btn:hover:not(:disabled) { background: rgba(40, 124, 122, 0.12); }
.tp-stepper-btn:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  background: #f8fafc;
}
.tp-stepper-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 110px;
  padding: 8px 16px;
}
.tp-stepper-num {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.tp-stepper-price {
  font-size: 12px;
  color: var(--tp-demo-accent, #287c7a);
  font-weight: 600;
  margin-top: 2px;
}

/* === Checkbox Multi-Select ============================================== */
.tp-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.tp-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
  user-select: none;
}
.tp-checkbox:hover {
  background: #ffffff;
  border-color: var(--tp-demo-accent, #287c7a);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 124, 122, 0.08);
}
.tp-checkbox.on {
  background: rgba(40, 124, 122, 0.06);
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 2px rgba(40, 124, 122, 0.12);
}
.tp-checkbox-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 160ms ease;
}
.tp-checkbox-cb:checked {
  background: var(--tp-demo-accent, #287c7a);
  border-color: var(--tp-demo-accent, #287c7a);
}
.tp-checkbox-cb:checked::after {
  content: "✓";
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.tp-checkbox-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.tp-checkbox-n {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.tp-checkbox-price,
.tp-checkbox-badge {
  font-size: 12px;
  font-weight: 600;
}
.tp-checkbox-price { color: var(--tp-demo-accent, #287c7a); }
.tp-checkbox-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  background: rgba(40, 124, 122, 0.1);
  color: var(--tp-demo-accent, #287c7a);
  border-radius: 999px;
  font-size: 11px;
}

/* ========================================================================
 * 5.17.11 — Visual Swatches (Sprint 2)
 *   .tp-color-swatch · .tp-image-swatch · .tp-label-swatch
 * ====================================================================== */

/* === Color-Swatch ======================================================= */
.tp-color-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tp-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 160ms ease;
  min-width: 72px;
  text-decoration: none;
  color: inherit;
}
.tp-color-swatch:hover {
  background: #f8fafc;
  transform: translateY(-1px);
}
.tp-color-swatch.on {
  border-color: var(--tp-demo-accent, #287c7a);
  background: rgba(40, 124, 122, 0.06);
}
.tp-color-swatch-dot {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tp-color-swatch.on .tp-color-swatch-dot {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--tp-demo-accent, #287c7a), 0 4px 8px rgba(0, 0, 0, 0.15);
}
.tp-color-swatch-label {
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  max-width: 96px;
}
.tp-color-swatch-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--tp-demo-accent, #287c7a);
}

/* === Image-Swatch ====================================================== */
.tp-image-swatch-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.tp-image-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.tp-image-swatch:hover {
  background: #ffffff;
  border-color: var(--tp-demo-accent, #287c7a);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 124, 122, 0.08);
}
.tp-image-swatch.on {
  background: rgba(40, 124, 122, 0.06);
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 2px rgba(40, 124, 122, 0.12);
}
.tp-image-swatch-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  flex-shrink: 0;
}
.tp-image-swatch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-image-swatch-icon,
.tp-image-swatch-initials {
  font-size: 22px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  letter-spacing: 0.05em;
}
.tp-image-swatch-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  line-height: 1.25;
}
.tp-image-swatch-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--tp-demo-accent, #287c7a);
}

/* === Label-Swatch (Pillen) ============================================== */
.tp-label-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tp-label-swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms ease;
  text-decoration: none;
  color: #0f172a;
  font-family: inherit;
  line-height: 1;
  min-width: 60px;
}
.tp-label-swatch:hover {
  border-color: var(--tp-demo-accent, #287c7a);
  background: #f8fafc;
}
.tp-label-swatch.on {
  background: var(--tp-demo-accent, #287c7a);
  border-color: var(--tp-demo-accent, #287c7a);
  color: #ffffff;
}
.tp-label-swatch-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tp-label-swatch-price {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 3px;
}
.tp-label-swatch.on .tp-label-swatch-price { opacity: 0.95; }

/* ========================================================================
 * 5.17.12 — Sprint 3: Dimension-Input · Tooltip-Help · Pricing-Badges
 * ====================================================================== */

/* === Dimension-Input ==================================================== */
.tp-dim-input {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}
.tp-dim-input__row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.tp-dim-input__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tp-dim-input__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tp-dim-input__control {
  position: relative;
  display: flex;
  align-items: center;
}
.tp-dim-input__control input {
  width: 100%;
  padding: 12px 50px 12px 14px;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  -moz-appearance: textfield;
  transition: border-color 160ms ease;
}
.tp-dim-input__control input::-webkit-outer-spin-button,
.tp-dim-input__control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tp-dim-input__control input:focus {
  outline: none;
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 3px rgba(40, 124, 122, 0.15);
}
.tp-dim-input__suffix {
  position: absolute;
  right: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: lowercase;
  pointer-events: none;
}
.tp-dim-input__times {
  font-size: 22px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  padding-bottom: 12px;
}
.tp-dim-input__unit-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 14px;
  padding: 3px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
}
.tp-dim-input__unit {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  text-transform: lowercase;
  transition: all 160ms ease;
}
.tp-dim-input__unit:hover { color: var(--tp-demo-accent, #287c7a); }
.tp-dim-input__unit.on {
  background: var(--tp-demo-accent, #287c7a);
  color: #fff;
}
.tp-dim-input__area {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  font-size: 14px;
  color: #475569;
}
.tp-dim-input__area-lbl { color: #94a3b8; }

/* === Tooltip-Help (Per-Option Bubble) =================================== */
.tp-opt-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  outline: none;
}
.tp-opt-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #cbd5e1;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  transition: background 160ms ease;
}
.tp-opt-help:hover .tp-opt-help__icon,
.tp-opt-help:focus .tp-opt-help__icon {
  background: var(--tp-demo-accent, #287c7a);
}
.tp-opt-help__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 6px;
  width: 240px;
  max-width: 80vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 1000;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tp-opt-help__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
}
.tp-opt-help:hover .tp-opt-help__bubble,
.tp-opt-help:focus .tp-opt-help__bubble {
  opacity: 1;
}

/* === Recommended-Badge ================================================== */
.tp-opt-recommended {
  position: absolute;
  top: -8px;
  right: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3);
  z-index: 2;
  pointer-events: none;
}
.tp-tile.tp-tile--recommended {
  position: relative;
  border-color: rgba(245, 158, 11, 0.4);
}
.tp-tile.tp-tile--recommended.on {
  border-color: var(--tp-demo-accent, #287c7a);
}

/* === Step-Header: "Preis-Einfluss" ====================================== */
.tp-step-price-impact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  background: rgba(40, 124, 122, 0.08);
  color: var(--tp-demo-accent, #287c7a);
  border: 1px solid rgba(40, 124, 122, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tp-step-price-impact__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--tp-demo-accent, #287c7a);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}

/* ========================================================================
 * 5.17.13 — Sprint 4: Date-Picker · Textarea · Range-Slider
 * ====================================================================== */

/* === Date-Picker ======================================================== */
.tp-date-picker {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}
.tp-date-picker__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-date-picker__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tp-date-picker__control {
  display: flex;
  align-items: center;
}
.tp-date-picker__input {
  width: 100%;
  max-width: 260px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 160ms ease;
}
.tp-date-picker__input:focus {
  outline: none;
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 3px rgba(40, 124, 122, 0.15);
}
.tp-date-picker__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(40%) sepia(80%) saturate(400%) hue-rotate(140deg) brightness(0.85);
}
.tp-date-picker__hint {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* === Textarea =========================================================== */
.tp-textarea-wrap {
  display: flex;
  flex-direction: column;
}
.tp-textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #0f172a;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
  transition: border-color 160ms ease;
}
.tp-textarea:focus {
  outline: none;
  border-color: var(--tp-demo-accent, #287c7a);
  box-shadow: 0 0 0 3px rgba(40, 124, 122, 0.15);
}
.tp-textarea::placeholder { color: #94a3b8; }
.tp-textarea-meta {
  align-self: flex-end;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
}

/* === Range-Slider ====================================================== */
.tp-range-slider {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}
.tp-range-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.tp-range-slider__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tp-range-slider__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--tp-demo-accent, #287c7a);
  font-variant-numeric: tabular-nums;
}
.tp-range-slider__unit {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}
/* Native range mit Brand-Track via Pseudo + var() */
.tp-range-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--tp-demo-accent, #287c7a) 0%,
    var(--tp-demo-accent, #287c7a) var(--tp-range-pct, 0%),
    #e2e8f0 var(--tp-range-pct, 0%),
    #e2e8f0 100%
  );
  outline: none;
  cursor: pointer;
}
.tp-range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--tp-demo-accent, #287c7a);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(40, 124, 122, 0.25);
  transition: transform 80ms ease;
}
.tp-range-slider__input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.tp-range-slider__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--tp-demo-accent, #287c7a);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(40, 124, 122, 0.25);
}
.tp-range-slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   V5.18.0 LIVE-PREVIEW Canvas-Editor (Fabric.js)
   ═══════════════════════════════════════════════════════════════════════ */
.tp-lp {
  margin: 14px 0 8px;
  padding: 14px;
  background: linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.tp-lp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tp-lp__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569;
  align-items: center;
}
.tp-lp__format {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.tp-lp__bleed {
  color: #dc2626;
  font-weight: 600;
}
.tp-lp__summary {
  margin-left: auto;
  background: #287c7a;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.tp-lp__toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.tp-lp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  background: #f8fafc;
  color: #1f2933;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tp-lp__btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.tp-lp__btn:active {
  transform: scale(0.97);
}
.tp-lp__btn--primary {
  background: #287c7a;
  border-color: #287c7a;
  color: #fff;
}
.tp-lp__btn--primary:hover {
  background: #1f6361;
  border-color: #1f6361;
}
.tp-lp__btn--upload {
  cursor: pointer;
}
.tp-lp__btn--danger {
  background: #fff;
  border-color: #f87171;
  color: #dc2626;
  width: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.tp-lp__btn--danger:hover {
  background: #fee2e2;
  border-color: #dc2626;
}
.tp-lp__select,
.tp-lp__num,
.tp-lp__color {
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  padding: 0 8px;
  background: #fff;
  color: #1f2933;
}
.tp-lp__select { min-width: 130px; }
.tp-lp__num    { width: 72px; }
.tp-lp__color  {
  width: 38px;
  padding: 2px;
  cursor: pointer;
}
.tp-lp__stage {
  position: relative;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}
.tp-lp__stage canvas {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.tp-lp__hint {
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  padding: 8px 10px;
  background: #fff;
  border-left: 3px solid #287c7a;
  border-radius: 0 6px 6px 0;
}
@media (max-width: 600px) {
  .tp-lp__toolbar { gap: 4px; padding: 6px; }
  .tp-lp__btn    { height: 32px; padding: 0 8px; font-size: 12px; }
  .tp-lp__select { min-width: 110px; }
  .tp-lp__num    { width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   V5.25.0 — UI/UX-FIXES (Upload-Constraint-Anzeige)
   ═══════════════════════════════════════════════════════════════════════ */

/* Sticky Error-Banner über CTA */
.tp-upload-error-banner {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}
.tp-upload-error-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.tp-upload-error-banner__icon {
  font-size: 18px;
  color: #dc2626;
}
.tp-upload-error-banner__list {
  margin: 0 0 0 22px;
  padding: 0;
  list-style: disc;
}
.tp-upload-error-banner__list li {
  margin-bottom: 4px;
}
.tp-upload-error-banner__list li:last-child {
  margin-bottom: 0;
}
.tp-upload-error-banner__blocker {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #fca5a5;
  font-style: italic;
  color: #991b1b;
}

/* Datei-Karte: Error-State bei Constraint-Verletzung */
.tp-fc-v2--constraint {
  border-color: #dc2626 !important;
  background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}
.tp-fc-v2-check--error svg {
  width: 100%;
  height: 100%;
}
/* V5.25.1: Zusammenfassung-Card auch invalid (embed-Mode parallel zu tp-price-sec--invalid) */
.tp-upl-summary--invalid {
  position: relative;
}
.tp-upl-summary--invalid > * {
  filter: grayscale(0.7);
  opacity: 0.45;
}
.tp-upl-summary--invalid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(254, 226, 226, 0.55);
  border: 2px solid #dc2626;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}
.tp-upl-summary--invalid::after {
  content: "Preis erst nach Korrektur";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: #dc2626;
  color: #fff;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  z-index: 3;
}

/* V5.25.1: Preis bei Constraint-Verletzung durchgestrichen + grau */
.tp-fc-v2--constraint .tp-fc-v2-price {
  color: #9ca3af !important;
  text-decoration: line-through;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 2px;
  position: relative;
}
.tp-fc-v2--constraint .tp-fc-v2-price::after {
  content: "Korrektur nötig";
  display: block;
  color: #dc2626;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 2px;
}

/* Festformat-Pills */
.tp-fixed-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
}
.tp-fixed-formats__lbl {
  font-weight: 600;
  color: #475569;
  margin-right: 4px;
}
.tp-fixed-formats__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #287c7a;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.tp-fixed-formats__pill em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.85;
  font-family: inherit;
}

/* Rechte-Checkbox Error-State */
.tp-copyright-label--required {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  position: relative;
}
.tp-copyright-label--required::before {
  content: "▲ ";
  color: #f59e0b;
  font-weight: 700;
}
.tp-copyright-label__hint {
  display: block;
  margin-top: 6px;
  color: #92400e;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
}

/* A11y: Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .tp-upload-error-banner {
    box-shadow: none;
  }
}

/* Mobile-Anpassungen */
@media (max-width: 768px) {
  .tp-upload-error-banner {
    font-size: 12.5px;
    padding: 10px 12px;
  }
  .tp-upload-error-banner__head {
    font-size: 13.5px;
  }
  .tp-fixed-formats {
    font-size: 11.5px;
  }
  .tp-fixed-formats__pill {
    padding: 2px 8px;
  }
}

/* V5.25.1: Preis-Karte ungültig — echtes Overlay (rote Banderole + 2px-Rahmen) */
.tp-price-sec--invalid {
  position: relative;
  z-index: 0;
}
.tp-price-sec--invalid > * {
  filter: grayscale(0.7);
  opacity: 0.45;
  pointer-events: none;
}
.tp-price-sec--invalid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(254, 226, 226, 0.65);
  border: 2px solid #dc2626;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}
.tp-price-sec--invalid::after {
  content: "Preis erst nach Korrektur";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: #dc2626;
  color: #fff;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
  z-index: 3;
}

/* V5.25.1: Sticky-Banner über CTA — bleibt beim Scrollen sichtbar */
.tp-upload-error-banner {
  position: sticky;
  top: 56px;
  z-index: 30;
}
@media (max-width: 782px) { .tp-upload-error-banner { top: 46px; } }
@media (max-width: 600px) { .tp-upload-error-banner { top: 0; } }