/* SV-037: Stil der oeffentlichen Startseite (index.html, datenschutz.html).
   Bis SV-036 stand hier das dunkle Entwickler-Theme aus SV-001 mit Schriften
   von Google Fonts. Farben wie theme.css (Schwarz-Rot, SV-036 6g): Knoepfe
   graphit, Rot nur als Akzent. Schrift lokal, keine fremden Server. */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url(inter-latin-800-normal.woff2) format('woff2')}
:root{
  color-scheme:light;
  --lp-bg:#f4f5f7;--lp-surface:#fff;--lp-border:#e4e6ee;
  --lp-text:#161821;--lp-muted:#5e6378;--lp-brand:#d71920;--lp-dark:#161821;
  --lp-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--lp-bg);color:var(--lp-text);font-family:var(--lp-font);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

.lp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;padding:20px 24px}
.lp-logo img{height:34px;width:auto}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.lp-btn-dark{background:var(--lp-dark);color:#fff}
.lp-btn-dark:hover{background:#000}
.lp-btn-line{border:1px solid #cfd2dc;background:var(--lp-surface);color:var(--lp-text)}
.lp-btn-line:hover{border-color:var(--lp-dark)}
.lp-btn:focus-visible{outline:3px solid rgba(215,25,32,.35);outline-offset:2px}

main{max-width:1120px;margin:0 auto;padding:0 24px}
.lp-hero{padding:56px 0 36px;max-width:780px}
.lp-kicker{margin:0 0 14px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-brand)}
.lp-hero h1{margin:0;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.1;font-weight:800;letter-spacing:-.025em}
.lp-lead{margin:20px 0 0;font-size:1.12rem;color:var(--lp-muted);max-width:640px}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.lp-shot{margin:24px 0 0;border:1px solid var(--lp-border);border-top:3px solid var(--lp-brand);border-radius:14px;overflow:hidden;background:var(--lp-surface);box-shadow:0 1px 2px rgba(20,22,35,.04),0 12px 32px rgba(20,22,35,.08)}

.lp-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:56px 0 8px}
.lp-points article{background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:14px;padding:22px}
.lp-points h2{margin:0 0 8px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;padding-top:12px;border-top:2px solid var(--lp-brand);display:inline-block}
.lp-points p{margin:0;color:var(--lp-muted);font-size:.95rem}

.lp-cta{margin:48px 0 0;padding:36px 28px;background:var(--lp-dark);color:#fff;border-radius:14px;text-align:center}
.lp-cta h2{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.015em}
.lp-cta p{margin:0 0 20px;color:#c7cad6}
.lp-cta .lp-btn-dark{background:#fff;color:var(--lp-dark)}
.lp-cta .lp-btn-dark:hover{background:#eceef2}

.lp-foot{max-width:1120px;margin:0 auto;padding:36px 24px 44px;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;font-size:.85rem;color:var(--lp-muted)}
.lp-foot a{text-decoration:none;font-weight:600}
.lp-foot a:hover{color:var(--lp-text);text-decoration:underline}

/* Datenschutzseite */
.lp-text{max-width:760px;padding:24px 0 8px}
.lp-text h1{font-size:2rem;letter-spacing:-.02em;margin:24px 0 8px}
.lp-text h2{font-size:1.15rem;margin:28px 0 6px}
.lp-text p,.lp-text li{color:#33374a}
.lp-hinweis{background:#fff4e5;border-left:3px solid #b45309;padding:10px 14px;border-radius:6px;color:#5b3a0a}

@media (max-width:600px){
  .lp-top{padding:14px 16px}
  .lp-logo img{height:28px}
  .lp-top .lp-btn{min-height:40px;padding:0 14px}
  main{padding:0 16px}
  .lp-hero{padding:32px 0 24px}
  .lp-actions .lp-btn{flex:1 1 100%}
  .lp-points{padding-top:36px}
}