/* ==========================================
   WEBMO — PREMIUM DESIGN SYSTEM v2.0
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* === DESIGN TOKENS === */
:root {
  --bg-base:     #05050f;
  --bg-surface:  #0a0a1a;
  --bg-elevated: #0f0f22;
  --bg-card:     rgba(255,255,255,0.035);
  --bg-card-hov: rgba(255,255,255,0.065);

  --purple-700: #5b21b6;
  --purple-600: #7c3aed;
  --purple-500: #8b5cf6;
  --purple-400: #a78bfa;
  --purple-300: #c4b5fd;
  --purple-200: #ddd6fe;
  --pink-500:   #ec4899;

  --white:     #ffffff;
  --gray-50:   #f8fafc;
  --gray-100:  #f1f5f9;
  --gray-300:  #cbd5e1;
  --gray-400:  #94a3b8;
  --gray-500:  #64748b;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1e293b;

  --border-subtle:       rgba(255,255,255,0.06);
  --border-default:      rgba(255,255,255,0.10);
  --border-purple:       rgba(124,58,237,0.30);
  --border-purple-strong:rgba(124,58,237,0.55);

  --shadow-sm:   0 2px  8px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 32px rgba(0,0,0,0.50);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --t-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
  --t:      0.30s cubic-bezier(0.4,0,0.2,1);
  --t-slow: 0.55s cubic-bezier(0.4,0,0.2,1);

  --section-py: clamp(80px, 10vw, 140px);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--white);
}
h1 { font-size: clamp(2.6rem, 6vw,  5.2rem); }
h2 { font-size: clamp(2rem,  4.5vw, 3.5rem); }
h3 { font-size: clamp(1.2rem,2.5vw, 1.65rem); }
h4 { font-size: 1.1rem; }
p  { color: var(--gray-400); line-height: 1.75; }

/* === LAYOUT === */
.container    { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.container-sm { max-width: 820px; margin:0 auto; padding:0 24px; }
.container-lg { max-width:1400px; margin:0 auto; padding:0 24px; }

/* === GRADIENT TEXT === */
.gradient-text {
  background: linear-gradient(135deg, var(--purple-400) 0%, var(--purple-300) 50%, #e879f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: var(--t);
  cursor: pointer; white-space: nowrap;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: var(--white); border-color: var(--purple-500);
  box-shadow: 0 4px 24px rgba(124,58,237,0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-400));
  box-shadow: 0 8px 40px rgba(124,58,237,0.55);
  transform: translateY(-2px);
}
.btn-glow { animation: btnGlow 3s ease-in-out infinite alternate; }
@keyframes btnGlow {
  from { box-shadow: 0 4px 24px rgba(124,58,237,0.35); }
  to   { box-shadow: 0 10px 50px rgba(124,58,237,0.65); }
}
.btn-ghost {
  background: transparent; color: var(--gray-300);
  border-color: var(--border-default);
}
.btn-ghost:hover {
  background: var(--bg-card); border-color: var(--border-purple);
  color: var(--white); transform: translateY(-1px);
}
.btn-outline-purple {
  background: transparent; color: var(--purple-400);
  border-color: var(--border-purple);
}
.btn-outline-purple:hover {
  background: rgba(124,58,237,0.1);
  border-color: var(--purple-500);
  box-shadow: 0 0 24px rgba(124,58,237,0.2);
}
.btn-white {
  background: rgba(255,255,255,0.08);
  color: var(--white); border-color: rgba(255,255,255,0.2);
}
.btn-white:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.btn-lg  { padding: 18px 40px; font-size: 1.05rem; }
.btn-sm  { padding: 10px 20px; font-size: 0.875rem; }
.btn svg { width: 18px; height: 18px; flex-shrink:0; transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }

/* === BADGE === */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(124,58,237,0.10);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 600;
  color: var(--purple-300);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-400);
  box-shadow: 0 0 8px var(--purple-400);
  animation: pulseDot 2s ease infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* === SECTION LABEL === */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--purple-400);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.section-label::before {
  content:'';
  width: 24px; height: 2px;
  background: linear-gradient(to right, var(--purple-600), var(--purple-400));
  border-radius: 2px;
}

/* ==========================================
   NAVIGATION
   ========================================== */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 20px 0; transition: var(--t);
}
.nav.scrolled {
  padding: 12px 0;
  background: rgba(5,5,15,0.88);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-container {
  max-width: 1200px; margin:0 auto; padding:0 24px;
  display: flex; align-items: center; gap: 36px;
}
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-img {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(124,58,237,0.45));
  transition: filter var(--t);
}
.nav-logo:hover .logo-img {
  filter: drop-shadow(0 0 14px rgba(168,85,247,0.65));
}
.logo-text {
  font-family: var(--font-heading); font-weight:700;
  font-size:1.25rem; color:var(--white); letter-spacing:-0.03em;
}
.nav-links {
  display:flex; align-items:center; gap:2px; flex:1; list-style:none;
}
.nav-links a {
  display:block; padding:8px 14px;
  font-size:0.9rem; font-weight:500; color:var(--gray-400);
  border-radius: var(--radius-xs); transition: var(--t-fast);
}
.nav-links a:hover, .nav-links a.active {
  color:var(--white); background:rgba(255,255,255,0.06);
}
.nav-links a.active { color: var(--purple-300); }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  padding:8px; cursor:pointer;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--white); border-radius:2px; transition: var(--t);
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; transform:translateX(-8px); }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.nav-mobile {
  display:none; position:absolute; top:100%; left:0; right:0;
  background:rgba(5,5,15,0.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-subtle);
  padding:16px 24px 24px;
}
.nav-mobile.open { display:block; }
.nav-mobile ul { display:flex; flex-direction:column; gap:4px; list-style:none; margin-bottom:16px; }
.nav-mobile a {
  display:block; padding:12px 16px; font-size:1rem;
  color:var(--gray-400); border-radius:var(--radius-sm); transition:var(--t-fast);
}
.nav-mobile a:hover { color:var(--white); background:var(--bg-card); }

