/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Farben */
  --c-primary: #0099db;
  --c-primary-dark: #0077ad;
  --c-primary-tint: #E5F5FC;
  --c-ink: #0B1220;
  --c-ink-soft: #16202B;
  --c-paper: #F6F8FA;
  --c-paper-alt: #ECEFF3;
  --c-white: #FFFFFF;
  --c-green: #22C55E;
  --c-amber: #F5A524;
  --c-danger: #EF4444;
  --c-border: #E2E8F0;
  --c-border-dark: #263241;
  --c-text-soft: #4B5A6A;

  /* Typografie */
  --f-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-h1: clamp(2.1rem, 4.2vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.6rem, 2.4vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  --fs-body: clamp(1rem, 0.3vw + 0.9rem, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Abstand */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(11,18,32,0.06), 0 1px 1px rgba(11,18,32,0.04);
  --shadow-md: 0 8px 24px rgba(11,18,32,0.08);
  --shadow-lg: 0 20px 48px rgba(11,18,32,0.14);
  --ease: cubic-bezier(.22,.9,.35,1);
}

@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:400 700; font-display:swap;
}
/* Hinweis: obige @font-face-Dateien lokal unter /assets/fonts/ ablegen
   (z.B. via google-webfonts-helper). Kein Aufruf an fonts.googleapis.com – DSGVO. */

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--f-display); line-height:1.12; letter-spacing:-0.01em; }
h1{ font-size:var(--fs-h1); font-weight:700; }
h2{ font-size:var(--fs-h2); font-weight:600; }
h3{ font-size:var(--fs-h3); font-weight:600; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--c-primary); outline-offset:3px; border-radius:4px; }

.container{ max-width:1200px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:640px){ .container{ padding-inline:2rem; } }

.section{ padding-block:var(--space-xl); }
.section--tight{ padding-block:var(--space-lg); }
.section--dark{ background:var(--c-ink); color:var(--c-paper); }
.section--dark h2, .section--dark h3{ color:var(--c-white); }
.section--tint{ background:var(--c-paper-alt); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--c-primary-dark);
  margin-bottom:var(--space-sm);
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c-primary); box-shadow:0 0 0 4px var(--c-primary-tint); }
.section--dark .eyebrow{ color:#7FD4F5; }
.section--dark .eyebrow::before{ box-shadow:0 0 0 4px rgba(0,153,219,.25); }

.lede{ font-size:1.125rem; color:var(--c-text-soft); max-width:60ch; }
.section--dark .lede{ color:#B7C3D0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--c-primary-dark); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn--ghost{ background:transparent; border-color:var(--c-border-dark); color:var(--c-ink); }
.btn--ghost:hover{ border-color:var(--c-primary); color:var(--c-primary-dark); }
.section--dark .btn--ghost{ border-color:#33465A; color:#fff; }
.btn--on-dark{ background:#fff; color:var(--c-ink); }
.btn--on-dark:hover{ background:var(--c-primary-tint); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.875rem; }
.btn--block{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,250,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:700; font-size:1.15rem; }
.brand-mark{ width:34px; height:34px; border-radius:9px; background:var(--c-primary); display:grid; place-items:center; color:#fff; font-family:var(--f-mono); font-weight:700; }

.nav-desktop{ display:none; }
@media (min-width:960px){
  .nav-desktop{ display:flex; align-items:center; gap:2rem; }
  .nav-desktop a{ font-size:.925rem; font-weight:500; color:var(--c-text-soft); position:relative; }
  .nav-desktop a:hover{ color:var(--c-ink); }
  .nav-desktop a.is-active{ color:var(--c-primary-dark); }
}
.header-right{ display:flex; align-items:center; gap:1rem; }
.trust-badge{ display:none; }
@media (min-width:1180px){
  .trust-badge{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--c-text-soft); font-weight:600; }
}
.nav-toggle{ background:none; border:1px solid var(--c-border); border-radius:8px; width:42px; height:42px; display:grid; place-items:center; }
@media (min-width:960px){ .nav-toggle{ display:none; } }
.header-cta{ display:none; }
@media (min-width:960px){ .header-cta{ display:inline-flex; } }

.mobile-menu{
  position:fixed; inset:72px 0 0 0; background:var(--c-paper); z-index:49;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .22s var(--ease);
  overflow-y:auto; padding:var(--space-lg) 1.25rem;
}
.mobile-menu.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ display:block; padding:1rem 0; font-size:1.15rem; font-weight:600; border-bottom:1px solid var(--c-border); }
@media (min-width:960px){ .mobile-menu{ display:none; } }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{ font-size:.85rem; color:var(--c-text-soft); display:flex; gap:.4rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--c-primary-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:var(--space-lg) var(--space-xl); }
.hero-grid{ display:grid; gap:var(--space-lg); align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-xl); } }
.hero h1{ margin-block:var(--space-sm); }
.hero-usps{ display:flex; flex-direction:column; gap:.7rem; margin-block:var(--space-md); }
.usp-item{ display:flex; align-items:center; gap:.65rem; font-weight:600; font-size:.975rem; }
.usp-icon{ width:28px; height:28px; border-radius:8px; background:var(--c-primary-tint); color:var(--c-primary-dark); display:grid; place-items:center; flex:none; font-size:.9rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--space-md); }
.hero-trust{ margin-top:var(--space-lg); display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; }
.trust-pill{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--c-text-soft); }
.trust-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-green); }

