:root{
  --bg:#070A10;--fg:#EEF4FF;--muted:#A6B0BD;
  --accent:#6ee7ff;--accent2:#7c3aed;
  --border:rgba(255,255,255,.14);--surface:rgba(255,255,255,.04);
  --shadow:0 20px 60px rgba(0,0,0,.55);--radius:24px;--nav-h:66px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(110,231,255,.12), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(124,58,237,.12), transparent 60%),
    var(--bg);
  color:var(--fg);line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.section{padding:92px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%)}
h1{font-size:clamp(24px,4.8vw,56px);line-height:1.02;margin:0 0 12px}
h2{font-size:clamp(24px,3vw,40px);line-height:1.2;margin:0 0 12px}
h3{margin:0 0 8px}
.lead{color:var(--muted);font-size:18px;max-width:78ch}
.small{color:rgba(238,244,255,.65);font-size:14px}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#0b0f17;border:1px solid var(--border);border-radius:12px;z-index:9999}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,10,16,.62);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand img{height:34px;width:auto;border-radius:10px}
.nav-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav-links a{color:rgba(238,244,255,.84);font-size:14px}
.nav-links a:hover{color:#fff}
.nav-links .nav-cta{padding:10px 12px;border-radius:999px;border:1px solid rgba(110,231,255,.35);background:rgba(110,231,255,.12);color:#fff}
.nav-links .nav-cta:hover{background:rgba(110,231,255,.18)}
.gsearch{display:flex;align-items:center;gap:8px;max-width:360px;flex:1 1 auto}
.gsearch input{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(238,244,255,.92);outline:none}
.gsearch input::placeholder{color:rgba(238,244,255,.55)}
.gsearch button{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;cursor:pointer}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:16px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:rgba(110,231,255,.35);background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(124,58,237,.14))}
.btn.sm{padding:10px 12px;border-radius:14px;font-size:14px}

/* HERO VIDEO STAGE */
.hero-stage{position:relative;--hero:100;min-height:calc(var(--hero)*1vh - var(--nav-h));height:calc(var(--hero)*1vh - var(--nav-h));overflow:hidden}
@supports (height: 100svh){.hero-stage{min-height:calc(var(--hero)*1svh - var(--nav-h));height:calc(var(--hero)*1svh - var(--nav-h));}}
.hero-stage .hero-video{position:absolute;inset:0}
.hero-stage video{width:100%;height:100%;object-fit:cover}
.hero-stage .hero-overlay{
  position:relative;z-index:2;min-height:calc(var(--hero)*1vh - var(--nav-h));
  display:flex;align-items:flex-end;
}
.hero-stage .hero-card{
  width:min(760px, 92vw);
  margin:0 0 60px 0;
  background:rgba(7,10,16,.65);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:26px 26px 22px 26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px) saturate(1.15);
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:rgba(238,244,255,.78);letter-spacing:.12em;text-transform:uppercase}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 4px rgba(110,231,255,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badge{font-size:13px;color:rgba(238,244,255,.78);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);padding:7px 10px;border-radius:999px}

/* BREADCRUMBS / SECTION SWITCH */
.crumbs{margin-top:10px;font-size:13px;color:rgba(238,244,255,.72);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:rgba(238,244,255,.86)}
.crumbs a:hover{color:#fff}
.crumbs .sep{color:rgba(238,244,255,.42)}
.section-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.section-switch .btn{border-radius:999px}
.scroll-hint{display:none}
.scroll-hint::after{content:"";display:block;width:1px;height:26px;background:rgba(238,244,255,.28);margin:10px auto 0}

/* CONTENT GRID */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.feature{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.shot{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.shot img{width:100%;height:220px;object-fit:cover}

/* SOCIAL / WA */
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.social-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.wa{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 50px rgba(0,0,0,.45);
}

/* CONTACT */
.contact-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:22px}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* FOOTER */
footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.10);color:rgba(238,244,255,.62);font-size:14px}
footer a{color:rgba(238,244,255,.82)}footer a:hover{color:#fff}



/* HOME HELPERS */
.bullets{margin:10px 0 0 18px;padding:0;color:rgba(238,244,255,.72)}
.bullets li{margin:4px 0}
.card-actions{margin-top:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}

/* FAQ */
.faq-list{max-width:900px;margin-top:18px}
.faq-list details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 16px;margin:12px 0}
.faq-list summary{cursor:pointer;font-weight:800;color:rgba(238,244,255,.92);list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list details[open]{border-color:rgba(110,231,255,.35);background:rgba(255,255,255,.045)}
.faq-list p{margin:10px 0 0 0;color:rgba(238,244,255,.72)}


/* MOBILE */
.hero-mobile{display:none}
@media (max-width:980px){
  .nav-links{display:none}.gsearch{display:none}
  .grid3,.features,.gallery,.grid2{grid-template-columns:1fr}
  .shot img{height:200px}
  .hero-stage .hero-card{margin-bottom:36px}
}
@media (max-width:520px){
  .hero-stage .hero-card{padding:22px}
  .wa-label{display:none}
}
@media (prefers-reduced-motion: reduce){
  .btn:hover,.social-btn:hover{transform:none}
}

.hero-lead-mobile { display: none; }

/*@media (max-width: 520px){
  .hero-lead-desktop { display: none !important; }
  .hero-lead-mobile  { display: block !important; }
}
*/


/* HOME / HERO VIDEO IMPROVEMENTS */
.hero-stage .hero-video{position:absolute;inset:0;overflow:hidden}
.hero-stage .hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,10,16,.35), rgba(7,10,16,.78) 68%, rgba(7,10,16,1));}
.hero-stage .hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* CARDS */
.card h3{margin-top:0}
.card .meta{color:rgba(238,244,255,.62);font-size:13px;margin-top:-4px}

