:root{--bg:#07080d;--bg2:#0b0d15;--card:#0e1120cc;--card2:#0b0e19cc;--line:rgba(255,255,255,.08);--txt:#f3f4f6;--muted:rgba(255,255,255,.62);--muted2:rgba(255,255,255,.42);--radius:15px;--shadow:0 20px 60px rgba(0,0,0,.55);--grad:linear-gradient(90deg,#6d5cff 0%,#d64bd1 45%,#ff6b6b 100%);--grad2:linear-gradient(90deg,#8b5cf6 0%,#ec4899 55%,#fb7185 100%);--green:#34d399;--chip:rgba(255,255,255,.06)}
*{box-sizing:border-box}
html, body{
  height: 100%;
  overflow: hidden;          /* <- WICHTIG: verhindert Scroll im Body */
  overscroll-behavior: none; /* <- stoppt "Rubber band" / Scroll chaining */
  background: #07080d;       /* <- falls doch was durchscheint, nicht weiß */
}

body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--txt);background:radial-gradient(1200px 900px at 20% 80%,rgba(143,92,246,.16),transparent 55%),radial-gradient(1000px 800px at 80% 20%,rgba(236,72,153,.14),transparent 55%),radial-gradient(1100px 900px at 80% 90%,rgba(255,107,107,.12),transparent 55%),linear-gradient(180deg,var(--bg) 0%,#060612 100%);overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin:0 auto}

/* Scroll hook (snap container) */
.snap{
  height: 100vh;
  overflow-y: auto;
  overflow-x: clip;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  overscroll-behavior-y: contain; /* <- verhindert Scroll-Weitergabe an body */
}


/* IMPORTANT: allow taller sections! */
section.screen{
  min-height:100vh;                 /* may be taller if content requires */
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:stretch;              /* allow internal vertical layout */
  position:relative;
  overflow-x:clip;
}

/* keep padding but avoid forcing layout overflow */
.screen-pad{padding:110px 0 80px}

/* Topbar (hidden until screen2) */
.topbar{position:fixed;inset:18px 0 auto 0;z-index:60;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.28s ease}
body.nav-on .topbar{opacity:1;transform:translateY(0);pointer-events:auto}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);background:rgba(8,9,15,.48);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:99px;background:var(--grad);box-shadow:0 0 0 6px rgba(140,92,246,.12),0 0 40px rgba(236,72,153,.25)}
.navlinks{display:flex;gap:10px;align-items:center;color:var(--muted)}
.navlinks a{padding:8px 10px;border-radius:999px;border:1px solid transparent}
.navlinks a:hover{border-color:var(--line);background:rgba(255,255,255,.03)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 22px;font-weight:800;letter-spacing:.2px;border:1px solid transparent;cursor:pointer;transition:.2s transform,.2s opacity,.2s box-shadow}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#fff;color:#0a0b10;box-shadow:0 16px 40px rgba(255,255,255,.08)}
.btn-primary:hover{box-shadow:0 16px 50px rgba(255,255,255,.14)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}

.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-weight:700}
.badge .pill{width:8px;height:8px;border-radius:99px;background:var(--green);box-shadow:0 0 0 6px rgba(52,211,153,.12)}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl2{background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{letter-spacing:.28em;text-transform:uppercase;font-weight:800;color:var(--muted2);font-size:.78rem}
.lead{color:var(--muted);font-size:1.05rem;line-height:1.55}
.h1{font-size:clamp(2.2rem,4.2vw,4.2rem);line-height:1.02;margin:.35rem 0 0;font-weight:900}
.h2{font-size:clamp(1.8rem,3.2vw,3.1rem);line-height:1.06;margin:.2rem 0 0;font-weight:900}
.h3{font-size:1.25rem;margin:0 0 6px;font-weight:900}
.hr{height:1px;background:var(--line);margin:18px 0}
.small{color:var(--muted2);font-size:.92rem;line-height:1.45}
.shadow{box-shadow:var(--shadow)}

.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));backdrop-filter:blur(12px);border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.5)}
.panel-inner{padding:26px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1.1fr .9fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}.topbar{inset:12px 0 auto 0}.navlinks{display:none}}

/* Glow spots */
/* Glow spots: round + not clipped */
.spot{
  position:absolute;
  filter:blur(70px);
  opacity:.75;
  pointer-events:none;
  mix-blend-mode:screen;

  /* IMPORTANT: don't clip blur */
  contain:none !important;

  /* keep it smooth / GPU */
  transform:translateZ(0);
  will-change:transform, opacity, filter;

  /* ensure circle stays circle */
  border-radius:999px;
}

.spot.one{width:540px;height:540px;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(236,72,153,.55),transparent 60%);left:-140px;top:10vh}
.spot.two{width:640px;height:640px;border-radius:999px;background:radial-gradient(circle at 40% 40%,rgba(139,92,246,.55),transparent 62%);right:-220px;top:22vh}
.spot.three{width:520px;height:520px;border-radius:999px;background:radial-gradient(circle at 50% 50%,rgba(255,107,107,.40),transparent 62%);left:20vw;bottom:-200px}

