/* Checkliste «Betrieb einrichten» auf Start (onboarding.js) und Bereich «Erste Schritte» (erste-schritte.js), Schalter
   onboarding. Aufbau wie die Blöcke von Start v2 (start.css): Kopf über der Karte, darin Fortschrittslinie und Liste.
   Telefon: Knöpfe unter dem Text, über die ganze Breite. */

/* Block: Kopf (Titel, ein Satz, rechts eine Handlung), darunter die Karte */
.es-block { margin: 0 0 32px; }
.es-block > .card { margin: 0; }
.es-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.es-kopf-text { min-width: 0; flex: 1 1 240px; }
.es-kopf h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.es-kopf p { margin: 4px 0 0; font-size: 13px; color: var(--color-muted-fg); }
.es-seite .page-header { margin-bottom: 32px; }

/* Fortschrittslinie: ein Abschnitt je Schritt */
.es-linie { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 4px; padding: 0; }
.es-seg { height: 6px; border-radius: 999px; background: var(--color-muted); }
.es-seg-erledigt { background: var(--ok); }
.es-seg-uebersprungen { background: var(--color-faint-fg); opacity: .35; }
.es-seg-jetzt { background: var(--color-primary); }

/* Liste der Schritte und Kapitel */
.es-liste { list-style: none; margin: 0; padding: 0; }
.es-schritt, .es-kapitel {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center;
  min-height: 56px; padding: 12px 0; border-top: 1px solid var(--color-border-2);
}
.es-schritt:first-child, .es-kapitel:first-child { border-top: 0; }
.es-kapitel { align-items: start; }
.es-marke {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border); font-size: 13px; font-weight: 600; color: var(--color-muted-fg);
  font-variant-numeric: tabular-nums;
}
.es-marke svg { width: 14px; height: 14px; }
.es-erledigt .es-marke { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.es-uebersprungen .es-marke { background: var(--color-muted); border-color: var(--color-muted); }
.es-jetzt .es-marke { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.es-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-muted-fg); }
.es-text strong { color: var(--color-card-fg); font-weight: 600; }
.es-erledigt .es-text strong, .es-uebersprungen .es-text strong { color: var(--color-muted-fg); font-weight: 500; }
.es-hinweis { font-size: 13px; }
.es-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.es-status { display: inline-flex; align-items: center; gap: 8px; }
.es-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.es-knoepfe .btn { min-height: 44px; }
/* Der nächste Schritt der Checkliste: Knöpfe unter dem Text, damit die Zeile lesbar bleibt */
.es-schritt.es-jetzt { align-items: start; }
.es-schritt.es-jetzt .es-knoepfe { grid-column: 2 / -1; justify-content: flex-start; }

@media (max-width: 640px) {
  .es-schritt, .es-kapitel { grid-template-columns: 28px 1fr; }
  .es-schritt .es-status { grid-column: 2; }
  .es-knoepfe { grid-column: 2; justify-content: flex-start; }
  .es-knoepfe .btn { flex: 1 1 auto; }
}