/* ==========================================
   HERO
   ========================================== */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden;
}
.hero-orbs { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(120px);
  animation: floatOrb 10s ease-in-out infinite;
}
.orb-1 {
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(124,58,237,0.22) 0%,transparent 70%);
  top:-150px; right:-150px; animation-duration:12s;
}
.orb-2 {
  width:450px; height:450px;
  background:radial-gradient(circle,rgba(139,92,246,0.14) 0%,transparent 70%);
  bottom:-80px; left:-100px; animation-delay:-4s; animation-duration:14s;
}
.orb-3 {
  width:320px; height:320px;
  background:radial-gradient(circle,rgba(232,121,249,0.10) 0%,transparent 70%);
  top:45%; left:38%; animation-delay:-7s; animation-duration:9s;
}
@keyframes floatOrb {
  0%,100%{transform:translate(0,0) scale(1);}
  33%    {transform:translate(30px,-30px) scale(1.06);}
  66%    {transform:translate(-20px,22px) scale(0.94);}
}
.hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.hero-content { position:relative; z-index:1; }
.hero-badge { margin-bottom:28px; }
.hero-title  { margin-bottom:26px; }
.hero-subtitle {
  font-size:clamp(1rem,1.4vw,1.18rem);
  color:var(--gray-400); margin-bottom:44px;
  max-width:530px; line-height:1.78;
}
.hero-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats {
  display:flex; gap:40px;
  padding-top:40px; border-top:1px solid var(--border-subtle);
}
.stat-number {
  display:block; font-family:var(--font-heading);
  font-size:1.8rem; font-weight:700; color:var(--white);
  letter-spacing:-0.03em;
}
.stat-label { display:block; font-size:0.78rem; color:var(--gray-500); margin-top:3px; }

/* Hero Visual */
.hero-visual { position:relative; z-index:1; }
.hero-card-mockup {
  background: rgba(255,255,255,0.04);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:28px;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-lg), 0 0 80px rgba(124,58,237,0.12);
  position:relative; overflow:hidden;
}
.hero-card-mockup::before {
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(124,58,237,0.06),transparent);
  pointer-events:none;
}
.mockup-header { display:flex; align-items:center; gap:7px; margin-bottom:20px; }
.mockup-dot { width:11px; height:11px; border-radius:50%; }
.mockup-dot:nth-child(1){background:#ff5f57;}
.mockup-dot:nth-child(2){background:#febc2e;}
.mockup-dot:nth-child(3){background:#28c840;}
.mockup-bar {
  flex:1; height:26px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-subtle);
  border-radius:6px; display:flex; align-items:center; padding:0 10px;
}
.mockup-url { font-size:0.7rem; color:var(--gray-600); font-family:monospace; }
.mockup-hero-area {
  background:linear-gradient(135deg,rgba(124,58,237,0.10),rgba(139,92,246,0.05));
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:28px 20px; margin-bottom:14px; text-align:center;
}
.mockup-hero-line {
  height:12px; background:rgba(255,255,255,0.08);
  border-radius:6px; margin:0 auto 10px; border-radius:6px;
}
.mockup-hero-btn {
  display:inline-block; margin-top:12px;
  padding:8px 20px; background:linear-gradient(135deg,var(--purple-600),var(--purple-500));
  border-radius:var(--radius-full); font-size:0.65rem; font-weight:700; color:white;
}
.mockup-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.mockup-card-mini {
  background:rgba(255,255,255,0.03); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:12px 8px;
}
.mockup-card-mini-line { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; margin-bottom:6px; }
.mockup-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-box {
  background:rgba(124,58,237,0.08); border:1px solid var(--border-purple);
  border-radius:var(--radius-sm); padding:12px; text-align:center;
}
.metric-value { display:block; font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--purple-300); }
.metric-label { display:block; font-size:0.65rem; color:var(--gray-500); margin-top:2px; }

/* Floating badges */
.floating-badge {
  position:absolute; display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:rgba(15,15,34,0.9); border:1px solid var(--border-default);
  border-radius:var(--radius-full); font-size:0.78rem; font-weight:600;
  color:var(--white); box-shadow:var(--shadow-md);
  backdrop-filter:blur(12px); white-space:nowrap;
}
.floating-badge.badge-top { top:-18px; left:-30px; animation:floatB1 4s ease-in-out infinite; }
.floating-badge.badge-bot { bottom:16px; right:-24px; animation:floatB2 5s ease-in-out infinite; }
.f-icon {
  width:24px; height:24px;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px;
}
@keyframes floatB1 { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-10px) rotate(1deg);} }
@keyframes floatB2 { 0%,100%{transform:translateY(0) rotate(2deg);}  50%{transform:translateY(10px) rotate(-1deg);} }

/* ==========================================
   TRUST STRIP
   ========================================== */
.trust-section { padding:40px 0 60px; border-top:1px solid var(--border-subtle); }
.trust-label { text-align:center; font-size:0.78rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; margin-bottom:28px; }
.trust-badges { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.trust-item {
  display:flex; align-items:center; gap:9px; padding:11px 20px;
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-full); font-size:0.85rem; color:var(--gray-400); font-weight:500;
  transition:var(--t);
}
.trust-item:hover { border-color:var(--border-purple); color:var(--white); }
.trust-item .ti { font-size:1rem; }

