:root{
  --bg1:#dbe8ff; --bg2:#b4cffd;
  --blob1:#5b8cff; --blob2:#7fe0ff; --blob3:#b49cff;
  --ink:#0b1f3a; --muted:#3d5170;
  --glass:rgba(255,255,255,.38); --glass-strong:rgba(255,255,255,.5);
  --edge:rgba(255,255,255,.75); --shade:rgba(20,50,110,.18);
  --accent:#1d4ed8; --accent-ink:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg1:#070d1d; --bg2:#0d1a38;
    --blob1:#2b5bff; --blob2:#1397c9; --blob3:#6a4cd6;
    --ink:#eaf1ff; --muted:#a9bad6;
    --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.14);
    --edge:rgba(255,255,255,.28); --shade:rgba(0,0,0,.45);
    --accent:#7aa7ff; --accent-ink:#06142e;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.25rem; padding:1.5rem 1rem; position:relative; overflow-x:hidden;
  background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed; color:var(--ink);
  font:1rem/1.6 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
/* Farbflächen hinter dem Glas, damit die Unschärfe etwas zu brechen hat */
body::before,body::after{content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.85}
body::before{width:26rem; height:26rem; background:var(--blob1); top:-6rem; left:-7rem}
body::after{width:30rem; height:30rem; background:radial-gradient(circle at 30% 30%,var(--blob2),var(--blob3)); bottom:-10rem; right:-9rem}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 18px 50px var(--shade);
}
.card{
  width:100%; max-width:40rem; border-radius:2rem;
  padding:clamp(1.5rem,5vw,3rem);
}
h1{margin:0; font-size:clamp(2rem,7vw,3rem); line-height:1.1; letter-spacing:-.025em; font-weight:700}
.role{margin:.6rem 0 0; color:var(--muted); font-size:1.0625rem}
h2{margin:2rem 0 .75rem; font-size:1.0625rem; font-weight:650}
.services{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.services li{
  padding:.85rem 1.1rem; border-radius:1.25rem;
  background:var(--glass-strong); border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.services strong{display:block; font-weight:650}
.services span{color:var(--muted); font-size:.9375rem}
.contact{margin-top:2rem}
.btn{
  display:inline-block; padding:.8rem 1.5rem; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-weight:650; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
a:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
footer{display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1.25rem; padding:.5rem 1.25rem; border-radius:999px; font-size:.875rem; color:var(--muted)}
footer a{color:inherit}

/* Fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.85); --glass-strong:rgba(255,255,255,.95)}
  @media (prefers-color-scheme:dark){:root{--glass:rgba(20,32,60,.92); --glass-strong:rgba(30,45,80,.95)}}
}
@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-strong)}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Rechtstexte */
.legal h1{font-size:clamp(1.6rem,5vw,2.2rem)}
.legal h2{margin:1.75rem 0 .5rem}
.legal p,.legal li{font-size:.9375rem}
.legal p{margin:.4rem 0}
.legal ul{padding-left:1.2rem; margin:.4rem 0}
.legal a{color:var(--accent)}
.back{display:inline-block; margin-bottom:1.25rem; font-size:.9375rem; color:var(--muted)}
.todo{background:rgba(255,196,0,.35); border-radius:.25rem; padding:0 .25rem}