@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#050c14;
  --bg2:#07111c;
  --panel:#07121f;
  --panel2:#091625;
  --line:#223348;
  --line2:#15365f;
  --text:#f3f7fb;
  --muted:#aab6c5;
  --blue:#0877ff;
  --blue2:#0e8cff;
  --shadow:0 24px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
#leistungen,#ueber-uns,#kontakt{scroll-margin-top:150px}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 70% 10%,rgba(0,89,190,.10),transparent 35%),
    linear-gradient(180deg,#050b12 0%,#06101a 50%,#040a11 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 44px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(4,11,18,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(90,120,150,.08)
}
.nav-wrap{
  min-height:140px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px
}
.brand{display:flex;align-items:center;gap:14px;min-width:max-content}
.brand-logo{height:112px;width:auto;display:block}
.nav{display:flex;justify-content:center;gap:42px;font-size:17px;color:#d5dce5}
.nav a{padding:35px 0 27px;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:#1785ff;border-color:#0c74ff}
.phone{
  border:1px solid #0c64d7;
  color:#1983ff;
  border-radius:5px;
  padding:13px 20px;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(8,119,255,.08)
}
.phone-icon{margin-right:10px}
.header-contact{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.header-address{font-size:14px;font-weight:600;color:#a8b3c2;white-space:nowrap}
.menu-btn{display:none}

.hero{
  position:relative;
  min-height:410px;
  overflow:hidden;
  border-bottom:1px solid rgba(50,80,110,.13)
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#06101a 0%,#06101a 34%,rgba(6,16,26,.84) 51%,rgba(6,16,26,.18) 71%,rgba(6,16,26,.14) 100%),
    linear-gradient(180deg,rgba(4,11,18,.1),rgba(4,11,18,.45)),
    url('assets/zurich-night.jpg') right center/61% 100% no-repeat;
  filter:saturate(.9) contrast(1.05)
}
.hero-grid{position:relative;z-index:2;padding-top:156px}
.hero-copy{max-width:600px}
.eyebrow{color:#087cff;font-size:14px;font-weight:600;letter-spacing:.14em;margin-bottom:14px}
.eyebrow.small{font-size:10px;margin-bottom:10px}
.hero h1{font-size:43px;line-height:1.08;margin:0;font-weight:650;letter-spacing:-1.5px}
.hero h1 span{color:#087cff}
.accent-line{width:56px;height:3px;background:#087cff;margin:18px 0 22px;border-radius:3px}
.hero p{font-size:16px;line-height:1.75;color:#c7d1dc;margin:0}

.service-section{padding:2px 0 32px}
.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:-1px
}
.service-card-wide{
  grid-column:1/-1;
  grid-template-columns:112px 1fr;
  max-width:calc(50% - 8px);
  margin:0 auto
}
.service-card{
  min-height:300px;
  display:grid;
  grid-template-columns:112px 1fr;
  gap:18px;
  padding:30px 30px 28px 26px;
  background:linear-gradient(180deg,rgba(7,18,31,.96),rgba(5,14,24,.96));
  border:1px solid #243347;
  border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.01)
}
.service-icon{padding-top:2px}
.service-icon svg{
  width:84px;height:84px;
  fill:none;
  stroke:#1781ff;
  stroke-width:2.2;
  filter:drop-shadow(0 0 10px rgba(8,119,255,.20))
}
.service-icon svg > circle:first-child{stroke:#7655ff;stroke-width:1.5}
.service-card h2{font-size:22px;margin:0 0 10px;font-weight:600;letter-spacing:-.3px}
.service-card p{margin:0 0 14px;color:#b8c2ce;font-size:13px;line-height:1.55}
.service-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:#c9d1da;font-size:14.5px}
.service-card li{display:flex;align-items:flex-start}
.service-card li::before{content:"✓";color:#087cff;margin-right:10px;font-weight:700;flex-shrink:0;line-height:1.5}

.concept-section{padding:0 0 28px}
.concept-card{
  display:grid;
  grid-template-columns:48% 52%;
  min-height:350px;
  background:linear-gradient(180deg,rgba(6,16,27,.95),rgba(5,14,23,.98));
  border:1px solid #213247;
  border-radius:5px;
  overflow:hidden
}
.concept-copy{padding:34px 12px 30px 28px;position:relative;z-index:2}
.concept-copy h2{font-size:26px;margin:0 0 13px}
.concept-copy>p{color:#c0cad5;font-size:14.5px;line-height:1.7;max-width:510px}
.steps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px}
.step{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:start}
.step-symbol{grid-row:1/3;font-size:25px;color:#0b83ff;line-height:1}
.step strong{font-size:16px}
.step span{font-size:14px;line-height:1.45;color:#aebac6;margin-top:5px}
.concept-visual{
  position:relative;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,91,220,.18),transparent 45%),
    linear-gradient(90deg,rgba(5,14,23,.92),rgba(5,14,23,.14) 18%,rgba(5,14,23,.06));
  min-height:350px;
  overflow:hidden
}
.concept-visual img{
  width:100%;
  max-width:none;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:.96
}

.cta-section{padding-bottom:28px}
.cta-card{
  min-height:172px;
  display:grid;
  grid-template-columns:230px 360px 1fr;
  gap:22px;
  align-items:center;
  padding:23px 24px;
  border:1px solid #0b4d9b;
  border-radius:5px;
  background:linear-gradient(180deg,#071522,#06101b)
}
.cta-brand img{width:200px}
.cta-main{border-right:1px solid #233548;padding-right:24px}
.cta-main h2{font-size:24px;line-height:1.35;margin:0 0 8px}
.cta-main p{font-size:15px;color:#aab6c4;margin:0 0 16px}
.cta-buttons{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:4px;font-size:15px;font-weight:600
}
.btn.primary{background:#0877ff;border:1px solid #0877ff;color:white}
.btn.secondary{border:1px solid #4b5a6b;color:#f2f5f8;background:#08111c}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);height:100%}
.benefit{padding:20px 18px;border-left:1px solid #233548;display:flex;flex-direction:column;justify-content:flex-start}
.benefit-icon{margin-bottom:10px}
.benefit-icon svg{width:42px;height:42px;fill:none;stroke:#0784ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.benefit strong{font-size:15px;margin-bottom:6px;display:block;min-height:2.6em;line-height:1.3}
.benefit span{font-size:13px;line-height:1.55;color:#aab6c4}

.footer{
  border-top:1px solid rgba(38,61,84,.15);
  background:#050b12;
  color:#7e8b9a;
  font-size:11px
}
.footer-main{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:40px;
  padding:56px 0 40px;
  border-bottom:1px solid rgba(38,61,84,.25);
}
.footer-logo{height:52px;width:auto;margin-bottom:16px}
.footer-brand p{font-size:13px;line-height:1.7;color:#8b97a6;max-width:340px;margin:0}
.footer-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#5c6b7d;margin:0 0 16px;font-weight:600}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;color:#c3ccd7}
.footer-col a:hover{color:#1785ff}
.footer-row{min-height:64px;display:flex;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:60px}

@media (max-width: 980px){
  .nav-wrap{grid-template-columns:auto 1fr auto}
  .brand-logo{height:96px}
  .nav{gap:22px}
  .header-contact{display:none}
  .cta-card{grid-template-columns:180px 1fr}
  .benefits{grid-column:1/-1;border-top:1px solid #233548;padding-top:18px}
  .benefit:first-child{border-left:0}
}

.info-section{padding:70px 0 80px;background:linear-gradient(180deg,rgba(2,8,14,.96),#03070d);border-top:1px solid var(--line)}
.section-heading{text-align:center;margin-bottom:36px}
.section-heading h2{font-size:32px;margin:0}
.hero-style-heading{text-align:left}
.hero-style-heading h2{font-size:43px;line-height:1.08;font-weight:650;letter-spacing:-1.5px;margin:0}
.hero-style-heading h2 span{color:#087cff}
.hero-style-heading .accent-line{margin:18px 0 0}
.eyebrow.centered{justify-content:center;display:flex}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.info-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 30px;
}
.info-card h3{font-size:21px;margin:0 0 14px;color:var(--text)}
.info-card .lead{font-size:15px;line-height:1.7;color:#c7d1dc;margin:0 0 18px}
.info-card details{border-top:1px solid var(--line);padding-top:16px}
.info-card summary{
  cursor:pointer;
  list-style:none;
  color:var(--blue2);
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.info-card summary::-webkit-details-marker{display:none}
.info-card summary::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid var(--blue2);
  border-bottom:2px solid var(--blue2);
  transform:rotate(45deg);
  transition:transform .2s;
  margin-left:2px;
}
.info-card details[open] summary::after{transform:rotate(-135deg)}
.info-card details[open] summary{margin-bottom:16px}
.details-body p{font-size:14.5px;line-height:1.75;color:#c0cad5;margin:0 0 14px}
.details-body p:last-child{margin-bottom:0}
.details-body strong{color:var(--text);font-size:15px}

@media (max-width: 760px){
  .container{width:min(100% - 28px,700px)}
  .site-header{position:sticky}
  .nav-wrap{min-height:110px;grid-template-columns:1fr auto}
  .brand-logo{height:84px}
  .menu-btn{
    display:block;background:transparent;border:1px solid #1c3e68;border-radius:5px;
    color:#1886ff;font-size:21px;padding:7px 11px
  }
  .nav{
    display:none;position:absolute;left:14px;right:14px;top:70px;
    flex-direction:column;gap:0;padding:10px;
    background:#06111d;border:1px solid #21364e;border-radius:6px
  }
  .nav.open{display:flex}
  .nav a{padding:15px 13px;font-size:18px;border-bottom:1px solid #16263a}
  .hero{min-height:430px}
  .hero-bg{
    background:
      linear-gradient(180deg,#06101a 0%,rgba(6,16,26,.96) 36%,rgba(6,16,26,.62) 100%),
      url('assets/zurich-night.jpg') center bottom/cover no-repeat
  }
  .hero-grid{padding-top:28px}
  .hero h1{font-size:37px}
  .hero p{font-size:14px}.desktop{display:none}
  .service-grid{grid-template-columns:1fr}
  .service-card{grid-template-columns:76px 1fr;padding:24px 20px;min-height:auto}
  .service-card-wide{max-width:100%}
  .service-icon svg{width:62px;height:62px}
  .service-card h2{font-size:19px}
  .concept-card{grid-template-columns:1fr}
  .concept-copy{padding:28px 22px 14px}
  .concept-visual{min-height:280px}
  .concept-visual img{width:100%;height:100%;object-fit:contain}
  .steps{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr;padding:22px}
  .cta-brand img{width:185px}
  .cta-main{border-right:0;padding-right:0}
  .benefits{grid-template-columns:1fr;border-top:1px solid #233548}
  .benefit{border-left:0;border-top:1px solid #1f3044;padding:15px 0}
  .benefit:first-child{border-top:0}
  .footer-row{flex-direction:column;justify-content:center;gap:15px;padding:22px 0}
  .footer-links{gap:24px}
  .footer-main{grid-template-columns:1fr;gap:32px;padding:40px 0 32px}
  .footer-brand p{max-width:100%}
  .info-grid{grid-template-columns:1fr}
  .info-card{padding:26px 22px}
  #leistungen,#ueber-uns,#kontakt{scroll-margin-top:120px}
}