/* ==========================================
   HOW IT WORKS
   ========================================== */
.how-section  { padding:var(--section-py) 0; position:relative; }
.section-header { text-align:center; margin-bottom:64px; }
.section-header h2 { margin-bottom:16px; }
.section-header p  { font-size:1.05rem; max-width:560px; margin:0 auto; }
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative;
}
.steps-grid::before {
  content:''; position:absolute; top:40px;
  left:calc(16.66% + 20px); right:calc(16.66% + 20px);
  height:1px;
  background:linear-gradient(to right,transparent,var(--border-purple),transparent);
}
.step-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:36px 28px; text-align:center;
  transition:var(--t); overflow:hidden; position:relative;
}
.step-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(124,58,237,0.04),transparent);
  opacity:0; transition:var(--t);
}
.step-card:hover { border-color:var(--border-purple); transform:translateY(-8px); box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 30px rgba(124,58,237,0.08); }
.step-card:hover::after { opacity:1; }
.step-number {
  width:56px; height:56px; border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--purple-600),var(--purple-500));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:1.2rem; font-weight:700; color:white;
  margin:0 auto 24px; box-shadow:0 8px 24px rgba(124,58,237,0.4); position:relative; z-index:1;
}
.step-card h3 { margin-bottom:12px; font-size:1.15rem; }
.step-card p  { font-size:0.88rem; color:var(--gray-500); line-height:1.72; }

/* ==========================================
   PRICING
   ========================================== */
.pricing-section { padding:var(--section-py) 0; position:relative; }
.pricing-toggle {
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin-bottom:52px;
}
.toggle-label { font-size:0.95rem; font-weight:600; color:var(--gray-500); cursor:pointer; transition:var(--t-fast); }
.toggle-label.active { color:var(--white); }
.toggle-switch { position:relative; width:52px; height:28px; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute; inset:0;
  background:rgba(124,58,237,0.18); border:1px solid var(--border-purple);
  border-radius:var(--radius-full); cursor:pointer; transition:var(--t);
}
.toggle-slider::before {
  content:''; position:absolute;
  width:20px; height:20px; left:3px; top:3px;
  background:var(--purple-400); border-radius:50%;
  transition:var(--t); box-shadow:0 0 10px rgba(124,58,237,0.5);
}
input:checked + .toggle-slider::before { transform:translateX(24px); }
.mietkauf-pill {
  padding:4px 13px;
  background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(232,121,249,0.10));
  border:1px solid var(--border-purple); border-radius:var(--radius-full);
  font-size:0.72rem; font-weight:700; color:var(--purple-300);
  letter-spacing:0.06em; text-transform:uppercase;
  animation:pillGlow 2s ease-in-out infinite alternate;
}
@keyframes pillGlow { from{box-shadow:0 0 8px rgba(124,58,237,0.2);} to{box-shadow:0 0 22px rgba(124,58,237,0.45);} }

.pricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; align-items:start;
}
.pricing-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:36px 32px;
  position:relative; transition:var(--t); overflow:hidden;
}
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg),0 0 40px rgba(124,58,237,0.08); }
.pricing-card.featured {
  border-color:var(--border-purple-strong);
  background:linear-gradient(160deg,rgba(124,58,237,0.09) 0%,var(--bg-card) 60%);
  box-shadow:0 0 60px rgba(124,58,237,0.15);
  transform:scale(1.03);
}
.pricing-card.featured:hover { transform:scale(1.03) translateY(-8px); box-shadow:0 0 90px rgba(124,58,237,0.28),var(--shadow-lg); }
.featured-ribbon {
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  color:white; font-size:0.68rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; padding:6px 18px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.card-tier { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-600); margin-bottom:12px; }
.pricing-card.featured .card-tier { color:var(--purple-400); }
.price-block { margin-bottom:24px; }
.price-main  { display:flex; align-items:baseline; gap:3px; }
.price-currency {
  font-size:1.4rem; font-weight:700; font-family:var(--font-heading);
  color:var(--gray-300); line-height:1; margin-top:10px;
}
.price-amount {
  font-size:3.6rem; font-weight:700; font-family:var(--font-heading);
  color:var(--white); line-height:1; letter-spacing:-0.04em;
}
.price-period { font-size:0.95rem; color:var(--gray-500); margin-bottom:5px; }
.price-alt    { font-size:0.82rem; color:var(--gray-500); margin-top:8px; }
.price-alt strong { color:var(--purple-400); }
.price-savings {
  display:inline-block; margin-top:10px; padding:3px 11px;
  background:rgba(124,58,237,0.14); border:1px solid var(--border-purple);
  border-radius:var(--radius-full); font-size:0.73rem; font-weight:700; color:var(--purple-300);
}
.pricing-divider { height:1px; background:var(--border-subtle); margin:24px 0; }
.feature-list { list-style:none; margin-bottom:32px; display:flex; flex-direction:column; gap:11px; }
.feature-list li { display:flex; align-items:flex-start; gap:11px; font-size:0.875rem; color:var(--gray-400); line-height:1.55; }
.f-check {
  flex-shrink:0; width:20px; height:20px;
  background:rgba(124,58,237,0.14); border:1px solid var(--border-purple);
  border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.f-check svg { width:11px; height:11px; color:var(--purple-400); }

/* Mietkauf Highlight Box */
.mietkauf-info {
  margin-top:56px;
  background:linear-gradient(135deg,rgba(124,58,237,0.09),rgba(232,121,249,0.05));
  border:1px solid var(--border-purple); border-radius:var(--radius-lg);
  padding:36px 40px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
.mietkauf-pill2 {
  display:inline-block; padding:5px 14px; margin-bottom:12px;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  border-radius:var(--radius-full); font-size:0.72rem; font-weight:700;
  color:white; letter-spacing:0.08em; text-transform:uppercase;
}
.mietkauf-info h3 { font-size:1.35rem; margin-bottom:10px; }
.mietkauf-info p  { font-size:0.9rem; color:var(--gray-400); max-width:520px; }

/* ==========================================
   WHY WEBMO
   ========================================== */
.why-section { padding:var(--section-py) 0; }
.why-grid    { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.why-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:32px;
  transition:var(--t); position:relative; overflow:hidden;
}
.why-card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:0;
  background:linear-gradient(to bottom,var(--purple-500),var(--purple-300));
  transition:height var(--t-slow);
}
.why-card:hover { border-color:var(--border-purple); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.why-card:hover::before { height:100%; }
.why-icon {
  width:48px; height:48px; font-size:1.3rem;
  background:rgba(124,58,237,0.10); border:1px solid var(--border-purple);
  border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; transition:var(--t);
}
.why-card:hover .why-icon { background:rgba(124,58,237,0.22); box-shadow:0 0 24px rgba(124,58,237,0.2); }
.why-card h3 { font-size:1.08rem; margin-bottom:8px; }
.why-card p  { font-size:0.875rem; color:var(--gray-500); line-height:1.72; }

/* ==========================================
   TESTIMONIALS
   ========================================== */
.testimonials-section { padding:var(--section-py) 0; }
.testimonials-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:32px; transition:var(--t);
}
.testimonial-card:hover { border-color:var(--border-purple); transform:translateY(-4px); box-shadow:var(--shadow-card),0 0 30px rgba(124,58,237,0.07); }
.t-stars   { display:flex; gap:3px; margin-bottom:16px; font-size:0.875rem; color:#fbbf24; }
.t-text    { font-size:0.92rem; line-height:1.76; color:var(--gray-300); margin-bottom:24px; font-style:italic; }
.t-author  { display:flex; align-items:center; gap:12px; }
.t-avatar  {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:0.875rem; color:white; flex-shrink:0;
}
.t-name { display:block; font-size:0.875rem; font-weight:600; color:var(--white); }
.t-role { display:block; font-size:0.775rem; color:var(--gray-500); }

/* ==========================================
   FINAL CTA
   ========================================== */
.final-cta  { padding:var(--section-py) 0; }
.cta-box {
  max-width:880px; margin:0 auto; text-align:center;
  padding:80px 60px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,rgba(124,58,237,0.12),rgba(139,92,246,0.05) 50%,transparent);
  border:1px solid var(--border-purple); border-radius:var(--radius-xl);
}
.cta-box::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:380px; height:1px;
  background:linear-gradient(to right,transparent,var(--purple-400),transparent);
}
.cta-orb {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,0.12),transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  filter:blur(60px); pointer-events:none;
}
.cta-box h2  { font-size:clamp(1.9rem,3.5vw,3rem); margin-bottom:18px; position:relative; z-index:1; }
.cta-box p   { font-size:1.05rem; margin-bottom:40px; max-width:520px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
.cta-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.cta-note    { margin-top:18px; font-size:0.78rem; color:var(--gray-600); position:relative; z-index:1; }

/* ==========================================
   STATS STRIP
   ========================================== */
.stats-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--border-subtle); gap:1px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden;
  margin:60px 0;
}
.stat-item    { background:var(--bg-card); padding:32px 20px; text-align:center; }
.stat-item .stat-number { display:block; font-family:var(--font-heading); font-size:2.4rem; font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:1; margin-bottom:8px; }
.stat-item .stat-label  { display:block; font-size:0.82rem; color:var(--gray-500); }

/* ==========================================
   FOOTER
   ========================================== */
.footer { padding:64px 0 32px; border-top:1px solid var(--border-subtle); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand p { font-size:0.875rem; color:var(--gray-500); line-height:1.72; margin-top:16px; max-width:280px; }
.footer-col h4  { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gray-600); margin-bottom:18px; }
.footer-col ul  { display:flex; flex-direction:column; gap:10px; list-style:none; }
.footer-col ul li a { font-size:0.875rem; color:var(--gray-500); transition:var(--t-fast); }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:32px; border-top:1px solid var(--border-subtle); flex-wrap:wrap; gap:16px; }
.footer-bottom p { font-size:0.8rem; color:var(--gray-600); }
.footer-legal    { display:flex; gap:24px; }
.footer-legal a  { font-size:0.8rem; color:var(--gray-600); transition:var(--t-fast); }
.footer-legal a:hover { color:var(--gray-400); }

/* ==========================================
   PAGE HERO (Subpages)
   ========================================== */
.page-hero { padding:140px 0 80px; text-align:center; position:relative; overflow:hidden; }
.page-hero .orb { opacity:0.55; }
.page-hero h1   { margin:16px 0 20px; }
.page-hero p    { font-size:1.05rem; max-width:600px; margin:0 auto; }

