/* Leistungsunterseiten: aus dem Startseiten-Projektboard weiterentwickelt */
.service-page-body{
  --service-electric:#2259d6;
  --service-night:#06132f;
  --service-navy:#0b1f4f;
  --service-card:#0a214d;
  --service-paper:#f3f0e8;
  --service-muted:#606b7e;
  --service-line:#37496d;
  --service-cut:clamp(20px,3vw,48px);
  background:var(--service-paper)
}
.service-page-body.service-page--build{
  --hero-surface:var(--service-paper);
  --hero-ink:var(--service-navy);
  --side-surface:var(--service-night);
  --side-ink:#fff;
  --process-intro:#fff;
  --process-intro-ink:var(--service-navy);
  --related-surface:var(--service-paper);
  --related-ink:var(--service-navy);
  --cta-title-surface:var(--service-electric);
  --cta-title-ink:#fff;
  --cta-action-surface:var(--service-night);
  --cta-action-ink:#fff
}
.service-page-body.service-page--design{
  --hero-surface:var(--service-navy);
  --hero-ink:#fff;
  --side-surface:var(--service-paper);
  --side-ink:var(--service-navy);
  --process-intro:var(--service-electric);
  --process-intro-ink:#fff;
  --related-surface:var(--service-navy);
  --related-ink:#fff;
  --cta-title-surface:var(--service-navy);
  --cta-title-ink:#fff;
  --cta-action-surface:var(--service-paper);
  --cta-action-ink:var(--service-navy)
}
.service-page-body .service-detail-main{min-width:0}
.service-page-body .service-detail{min-width:0}
.service-page-body .dropdown-panel a[aria-current=page]{
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:.28rem
}

