.elementor-512 .elementor-element.elementor-element-380cb38{--display:flex;}.elementor-512 .elementor-element.elementor-element-380cb38:not(.elementor-motion-effects-element-type-background), .elementor-512 .elementor-element.elementor-element-380cb38 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F9FA;}.elementor-512 .elementor-element.elementor-element-2f45656{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-17a2f79 *//*
 * ZAUNMARKT KONFIGURATOR - PREMIUM STYLE OVERRIDE
 * ================================================
 * Füge dieses CSS zu deinem bestehenden Konfigurator hinzu.
 * Die Logik bleibt komplett unverändert - nur das Design wird modernisiert.
 * 
 * Einbinden via: <link rel="stylesheet" href="konfigurator-premium.css">
 * ODER: Kopiere den gesamten Inhalt in einen <style> Block
 */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors - Zaunmarkt */
  --zm-brand: #035FFE;
  --zm-brand-light: #3d8bff;
  --zm-brand-dark: #0046c0;
  --zm-accent-green: #22c55e;
  --zm-accent-orange: #f59e0b;
  --zm-accent-red: #ef4444;
  
  /* Neutrals */
  --zm-bg-page: #F5F7FA;
  --zm-bg-card: #FFFFFF;
  --zm-text-primary: #1a1a1a;
  --zm-text-secondary: #64748b;
  --zm-text-muted: #94a3b8;
  --zm-border: #e2e8f0;
  --zm-border-light: #f1f5f9;
  
  /* Radius */
  --zm-radius-sm: 8px;
  --zm-radius-md: 12px;
  --zm-radius-lg: 16px;
  --zm-radius-xl: 24px;
  
  /* Shadows */
  --zm-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --zm-shadow-md: 0 4px 20px rgba(0,0,0,0.06);
  --zm-shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
  --zm-shadow-glow: 0 0 30px rgba(3, 95, 254, 0.15);
  
  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  
  /* Override alte Variablen */
  --bg-page: var(--zm-bg-page);
  --bg-card: var(--zm-bg-card);
  --accent: var(--zm-brand);
  --accent-green: var(--zm-accent-green);
  --accent-orange: var(--zm-accent-orange);
  --accent-red: var(--zm-accent-red);
  --text-primary: var(--zm-text-primary);
  --text-secondary: var(--zm-text-secondary);
  --radius-l: var(--zm-radius-xl);
  --radius-m: var(--zm-radius-md);
  --shadow-card: var(--zm-shadow-md);
  --shadow-hover: var(--zm-shadow-lg);
}

/* ===== BASE STYLES ===== */
.zaun-app-wrapper {
  font-family: var(--font-body) !important;
  background-color: var(--zm-bg-page);
}

/* ===== HEADER VERSTECKEN ===== */
.zaun-app-wrapper > .container > h1,
.zaun-app-wrapper > .container > .subline {
  display: none !important;
}

/* ===== SECTION HEADERS ===== */
.zaun-app-wrapper h2 {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--zm-text-primary) !important;
  margin: 3rem 0 1.5rem 0 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--zm-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.zaun-app-wrapper h2::before {
  content: '' !important;
  width: 4px !important;
  height: 24px !important;
  background: linear-gradient(180deg, var(--zm-brand), var(--zm-brand-light)) !important;
  border-radius: 2px !important;
}

.zaun-app-wrapper h3 {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--zm-text-secondary) !important;
  margin: 1.75rem 0 0.75rem !important;
}

/* ===== TOOLTIPS ===== */
.tooltip-icon {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--zm-brand) !important;
  border: none !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.tooltip-icon:hover {
  transform: scale(1.1) !important;
}

.tooltip-text {
  background: var(--zm-text-primary) !important;
  border-radius: var(--zm-radius-md) !important;
  padding: 12px 14px !important;
  box-shadow: var(--zm-shadow-lg) !important;
}

/* ===== STICKY PREVIEW ===== */
.preview-container {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--zm-radius-xl) !important;
  box-shadow: var(--zm-shadow-lg), var(--zm-shadow-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* ===== CARDS ===== */
.card {
  background: var(--zm-bg-card) !important;
  border-radius: var(--zm-radius-lg) !important;
  padding: 1.25rem 1rem !important;
  border: 2px solid var(--zm-border-light) !important;
  box-shadow: var(--zm-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100px !important;
}

.card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--zm-radius-lg) !important;
  padding: 2px !important;
  background: linear-gradient(135deg, var(--zm-brand), var(--zm-brand-light)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--zm-shadow-md) !important;
  border-color: var(--zm-border) !important;
}

