/* ---------- THEME ---------- */
:root{
  --bg:#0b0f16; --bg2:#0f1824; --fg:#e7edf7; --muted:#a8b7cc;
  --primary:#6ccfff; --danger:#ff6b6b; --ok:#6cffbe;
  --glass:rgba(255,255,255,.08); --border:rgba(255,255,255,.14);
  --ring:rgba(108,207,255,.45);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background: linear-gradient(180deg,var(--bg),var(--bg2) 70%);
  min-height:100svh;
  overflow-x:hidden;
}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:8px 12px; z-index:2000;
  background:#000; color:#fff; border-radius:8px;
}

/* Ambient lights */
body::before, body::after{
  content:""; position:fixed; inset:-20% -20% auto -20%; height:70svh; pointer-events:none; z-index:-1;
  filter:blur(60px) saturate(120%); opacity:.55; will-change:transform, opacity;
  background:
    radial-gradient(40% 50% at 25% 35%, rgba(108,255,190,.22), transparent 60%),
    radial-gradient(36% 46% at 75% 60%, rgba(108,207,255,.22), transparent 60%);
  animation: drift 18s ease-in-out infinite;
}
body::after{
  animation-duration: 24s;
  background:
    radial-gradient(30% 40% at 20% 70%, rgba(156,132,255,.20), transparent 60%),
    radial-gradient(28% 34% at 80% 25%, rgba(108,207,255,.18), transparent 60%);
  opacity:.40;
}
@keyframes drift{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-4vh,0) scale(1.02)} }

/* ---------- LAYOUT ---------- */
.container{max-width:1200px;margin:120px auto 90px;padding:0 20px}

/* ---------- NAV ---------- */
/* --- SHOP NAV FIX --------------------------------------------------- */
.nav { display: flex; align-items: center; justify-content: space-between; }

.nav-left { display:flex; align-items:center; gap:10px; }

/* Rechts alles in eine Zeile */
.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;               /* Abstand zwischen Toggle, Cart, Burger */
}

/* Toggle in der Leiste inline */
.nav-right .toggle{ display:inline-flex; align-items:center; }

/* Segmented Toggle – Reset + Style */
.toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.toggle .seg{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; color:var(--fg);
  padding:8px 12px; border-radius:10px; font-weight:700;
  cursor:pointer; line-height:1; transition:filter .15s ease, background .15s ease;
}
.toggle .seg:hover{ background:rgba(255,255,255,.08); }
.toggle .seg:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring); }
.toggle .seg.active{
  color:#062238;
  background:linear-gradient(180deg, rgba(108,204,255,.98), rgba(108,204,255,.85));
  box-shadow:0 10px 22px rgba(108,204,255,.28), inset 0 1px 0 rgba(255,255,255,.45);
}


/* Hamburger-Wrapper als Inline-Flex, nicht Block */
.nav-right .menu-wrap{ display:inline-flex; align-items:center; }

/* Der runde Button-Hintergrund des Burgers soll nicht auf volle Breite gehen */
.nav-right .menu-wrap .background{ display:inline-flex; }

/* Cart-Icon + Badge */
.cart-badge{
  position:relative;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}

/* Icon per Mask (weiße Einkaufstasche) */
/* Alte Mask-Variante deaktivieren */
.cart-badge::before{ content:none !important; }


/* Zähler-Badge */
.cart-badge > #cartCount{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--primary); color:#062238; font-weight:800; font-size:12px;
  border:1px solid var(--border);
}


/* ---------- HERO ---------- */
.hero{display:block; margin-bottom:28px}
.hero-copy h1{font-size:46px; margin:0 0 10px; letter-spacing:.2px}
.hero-copy p{margin:0 0 12px; color:var(--muted)}
.filters{display:flex; gap:10px; margin-top:10px}
#search{
  width:min(540px, 100%); border-radius:14px; border:1px solid var(--border);
  padding:12px 14px; background:rgba(255,255,255,.06); color:var(--fg)
}
.usp{display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:14px 0 0}
.usp li{background:rgba(255,255,255,.06); border:1px solid var(--border); padding:8px 12px; border-radius:999px}

/* Trust bar */
.trustbar{margin-top:20px; overflow:hidden; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.trust-track{display:flex; gap:24px; padding:10px; animation: marquee 28s linear infinite}
.trust-track img{height:34px; width: auto; opacity:.85; filter:grayscale(1); border-radius:6px}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- CARDS ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; margin:24px 0}
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:22px; background:rgba(7,10,16,.55); border:1px solid var(--border);
  transform:translateZ(0) translateY(0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.card:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.35)}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(140deg, rgba(108,207,255,.35), rgba(255,255,255,0) 30%, rgba(108,255,190,.25) 70%, rgba(255,255,255,0) 100%);
  filter:blur(8px); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.card:hover::before{opacity:1}
