/* ===================================================================
   Varelio — Marketing Website
   CI übernommen von Desti-IT (desti-it.de): Cabinet Grotesk + Satoshi,
   Navy #1B2A4A / Teal #0D9488, Light/Dark-Mode.
   =================================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Type Scale (fluid) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Fonts */
  --font-display:'Cabinet Grotesk','Helvetica Neue',sans-serif;
  --font-body:'Satoshi','Inter',sans-serif;

  /* Radius */
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;

  /* Transitions */
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  /* Content widths */
  --content-narrow:640px; --content-default:960px; --content-wide:1200px;
}

/* ===== LIGHT MODE (default) ===== */
:root, [data-theme="light"] {
  --color-bg:#F8F9FA; --color-surface:#FFFFFF; --color-surface-2:#F1F3F5;
  --color-surface-offset:#E9ECEF; --color-border:#DEE2E6; --color-divider:#E9ECEF;
  --color-text:#1A1D23; --color-text-muted:#6C757D; --color-text-faint:#ADB5BD;

  --color-primary:#1B2A4A; --color-primary-hover:#253A66; --color-primary-light:#E8EDF5;
  --color-accent:#0D9488; --color-accent-hover:#0F766E; --color-accent-light:#CCFBF1;

  --color-error:#DC2626; --color-success:#16A34A; --color-warning:#D97706;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.12);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --color-bg:#0F1117; --color-surface:#1A1D27; --color-surface-2:#22252F;
  --color-surface-offset:#2A2D37; --color-border:#343840; --color-divider:#2A2D37;
  --color-text:#E4E5E9; --color-text-muted:#9CA3AF; --color-text-faint:#6B7280;

  --color-primary:#94A8D0; --color-primary-hover:#B0C0E0; --color-primary-light:#1E2640;
  --color-accent:#2DD4BF; --color-accent-hover:#5EEAD4; --color-accent-light:#0D3D38;

  --color-error:#F87171; --color-success:#4ADE80; --color-warning:#FBBF24;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0F1117; --color-surface:#1A1D27; --color-surface-2:#22252F;
    --color-surface-offset:#2A2D37; --color-border:#343840; --color-divider:#2A2D37;
    --color-text:#E4E5E9; --color-text-muted:#9CA3AF; --color-text-faint:#6B7280;
    --color-primary:#94A8D0; --color-primary-hover:#B0C0E0; --color-primary-light:#1E2640;
    --color-accent:#2DD4BF; --color-accent-hover:#5EEAD4; --color-accent-light:#0D3D38;
    --color-error:#F87171; --color-success:#4ADE80; --color-warning:#FBBF24;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.4);
  }
}

/* ===== GLOBAL ===== */
body { font-family:var(--font-body); overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; color:var(--color-text); }
a { color:var(--color-accent); text-decoration:none; }
a:hover { color:var(--color-accent-hover); }
.container { max-width:var(--content-wide); margin:0 auto; padding-inline:var(--space-4); }