/* Background media (image/video) */
.bg-media{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bg-media img,.bg-media video{width:100%;height:100%;object-fit:cover}
.bg-media video{display:block}
.bg-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,13,.35),rgba(7,8,13,.92) 70%,rgba(7,8,13,1))}

/* HERO clean */
.hero-clean{display:grid;place-items:center;text-align:center;min-height:100vh;position:relative}
.hero-clean .wrap{width:min(1100px,92vw);padding:0 0 10vh}
.hero-clean .headline{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.05;font-weight:950;letter-spacing:-.02em;margin:0}
.hero-clean .subline{margin-top:18px;color:rgba(255,255,255,.75);font-weight:700;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.45}
.hero-clean .subline b{color:#fff}
.bg-media.hero-only:after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 700px at 70% 55%, rgba(255,255,255,.08), transparent 60%),linear-gradient(180deg, rgba(7,8,13,.35), rgba(7,8,13,.70) 55%, rgba(7,8,13,.92))}
.heroScreen .spot{display:none}

/* ======= CSS LOOP MARQUEES (smooth + cheap) ======= */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden}
.marquee .track{
  display:flex;gap:14px;align-items:center;white-space:nowrap;
  will-change:transform;
  animation:marqueeL 10s linear infinite;
}
@keyframes marqueeL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.pillcard{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.avatar{width:28px;height:28px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1px solid var(--line);display:grid;place-items:center;font-weight:900;color:rgba(255,255,255,.85);font-size:.9rem}
.pillcard .name{font-weight:900}
.pillcard .role{color:var(--muted2);font-weight:700;font-size:.85rem}

/* Video rows - pure CSS infinite loop */
.video-row{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02)}
.video-track{
  display:flex;gap:16px;padding:16px;white-space:nowrap;
  will-change:transform;
  animation:videoL 10s linear infinite;
}
.video-row.reverse .video-track{animation-name:videoR}
@keyframes videoL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes videoR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

.thumb{width:260px;min-width:260px;height:150px;border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.thumb:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 220px at 30% 40%,rgba(236,72,153,.18),transparent 60%),radial-gradient(500px 220px at 80% 70%,rgba(139,92,246,.18),transparent 60%)}
.thumb .cap{position:absolute;left:12px;bottom:10px;right:12px;font-weight:900}
.thumb .cap span{display:block;color:var(--muted2);font-size:.85rem;font-weight:800}

.thumb-1 { background: url('assets/img/thumbnails/1.jpg') no-repeat center center; background-size: cover; }
.thumb-2 { background: url('assets/img/thumbnails/2.jpg') no-repeat center center; background-size: cover; }
.thumb-3 { background: url('assets/img/thumbnails/3.jpg') no-repeat center center; background-size: cover; }
.thumb-4 { background: url('assets/img/thumbnails/4.jpg') no-repeat center center; background-size: cover; }
.thumb-5 { background: url('assets/img/thumbnails/5.jpg') no-repeat center center; background-size: cover; }
.thumb-6 { background: url('assets/img/thumbnails/6.jpg') no-repeat center center; background-size: cover; }
.thumb-7 { background: url('assets/img/thumbnails/7.jpg') no-repeat center center; background-size: cover; }
.thumb-8 { background: url('assets/img/thumbnails/8.jpg') no-repeat center center; background-size: cover; }
.thumb-9 { background: url('assets/img/thumbnails/9.jpg') no-repeat center center; background-size: cover; }
.thumb-10 { background: url('assets/img/thumbnails/10.jpg') no-repeat center center; background-size: cover; }
.thumb-11 { background: url('assets/img/thumbnails/11.jpg') no-repeat center center; background-size: cover; }
.thumb-12 { background: url('assets/img/thumbnails/12.jpg') no-repeat center center; background-size: cover; }
.thumb-13 { background: url('assets/img/thumbnails/13.jpg') no-repeat center center; background-size: cover; }
.thumb-14 { background: url('assets/img/thumbnails/14.jpg') no-repeat center center; background-size: cover; }
.thumb-15 { background: url('assets/img/thumbnails/15.jpg') no-repeat center center; background-size: cover; }
.thumb-16 { background: url('assets/img/thumbnails/16.jpg') no-repeat center center; background-size: cover; }

/* Steps + checks */
.step{display:flex;gap:14px;align-items:flex-start}
.step .num{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:grid;place-items:center;font-weight:950}
.check{display:flex;gap:10px;align-items:flex-start}
.check i{width:22px;height:22px;border-radius:7px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.28);display:grid;place-items:center;color:var(--green);font-style:normal;font-weight:950;flex:0 0 22px;margin-top:2px}
.cols{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.cols{grid-template-columns:1fr}}

/* Alternating */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.alt .imgph{height:320px;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(900px 380px at 30% 50%,rgba(139,92,246,.18),transparent 60%),radial-gradient(900px 380px at 70% 70%,rgba(236,72,153,.16),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.alt.rev .txt{order:2}
@media (max-width:980px){.alt{grid-template-columns:1fr}.alt.rev .txt{order:0}}

/* Pricing */
.pricingWrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:980px){.pricingWrap{grid-template-columns:1fr}}
.priceCard{position:relative;overflow:hidden}
.priceBig{font-size:clamp(2.2rem,3.5vw,3.5rem);font-weight:950}
.priceBig small{font-size:.9rem;color:var(--muted);font-weight:800}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-weight:800;font-size:.92rem}
.sideCard{display:flex;flex-direction:column;justify-content:space-between;min-height:420px}
.webflowTag{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-weight:900}

