:root{
  --bg:#0b0f17; --bg-elev:#0f1521; --brand:#7c3fca; --brand2:#36b8b8;
  --text:#dbe1ef; --muted:#a9b1c6; --line:#20283a; --white:#fff;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --header-h:68px; /* JS setzt exakte Höhe */
}

/* Basics */
*{box-sizing:border-box} html,body{height:100%}
body.site {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  color: var(--text);

  /* your gradients */
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(124,63,202,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(54,184,184,.12), transparent 50%),
    var(--bg);

  /* important for full-size & scroll behavior */
  background-repeat: no-repeat;
  background-attachment: fixed;   /* background stays fixed on scroll */
  background-size: cover;         /* make sure it fills the whole viewport */
}

/* Theory section */
#theory { scroll-margin-top: calc(var(--header-h) + 16px); }

.theory {
  /* Mobile-first: full width with comfy max */
  width: min(92%, 1000px);
  margin: 0 auto;
  padding-top: 32px;
}

@media (min-width: 980px) {
  /* On desktop, aim for ~60% page width while honoring a max */
  .theory { width: min(60%, 1000px); }
}

.theory__title { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.theory__lead  { margin: 0 0 1.4rem; color: var(--muted); }

.theory__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}
@media (min-width: 760px) {
  .theory__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Diagram placeholder (replace with SVG/canvas later) */
.theory__figure { margin: 18px 0 10px; }
.theory__diagram {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(400px 160px at 40% 30%, rgba(124,63,202,.12), transparent 60%),
    radial-gradient(340px 140px at 70% 70%, rgba(54,184,184,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent);
  box-shadow: var(--shadow-soft);
}
.theory__caption { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }

/* FAQ */
.theory__faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .9rem;
  background: var(--bg-elev);
  box-shadow: var(--shadow-soft);
  margin-top: .6rem;
}
.theory__faq summary {
  cursor: pointer;
  font-weight: 600;
  outline: none;
}
.theory__faq p { margin: .6rem 0 0; color: var(--muted); }


.no-scroll{overflow:hidden}
.container{width:min(1200px,92%); margin:0 auto}

/* Header + Nav */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,23,.7); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__bar{display:flex; align-items:center; justify-content:space-between; min-height:68px}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--white); font-weight:700}
.brand__mark{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--shadow-soft); font-size:16px}
.brand__text{font-size:1.05rem}