/* ===== HEADER / NAV ===== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(248,249,250,0.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-border);
}
[data-theme="dark"] .site-header { background:rgba(15,17,23,0.9); }
.nav-container {
  max-width:var(--content-wide); margin:0 auto; padding:var(--space-3) var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
}
.nav-logo { display:flex; align-items:center; gap:var(--space-2); text-decoration:none; }
.nav-logo img { height:30px; width:auto; }
.footer-brand img.brand-logo { height:26px; width:auto; margin-bottom:var(--space-3); }
.logo-on-dark { display:none; }
[data-theme="dark"] .logo-on-light { display:none; }
[data-theme="dark"] .logo-on-dark { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-on-light { display:none; }
  :root:not([data-theme]) .logo-on-dark { display:block; }
}
.nav-logo .wordmark { font-family:var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-0.02em; color:var(--color-primary); }
[data-theme="dark"] .nav-logo .wordmark { color:#fff; }
.nav-logo .wordmark b { color:var(--color-accent); font-weight:800; }

.nav-links { display:flex; align-items:center; gap:var(--space-6); list-style:none; }
.nav-links a {
  font-size:var(--text-sm); color:var(--color-text-muted); font-weight:500; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:var(--color-accent); transition:width .3s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--color-text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width:100%; }

.nav-actions { display:flex; align-items:center; gap:var(--space-3); }
.theme-toggle {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); color:var(--color-text-muted);
}
.theme-toggle:hover { background:var(--color-surface-2); color:var(--color-text); }
.theme-toggle svg { width:20px; height:20px; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
.nav-cta { display:inline-flex; }

.mobile-menu-btn { display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--color-text); }
.mobile-menu-btn svg { width:24px; height:24px; }
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:60; background:var(--color-bg);
  flex-direction:column; padding:var(--space-16) var(--space-6);
}
.mobile-nav.active { display:flex; }
.mobile-nav-close { position:absolute; top:var(--space-4); right:var(--space-4); width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--color-text); }
.mobile-nav-close svg { width:26px; height:26px; }
.mobile-nav a {
  font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-text);
  padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); display:block;
}
.mobile-nav .btn { margin-top:var(--space-6); justify-content:center; }
@media (max-width:820px) {
  .nav-links, .nav-cta { display:none; }
  .mobile-menu-btn { display:flex; }
}

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-6); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:600; text-decoration:none; cursor:pointer; border:none;
  transition:transform var(--transition-interactive), box-shadow var(--transition-interactive),
             background var(--transition-interactive), color var(--transition-interactive);
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--color-accent); color:#fff; }
.btn-primary:hover { background:var(--color-accent-hover); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--color-border); color:var(--color-text); }
.btn-outline:hover { background:var(--color-surface-2); border-color:var(--color-text-faint); color:var(--color-text); }
.btn-lg { padding:var(--space-4) var(--space-8); font-size:var(--text-base); }
.btn svg { width:16px; height:16px; }

/* ===== HERO ===== */
.hero {
  min-height:84vh; display:flex; align-items:center;
  padding:var(--space-20) var(--space-4); position:relative; overflow:hidden;
  background:var(--color-primary);
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, rgba(20,35,60,0.92) 0%, rgba(13,100,100,0.72) 100%);
}
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:0.5; }
.hero-inner { position:relative; z-index:2; max-width:var(--content-wide); margin:0 auto; width:100%; text-align:center; }
.hero-content { max-width:780px; margin:0 auto; }
.hero-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); color:rgba(255,255,255,0.92);
  padding:var(--space-1) var(--space-4); border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,0.22); font-size:var(--text-xs); font-weight:600;
  margin-bottom:var(--space-6); letter-spacing:0.03em;
}
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 0 4px rgba(45,212,191,0.25); }
.hero h1 { font-size:var(--text-3xl); font-weight:800; line-height:1.05; margin-bottom:var(--space-6); letter-spacing:-0.02em; color:#fff; }
.hero h1 .accent { color:#2dd4bf; }
.hero-subtitle { font-size:var(--text-lg); color:rgba(255,255,255,0.82); line-height:1.6; margin:0 auto var(--space-8); max-width:60ch; }
.hero-cta { display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; }
.hero .btn-outline { border-color:rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.04); }
.hero .btn-outline:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.6); color:#fff; }
.hero-trust { display:flex; gap:var(--space-6); flex-wrap:wrap; justify-content:center; margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,0.2); }
.hero-trust-item { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:rgba(255,255,255,0.78); font-weight:600; }
.hero-trust-item svg { width:16px; height:16px; color:#2dd4bf; flex-shrink:0; }
@media (max-width:768px) {
  .hero { min-height:auto; padding:var(--space-16) var(--space-4); }
  .hero h1 { font-size:var(--text-2xl); }
  .hero-subtitle { font-size:var(--text-base); }
}

/* ===== PAGE HEADER (inner pages) ===== */
.page-hero { padding:var(--space-20) var(--space-4) var(--space-12); text-align:center; background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.page-hero .container { max-width:var(--content-default); }
.page-hero h1 { font-size:var(--text-2xl); font-weight:800; letter-spacing:-0.02em; margin-bottom:var(--space-4); }
.page-hero p { font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; margin:0 auto; line-height:1.6; }

/* ===== SECTION UTILITIES ===== */
.section { padding:clamp(var(--space-12),8vw,var(--space-24)) var(--space-4); }
.section-alt { background:var(--color-surface); }
.section-tight { padding-block:clamp(var(--space-10),5vw,var(--space-16)); }
.section-header { max-width:var(--content-default); margin:0 auto var(--space-12); text-align:center; }
.section-label { display:inline-block; font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-accent); margin-bottom:var(--space-3); }
.section-title { font-size:var(--text-xl); font-weight:800; line-height:1.1; margin-bottom:var(--space-4); letter-spacing:-0.01em; }
.section-desc { font-size:var(--text-base); color:var(--color-text-muted); max-width:58ch; margin:0 auto; line-height:1.7; }

/* ===== FEATURE / MODULE GRID ===== */
.feature-grid { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:var(--space-6); }
.feature-card {
  background:var(--color-surface); border:1px solid rgba(26,29,35,0.08);
  border-radius:var(--radius-lg); padding:var(--space-8);
  transition:transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
[data-theme="dark"] .feature-card { border-color:var(--color-border); }
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(13,148,136,0.35); }
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); border-radius:var(--radius-md); background:var(--color-accent-light); color:var(--color-accent); }
.feature-icon svg { width:26px; height:26px; stroke-width:1.6; }
.feature-card h3 { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-3); }
.feature-card p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.7; }
.feature-tags { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }
.feature-tag { font-size:var(--text-xs); background:var(--color-surface-2); color:var(--color-text-muted); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); font-weight:500; }

