/* ===== HWS Leistungsübersicht ===== */
:root{
  --green:#006298;
  --green-dark:#00466f;
  --green-soft:#eaf4fa;
  --ink:#14212a;
  --muted:#62717b;
  --light:#f6f9fb;
  --line:#dbe7ee;
}
.services-overview-page{background:#fff;color:var(--ink)}
.services-overview-page main{display:block}
.services-overview-page .section{padding:76px 7%}
.services-overview-page .eyebrow{margin:0;color:var(--green);font-size:12px;line-height:1.2;font-weight:900;letter-spacing:.08em}
.services-overview-page .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.services-overview-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;text-decoration:none;font-weight:850;font-size:14px}
.services-overview-page .btn-primary{background:var(--green);color:#fff}
.services-overview-page .btn-light{background:#fff;color:var(--green);border:1px solid #bcd6e5}

.services-overview-hero{
  padding:88px 7% 78px;
  background:
    linear-gradient(90deg,rgba(247,251,253,.98),rgba(240,247,251,.88)),
    url("assets/hero-gebaeude.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.services-overview-hero-inner{max-width:910px}
.services-overview-hero h1{
  margin:9px 0 19px;
  max-width:880px;
  font-size:clamp(42px,5.3vw,72px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.services-overview-hero h1 span{color:var(--green)}
.services-overview-hero p:not(.eyebrow){
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.services-overview-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.service-overview-card{
  overflow:hidden;
  border:1px solid #d7e5ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 34px rgba(0,70,111,.06);
}
.service-overview-image{
  height:245px;
  overflow:hidden;
  background:#eaf4fa;
}
.service-overview-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.service-overview-card:hover .service-overview-image img{transform:scale(1.025)}
.service-overview-content{padding:28px 30px 30px}
.service-overview-content h2{
  margin:7px 0 12px;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.service-overview-content>p:not(.eyebrow){
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.service-overview-content ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
  margin:20px 0;
  padding:0;
  list-style:none;
}
.service-overview-content li{
  position:relative;
  padding-left:19px;
  color:var(--ink);
  font-size:13px;
  font-weight:750;
}
.service-overview-content li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--green);
  font-weight:900;
}
.service-overview-link{
  display:inline-flex;
  color:var(--green);
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}

.services-overview-band{
  margin:0 7%;
  padding:38px 42px;
  display:flex;
  justify-content:space-between;
  gap:38px;
  align-items:center;
  border-radius:20px;
  background:var(--green-dark);
  color:#fff;
}
.services-overview-band .eyebrow{color:#b9ddeb}
.services-overview-band h2{margin:6px 0 11px;max-width:820px;font-size:clamp(27px,3vw,42px)}
.services-overview-band p:not(.eyebrow){margin:0;max-width:800px;color:#d8e8ef;line-height:1.6}
.services-overview-band .btn-primary{background:#fff;color:var(--green-dark);white-space:nowrap}

.services-overview-area{padding-top:52px!important}
.services-overview-area-box{
  max-width:1240px;
  margin:0 auto;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:40px;
  align-items:center;
  border:1px solid #cfe1ec;
  border-radius:20px;
  background:#f2f8fb;
}
.services-overview-area-box h2{margin:6px 0 12px;font-size:clamp(28px,3.3vw,43px)}
.services-overview-area-box p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.6}
.services-overview-cities{display:flex;flex-wrap:wrap;gap:9px}
.services-overview-cities span{
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d7e5ed;
  font-size:12px;
  font-weight:800;
}

.services-overview-cta{
  margin:20px 7% 80px;
  padding:38px 42px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  border-radius:20px;
  background:#eef7fb;
  border:1px solid #cfe1ec;
}
.services-overview-cta h2{margin:5px 0 9px;font-size:clamp(28px,3vw,42px)}
.services-overview-cta p:not(.eyebrow){margin:0;max-width:680px;color:var(--muted)}
.services-overview-cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.services-overview-page footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px 7%;
  background:#fff;
  border-top:1px solid var(--line);
}
.services-overview-page .footer-links{display:flex;gap:18px}
.services-overview-page footer a{color:var(--muted);text-decoration:none}

@media(max-width:900px){
  .services-overview-grid{grid-template-columns:1fr}
  .service-overview-image{height:280px}
  .services-overview-band{display:block}
  .services-overview-band .btn{margin-top:22px}
  .services-overview-area-box{grid-template-columns:1fr}
}
@media(max-width:650px){
  .services-overview-page .section{padding:56px 5%}
  .services-overview-hero{padding:64px 5% 56px}
  .services-overview-hero p:not(.eyebrow){font-size:16px}
  .service-overview-image{height:220px}
  .service-overview-content{padding:23px}
  .service-overview-content ul{grid-template-columns:1fr}
  .services-overview-band{margin:0 5%;padding:28px}
  .services-overview-area-box{padding:25px}
  .services-overview-cta{margin:20px 5% 60px;padding:28px;display:block}
  .services-overview-cta-actions{margin-top:22px;justify-content:flex-start}
  .services-overview-page footer{display:block}
  .services-overview-page .footer-links{margin-top:12px}
}


/* ===== Leistungsübersicht – Bildhero + 4 Karten ===== */
.services-overview-hero-split{
  padding:0 !important;
  background:#f6fafc !important;
  border-bottom:1px solid var(--line);
}
.services-overview-hero-layout{
  width:100%;
  max-width:1600px;
  min-height:500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(540px,1.04fr);
}
.services-overview-hero-split .services-overview-hero-inner{
  max-width:none;
  padding:76px 5.8vw 68px;
  align-self:center;
}
.services-overview-hero-split h1{
  max-width:760px;
  font-size:clamp(42px,4.9vw,68px);
}
.services-overview-hero-visual{
  position:relative;
  min-height:500px;
  overflow:hidden;
}
.services-overview-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#f6fafc 0%,rgba(246,250,252,.20) 14%,rgba(246,250,252,0) 34%);
}
.services-overview-hero-visual img{
  width:100%;
  height:100%;
  min-height:500px;
  display:block;
  object-fit:cover;
  object-position:58% center;
}

/* Vier Leistungsbereiche in einer Reihe auf großen Bildschirmen */
.services-overview-grid{
  max-width:1380px;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}
.service-overview-image{
  height:190px !important;
}
.service-overview-content{
  padding:22px 22px 24px !important;
}
.service-overview-content h2{
  font-size:21px !important;
}
.service-overview-card{
  display:flex;
  flex-direction:column;
}
.service-overview-content{
  display:flex;
  flex:1;
  flex-direction:column;
}
.service-overview-content ul{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  margin:17px 0 20px !important;
}
.service-overview-content li{
  font-size:12.5px;
  line-height:1.35;
  font-weight:750;
}
.service-overview-content>p:not(.eyebrow){
  min-height:auto;
}
.service-overview-link{
  margin-top:auto;
}
.service-overview-badge{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-top:-45px;
  margin-bottom:12px;
  position:relative;
  z-index:2;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,98,152,.18);
}
.service-overview-badge svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:1180px){
  .services-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .service-overview-image{
    height:230px !important;
  }
  .service-overview-content>p:not(.eyebrow){
    min-height:auto;
  }
}
@media(max-width:900px){
  .services-overview-hero-layout{
    grid-template-columns:1fr;
  }
  .services-overview-hero-split .services-overview-hero-inner{
    padding:62px 6% 48px;
  }
  .services-overview-hero-visual{
    min-height:320px;
  }
  .services-overview-hero-visual img{
    min-height:320px;
  }
  .services-overview-hero-visual::before{
    background:linear-gradient(180deg,#f6fafc 0%,rgba(246,250,252,.12) 24%,rgba(246,250,252,0) 48%);
  }
}
@media(max-width:650px){
  .services-overview-grid{
    grid-template-columns:1fr !important;
  }
  .service-overview-image{
    height:220px !important;
  }
}


/* ===== Ergänzte Leistungsübersicht: weitere Möglichkeiten + Warum HWS ===== */
.services-overview-extra{
  padding-top:52px !important;
  padding-bottom:28px !important;
}
.services-overview-extra-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr);
  gap:22px;
}
.services-overview-extra-card{
  padding:34px 36px;
  border:1px solid #cfe1ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,70,111,.045);
}
.services-overview-extra-card h2{
  margin:7px 0 12px;
  font-size:clamp(27px,2.8vw,39px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.services-overview-extra-card>p:not(.eyebrow){
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.services-overview-mini-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.services-overview-mini-grid>div{
  min-height:118px;
  padding:18px;
  border:1px solid #dbe7ee;
  border-radius:14px;
  background:#f7fafc;
}
.services-overview-mini-grid strong{
  display:block;
  margin-bottom:6px;
  color:var(--green-dark);
  font-size:14px;
}
.services-overview-mini-grid span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}
.services-overview-why-card{
  background:#f2f8fb;
}
.services-overview-why-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:15px;
}
.services-overview-why-list li{
  position:relative;
  padding-left:28px;
}
.services-overview-why-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.services-overview-why-list strong{
  display:block;
  margin-bottom:2px;
  color:var(--ink);
  font-size:13.5px;
}
.services-overview-why-list span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}

@media(max-width:900px){
  .services-overview-extra-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:650px){
  .services-overview-extra-card{
    padding:26px 22px;
  }
  .services-overview-mini-grid{
    grid-template-columns:1fr;
  }
  .services-overview-mini-grid>div{
    min-height:auto;
  }
}


/* ===== HWS Feinschliff 26.08.2026 ===== */
/* Etwas kompaktere Abstände, damit die Seite ruhiger und weniger lang wirkt. */
.services-overview-main{
  padding-top:54px !important;
  padding-bottom:50px !important;
}
.services-overview-extra{
  padding-top:36px !important;
  padding-bottom:16px !important;
}
.services-overview-area{
  padding-top:34px !important;
  padding-bottom:34px !important;
}
.services-overview-cta{
  margin-top:8px !important;
  margin-bottom:54px !important;
}
.services-overview-additional-grid>div{
  min-height:126px;
}
.services-overview-extra-note{
  margin-top:18px !important;
  padding:13px 15px;
  border-left:3px solid var(--green);
  border-radius:0 10px 10px 0;
  background:#f2f8fb;
  color:var(--green-dark) !important;
  font-size:12.5px;
  font-weight:750;
}

/* Reichhaltiger Footer im bestehenden HWS-Stil */
.services-overview-page .services-footer{
  padding:44px 7% 20px;
  background:#f6f9fb;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.services-footer-main{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr .75fr .9fr 1fr .8fr;
  gap:34px;
  align-items:start;
}
.services-footer-brand img{
  width:100%;
  max-width:280px;
  height:auto;
}
.services-footer-brand p{
  max-width:310px;
  margin:13px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.services-footer-column,
.services-footer-route{
  display:grid;
  gap:8px;
}
.services-footer-column>strong,
.services-footer-route>strong{
  margin-bottom:4px;
  color:var(--ink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.services-footer-column a,
.services-footer-column span{
  color:var(--muted) !important;
  font-size:12px;
  line-height:1.55;
  text-decoration:none;
}
.services-footer-column a:hover{color:var(--green) !important}
.services-mini-map{
  height:72px;
  display:grid;
  place-items:center;
  border:1px solid #cfe1ec;
  border-radius:12px;
  background:linear-gradient(145deg,#edf6fa,#dcecf4);
}
.services-mini-map span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:18px;
}
.services-footer-route>a{
  display:flex;
  justify-content:center;
  padding:8px 10px;
  border:1px solid #9cc4d9;
  border-radius:9px;
  background:#fff;
  color:var(--green) !important;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}
.services-footer-bottom{
  max-width:1380px;
  margin:30px auto 0;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #dce7ed;
  color:var(--muted);
  font-size:11px;
}
.services-footer-bottom div{display:flex;gap:18px}
.services-footer-bottom a{color:var(--muted) !important;text-decoration:none}

@media(max-width:1100px){
  .services-footer-main{grid-template-columns:1.3fr 1fr 1fr}
  .services-footer-route{grid-column:auto}
}
@media(max-width:820px){
  .services-footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .services-overview-main{padding-top:42px !important;padding-bottom:40px !important}
  .services-overview-extra{padding-top:28px !important;padding-bottom:8px !important}
  .services-overview-area{padding-top:28px !important;padding-bottom:28px !important}
  .services-overview-cta{margin-bottom:42px !important}
  .services-overview-additional-grid>div{min-height:auto}
  .services-overview-page .services-footer{padding:38px 5% 18px}
  .services-footer-main{grid-template-columns:1fr}
  .services-footer-bottom{display:block}
  .services-footer-bottom div{margin-top:10px}
}