/* Desktop-Links */
.nav{position:relative}
.nav__list{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.nav__list--desktop{display:none}
.nav__link{display:inline-block; padding:.52rem .78rem; border-radius:10px; text-decoration:none; color:var(--text); transition:.2s}
.nav__link:hover{background:rgba(124,63,202,.12); color:var(--white)}
.nav__link--active{color:var(--white); background:linear-gradient(135deg, rgba(124,63,202,.16), rgba(54,184,184,.14)); border:1px solid rgba(124,63,202,.25)}

/* Burger (36x36) + fehlerfreie X-Animation via body.nav-open */
.burger{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.burger:hover{background:rgba(124,63,202,.08); border-color:rgba(124,63,202,.4)}
.burger__line{display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .2s, translate .25s}
.burger .l1{transform-origin:10% 50%; translate:0 -6px}
.burger .l2{transform-origin:50% 50%}
.burger .l3{transform-origin:10% 50%; translate:0 6px}

/* Zustand offen */
body.nav-open .burger .l1{transform:rotate(45deg); translate:0 0}
body.nav-open .burger .l2{opacity:0}
body.nav-open .burger .l3{transform:rotate(-45deg); translate:0 0}

/* Mobiles Panel: ab Unterkante Header bis unten, slidet von oben nach unten */
.mobile-panel{
  position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
  background:rgba(11,15,23,.97); border-bottom:1px solid var(--line);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); transition:transform .28s ease; z-index:90;
}
.mobile-panel.is-open{transform:translateY(0)}
.nav__list--mobile{flex-direction:column; gap:.4rem; padding:14px 6% 28px}

/* Overlay unterhalb Header */
.scrim{
  position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
  background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:80;
}
.scrim.is-visible{opacity:1; pointer-events:auto}

.cube {
	width: 256px;
}

/* Desktop */
@media (min-width:980px){
  .nav__list--desktop{display:flex}
  .burger, .mobile-panel, .scrim{display:none}
  .cube {
	  width: 356px !important;
  }
}

/* Hero & UI */
.hero{position:relative; padding:clamp(56px,8vw,96px) 0}
.hero__inner{text-align:center}
.hero__title{font-size:clamp(1.8rem,3.8vw,3rem); line-height:1.15; margin:0 0 .8rem}
.hero__subtitle{margin:0 auto 1.6rem; max-width:860px; color:var(--muted)}
.hero__gradient{position:absolute; inset:0px 0 auto; height:220px;
  background:radial-gradient(600px 200px at 50% 0%, rgba(124,63,202,.22), transparent 60%),
             radial-gradient(500px 180px at 70% 0%, rgba(54,184,184,.18), transparent 60%)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.1rem; border-radius:12px; text-decoration:none; border:1px solid transparent; font-weight:600; box-shadow:var(--shadow-soft); transition:.2s}
.btn--primary{color:#fff; background:linear-gradient(135deg, rgba(124,63,202,.9), rgba(54,184,184,.9)); border-color:rgba(124,63,202,.6)}
.btn--primary:hover{background:linear-gradient(135deg, rgba(124,63,202,1), rgba(54,184,184,1))}
.section{padding:48px 0 72px}
.grid-3{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; box-shadow:var(--shadow)}
.card__title{margin:0 0 .4rem; font-size:1.2rem}
.card__text{margin:0 0 .8rem; color:var(--muted)}
.card__link{color:#fff; text-decoration:none; font-weight:600}
.card__link:hover{text-decoration:underline}

.hero {
  position: relative;
}

.hero__inner {
  position: relative;
  z-index: 2; /* bring title + button forward */
}

.hero__gradient {
  position: absolute;
  inset: 0;        /* stretch to cover hero */
  z-index: 1;      /* keep it behind the text */
  pointer-events: none; /* prevent blocking clicks */
}

.btn-chevron {
  display: inline-flex;
  align-items: center;   /* keep normal alignment */
  justify-content: center;
  margin-top: 1.4rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--white);
  background: #ffffff10;
  border: 1px solid #ffffff20;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform .25s, background .25s;
}

.btn-chevron svg {
  transform: translateY(2px); /* optical correction */
}


.btn-chevron:hover {
  transform: translateY(4px);
}


/* Footer */
.site-footer{margin-top:auto; border-top:1px solid var(--line); background:linear-gradient(0deg, rgba(12,18,32,1) 0%, rgba(12,18,32,.85) 100%)}
.footer-primary{padding:42px 0}
.footer__grid{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:760px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__title{margin:0 0 .6rem; font-size:1rem}
.footer__text{margin:0; color:var(--muted)}
.footer__links{list-style:none; margin:0; padding:0}
.footer__links a{display:inline-block; padding:.25rem 0; color:var(--text); text-decoration:none}
.footer__links a:hover{color:#fff; text-decoration:underline}
.newsletter{display:grid; grid-template-columns:1fr auto; gap:.5rem}
.input{width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:#0c1220; color:var(--text)}
.input:focus{border-color:rgba(124,63,202,.6); box-shadow:0 0 0 3px rgba(124,63,202,.2)}
.footer-secondary{border-top:1px solid var(--line); background:#0b0f17}
.footer-secondary__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0; color:var(--muted)}
.footer-secondary__link{color:var(--text); text-decoration:none}
.footer-secondary__link:hover{color:#fff; text-decoration:underline}

/* A11y helper (nur visuell, kein aria) */
.sr-only{position:absolute; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}