/* Gemeinsames Aussehen für Impressum und Datenschutz – ruhiger als die Startseite, damit der Text gut lesbar bleibt */
@property --h { syntax: '<number>'; inherits: true; initial-value: 215; }
:root{
  --bg:#03040b;
  --line:rgba(120,140,255,.18);
  --txt:#eef1ff;
  --muted:#9aa3d6;
}
body{
  --c1: hsl(var(--h) 100% 58%);
  --c2: hsl(calc(var(--h) + 60) 100% 62%);
  --c3: hsl(calc(var(--h) - 70) 100% 52%);
  animation: cyc 12s linear infinite;
}
/* Blau → Violett → Grün → Blau, wie auf der Startseite */
@keyframes cyc{ 0%{--h:215} 33%{--h:275} 66%{--h:145} 100%{--h:215} }

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;line-height:1.7;overflow-x:hidden}
a{color:var(--c1)}
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 85% 10%, hsl(var(--h) 100% 55% / .18), transparent 70%),
    radial-gradient(55vw 55vh at 5% 80%, hsl(calc(var(--h) + 60) 100% 55% / .14), transparent 70%),
    var(--bg)}
.ledstrip{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1));background-size:200% 100%;
  animation:slide 3s linear infinite;box-shadow:0 0 18px var(--c1),0 0 40px var(--c2)}
@keyframes slide{to{background-position:200% 0}}

header{position:sticky;top:0;z-index:50;background:rgba(3,4,11,.8);backdrop-filter:blur(14px);
  border-bottom:1px solid hsl(var(--h) 100% 60% / .35)}
.nav{max-width:900px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:Anton,sans-serif;font-size:24px;letter-spacing:.04em;color:var(--txt);text-decoration:none}
.brand img{width:40px;height:40px;mix-blend-mode:screen}
.brand b{font-weight:400;color:var(--c1);text-shadow:0 0 14px var(--c1)}
.back{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}

main{max-width:900px;margin:0 auto;padding:60px 24px 80px}
h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(44px,8vw,72px);line-height:1;text-transform:uppercase;margin-bottom:36px}
.card{position:relative;padding:34px;border-radius:14px;background:linear-gradient(160deg,rgba(13,16,40,.9),rgba(7,8,21,.94));
  border:1px solid hsl(var(--h) 100% 60% / .35);box-shadow:0 0 30px hsl(var(--h) 100% 60% / .15)}
h2{font-size:20px;margin:30px 0 8px;color:#fff}
h2:first-child{margin-top:0}
h3{font-size:16px;margin:20px 0 4px;color:#dfe3ff}
p,li{color:#c7cdf2}
ul{padding-left:22px;margin:6px 0}
.stand{margin-top:30px;font-size:13px;color:var(--muted)}
/* Platzhalter, die Dennis noch ausfüllen muss */
.todo{background:#ff3b6b;color:#fff;padding:0 6px;border-radius:4px;font-weight:700}

footer{border-top:1px solid hsl(var(--h) 100% 60% / .3);padding:30px 24px;color:var(--muted);font-size:14px;text-align:center}
footer nav{display:flex;justify-content:center;gap:22px;margin-top:8px}
footer a{color:var(--muted)}
footer a:hover{color:var(--c1)}

@media (prefers-reduced-motion:reduce){ *{animation:none!important} }