/* About */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
@media (max-width:980px){.about{grid-template-columns:1fr}}
.cutout{height:700px;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(900px 520px at 60% 30%,rgba(255,255,255,.10),transparent 60%),radial-gradient(900px 520px at 40% 80%,rgba(236,72,153,.12),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));position:relative;overflow:hidden}
.cutout .person{position:absolute;inset:auto 0 0 0;height:700px;display:grid;place-items:end}
.cutout .person span{display:block;margin:0 16px 16px auto;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:rgba(255,255,255,.82);font-weight:900}

/* FAQ */
.faq{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media (max-width:980px){.faq{grid-template-columns:1fr}}
.faqnav{position:sticky;top:96px}
.faqnav a{display:block;padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:900;border:1px solid transparent}
.faqnav a.active{background:rgba(255,255,255,.04);border-color:var(--line);color:#fff}
.q{padding:18px 0;border-bottom:1px solid var(--line)}
.q button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:12px;width:100%;font-weight:950;font-size:1.08rem}
.q .ans{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--muted);padding-right:38px}
.q.open .ans{max-height:380px;margin-top:10px}
.q .chev{width:28px;height:28px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.03)}

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0 calc(40px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.22);
  margin: 0; /* <- wichtig */
}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer .links{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted)}
.footer .pay{display:flex;gap:10px;flex-wrap:wrap}
.pay .p{padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:rgba(255,255,255,.78);font-weight:900;font-size:.82rem}

.reveal{opacity:0;transform:translateY(12px);transition:.55s ease}
.reveal.on{opacity:1;transform:translateY(0)}

/* About hover swap */
.aboutimg{background:url('assets/chris-1.jpg') no-repeat center center;background-size:100%;display:block;width:100%;height:700px;transition:all .4s}
.aboutimg:hover{background:url('assets/chris-2.jpg') no-repeat center center;background-size:100%;transition:all .4s}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .snap{scroll-behavior:auto}
  .reveal{transition:none}
  .marquee .track,.video-track{animation:none}
}

/* ===== Scrollbars (dark + brand) ===== */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(236,72,153,.55) rgba(255,255,255,.06);
}

/* Chromium + Safari (WebKit) */
::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-left: 1px solid rgba(255,255,255,.06);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(109,92,255,.85), rgba(236,72,153,.75), rgba(255,107,107,.75));
  border-radius: 999px;
  border: 3px solid rgba(12,14,20,.85); /* makes it look inset */
  box-shadow: 0 0 18px rgba(236,72,153,.25);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(109,92,255,.95), rgba(236,72,153,.9), rgba(255,107,107,.9));
}
::-webkit-scrollbar-corner{
  background: rgba(255,255,255,.03);
}

/* Optional: only the main scroll container gets the fancy bar */
.snap{
  scrollbar-color: rgba(236,72,153,.55) rgba(255,255,255,.06);
}
.snap::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
.snap::-webkit-scrollbar-thumb{
  border: 3px solid rgba(8,9,15,.85);
}

.img-usability {
  background: url('assets/Bedienung.jpg') no-repeat center center !important;
  background-size: 100% !important;
  transition: all .2s; 
}

.img-usability:hover {
  background-size: 105% !important;
  transition: all .2s;
}

.img-delivery {
  background: url('assets/Performance.jpg') no-repeat center center !important;
  background-size: 100% !important;
  transition: all .2s; 
}

.img-delivery:hover {
  background-size: 105% !important;
  transition: all .2s;
}

.img-service {
  background: url('assets/Service.jpg') no-repeat center center !important;
  background-size: 100% !important;
  transition: all .2s; 
}

.img-service:hover {
  background-size: 105% !important;
  transition: all .2s;
}

/* Contact grid responsive */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* Make form placeholder safe on mobile */
.form-placeholder{
  width:100%;
  max-width:100%;
  overflow:hidden;
  word-break:break-word;
}
.form-placeholder iframe,
.form-placeholder embed,
.form-placeholder object{
  width:100% !important;
  max-width:100% !important;
  border:0;
}

/* Optional: keep the two panels same height on desktop */
@media (min-width:981px){
  .contact-grid > .panel{ height:100%; }
}

.leform-element {
  clear: both;
  height: auto!important;
  padding: 0px !important;
  position: relative;
  border-radius: 15px;
}

.leform-element textarea,
.leform-element input {
  background: none !important;
  color: #ffffffbb !important;
}

div.leform-cr-container div.leform-cr-label label {
  color: #ffffffbb !important;
}

div.leform-cr-container div.leform-cr-label label a {
  color: #ffffffbb !important;
  font-weight: bold;
}

::placeholder {
  color: #ffffffbb !important;
}