/* service/schloss-austausch: layout only (tokens from theme.css). Plan: plans/service-schloss-austausch.plan.md */

/* 1 problem: lead beside the routing note */
.sa-problem{display:grid;gap:1.6rem;align-items:center}
@media (min-width:900px){.sa-problem{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem}}

/* 3 anlaesse: two groups (hoch, planbar) + urgency pill */
.sa-anlaesse{display:grid;gap:1.3rem}
.sa-hoch .icard{border-top:5px solid var(--brand)}
.sa-plan .icard{border-top:5px solid var(--accent)}
.sa-urg{display:block;width:fit-content;margin-top:.8rem;padding:.25rem .85rem;border-radius:var(--pill);font:800 .95rem/1.3 var(--f-head)}
.sa-urg--hoch{background:var(--brand);color:#fff}
.sa-urg--plan{background:var(--accent-100);color:var(--accent-700)}

/* 4 leistungsumfang + 11 faq: heading column left (sticky), list right */
@media (min-width:900px){
  .sa-spec>.wrap,.sa-faq>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .sa-spec .sec__head,.sa-faq .sec__head{position:sticky;top:calc(var(--hdr-h) + 1.5rem);margin-bottom:0}
}

/* 5 ablauf: six steps as 3 x 2 grid, decision markers */
@media (min-width:600px){.sa-ablauf .steps.steps--n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.sa-ablauf .steps.steps--n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sa-decide{display:block;width:fit-content;margin-top:.8rem;padding:.2rem .8rem;border:2px solid var(--accent);border-radius:var(--pill);color:var(--accent);font:800 .95rem/1.3 var(--f-head)}

/* 7 leistungsgrenze + 8 kostenlose-beratung: spacing between own blocks */
.sa-stack{display:grid;gap:1.4rem}
.sa-after{max-width:46rem;margin:1.6rem auto 0;text-align:center}

/* 10 local: two stacked photos */
.sa-local{display:grid;gap:1.3rem}
.sa-local__fig{margin:0}
.sa-local__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--soft2)}
.sa-local__img img{width:100%;height:100%;object-fit:cover}
.sa-local__fig figcaption{margin-top:.55rem;font-size:1rem;color:var(--t-muted)}
@media (min-width:600px) and (max-width:899px){.sa-local{grid-template-columns:repeat(2,minmax(0,1fr))}}