/* ==========================================
   LEISTUNGEN (Feature Cards)
   ========================================== */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:36px 28px;
  transition:var(--t); position:relative; overflow:hidden;
}
.feature-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--purple-600),var(--purple-400));
  transform:scaleX(0); transition:var(--t);
}
.feature-card:hover { border-color:var(--border-purple); transform:translateY(-6px); box-shadow:var(--shadow-card); }
.feature-card:hover::after { transform:scaleX(1); }
.feature-icon {
  width:56px; height:56px; font-size:1.5rem;
  background:rgba(124,58,237,0.10); border:1px solid var(--border-purple);
  border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; transition:var(--t);
}
.feature-card:hover .feature-icon { background:rgba(124,58,237,0.22); box-shadow:0 0 28px rgba(124,58,237,0.25); }
.feature-card h3 { font-size:1.12rem; margin-bottom:12px; }
.feature-card p  { font-size:0.875rem; color:var(--gray-500); line-height:1.72; }
.feature-tags    { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.feature-tag {
  padding:3px 10px; background:rgba(124,58,237,0.08); border:1px solid var(--border-purple);
  border-radius:var(--radius-full); font-size:0.7rem; font-weight:600; color:var(--purple-400);
}

/* ==========================================
   REFERENZEN (Portfolio)
   ========================================== */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.portfolio-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); overflow:hidden; transition:var(--t);
}
.portfolio-card:hover { border-color:var(--border-purple); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.portfolio-img {
  height:200px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(124,58,237,0.14),rgba(139,92,246,0.06));
  display:flex; align-items:center; justify-content:center;
}
.portfolio-img-inner { text-align:center; position:relative; z-index:1; }
.portfolio-industry {
  font-size:0.7rem; font-weight:700; color:var(--purple-300);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;
}
.portfolio-screen-lines { padding:0 32px; }
.psl { height:6px; background:rgba(255,255,255,0.07); border-radius:3px; margin-bottom:6px; }
.psl-short { width:60%; }
.portfolio-content { padding:24px; }
.portfolio-tag {
  display:inline-block; padding:4px 12px; margin-bottom:12px;
  background:rgba(124,58,237,0.10); border:1px solid var(--border-purple);
  border-radius:var(--radius-full); font-size:0.7rem; font-weight:600;
  color:var(--purple-400); text-transform:uppercase; letter-spacing:0.06em;
}
.portfolio-content h3 { font-size:1.08rem; margin-bottom:8px; }
.portfolio-content p  { font-size:0.85rem; color:var(--gray-500); line-height:1.65; }

/* ==========================================
   KONTAKT
   ========================================== */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:20px; }
.contact-info-item {
  display:flex; align-items:flex-start; gap:16px; padding:22px;
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); transition:var(--t);
}
.contact-info-item:hover { border-color:var(--border-purple); }
.c-icon {
  width:44px; height:44px; flex-shrink:0; font-size:1.1rem;
  background:rgba(124,58,237,0.10); border:1px solid var(--border-purple);
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
}
.contact-info-item h4 { font-size:0.875rem; font-weight:600; color:var(--gray-300); margin-bottom:4px; }
.contact-info-item p  { font-size:0.875rem; color:var(--gray-500); }
.contact-form-wrap { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:40px; }
.form-group    { margin-bottom:20px; }
.form-label    { display:block; font-size:0.85rem; font-weight:600; color:var(--gray-300); margin-bottom:8px; }
.form-input, .form-select, .form-textarea {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  padding:13px 16px; font-size:0.9rem; color:var(--white);
  transition:var(--t-fast); outline:none;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--gray-600); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--purple-500); background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(124,58,237,0.12);
}
.form-select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:44px;
}
.form-select option { background:var(--bg-elevated); color:var(--white); }
.form-textarea { resize:vertical; min-height:140px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ==========================================
   ÜBER UNS
   ========================================== */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:32px; text-align:center; transition:var(--t);
}
.team-card:hover { border-color:var(--border-purple); transform:translateY(-6px); box-shadow:var(--shadow-card); }
.team-avatar {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:1.75rem; font-weight:700; color:white;
  box-shadow:0 8px 32px rgba(124,58,237,0.3);
}
.team-card h3 { font-size:1.1rem; margin-bottom:4px; }
.team-role    { display:block; font-size:0.85rem; color:var(--purple-400); font-weight:600; margin-bottom:12px; }
.team-card p  { font-size:0.85rem; color:var(--gray-500); line-height:1.7; }
.values-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.value-card   { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:28px; transition:var(--t); }
.value-card:hover { border-color:var(--border-purple); transform:translateY(-3px); }
.value-icon   { font-size:1.5rem; margin-bottom:12px; }
.value-card h3{ font-size:1rem; margin-bottom:8px; }
.value-card p { font-size:0.85rem; color:var(--gray-500); }

/* ==========================================
   FULL PRICING PAGE (comparison table)
   ========================================== */
.comparison-wrap { overflow-x:auto; margin-top:56px; border-radius:var(--radius-lg); border:1px solid var(--border-subtle); }
.comparison-table { width:100%; border-collapse:collapse; }
.comparison-table th, .comparison-table td { padding:16px 22px; text-align:center; border-bottom:1px solid var(--border-subtle); }
.comparison-table th { background:var(--bg-elevated); font-family:var(--font-heading); font-size:0.88rem; color:var(--gray-300); font-weight:600; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align:left; }
.comparison-table td:first-child { font-size:0.875rem; color:var(--gray-400); }
.comparison-table th.f-col  { background:rgba(124,58,237,0.09); color:var(--purple-300); }
.comparison-table td.f-col  { background:rgba(124,58,237,0.04); }
.comparison-table tr:last-child td { border-bottom:none; }
.c-check { color:var(--purple-400); font-size:1.1rem; }
.c-cross { color:var(--gray-700); font-size:0.875rem; }

