/* ══════════════════════════════════════════════════════════
   The Digital Guardian — Premium-Layer (dunkles Design mit Glow)
   Wird nach style.css geladen und überschreibt nur das Aussehen.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg: #05070d;
  --bg-soft: #080b14;
  --bg-card: rgba(255, 255, 255, 0.035);
  --ink: #eef2f9;
  --grey: #9aa6ba;
  --grey-dim: #5d6a80;
  --border: rgba(148, 163, 184, 0.13);
  --border-strong: rgba(148, 163, 184, 0.22);

  --cyan: #22d3ee;
  --sky: #38bdf8;
  --blue: #4f8dff;
  --blue-deep: #3b74e6;
  --violet: #a78bfa;
  --purple: #8b7fd4;
  --mint: #34d399;

  --glow-cyan: rgba(34, 211, 238, 0.35);
  --glow-blue: rgba(79, 141, 255, 0.35);
  --glow-violet: rgba(167, 139, 250, 0.32);
  --grad: linear-gradient(100deg, #22d3ee 0%, #4f8dff 48%, #a78bfa 100%);
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
}

html { background: var(--bg); }

body {
  background: transparent;
  color: var(--ink);
  position: relative;
}

/* Feines Raster + Aurora im Hintergrund der ganzen Seite */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(79, 141, 255, 0.16), transparent 60%),
    radial-gradient(700px 500px at -5% 25%, rgba(34, 211, 238, 0.09), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(167, 139, 250, 0.10), transparent 60%),
    var(--bg);
}

a { color: var(--sky); }
::selection { background: rgba(79, 141, 255, 0.45); color: #fff; }

/* ── Navigation ─────────────────────────────────────────── */

.nav {
  position: sticky;
  background: rgba(5, 7, 13, 0.72);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}
.nav-brand { color: #fff; }
.nav-brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 18px var(--glow-cyan); }

.nav-links a { color: var(--grey); position: relative; transition: color 0.25s, text-shadow 0.25s; }
.nav-links a:not(.nav-cta)::before {
  content: ""; position: absolute; inset: -7px -12px; z-index: -1; border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.22), rgba(167, 139, 250, 0.3));
  border: 1px solid rgba(148, 197, 255, 0.45);
  box-shadow: 0 0 14px rgba(79, 141, 255, 0.35), 0 0 30px rgba(167, 139, 250, 0.2);
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.25s, transform 0.25s;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible {
  color: #fff;
  text-shadow: 0 0 10px rgba(199, 225, 255, 0.85), 0 0 22px rgba(167, 139, 250, 0.5);
}
.nav-links a:not(.nav-cta):hover::before,
.nav-links a:not(.nav-cta):focus-visible::before {
  opacity: 1; transform: scale(1);
  animation: pulseGlow 2.8s ease-in-out 0.25s infinite;
}

.nav-cta {
  background: var(--grad) !important;
  box-shadow: 0 6px 20px var(--glow-blue), 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
  transition: box-shadow 0.25s, transform 0.2s, filter 0.25s !important;
}
.nav-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 22px rgba(79, 141, 255, 0.6), 0 0 48px rgba(167, 139, 250, 0.35) !important;
}

.lang-switch { background: rgba(255, 255, 255, 0.04); border-color: var(--border); }
.lang-switch button { color: var(--grey); }
.lang-switch button.is-active { background: var(--grad); box-shadow: 0 0 14px var(--glow-blue); }
.lang-switch button:not(.is-active):hover { color: #fff; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; margin-left: -18px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--grey);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: #fff; border-color: rgba(148, 197, 255, 0.55);
  box-shadow: 0 0 16px rgba(79, 141, 255, 0.45), 0 0 32px rgba(167, 139, 250, 0.25);
}
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(79, 141, 255, 0.35), 0 0 30px rgba(167, 139, 250, 0.2); }
  50%      { box-shadow: 0 0 22px rgba(79, 141, 255, 0.6), 0 0 48px rgba(167, 139, 250, 0.35); }
}

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  background: transparent;
  padding: 112px 0 104px;
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: 0.55;
}
.hero::before {
  width: 620px; height: 620px; top: -260px; left: 50%; margin-left: -520px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.55), transparent 65%);
  animation: auroraA 16s ease-in-out infinite alternate;
}
.hero::after {
  width: 680px; height: 680px; top: -240px; left: 50%; margin-left: -60px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.55), transparent 65%);
  animation: auroraB 19s ease-in-out infinite alternate;
}
@keyframes auroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 60px) scale(1.15); } }
@keyframes auroraB { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-140px, 40px) scale(0.92); } }

