/* CSS für Webseite meiner Dienstleistungen */
/* Autor: Raik Schumacher */
/* Datum: 20.02.2026 */
/* Minimal: gleiche Tokens wie Hauptseite (gekürzt) und leicht angepasst */
:root{
    --bg:#0B1220; --border-soft:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.08);
    --text:#EAF0FF; --text-muted:rgba(234,240,255,0.70);
    --accent:#4AA3FF; --accent-hover:#2F8CFF;
    --font: ui-sans-serif,system-ui,-apple-system,"Inter","Segoe UI",Roboto,Arial,sans-serif;
    --container: 900px; --gutter: 20px; --r: 14px;
}
body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); }
body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
    radial-gradient(900px 700px at 15% 10%, rgba(74,163,255,0.14), transparent 60%),
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    var(--bg);
    background-size:auto, 96px 96px, 96px 96px, auto;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); }
.container{ width:min(var(--container), calc(100% - 2*var(--gutter))); margin:0 auto; }
header{
    border-bottom:1px solid var(--border-soft);
    background: rgba(11,18,32,0.72);
    backdrop-filter: blur(10px);
}
.topbar{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ font-weight:900; color:var(--text); }
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 16px; border-radius:12px;
    border:1px solid var(--border); background: rgba(17,27,46,0.55); color:var(--text);
    font-weight:800;
}
main{padding: 52px 0; }
.card{
    border:1px solid var(--border);
    border-radius: var(--r);
    background: rgba(17,27,46,0.70);
    padding: 22px;
}
h1{ margin:0 0 14px; }
h2{ margin:22px 0 10px; }
p, li{ color:var(--text-muted); line-height:1.7; }
footer{ padding: 22px 0; color:var(--text-muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;}