/* Hero: die ausgewählte Startseitenkarte wird zur Detailfläche */
.service-page-body .detail-hero{
  min-height:calc(100svh - 92px);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
  overflow:hidden;
  background:var(--side-surface)
}
.service-page-body .detail-primary{
  min-width:0;
  min-height:100%;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(4rem,7vw,7rem) clamp(2rem,6vw,6rem) clamp(4rem,7vw,7rem) max(1.2rem,calc((100vw - 88rem)/2 + 5rem));
  overflow:hidden;
  background:var(--hero-surface);
  color:var(--hero-ink)
}
.service-page-body .detail-primary::before{
  content:"";
  position:absolute;
  inset:clamp(.9rem,1.6vw,1.5rem);
  z-index:0;
  border:1px solid currentColor;
  opacity:.1;
  pointer-events:none
}
.service-page-body .detail-primary::after{
  content:"";
  width:clamp(100px,10vw,170px);
  aspect-ratio:1;
  position:absolute;
  right:0;
  bottom:0;
  z-index:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:var(--service-electric);
  pointer-events:none
}
.service-page-body .detail-primary>*{position:relative;z-index:1}
.service-page-body .detail-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0 0 clamp(2.5rem,5vh,4.5rem);
  padding:0;
  list-style:none;
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase
}
.service-page-body .detail-breadcrumb li+li::before{content:"/";margin-right:.45rem;opacity:.45}
.service-page-body .detail-breadcrumb a{text-underline-offset:.25rem}
.service-page-body .detail-breadcrumb li[aria-current=page]{opacity:.68}
.service-page-body .detail-service-number{
  margin:0 0 1rem;
  color:var(--service-electric);
  font-size:clamp(.9rem,1.2vw,1.15rem);
  font-weight:600;
  letter-spacing:.08em
}
.service-page--design .detail-service-number{color:#8eb0ff}
.service-page-body .detail-kicker{
  margin:0 0 .9rem;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.72
}
.service-page-body .detail-primary h1{
  max-width:11ch;
  margin:0;
  color:inherit;
  font-size:clamp(3.8rem,6.6vw,7rem);
  font-weight:650;
  letter-spacing:-.072em;
  line-height:.88;
  hyphens:auto;
  overflow-wrap:anywhere
}
.service-page-body .detail-primary .detail-title-long{
  max-width:14ch;
  font-size:clamp(3rem,5.2vw,5.7rem);
  overflow-wrap:normal
}
.service-page-body .detail-lead{
  max-width:42rem;
  margin:1.6rem 0 0;
  color:inherit;
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  opacity:.78
}
.service-page-body .detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:2.25rem
}
.service-page-body .detail-actions a{
  min-height:58px;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.45rem;
  text-decoration:none;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  transition:transform .18s ease,color .18s ease,background-color .18s ease
}
.service-page-body .detail-action-primary{
  clip-path:none;
  background:transparent;
  color:#fff
}
.service-page-body .detail-action-primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:var(--service-electric)
}
.service-page-body .detail-action-secondary{
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:var(--hero-ink);
  color:var(--hero-surface)
}
.service-page-body .detail-actions a:hover{transform:translateY(-3px)}
.service-page-body .detail-action-primary:hover::before{background:var(--service-navy)}
.service-page--design .detail-action-primary:hover::before{background:#fff}
.service-page--design .detail-action-primary:hover{color:var(--service-navy)}
.service-page-body .detail-action-primary:focus-visible{clip-path:none}
.service-page-body .detail-action-secondary:focus-visible{clip-path:none}

/* Faktenpanel als drei geschnittene Projektfelder */
.service-page-body .detail-side{
  min-width:0;
  min-height:100%;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2.5rem,4.5vw,4.5rem);
  overflow:hidden;
  background:var(--side-surface);
  color:var(--side-ink)
}
.service-page-body .detail-side::after{
  content:"";
  position:absolute;
  inset:clamp(.9rem,1.6vw,1.5rem);
  border:1px solid currentColor;
  opacity:.12;
  pointer-events:none
}
.service-page-body .detail-facts{
  width:100%;
  margin:0;
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(.65rem,1.2vw,1rem)
}
.service-page-body .detail-facts>div{
  min-height:clamp(124px,17.25vh,167px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1.35rem clamp(1.35rem,2vw,2rem);
  border:0;
  background:var(--service-card);
  color:#fff
}
.service-page-body .detail-facts>div:nth-child(2){
  margin-inline:clamp(.5rem,1.2vw,1rem);
  padding-inline:calc(clamp(1.35rem,2vw,2rem) + 16px);
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
  background:var(--service-electric)
}
.service-page-body .detail-facts>div:nth-child(3){
  margin-inline:clamp(1rem,2vw,1.8rem);
  padding-inline:calc(clamp(1.35rem,2vw,2rem) + 30px);
  clip-path:polygon(30px 0,100% 0,calc(100% - 30px) 100%,0 100%);
  background:var(--service-paper);
  color:var(--service-navy)
}
.service-page--design .detail-facts>div:nth-child(1){background:var(--service-navy);color:#fff}
.service-page--design .detail-facts>div:nth-child(2){background:transparent;color:var(--service-navy);border:1px solid rgba(11,31,79,.45)}
.service-page--design .detail-facts>div:nth-child(3){background:var(--service-electric);color:#fff}
.service-page-body .detail-facts dt{
  color:inherit;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.86
}
.service-page-body .detail-facts dd{
  margin:.35rem 0 0;
  color:inherit;
  font-size:clamp(1.05rem,1.55vw,1.4rem);
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.2
}

/* Inhalt: eine große Aussage und eine ruhige Begründung */
.service-page-body .detail-overview{
  width:var(--shell);
  margin-inline:auto;
  padding-block:clamp(5.5rem,9vw,9rem);
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:clamp(3rem,9vw,10rem);
  background:transparent
}
.service-page-body .detail-overview header{align-self:start}
.service-page-body .detail-overview .eyebrow{color:var(--service-electric)}
.service-page-body .detail-overview h2{
  max-width:10ch;
  margin:1.1rem 0 0;
  color:var(--service-navy);
  font-size:clamp(2.9rem,4.8vw,5.2rem);
  font-weight:650;
  letter-spacing:-.06em;
  line-height:.94;
  hyphens:auto;
  overflow-wrap:anywhere
}
.service-page-body .detail-copy{
  max-width:none;
  padding:0;
  border-top:2px solid var(--service-navy)
}
.service-page-body .detail-copy p{
  margin:0;
  padding:1.45rem 0;
  border-bottom:1px solid rgba(11,31,79,.18);
  color:var(--service-muted);
  font-size:clamp(1.02rem,1.35vw,1.22rem);
  line-height:1.7
}
.service-page-body .detail-copy p:first-child{
  color:var(--service-navy);
  font-size:clamp(1.25rem,1.8vw,1.65rem);
  line-height:1.5
}
.service-page-body .detail-copy p+p{margin:0}

/* Ablauf: kompakter Ableger der Startseitenbühne */
.service-page-body .detail-process{
  padding:0;
  background:var(--service-night);
  color:#fff
}
.service-page-body .detail-process-layout{
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:minmax(320px,32.5%) minmax(0,1fr);
  gap:0
}
.service-page-body .detail-process-layout>header{
  min-width:0;
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(3rem,5.25vw,5.25rem);
  background:var(--process-intro);
  color:var(--process-intro-ink)
}
.service-page-body .detail-process .eyebrow{color:inherit;opacity:.86}
.service-page-body .detail-process h2{
  max-width:8ch;
  margin:1.2rem 0 0;
  color:inherit;
  font-size:clamp(3rem,4.5vw,4.8rem);
  font-weight:650;
  letter-spacing:-.06em;
  line-height:.98;
  hyphens:auto;
  overflow-wrap:anywhere
}
.service-page-body .detail-process-list{
  min-width:0;
  margin:0;
  display:grid;
  align-content:center;
  gap:1rem;
  padding:clamp(2.5rem,4.4vw,4.4rem);
  border:0;
  list-style:none;
  counter-reset:service-step
}
.service-page-body .detail-process-list li{
  width:100%;
  min-width:0;
  min-height:150px;
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:1.1rem;
  row-gap:.45rem;
  align-content:center;
  padding:1.6rem 2rem;
  border:1px solid var(--service-line);
  background:var(--service-card);
  color:#fff;
  counter-increment:service-step;
  transition:transform .2s ease,filter .2s ease
}
.service-page-body .detail-process-list li::before{
  content:"0" counter(service-step);
  grid-row:1/3;
  align-self:start;
  color:#8eb0ff;
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.05em
}
.service-page-body .detail-process-list li:nth-child(2){
  width:calc(100% - 2rem);
  margin-inline:auto;
  padding-inline:calc(2rem + 18px);
  border:0;
  clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);
  background:var(--service-electric)
}
.service-page-body .detail-process-list li:nth-child(3){
  width:calc(100% - 3rem);
  margin-inline:auto;
  padding-inline:calc(2rem + 32px);
  border:0;
  clip-path:polygon(32px 0,100% 0,calc(100% - 32px) 100%,0 100%);
  background:var(--service-paper);
  color:var(--service-navy)
}
.service-page-body .detail-process-list li:nth-child(2)::before{color:#dfe8ff}
.service-page-body .detail-process-list li:nth-child(3)::before{color:var(--service-electric)}
.service-page-body .detail-process-list h3{
  margin:0;
  color:inherit;
  font-size:clamp(1.25rem,1.8vw,1.6rem);
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.2;
  text-transform:none
}
.service-page-body .detail-process-list p{
  margin:0;
  color:inherit;
  font-size:.98rem;
  line-height:1.55;
  opacity:.86
}

/* Verwandte Leistungen als kleines, schräges Kartenboard */
.service-page-body .detail-related{
  padding-block:clamp(5rem,8vw,8rem);
  background:var(--related-surface);
  color:var(--related-ink)
}
.service-page-body .detail-related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2rem,4vw,3rem)
}
.service-page-body .detail-related h2{
  max-width:16ch;
  margin:0;
  color:inherit;
  font-size:clamp(2.8rem,4.4vw,4.8rem);
  font-weight:650;
  letter-spacing:-.055em;
  line-height:.94;
  overflow-wrap:normal;
  hyphens:auto
}
.service-page-body .detail-related-head>a{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.8rem 1.25rem;
  border:1px solid currentColor;
  border-radius:999px;
  color:inherit;
  text-decoration:none;
  font-size:.75rem;
  font-weight:800;
  transition:background-color .18s ease,color .18s ease
}
.service-page-body .detail-related-head>a:hover{background:var(--service-navy);color:#fff}
.service-page--design .detail-related-head>a:hover{background:#fff;color:var(--service-navy)}
.service-page-body .detail-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.6rem,1vw,.9rem);
  border:0
}
.service-page-body .detail-related-grid a{
  --related-shape:polygon(var(--service-cut) 0,100% 0,calc(100% - var(--service-cut)) 100%,0 100%);
  --related-shape-inner:polygon(calc(var(--service-cut) + 5px) 5px,calc(100% - 5px) 5px,calc(100% - var(--service-cut) - 5px) calc(100% - 5px),5px calc(100% - 5px));
  --related-image:none;
  --related-position:center;
  --related-tint:linear-gradient(180deg,rgba(6,19,47,.48) 0%,rgba(6,19,47,.9) 100%);
  min-width:0;
  min-height:clamp(220px,18vw,280px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.6rem calc(1.6rem + var(--service-cut));
  border:0;
  background:transparent;
  color:#fff;
  text-decoration:none;
  clip-path:var(--related-shape)
}
.service-page-body .detail-related-grid a::before,
.service-page-body .detail-related-grid a::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .3s ease
}
.service-page-body .detail-related-grid a::before{
  z-index:0;
  background-image:var(--related-image);
  background-position:var(--related-position);
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.01)
}
.service-page-body .detail-related-grid a::after{
  z-index:1;
  background:var(--related-tint);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}