/* FAQ */
.faq-list    { display:flex; flex-direction:column; gap:10px; max-width:800px; margin:0 auto; }
.faq-item    { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; transition:var(--t); }
.faq-item.open { border-color:var(--border-purple); }
.faq-q       { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; text-align:left; font-family:var(--font-heading); font-size:0.95rem; font-weight:600; color:var(--white); cursor:pointer; background:none; border:none; transition:var(--t-fast); }
.faq-q:hover { color:var(--purple-300); }
.faq-icon    { width:28px; height:28px; background:rgba(124,58,237,0.10); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--t); font-size:1.1rem; color:var(--purple-400); }
.faq-item.open .faq-icon { background:rgba(124,58,237,0.2); transform:rotate(45deg); }
.faq-answer  { height:0; overflow:hidden; transition:height var(--t); }
.faq-a-inner { padding:0 24px 20px; font-size:0.9rem; color:var(--gray-500); line-height:1.75; }

/* ==========================================
   SCROLL REVEAL
   ========================================== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.10s; }
.reveal-d2 { transition-delay:0.20s; }
.reveal-d3 { transition-delay:0.30s; }
.reveal-d4 { transition-delay:0.40s; }
.reveal-d5 { transition-delay:0.50s; }

/* Section divider */
.section-divider { height:1px; background:linear-gradient(to right,transparent,var(--border-subtle),transparent); }

/* ==========================================
   LEGAL PAGES (Impressum / Datenschutz / Cookies)
   ========================================== */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 0 var(--section-py);
}
.legal-toc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 56px;
}
.legal-toc h3 {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gray-500); margin-bottom: 16px;
}
.legal-toc ol { list-style: decimal; margin-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.legal-toc a  { font-size: 0.875rem; color: var(--purple-400); transition: var(--t-fast); }
.legal-toc a:hover { color: var(--purple-300); }

.legal-section {
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 100px;
}
.legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.legal-section h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin-bottom: 20px; color: var(--white);
  display: flex; align-items: center; gap: 12px;
}
.legal-section h2 .l-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(124,58,237,0.12); border: 1px solid var(--border-purple);
  border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 700; color: var(--purple-400);
}
.legal-section h3 {
  font-size: 1rem; font-weight: 600;
  color: var(--gray-300); margin: 22px 0 10px;
}
.legal-section p {
  font-size: 0.9rem; color: var(--gray-400);
  line-height: 1.85; margin-bottom: 12px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol {
  margin: 10px 0 14px 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.legal-section ul { list-style: disc; }
.legal-section ol { list-style: decimal; }
.legal-section li {
  font-size: 0.9rem; color: var(--gray-400); line-height: 1.75;
}
.legal-section a { color: var(--purple-400); transition: var(--t-fast); }
.legal-section a:hover { color: var(--purple-300); text-decoration: underline; }

/* Placeholder chips */
.ph {
  display: inline;
  color: var(--purple-300);
  background: rgba(124,58,237,0.10);
  border: 1px dashed rgba(124,58,237,0.4);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.85em;
  font-style: italic;
  white-space: nowrap;
}

/* Stand / last updated badge */
.legal-stand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-bottom: 48px;
  background: rgba(124,58,237,0.08); border: 1px solid var(--border-purple);
  border-radius: var(--radius-full);
  font-size: 0.8rem; color: var(--purple-300); font-weight: 600;
}

/* Cookie toggle in footer */
.cookie-settings-btn {
  background: none; border: none;
  font-size: 0.875rem; color: var(--gray-500);
  cursor: pointer; transition: var(--t-fast);
  font-family: var(--font-body); padding: 0;
}
.cookie-settings-btn:hover { color: var(--white); }

/* Story grid (Über uns) */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width:1080px) {
  .hero-grid { grid-template-columns:1fr; gap:60px; }
  .hero-visual { display:none; }
  .hero-title, .hero-badge { text-align:center; }
  .hero-subtitle { text-align:center; margin:0 auto 44px; }
  .hero-actions { justify-content:center; }
  .hero-stats   { justify-content:center; }
  .pricing-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .pricing-card.featured { transform:scale(1); }
  .pricing-card.featured:hover { transform:translateY(-8px); }
  .steps-grid { grid-template-columns:1fr; }
  .steps-grid::before { display:none; }
  .why-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:32px; }
  .stats-strip  { grid-template-columns:repeat(2,1fr); }
  .team-grid    { grid-template-columns:repeat(2,1fr); }
  .values-grid  { grid-template-columns:1fr; }
  .cta-box { padding:60px 40px; }
  .mietkauf-info { grid-template-columns:1fr; }
  .story-grid   { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-actions .btn { display:none; }
  .nav-toggle  { display:flex; margin-left:auto; }
  .nav-container { gap:16px; }
  .feature-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .cta-box  { padding:48px 24px; }
  .trust-badges { gap:10px; }
  .stats-strip  { grid-template-columns:repeat(2,1fr); }
  .team-grid    { grid-template-columns:1fr; }
  .hero-stats   { gap:20px; flex-wrap:wrap; }
}
@media (max-width:480px) {
  .container { padding:0 16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { text-align:center; justify-content:center; }
  .stats-strip  { grid-template-columns:1fr; }
  .btn-lg { padding:16px 28px; }
}

/* ==========================================
   COOKIE BANNER (DSGVO)
   ========================================== */
#wm-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: rgba(10,10,26,0.97);
  border-top: 1px solid var(--border-purple);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px 24px;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.6);
  animation: slideUpBanner 0.35s var(--ease);
}
@keyframes slideUpBanner {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wm-banner-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.wm-banner-text { flex: 1; min-width: 240px; }
.wm-banner-text strong {
  display: block; font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 5px;
}
.wm-banner-text p { font-size: 0.84rem; color: var(--gray-400); line-height: 1.65; margin: 0; }
.wm-banner-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ==========================================
   CONSENT MODAL
   ========================================== */
#wm-consent-modal {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#wm-consent-modal[hidden] { display: none; }

.wm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
}
.wm-modal-box {
  position: relative; z-index: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 560px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 60px rgba(124,58,237,0.12);
  overflow: hidden;
  animation: fadeScaleIn 0.25s var(--ease);
}
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.wm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.wm-modal-header h2 { font-size: 1.15rem; color: var(--white); margin: 0; }
.wm-modal-close {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle);
  border-radius: 50%; color: var(--gray-400);
  font-size: 0.875rem; display: flex; align-items: center; justify-content: center;
  transition: var(--t-fast); cursor: pointer;
}
.wm-modal-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.wm-modal-close:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }

