/**
 * Anfragestrecke.
 * Version: 1.0.0
 *
 * Erbt ausschließlich Design Tokens. Kein Hex-Wert, keine freie Größe.
 * Breakpoints als Zahlen — siehe ADR-004, Frage 4.
 */

.mb-wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-7);
}

@media (min-width: 1024px) {
  .mb-wizard { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* ====================================================================
   GRUNDRISS — die Signaturanimation der Seite und die einzige.
   Die Standfläche füllt sich mit jedem Schritt um ein Wandsegment.
   ==================================================================== */

/*
 * Das Kleben gilt nur im zweispaltigen Raster. In der einspaltigen Ansicht
 * steht die Leiste ueber dem Inhalt — bliebe sie dort kleben, liefe der
 * Inhalt beim Scrollen darunter durch und beides ueberlagerte sich.
 */
.mb-wizard__fortschritt {
  align-self: start;
}

@media (min-width: 1024px) {
  .mb-wizard__fortschritt {
    position: sticky;
    top: var(--mb-space-5);
  }
}

.mb-grundriss {
  display: block;
  width: 100%;
  max-width: var(--mb-space-10);
  margin-block-end: var(--mb-space-5);
}

.mb-grundriss__flaeche { fill: var(--mb-petrol-100); }

.mb-grundriss__wand {
  fill: var(--mb-linie);
  transition: fill var(--mb-dauer-ruhig) var(--mb-easing);
}

.mb-grundriss__wand.is-gebaut { fill: var(--mb-petrol-700); }

/* Der aktive Schritt trägt Zinkgelb, erledigte Petrol, kommende Ink 40 %. */
.mb-grundriss__wand.is-aktiv { fill: var(--mb-zink); }

/*
 * Bei reduzierter Bewegung entfällt der Aufbau. Der Endzustand des jeweiligen
 * Schritts bleibt sichtbar — die Information geht nicht verloren, nur der
 * Übergang (design/design-guide_v1.0.md, Abschnitt 8).
 */
@media (prefers-reduced-motion: reduce) {
  .mb-grundriss__wand { transition: none; }
}

/* ====================================================================
   SCHRITTLISTE
   ==================================================================== */

.mb-wizard__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-wizard__schritt {
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
  padding-block: var(--mb-space-2);
  color: var(--mb-ink-40);
  font-size: var(--mb-text-sm);
}

.mb-wizard__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mb-space-5);
  height: var(--mb-space-5);
  font-size: var(--mb-text-2xs);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
}

.mb-wizard__schritt.is-erledigt { color: var(--mb-petrol-700); }

.mb-wizard__schritt.is-erledigt .mb-wizard__nummer {
  background: var(--mb-petrol-700);
  color: var(--mb-flaeche);
  border-color: var(--mb-petrol-700);
}

.mb-wizard__schritt.is-aktiv {
  color: var(--mb-ink);
  font-weight: var(--mb-fw-semibold);
}

.mb-wizard__schritt.is-aktiv .mb-wizard__nummer {
  background: var(--mb-zink);
  color: var(--mb-ink);
  border-color: var(--mb-zink);
}

.mb-wizard__stand {
  margin-block-start: var(--mb-space-4);
  padding-block-start: var(--mb-space-3);
  color: var(--mb-ink-60);
  font-size: var(--mb-text-xs);
  border-block-start: var(--mb-border);
}

/* ====================================================================
   SCHRITTINHALT
   ==================================================================== */

.mb-wizard__inhalt > * + * { margin-block-start: var(--mb-space-5); }

.mb-wizard__navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mb-space-4);
  margin-block-start: var(--mb-space-7);
  padding-block-start: var(--mb-space-5);
  border-block-start: var(--mb-border);
}

.mb-wizard__gespeichert {
  color: var(--mb-freigabe);
  font-size: var(--mb-text-sm);
}

.mb-wizard__gespeichert:empty { display: none; }

/* ====================================================================
   KONTROLLMOMENT — Schritt 7
   ==================================================================== */

.mb-wizard__kontrolle {
  padding: 0;
  border: 0;
}

.mb-wizard__freigabe {
  flex-direction: column;
  margin-block: var(--mb-space-5);
}

.mb-wizard__freigabe .mb-option {
  align-items: flex-start;
  width: 100%;
  padding: var(--mb-space-4);
  min-height: auto;
}

.mb-wizard__freigabe .mb-option > span {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-1);
}

.mb-wizard__consent {
  align-items: flex-start;
  margin-block-end: var(--mb-space-4);
  padding: var(--mb-space-4);
  background: var(--mb-flaeche-alt);
  border-radius: var(--mb-radius-1);
}

.mb-wizard__consent input { margin-block-start: var(--mb-space-1); }

/* ====================================================================
   FEHLER — am Feld und zusätzlich in der Zusammenfassung
   ==================================================================== */

.mb-wizard__fehlerliste {
  padding: var(--mb-space-4) var(--mb-space-5);
  background: var(--mb-fehler-100);
  border-inline-start: var(--mb-border-marke);
  border-color: var(--mb-fehler);
  border-radius: var(--mb-radius-1);
}

.mb-wizard__fehlerliste ul { margin-block: var(--mb-space-2) 0; padding-inline-start: var(--mb-space-5); }
.mb-wizard__fehlerliste:empty { display: none; }

/*
 * Ein Inhaltsabschnitt des Assistenten. Bewusst NICHT .mb-wizard__schritt —
 * so heissen die Punkte der Fortschrittsliste, und deren display: flex
 * stellte hier Ueberschrift und Felder nebeneinander.
 */
.mb-wizard__seite {
  display: block;
  max-inline-size: 44rem;
}

.mb-wizard__seite > h2 {
  margin-block: 0 var(--mb-space-5);
  font-size: var(--mb-text-xl);
}

/*
 * Das hidden-Attribut soll gelten, auch wenn eine Klasse spaeter display
 * setzt. Die Standardregel der Browser hat die niedrigste Spezifitaet und
 * verliert gegen jede Klassenregel — genau daran ist der Assistent beim
 * ersten Anlauf gescheitert.
 */
.mb-wizard [hidden] { display: none !important; }

.mb-wizard__navigation .mb-knopf[disabled] { cursor: progress; }