.service-page-body .detail-related-grid a>*{position:relative;z-index:2}
.service-page-body .detail-related-grid a[href$="bodenbelaege.html"]{
  --related-image:url("./assets/leistungen/webp/bodenbelaege-v1.webp");
  --related-position:center 68%
}
.service-page-body .detail-related-grid a[href$="montagearbeiten.html"]{
  --related-image:url("./assets/leistungen/webp/montagearbeiten-v1.webp")
}
.service-page-body .detail-related-grid a[href$="renovierung.html"]{
  --related-image:url("./assets/leistungen/webp/renovierung-v1.webp")
}
.service-page-body .detail-related-grid a[href$="sanierung.html"]{
  --related-image:url("./assets/leistungen/webp/sanierung-v1.webp")
}
.service-page-body .detail-related-grid a[href$="trockenbau.html"]{
  --related-image:url("./assets/leistungen/webp/trockenbau-v1.webp")
}
.service-page-body .detail-related-grid a[href$="fussleisten.html"]{
  --related-image:url("./assets/leistungen/webp/fussleisten-v1.webp");
  --related-position:center 72%
}
.service-page-body .detail-related-grid a[href$="haus-und-objektservice.html"]{
  --related-image:url("./assets/leistungen/webp/objektservice-v1.webp")
}
.service-page-body .detail-related-grid a[href$="boeden.html"]{
  --related-image:url("./assets/design/webp/boeden-v1.webp");
  --related-position:center 68%
}
.service-page-body .detail-related-grid a[href$="wandpaneele.html"]{
  --related-image:url("./assets/design/webp/wandpaneele-v1.webp")
}
.service-page-body .detail-related-grid a[href$="uhren.html"]{
  --related-image:url("./assets/design/webp/uhren-v1.webp")
}
.service-page-body .detail-related-grid a[href$="ess-und-buerotische.html"]{
  --related-image:url("./assets/design/webp/tische-v1.webp")
}
.service-page-body .detail-related-grid a[href$="wohnaccessoires.html"]{
  --related-image:url("./assets/design/webp/wohnaccessoires-v1.webp")
}
.service-page-body .detail-related-grid small{
  color:inherit;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.86
}
.service-page-body .detail-related-grid strong{
  color:inherit;
  font-size:clamp(1.5rem,2.2vw,2.25rem);
  font-weight:650;
  letter-spacing:-.04em;
  line-height:1.08;
  hyphens:auto;
  overflow-wrap:anywhere;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)
}
/* Ruhiger Hover wie auf der Startseite: Form steht still, Bild zoomt langsam. */
@media(hover:hover) and (pointer:fine){
  .service-page-body .detail-related-grid a:hover::before{transform:scale(1.06)}
  .service-page-body .detail-related-grid a:hover::after{opacity:.88}
}
/* Tastaturfokus: Ring entlang der Kartenform */
.service-page-body .detail-related-grid a:focus-visible{outline:none;background:currentColor}
.service-page-body .detail-related-grid a:focus-visible::before,
.service-page-body .detail-related-grid a:focus-visible::after{clip-path:var(--related-shape-inner);transform:none}