/* ---- Signature element: Speed Simulator ---- */
.speed-card{
  background:var(--c-ink); color:#fff; border-radius:20px; padding:1.75rem;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.speed-card::before{
  content:""; position:absolute; inset:-40% -40% auto auto; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,153,219,.35), transparent 70%);
}
.speed-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; position:relative; }
.speed-card-head span{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#8FB4C9; }
.speed-dots{ display:flex; gap:5px; }
.speed-dots i{ width:9px; height:9px; border-radius:50%; background:#33465A; display:block; }
.speed-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid #1F2C3A; position:relative; }
.speed-row:last-of-type{ border-bottom:none; }
.speed-label{ display:flex; flex-direction:column; gap:.15rem; }
.speed-label b{ font-size:.95rem; }
.speed-label small{ color:#7C8FA3; font-size:.75rem; }
.speed-bar-track{ flex:1; height:8px; background:#1B2734; border-radius:99px; overflow:hidden; margin-inline:1rem; }
.speed-bar-fill{ height:100%; border-radius:99px; width:0%; transition:width 1.4s var(--ease); }
.speed-bar-fill.is-slow{ background:linear-gradient(90deg,#F5A524,#EF4444); }
.speed-bar-fill.is-fast{ background:linear-gradient(90deg,#0099db,#22C55E); }
.speed-value{ font-family:var(--f-mono); font-weight:700; font-size:1rem; min-width:52px; text-align:right; }
.speed-note{ margin-top:1.1rem; font-size:.8rem; color:#8FB4C9; position:relative; }
.speed-cta{ margin-top:1.25rem; position:relative; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.grid{ display:grid; gap:1.5rem; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid--2{ grid-template-columns:1fr 1fr; } .grid--4{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:1.75rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.card-icon{ width:44px; height:44px; border-radius:12px; background:var(--c-primary-tint); color:var(--c-primary-dark); display:grid; place-items:center; margin-bottom:1rem; font-size:1.2rem; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--c-text-soft); font-size:.95rem; margin-bottom:1rem; }
.card-link{ font-weight:600; font-size:.9rem; color:var(--c-primary-dark); display:inline-flex; align-items:center; gap:.3rem; }
.card-link:hover{ gap:.5rem; }

.price-tag{ font-family:var(--f-mono); font-size:.8rem; color:var(--c-text-soft); background:var(--c-paper-alt); display:inline-block; padding:.3rem .6rem; border-radius:6px; margin-bottom:.75rem; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps{ display:grid; gap:1.5rem; counter-reset:step; }
@media (min-width:840px){ .steps{ grid-template-columns:repeat(3,1fr); position:relative; } 
  .steps::before{ content:""; position:absolute; top:28px; left:8%; right:8%; height:1px; background:var(--c-border-dark); opacity:.5; }
}
.step{ position:relative; counter-increment:step; }
.step-num{ font-family:var(--f-mono); font-weight:700; font-size:1.1rem; width:56px; height:56px; border-radius:50%; background:var(--c-ink); color:#fff; display:grid; place-items:center; margin-bottom:1.1rem; position:relative; z-index:1; }
.section--dark .step-num{ background:var(--c-primary); }
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--c-text-soft); font-size:.95rem; }
.section--dark .step p{ color:#9FB0C2; }

/* ============================================================
   STATS
   ============================================================ */
.stats-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:700px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }
.stat{ text-align:center; padding:2rem 1rem; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid #1F2C3A; }
.stat b{ font-family:var(--f-mono); font-size:clamp(2rem,4vw,2.75rem); display:block; color:#fff; }
.stat span{ color:#8FB4C9; font-size:.85rem; }

.testimonial-track{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:840px){ .testimonial-track{ grid-template-columns:repeat(2,1fr); } }
.testimonial{ background:rgba(255,255,255,.04); border:1px solid #1F2C3A; border-radius:var(--radius); padding:1.75rem; }
.testimonial .stars{ color:var(--c-amber); letter-spacing:.15em; margin-bottom:.75rem; font-size:.9rem; }
.testimonial p{ color:#D7E2EC; margin-bottom:1rem; }
.testimonial footer{ font-size:.85rem; color:#8FB4C9; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--shadow-md); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.field input, .field textarea{
  width:100%; padding:.8rem .95rem; border-radius:var(--radius-sm); border:1.5px solid var(--c-border);
  font-family:inherit; font-size:.95rem; background:var(--c-paper); transition:border-color .15s;
}
.field input:focus, .field textarea:focus{ border-color:var(--c-primary); outline:none; background:#fff; }
.field.is-valid input{ border-color:var(--c-green); }
.field-hint{ font-size:.75rem; color:var(--c-text-soft); margin-top:.3rem; }
.field-more{ background:none; border:none; color:var(--c-primary-dark); font-weight:600; font-size:.85rem; cursor:pointer; margin-bottom:1.1rem; }
.field-extra{ display:none; }
.field-extra.is-open{ display:block; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; color:var(--c-text-soft); margin-block:1.1rem; }
.consent input{ margin-top:.2rem; }
.form-note{ font-size:.8rem; color:var(--c-text-soft); text-align:center; margin-top:1rem; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item{ border-bottom:1px solid var(--c-border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:1.35rem 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:600; font-size:1.02rem; color:var(--c-ink);
}
.faq-q .plus{ font-family:var(--f-mono); font-size:1.3rem; color:var(--c-primary); transition:transform .2s var(--ease); flex:none; }
.faq-item.is-open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq-a p{ color:var(--c-text-soft); padding-bottom:1.35rem; max-width:65ch; }

/* ============================================================
   CODE TOGGLE (Vorher/Nachher)
   ============================================================ */
.code-toggle{ background:var(--c-ink); border-radius:var(--radius); overflow:hidden; border:1px solid #1F2C3A; }
.code-toggle-tabs{ display:flex; }
.code-toggle-tabs button{
  flex:1; padding:1rem; background:#0F1824; color:#7C8FA3; border:none; font-weight:600; font-size:.9rem; cursor:pointer; font-family:var(--f-mono);
  border-bottom:2px solid transparent;
}
.code-toggle-tabs button.is-active{ color:#fff; background:var(--c-ink); border-color:var(--c-primary); }
.code-toggle-body{ padding:1.5rem; font-family:var(--f-mono); font-size:.82rem; color:#B7C3D0; display:none; }
.code-toggle-body.is-active{ display:block; }
.code-toggle-body .line{ padding:.15rem 0; }
.code-toggle-body .bad{ color:#F87171; }
.code-toggle-body .good{ color:#4ADE80; }
.code-score{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.code-score b{ font-size:2rem; }
.code-score.score-bad b{ color:#F87171; }
.code-score.score-good b{ color:#4ADE80; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare-table th, .compare-table td{ padding:1rem 1.25rem; text-align:left; border-bottom:1px solid var(--c-border); font-size:.9rem; }
.compare-table th{ background:var(--c-paper-alt); font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.compare-table tr:last-child td{ border-bottom:none; }
.table-scroll{ overflow-x:auto; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.price-card{ background:#fff; border:1.5px solid var(--c-border); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; }
.price-card.is-popular{ border-color:var(--c-primary); box-shadow:var(--shadow-lg); position:relative; }
.popular-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--c-amber); color:var(--c-ink); font-size:.7rem; font-weight:700; padding:.3rem .8rem; border-radius:99px; letter-spacing:.03em; }
.price-card h3{ margin-bottom:.4rem; }
.price-card .price{ font-family:var(--f-mono); font-size:2.1rem; font-weight:700; margin-block:.5rem 1rem; }
.price-card .price span{ font-size:.9rem; font-weight:500; color:var(--c-text-soft); }
.price-list{ display:flex; flex-direction:column; gap:.65rem; margin-block:1.25rem; flex:1; }
.price-list li{ display:flex; gap:.6rem; font-size:.9rem; align-items:flex-start; }
.price-list li::before{ content:"✓"; color:var(--c-green); font-weight:700; flex:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--c-ink); color:#B7C3D0; padding-block:var(--space-xl) var(--space-lg); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-bottom:var(--space-lg); }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.footer-grid h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; font-family:var(--f-mono); }
.footer-grid ul{ display:flex; flex-direction:column; gap:.65rem; font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ margin-top:.75rem; color:#8FB4C9; font-size:.9rem; max-width:32ch; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-social a{ width:36px; height:36px; border-radius:8px; background:#16202B; display:grid; place-items:center; }
.footer-bottom{ border-top:1px solid #1F2C3A; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color:#7C8FA3; }
.footer-bottom .legal-links{ display:flex; gap:1.25rem; flex-wrap:wrap; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--c-border);
  box-shadow:0 -6px 24px rgba(11,18,32,.1);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta a{ flex:1; }
@media (min-width:960px){ .sticky-cta{ display:none; } }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal h2{ margin-top:2.5rem; margin-bottom:.75rem; font-size:1.25rem; }
.legal p, .legal li{ color:var(--c-text-soft); margin-bottom:.75rem; }
.legal ul{ list-style:disc; padding-left:1.4rem; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-lg{ margin-top:var(--space-lg); }
.mb-lg{ margin-bottom:var(--space-lg); }
.max-w-content{ max-width:70ch; }
.badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.badge{ display:inline-flex; align-items:center; gap:.4rem; background:var(--c-paper-alt); padding:.4rem .8rem; border-radius:99px; font-size:.78rem; font-weight:600; color:var(--c-text-soft); }
.section-head{ max-width:62ch; margin-bottom:var(--space-lg); }
.section-head.text-center{ margin-inline:auto; }
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:translateY(0); }