/* ----------------------------------------------------
   Global colour & typography ─ pulled from the logo
   ---------------------------------------------------- */
:root {
  --primary: #07071b;          /* very deep navy (roof)          */
  --primary-light: #11112d;    /* a step lighter for panels      */
  --accent:  #12b1ff;          /* bright cyan (check-mark)       */
  --accent-dark: #0d99e6;
  --accent-light: #39c7ff;
  --background: #f4f7fa;
  --text: #21222c;
  --radius: 14px;
  --shadow-sm: 0 3px 10px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; }

/* ----------------------------------------------------
   Base
   ---------------------------------------------------- */
body{
  font-family:"Inter", Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--background);
  line-height:1.6;
}

/* utility */
.container{
  width:92%;
  max-width:1200px;
  margin-inline:auto;
}
.section-heading{
  text-align:center;
  font-size:clamp(1.8rem, 2vw + 1rem, 2.4rem);
  margin-bottom:2.5rem;
  color:var(--primary);
  position:relative;
  display:inline-block;
}

/* tiny cyan underline under each H2 */
.section-heading::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-10px;
  width:60px; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  border-radius:2px;
}
.section-heading.light{ color:#fff; }

/* ----------------------------------------------------
   Header / Navigation
   ---------------------------------------------------- */
header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,0.90);
  backdrop-filter:saturate(180%) blur(12px);
  transition:box-shadow .3s;
}
header.scrolled{        /* gets added by JS */
  box-shadow:var(--shadow-sm);
}

.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 0;
}
.nav img{ height:48px; }

.nav-links{
  display:flex; gap:2.2rem; list-style:none;
}
.nav-links a{
  text-decoration:none;
  color:var(--primary);
  font-weight:600;
  position:relative;
}
.nav-links a::after{   /* hover underline */
  content:""; position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--accent);
  transition:width .25s;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ width:100%; }

/* burger */
.burger{
  display:none; flex-direction:column; gap:4px;
  background:transparent; border:0; cursor:pointer;
}
.burger span{
  width:26px; height:3px; background:var(--primary);
  transition:transform .3s, opacity .3s;
}
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------
   Hero
   ---------------------------------------------------- */
.hero{
  position:relative;
  padding:7rem 1rem 10rem;
  color:#fff;
  text-align:center;
  overflow:hidden;
  background:var(--primary);
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
}
/* cyan overlay echoing the check-mark */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(130deg, transparent 20%, var(--accent) 120%);
  opacity:.15; mix-blend-mode:screen;
}
/* subtle diagonal grid to add depth */
.hero::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.04) 0 2px,
    transparent 2px 20px
  );
  opacity:.3;
}
.hero-logo{ width:120px; margin-bottom:1.6rem; }
.hero h1{
  font-size:clamp(2rem,4vw + 1rem,3.4rem);
  font-weight:600; margin-bottom:1rem;
}
.hero p{
  font-size:1.2rem;
  max-width:700px; margin:0 auto 2.2rem;
}
.btn-primary{
  display:inline-block;
  font-size:1.05rem; font-weight:500; letter-spacing:.3px;
  padding:.9rem 2.3rem;
  color:#fff; text-decoration:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-light));
  border-radius:50px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  filter:brightness(1.05);
}

/* ----------------------------------------------------
   Leistungen / Services
   ---------------------------------------------------- */
#leistungen{ padding:5rem 0; background:#fff; }
.services-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.service{
  background:var(--background);
  padding:2.3rem 1.8rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  text-align:center;
  border-top:4px solid var(--accent);
  transition:transform .3s, box-shadow .3s;
}
.service:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
.service i{
  font-size:2.8rem; color:var(--accent); margin-bottom:1rem;
}
.service h3{ margin-bottom:.6rem; font-size:1.25rem; }

/* ----------------------------------------------------
   Projekte  (Before / After slider)
   ---------------------------------------------------- */
#projekte{ padding:5rem 0; }
.projects-intro{
  text-align:center; max-width:700px; margin:0 auto 3rem;
}
.projects-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.before-after{
  position:relative;
  overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.before-after img{ width:100%; height:100%; object-fit:cover; display:block; }
.before-after img.after{
  position:absolute; inset:0; opacity:0; transition:opacity .55s;
}
.before-after:hover img.after,
.before-after:focus-within img.after{ opacity:1; }
/* labels */
.before-after .label{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(7,7,27,.85); color:#fff;
  padding:.35rem 1rem; font-size:.8rem;
  border-radius:50px; text-transform:uppercase;
  pointer-events:none; user-select:none;
}
.before-after .label.after{ opacity:0; transition:opacity .3s; }
.before-after:hover .label.before,
.before-after:focus-within .label.before{ opacity:0; }
.before-after:hover .label.after,
.before-after:focus-within .label.after{ opacity:1; }

/* ----------------------------------------------------
   Über Uns
   ---------------------------------------------------- */
#ueber-uns{ padding:5rem 0; }
#ueber-uns .content{ display:flex; flex-direction:column; gap:2rem; }
#ueber-uns p{
  max-width:900px; margin-inline:auto; text-align:center;
}

/* ----------------------------------------------------
   Kontakt
   ---------------------------------------------------- */
#kontakt{
  background:var(--primary-light);
  color:#fff;
  padding:5rem 0 2.8rem;
  clip-path:polygon(0 0,100% 0,100% 100%,0 90%);
}
.contact-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
#kontakt h3{ display:flex; align-items:center; gap:.6rem; }
#kontakt a{
  color:var(--accent); text-decoration:none;
  transition:color .25s;
}
#kontakt a:hover{ color:var(--accent-light); }

/* ----------------------------------------------------
   Footer
   ---------------------------------------------------- */
footer{
  background:#050514; color:#a9aab8;
  text-align:center; padding:1.2rem 0; font-size:.85rem;
}

/* ----------------------------------------------------
   Responsive Navigation
   ---------------------------------------------------- */
@media(max-width:768px){
  .burger{ display:flex; }
  .nav-links{
    position:absolute; top:100%; right:1.5rem;
    background:#fff;
    width:220px; flex-direction:column; gap:1.3rem;
    padding:1.5rem;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    transform:translateX(120%);
    transition:transform .3s ease-in-out;
  }
  .nav-links.open{ transform:translateX(0); }
  /* bigger hit-area for touch */
  .nav-links a{ padding:.3rem 0; }
}