/* ===== SPLIT (alternating text/visual rows) ===== */
.split { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }
.split + .split { margin-top:var(--space-24); }
.split--reverse .split-media { order:2; }
.split-body h2 { font-size:var(--text-xl); margin-bottom:var(--space-4); letter-spacing:-0.01em; }
.split-body > p { color:var(--color-text-muted); line-height:1.75; margin-bottom:var(--space-5); }
.split-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.split-list li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); color:var(--color-text); }
.split-list svg { width:20px; height:20px; color:var(--color-accent); flex-shrink:0; margin-top:2px; }
.split-media { display:flex; justify-content:center; }
.media-card {
  width:100%; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-6); position:relative; overflow:hidden;
}
.media-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); }
@media (max-width:820px) {
  .split { grid-template-columns:1fr; gap:var(--space-8); }
  .split--reverse .split-media { order:0; }
  .split + .split { margin-top:var(--space-16); }
}

/* ===== PAIN / PROBLEM CARDS ===== */
.pain-grid { max-width:var(--content-default); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:var(--space-6); }
.pain-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); }
.pain-card .pain-icon { color:var(--color-warning); margin-bottom:var(--space-3); }
.pain-card .pain-icon svg { width:24px; height:24px; }
.pain-card h3 { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-2); }
.pain-card p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.65; }

/* ===== STEPS / HOW IT WORKS ===== */
.steps { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--space-6); counter-reset:step; }
.step { position:relative; padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.step-num {
  width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:var(--text-base);
  background:var(--color-primary); color:#fff; margin-bottom:var(--space-4);
}
.step h3 { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-2); }
.step p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.65; }

/* ===== STATS BAND ===== */
.stats-band { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:var(--space-6); }
.stat { text-align:center; padding:var(--space-6) var(--space-4); }
.stat-number { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--color-accent); display:block; line-height:1.1; }
.stat-label { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); }

/* ===== TRUST / SECURITY GRID ===== */
.trust-grid { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--space-6); }
.trust-item { display:flex; gap:var(--space-4); padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.trust-item .trust-icon { width:44px; height:44px; flex-shrink:0; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--color-primary-light); color:var(--color-primary); }
[data-theme="dark"] .trust-item .trust-icon { color:var(--color-accent); }
.trust-item .trust-icon svg { width:24px; height:24px; stroke-width:1.6; }
.trust-item h3 { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-2); }
.trust-item p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.65; }

/* ===== VALUE CHIPS ===== */
.chip-row { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }
.chip { display:inline-flex; align-items:center; gap:var(--space-2); background:var(--color-accent-light); color:var(--color-accent); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); font-size:var(--text-sm); font-weight:600; }
.chip svg { width:16px; height:16px; }

/* ===== CTA BAND ===== */
.cta-band { position:relative; overflow:hidden; background:var(--color-primary); border-radius:var(--radius-xl); padding:clamp(var(--space-10),6vw,var(--space-20)) var(--space-6); text-align:center; }
.cta-band::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(27,42,74,0.2) 0%, rgba(13,148,136,0.45) 100%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { font-size:var(--text-xl); color:#fff; margin-bottom:var(--space-4); }
.cta-band p { color:rgba(255,255,255,0.85); max-width:54ch; margin:0 auto var(--space-8); font-size:var(--text-base); }
.cta-band .hero-cta { justify-content:center; }
.cta-band .btn-outline { border-color:rgba(255,255,255,0.4); color:#fff; }
.cta-band .btn-outline:hover { background:rgba(255,255,255,0.12); color:#fff; }
.cta-wrap { max-width:var(--content-wide); margin:0 auto; }

/* ===== CONTACT ===== */
.contact-grid { max-width:var(--content-default); margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-12); align-items:start; }
.contact-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-8); }
.contact-card h3 { font-size:var(--text-base); margin-bottom:var(--space-4); }
.contact-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-4); }
.contact-list li { display:flex; gap:var(--space-3); align-items:flex-start; }
.contact-list svg { width:20px; height:20px; color:var(--color-accent); flex-shrink:0; margin-top:3px; }
.contact-list .label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--color-text-faint); display:block; margin-bottom:2px; }
.contact-list a { color:var(--color-text); font-weight:500; }
.contact-list a:hover { color:var(--color-accent); }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; gap:var(--space-8); } }

