:root {
  --accent:#0066ff;
  --bg:#0b0f1a;
  --card:#111827;
  --card-border:#1f2937;
  --text:#f5f7ff;
  --muted:#a3a7b4;
  --maxw:1100px;
}

/* ---------- Grundlayout ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw);margin:0 auto;padding:28px}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- Header & Navigation ---------- */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--card-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.logo{width:140px;height:auto}
.nav a{
  margin-left:16px;color:var(--text);text-decoration:none;font-size:15px;opacity:.9;
}
.nav a:hover{opacity:1}
.nav .cta{
  background:var(--accent);color:#fff;padding:8px 12px;
  border-radius:10px;text-decoration:none;margin-left:18px;font-weight:600;
}
.lang-toggle{margin-left:14px;padding:6px;border-radius:10px;background:#121826;border:1px solid var(--card-border)}
.lang-toggle button{background:none;border:0;padding:6px 10px;cursor:pointer;color:var(--text);opacity:.85;border-radius:8px}
.lang-toggle button.active{background:var(--accent);color:#fff;opacity:1}

/* ---------- Hero ---------- */
.hero{background:var(--bg);padding:60px 0 40px}
h1{font-size:34px;line-height:1.2;margin:0 0 10px}
.lead{color:var(--muted);max-width:750px;margin:0 auto 6px}
.primary-btn{
  display:inline-block;margin-top:14px;background:var(--accent);
  color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;
}

/* ---------- Card ---------- */
.card{
  width:100%;background:var(--card);border:1px solid var(--card-border);
  border-radius:16px;padding:26px 22px;margin:20px auto;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--card-border);padding:22px 0 26px}
.footer-logo{display:block;margin:0 auto 10px}
.footer-links a{color:#fff;text-decoration:none;opacity:.95}
.footer-links a:hover{opacity:1}
.footer-links .sep{opacity:.45;margin:0 10px}
.copy{opacity:.6;font-size:13px}

/* ---------- Disclaimer ---------- */
.disclaimer-banner {
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:rgba(17,24,39,0.95);color:var(--text);
  padding:16px 20px;border-top:1px solid var(--card-border);
  justify-content:center;z-index:9999;backdrop-filter:blur(5px);
}
.disclaimer-banner .banner-content{text-align:center;font-size:14px;}
.disclaimer-banner button{
  background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:8px 18px;cursor:pointer;font-weight:600;
}

/* ---------- Burger-Icon (animiert) ---------- */
.burger{
  position:relative;width:28px;height:22px;background:none;border:none;cursor:pointer;
  display:none;flex-direction:column;justify-content:space-between;z-index:10000;
}
.burger span{
  display:block;height:3px;width:100%;background:#fff;border-radius:2px;transition:all .3s ease;
}
.burger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ---------- Mobile Menü ---------- */
.mobile-menu{
  display:none;position:fixed;inset:0;
  background:rgba(17,24,39,0.7);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  z-index:9998;align-items:center;justify-content:center;flex-direction:column;
  animation:fadeIn .3s ease;padding:40px 20px;
}
.mobile-menu.active{display:flex;}
.mobile-menu .menu-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.mobile-menu a{
  color:#fff;text-decoration:none;font-size:20px;padding:8px 16px;border-radius:8px;display:block;
}
.mobile-menu a:hover{background:rgba(255,255,255,0.08);}
.mobile-menu a.cta{
  background:rgba(0,120,255,0.75);color:#fff;border-radius:14px;padding:14px 34px;margin-top:22px;
  font-size:18px;font-weight:600;backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 0 8px rgba(255,255,255,0.2),0 0 20px rgba(0,120,255,0.5);
  transition:all .3s ease;
}
.mobile-menu a.cta:hover{
  transform:scale(1.05);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.25),0 0 30px rgba(0,120,255,0.6);
}

/* --- Optimierte, blau/weiße Bottom-Bar --- */
.bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9997;
  justify-content: space-around;
  padding: 8px 0;
}

.bottom-bar a {
  color: #e8f0ff;
  font-size: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  opacity: 0.9;
  transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.3s ease;
}

.bottom-bar a::after {
  content: attr(title);
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.8;
}

.bottom-bar a:hover,
.bottom-bar a:focus {
  color: var(--accent);
  transform: scale(1.15);
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 102, 255, 0.6);
}

/* Optional: aktive Farbe beim aktuellen Abschnitt */
.bottom-bar a.active {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0, 102, 255, 0.8);
  transform: scale(1.1);
  opacity: 1;
}


/* ---------- Responsive ---------- */
@media(max-width:760px){
  .nav{display:none!important;}
  .burger{display:flex;}
  .bottom-bar{display:flex;}
}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}