.service-hero .page-hero-media{background-image:url("../images/pages/leistungen.webp");background-position:center}.service-hero .page-hero-inner{padding-bottom:75px}.service-hero .button{margin-top:24px}.service-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,9vw,120px);align-items:start;max-width:none;padding-left:max(24px,calc((100vw - 1180px)/2 + 24px));padding-right:max(24px,calc((100vw - 1180px)/2 + 24px));background-image:linear-gradient(90deg,rgba(247,249,251,.91),rgba(247,249,251,.84)),url("../images/pages/leistungen-intro-v2.webp");background-size:cover;background-position:center 58%;background-repeat:no-repeat}.service-intro h2{font-size:clamp(3rem,5.8vw,5.7rem);line-height:.95;letter-spacing:-.055em;margin:18px 0 0}.service-intro .lead{font-size:1.35rem;color:#073f73;margin-top:0}.service-intro div:last-child{color:#405a70;font-size:1.05rem}.service-overview{background:#073f73;color:#fff;padding:100px 24px}.service-overview-inner{max-width:1180px;margin:auto}.service-overview .content-head p{color:#c1d1df}.service-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}.trade-card{background:#073f73;padding:38px;display:grid;grid-template-columns:48px 1fr;gap:20px;min-height:310px;transition:.25s}.trade-card:hover{background:#0b4a82}.trade-featured{grid-column:1/-1;grid-template-columns:64px 1fr;min-height:280px;background:#0b4a82}.trade-number{color:#8fb1ce;font-size:.72rem;letter-spacing:.12em;padding-top:8px}.trade-label{margin:0 0 8px;color:#ff8990;text-transform:uppercase;font-size:.7rem;font-weight:700;letter-spacing:.13em}.trade-card h3{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.1;margin:0 0 15px}.trade-card p{color:#bed0df;margin:0 0 20px;max-width:720px}.trade-card ul{list-style:none;padding:0;margin:0;color:#fff}.trade-card li{padding:6px 0 6px 17px;position:relative}.trade-card li:before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;background:#d71920}.process-list{list-style:none;padding:0;margin:0;border-top:1px solid rgba(7,63,115,.2)}.process-list li{display:grid;grid-template-columns:90px 1fr;gap:30px;padding:30px 0;border-bottom:1px solid rgba(7,63,115,.2)}.process-list>li>span{color:#d71920;font-size:.78rem;font-weight:700;letter-spacing:.1em;padding-top:7px}.process-list h3{font-size:1.7rem;margin:0 0 7px}.process-list p{color:#526a7e;margin:0}.service-proof{display:grid;grid-template-columns:1.05fr .95fr;background:#e7eef4}.service-proof picture,.service-proof img{height:100%}.service-proof img{min-height:570px;object-fit:cover}.service-proof>div{padding:clamp(55px,8vw,110px);align-self:center}.service-proof h2{font-size:clamp(2.8rem,5vw,5rem);line-height:.95;letter-spacing:-.05em;margin:20px 0 28px}.service-proof p:not(.eyebrow){color:#526a7e;font-size:1.08rem;margin-bottom:35px}
@media(max-width:800px){.service-intro,.service-proof{grid-template-columns:1fr}.service-intro{background-image:linear-gradient(rgba(247,249,251,.92),rgba(247,249,251,.88)),url("../images/pages/leistungen-intro-v2.webp");background-position:57% center}.service-cards{grid-template-columns:1fr}.trade-featured{grid-column:auto}.trade-card,.trade-featured{grid-template-columns:38px 1fr;min-height:auto;padding:30px 22px}.service-proof img{min-height:360px}.service-proof>div{padding:60px 24px}.process-list li{grid-template-columns:55px 1fr;gap:15px}}
@media(max-width:480px){.service-overview{padding:70px 16px}.trade-card,.trade-featured{grid-template-columns:1fr}.trade-number{padding:0}.process-list li{grid-template-columns:1fr}.process-list>li>span{padding:0}}

/* Ruhiges Baustellenmotiv für den Projektablauf; CI-Texte bleiben klar lesbar. */
.trade-number{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:52px;height:38px;padding:0;border:1px solid rgba(255,255,255,.35);transition:background-color .2s,color .2s,border-color .2s}.trade-number::after{content:"→";font-size:.85rem;transition:transform .2s}.trade-number:hover,.trade-number:focus-visible{background:#fff;border-color:#fff;color:#073f73}.trade-number:hover::after,.trade-number:focus-visible::after{transform:translateX(3px)}
.trade-title-link{display:inline-flex;align-items:center;gap:12px;color:inherit}.trade-title-link span{font-size:.65em;transition:transform .2s}.trade-title-link:hover span,.trade-title-link:focus-visible span{transform:translateX(5px)}
.process-section{max-width:none;padding-left:max(24px,calc((100vw - 1180px)/2 + 24px));padding-right:max(24px,calc((100vw - 1180px)/2 + 24px));background-image:linear-gradient(90deg,rgba(247,249,251,.98) 0%,rgba(247,249,251,.94) 45%,rgba(247,249,251,.78) 72%,rgba(247,249,251,.68) 100%),url("../images/pages/projektablauf-logos-gestickt-v2.webp");background-size:cover;background-position:center right;background-repeat:no-repeat}
.process-section .content-head,.process-section .process-list{max-width:1132px;margin-left:auto;margin-right:auto}
@media(max-width:800px){.process-section{background-image:linear-gradient(rgba(247,249,251,.93),rgba(247,249,251,.9)),url("../images/pages/projektablauf-logos-gestickt-v2.webp");background-position:68% center}}

/* Gewerke als Teil einer gemeinsamen Baustellenszene. */
.service-overview{background-color:#073f73;background-image:linear-gradient(rgba(7,63,115,.82),rgba(7,63,115,.9)),url("../images/pages/gewerke-hintergrund-v1.webp");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
.service-overview .service-cards{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);box-shadow:0 28px 70px rgba(1,25,48,.22)}
.service-overview .trade-card{background:rgba(7,63,115,.88);backdrop-filter:blur(2px)}
.service-overview .trade-featured,.service-overview .trade-card:hover{background:rgba(11,74,130,.94)}
@media(max-width:800px){.service-overview{background-image:linear-gradient(rgba(7,63,115,.9),rgba(7,63,115,.94)),url("../images/pages/gewerke-hintergrund-v1.webp");background-position:center;background-attachment:scroll}.service-overview .trade-card{background:rgba(7,63,115,.92);backdrop-filter:none}}

/* Projektanfrage: Planung und Ausführung in einem ruhigen Abschlussmotiv. */
.page-cta{background-color:#e7eef4;background-image:linear-gradient(90deg,rgba(231,238,244,.97) 0%,rgba(231,238,244,.91) 54%,rgba(231,238,244,.68) 100%),url("../images/pages/projektanfrage-hintergrund-v1.webp");background-size:cover;background-position:center right;background-repeat:no-repeat}
.page-cta .page-cta-inner{min-height:190px}
.page-cta h2{max-width:900px;text-wrap:balance}
@media(max-width:800px){.page-cta{background-image:linear-gradient(rgba(231,238,244,.91),rgba(231,238,244,.88)),url("../images/pages/projektanfrage-hintergrund-v1.webp");background-position:64% center}.page-cta .page-cta-inner{min-height:260px}}

/* Kompakte Kachelübersicht als Sprungnavigation */
.trade-card{grid-template-columns:48px minmax(0,1fr);min-height:270px;align-content:start}
.trade-featured{grid-template-columns:64px minmax(0,1fr);min-height:260px}
@media(max-width:800px){.trade-card,.trade-featured{grid-template-columns:38px minmax(0,1fr)}}
@media(max-width:480px){.trade-card,.trade-featured{grid-template-columns:1fr}}

/* Vollständige Leistungsbereiche mit Sprungzielen 01–09 */
.service-sections{background:#fff}
.service-section{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);min-height:650px;scroll-margin-top:136px;border-bottom:1px solid rgba(7,63,115,.16)}
.service-section:nth-child(even){grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);background:#f4f7fa}
#dachsanierung .service-section-number,#spenglerarbeiten .service-section-number,#innenausbau .service-section-number,#garten-landschaftsbau .service-section-number,#bodengestaltung .service-section-number{font-size:0}
#dachsanierung .service-section-number::after,#spenglerarbeiten .service-section-number::after,#innenausbau .service-section-number::after,#garten-landschaftsbau .service-section-number::after,#bodengestaltung .service-section-number::after{font-size:.72rem}
#dachsanierung .service-section-number::after{content:"Leistung 05"}
#spenglerarbeiten .service-section-number::after{content:"Leistung 09"}
#innenausbau .service-section-number::after{content:"Leistung 06"}
#garten-landschaftsbau .service-section-number::after{content:"Leistung 07"}
#bodengestaltung .service-section-number::after{content:"Leistung 08"}
.service-section:nth-child(even) .service-section-media{order:2}
.service-section-media,.service-section-media picture{display:block;height:100%;min-height:650px;overflow:hidden}
.service-section-media img{display:block;width:100%;height:100%;min-height:650px;object-fit:cover;transition:transform .7s ease}
.service-section:hover .service-section-media img{transform:scale(1.025)}
.service-section-copy{align-self:center;max-width:680px;padding:clamp(55px,7vw,105px)}
.service-section-number{margin:0 0 28px;color:#d71920;font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.service-section-copy h2{margin:14px 0 25px;color:#073f73;font-size:clamp(2.7rem,5vw,5.2rem);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.service-section-copy .lead{margin:0 0 20px;color:#244e70;font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55}
.service-section-copy>p:not(.eyebrow):not(.service-section-number):not(.lead){color:#526a7e;line-height:1.7}
.service-section-copy ul{display:grid;gap:10px;margin:28px 0 34px;padding:0;list-style:none}
.service-section-copy li{position:relative;padding-left:22px;color:#304c63;line-height:1.5}
.service-section-copy li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;background:#d71920}
.service-section-link{display:inline-flex;align-items:center;gap:14px;padding-bottom:7px;border-bottom:2px solid #073f73;color:#073f73;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.service-section-links{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:34px}
.service-section-links .service-section-link{margin:0}
.service-section-link span{transition:transform .2s}
.service-section-link:hover span,.service-section-link:focus-visible span{transform:translateX(5px)}
@media(max-width:900px){.service-section,.service-section:nth-child(even){grid-template-columns:1fr;min-height:0}.service-section:nth-child(even) .service-section-media{order:0}.service-section-media,.service-section-media picture,.service-section-media img{min-height:0;height:auto;aspect-ratio:3/2}.service-section-copy{max-width:none;padding:55px 24px 65px}}
@media(max-width:1320px) and (min-width:801px){.service-section{scroll-margin-top:126px}}
@media(max-width:800px){.service-section{scroll-margin-top:102px}}

/* Unterkategorien entsprechen der kompakten Zeilenansicht der Startseite. */
.service-overview .service-list{background:rgba(7,63,115,.34);box-shadow:0 25px 70px rgba(1,25,48,.16);backdrop-filter:blur(1.5px)}
.service-overview .service{color:#fff}
.service-overview .service:hover{color:#fff}
.service-section-copy ul{gap:6px}
.service-section-copy li{padding:3px 0 3px 18px;color:#526a7e;font-size:.84rem;line-height:1.55}
.service-section-copy li::before{top:.78em;width:5px;height:5px}
@media(max-width:800px){.service-overview .service-list{backdrop-filter:none}}

/* Projektmotiv füllt die redaktionelle Bildspalte ohne Leerflächen. */
.service-proof-media{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#dfe8ef}
.service-proof .service-proof-image{display:block;width:100%;height:100%;min-height:570px;object-fit:cover;object-position:50% 58%}
@media(max-width:800px){.service-proof .service-proof-image{min-height:360px;aspect-ratio:3/2;object-position:50% 58%}}

/* Leistungsübersicht: dieselbe Blau-Rot-Typografie wie auf der Startseite. */
.page-main .service-intro h2,
.page-main .service-section-copy h2,
.page-main .service-proof h2 {
  color: var(--site-heading);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: var(--site-type-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance
}

.page-main .service-intro .lead,
.page-main .service-section-copy .lead {
  color: var(--site-text-strong);
  font-size: var(--site-type-lead);
  line-height: 1.55
}

.page-main :is(.service-intro, .service-section-copy, .service-proof) p:not(.eyebrow) {
  color: var(--site-text);
  font-size: var(--site-type-body);
  line-height: 1.65
}

.page-main :is(.service-section-number, .trade-label, .process-list > li > span) {
  color: var(--site-accent)
}

.page-main .service-overview :is(h2, h3),
.page-main .service-overview .content-head h2,
.page-main .service-overview .trade-card h3 {
  color: #fff
}

/* Eigenständiges, responsives Raster für die neun Leistungsbereiche. */
.service-overview {
  padding: clamp(58px, 5vw, 82px) clamp(20px, 3vw, 48px);
  color: var(--site-text-strong);
  background-color: #e7ecef;
  background-image:
    linear-gradient(90deg, rgba(244, 246, 247, .94), rgba(229, 234, 237, .9)),
    url("../images/pages/gewerke-hintergrund-v1.webp")
}

.service-overview-inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto
}

.service-overview .content-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  margin: 0 0 clamp(30px, 3vw, 42px)
}

.page-main .service-overview .content-head h2 {
  color: var(--site-heading);
  font-size: clamp(2.25rem, 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.035em
}

.service-overview .content-head p {
  max-width: none;
  margin: 0;
  color: var(--site-text);
  font-size: clamp(.92rem, .88rem + .12vw, 1.02rem);
  line-height: 1.5
}

@media(min-width: 1200px) {
  .service-overview .content-head p {
    justify-self: end;
    text-align: right;
    white-space: nowrap
  }
}

.service-overview .service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 0;
  background: rgba(7, 63, 115, .16);
  box-shadow: 0 24px 65px rgba(35, 53, 67, .13)
}

.service-overview .service-overview-item {
  --service-card-pad: clamp(22px, 1.65vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas:
    "title arrow"
    "points points";
  align-content: start;
  align-items: start;
  column-gap: 11px;
  row-gap: 14px;
  min-width: 0;
  min-height: 255px;
  padding: var(--service-card-pad);
  border: 0;
  color: var(--site-text-strong);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(2px);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease
}

.service-overview .service-overview-item:last-child {
  border: 0
}

.service-overview .service-overview-item:hover,
.service-overview .service-overview-item:focus-visible {
  z-index: 1;
  padding: var(--service-card-pad);
  color: var(--site-text-strong);
  background: rgba(255, 255, 255, .98);
  box-shadow: inset 0 3px 0 var(--site-accent), 0 18px 42px rgba(35, 53, 67, .17);
  transform: translateY(-4px)
}

.page-main .service-overview .service-overview-item h3 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--site-heading);
  font: 500 clamp(1.12rem, 1rem + .32vw, 1.42rem)/1.12 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance
}

.service-overview .service-overview-item ul {
  grid-area: points;
  margin: 0;
  padding: 0;
  color: var(--site-text);
  font-size: clamp(.82rem, .79rem + .1vw, .9rem);
  line-height: 1.38
}

.service-overview .service-overview-item li {
  padding: 2px 0 2px 14px
}

.service-overview .service-overview-item li::before {
  top: .7em;
  width: 4px;
  height: 4px
}

.service-overview .service-overview-item b {
  grid-area: arrow;
  justify-self: end;
  padding: 1px 0 0;
  color: var(--site-heading);
  font-size: .95rem;
  transition: color .2s ease, transform .2s ease
}

.service-overview .service-overview-item:hover b,
.service-overview .service-overview-item:focus-visible b {
  color: var(--site-accent);
  transform: translate(3px, -3px)
}

@media(min-width: 1800px) {
  .service-overview-inner {
    max-width: clamp(1320px, 72vw, 1640px)
  }
}

@media(min-width: 2400px) {
  .service-overview .service-overview-item {
    grid-template-columns: minmax(0, .8fr) minmax(200px, 1fr) 20px;
    grid-template-areas: "title points arrow";
    column-gap: clamp(18px, 1.2vw, 32px);
    min-height: 230px
  }
}

@media(max-width: 1180px) {
  .service-overview .content-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr)
  }

  .service-overview .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width: 760px) {
  .service-overview {
    padding: 54px 18px;
    background-attachment: scroll
  }

  .service-overview .content-head {
    display: block;
    margin-bottom: 28px
  }

  .service-overview .content-head p {
    margin-top: 12px
  }

  .service-overview .service-list {
    grid-template-columns: 1fr
  }

  .service-overview .service-overview-item {
    --service-card-pad: 21px 19px;
    min-height: 0
  }
}

@media(max-width: 520px) {
  .service-overview {
    padding: 46px 14px
  }

  .service-overview .service-overview-item {
    --service-card-pad: 19px 17px;
    grid-template-columns: minmax(0, 1fr) 19px;
    column-gap: 9px;
    row-gap: 12px
  }

  .service-overview .service-overview-item h3 {
    font-size: 1.15rem
  }

  .service-overview .service-overview-item ul {
    font-size: .84rem
  }
}