/* ===== LEGAL / PROSE ===== */
.prose { max-width:var(--content-narrow); margin:0 auto; }
.prose h2 { font-size:var(--text-lg); margin:var(--space-8) 0 var(--space-3); }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:var(--text-base); margin:var(--space-6) 0 var(--space-2); }
.prose p { color:var(--color-text-muted); line-height:1.75; margin-bottom:var(--space-4); }
.prose strong { color:var(--color-text); }
.prose a { font-weight:500; }

/* ===== FOOTER ===== */
.site-footer { background:var(--color-surface); border-top:1px solid var(--color-border); padding:var(--space-16) var(--space-4) var(--space-8); }
.footer-grid { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-8); }
.footer-brand .wordmark { font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em; color:var(--color-text); }
.footer-brand .wordmark b { color:var(--color-accent); }
.footer-brand p { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-3); max-width:34ch; line-height:1.6; }
.footer-col h4 { font-family:var(--font-display); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.08em; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.footer-col a, .footer-col span { font-size:var(--text-sm); color:var(--color-text-muted); }
.footer-col a:hover { color:var(--color-accent); }
.footer-bottom { max-width:var(--content-wide); margin:var(--space-12) auto 0; padding-top:var(--space-6); border-top:1px solid var(--color-border); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; font-size:var(--text-xs); color:var(--color-text-faint); }
.footer-bottom a { color:var(--color-text-muted); }
@media (max-width:820px){ .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-8); } .footer-brand { grid-column:1 / -1; } }
@media (max-width:520px){ .footer-grid { grid-template-columns:1fr; } }

/* ===== REVEAL ANIMATION (progressive enhancement — only hides when JS active) ===== */
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; } }

/* ===================================================================
   REFINEMENTS — deterministische Spalten (keine Orphan-Reihen) + Wärme
   =================================================================== */

/* ---- Deterministische Grid-Spalten ---- */
.pain-grid { display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media (min-width:560px){ .pain-grid { grid-template-columns:repeat(2,1fr); } }

.feature-grid { display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media (min-width:600px){ .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:920px){ .feature-grid { grid-template-columns:repeat(3,1fr); } }
/* Genau 3 Karten: 2-Spalten-Stufe überspringen, sonst 2+1-Orphan */
.feature-grid.is-3 { grid-template-columns:1fr; }
@media (min-width:920px){ .feature-grid.is-3 { grid-template-columns:repeat(3,1fr); } }

.steps { display:grid; gap:var(--space-6); grid-template-columns:1fr; position:relative; }
@media (min-width:760px){ .steps { grid-template-columns:repeat(3,1fr); } }
@media (min-width:560px) and (max-width:899px){ .steps.is-4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .steps.is-4 { grid-template-columns:repeat(4,1fr); } }

.trust-grid { max-width:var(--content-default); display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media (min-width:760px){ .trust-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- Wärmere Icons / Akzente ---- */
.section-label { background:var(--color-accent-light); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); }

.pain-card .pain-icon {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:rgba(217,119,6,0.12); color:var(--color-warning); margin-bottom:var(--space-4);
}
[data-theme="dark"] .pain-card .pain-icon { background:rgba(251,191,36,0.14); }

.step-num {
  width:48px; height:48px; border-radius:var(--radius-full); font-size:var(--text-lg);
  background:linear-gradient(135deg, var(--color-primary), var(--color-accent)); box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .step-num { background:linear-gradient(135deg, #2b3b63, var(--color-accent)); }

.feature-icon { box-shadow:inset 0 0 0 1px rgba(13,148,136,0.12); }

/* ---- Dezente Hintergrund-Glows ---- */
.glow { position:relative; overflow:hidden; }
.glow::before {
  content:''; position:absolute; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(13,148,136,0.10), rgba(13,148,136,0) 70%);
  top:-220px; right:-180px; z-index:0; pointer-events:none;
}
.glow::after {
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(27,42,74,0.07), rgba(27,42,74,0) 70%);
  bottom:-220px; left:-160px; z-index:0; pointer-events:none;
}
[data-theme="dark"] .glow::after { background:radial-gradient(circle, rgba(148,168,208,0.06), rgba(148,168,208,0) 70%); }
.glow > * { position:relative; z-index:1; }

/* ---- Regelwerke-Leiste ---- */
.frameworks { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media (min-width:560px){ .frameworks { grid-template-columns:repeat(2,1fr); } }
@media (min-width:920px){ .frameworks { grid-template-columns:repeat(4,1fr); } }
.framework { display:flex; align-items:center; gap:var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); transition:transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive); }
.framework:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(13,148,136,0.3); }
.framework .fw-badge { width:42px; height:42px; flex-shrink:0; border-radius:var(--radius-md); background:var(--color-primary-light); color:var(--color-primary); display:flex; align-items:center; justify-content:center; }
[data-theme="dark"] .framework .fw-badge { color:var(--color-accent); }
.framework .fw-badge svg { width:22px; height:22px; }
.framework b { display:block; font-family:var(--font-display); font-size:var(--text-base); line-height:1.2; }
.framework span { font-size:var(--text-xs); color:var(--color-text-muted); }

/* ---- Produkt-Illustration ---- */
.product-shot { max-width:var(--content-wide); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; }
.product-shot .split-body { max-width:none; }
@media (max-width:880px){ .product-shot { grid-template-columns:1fr; gap:var(--space-8); } }
.shot-frame { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-3); }
.shot-frame svg { width:100%; height:auto; display:block; }

/* ---- FAQ ---- */
.faq { max-width:var(--content-default); margin:0 auto; display:flex; flex-direction:column; gap:var(--space-3); }
.faq-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.faq-item summary { list-style:none; cursor:pointer; padding:var(--space-5) var(--space-6); font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); transition:color var(--transition-interactive); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:''; width:11px; height:11px; flex-shrink:0; border-right:2px solid var(--color-text-muted); border-bottom:2px solid var(--color-text-muted); transform:rotate(45deg); transition:transform var(--transition-interactive); margin-top:-4px; }
.faq-item summary:hover { color:var(--color-accent); }
.faq-item[open] summary { color:var(--color-accent); }
.faq-item[open] summary::after { transform:rotate(225deg); margin-top:4px; border-color:var(--color-accent); }
.faq-a { padding:0 var(--space-6) var(--space-5); }
.faq-a p { color:var(--color-text-muted); line-height:1.7; font-size:var(--text-sm); max-width:72ch; }

