:root{
  --bg:#020617;
  --bg2:#0b1022;
  --card:#0c1226;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;
  --accent:#6366f1;
  --accent2:#8b5cf6;
  --radius:18px;
  --max:1140px;
  --shadow:0 18px 45px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  background:radial-gradient(circle at top, #111827 0, #020617 50%, #000 100%);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(to bottom, rgba(3,7,18,.92), rgba(3,7,18,.75), transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(31,41,55,.7);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{
  border-radius:14px;
  box-shadow:0 10px 25px rgba(15,23,42,.85);
}
.brand-name{font-weight:750;letter-spacing:.03em;text-transform:uppercase;font-size:14px}
.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--text)}
@media(max-width:900px){ .nav{display:none} }

/* Hero */
.hero{padding:34px 0 10px}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:26px;align-items:center;
}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr} }

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:4px 10px;border-radius:999px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(55,65,81,.9);
  color:var(--muted);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:12px;
}
.pill{
  padding:2px 8px;border-radius:999px;
  background:rgba(99,102,241,.15);
  color:#c7d2fe;font-size:10px;
}

h1{font-size:clamp(30px,4.2vw,42px);line-height:1.1;margin:0 0 12px;font-weight:780}
.lead{color:var(--muted);font-size:15px;max-width:620px}
.lead strong{color:var(--text);font-weight:650}

.hero-links{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 8px}
.link{color:#a5b4fc;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.micro{font-size:12px;color:var(--muted)}

.hero-card{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,.18), transparent 55%),
             radial-gradient(circle at 100% 100%, rgba(129,140,248,.22), transparent 55%),
             #020617;
  border:1px solid rgba(31,41,55,.92);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#cbd5f5;background:rgba(15,23,42,.85);
  margin-bottom:10px;
}
.h3{margin:0 0 6px;font-size:18px;font-weight:720}
.muted{color:var(--muted)}
.checks{list-style:none;padding:0;margin:10px 0 0}
.checks li{margin:6px 0;color:var(--muted)}
.card-cta{margin-top:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(129,140,248,.7);
  background:linear-gradient(to right, var(--accent), var(--accent2));
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--shadow);
}

/* Sections */
.section{padding:18px 0 28px}
.section-head{margin-bottom:12px}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
h2{margin:0 0 6px;font-size:22px;font-weight:720}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media(max-width:900px){ .grid-2{grid-template-columns:1fr} }
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){ .grid-3{grid-template-columns:1fr} }

.panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 14px 12px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.panel h3{margin:0 0 6px;font-size:16px;font-weight:680}
.answer-block{
  margin-top:10px;
  padding:10px 10px;
  border-radius:14px;
  background:rgba(99,102,241,.10);
  border:1px solid rgba(129,140,248,.35);
  color:#c7d2fe;
  font-size:13px;
}

.tile{
  display:block;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 12px;
}
.tile:hover{border-color:rgba(129,140,248,.65)}
.tile-title{font-weight:700;margin-bottom:6px}
.tile-sub{color:var(--muted);font-size:13px}

/* FAQ */
.faq details{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:8px;
}
.faq summary{cursor:pointer;font-weight:650}
.faq p{margin:8px 0 0}

/* Sticky CTA */
.sticky-cta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  max-width:min(360px, calc(100vw - 36px));
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(129,140,248,.75);
  background:linear-gradient(to right, var(--accent), var(--accent2));
  box-shadow:var(--shadow);
  font-size:12px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}



/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  background:#020617;
  margin-top:22px;

  padding-top:20px;    /* ⬆️ mehr Abstand oben */
  padding-bottom:20px; /* ⬇️ kontrollierter Abstand unten */
}



.fineprint{
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin:8px 0;
}



@media (max-width:900px){
  .site-footer{
    padding-bottom:90px; /* genug Abstand für Sticky-CTA auf Mobile */
  }
}




/* ===============================
   HEADER + DROPDOWN + MOBILE NAV
   =============================== */

.nav-container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.logo{display:flex;align-items:center;gap:10px}
.logo-img{width:34px;height:34px;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.85)}
.logo-text{font-weight:750;letter-spacing:.03em;text-transform:uppercase;font-size:14px}

/* hamburger */
.nav-toggle{
  display:none;
  border:1px solid rgba(129,140,248,.6);
  background:rgba(15,23,42,.65);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

/* nav */
.main-nav ul.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:16px;
}


/* Extra vertical spacing around the main menu */
.main-nav ul.menu{
  padding-top: 1rem;
  padding-bottom: 1rem;
}



.main-nav ul.menu > li{position:relative}

.nav-link{
  color: var(--muted);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover{
  color: var(--text);
  background: rgba(99,102,241,.10);
}


/* Make the More button look identical, just slightly stronger */
.about-toggle{
  font-weight: 700; /* bold */
}

/* Ensure buttons render exactly like links */
.nav-button.nav-link{
  line-height: 1.55;
  -webkit-appearance: none;
  appearance: none;
}



/* button reset */
.nav-button{
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
}





/* DROPDOWN (important: no display toggling -> avoids “opens on mousemove”) */
.has-dropdown > .dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:240px;

  list-style:none;
  margin:0;
  padding:8px;

  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.6);
  z-index:80;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.has-dropdown.open > .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

.dropdown li{display:block}
.dropdown-link{display:block;width:100%;white-space:nowrap}

/* MOBILE NAV */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  .main-nav{display:none; width:100%}
  body.nav-open .main-nav{display:block}

  .nav-container{
    flex-wrap:wrap;
  }

  .main-nav ul.menu{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 0 0;
  }

  .has-dropdown > .dropdown{
    position:static;
    min-width:unset;
    transform:none;
    box-shadow:none;
    border-radius:14px;
    margin-top:6px;
  }
}