.card.selected {
  border-color: var(--zm-brand) !important;
  background: linear-gradient(135deg, rgba(3, 95, 254, 0.03) 0%, rgba(3, 95, 254, 0.08) 100%) !important;
}

.card.selected::before {
  opacity: 1 !important;
}

/* ===== COLOR SWATCHES - GRÖßER ===== */
.swatch {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3) !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover .swatch {
  transform: scale(1.1) !important;
}

.card.selected .swatch {
  box-shadow: 0 4px 12px rgba(3, 95, 254, 0.3), inset 0 2px 4px rgba(255,255,255,0.3) !important;
}

/* ===== CARD LABELS ===== */
.card-label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--zm-text-primary) !important;
  transition: color 0.3s ease !important;
}

.card.selected .card-label {
  color: var(--zm-brand) !important;
}

.card-sub {
  font-size: 0.75rem !important;
  color: var(--zm-text-secondary) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

.card.selected .card-sub {
  color: var(--zm-brand) !important;
  opacity: 0.8 !important;
}

/* ===== ICON WRAPPERS ===== */
.icon-wrapper {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s ease !important;
}

.card:hover .icon-wrapper {
  transform: scale(1.05) rotate(2deg) !important;
}

.card.selected .icon-svg {
  --icon-fill: rgba(3, 95, 254, 0.15) !important;
  --icon-stroke: var(--zm-brand) !important;
  --icon-accent: var(--zm-brand) !important;
  filter: drop-shadow(0 4px 8px rgba(3, 95, 254, 0.2)) !important;
}

/* ===== PILLS ===== */
.pill {
  background: var(--zm-bg-card) !important;
  padding: 14px 10px !important;
  border-radius: var(--zm-radius-md) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border: 2px solid var(--zm-border-light) !important;
  box-shadow: var(--zm-shadow-sm) !important;
  transition: all 0.3s ease !important;
  color: var(--zm-text-primary) !important;
}

.pill:hover {
  border-color: var(--zm-border) !important;
  transform: translateY(-2px) !important;
}

.pill.selected {
  border-color: var(--zm-brand) !important;
  color: var(--zm-brand) !important;
  background: linear-gradient(135deg, rgba(3, 95, 254, 0.03) 0%, rgba(3, 95, 254, 0.08) 100%) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px var(--zm-brand), var(--zm-shadow-sm) !important;
}

/* ===== SLIDER ===== */
.input-wrapper-slider {
  background: var(--zm-bg-card) !important;
  border-radius: var(--zm-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--zm-shadow-md) !important;
  border: 1px solid var(--zm-border-light) !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--zm-brand) 0%, var(--zm-brand-light) 100%) !important;
  border: 3px solid white !important;
  box-shadow: 0 2px 10px rgba(3, 95, 254, 0.4) !important;
  cursor: pointer !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1) !important;
}

.manual-input {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  border: 2px solid var(--zm-border) !important;
  border-radius: var(--zm-radius-md) !important;
  font-family: var(--font-body) !important;
}

.manual-input:focus {
  border-color: var(--zm-brand) !important;
  box-shadow: 0 0 0 4px rgba(3, 95, 254, 0.1) !important;
}

/* ===== TOGGLE ROWS ===== */
.toggle-row {
  background: var(--zm-bg-card) !important;
  padding: 1rem 1.25rem !important;
  border-radius: var(--zm-radius-lg) !important;
  border: 2px solid var(--zm-border-light) !important;
  transition: all 0.3s ease !important;
}

.toggle-row:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--zm-shadow-md) !important;
  border-color: var(--zm-border) !important;
}

.toggle-row.selected {
  border-color: var(--zm-brand) !important;
  background: linear-gradient(135deg, rgba(3, 95, 254, 0.03) 0%, rgba(3, 95, 254, 0.08) 100%) !important;
}

.toggle-check {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid var(--zm-border) !important;
  background: var(--zm-bg-card) !important;
  transition: all 0.3s ease !important;
}

.toggle-row.selected .toggle-check {
  background: linear-gradient(135deg, var(--zm-brand) 0%, var(--zm-brand-light) 100%) !important;
  border-color: var(--zm-brand) !important;
  box-shadow: 0 2px 8px rgba(3, 95, 254, 0.3) !important;
}

/* ===== ALERTS ===== */
.inline-alert {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border: 1px solid #fed7aa !important;
  border-radius: var(--zm-radius-md) !important;
  padding: 1rem !important;
}