.wm-modal-body { padding: 20px 28px; display: flex; flex-direction: column; }
.wm-modal-body > p { font-size: 0.875rem; color: var(--gray-400); margin-bottom: 16px; }

.wm-pref-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
}
.wm-pref-row:last-child { border-bottom: none; }
.wm-pref-info { flex: 1; }
.wm-pref-info strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.wm-pref-info span   { font-size: 0.79rem; color: var(--gray-500); line-height: 1.55; }
.wm-pref-toggle { flex-shrink: 0; }
.wm-always-on {
  display: inline-block; padding: 4px 12px;
  background: rgba(124,58,237,0.10); border: 1px solid var(--border-purple);
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700;
  color: var(--purple-400); letter-spacing: 0.06em; text-transform: uppercase;
}

/* Toggle-Switch */
.wm-switch {
  position: relative; display: inline-block;
  width: 46px; height: 26px; cursor: pointer;
}
.wm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.wm-switch-slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border-default);
  border-radius: 999px; transition: var(--t);
}
.wm-switch-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--gray-500); border-radius: 50%; transition: var(--t);
}
.wm-switch input:checked + .wm-switch-slider {
  background: rgba(124,58,237,0.28); border-color: var(--purple-500);
}
.wm-switch input:checked + .wm-switch-slider::before {
  transform: translateX(20px);
  background: var(--purple-400);
  box-shadow: 0 0 10px rgba(124,58,237,0.6);
}
.wm-switch input:focus-visible + .wm-switch-slider {
  outline: 2px solid var(--purple-500); outline-offset: 2px;
}
.wm-modal-footer {
  padding: 18px 28px; border-top: 1px solid var(--border-subtle);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}

/* ==========================================
   FORM VALIDIERUNG — Fehlerzustaende
   ========================================== */
.form-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
.form-error {
  display: block; font-size: 0.78rem;
  color: #f87171; margin-top: 5px;
}

/* ==========================================
   ZWEI KONTAKTFORMULARE (Side by Side)
   ========================================== */
.forms-section { padding: 0 0 var(--section-py); }
.forms-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: start;
}
.form-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 36px 32px; transition: var(--t);
}
.form-card:hover { border-color: var(--border-purple); }
.form-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; margin-bottom: 12px;
  background: rgba(124,58,237,0.10); border: 1px solid var(--border-purple);
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700;
  color: var(--purple-400); letter-spacing: 0.06em; text-transform: uppercase;
}
.form-card-header { margin-bottom: 24px; }
.form-card-header h3 { font-size: 1.2rem; margin-bottom: 6px; }
.form-card-header p  { font-size: 0.875rem; color: var(--gray-500); }

.form-success {
  text-align: center; padding: 40px 20px; outline: none;
}
.form-success-icon { font-size: 3rem; margin-bottom: 16px; }
.form-success h3   { margin-bottom: 12px; }
.form-success p    { font-size: 0.9rem; }

/* DSGVO-Checkbox Zeile */
.dsgvo-row {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;
}
.dsgvo-row input[type="checkbox"] {
  margin-top: 3px; accent-color: var(--purple-500);
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
}
.dsgvo-row label { font-size: 0.82rem; color: var(--gray-500); line-height: 1.6; cursor: pointer; }
.dsgvo-row label a { color: var(--purple-400); }
.dsgvo-row label a:hover { color: var(--purple-300); }