/* Abschluss: klare Zweiteilung wie im Flyer-Hero */
.service-page-body .detail-cta{
  padding:0;
  background:var(--cta-title-surface);
  color:var(--cta-title-ink)
}
.service-page-body .detail-cta-layout{
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:0
}
.service-page-body .detail-cta h2{
  max-width:11ch;
  /* Ohne content-box zog das Padding (2x90px) von den 11ch ab, es blieben
     279px Text. "Vorhaben" braucht 340px - daher brach es mitten im Wort. */
  box-sizing:content-box;
  min-height:340px;
  display:flex;
  align-items:center;
  margin:0;
  padding:clamp(3.5rem,6vw,6rem);
  background:var(--cta-title-surface);
  color:var(--cta-title-ink);
  font-size:clamp(3rem,5vw,5.4rem);
  font-weight:650;
  letter-spacing:-.06em;
  line-height:.94;
  /* Silbentrennung statt beliebigem Zerschneiden; break-word bleibt als
     letzte Rettung, falls ein Wort selbst getrennt nicht passt. */
  overflow-wrap:break-word;
  hyphens:auto
}
.service-page-body .detail-cta-actions{
  min-height:340px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:.85rem;
  padding:clamp(3.5rem,6vw,6rem);
  background:var(--cta-action-surface);
  color:var(--cta-action-ink)
}
.service-page-body .detail-cta-actions a{
  width:100%;
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.4rem;
  text-decoration:none;
  font-size:.8rem;
  font-weight:800;
  transition:transform .18s ease,background-color .18s ease,color .18s ease
}
.service-page-body .detail-cta-actions a:hover{transform:translateY(-3px)}
.service-page-body .detail-cta-call{
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:#fff;
  color:var(--service-navy)
}
.service-page--design .detail-cta-call{background:var(--service-navy);color:#fff}
.service-page-body .detail-cta-form{
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:var(--cta-action-ink);
  color:var(--cta-action-surface)
}
.service-page-body .detail-cta-call:focus-visible{clip-path:none}
.service-page-body .detail-cta-form:focus-visible{clip-path:none}

@media(max-width:1100px){
  .service-page-body .detail-hero{grid-template-columns:minmax(0,1fr) minmax(360px,.78fr)}
  .service-page-body .detail-primary h1{font-size:clamp(3.6rem,6.3vw,6rem)}
  .service-page-body .detail-facts>div{min-height:118px}
}
@media(max-width:980px){
  .service-page-body .detail-hero{min-height:auto;grid-template-columns:1fr}
  .service-page-body .detail-primary{
    min-height:auto;
    padding:5rem clamp(1.2rem,7vw,4rem)
  }
  .service-page-body .detail-side{
    min-height:auto;
    padding:clamp(3rem,7vw,4rem)
  }
  .service-page-body .detail-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-page-body .detail-facts>div,
  .service-page-body .detail-facts>div:nth-child(2),
  .service-page-body .detail-facts>div:nth-child(3){
    min-height:150px;
    margin:0;
    padding:1.4rem;
    clip-path:none
  }
  .service-page-body .detail-overview{grid-template-columns:1fr;gap:2.5rem}
  .service-page-body .detail-overview h2{max-width:13ch}
  .service-page-body .detail-process-layout{grid-template-columns:1fr}
  .service-page-body .detail-process-layout>header{
    min-height:330px;
    padding:4rem clamp(1.2rem,7vw,4rem)
  }
  .service-page-body .detail-process-list{padding:clamp(2.5rem,7vw,4rem)}
  .service-page-body .detail-related-grid{grid-template-columns:1fr 1fr}
  .service-page-body .detail-related-grid a:nth-child(3){grid-column:auto}
  .service-page-body .detail-cta-layout{grid-template-columns:1fr}
  .service-page-body .detail-cta h2,
  .service-page-body .detail-cta-actions{min-height:auto}
}
@media(max-width:680px){
  .service-page-body{--service-cut:22px}
  .service-page-body .detail-primary{padding:3.75rem 1.2rem 4.5rem}
  .service-page-body .detail-primary::before,
  .service-page-body .detail-side::after{inset:.65rem}
  .service-page-body .detail-breadcrumb ol{margin-bottom:2.75rem}
  .service-page-body .detail-primary h1{font-size:clamp(3.25rem,15vw,4.8rem)}
  .service-page-body .detail-primary .detail-title-long{
    font-size:clamp(2.1rem,10.8vw,3.8rem);
    overflow-wrap:normal
  }
  .service-page-body .detail-actions{display:grid}
  .service-page-body .detail-actions a{width:100%}
  .service-page-body .detail-side{padding:2.5rem 1.2rem}
  .service-page-body .detail-facts{grid-template-columns:1fr;gap:.65rem}
  .service-page-body .detail-facts>div,
  .service-page-body .detail-facts>div:nth-child(2),
  .service-page-body .detail-facts>div:nth-child(3){
    min-height:112px;
    padding:1.25rem 1.4rem
  }
  .service-page-body .detail-overview{padding-block:4.5rem}
  .service-page-body .detail-overview h2{font-size:clamp(2.8rem,13vw,4.3rem)}
  .service-page-body .detail-process-layout>header{min-height:320px;padding:3.5rem 1.2rem}
  .service-page-body .detail-process h2{font-size:clamp(3rem,13vw,4.2rem)}
  .service-page-body .detail-process-list{gap:.75rem;padding:1.5rem 1.2rem 2.5rem}
  .service-page-body .detail-process-list li,
  .service-page-body .detail-process-list li:nth-child(2),
  .service-page-body .detail-process-list li:nth-child(3){
    width:100%;
    min-height:150px;
    margin:0;
    grid-template-columns:44px minmax(0,1fr);
    padding:1.4rem
  }
  .service-page-body .detail-process-list li:nth-child(2){
    padding-inline:calc(1.4rem + 14px);
    clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)
  }
  .service-page-body .detail-process-list li:nth-child(3){
    padding-inline:calc(1.4rem + 22px);
    clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%)
  }
  .service-page-body .detail-related{padding-block:4.5rem}
  .service-page-body .detail-related-head{align-items:flex-start;flex-direction:column}
  .service-page-body .detail-related-grid{grid-template-columns:1fr}
  .service-page-body .detail-related-grid a,
  .service-page-body .detail-related-grid a:nth-child(2),
  .service-page-body .detail-related-grid a:nth-child(3){
    grid-column:auto;
    min-height:170px;
    padding:1.4rem calc(1.4rem + var(--service-cut))
  }
  .service-page-body .detail-cta h2,
  .service-page-body .detail-cta-actions{padding:3.5rem 1.2rem}
  .service-page-body .detail-cta-actions a{width:100%}
}
@media(hover:hover) and (pointer:fine){
  .service-page-body .detail-process-list li:hover{
    transform:translateY(-4px);
    filter:brightness(1.05) drop-shadow(0 14px 18px rgba(0,0,0,.18))
  }
  .service-page-body .detail-related-grid a:hover strong{transform:translateX(6px)}
}
@media(prefers-reduced-motion:reduce){
  .service-page-body .detail-actions a:hover,
  .service-page-body .detail-cta-actions a:hover,
  .service-page-body .detail-process-list li:hover{transform:none}
  .service-page-body .detail-related-grid a:hover strong{transform:none}
}

/* Einheitliche Bildfelder im Hero der Bau-Leistungsseiten */
.service-page--build .detail-facts>div,
.service-page--build .detail-facts>div:nth-child(2),
.service-page--build .detail-facts>div:nth-child(3){
  --fact-image:none;
  --fact-position:center;
  --fact-overlay:linear-gradient(90deg,rgba(10,33,77,.9) 0%,rgba(10,33,77,.7) 60%,rgba(10,33,77,.48) 100%);
  --fact-text-shadow:0 1px 12px rgba(3,12,34,.42);
  width:100%;
  min-height:clamp(108px,15vh,145px);
  margin-inline:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:1.35rem calc(clamp(1.35rem,2vw,2rem) + 16px);
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)
}
.service-page--build .detail-facts>div::before,
.service-page--build .detail-facts>div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none
}
.service-page--build .detail-facts>div::before{
  z-index:0;
  background-image:var(--fact-image);
  background-position:var(--fact-position);
  background-size:cover;
  background-repeat:no-repeat
}
.service-page--build .detail-facts>div::after{
  z-index:1;
  background:var(--fact-overlay)
}
.service-page--build .detail-facts>div>*{
  position:relative;
  z-index:2;
  text-shadow:var(--fact-text-shadow)
}
.service-page--build .detail-facts>div:nth-child(1){
  --fact-image:url("assets/leistungsseiten-hero/webp/bereich-bau-haus-objekt-v1.webp");
  --fact-position:center 54%
}
.service-page--build .detail-facts>div:nth-child(2){
  --fact-image:url("assets/leistungsseiten-hero/webp/zielgruppe-privat-gewerbe-v1.webp");
  --fact-position:center 55%;
  --fact-overlay:linear-gradient(90deg,rgba(34,89,214,.88) 0%,rgba(34,89,214,.68) 60%,rgba(34,89,214,.46) 100%)
}
.service-page--build .detail-facts>div:nth-child(3){
  --fact-image:url("assets/leistungsseiten-hero/webp/kontakt-telefon-v1.webp");
  --fact-position:center 56%;
  --fact-overlay:linear-gradient(90deg,rgba(243,240,232,.96) 0%,rgba(243,240,232,.8) 60%,rgba(243,240,232,.62) 100%);
  --fact-text-shadow:none
}
@media(max-width:1100px){
  .service-page--build .detail-facts>div,
  .service-page--build .detail-facts>div:nth-child(2),
  .service-page--build .detail-facts>div:nth-child(3){min-height:136px}
}
@media(max-width:980px){
  .service-page--build .detail-facts>div,
  .service-page--build .detail-facts>div:nth-child(2),
  .service-page--build .detail-facts>div:nth-child(3){
    min-height:173px;
    padding:1.4rem calc(1.4rem + 16px);
    clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)
  }
}
@media(max-width:680px){
  .service-page--build .detail-facts>div,
  .service-page--build .detail-facts>div:nth-child(2),
  .service-page--build .detail-facts>div:nth-child(3){
    min-height:129px;
    padding:1.25rem calc(1.4rem + 16px)
  }
}