/* ===============================
   COOKIE CONSENT MODAL + BLUR
   =============================== */

/* Blur background */
body.cookie-locked main,
body.cookie-locked header,
body.cookie-locked footer {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Dark overlay */
.cookie-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9998;
}

/* Modal */
.cookie-banner{
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(520px, calc(100vw - 36px));
  height: fit-content;
  background: rgba(2, 6, 23, 0.95);
  border: 1px solid rgba(31, 41, 55, 0.9);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.75);
  z-index: 9999;
}

/* Text */
.cookie-text{
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Buttons */
.cookie-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-actions button{
  cursor: pointer;
  flex: 1;
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  background: rgba(15, 23, 42, 0.7);
  color: #e5e7eb;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cookie-actions button:hover{
  background: rgba(15, 23, 42, 0.95);
}









/* More vertical spacing on mobile header */
@media (max-width: 900px){
  .site-header{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-container{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}





@media (max-width: 900px){
  #moreMenu{
    display: none; /* hide the More dropdown container on mobile */
  }
}




/* Footer menu matches header navigation */
.footer-nav{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}

.footer-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 18px;
}

.footer-menu a{
  font-size:14px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}

.footer-menu a:hover{
  color:var(--text);
  background:rgba(99,102,241,.10);
}

/* Mobile spacing */
@media (max-width:900px){
  .footer-menu{
    gap:10px 14px;
  }
}






/* ===============================
   INDEX: FIRST-DRAFT / SAVEBIG STYLE SUPPORT
   =============================== */

.hero-v2{ padding: 28px 0 18px; }
.hero-v2-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
}
@media(max-width:900px){
  .hero-v2-grid{ grid-template-columns:1fr; }
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(55,65,81,.9);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.hero-kicker-pill{
  padding:2px 8px;
  border-radius:999px;
  background:rgba(99,102,241,.15);
  color:#c7d2fe;
  font-size:10px;
}

.hero-title{
  font-size:clamp(30px,4.2vw,44px);
  line-height:1.08;
  margin:0 0 12px;
  font-weight:780;
}
.hero-highlight{ color: #e5e7eb; }

.hero-subtitle{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width: 660px;
}
.hero-subtitle strong{ color:var(--text); font-weight:650; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0 10px; }
.hero-secondary{ font-size:12px; color:var(--muted); }

.hero-meta{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.hero-meta-item{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.hero-meta-dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(129,140,248,.9);
  box-shadow:0 0 0 4px rgba(129,140,248,.15);
}

.hero-card-v2{ position:relative; }
.hero-card-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#cbd5f5;
  background:rgba(15,23,42,.85);
  margin-bottom:10px;
}
.hero-card-title{ font-size:22px; font-weight:780; margin:0 0 2px; }
.hero-card-subtitle{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.hero-card-tagline{ color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:12px; }
.hero-card-tagline strong{ color:var(--text); font-weight:650; }

.hero-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
@media(max-width:900px){
  .hero-card-grid{ grid-template-columns:1fr; }
}

.hero-metric{
  padding:10px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(51,65,85,.9);
  font-size:11px;
}
.hero-metric-label{ color:var(--muted); margin-bottom:4px; }
.hero-metric-value{ font-weight:700; font-size:13px; color:var(--text); }
.hero-metric-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#a5b4fc;
  margin-top:4px;
}

.hero-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  border-top:1px solid rgba(31,41,55,.7);
  padding-top:10px;
}

.hero-spark{
  position:absolute;
  width:180px;height:180px;border-radius:999px;
  background:radial-gradient(circle, rgba(56,189,248,.25), transparent 60%);
  top:-60px; right:-40px;
  filter:blur(3px);
  opacity:.7;
  pointer-events:none;
}
.hero-spark-2{
  position:absolute;
  width:130px;height:130px;border-radius:999px;
  background:radial-gradient(circle, rgba(129,140,248,.35), transparent 60%);
  bottom:-40px; left:-20px;
  filter:blur(3px);
  opacity:.7;
  pointer-events:none;
}

/* Section header layout like first draft */
.section-v2 .section-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin-bottom:18px;
}
.section-v2 .section-kicker{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.section-v2 .section-title{
  font-size:22px;
  font-weight:720;
  margin:0;
}
.section-v2 .section-subtitle{
  font-size:13px;
  color:var(--muted);
  max-width:520px;
}

/* 2-col grid like first draft */
.section-v2 .section-grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:18px;
}
@media(max-width:900px){
  .section-v2 .section-grid-2{ grid-template-columns:1fr; }
}

/* Card system */
.card{
  border-radius:var(--radius);
  background:var(--bg2);
  border:1px solid var(--border);
  padding:16px 14px 14px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.card-tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:6px;
}
.card-title{
  font-size:16px;
  font-weight:720;
  margin:0 0 8px;
}
.card-body{
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
}
.card-body strong{ color:var(--text); font-weight:650; }

.list-check{
  margin:10px 0 0;
  padding-left:0;
  list-style:none;
}
.list-check li{
  margin-bottom:6px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.list-check .icon{
  font-size:13px;
  line-height:1.3;
  color:#4ade80;
}

@media (max-width: 900px){

  .nav-container{
    flex-direction: column;
    align-items: center;     /* alles zentrieren */
    gap: 10px;
  }

  /* Logo immer oben */
  .logo{
    order: 1;
  }

  /* Menu-Button immer darunter */
  .nav-toggle{
    order: 2;
    margin-top: 4px;
  }

  /* Navigation selbst kommt darunter, wenn geöffnet */
  .main-nav{
    order: 3;
    width: 100%;
  }
}