/* SMALL IMAGE CARD */
.card-media{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);margin-top:12px}
.card-media img{width:100%;height:220px;object-fit:cover}

/* NAV MOBILE QUICK LINKS */
@media (max-width:980px){
  .nav-inner{justify-content:space-between}
}



@supports (height: 100svh){
  .hero-stage .hero-overlay{min-height:calc(var(--hero)*1svh - var(--nav-h));}
}


/* WHATSAPP FLOATING BUTTON IMPROVEMENTS */
.wa{gap:10px}
.wa-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#070A10;font-weight:900;font-size:12px;letter-spacing:.06em;
  box-shadow:0 0 0 4px rgba(110,231,255,.12);
}
.wa-label{display:inline}
@media (max-width:520px){
  .wa{right:14px;bottom:14px;padding:14px 16px}
  .wa-icon{width:34px;height:34px;font-size:13px}
  .wa-label{display:none}
}


/* MOBILE HERO TWEAKS */
/*@media (max-width:520px){
  .hero-stage .hero-card{padding:18px 18px 16px 18px;margin-bottom:22px}
  .hero-actions{gap:8px}
  .btn{padding:11px 14px;border-radius:14px}
}*/

/* HERO – MOBILE: mehr Video sichtbar, weniger Overlay */
@media (max-width: 520px){

  /* Video-Ausschnitt feinjustieren (je nach Motiv anpassen) */
  .hero-stage video{ object-position: 60% 30%; }
  

  
  /* Card kompakter */
  .hero-stage .hero-card{
    margin: 0 0 10px 0;
    padding: 12px 12px 12px 12px;
    border-radius: 16px;
  }

  /* Eyebrow kleiner */
  .hero-stage .eyebrow{
    font-size: 11px;
    letter-spacing: .08em;
  }

  /* Headline kleiner, spart Höhe */
  .hero-stage .hero-card h1{
    font-size: 28px;
    line-height: 1.06;
    margin: 6px 0 8px 0;
  }

  /* Hero-Text auf 3 Zeilen begrenzen (damit Video sichtbar bleibt) */
  .hero-stage .hero-card .hero-lead{
    font-size: 11px;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 0 0 0;
  }

  /* Badges auf Mobile ausblenden (spart viel Höhe) */
  .hero-stage .hero-card .badges{ display: none; }

  /* Buttons kompakter + 2 pro Zeile */
  .hero-stage .hero-actions{ gap: 8px; }
  .hero-stage .hero-actions .btn{
    flex: 1 1 calc(50% - 6px);
    padding: 10px 10px;
    border-radius: 13px;
  }

    /* "Keine Cookies…" kleiner */
  .hero-stage .hero-card .small{
    font-size: 12px;
    margin-top: 8px !important;
  }
}


/* MOBILE NAV (BURGER) **/
.nav-inner{position:relative}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;cursor:pointer}
.nav-toggle:active{transform:scale(.98)}
.nav-mobile{display:none}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-mobile{display:block;position:absolute;left:0;right:0;top:var(--nav-h);padding:12px 22px 18px;background:rgba(7,10,16,.92);backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-mobile a{display:block;padding:12px 10px;border-radius:14px;color:rgba(238,244,255,.9)}
  .nav-mobile a:hover{background:rgba(255,255,255,.04);color:#fff}
  .nav-mobile-cta{padding:10px 10px 0}
}

@media (max-width:980px){
  .shot img{ height:220px; }
}
@media (max-width:520px){
  .shot img{ height:200px; }
  .caption{ padding:10px 12px; font-size:12px; }
}

.nav-mobile[hidden]{display:none !important;}

/* Gallery: Bild gleich groß + Beschriftung */
.shot{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
}

.shot img{
  width:100%;
  height:220px;          /* bleibt überall gleich */
  object-fit:cover;
  object-position:center;
  display:block;
}

.caption{
  padding:10px 12px;
  font-size:13px;
  color:rgba(238,244,255,.72);
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(7,10,16,.25);
}
/* FIX: figure hat default margin -> macht die Box schmaler */
figure.shot{ margin:0; }
/*whatsapp icon
.wa-icon{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.wa-icon svg{ width:18px;height:18px; }*/
/* Cards in grids: gleiche Höhe + Footer (Bild/CTA) unten */