/* ===================================================================
   MP Landing – Premium Polish
   Layer über den Inline-Styles der landing.html.
   Ziel: Typographie, Tokens, Radien, Shadows und Oberflächen auf
   Premium-Level heben, ohne die HTML-Struktur anzufassen.
   Branding bleibt: --blue #2bb0ff, --orange #ff8a3d.
   =================================================================== */

/* ─── Typography: einheitlich Inter mit OpenType-Feature-Settings ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── Token-Refinement ─── */
:root {
  --blue: #2bb0ff;
  --blue-dark: #0a7cbe;
  --blue-soft: #eaf6ff;
  --orange: #ff8a3d;
  --orange-soft: #fff1e6;

  /* Identisch zum App/Login-BG (mp-app-premium.css) */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-muted: #f6f5f1;

  /* Tiefere, wärmere Ink-Farben */
  --text: #0b0f19;
  --text-soft: #29303d;
  --muted: #64707e;
  --border: rgba(11, 15, 25, 0.08);
  --border-strong: rgba(11, 15, 25, 0.14);

  /* Radii-System: konsistent, nicht alles 20px */
  --radius-xs: 6px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Premium-Shadows: subtil, gestaffelt */
  --shadow-xs: 0 1px 2px rgba(11, 15, 25, 0.04);
  --shadow: 0 1px 2px rgba(11, 15, 25, 0.04), 0 6px 20px rgba(11, 15, 25, 0.06);
  --shadow-lg: 0 2px 4px rgba(11, 15, 25, 0.05), 0 16px 48px rgba(11, 15, 25, 0.10);
  --shadow-ring: 0 0 0 1px var(--border);
}

/* ─── Body & Grundtypo ─── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01', 'cv11', 'cv02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.005em;
}

/* Ambient-Gradient: identisch zu Login/App/Load-Screen */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(255,138,61,0.14), transparent 60%),
    radial-gradient(700px 500px at 10% 20%, rgba(43,176,255,0.16), transparent 60%) !important;
  opacity: 1 !important;
}

/* ─── Headlines: konsistent Inter, feinere Letter-Spacing ─── */
h1, h2, h3, h4 {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--text);
}
h1 {
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px) !important;
  letter-spacing: -0.028em !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 40px) !important;
  letter-spacing: -0.022em !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}
h3 {
  font-weight: 600;
  font-size: 17px !important;
  letter-spacing: -0.012em !important;
  line-height: 1.35 !important;
}
h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Sec-head: Sub-Absätze ruhiger setzen */
.sec-head p {
  color: var(--muted);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Hero-Lead: Klassische Editorial-Lesegröße */
.hero-lead {
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--text-soft) !important;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Hl-Akzent: kein schreiendes Gradient-Text, nur Farbe */
.hl, .hl2 {
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
.hl { color: var(--blue); }
.hl2 { color: var(--orange); }

/* ─── Buttons: pill, ruhig, keine Neon-Shadows ─── */
.btn {
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 14px 24px !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease !important;
  box-shadow: none !important;
}
.btn.btn-primary {
  background: var(--text) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(11,15,25,.15), 0 6px 18px rgba(11,15,25,.12) !important;
}
.btn.btn-primary:hover {
  background: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(11,15,25,.18), 0 10px 28px rgba(11,15,25,.18) !important;
}
.btn.btn-ghost, .btn.btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn.btn-ghost:hover {
  border-color: var(--text) !important;
  transform: translateY(-1px) !important;
}

/* CTA im Header (die „14 Tage gratis testen"-Kapsel) soll in der Brand-Farbe bleiben */
/* Fix: overflow-x: hidden auf body killt sticky in manchen Engines */
html { overflow-x: clip !important; }
body { overflow-x: clip !important; }

/* ─── Sticky Header (oben kleben, auch bei Scroll) ─── */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  margin-bottom: 50px !important;
  background: transparent !important;
}
header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(246,248,251,0.92) 0%, rgba(246,248,251,0.70) 70%, rgba(246,248,251,0) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
header > * { position: relative !important; z-index: 1 !important; }

header .btn.btn-primary, .nav .btn.btn-primary, .hero-actions .btn.btn-primary {
  background: var(--blue) !important;
  box-shadow: 0 1px 2px rgba(43,176,255,.25), 0 6px 20px rgba(43,176,255,.25) !important;
}
header .btn.btn-primary:hover, .nav .btn.btn-primary:hover, .hero-actions .btn.btn-primary:hover {
  background: var(--blue-dark) !important;
}

/* ─── Feature-Cards: hairline border, minimal shadow ─── */
.feat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.feat-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px) !important;
}
.feat-card.featured {
  border-color: var(--border-strong) !important;
}
.feat-card .feat-icon {
  background: var(--surface-muted) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}

