:root{
      --radius:16px;
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --max: 1120px;
      --header-h: 76px;
      --line: rgba(0,0,0,0.12);
      --line-soft: rgba(0,0,0,0.08);
    }
    html[data-theme="dark"]{
      --bg: #0b1220;
      --panel:#0f172a;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --brand:#0ea5e9;
      --brand-2:#22d3ee;
      --ok:#22c55e;
      --warn:#f59e0b;
      --danger:#ef4444;
      --card-grad1: rgba(255,255,255,0.06);
      --card-grad2: rgba(255,255,255,0.03);
      --input:#0f172a;
      --border: rgba(255,255,255,0.14);
      --border-subtle: rgba(255,255,255,0.10);
      --hairline: rgba(255,255,255,0.10);
      --header-bg: rgba(11,18,32,0.78);
      /* make separators visible in dark */
      --line: rgba(255,255,255,0.14);
      --line-soft: rgba(255,255,255,0.08);
    }
    html[data-theme="light"]{
      --bg: #f7fafc;
      --panel:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --brand:#0ea5e9;
      --brand-2:#06b6d4;
      --ok:#16a34a;
      --warn:#d97706;
      --danger:#dc2626;
      --card-grad1: rgba(0,0,0,0.04);
      --card-grad2: rgba(0,0,0,0.02);
      --input:#ffffff;
      --border: rgba(0,0,0,0.12);
      --border-subtle: rgba(0,0,0,0.08);
      --hairline: rgba(0,0,0,0.10);
      --header-bg: rgba(255,255,255,0.9);
      --line: rgba(0,0,0,0.12);
      --line-soft: rgba(0,0,0,0.06);
    }

    *{box-sizing:border-box}

    html{scroll-padding-top: calc(var(--header-h) - 50px);}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text);
      background: var(--bg);
      position: relative;
      overflow-x: hidden;
    }
    /* Single, fixed gradient layer that doesn't "double" */
    body::before{
      content:"";
      position: fixed;
      inset: -20vmax;
      z-index: 0; /* sit above body background, below content */
      background:
        linear-gradient(to bottom, rgba(14,165,233,0.46) 0%, rgba(34,211,238,0.36) 22%, rgba(14,165,233,0.22) 44%, rgba(0,0,0,0) 75%);
      pointer-events: none;
    }

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

    header{
      position:fixed; top:0; left:0; right:0; z-index:10;
      backdrop-filter:saturate(1.2) blur(10px);
      background:var(--header-bg);
      border-bottom:1px solid var(--hairline);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
    .brand .logo{width:36px; height:36px; border-radius:10px; background: conic-gradient(from 180deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow)}
    .nav a.btn{padding:10px 16px; border-radius:12px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#00121c; font-weight:700}

    .toggles{display:flex; align-items:center; gap:8px}
    .toggle{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:12px;
      border:1px solid var(--border-subtle); background:var(--panel);
      font-size:14px; cursor:pointer; user-select:none;
      color: var(--text); /* ensure visible in dark */
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
    }
    .toggle:hover{border-color: var(--border)}
    .toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

    main{position:relative; z-index:1; padding-top: calc(var(--header-h) + 10px);}
    .hero{display:grid; gap:20px; grid-template-columns:1.2fr 1fr; align-items:center; padding:48px 0 24px}
    .hero h1{font-size: clamp(28px, 3.6vw, 48px); line-height:1.1; margin:0}
    .hero p{color:var(--muted); margin:8px 0 18px}
    .cta{display:flex; gap:12px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 18px; border-radius:14px; border:1px solid var(--border-subtle); background:var(--panel)}
    .btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#00121c; font-weight:800; border:none}
    .btn.ghost{background:transparent}

    .card{background:linear-gradient(180deg, var(--card-grad1), var(--card-grad2)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
    .dashboard{aspect-ratio: 16/11; width:100%; border-radius:var(--radius); background: var(--panel); display:grid; place-items:center; overflow:hidden; border:1px solid var(--border)}
    .badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
    .badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}

    .section{padding:56px 0; position:relative}
    .section, .hero { scroll-margin-top: calc(var(--header-h) - 50px); }
    .section + .section{
      border-top:1px solid var(--line);
      box-shadow: inset 0 12px 24px -24px var(--line-soft);
    }

    .section h2{font-size: clamp(22px, 2.4vw, 34px); margin:0 0 8px}
    .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .kpi{padding:18px; text-align:center}
    .kpi strong{font-size:28px; display:block}
    .features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .feature{padding:18px}
.lead{color:var(--muted)}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

    .list{display:grid; gap:10px}
    .list li{background:var(--panel); padding:12px 14px; border-radius:12px; border:1px solid var(--border)}

    .price{display:grid; grid-template-columns:1fr 1fr; gap:16px}
    .plan{padding:22px}
    .plan h3{margin:0 0 6px}
    .plan ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}

    .testimonials{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

    details{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
    details+details{margin-top:10px}
    summary{cursor:pointer; font-weight:600}

    form{display:grid; gap:10px}
    input, select, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--input); color:var(--text)}
    label{font-size:14px; color:var(--muted)}

    footer{border-top:1px solid var(--hairline); padding:0px 0 0px; color:var(--muted); position:relative; z-index:1}

    @media (max-width: 980px){
      .hero{grid-template-columns:1fr; padding-top:22px}
      .kpis{grid-template-columns:repeat(2,1fr)}
      .features{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .price{grid-template-columns:1fr}
      .testimonials{grid-template-columns:1fr}
    }
	
	/* Backtest Slider */
.slider{position:relative; border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid var(--border)}
.slider .slides{display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .45s ease}
/* NEU: Slide-Rahmen fest in der Höhe, Bild innen skaliert ohne Crop */
.slider .slide{
  height: 420px;                 /* Rahmenhöhe Desktop */
  display: grid; 
  place-items: center;           /* Bild sauber zentrieren */
  background: #000;              /* optional: dunkler Hintergrund für Balken */
}
.slider .slide img{
  max-width: 100%;
  max-height: 100%;
  width: auto;                   /* Verhältnis beibehalten */
  height: auto;                  /* Verhältnis beibehalten */
  object-fit: contain;           /* WICHTIG: keine Beschneidung */
  display: block;
}
.slider .ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  padding:8px 10px; border-radius:12px; border:1px solid var(--border);
  background:rgba(0,0,0,.35); backdrop-filter: blur(6px); color:#fff; font-weight:700; cursor:pointer
}
.slider .ctrl:hover{background:rgba(0,0,0,.5)}
.slider .prev{left:10px}
.slider .next{right:10px}
.slider .dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:8px; padding:6px 0
}
.slider .dot{
  width:10px; height:10px; border-radius:999px; border:1px solid var(--border); background:var(--card-grad2);
  cursor:pointer
}
.slider .dot.is-active{background:var(--brand); border-color:var(--brand)}
/* Mobilhöhe anpassen wie gehabt */
@media (max-width: 980px){
  .slider .slide{ height: 280px; 
}