.hero-badge {
  position: relative;
  background: rgba(10, 16, 30, 0.75);
  color: #cfe6ff;
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.15);
}
.hero-badge::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg), rgba(34, 211, 238, 0.9), rgba(79, 141, 255, 0.2), rgba(167, 139, 250, 0.9), rgba(79, 141, 255, 0.2), rgba(34, 211, 238, 0.9));
  animation: spinBorder 6s linear infinite;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --angle: 360deg; } }

.hero h1 { color: #fff; letter-spacing: -0.035em; text-shadow: 0 2px 40px rgba(79, 141, 255, 0.18); }
.hero h1 .accent {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(79, 141, 255, 0.35));
}
.hero p.sub { color: var(--grey); }

.hero-shield {
  position: relative;
  width: 168px; height: 168px; margin-top: 64px;
  filter: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: floatY 6s ease-in-out infinite;
}
.hero-shield::before {
  content: ""; position: absolute; inset: -46px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(34, 211, 238, 0.55), rgba(124, 92, 255, 0.35) 40%, transparent 70%);
  filter: blur(26px);
  animation: breathe 5s ease-in-out infinite;
}
.hero-shield img {
  border-radius: 36px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(34, 211, 238, 0.25);
}
.hero-shield.is-hover { transition: transform 0.12s ease-out; }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes breathe { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ── Buttons ────────────────────────────────────────────── */

.btn { position: relative; transition: transform 0.2s, box-shadow 0.25s, filter 0.25s, background 0.25s, border-color 0.25s; }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px rgba(79, 141, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.btn-primary:hover {
  background: var(--grad);
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 10px 30px rgba(79, 141, 255, 0.4), 0 0 28px rgba(34, 211, 238, 0.45), 0 0 60px rgba(167, 139, 250, 0.3);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #e6ecf7;
  border: 1px solid var(--border-strong);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(148, 197, 255, 0.55);
  box-shadow: 0 0 22px rgba(79, 141, 255, 0.28);
  transform: translateY(-2px);
}

/* ── Glow-Karten (Cursor-Spotlight + leuchtender Rand) ──── */

.feature-card,
.step-card,
.dsgvo-card,
.faq-item,
.stats,
.showcase-caption,
.plan {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
}

.feature-card::before,
.step-card::before,
.dsgvo-card::before,
.faq-item::before,
.showcase-caption::before,
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(56, 189, 248, 0.22)), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
}
.feature-card::after,
.step-card::after,
.dsgvo-card::after,
.faq-item::after,
.showcase-caption::after,
.plan::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--edge, rgba(125, 211, 252, 0.95)), var(--edge-2, rgba(167, 139, 250, 0.5)) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
}
.feature-card:hover, .step-card:hover, .dsgvo-card:hover, .faq-item:hover, .showcase-caption:hover, .plan:hover {
  transform: translateY(-4px);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 34px rgba(56, 189, 248, 0.25), 0 0 90px rgba(167, 139, 250, 0.16);
}
.feature-card:hover::before, .step-card:hover::before, .dsgvo-card:hover::before, .faq-item:hover::before, .showcase-caption:hover::before, .plan:hover::before,
.feature-card:hover::after, .step-card:hover::after, .dsgvo-card:hover::after, .faq-item:hover::after, .showcase-caption:hover::after, .plan:hover::after {
  opacity: 1;
}