/* Badges: ruhiger, kleiner, tabular */
.feat-badge, .badge, .hero-pill {
  background: var(--surface-muted) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.hero-pill .dot { background: var(--blue) !important; }

/* ─── Hero Visual: Video-Frame premium ─── */
.hero-video-wrap {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}

/* ─── Proof-Line ─── */
.proof-line-wrap p { color: var(--text-soft); font-size: 17px; }
.proof-line-wrap p strong { color: var(--text); }

/* ─── Reviews / Who-Block / Steps ─── */
.rv-card, .who-block, .trade-tag, .step {
  background: var(--surface) !important;
}
.trade-tag {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  background: var(--surface-muted) !important;
}
.who-block {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}
.who-note {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
}

/* Steps (wir haben Kreise schon entfernt, hier den Textblock polieren) */
.step h3 { font-size: 17px !important; font-weight: 600 !important; }
.step p { color: var(--muted); line-height: 1.55; }

/* ─── Pricing ─── */
.pricing-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── FAQ ─── */
.faq-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color .2s ease !important;
}
.faq-item:hover { border-color: var(--border-strong) !important; box-shadow: none !important; }
.faq-item.active { border-color: var(--text) !important; }
.faq-q { font-weight: 600 !important; color: var(--text) !important; }
.faq-a { color: var(--muted) !important; line-height: 1.6 !important; }

/* ─── Bottom-CTA ─── */
.cta-bottom {
  background:
    radial-gradient(900px 500px at 85% -20%, rgba(43,176,255,0.22), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(255,138,61,0.18), transparent 60%),
    linear-gradient(160deg, #0b1220 0%, #0d1930 55%, #0a1428 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px rgba(11,18,32,0.28),
    0 2px 8px rgba(11,18,32,0.15) !important;
  overflow: hidden !important;
}
/* Weißer Wash aus landing.html entfernen – der hat das Dunkel zu Grau gewaschen */
.cta-bottom::before {
  background: transparent !important;
  display: none !important;
}
.cta-bottom h2 {
  color: #fff !important;
  letter-spacing: -0.025em !important;
}
.cta-bottom p { color: rgba(255,255,255,0.78) !important; }
.cta-bottom .btn.btn-primary {
  background: linear-gradient(135deg, #2bb0ff, #0e8fd4) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 10px 24px rgba(43,176,255,0.35) !important;
}
.cta-bottom .btn.btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.cta-bottom .btn.btn-ghost:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.cta-bottom .trust-row span { color: rgba(255,255,255,0.58) !important; }

/* ─── Contact ─── */
.contact-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.mp-input, textarea.mp-input, input.mp-input {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.mp-input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(43,176,255,.15) !important;
  outline: none !important;
}

/* ─── Footer ─── */
footer, [class*="footer"] {
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* ─── Feinschliff: Links & Text-Wrap ─── */
p { text-wrap: pretty; }
em { color: var(--text-soft); font-style: italic; }

/* ─── Scroll-Bar minimal (WebKit) ─── */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Mobile: Typo-Scale etwas runterziehen ─── */
@media (max-width: 640px) {
  h1 { font-size: clamp(32px, 9vw, 44px) !important; }
  h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .hero-lead { font-size: 17px !important; }
}