/* Minimal, moderne, DSGVO-freundliche Styles – keine externen Fonts. */
:root{
  --bg:#0f172a;       /* Slate-900 */
  --panel:#0b1222;    /* slightly lighter */
  --text:#e5e7eb;     /* Gray-200 */
  --muted:#9ca3af;    /* Gray-400 */
  --brand:#2563eb;    /* Blue-600 */
  --brand-contrast:#ffffff;
  --maxw:72rem;
}

*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; line-height:1.6; color:var(--text); background:linear-gradient(180deg,var(--bg),#111827) fixed}
body{margin:0;display:flex;min-height:100svh;flex-direction:column}

.container{max-width:var(--maxw);margin:0 auto;padding:1rem}
.narrow{max-width:52rem}

.site-header{position:sticky;top:0;background:rgba(15,23,42,.8);backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid rgba(255,255,255,0.08); z-index:10}
.brand{font-weight:700;text-decoration:none;color:var(--text);font-size:1.125rem}
.nav a{color:var(--text);opacity:.85;text-decoration:none;margin-left:1rem}
.nav a[aria-current="page"]{opacity:1}
.nav a:hover{opacity:1;text-decoration:underline}

.hero{padding:6rem 0;background:
  radial-gradient(800px 300px at 10% 0%, rgba(37,99,235,.25), transparent 70%),
  radial-gradient(800px 300px at 90% 0%, rgba(99,102,241,.25), transparent 70%)
}
.hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:.5rem 0}
.nowrap{white-space:nowrap}
.hero p{max-width:48rem;font-size:1.15rem;color:var(--muted)}
.button{display:inline-block;margin-top:1rem;padding:.75rem 1rem;background:var(--brand);color:var(--brand-contrast);border-radius:.75rem;text-decoration:none;font-weight:600}
.button:hover{filter:brightness(1.1)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:3rem 1rem}
.features article{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:1rem}
.features h2{margin-top:0}

.contact{padding:2rem 1rem;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06)}
.contact a{color:var(--text)}

.site-footer{margin-top:auto;padding:2rem 0;border-top:1px solid rgba(255,255,255,0.08); text-align:center}
.footer-nav{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-bottom:.25rem}
.footer-nav a{color:var(--text);opacity:.85;text-decoration:none}
.footer-nav a:hover{opacity:1;text-decoration:underline}
small{color:var(--muted)}
.meta{color:var(--muted);font-size:.9rem}

@media (min-width: 700px){
  .site-header .container{display:flex;align-items:center;justify-content:space-between}
}