/* ============================================================
   VCI Design — Kontaktformular in drei Schritten
   Nur kontakt.html, geladen nach kontakt.css.

   Diese Datei gestaltet ausschliesslich die Schritt-Ebene: die
   Auswahlkacheln, die Fortschrittszeile und die Steuerung. Die
   Textfelder in Schritt 3 kommen unveraendert aus kontakt.css,
   ihre .feld-Regeln greifen hier weiter.

   Welcher Schritt sichtbar ist, entscheidet js/kontakt-wizard.js
   ueber das hidden-Attribut. Ohne JavaScript steht kein einziges
   hidden im Markup, dann liegen alle drei Bloecke untereinander
   und das Formular ist ein ganz normales langes Formular.
   ============================================================ */

/* --- Riegel fuer das hidden-Attribut --------------------------
   hidden wirkt ueber die Browser-Regel [hidden] { display: none },
   und die traegt die Gewichtung 0,0,1. Jede Klasse, die display
   setzt, schlaegt sie damit. Genau das tun .wizard__steuerung mit
   flex und .formular__senden aus kontakt.css mit inline-block:
   ohne diese Regel stuenden Weiter und Zurueck ohne JavaScript
   sichtbar da und der Absenden-Knopf schon in Schritt 1.

   Attribut plus Klasse ergibt 0,2,0 und gewinnt, ganz ohne
   !important.
   ------------------------------------------------------------ */
.wizard__steuerung[hidden],
.wizard__schritt[hidden],
.formular__senden[hidden] {
  display: none;
}

/* --- Fortschritt ----------------------------------------------
   Traegt aria-live und wird beim Schrittwechsel neu geschrieben,
   damit ein Screenreader die neue Stufe ansagt.
   ------------------------------------------------------------ */
.wizard__fortschritt {
  margin-bottom: var(--space-l);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- Der einzelne Schritt -------------------------------------
   fieldset und legend bringen kraeftige Browser-Vorgaben mit,
   Rahmen, Innenabstand und eine eigene Schriftgroesse. Die
   werden hier zurueckgesetzt, sonst saehe jeder Schritt aus wie
   ein Kasten aus einem Behoerdenformular.

   min-inline-size: 0 ist kein Zierrat: fieldset hat einen
   eingebauten Mindestwert, der es im Grid daran hindert, unter
   die Breite seines Inhalts zu schrumpfen.
   ------------------------------------------------------------ */
.wizard__schritt {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.wizard__legende {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-medium);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-fg);
}

/* Der Schritt bekommt beim Wechsel den Fokus, damit Tastatur und
   Screenreader mitkommen. Er ist kein Bedienelement, deshalb
   bleibt der Ring hier aus. Die Ansage uebernimmt der
   Fortschritt, die sichtbare Orientierung der Wechsel selbst. */
.wizard__schritt:focus {
  outline: none;
}

/* Ohne JavaScript folgen die Schritte aufeinander und brauchen
   Abstand. Mit JavaScript ist immer nur einer sichtbar, dann
   greift die Regel nie, weil hidden vorher zuschlaegt. */
.wizard__schritt + .wizard__schritt {
  margin-top: var(--space-xl);
}

/* --- Kacheln --------------------------------------------------
   Der eigentliche Input liegt per .visually-hidden aus base.css
   darunter: bedienbar, im Barrierefreiheitsbaum, nur eben nicht
   sichtbar. Die Kachel ist das Label darum, deshalb reagiert sie
   auf Klick und Tastatur ohne eine Zeile JavaScript.
   ------------------------------------------------------------ */
.wizard__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.kachel {
  display: flex;
  align-items: center;
  /* --space-xl, nicht xxl: xxl ist der Abstand ZWISCHEN Sektionen
     und macht aus einer einzeiligen Kachel eine leere Flaeche. */
  min-height: var(--space-xl);
  padding: var(--space-s) var(--space-m);
  background-color: var(--color-bg);
  /* Wie .feld__eingabe in kontakt.css und aus demselben Grund:
     die Kante eines Bedienelements faellt unter WCAG 1.4.11 mit
     3:1. --color-border erreicht gegen den Seitenhintergrund nur
     1.20:1, --color-fg-muted kommt auf 5.11:1. */
  border: 1px solid var(--color-fg-muted);
  color: var(--color-fg);
  font-size: var(--text-medium);
  cursor: pointer;
  /* Nur transform, damit die Bewegung auf der GPU bleibt. Der
     Zustandswechsel selbst laeuft ueber Rahmen und Flaeche und
     ist bewusst ohne Uebergang, er soll sofort ablesbar sein. */
  transition: transform var(--duration-short) var(--ease-base);
}

.kachel:hover {
  transform: translateX(var(--space-xs));
}

/* --- Der gewaehlte Zustand ------------------------------------
   Bewusst ueber DREI Merkmale zugleich: Flaeche schwarz, Text
   weiss, Rahmen dicker. WCAG 1.4.1 verlangt, dass Farbe nie das
   einzige Mittel ist, und der Fehlerzustand in kontakt.css loest
   das bereits nach demselben Muster ueber Strichdicke.

   :has statt einer Klasse am Label: der Zustand haengt damit
   direkt am Input und bleibt richtig, auch wenn jemand ihn per
   Tastatur oder ueber die Entwicklerwerkzeuge aendert. Kein
   JavaScript muss ihn nachpflegen.
   ------------------------------------------------------------ */
.kachel:has(input:checked) {
  background-color: var(--color-black);
  color: var(--color-white);
  border-width: 2px;
  border-color: var(--color-black);
  /* Der dickere Rahmen wuerde die Kachel sonst um zwei Pixel
     wachsen lassen und die Zeile springen. */
  padding: calc(var(--space-s) - 1px) calc(var(--space-m) - 1px);
}

/* Der Fokusring aus base.css sitzt am unsichtbaren Input und
   waere damit nicht zu sehen. Er wandert deshalb auf die Kachel. */
.kachel:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* --- Steuerung ------------------------------------------------ */
.wizard__steuerung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

.wizard__weiter,
.wizard__zurueck {
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--duration-short) var(--ease-base);
}

/* Weiter fuehrt, Zurueck begleitet. Deshalb traegt nur Weiter die
   Akzentflaeche, wie der Absenden-Knopf in kontakt.css. */
.wizard__weiter {
  background-color: var(--color-accent);
  color: var(--color-black);
  border: none;
}

.wizard__zurueck {
  background-color: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-fg-muted);
}

.wizard__weiter:hover:not(:disabled),
.wizard__zurueck:hover {
  transform: translateX(var(--space-xs));
}

/* Gesperrt, solange in diesem Schritt nichts gewaehlt ist. Auch
   hier nicht allein ueber Farbe: der Zeiger wechselt mit und das
   disabled-Attribut sagt es der Hilfstechnik ohnehin an. */
.wizard__weiter:disabled {
  background-color: var(--color-border);
  color: var(--color-fg-muted);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .wizard__kacheln {
    grid-template-columns: 1fr;
  }

  .wizard__steuerung {
    flex-direction: column-reverse;
  }
}