/* ---- Consent-Banner ---- */
.vc-banner { position:fixed; left:0; right:0; bottom:0; z-index:200; padding:var(--space-4); display:flex; justify-content:center; pointer-events:none; }
.vc-inner { pointer-events:auto; width:100%; max-width:var(--content-wide); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-6); display:flex; gap:var(--space-6); align-items:center; transform:translateY(20px); opacity:0; transition:transform .25s var(--ease-out), opacity .25s var(--ease-out); }
.vc-banner.vc-in .vc-inner { transform:none; opacity:1; }
.vc-banner.vc-hide .vc-inner { transform:translateY(20px); opacity:0; }
.vc-text strong { font-family:var(--font-display); font-size:var(--text-base); display:block; margin-bottom:4px; color:var(--color-text); }
.vc-text p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.6; max-width:74ch; }
.vc-text a { color:var(--color-accent); font-weight:500; }
.vc-cats { margin-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.vc-cat { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-2); cursor:pointer; }
.vc-cat span { display:flex; flex-direction:column; gap:2px; }
.vc-cat b { font-size:var(--text-sm); color:var(--color-text); }
.vc-cat small { font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.5; max-width:62ch; }
.vc-cat input { width:18px; height:18px; accent-color:var(--color-accent); margin-top:2px; flex-shrink:0; }
.vc-actions { display:flex; flex-direction:column; gap:var(--space-2); flex-shrink:0; align-self:center; min-width:200px; }
.vc-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive); }
.vc-btn svg { width:15px; height:15px; }
.vc-primary { background:var(--color-accent); color:#fff; }
.vc-primary:hover { background:var(--color-accent-hover); }
.vc-outline { background:transparent; border-color:var(--color-border); color:var(--color-text); }
.vc-outline:hover { background:var(--color-surface-2); border-color:var(--color-text-faint); }
.vc-save { background:var(--color-primary); color:#fff; }
.vc-save:hover { background:var(--color-primary-hover); }
.vc-ghost { background:transparent; color:var(--color-text-muted); }
.vc-ghost:hover { color:var(--color-text); text-decoration:underline; }
@media (max-width:820px){
  .vc-inner { flex-direction:column; align-items:stretch; gap:var(--space-4); padding:var(--space-5); }
  .vc-actions { min-width:0; }
}
.vc-reopen { background:none; border:none; padding:0; margin:0; font:inherit; color:var(--color-text-muted); cursor:pointer; font-size:var(--text-xs); }
.vc-reopen:hover { color:var(--color-accent); text-decoration:underline; }