.warning-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1px solid #fcd34d !important;
  border-radius: var(--zm-radius-md) !important;
}

.btn-inline {
  background: linear-gradient(135deg, var(--zm-brand) 0%, var(--zm-brand-dark) 100%) !important;
  border-radius: var(--zm-radius-md) !important;
  box-shadow: 0 4px 12px rgba(3, 95, 254, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-inline:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(3, 95, 254, 0.4) !important;
}

/* ===== RECEIPT / BOM ===== */
.receipt {
  background: var(--zm-bg-card) !important;
  border-radius: var(--zm-radius-xl) !important;
  padding: 1.5rem !important;
  box-shadow: var(--zm-shadow-md) !important;
  border: 1px solid var(--zm-border-light) !important;
}

.receipt-row {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--zm-border-light) !important;
}

.receipt-row.discount-row {
  color: var(--zm-accent-red) !important;
  background: rgba(239, 68, 68, 0.05) !important;
  border-radius: var(--zm-radius-sm) !important;
}

/* ===== CODE BOX ===== */
.codebox {
  background: var(--zm-bg-card) !important;
  border-radius: var(--zm-radius-xl) !important;
  box-shadow: var(--zm-shadow-md) !important;
  border: 1px solid var(--zm-border-light) !important;
  padding: 1.25rem !important;
}

.codebox-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--zm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.codebox-row input {
  border-radius: var(--zm-radius-md) !important;
  border: 2px solid var(--zm-border) !important;
  font-family: var(--font-body) !important;
}

.codebox-row input:focus {
  border-color: var(--zm-brand) !important;
  outline: none !important;
}

.code-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  padding: 10px 14px !important;
  border-radius: var(--zm-radius-md) !important;
  background: linear-gradient(135deg, rgba(3, 95, 254, 0.05) 0%, rgba(3, 95, 254, 0.1) 100%) !important;
  border: 2px solid var(--zm-brand) !important;
  color: var(--zm-brand) !important;
  letter-spacing: 1px !important;
}

.btn-small {
  background: linear-gradient(135deg, var(--zm-text-primary) 0%, #374151 100%) !important;
  border-radius: var(--zm-radius-md) !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.btn-small:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* ===== STICKY FOOTER ===== */
.glass-footer {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--zm-radius-xl) !important;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15), var(--zm-shadow-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  padding: 16px 24px !important;
}

.trust-item {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.dot {
  animation: dotPulse 2s ease-in-out infinite !important;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.total-price {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
}

.discount-badge {
  background: linear-gradient(135deg, var(--zm-accent-red) 0%, #dc2626 100%) !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.price-new {
  color: var(--zm-accent-red) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
}

.btn-buy {
  background: linear-gradient(135deg, var(--zm-accent-green) 0%, #16a34a 100%) !important;
  border-radius: var(--zm-radius-lg) !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.btn-buy::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-buy:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.45) !important;
}

.btn-buy:hover::before {
  left: 100% !important;
}

/* ===== MODAL ===== */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-content {
  border-radius: var(--zm-radius-xl) !important;
  padding: 2rem !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}

.modal-title {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.form-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--zm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.form-input {
  border: 2px solid var(--zm-border) !important;
  border-radius: var(--zm-radius-md) !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.form-input:focus {
  border-color: var(--zm-brand) !important;
  box-shadow: 0 0 0 4px rgba(3, 95, 254, 0.1) !important;
}

.btn-submit {
  background: linear-gradient(135deg, var(--zm-brand) 0%, var(--zm-brand-dark) 100%) !important;
  border-radius: var(--zm-radius-lg) !important;
  padding: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(3, 95, 254, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-submit::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(3, 95, 254, 0.4) !important;
}

.btn-submit:hover::before {
  left: 100% !important;
}

.btn-close {
  background: var(--zm-bg-page) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.btn-close:hover {
  background: var(--zm-border) !important;
  transform: rotate(90deg) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .zaun-app-wrapper h2 {
    font-size: 1.5rem !important;
  }
  
  .swatch {
    width: 40px !important;
    height: 40px !important;
  }
  
  .glass-footer {
    padding: 14px 18px !important;
  }
  
  .total-price,
  .price-new {
    font-size: 1.25rem !important;
  }
  
  .btn-buy {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .codebox-row {
    flex-direction: column !important;
  }
  
  .codebox-current {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 400px) {
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
}/* End custom CSS */