/* ============================================================
   Leistungsseiten /trockenbau/ und /innenausbau/
   Baut auf style.css und blog.css auf.
   ============================================================ */

body.leistung-seite { padding-top: 84px; }

/* ---------- Kopfbereich ---------- */
.lst-head{padding:clamp(34px,5vw,62px) 0 clamp(28px,3.6vw,44px)}
.lst-head .eyebrow{margin-top:26px;margin-bottom:16px}
.lst-head h1{font-size:clamp(32px,5.4vw,66px);letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.lst-lead{margin-top:24px;max-width:62ch;font-size:clamp(17px,1.4vw,20px);line-height:1.62;color:var(--muted)}
.lst-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Titelbild ---------- */
.lst-hero{margin:0 0 clamp(40px,5vw,72px)}
.lst-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--plaster-2)}
@media(min-width:900px){ .lst-hero img{aspect-ratio:21/9} }

/* ---------- Leistungen ---------- */
.lst-leistungen{padding-bottom:clamp(30px,4vw,54px)}
.lst-leistungen h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;margin-bottom:clamp(26px,3vw,40px)}
.lk-raster{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:680px){ .lk-raster{grid-template-columns:repeat(2,1fr);column-gap:clamp(30px,4vw,64px)} }
@media(min-width:1080px){ .lk-raster{grid-template-columns:repeat(3,1fr)} }
.lk{padding:22px 0;border-bottom:1px solid var(--line)}
.lk h3{font-size:clamp(18px,1.9vw,22px);letter-spacing:-.022em;margin-bottom:8px}
.lk p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:44ch}

/* ---------- Phasen ---------- */
.phase{padding:clamp(40px,5vw,76px) 0}
.phase:nth-child(even){background:var(--plaster-2)}
.phase-kopf{max-width:60ch;margin-bottom:clamp(26px,3vw,40px)}
.phase-kopf h2{font-size:clamp(24px,3.2vw,38px);letter-spacing:-.03em;margin-bottom:14px}
.phase-text{color:var(--muted);font-size:16.5px;line-height:1.65}

.ref-raster{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,18px)}
@media(min-width:560px){ .ref-raster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .ref-raster{grid-template-columns:repeat(3,1fr)} }
.ref-raster > *{min-width:0}

.ref{
  position:relative;display:block;padding:0;border:0;width:100%;background:var(--plaster-2);
  overflow:hidden;cursor:zoom-in;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.ref.ref-in{opacity:1;transform:none}
.ref img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .4s}
.ref:hover img,.ref:focus-visible img{transform:scale(1.045);filter:brightness(.82)}
.ref-lupe{
  position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:22px;line-height:1;font-weight:300;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.ref:hover .ref-lupe,.ref:focus-visible .ref-lupe{opacity:1;transform:none}
/* Das erste Bild einer Phase darf größer stehen */
@media(min-width:1000px){
  .phase .ref-raster .ref:first-child:nth-last-child(n+5){grid-column:span 2;grid-row:span 2}
  .phase .ref-raster .ref:first-child:nth-last-child(n+5) img{aspect-ratio:1/1;height:100%}
}
/* Einzelnes Bild nicht über die ganze Breite ziehen */
.ref-raster .ref:only-child{max-width:760px}
.ref-raster .ref:only-child img{aspect-ratio:4/3}

/* ---------- Weiterführend ---------- */
.lst-weiter{padding:clamp(40px,5vw,72px) 0}
.lst-weiter-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px)}
@media(min-width:840px){ .lst-weiter-grid{grid-template-columns:1fr 1fr} }
.lst-weiter h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;margin-bottom:12px}
.lst-weiter h2 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.lst-weiter h2 a:hover{color:var(--accent)}
.lst-weiter p{color:var(--muted);font-size:16.5px}
.lst-blog{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.lst-blog li{border-bottom:1px solid var(--line)}
.lst-blog a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;
  text-decoration:none;color:var(--ink);font-size:16px;line-height:1.4;transition:padding-left .3s,color .25s;
}
.lst-blog a::after{content:"→";color:var(--accent);flex:none}
.lst-blog a:hover{padding-left:8px;color:var(--accent)}

/* ---------- Verweis von der Startseite ---------- */
.srv-mehr{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(26,95,168,.35);padding-bottom:3px;transition:gap .25s,border-color .25s;
}
.srv-mehr:hover{gap:14px;border-color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  .ref{opacity:1;transform:none}
  .ref img,.ref-lupe,.lst-blog a{transition:none}
}

/* Zweiter Querverweis im Abschnitt "Passend dazu" */
.lst-weiter-zwei{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}