/* Home section «How we work» (owner 20.10), js/ablauf.js. The head comes from css/leistungen.css (.wd); spacing and
   card tokens from css/tokens.css. Four step cards 1 → 2 → 4 per row (never 3 + 1), a line through their numbers on
   desktops, then the wide «monthly care» card on Föhn */
.ab-body { display: grid; gap: var(--card-gap); }
.ab-steps { position: relative; display: grid; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-line { display: none; }
@media (min-width: 1000px) {   /* the path of the four steps: a thin line behind the numbers */
  .ab-line { display: block; position: absolute; z-index: 0; left: 12%; right: 12%; top: calc(var(--card-pad) + 22px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--warm-rgb), .45), rgba(var(--sky-rgb), .45)); }
}
.ab-step { position: relative; z-index: 1; display: grid; align-content: start; gap: 12px; padding: var(--card-pad); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-1); }
.ab-step__n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; color: #fff; font: 600 17px/1 var(--font);
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 16px -8px rgba(var(--warm-rgb), .9); }
.ab-step h3 { margin: 0; font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.ab-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.ab-step .ab-step__time { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 6px 12px 6px 9px; border-radius: var(--r-s);
  background: var(--sky-tint); color: var(--sky-ink); font: 500 13.5px/1.25 var(--font); }
.ab-step__time .icon { display: block; flex: none; width: 16px; height: 16px; }
.ab-step__time .icon svg, .ab-care .icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-care { display: grid; gap: 18px; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--foehn); box-shadow: var(--shadow-1); }
.ab-care h3 { margin: 0; font: 600 clamp(22px, 2vw, 30px)/1.15 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.ab-care ul { display: grid; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .ab-care ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-care li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ab-care li .icon { display: block; flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--positive); }   /* green = a confirmed part of the service */
@media (max-width: 599px) { .ab-step, .ab-care { border-radius: var(--r-l); } }