/* ===============================
   RESET + BASE
================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:#0b1220;}
body{
  position:relative;
  overflow-x:hidden;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:#eaf0ff;
}

/* FIX: iOS/Android Background springt nicht */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(59,130,246,0.26), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(900px 520px at 70% 90%, rgba(124,58,237,0.12), transparent 60%),
    linear-gradient(180deg,#070b1a,#0b1220);
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
main{min-height:70vh;}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ===============================
   HEADER
================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(7,11,26,0.86);
  border-bottom:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(12px);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

/* Brand: Logo oben + Text darunter */
.brand-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* Logo: größer steuerbar */
.brand-logo{
  height:160px;
  width:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

.brand-text{
  font-weight:800;
  font-size:14px;
  color:rgba(234,240,255,0.95);
  letter-spacing:.2px;
}

/* Nav Buttons */
.site-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.nav-btn{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  font-weight:800;
  font-size:14px;
  color:rgba(234,240,255,0.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-btn:hover{background:rgba(255,255,255,0.12);}
.nav-btn.is-active{
  background:rgba(59,130,246,0.18);
  border-color:rgba(59,130,246,0.30);
}
.nav-primary{
  background:linear-gradient(90deg,#00d2ff,#3a7bfd);
  color:#061020;
  border-color:rgba(255,255,255,0.06);
  box-shadow:0 12px 30px rgba(0,210,255,0.18);
}

/* ===============================
   HERO
================================ */
.hero{padding:72px 0 46px;}

.hero-box{
  border-radius:22px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(90deg,rgba(59,130,246,0.20),rgba(34,211,238,0.10),rgba(124,58,237,0.10));
}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:22px;
  align-items:center;
}

.badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(7,11,26,0.55);
  border:1px solid rgba(255,255,255,0.14);
  font-size:12px;
  color:rgba(255,255,255,0.92);
  margin-bottom:12px;
}

.hero h1{
  font-size:44px;
  line-height:1.12;
  margin:0 0 10px;
}
.hero p{
  color:rgba(234,240,255,0.82);
  line-height:1.65;
  font-size:16px;
  max-width:70ch;
}

.hero-actions{margin-top:42px;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:rgba(234,240,255,0.92);
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,0.12);}
.btn-primary{
  background:linear-gradient(90deg,#00d2ff,#3a7bfd);
  color:#061020;
  border-color:rgba(255,255,255,0.06);
  box-shadow:0 12px 30px rgba(0,210,255,0.20);
}

/* Profile */
.profile-card{
  background:rgba(7,11,26,0.45);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:14px;
  text-align:center;
}

.profile-img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  border-radius:16px;
  background:rgba(7,11,26,0.35);
}

.profile-name{
  margin-top:10px;
  font-weight:900;
  font-size:16px;
}
.profile-role{
  margin-top:4px;
  font-size:13px;
  color:rgba(234,240,255,0.70);
}

/* List */
.service-list{margin-top:40px;max-width:760px;}
.service-list .item{margin-bottom:18px;}
.service-list strong{display:block;font-size:15px;font-weight:900;margin-bottom:4px;}
.service-list p{font-size:14px;color:rgba(234,240,255,0.72);line-height:1.65;}

/* ===============================
   PAGES / SECTION
================================ */
.section{padding:70px 0;}
.page-title{font-size:34px;margin-bottom:10px;}
.lead{color:rgba(234,240,255,0.75);line-height:1.6;max-width:70ch;}

/* Accordion */
.acc{margin-top:22px;max-width:900px;}
.acc-item{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  margin-bottom:12px;
  overflow:hidden;
}
.acc-summary{padding:14px 16px;cursor:pointer;font-weight:900;}
.acc-body{padding:0 16px 16px;color:rgba(234,240,255,0.75);line-height:1.6;}
.acc-body ul{padding-left:18px;margin-top:10px;}

/* Contact form */
.contact-form{
  margin-top:22px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:22px;
  background:rgba(255,255,255,0.04);
  padding:18px;
  max-width:860px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.input,.textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:16px;
}
.textarea{min-height:220px;margin-top:14px;resize:vertical;}

.success-box,.error-box{
  margin-top:18px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
}
.success-box{border-color:rgba(0,200,140,0.35);background:rgba(0,200,140,0.14);}
.error-box{border-color:rgba(220,60,60,0.35);background:rgba(220,60,60,0.14);}

/* ===============================
   FOOTER
================================ */
.site-footer{
  padding:44px 0 18px;
  background:rgba(7,11,26,0.92);
  border-top:1px solid rgba(255,255,255,0.10);
}
.footer-row{
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.8fr;
  gap:28px;
  align-items:start;
}
.footer-brand{font-weight:900;font-size:16px;margin-bottom:8px;}
.footer-sub{font-size:13px;line-height:1.6;color:rgba(233,239,255,0.70);max-width:52ch;}
.footer-mail{display:inline-block;margin-top:10px;font-size:13px;color:rgba(233,239,255,0.82);}
.footer-links a{display:block;font-size:13px;padding:6px 0;color:rgba(233,239,255,0.72);}
.footer-links a:hover,.footer-mail:hover{color:rgba(233,239,255,0.95);}
.footer-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:center;
  font-size:12px;
  color:rgba(233,239,255,0.55);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-row{grid-template-columns:1fr;gap:16px;}
}

@media (max-width:600px){
  .header-row{
    flex-direction:row;
    align-items:flex-start;
  }

  /* Brand etwas kompakter auf Mobile */
  .brand-logo{height:160px;}
  .brand-text{font-size:13px;}

  /* Nav rechts in 1 Spalte (wie bei dir) */
  .site-nav{
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
  }

  .hero{padding:60px 0 40px;}
  .hero h1{font-size:36px;}
}
/* ===============================
   BURGER + MOBILE MENU
================================ */

/* Desktop: Burger aus, Desktop-Nav an */
.burger{ display:none; }

/* Mobile Menu default hidden handled via [hidden] attribute */
.mobile-menu[hidden]{ display:none; }

@media (max-width: 600px){

  .burger{
    width: 56px;                 /* ⬅ größer */
    height: 56px;                /* ⬅ größer */
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.10);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;                    /* Abstand zwischen Linien */
    cursor: pointer;
  }

  .burger span{
    width: 26px;                 /* ⬅ längere Linien */
    height: 2.5px;               /* ⬅ etwas kräftiger */
    background: rgba(235,240,255,0.95);
    border-radius: 999px;
    display: block;
  }

}

  /* Mobile Menu Panel */
  .mobile-menu{
    border-top:1px solid rgba(255,255,255,0.10);
    background:rgba(7,11,26,0.92);
    backdrop-filter:blur(12px);
  }

  .mobile-menu-inner{
    padding:12px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .m-link{
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    font-weight:800;
    color:rgba(234,240,255,0.92);
  }

  .m-link:hover{
    background:rgba(255,255,255,0.10);
  }

  .m-link.is-active{
    background:rgba(59,130,246,0.18);
    border-color:rgba(59,130,246,0.30);
  }

  .m-cta{
    background:linear-gradient(90deg,#00d2ff,#3a7bfd);
    color:#061020;
    border-color:rgba(255,255,255,0.06);
    box-shadow:0 12px 30px rgba(0,210,255,0.18);
  }

  /* Optional: Seite beim offenen Menü minimal „locked“ */
  body.menu-open{
    overflow:hidden;
  }
@media (max-width: 600px){
  .site-nav-desktop{
    display: none !important;
  }
}