/* Gleiche Bildfeld-Geometrie im Hero der Design-Leistungsseiten */
.service-page--design .detail-facts>div,
.service-page--design .detail-facts>div:nth-child(2),
.service-page--design .detail-facts>div:nth-child(3){
  --fact-image:none;
  --fact-position:center;
  --fact-overlay:linear-gradient(90deg,rgba(11,31,79,.9) 0%,rgba(11,31,79,.7) 60%,rgba(11,31,79,.48) 100%);
  --fact-text-shadow:0 1px 12px rgba(3,12,34,.42);
  width:100%;
  min-height:clamp(124px,17.25vh,167px);
  margin-inline:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:1.35rem calc(clamp(1.35rem,2vw,2rem) + 16px);
  border:0;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)
}
.service-page--design .detail-facts>div::before,
.service-page--design .detail-facts>div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none
}
.service-page--design .detail-facts>div::before{
  z-index:0;
  background-image:var(--fact-image);
  background-position:var(--fact-position);
  background-size:cover;
  background-repeat:no-repeat
}
.service-page--design .detail-facts>div::after{
  z-index:1;
  background:var(--fact-overlay)
}
.service-page--design .detail-facts>div>*{
  position:relative;
  z-index:2;
  text-shadow:var(--fact-text-shadow)
}
.service-page--design .detail-facts>div:nth-child(1){
  --fact-image:url("assets/design-leistungsseiten-hero/webp/bereich-individuelles-design-v1.webp");
  --fact-position:center 54%;
  color:#fff
}
.service-page--design .detail-facts>div:nth-child(2){
  --fact-image:url("assets/design-leistungsseiten-hero/webp/zielgruppe-privat-gewerbe-v1.webp");
  --fact-position:center 54%;
  --fact-overlay:linear-gradient(90deg,rgba(243,240,232,.96) 0%,rgba(243,240,232,.8) 60%,rgba(243,240,232,.62) 100%);
  --fact-text-shadow:none;
  color:var(--service-navy)
}
.service-page--design .detail-facts>div:nth-child(3){
  --fact-image:url("assets/design-leistungsseiten-hero/webp/kontakt-design-telefon-v1.webp");
  --fact-position:center 56%;
  --fact-overlay:linear-gradient(90deg,rgba(34,89,214,.88) 0%,rgba(34,89,214,.68) 60%,rgba(34,89,214,.46) 100%);
  color:#fff
}
@media(max-width:1100px){
  .service-page--design .detail-facts>div,
  .service-page--design .detail-facts>div:nth-child(2),
  .service-page--design .detail-facts>div:nth-child(3){min-height:136px}
}
@media(max-width:980px){
  .service-page--design .detail-facts>div,
  .service-page--design .detail-facts>div:nth-child(2),
  .service-page--design .detail-facts>div:nth-child(3){
    min-height:173px;
    padding:1.4rem calc(1.4rem + 16px);
    clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)
  }
}
@media(max-width:680px){
  .service-page--design .detail-facts>div,
  .service-page--design .detail-facts>div:nth-child(2),
  .service-page--design .detail-facts>div:nth-child(3){
    min-height:129px;
    padding:1.25rem calc(1.4rem + 16px)
  }
}

