/* problem/schluessel-verloren: layout only (tokens from theme.css). Plan: plans/problem-schluessel-verloren.plan.md */

/* 1 hero: keep "verloren –" together so the dash never starts a line (text content of the h1 is unchanged) */
.vl-nb{white-space:nowrap}

/* 3 sofort-tun: wider text column; photo in its own figure (frame behind the photo only, caption below it) */
.vl-fig{margin:0}
.vl-fig .split__img{aspect-ratio:4/3}
.vl-fig figcaption{margin-top:1.6rem;font-size:.98rem;color:var(--t-muted)}
@media (min-width:900px){
  .split.vl-first{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem)}
  .vl-fig .split__img{aspect-ratio:4/5}
}

/* 4 + 5: notice under a pair / card grid */
.vl-note{margin-top:1.4rem}

/* 5 wege: wider heading block, "Weg n" pill + trigger line inside each card */
.vl-wege-sec .sec__head{max-width:62rem}
.vl-wege{counter-reset:vlweg}
.vl-wege .icard{counter-increment:vlweg}
.vl-wege .icard::before{content:"Weg " counter(vlweg);position:absolute;top:1.2rem;right:1.2rem;padding:.2rem .8rem;border-radius:var(--pill);background:var(--accent-100);color:var(--accent-700);font:800 .95rem/1.3 var(--f-head)}
.vl-when{display:block;margin-bottom:.5rem;padding-left:.8rem;border-left:4px solid var(--accent-600);color:var(--ink);font-weight:700}

/* 6 ablauf: heading column left (sticky), rail right; steps 3 + 4 are conditional = dashed number ring */
@media (min-width:900px){
  .vl-ablauf>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .vl-ablauf .sec__head{position:sticky;top:calc(var(--hdr-h) + 1.5rem);margin-bottom:0}
}
.vl-ablauf .step:nth-child(3) .step__n,.vl-ablauf .step:nth-child(4) .step__n{background:transparent;color:var(--accent);border:2px dashed var(--accent)}

/* 7 beratung: argument left, phone card right (wide enough for the big number); no checklist, so one column inside the card */
@media (min-width:900px){
  .vl-call>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .vl-call .sec__head{margin-bottom:0;max-width:none}
}
.vl-call .phoneblock{grid-template-columns:minmax(0,1fr)}