.feature-card h3, .step-card h3, .dsgvo-card h3 { color: #fff; }
.feature-card p, .step-card p, .dsgvo-card p { color: var(--grey); }

/* Icon-Kacheln */
.feature-icon {
  width: 50px; height: 50px; border-radius: 15px;
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.16), rgba(124, 92, 255, 0.16));
  border: 1px solid rgba(148, 197, 255, 0.22);
  color: #9fdcff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: box-shadow 0.35s, color 0.35s, transform 0.35s;
}
.feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card:hover .feature-icon,
.dsgvo-card:hover .feature-icon {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55), 0 0 44px rgba(167, 139, 250, 0.3);
}
.dsgvo-card .feature-icon { background: linear-gradient(140deg, rgba(52, 211, 153, 0.14), rgba(34, 211, 238, 0.14)); border-color: rgba(110, 231, 183, 0.22); color: #8ff0c8; }

/* ── Stats ──────────────────────────────────────────────── */

.stats {
  background: linear-gradient(180deg, rgba(14, 20, 36, 0.9), rgba(10, 14, 26, 0.9));
  backdrop-filter: blur(16px);
  border-color: rgba(148, 197, 255, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(79, 141, 255, 0.1);
}
.stats:hover { transform: none; }
.stat .num {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { color: var(--grey); }

/* ── Sektionen ──────────────────────────────────────────── */

section { position: relative; }
section + section::before,
.dsgvo::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(880px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 255, 0.28), transparent);
}

.eyebrow {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
  letter-spacing: 0.16em;
}
.section-head h2 { color: #fff; letter-spacing: -0.03em; }
.section-head p { color: var(--grey); }

/* App-Vorschau und Schritte gehen nahtlos in den dunklen Hintergrund über */
.app-preview { background: transparent; }
.app-preview .eyebrow { color: var(--cyan); }
.showcase-caption { background: var(--surface); border-color: var(--border); }
.phone-mock { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(56, 189, 248, 0.12); }

.steps { background: transparent; }
.step-num {
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 24px rgba(79, 141, 255, 0.4);
  transition: box-shadow 0.35s;
}
.step-card:hover .step-num { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 0 22px rgba(56, 189, 248, 0.7), 0 0 44px rgba(167, 139, 250, 0.4); }

.dsgvo { background: transparent; border: none; }

/* ── Preise ─────────────────────────────────────────────── */

.plan {
  background: linear-gradient(170deg, rgba(79, 141, 255, 0.12) 0%, rgba(255, 255, 255, 0.025) 55%);
  border: 1px solid rgba(110, 170, 255, 0.32);
  --spot: rgba(79, 141, 255, 0.16);
}
.plan .plan-name { color: var(--grey); }
.plan .plan-title, .plan .plan-price .amount { color: #fff; }
.plan .plan-price .per { color: var(--grey); }
.plan li { color: #c6d0e0; }
.plan li .check { color: var(--mint); text-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
.plan li .cross { color: var(--grey-dim); }
.plan-permonth {
  background: rgba(79, 141, 255, 0.14);
  color: #b9d4ff;
  border: 1px solid rgba(110, 170, 255, 0.3);
}

.plan.pro {
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(160deg, #2f6fe0 0%, #4f8dff 55%, #6aa6ff 100%);
  border: 1px solid rgba(190, 220, 255, 0.45);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(79, 141, 255, 0.4), 0 0 110px rgba(79, 141, 255, 0.18);
  --spot: rgba(255, 255, 255, 0.22);
  --edge: rgba(255, 255, 255, 0.95);
  --edge-2: rgba(186, 230, 253, 0.6);
}
.plan.pro:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 70px rgba(79, 141, 255, 0.6), 0 0 140px rgba(56, 189, 248, 0.28); }
.plan.pro .plan-title, .plan.pro .plan-price .amount { color: #fff; }
.plan.pro li, .plan-ultra li { color: rgba(255, 255, 255, 0.94); }
.plan.pro li .check, .plan-ultra li .check { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
.plan.pro .plan-permonth, .plan-ultra .plan-permonth { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.plan.pro .plan-price .per, .plan-ultra .plan-price .per { color: rgba(255, 255, 255, 0.8); }
.plan.pro .plan-name, .plan-ultra .plan-name { color: rgba(255, 255, 255, 0.78); }

.plan-ultra {
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(160deg, #5b4fc4 0%, #8b7fd4 55%, #b3a6f5 100%);
  border: 1px solid rgba(221, 214, 254, 0.45);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(167, 139, 250, 0.38), 0 0 110px rgba(167, 139, 250, 0.16);
  --spot: rgba(255, 255, 255, 0.22);
  --edge: rgba(255, 255, 255, 0.95);
  --edge-2: rgba(221, 214, 254, 0.6);
}
.plan-ultra:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 70px rgba(167, 139, 250, 0.6), 0 0 140px rgba(167, 139, 250, 0.26); }

.plan.pro .btn-primary, .plan-ultra .btn-primary { background: #fff; filter: none; }
.plan.pro .btn-primary { color: #2f6fe0; }
.plan-ultra .btn-primary { color: #5b4fc4; }
.plan.pro .btn-primary:hover, .plan-ultra .btn-primary:hover { background: #fff; box-shadow: 0 0 26px rgba(255, 255, 255, 0.55), 0 10px 30px rgba(0, 0, 0, 0.25); }
.plan .btn-ghost { border-color: rgba(110, 170, 255, 0.4); }
.founders-badge { box-shadow: 0 0 20px rgba(52, 211, 153, 0.55); }
.plan-flag { box-shadow: 0 0 18px rgba(52, 211, 153, 0.5); z-index: 2; }
.plans-note { color: var(--grey); }

/* ── FAQ ────────────────────────────────────────────────── */

.faq-item { background: var(--surface); }
.faq-item:hover { transform: none; }
.faq-item[open] { border-color: rgba(148, 197, 255, 0.35); box-shadow: 0 0 30px rgba(56, 189, 248, 0.1), var(--shadow); }
.faq-item summary { color: #fff; }
.faq-item summary::after { color: var(--cyan); text-shadow: 0 0 12px rgba(34, 211, 238, 0.6); }
.faq-item .answer { color: var(--grey); }
.faq-item .answer strong { color: #fff; }

/* ── CTA ────────────────────────────────────────────────── */

.cta {
  background: transparent;
  border-top: none;
  overflow: hidden;
  isolation: isolate;
}
.cta::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 760px; height: 380px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(79, 141, 255, 0.28), rgba(167, 139, 250, 0.14) 55%, transparent);
  filter: blur(20px);
}
.cta h2 {
  background: linear-gradient(180deg, #ffffff 30%, #a9c6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta p { color: var(--grey); }

/* ── Footer ─────────────────────────────────────────────── */

footer { background: rgba(3, 5, 10, 0.85); border-top: 1px solid rgba(148, 163, 184, 0.1); }
.footer-brand { color: #fff; }
.footer-links a { color: var(--grey); transition: color 0.2s, text-shadow 0.2s; }
.footer-links a:hover { color: #fff; text-shadow: 0 0 12px rgba(125, 211, 252, 0.7); }
.footer-copy { color: var(--grey-dim); }

/* ── Rechtstexte (AGB / Datenschutz / Impressum) ────────── */

.legal-page { padding-left: 24px; padding-right: 24px; }
.legal-page h1, .legal-page h2 { color: #fff; }
.legal-meta { color: var(--grey); }
.legal-page p, .legal-page li { color: #b4bfd0; }
.legal-page strong { color: #fff; }
.legal-card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.back-link { color: var(--sky); }
.legal-lang-note { background: rgba(79, 141, 255, 0.12); border-color: rgba(110, 170, 255, 0.3); color: #b9d4ff; }

/* ── Helles Design (Umschalter in der Navigation) ───────── */

html[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-soft: #eef2f9;
  --bg-card: #ffffff;
  --ink: #0b1220;
  --grey: #556074;
  --grey-dim: #8a94a6;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --surface: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 100%);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
  color-scheme: light;
}
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}
html[data-theme="light"] body::after {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(79, 141, 255, 0.14), transparent 60%),
    radial-gradient(700px 500px at -5% 25%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--bg);
}
:where(html[data-theme="light"]) a { color: #2563eb; }
html[data-theme="light"] ::selection { background: rgba(79, 141, 255, 0.25); color: var(--ink); }

html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .nav-brand { color: var(--ink); }
html[data-theme="light"] .nav-brand img { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 4px 14px rgba(34, 211, 238, 0.35); }
html[data-theme="light"] .nav-links a:not(.nav-cta) { color: var(--grey); }
html[data-theme="light"] .nav-links a:not(.nav-cta)::before {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.18));
  border-color: rgba(79, 141, 255, 0.35);
}
html[data-theme="light"] .nav-links a:not(.nav-cta):hover,
html[data-theme="light"] .nav-links a:not(.nav-cta):focus-visible { color: var(--ink); text-shadow: none; }
html[data-theme="light"] .lang-switch { background: rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .lang-switch button:not(.is-active):hover { color: var(--ink); }
html[data-theme="light"] .theme-toggle { background: rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  color: var(--ink); border-color: rgba(79, 141, 255, 0.45);
  box-shadow: 0 0 16px rgba(79, 141, 255, 0.28), 0 0 32px rgba(167, 139, 250, 0.18);
}
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

html[data-theme="light"] .hero::before { background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 65%); }
html[data-theme="light"] .hero::after { background: radial-gradient(circle, rgba(124, 92, 255, 0.26), transparent 65%); }
html[data-theme="light"] .hero-badge { background: rgba(255, 255, 255, 0.92); color: #1e40af; box-shadow: 0 6px 20px rgba(79, 141, 255, 0.15); }
html[data-theme="light"] .hero h1 { color: var(--ink); text-shadow: none; }
html[data-theme="light"] .hero h1 .accent { filter: drop-shadow(0 0 18px rgba(79, 141, 255, 0.22)); }
html[data-theme="light"] .hero-shield::before {
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(34, 211, 238, 0.38), rgba(124, 92, 255, 0.24) 40%, transparent 70%);
}
html[data-theme="light"] .hero-shield img { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 50px rgba(34, 211, 238, 0.25); }

html[data-theme="light"] .btn-primary { box-shadow: 0 10px 26px rgba(79, 141, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
html[data-theme="light"] .btn-ghost { background: rgba(255, 255, 255, 0.85); color: var(--ink); border-color: rgba(15, 23, 42, 0.12); }
html[data-theme="light"] .btn-ghost:hover { background: #fff; border-color: rgba(79, 141, 255, 0.5); box-shadow: 0 0 22px rgba(79, 141, 255, 0.22); }

html[data-theme="light"] .feature-card, html[data-theme="light"] .step-card, html[data-theme="light"] .dsgvo-card,
html[data-theme="light"] .faq-item, html[data-theme="light"] .showcase-caption,
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) {
  --spot: rgba(56, 189, 248, 0.13);
  --edge: rgba(59, 130, 246, 0.85);
  --edge-2: rgba(167, 139, 250, 0.55);
}
html[data-theme="light"] .feature-card:hover, html[data-theme="light"] .step-card:hover, html[data-theme="light"] .dsgvo-card:hover,
html[data-theme="light"] .showcase-caption:hover, html[data-theme="light"] .plan:hover {
  border-color: rgba(79, 141, 255, 0.45);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1), 0 0 30px rgba(56, 189, 248, 0.2), 0 0 70px rgba(167, 139, 250, 0.14);
}
html[data-theme="light"] .feature-card h3, html[data-theme="light"] .step-card h3, html[data-theme="light"] .dsgvo-card h3 { color: var(--ink); }
html[data-theme="light"] .feature-icon {
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.12), rgba(124, 92, 255, 0.12));
  border-color: rgba(79, 141, 255, 0.22); color: #2563eb;
}
html[data-theme="light"] .dsgvo-card .feature-icon {
  background: linear-gradient(140deg, rgba(52, 211, 153, 0.14), rgba(34, 211, 238, 0.12));
  border-color: rgba(16, 185, 129, 0.25); color: #059669;
}
html[data-theme="light"] .feature-card:hover .feature-icon,
html[data-theme="light"] .dsgvo-card:hover .feature-icon {
  color: #fff; background: var(--grad); border-color: transparent;
  box-shadow: 0 8px 22px rgba(79, 141, 255, 0.4), 0 0 30px rgba(167, 139, 250, 0.25);
}

html[data-theme="light"] .stats {
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.9));
  border-color: rgba(79, 141, 255, 0.18);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), 0 0 50px rgba(79, 141, 255, 0.1);
}
html[data-theme="light"] section + section::before,
html[data-theme="light"] .dsgvo::before { background: linear-gradient(90deg, transparent, rgba(79, 141, 255, 0.25), transparent); }
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .app-preview .eyebrow { color: #0891b2; text-shadow: none; }
html[data-theme="light"] .section-head h2 { color: var(--ink); }
html[data-theme="light"] .phone-mock { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) inset, 0 30px 60px rgba(15, 23, 42, 0.18), 0 0 40px rgba(56, 189, 248, 0.14); }

html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) {
  background: linear-gradient(165deg, #dbeafe 0%, #f0f6ff 100%);
  border-color: rgba(79, 141, 255, 0.35);
}
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) .plan-title,
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) .plan-price .amount { color: var(--ink); }
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) li { color: #334155; }
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) li .check { color: #059669; text-shadow: none; }
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) .plan-permonth { background: #fff; color: #1d4ed8; border-color: rgba(79, 141, 255, 0.25); }
html[data-theme="light"] .plan:not(.pro):not(.plan-ultra) .btn-ghost { background: #fff; }
html[data-theme="light"] .plan.pro { box-shadow: 0 24px 50px rgba(47, 111, 224, 0.28), 0 0 50px rgba(79, 141, 255, 0.3); }
html[data-theme="light"] .plan.pro:hover { box-shadow: 0 28px 60px rgba(47, 111, 224, 0.34), 0 0 70px rgba(79, 141, 255, 0.45); }
html[data-theme="light"] .plan-ultra { box-shadow: 0 24px 50px rgba(91, 79, 196, 0.28), 0 0 50px rgba(167, 139, 250, 0.3); }
html[data-theme="light"] .plan-ultra:hover { box-shadow: 0 28px 60px rgba(91, 79, 196, 0.34), 0 0 70px rgba(167, 139, 250, 0.45); }

html[data-theme="light"] .faq-item[open] { border-color: rgba(79, 141, 255, 0.35); }
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .faq-item .answer strong { color: var(--ink); }
html[data-theme="light"] .faq-item summary::after { color: #0891b2; text-shadow: none; }

html[data-theme="light"] .cta::after { background: radial-gradient(closest-side, rgba(79, 141, 255, 0.18), rgba(167, 139, 250, 0.1) 55%, transparent); }
html[data-theme="light"] .cta h2 { background: linear-gradient(180deg, #0b1220 30%, #3b5bdb); -webkit-background-clip: text; background-clip: text; }

html[data-theme="light"] footer { background: rgba(255, 255, 255, 0.7); border-top-color: rgba(15, 23, 42, 0.07); }
html[data-theme="light"] .footer-brand { color: var(--ink); }
html[data-theme="light"] .footer-links a:hover { color: var(--ink); text-shadow: 0 0 12px rgba(79, 141, 255, 0.35); }

html[data-theme="light"] .legal-page h1,
html[data-theme="light"] .legal-page h2,
html[data-theme="light"] .legal-page strong { color: var(--ink); }
html[data-theme="light"] .legal-page p,
html[data-theme="light"] .legal-page li { color: #334155; }
html[data-theme="light"] .back-link { color: #2563eb; }
html[data-theme="light"] .legal-lang-note { background: rgba(79, 141, 255, 0.08); border-color: rgba(79, 141, 255, 0.25); color: #1e40af; }

/* ── Einblenden beim Scrollen ───────────────────────────── */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .hero { padding: 84px 0 88px; }
  .hero::before, .hero::after { filter: blur(50px); opacity: 0.45; }
  .hero-shield { width: 132px; height: 132px; }
}

@media (max-width: 520px) {
  .nav-inner { gap: 12px; }
  .nav-brand { white-space: nowrap; font-size: 15px; gap: 8px; }
  .nav-links .nav-cta { display: none; }
  .lang-switch button { padding: 6px 8px; }
  .theme-toggle { width: 32px; height: 32px; margin-left: -20px; }
}

@media (max-width: 374px) {
  .nav-brand { font-size: 13.5px; }
  .nav-brand img { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero-shield, .hero-shield::before, .hero-badge::before,
  .nav-links a:not(.nav-cta):hover::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}