/* Umfang, Einsatzfaelle, Material und Abgrenzung */
.service-page-body .detail-scope{
  padding-block:0 clamp(4.5rem,8vw,8rem)
}
.service-page-body .detail-scope>header{
  max-width:44ch;
  margin:0 0 clamp(2.25rem,3.6vw,3.25rem)
}
.service-page-body .detail-scope .eyebrow{color:var(--service-electric)}
.service-page-body .detail-scope h2{
  margin:1.1rem 0 0;
  color:var(--service-navy);
  font-size:clamp(2.1rem,3.2vw,3.2rem);
  font-weight:650;
  letter-spacing:-.05em;
  line-height:1.03;
  hyphens:auto;
  overflow-wrap:anywhere
}
.service-page-body .detail-scope-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.2vw,2rem)
}
.service-page-body .detail-scope-block{
  min-width:0;
  padding:clamp(1.6rem,2.4vw,2.4rem);
  background:#fff;
  border-top:2px solid var(--service-navy)
}
.service-page-body .detail-scope-block h3{
  margin:0 0 1rem;
  color:var(--service-navy);
  font-size:clamp(1.12rem,1.45vw,1.35rem);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.2
}
.service-page-body .detail-scope-block ul{
  margin:0;
  padding:0;
  list-style:none
}
.service-page-body .detail-scope-block li{
  position:relative;
  padding:.72rem 0 .72rem 1.4rem;
  border-bottom:1px solid rgba(11,31,79,.14);
  color:var(--service-muted);
  font-size:clamp(.97rem,1.12vw,1.05rem);
  line-height:1.6
}
.service-page-body .detail-scope-block li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.35em;
  width:9px;
  height:2px;
  background:var(--service-electric)
}
.service-page-body .detail-scope-block li:last-child{border-bottom:0;padding-bottom:0}
.service-page-body .detail-scope-block p{
  margin:0;
  color:var(--service-muted);
  font-size:clamp(.97rem,1.12vw,1.05rem);
  line-height:1.72
}
.service-page-body .detail-scope-limits{
  grid-column:1 / -1;
  background:var(--service-navy);
  border-top-color:var(--service-electric)
}
.service-page-body .detail-scope-limits h3{color:#fff}
.service-page-body .detail-scope-limits p{color:rgba(255,255,255,.82)}
@media(max-width:1180px){
  .service-page-body .detail-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-page-body .detail-scope-block:nth-child(3){grid-column:1 / -1}
}
@media(max-width:980px){
  .service-page-body .detail-scope-grid{grid-template-columns:minmax(0,1fr)}
  .service-page-body .detail-scope-block:nth-child(3){grid-column:auto}
  .service-page-body .detail-scope-limits{grid-column:auto}
}

/* Einheitliches Startseiten-Layout für alle verbleibenden Unterseiten */
.service-page--build .detail-hero{
  min-height:calc(100svh - 92px);
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  background:var(--detail-hero-image) center/cover no-repeat
}
.service-page--build .detail-primary{
  padding:clamp(3rem,5vw,5rem) max(clamp(2rem,5vw,5.5rem),calc((100vw - 88rem)/2 + 5rem));
  background:linear-gradient(135deg,rgba(11,31,79,.88),rgba(6,18,46,.84));
  color:#fff
}
.service-page--build .detail-primary::after{
  display:none
}
.service-page--build .detail-primary::before{
  opacity:.14
}
.service-page--build .detail-breadcrumb ol{
  margin-bottom:clamp(1.5rem,3vh,2.5rem)
}
.service-page--build .detail-service-number{
  color:#9eb4eb
}
.service-page--build .detail-primary h1{
  color:#fff
}
.service-page--build .detail-lead{
  color:#fff;
  opacity:.86
}
.service-page--build .detail-action-secondary{
  background:#fff;
  color:var(--service-navy)
}
.service-page--build .detail-side{
  display:grid;
  place-items:center;
  padding:clamp(2rem,4vw,4.5rem);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.38),transparent 22rem),
    linear-gradient(rgba(243,240,232,.8),rgba(243,240,232,.86));
  color:var(--service-navy)
}
.service-page--build .detail-logo-side img{
  width:min(100%,30rem);
  height:auto;
  position:relative;
  z-index:1;
  display:block
}
@media(max-width:1100px){
  .service-page--build .detail-hero{
    grid-template-columns:minmax(0,2fr) minmax(260px,1fr)
  }
}
@media(max-width:980px){
  .service-page--build .detail-hero{
    min-height:calc(100svh - 82px);
    grid-template-columns:minmax(0,2fr) minmax(230px,1fr)
  }
  .service-page--build .detail-primary{
    min-height:100%;
    padding:2.75rem clamp(1.5rem,4vw,3rem)
  }
  .service-page--build .detail-primary h1{
    font-size:clamp(3rem,7vw,5rem)
  }
  .service-page--build .detail-side{
    min-height:100%;
    padding:clamp(1.5rem,3vw,2.5rem)
  }
}
@media(max-width:560px){
  .service-page--build .detail-hero{
    min-height:calc(100svh - 82px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(500px,1.8fr) minmax(220px,1fr)
  }
  .service-page--build .detail-primary{
    min-height:500px;
    padding:1.65rem 1.2rem 1.5rem
  }
  .service-page--build .detail-breadcrumb ol{
    margin-bottom:1.25rem
  }
  .service-page--build .detail-service-number{
    margin-bottom:.55rem
  }
  .service-page--build .detail-kicker{
    margin-bottom:.55rem
  }
  .service-page--build .detail-primary h1,
  .service-page--build .detail-primary .detail-title-long{
    max-width:13ch;
    font-size:clamp(2.75rem,13vw,4rem);
    overflow-wrap:normal
  }
  .service-page--build .detail-lead{
    margin-top:1rem;
    font-size:.95rem
  }
  .service-page--build .detail-actions{
    gap:.65rem;
    margin-top:1.25rem
  }
  .service-page--build .detail-actions a{
    min-height:48px
  }
  .service-page--build .detail-side{
    min-height:220px;
    padding:1.25rem 2rem
  }
  .service-page--build .detail-logo-side img{
    width:min(76vw,19rem)
  }
}

/* ============================================================
   HANDYMODUS fuer die Leistungsseiten
   Mindestschriftgroessen und Trefferflaechen; die Grundlagen
   (Safe-Area, Menue, feste Anruf-Leiste) stehen in styles.css.
   ============================================================ */

@media(max-width:980px){
  .service-page-body .detail-breadcrumb ol{font-size:.78rem;gap:.15rem;margin-bottom:2rem}
  .service-page-body .detail-breadcrumb li{display:flex;align-items:center}
  .service-page-body .detail-breadcrumb a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-inline:.25rem
  }
  .service-page-body .detail-breadcrumb li+li::before{margin-right:.3rem}
  .service-page-body .detail-kicker{font-size:.78rem}
  .service-page-body .detail-facts dt{font-size:.78rem;letter-spacing:.14em}
  .service-page-body .detail-related-grid small{font-size:.78rem;letter-spacing:.13em}
  .service-page-body .detail-related-head>a{min-height:52px}
}

/* ============================================================
   HANDYMODUS - eine Kartenform fuer alle geschnittenen Kaesten
   Kante links, Schraege rechts - wie die erste Leistungskarte
   auf der Startseite.
   ============================================================ */

@media(max-width:980px){
  .service-page-body .detail-related-grid a{
    --related-shape:polygon(0 0,100% 0,calc(100% - var(--service-cut)) 100%,0 100%);
    --related-shape-inner:polygon(5px 5px,calc(100% - 5px) 5px,calc(100% - var(--service-cut) - 5px) calc(100% - 5px),5px calc(100% - 5px))
  }
  .service-page-body .detail-related-grid a,
  .service-page-body .detail-related-grid a:nth-child(2),
  .service-page-body .detail-related-grid a:nth-child(3){
    padding-left:1.4rem
  }
  .service-page--build .detail-facts>div,
  .service-page--build .detail-facts>div:nth-child(2),
  .service-page--build .detail-facts>div:nth-child(3),
  .service-page--design .detail-facts>div,
  .service-page--design .detail-facts>div:nth-child(2),
  .service-page--design .detail-facts>div:nth-child(3){
    margin-inline:0;
    clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
    padding-left:1.4rem;
    padding-right:calc(1.4rem + 16px)
  }
  .service-page-body .detail-process-list li,
  .service-page-body .detail-process-list li:nth-child(2),
  .service-page-body .detail-process-list li:nth-child(3){
    width:100%;
    margin-inline:0;
    clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
    padding-left:1.4rem;
    padding-right:calc(1.4rem + 18px)
  }
}

/* Handymodus: auch im Unterseiten-Hero faellt die Logotafel weg -
   das Logo steht bereits im Header direkt darueber. */
@media(max-width:980px){
  .service-page-body .detail-logo-side{display:none}
  /* Der Hero waechst mit dem Inhalt statt eine Bildschirmhoehe zu
     erzwingen - sonst klafft unter den Buttons ein Loch. */
  .service-page-body .detail-hero,
  .service-page--build .detail-hero{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:auto
  }
  .service-page-body .detail-primary{
    justify-content:flex-start;
    padding-top:2rem;
    padding-bottom:2.75rem
  }
}

/* Handymodus: statt harter Trennung mitten im Wort ("Trockenbauproj|ekt")
   echte Silbentrennung - die Seiten sind mit lang="de" ausgezeichnet. */