.card-image{height:180px; background-size:cover; background-position:center; transform:scale(1.02); transition:transform .6s ease}
.card:hover .card-image{transform:scale(1.06)}
.card-image::after{
  content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-120%) rotate(0.001deg); transition:transform .9s cubic-bezier(.2,.6,0,.999);
}
.card:hover .card-image::after{transform:translateX(120%) rotate(0.001deg)}
.card-body{padding:18px}
.badge{display:inline-block; font-size:12px; color:#00243a; background:var(--primary);
  padding:5px 11px; border-radius:999px; margin-bottom:12px; box-shadow:0 8px 20px rgba(108,207,255,.35)}
h3{margin:6px 0 2px; font-size:22px}
.price{display:flex; gap:12px; align-items:baseline; margin:10px 0 14px; font-weight:800}
.price small{opacity:.7; font-weight:600; margin-left:4px}
.price .hidden{display:none}
.features{list-style:none; padding:0; margin:0 0 16px 0; color:var(--muted)}
.features li{position:relative; padding-left:18px; margin:6px 0}
.features li::before{content:"•"; position:absolute; left:0; color:var(--primary)}
.actions{display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block; padding:12px 16px; border-radius:14px; border:1px solid var(--border);
  color:var(--fg); cursor:pointer; background:transparent; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.pill{border-radius:999px; padding:14px 20px}
.primary{
  background: linear-gradient(180deg, rgba(108,204,255,.98), rgba(108,204,255,.85));
  border: 1px solid rgba(108,204,255,.9); color:#042033; font-weight:800;
  box-shadow: 0 10px 28px rgba(108,204,255,.30), inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(0);
}
.primary:hover{box-shadow:0 14px 34px rgba(108,204,255,.38), inset 0 1px 0 rgba(255,255,255,.55); transform: translateY(-1px)}
.primary:active{transform: translateY(0)}

/* ---------- BENEFITS ---------- */
.benefits{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  backdrop-filter: blur(12px) saturate(130%); border:1px solid var(--border);
  border-radius:20px; padding:18px; margin-top:28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)
}
.benefits h2{margin:0 0 12px}
.benefit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.benefit-grid article{padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.05)}

/* ---------- FEATURE ROWS ---------- */
.feature-rows{margin-top:30px; display:grid; gap:26px}
.row{display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:center}
.row.reverse{grid-template-columns:1fr 1.2fr}
.row.reverse .row-img{order:2}
.row-img{height:320px; border-radius:20px; background:#111; overflow:hidden; position:relative}
.row-img::before{content:""; position:absolute; inset:0; background:var(--glass)}
.row-img img{width:100%; height:100%; object-fit:cover}
.row-copy{padding:10px}
.check{list-style:none; padding:0; margin:10px 0 0; color:var(--muted)}
.check li{margin:6px 0; padding-left:18px; position:relative}
.check li::before{content:"✔"; position:absolute; left:0; color:var(--ok); font-weight:800}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:28px}
.stats article{padding:16px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.05); text-align:center}
.stats .num{font-size:40px; font-weight:800}
.stats .label{color:var(--muted)}

/* ---------- GALLERY ---------- */
.gallery{margin-top:30px}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.g-item{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.g-item img{display:block; width:100%; height:180px; object-fit:cover; transition:transform .45s cubic-bezier(.2,.6,0,.999)}
.g-item:hover img{transform:scale(1.06)}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter: blur(6px); z-index:1100}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1200px); max-height:86vh; border-radius:16px; border:1px solid var(--border)}
.lightbox-close{position:absolute; top:20px; right:24px; background:rgba(255,255,255,.1); border:1px solid var(--border); color:#fff; border-radius:999px; width:40px; height:40px; cursor:pointer}

/* ---------- TESTIMONIALS ---------- */
.testimonials{margin-top:36px}
.testimonials h2{margin:0 0 14px}
.slider{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.05)}
.slides{display:flex; transition:transform .5s ease}
.slide{min-width:100%; padding:20px; display:flex; flex-direction:column; gap:8px}
.slide blockquote{font-size:20px; line-height:1.5; margin:0}
.slide-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid var(--border); color:#fff; border-radius:999px; width:40px; height:40px; cursor:pointer}
.slide-nav.prev{left:10px}
.slide-nav.next{right:10px}

