:root{
  --primary:#064e3b;
  --bg:#f5f5f4;
  --text:#111827;
  --white:#ffffff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
}
section{scroll-margin-top:90px}

/* NAVBAR */
.navbar{
  position:fixed; left:0; right:0; top:0;
  z-index:100;
  background:transparent;
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;

}
.navbar-scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  backdrop-filter:blur(12px);
  
}


.navbar-container{
  max-width:1200px; margin:0 auto;
  padding:.75rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-logo{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--text); font-weight:600;
    color: white;
}
.navbar-logo img{height:40px;width:auto}
.navbar-links{
  list-style:none; display:flex; gap:1.5rem;
  margin:0; padding:0;
}
.navbar-links a{
  text-decoration:none; color:var(--text);
  font-weight:500; font-size:.95rem; position:relative;
    color: white;
}


.navbar-scrolled .navbar-links a{
    color: black !important;
}

.navbar-scrolled .navbar-logo{
    color: black !important;
}
.navbar-links a::after{
  content:""; position:absolute; left:0; bottom:-.2rem;
  width:0; height:2px; background:var(--primary);
  transition:width .2s ease;
}
.navbar-links a:hover::after{width:100%}
.navbar-toggle{
  display:none; background:none; border:none; cursor:pointer;
}
.navbar-toggle span{
  display:block; width:22px; height:2px;
  background:var(--text); margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.navbar-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navbar-toggle.is-open span:nth-child(2){opacity:0}
.navbar-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* HERO */
.hero{
  position:relative; height:100vh; min-height:650px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:url("../img/hero-bg.jpg") center/cover no-repeat;
}
.hero-gradient{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.75) 80%, rgba(0,0,0,.85) 100%);
}
.hero-inner{position:relative; z-index:2; max-width:900px; padding:2rem}
.hero-title{
  font-size:clamp(2.5rem,5vw,3.5rem);
  font-weight:600; line-height:1.2; margin-bottom:1.5rem;
}
.hero-title::after{
  content:""; display:block; width:140px; height:3px;
  background:#fff; opacity:.85; margin:1rem auto 0;
}
.hero-subtitle{
  max-width:700px; margin:1.5rem auto 2.5rem;
  font-size:1.1rem; line-height:1.7; color:#d1d5db;
}
.hero-btn{
  display:inline-block;
  background:var(--primary);
  padding:.9rem 1.8rem;
  border-radius:8px;
  color:#fff; font-weight:600; text-decoration:none;
  transition:background-color .2s ease, transform .15s ease;
}
.hero-btn:hover{background:#046145; transform:translateY(-2px)}

/* SECTIONS */
.section{padding:5rem 1.5rem}
.section-alt{background:var(--white)}
.section-header{max-width:800px;margin:0 auto 3rem;text-align:center}
.section-header p{color:#4b5563}
.section-title-large{
  font-size:clamp(2.4rem,5vw,3rem);
  font-weight:700; margin-bottom:.75rem;
}
.no-underline::after{display:none!important}

/* BUTTON */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.5rem; border-radius:999px;
  font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:var(--primary); color:#fff;
  box-shadow:0 10px 25px rgba(6,78,59,.35);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 35px rgba(6,78,59,.45);
}

/* SERVICES */
.services-list{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:3rem}
.service-item{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center}
.service-image{height:260px;border-radius:1.25rem;background-size:cover;background-position:center;box-shadow:0 18px 35px rgba(15,23,42,.18)}
.service-content{background:#fff;border-radius:1.25rem;padding:1.75rem 2rem;box-shadow:0 18px 35px rgba(15,23,42,.08)}
.service-content p{color:#4b5563;line-height:1.6}
.service-item--reverse{grid-template-columns:1fr 1.1fr}
.service-item--reverse .service-image{order:2}
.service-item--reverse .service-content{order:1}
.service-btn{
  display:inline-block;margin-top:1.2rem;
  padding:.65rem 1.4rem;background:var(--primary);
  color:#fff;border-radius:8px;text-decoration:none;font-weight:600;
  box-shadow:0 6px 15px rgba(6,78,59,.25);
}
.service-btn:hover{background:#046145;transform:translateY(-2px)}

/* ABOUT GRID */
.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.about-card{background:#fff;border-radius:1.5rem;box-shadow:0 15px 30px rgba(15,23,42,.08);overflow:hidden;height:360px;display:flex}
.about-card--text{flex-direction:column;padding:1.8rem 1.6rem;justify-content:space-between}
.about-card--text p{color:#4b5563;line-height:1.6}
.about-card-image{width:100%;height:100%;background-size:cover;background-position:center}
.about-btn{
  display:inline-block;margin-top:1.2rem;padding:.55rem 1.3rem;
  background:var(--primary);color:#fff;border-radius:999px;text-decoration:none;font-weight:600;
  box-shadow:0 6px 16px rgba(6,78,59,.28);
}
.about-btn:hover{background:#046145;transform:translateY(-2px)}

/* PROCESS */
.process-row{max-width:1200px;margin:0 auto;display:flex;align-items:stretch;justify-content:center;gap:2rem}
.process-card{
  flex:1 1 0;background:#fff;border-radius:1.5rem;padding:2rem 1.5rem;
  text-align:center;box-shadow:0 15px 30px rgba(15,23,42,.08);
  display:flex;flex-direction:column;justify-content:center;
}
.process-card i{font-size:2.5rem;color:var(--primary);margin-bottom:1rem}
.process-card p{color:#4b5563;line-height:1.6}
.process-arrow{display:flex;align-items:center;justify-content:center}
.process-arrow i{font-size:2.3rem;color:var(--primary)}

/* FAQ */
.faq-container{max-width:900px;margin:0 auto;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.faq-item{border-bottom:1px solid #e5e7eb}
.faq-question{
  width:100%;padding:1.25rem 0;background:transparent;border:none;
  display:flex;justify-content:space-between;cursor:pointer;text-align:left;font:inherit;
}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;padding-right:3rem}
.faq-answer p{margin:0 0 1.25rem 0;color:#4b5563;line-height:1.7}
.faq-item.is-open .faq-question i{transform:rotate(180deg)}
.faq-item.is-open .faq-answer{max-height:300px}

/* CONTACT */
.contact-layout{max-width:1200px;margin:0 auto;display:grid;gap:2.5rem;grid-template-columns:1.2fr 1fr}
.contact-form{background:#fff;border-radius:1.5rem;padding:2rem;box-shadow:0 15px 35px rgba(15,23,42,.08)}
.form-row{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.form-group{display:flex;flex-direction:column;gap:.25rem}
.form-group label{font-size:.9rem;font-weight:500}
.form-group input,.form-group textarea{border-radius:.75rem;border:1px solid #e5e7eb;padding:.6rem .75rem;font:inherit}
.checkbox{display:inline-flex;gap:.5rem;font-size:.85rem;margin:1rem 0}
.contact-info-card{padding:2rem;border-radius:1.5rem;border:1px solid #e5e7eb;background:linear-gradient(145deg,#ecfdf5,#f9fafb)}
.contact-map-placeholder{margin-top:1.5rem;border-radius:1rem;border:1px dashed #a3a3a3;height:180px;display:flex;align-items:center;justify-content:center;color:#6b7280}

/* ALERTS */
.alert{max-width:800px;margin:0 auto 1.5rem;padding:.85rem 1rem;border-radius:.75rem}
.alert-success{background:#dcfce7;color:#166534}
.alert-error{background:#fee2e2;color:#b91c1c}

/* FOOTER */
.footer{background:#0e2d16;color:#e5e7eb;padding-top:3rem}
.footer-container{max-width:1200px;margin:0 auto;padding:0 1.5rem 2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer-bottom{border-top:1px solid #374151;padding:1rem 1.5rem 1.5rem;text-align:center;font-size:.85rem}
.footer-links{margin-top:.6rem;display:flex;gap:.5rem;justify-content:center}
.footer-links a{color:#e5e7eb;text-decoration:none;opacity:.9}
.footer-links a:hover{opacity:1;text-decoration:underline}

/* LEGAL */
.legal-page .section{padding-top:7rem}
.legal-container{max-width:900px;margin:0 auto}
.legal-container p{color:#4b5563;line-height:1.7}

/* RESPONSIVE */
@media (max-width:1100px){.about-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .service-item,.service-item--reverse{grid-template-columns:1fr}
  .service-item--reverse .service-image,.service-item--reverse .service-content{order:unset}
  .contact-layout{grid-template-columns:1fr}
  .process-row{flex-direction:column}
  .process-arrow i{transform:rotate(90deg)}
}
@media (max-width:768px){
  .navbar-toggle{display:block}
  .navbar-links{
    position:absolute; top:100%; right:1.5rem; left:1.5rem;
    background:#fff;border-radius:1rem;box-shadow:0 15px 35px rgba(15,23,42,.15);
    padding:.75rem 0;flex-direction:column;gap:.25rem;
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .navbar-links a{padding:.5rem 1rem;display:block;color:var(--text);}
  .navbar-links.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .form-row{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}



/* ============================
   SERVICE SUBPAGES (Leistungen)
   ============================ */

.service-page .section-header { margin-bottom: 2.5rem; }

.service-hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:7rem 1.5rem 4rem;
}
.service-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.75) 80%, rgba(0,0,0,.85) 100%);
}
.service-hero-inner{
  position:relative; z-index:2;
  max-width:950px;
}
.service-kicker{ opacity:.9; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .75rem; font-size:.85rem; }
.service-hero-inner h1{ margin:0 0 1rem; font-size:clamp(2rem,4.5vw,3.1rem); font-weight:700; }
.service-lead{ color:#d1d5db; line-height:1.7; max-width:760px; margin:0 auto 1.6rem; }
.service-hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.service-btn-secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.8);
  color:#fff;
  border-radius:999px;
  padding:.75rem 1.5rem;
}
.service-btn-secondary:hover{ background:rgba(255,255,255,.08); }

.service-badges{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
.service-badge{
  padding:.45rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-weight:600;
  font-size:.9rem;
}

/* Split highlight */
.service-split{
  max-width:1200px; margin:0 auto;
  display:grid; gap:2.5rem;
  grid-template-columns: 1.2fr 1fr;
  align-items:stretch;
}
.service-split-left h2{ margin:0 0 1rem; font-size:2rem; }
.service-split-left p{ color:#4b5563; line-height:1.7; margin:0 0 1rem; }

.service-inline-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--primary);
  text-decoration:none;
  font-weight:700;
}
.service-inline-cta:hover{ text-decoration:underline; }

.service-highlight-card{
  background:#fff;
  border-radius:1.5rem;
  padding:1.5rem;
  border:1px solid #e5e7eb;
}
.service-highlight-btn{
  display:flex;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  background:var(--primary);
  color:#fff;
  padding:1rem 1rem;
  border-radius:.8rem;
  font-weight:800;
}
.service-highlight-btn span{ display:block; font-weight:500; font-size:.85rem; opacity:.9; margin-top:.2rem; }
.service-checklist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.9rem; }
.service-checklist li{ display:flex; gap:.7rem; align-items:flex-start; color:#111827; }
.service-checklist i{ color:var(--primary); margin-top:.2rem; }

/* PROCESS 4 cards like screenshot */
.service-process-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-process-card{
  background:#f3f4f6;
  border-radius:.3rem;
  padding:2.1rem 1.6rem;
  text-align:center;
}
.service-process-num{
  width:56px; height:56px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.2rem;
  font-size:1.4rem;
  color:#111827;
}
.service-process-card h3{ margin:0 0 .8rem; font-size:1.25rem; }
.service-process-card p{ margin:0; color:#6b7280; line-height:1.6; }

.service-center-cta{ display:flex; justify-content:center; margin-top:2rem; }

/* Comparison */
.service-compare{
  max-width:1000px; margin:0 auto;
}
.service-compare-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:.75rem;
}
.service-compare-col{
  padding:1rem 1.1rem;
  border-radius:1rem;
  font-weight:800;
  text-align:center;
}
.service-compare-col.is-muted{ background:#f3f4f6; color:#111827; }
.service-compare-col.is-brand{ background:rgba(6,78,59,.10); color:#064e3b; }

.service-compare-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:.75rem;
}
.service-compare-cell{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  padding:1rem 1.1rem;
  display:flex;
  gap:.7rem;
  align-items:flex-start;
}
.service-compare-cell.is-muted i{ color:#dc2626; }
.service-compare-cell.is-brand i{ color:var(--primary); }
.service-compare-cell span{ color:#111827; line-height:1.5; }

/* Big CTA like screenshot 2 */
.service-big-cta{
  max-width:1200px; margin:0 auto;
  background:#f3f4f6;
  border-radius:1.5rem;
  padding:2.2rem;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:2.2rem;
  align-items:center;
}
.service-big-cta-left h2{ margin:0 0 1rem; font-size:2.2rem; }
.service-big-cta-left p{ margin:0 0 1.3rem; color:#4b5563; line-height:1.7; }

/* Responsive */
@media (max-width: 1100px){
  .service-process-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .service-split{ grid-template-columns: 1fr; }
  .service-big-cta{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .service-process-grid{ grid-template-columns: 1fr; }
}
.contact-map{
  height: 220px;            /* nach Wunsch */
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px dashed #cfd7df;  /* optional – wenn du die gestrichelte Optik behalten willst */
  background: #f6fafc;
}