/* Konfigurator-CTA unter Formular A */
.konfigurator-cta {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.konfigurator-cta p { font-size: 0.8rem; color: var(--gray-600); margin-bottom: 10px; }

/* ==========================================
   KONFIGURATOR — Seiten-Layout
   ========================================== */
.conf-page { padding: 0 0 180px; } /* Platz fuer Sticky-Bar */

/* Schritt-Karte */
.conf-step { margin-bottom: 64px; }
.conf-step-header {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 32px; padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.conf-step-num {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: white;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}
.conf-step-header-text h2 { font-size: 1.4rem; margin-bottom: 4px; }
.conf-step-header-text p  { font-size: 0.875rem; color: var(--gray-500); margin: 0; }

/* Paket-Grid */
.pkg-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.pkg-card {
  background: var(--bg-card); border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 28px 24px;
  cursor: pointer; transition: var(--t);
  position: relative; outline: none; user-select: none;
}
.pkg-card:hover {
  border-color: var(--border-purple);
  transform: translateY(-4px); box-shadow: var(--shadow-card);
}
.pkg-card.selected {
  border-color: var(--purple-500);
  background: linear-gradient(160deg, rgba(124,58,237,0.10), var(--bg-card) 65%);
  box-shadow: 0 0 44px rgba(124,58,237,0.18);
}
.pkg-card:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 3px; }
.pkg-tag {
  display: inline-block; padding: 3px 10px; margin-bottom: 12px;
  background: rgba(124,58,237,0.12); border: 1px solid var(--border-purple);
  border-radius: var(--radius-full);
  font-size: 0.7rem; font-weight: 700; color: var(--purple-400);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pkg-name  { font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.pkg-price {
  font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.03em; margin-bottom: 12px;
}
.pkg-price span { font-size: 0.85rem; font-weight: 500; color: var(--gray-500); }
.pkg-desc { font-size: 0.82rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 18px; }
.pkg-features { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pkg-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.825rem; color: var(--gray-400); line-height: 1.5;
}
.f-check-icon { color: var(--purple-400); flex-shrink: 0; margin-top: 1px; }
.pkg-selected-badge {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-400));
  color: white; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-full);
  opacity: 0; transition: opacity var(--t);
}
.pkg-card.selected .pkg-selected-badge { opacity: 1; }

/* Add-on-Kategorien */
.addon-category { margin-bottom: 40px; }
.addon-cat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.addon-cat-header h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin: 0; }
.addon-cat-badge {
  padding: 3px 10px;
  background: rgba(124,58,237,0.08); border: 1px solid var(--border-purple);
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700;
  color: var(--purple-400); letter-spacing: 0.06em;
}
.addon-cat-lock {
  padding: 3px 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600;
  color: var(--gray-600); letter-spacing: 0.04em;
}
.cat-locked .addon-cat-header h3,
.cat-locked .addon-cat-header .addon-cat-badge { opacity: 0.5; }

.addon-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.addon-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); cursor: pointer; transition: var(--t);
}
.addon-item:hover:not(.addon-locked) { border-color: var(--border-purple); }
.addon-item:has(.addon-checkbox:checked) {
  border-color: var(--purple-500);
  background: linear-gradient(135deg, rgba(124,58,237,0.09), var(--bg-card));
}
.addon-locked { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.addon-checkbox {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--purple-500); cursor: pointer;
}
.addon-item-content { flex: 1; }
.addon-item-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 4px;
}
.addon-name  { font-size: 0.875rem; font-weight: 600; color: var(--white); }
.addon-price { font-size: 0.875rem; font-weight: 700; color: var(--purple-400); white-space: nowrap; }
.addon-desc  { font-size: 0.78rem; color: var(--gray-500); line-height: 1.55; }

/* Entfernte Add-ons Hinweis */
#addon-removed-notice {
  padding: 12px 18px;
  background: rgba(239,68,68,0.09); border: 1px solid rgba(239,68,68,0.28);
  border-radius: var(--radius-sm); font-size: 0.82rem; color: #f87171;
  margin-bottom: 20px;
}

/* ==========================================
   STICKY SUMMARY-BAR (Konfigurator)
   ========================================== */
.conf-summary-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(10,10,26,0.97);
  border-top: 1px solid var(--border-purple);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 14px 24px;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.55);
}
.conf-summary-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.conf-summary-details { flex: 1; min-width: 180px; }
.conf-summary-pkg { font-size: 0.72rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.07em; }
#conf-pkg-label { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--white); }
.conf-addon-list-wrap { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.conf-addon-list-label { font-size: 0.7rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
#conf-addon-list {
  list-style: none; display: flex; flex-direction: column; gap: 2px;
  max-height: 72px; overflow-y: auto;
}
#conf-addon-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76rem; color: var(--gray-400); }
.conf-addon-empty { color: var(--gray-600) !important; font-style: italic; }
.conf-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 160px; }
.conf-price-line  { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--gray-500); }
.conf-price-line span:last-child { color: var(--gray-300); min-width: 72px; text-align: right; }
.conf-total-line  {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em;
}
.conf-total-line span:first-child { font-size: 0.8rem; font-weight: 500; color: var(--gray-500); font-family: var(--font-body); }
#conf-request-btn:disabled,
#conf-request-btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; transform: none !important; }

/* ==========================================
   LEAD-MODAL (Konfigurator Anfrage-Formular)
   ========================================== */
#wm-lead-modal {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#wm-lead-modal[hidden] { display: none; }
.lead-modal-box {
  position: relative; z-index: 1;
  background: var(--bg-elevated); border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg); width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
  animation: fadeScaleIn 0.25s var(--ease);
}
.lead-summary-block {
  background: rgba(124,58,237,0.07);
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 28px; font-size: 0.83rem; color: var(--gray-400); line-height: 1.7;
}
.lead-summary-block strong { color: var(--purple-300); }

/* ==========================================
   RESPONSIVE — neue Komponenten
   ========================================== */
@media (max-width: 1080px) {
  .pkg-grid            { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .addon-list          { grid-template-columns: 1fr; }
  .conf-addon-list-wrap { display: none; }
  .conf-summary-inner  { gap: 16px; }
}
@media (max-width: 768px) {
  .forms-grid { grid-template-columns: 1fr; }
  .conf-price-block { align-items: flex-start; }
  #conf-request-btn { width: 100%; justify-content: center; }
  .wm-banner-actions { width: 100%; }
  .wm-modal-footer { justify-content: stretch; }
  .wm-modal-footer .btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .form-card { padding: 24px 18px; }
  .conf-summary-bar { padding: 12px 16px; }
  .pkg-card { padding: 22px 18px; }
}