@media(max-width:980px){
  .service-page-body .detail-primary h1,
  .service-page-body .detail-overview h2,
  .service-page-body .detail-process h2,
  .service-page-body .detail-scope h2,
  .service-page-body .detail-related h2,
  .service-page-body .detail-related-grid strong{
    overflow-wrap:break-word;
    hyphens:auto
  }
  /* max-width:none allein liess die Ueberschrift die Grid-Spalte
     aufblaehen (min-content des laengsten Wortes). Darum zusaetzlich
     min-width:0 auf den Grid-Kindern und eine mitskalierende Groesse. */
  .service-page-body .detail-overview{grid-template-columns:minmax(0,1fr)}
  .service-page-body .detail-overview>header,
  .service-page-body .detail-overview .detail-copy{min-width:0}
  .service-page-body .detail-overview h2{
    max-width:none;
    min-width:0;
    font-size:clamp(2rem,9.5vw,3.4rem)
  }
}

/* Lange deutsche Komposita ("Montagearbeiten") passen bei 320 px nicht in
   die Desktop-Groesse. Die Ueberschrift skaliert mobil mit der Breite. */
@media(max-width:980px){
  .service-page-body .detail-primary h1,
  .service-page-body .detail-primary .detail-title-long{
    max-width:none;
    font-size:clamp(2.1rem,10.5vw,3.6rem)
  }
}

/* Letzter Ghost-Pill der Seite: mobil in die Formsprache der uebrigen
   Buttons gebracht (solide Flaeche, abgeschnittene Ecken). */
@media(max-width:980px){
  .service-page-body .detail-related-head>a{
    width:100%;
    min-height:54px;
    border:0;
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    background:var(--related-ink);
    color:var(--related-surface);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase
  }
  .service-page-body .detail-related-head>a:hover{
    background:var(--service-electric);
    color:#fff
  }
  .service-page-body .detail-related-head>a:focus-visible{clip-path:none}
}

/* ============================================================
   Rechtes Hero-Panel der Leistungsseiten
   ------------------------------------------------------------
   Bekommt dasselbe Tischbild und denselben hellen Schleier wie
   das rechte Panel der Startseite (.split-build-logo-panel),
   damit beide gleich wirken. Ohne die Bildebene schien vorher
   das Leistungsbild des Heros durch die halbtransparenten
   Verlaeufe hindurch - je Unterseite ein anderes Motiv.
   Der Abstand traegt den Harz-Link unter dem Logo.
   ============================================================ */
/* Zwei Klassen statt einer: .service-page--build .detail-side weiter oben
   hat Spezifitaet 0,2,0 - mit nur .detail-logo-side verlaere diese Regel. */
.detail-side.detail-logo-side{
  gap:clamp(1.25rem,2vw,2rem);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.36),transparent 22rem),
    linear-gradient(rgba(242,239,231,.78),rgba(242,239,231,.84)),
    url("assets/hero/leonardo-hero-tisch-v1.webp") center/cover no-repeat
}

/* =============================================================
   Bewerbungsseite (Karte #209)
   Praefix .service-page-body wie bei .detail-copy weiter oben:
   die Grundregeln dort haben Spezifitaet 0,2,0 und wuerden sonst
   gewinnen.
   ============================================================= */

/* Ablaufliste. KEIN eigener border-top: .detail-copy bringt bereits
   eine 2px-Linie mit, zwei davon uebereinander sehen aus wie ein
   Fehler. Die Liste haengt sich deshalb direkt darunter. */
.service-page-body .bewerbung-schritte{
  counter-reset:schritt;
  list-style:none;
  margin:0;padding:0
}
.service-page-body .bewerbung-schritte li{
  display:grid;
  grid-template-columns:3.2rem minmax(0,15rem) minmax(0,1fr);
  gap:.3rem 1.4rem;
  padding:1.45rem 0;
  border-bottom:1px solid var(--service-line)
}
.service-page-body .bewerbung-schritte li::before{
  counter-increment:schritt;
  content:"0" counter(schritt);
  grid-row:1/3;
  padding-top:.4rem;
  color:var(--service-electric);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.15em
}
.service-page-body .bewerbung-schritte strong{
  color:var(--service-navy);
  font-size:clamp(1.12rem,1.45vw,1.3rem);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.35
}
.service-page-body .bewerbung-schritte span{
  color:var(--service-muted);
  line-height:1.7
}

/* Die beiden Zustandskaesten. Weisse Karte auf dem Papierton der
   Seite - derselbe Trick wie bei .detail-scope-block, sonst sieht
   der Kasten auf gleichfarbigem Grund aus wie ein nackter Strich.
   Der Akzent links steht mit vollem Innenabstand frei, statt am
   Text zu kleben. */
.service-page-body .bewerbung-hinweis,
.service-page-body .bewerbung-mail{
  display:grid;
  gap:.6rem;
  margin-top:clamp(2.2rem,3.5vw,3.2rem);
  padding:clamp(1.7rem,2.5vw,2.4rem) clamp(1.7rem,2.5vw,2.6rem);
  border:0;
  border-left:5px solid var(--service-electric);
  background:#fff;
  color:var(--service-muted);
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.7
}
.service-page-body .bewerbung-mail{border-left-color:var(--service-navy)}
.service-page-body .bewerbung-kicker{
  color:var(--service-electric);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1
}
.service-page-body .bewerbung-mail .bewerbung-kicker{color:var(--service-navy)}
.service-page-body .bewerbung-hinweis strong,
.service-page-body .bewerbung-mail strong{
  color:var(--service-navy);
  font-size:clamp(1.12rem,1.5vw,1.35rem);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.4
}
.service-page-body .bewerbung-hinweis a,
.service-page-body .bewerbung-mail a{
  color:inherit;
  text-underline-offset:.25rem
}
.service-page-body .bewerbung-mail strong a{
  text-decoration-thickness:2px;
  overflow-wrap:anywhere
}
.service-page-body .bewerbung-hinweis[hidden],
.service-page-body .bewerbung-mail[hidden]{display:none}

@media(max-width:560px){
  .service-page-body .bewerbung-schritte li{
    grid-template-columns:2.6rem minmax(0,1fr);
    gap:.15rem 1rem
  }
  .service-page-body .bewerbung-schritte span{grid-column:2}
}

/* Geschlechterzusatz in der Stellenueberschrift (Karte #209).
   Die h1 dort traegt overflow-wrap:anywhere - ohne nowrap bricht sie
   auch INNERHALB von "(m/w/d)". Kleiner gesetzt passt der Zusatz auf
   dieselbe Zeile wie "monteur", statt allein darunter zu haengen.
   Grundlinie bleibt gemeinsam, kein Hochstellen. */
.service-page-body .detail-primary h1 .stellen-zusatz{
  font-size:.4em;
  font-weight:600;
  letter-spacing:-.02em;
  white-space:nowrap
}