/* ---------- FEATURED / FAQ ---------- */
.featured{margin-top:30px}
.featured h2{margin:0 0 14px}
.featured-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.mini{display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.05)}
.mini-img{width:96px; height:72px; border-radius:10px; background-size:cover; background-position:center}
.mini-title{font-weight:700}
.mini-sub{color:var(--muted); font-size:14px}

.comparison{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  backdrop-filter: blur(12px) saturate(130%); border:1px solid var(--border);
  border-radius:20px; padding:18px; margin-top:28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)
}
.comparison h2{margin:0 0 12px}
.table-wrap{overflow:auto}
.compare{width:100%; border-collapse:separate; border-spacing:0}
.compare th,.compare td{padding:12px 10px; border-bottom:1px solid var(--border)}
.compare thead th{position:sticky; top:0; background:rgba(0,0,0,.35)}
.compare td.center{text-align:center}

.faq{margin-top:36px}
.faq h2{margin:0 0 12px}
.qa{border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.05); padding:10px 12px; margin:10px 0}
.qa summary{cursor:pointer; font-weight:600}
.qa div{color:var(--muted); margin-top:8px}

/* Use cases */
.usecases{margin-top:32px}
.uc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.uc-grid article{padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.05)}

/* CTA Band */
.cta-band{margin-top:30px}
.cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(108,204,255,.18), rgba(108,204,255,.10))}
.cta-wrap h3{margin:0}

/* Newsletter */
.newsletter{margin-top:36px}
.newsletter h2{margin:0 0 12px}
.nl-form{display:flex; gap:10px; flex-wrap:wrap}
.nl-form input{flex:1; min-width:240px; border-radius:14px; border:1px solid var(--border); padding:12px 14px; background:rgba(255,255,255,.06); color:var(--fg)}
.muted{color:var(--muted)}

/* ---------- FOOTER ---------- */
.foot{max-width:1200px; margin:0 auto 32px; display:flex; justify-content:space-between; color:var(--muted); padding:0 20px}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{opacity:0; transform:translateY(14px) scale(.98)}
.reveal.reveal-in{animation:reveal .62s cubic-bezier(.2,.6,0,.999) both}
.reveal-stagger .reveal{animation-delay: calc(var(--reveal-index, 0) * 60ms)}
@keyframes reveal{to{opacity:1; transform:none}}

/* 3D tilt depth */
.card, .mini{ transform-style:preserve-3d; }
.card .card-image, .card .card-body{transform:translateZ(0.01px)} /* flicker fix */

/* Scroll progress */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--ok),var(--primary)); z-index:999}

/* Sticky CTA bottom */
.sticky-cta{position:fixed; left:0; right:0; bottom:10px; z-index:999; pointer-events:none}
.sticky-cta .sticky-wrap{
  width:min(1200px, calc(100% - 32px)); margin:0 auto; pointer-events:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:14px; border:1px solid var(--border);
  background:rgba(9,14,22,.6); backdrop-filter: blur(10px)
}
.sticky-cta {
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.sticky-copy{display:flex; flex-direction:column}
.sticky-sub{color:var(--muted); font-size:14px}
.sticky-actions{display:flex; gap:8px; align-items:center}
.sticky-actions select{
  appearance:none; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--fg)
}

/* A11y: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  body::before, body::after{display:none}
}

/* Responsive tweaks */
@media (max-width: 900px){
  .row{grid-template-columns:1fr; height:auto}
  .row.reverse .row-img{order:initial}
}

/* Logo links ausblenden (falls Element noch vorhanden ist) */
.nav .logo[hidden] { display: none !important; }

/* Nav-Layout: rechtsbündig inkl. Wagen */
.nav { display: flex; justify-content: space-between; align-items: center; }
.nav .nav-links { display: flex; align-items: center; gap: 14px; }

/* Warenkorb-Button rechts */
.cart-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,17,17,.35);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.cart-badge .cart-icon { width: 18px; height: 18px; }

/* Zähler-Badge */
#cartCount {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  background: #4cc9f0;
  color: #0b0f14;
  border: 1px solid rgba(255,255,255,.5);
}

/* ==== FOOTER LINKS ==== */
.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  margin-top: 4rem;
  background: rgba(20, 20, 25, 0.65); /* Glasoptik Hintergrund */
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  color: #bbb;
  text-align: center;
}

.foot-links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
}

.foot-links a {
  color: #9cc9ff; /* dezentes Blau */
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.foot-links a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(156, 201, 255, 0.8);
}

.foot .muted {
  font-size: 0.75rem;
  color: #666;
}
.logos{display:flex; justify-content:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.logo-chip{font-weight:900; letter-spacing:.5px; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,.07); border:1px solid var(--border)}