:root{
  --bg:#f6f8fb;
  --card:#fff;
  --muted:#6b7280;
  --accent:#4f6fa3;
  --accent-2:#89a3c9;
  --glass:rgba(255,255,255,0.65);
  --radius:16px;
  --shadow:0 8px 24px rgba(20,30,40,0.08);
  --fw-heading:800;
  --container:1100px;
  --accent-glow:0 0 12px rgba(79,111,163,0.4);
}
*{box-sizing:border-box;transition:all 0.25s ease}
body{
  margin:0;
  font-family:Inter, sans-serif;
  background:linear-gradient(180deg,var(--bg),#eef3fb 60%);
  color:#0f1724;
  line-height:1.6;
  padding-bottom:80px;
}

.cookies {
  padding: 5px 5px 5px;
  font-weight:700;
  text-align: center;
  background: linear-gradient(
    to bottom,
    #4f6fa3 0%,
    #89a3c9 50%,
    #4f6fa3 100%
  );
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:32px;
}
header{
  backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  margin:0 auto 12px auto;
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0.9));
  padding:14px 20px;
  border-radius:999px;
  box-shadow:var(--shadow);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:56px;
  height:56px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:800;
  box-shadow:var(--accent-glow);
  font-size:20px;
}
nav ul{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  position:relative;
}
nav a::after{
  content:'';
  display:block;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width .3s;
  position:absolute;
  bottom:-4px;
  left:0;
}
nav a:hover::after{width:100%;}
.cta{
  background:var(--accent);
  color:white;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--accent-glow);
  transition:transform 0.2s, box-shadow 0.2s;
}
.cta:hover{
  transform:scale(1.05);
  box-shadow:0 0 18px rgba(79,111,163,0.6);
}
.hero{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:32px;
  align-items:center;
  padding:60px 0;
}
h1,h2{
  font-size:38px;
  margin:0;
  color:#071433;
  font-weight:var(--fw-heading);
}
h1.glow{
  text-shadow:0 0 8px rgba(79,111,163,0.6);
}
.lead{
  color:var(--muted);
  margin-top:14px;
  font-size:17px;
}
.card{
  background:var(--card);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform 0.25s, box-shadow 0.25s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(20,30,40,0.1);
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:32px;
}
.service p{color:var(--muted);}
.aside-card ul{margin-left:16px;color:var(--muted);}
.cta-alt{
  display:block;
  text-align:center;
  margin-top:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  padding:12px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--accent-glow);
}
.vorteile{margin-bottom:80px;}
.kontakt-box input,
.kontakt-box textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #ccc;
  font-size:16px;
  outline:none;
}
.kontakt-box input:focus,
.kontakt-box textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--accent-glow);
}
.kontakt-box button{
  width:100%;
  padding:14px;
  background:var(--accent);
  color:white;
  font-weight:700;
  border:none;
  border-radius:12px;
  cursor:pointer;
  box-shadow:var(--accent-glow);
  transition:transform 0.2s, box-shadow 0.2s;
}
.kontakt-box button:hover{
  transform:scale(1.03);
  box-shadow:0 0 18px rgba(79,111,163,0.6);
}
@media(max-width:980px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){nav ul{display:none}.grid{grid-template-columns:1fr}.container{padding:18px}}