/* CTA-Ueberschrift der Bewerbungsseite (Karte #209).
   Die Grundregel begrenzt die Ueberschrift auf 11ch und trennt bei Bedarf
   per Silbentrennung - fuer "Vorhaben direkt besprechen." auf den sieben
   Leistungsseiten ist das gewollt, es ergibt den dreizeiligen Block.
   "Fragen zur Stelle?" ist kuerzer und wurde dadurch zu "Stel- / le?"
   zerschnitten. Hier deshalb ohne Breitenbegrenzung und ohne Trennung, in
   einer Zeile. Schriftgroesse bleibt unveraendert, damit die Seite neben
   den Leistungsseiten nicht aus dem Rahmen faellt.
   Geprueft von 320 bis 1600 px: passt ueberall in eine Zeile.
   Nur diese eine Ueberschrift - die uebrigen sieben bleiben, wie sie sind. */
.service-page-body .detail-cta h2.detail-cta-title-einzeilig{
  max-width:none;
  white-space:nowrap;
  hyphens:none
}
/* Auf schmalen Schirmen passt die Zeile bei 3rem nicht mehr in die
   Fensterbreite - ohne diese Regel wuerde die Ueberschrift 403px breit und
   damit ueber den Bildschirmrand hinauslaufen (das Umfeld schneidet es nur
   ab, sichtbar ist es trotzdem). Die Schrift geht deshalb mit der Breite
   mit, statt die Zeile zu sprengen. */
@media(max-width:680px){
  .service-page-body .detail-cta h2.detail-cta-title-einzeilig{
    font-size:min(11.2vw,3rem)
  }
}

/* Angeschnittene Ecken fuer die Karten der Leistungs- und Bewerbungsseiten
   (Karte #209, auf alle acht Seiten ausgerollt nach Entscheidung Jakob).
   Dieselbe Form wie die Knoepfe der Seite (.detail-cta-call, .form-submit,
   .detail-action-primary): oben rechts und unten links gekappt. Dort sind es
   16px; die Karten sind deutlich groesser, deshalb ein groesserer Anschnitt,
   der auf schmalen Schirmen mitgeht. */
.service-page-body .detail-scope-grid{
  --karten-cut:clamp(18px,2.2vw,30px)
}
.service-page-body .detail-scope-block{
  clip-path:polygon(
    0 0,
    calc(100% - var(--karten-cut)) 0,
    100% var(--karten-cut),
    100% 100%,
    var(--karten-cut) 100%,
    0 calc(100% - var(--karten-cut))
  )
}

/* =============================================================
   Rechtsseiten: Impressum und Datenschutz (Karte #209)
   Fliesstext statt Kachelraster - hier zaehlt Lesbarkeit, nicht
   Wirkung. Schmales Satzmass, ruhige Zwischenueberschriften.
   ============================================================= */
.service-page-body .rechts-main{
  padding-block:0
}
.service-page-body .rechts-shell{
  width:var(--shell);
  margin-inline:auto
}
.service-page-body .rechts-kopf{
  padding-block:clamp(3rem,6vw,6rem) clamp(2rem,3.5vw,3.5rem);
  border-bottom:2px solid var(--service-navy)
}
.service-page-body .rechts-kopf h1{
  max-width:16ch;
  margin:.9rem 0 0;
  color:var(--service-navy);
  font-size:clamp(2.8rem,5.4vw,5.4rem);
  font-weight:650;
  letter-spacing:-.06em;
  line-height:.94
}
.service-page-body .rechts-lead{
  max-width:44ch;
  margin:1.4rem 0 0;
  color:var(--service-muted);
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.6
}

/* Der Unfertig-Hinweis. Erbt die Form der Bewerbungs-Kaesten, damit
   die Seite EIN Muster fuer "hier fehlt noch etwas" hat. */
.service-page-body .rechts-hinweis{
  display:grid;
  gap:.6rem;
  margin-top:clamp(2rem,3vw,2.8rem);
  padding:clamp(1.7rem,2.5vw,2.4rem) clamp(1.7rem,2.5vw,2.6rem);
  border-left:5px solid var(--service-electric);
  background:#fff;
  color:var(--service-muted);
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.7
}
.service-page-body .rechts-hinweis strong{
  color:var(--service-navy);
  font-size:clamp(1.12rem,1.5vw,1.35rem);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.4
}

.service-page-body .rechts-text{
  max-width:68ch;
  padding-block:clamp(2.5rem,4vw,4rem) clamp(4rem,7vw,7rem);
  color:var(--service-muted);
  font-size:clamp(1rem,1.15vw,1.1rem);
  line-height:1.75
}
.service-page-body .rechts-text h2{
  max-width:none;
  margin:clamp(2.4rem,4vw,3.4rem) 0 .9rem;
  color:var(--service-navy);
  font-size:clamp(1.3rem,1.85vw,1.7rem);
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1.25
}
.service-page-body .rechts-text h2:first-child{margin-top:0}
.service-page-body .rechts-text p{margin:0 0 1rem}
.service-page-body .rechts-text ul{
  margin:0 0 1rem;
  padding-left:1.15rem
}
.service-page-body .rechts-text li{margin-bottom:.45rem}
.service-page-body .rechts-text strong{color:var(--service-navy)}
.service-page-body .rechts-text a{
  color:var(--service-navy);
  text-underline-offset:.25rem
}
.service-page-body .rechts-text code{
  padding:.1em .4em;
  background:rgba(11,31,79,.07);
  font-size:.92em
}
.service-page-body .rechts-fussnote{
  margin:0 0 1rem;
  padding-left:1rem;
  border-left:2px solid var(--service-line);
  font-size:.92em
}

/* Offene Stelle. Bewusst auffaellig und nicht zu uebersehen - eine
   Luecke, die im Layout untergeht, geht irgendwann live. */
.luecke{
  display:inline;
  /* KEIN waagerechter Innenabstand: mit box-decoration-break:clone reserviert
     der Browser den rechten Abstand des letzten Fragments beim Umbruch nicht,
     die Markierung stand dadurch 2 bis 6px ueber ihren Kasten hinaus.
     Die Luft kommt deshalb aus zwei box-shadow-Ringen - die malen ausserhalb
     der Box und veraendern das Layout nicht. */
  padding:.12em 0;
  background:#fff3cd;
  box-shadow:0 0 0 3px #fff3cd,0 0 0 4px #d9a300;
  color:#6b4e00;
  font-weight:600;
  /* Ohne clone bekaeme eine ueber mehrere Zeilen laufende Markierung nur
     EINEN Rahmen um den gesamten Fluss - er wirkt dann aufgerissen. */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone
}

@media(max-width:680px){
  .service-page-body .rechts-kopf h1{font-size:clamp(2.4rem,10vw,3.4rem)}
}