/* ==========================================================================
   Charakter-Wizard — eigenes Stylesheet (REQ-UX-019)

   Bewusst nicht als Anhang an app.css: Der Wizard ist der größte
   zusammenhängende Bereich der Anwendung, und mehrere hundert Zeilen
   Sonderregeln am Ende einer gemeinsamen Datei findet später niemand wieder.

   Abstände, Radien und Schatten stammen hier aus den Tokens in app.css
   (REQ-UX-018). Nicht gemeint sind Linienstärken und Fokusrahmen — border und
   outline stehen in app.css genauso als Zahl da, das ist die Hausschreibweise.
   Genau zwei Stellen weichen ab, und beide mit Grund: die Rahmentönung je
   Bereich (.wz--origin bis .wz--weakness) führt feste rgba-Werte, weil app.css
   für eine Rahmenfarbe je Bereich kein Token kennt, und das Sehhilfenmuster
   .wz-sr trägt ein margin: -1px, das kein Gestaltungsabstand ist. Wer eine
   dritte nackte Zahl einträgt, wird von WizardTokenWaechterTests rot — die
   frühere Zusage an dieser Stelle war zu weit gefasst, und genau deshalb hat
   niemand mehr nachgesehen.

   Farbe trägt hier Bedeutung, keine Dekoration (REQ-UX-001): Türkis für
   Aktion und Auswahl, Gold für Machtwerte, Violett für Magie und Formen,
   Blau für Herkunft, Grün für gültig, Orange für offen, Rot für Fehler.
   Sie erscheint als Rahmen, Symbol oder Abzeichen — nie als große Fläche
   (REQ-UX-002).
   ========================================================================== */

/* ------------------------------------------------ Bereichsfarbe je Schritt */

/* Ein Schritt setzt --wz-tone, alles Weitere richtet sich danach. So trägt
   jede Karte ihre Bedeutung, ohne dass die Regeln vervielfacht werden. */
.wz {
    --wz-tone: var(--sh-accent);
    --wz-tone-soft: var(--sh-accent-soft);
    --wz-tone-line: var(--sh-accent-line);
}

.wz--identity  { --wz-tone: var(--sh-accent);  --wz-tone-soft: var(--sh-accent-soft);  --wz-tone-line: var(--sh-accent-line); }
.wz--origin    { --wz-tone: var(--sh-blue);    --wz-tone-soft: var(--sh-blue-soft);    --wz-tone-line: rgba(91, 156, 240, .35); }
.wz--power     { --wz-tone: var(--sh-gold);    --wz-tone-soft: var(--sh-gold-soft);    --wz-tone-line: rgba(217, 180, 90, .35); }
.wz--magic     { --wz-tone: var(--sh-purple);  --wz-tone-soft: var(--sh-purple-soft);  --wz-tone-line: rgba(169, 123, 214, .35); }
.wz--strength  { --wz-tone: var(--sh-success); --wz-tone-soft: var(--sh-success-soft); --wz-tone-line: rgba(79, 191, 123, .35); }
.wz--weakness  { --wz-tone: var(--sh-warn);    --wz-tone-soft: var(--sh-warn-soft);    --wz-tone-line: rgba(224, 162, 60, .35); }

/* ------------------------------------------------------------- Grundraster */

/* Drei Spalten: Schrittliste, Inhalt, Kurzbogen (REQ-UX-003).
   Der Inhalt bekommt den flexiblen Anteil — nicht die Navigation. Genau
   diese Verwechslung hat den Wizard vorher unbenutzbar schmal gemacht. */
.wz-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 330px;
    gap: var(--sh-space-lg);
    align-items: start;
}

/* Der Inhalt darf auf großen Bildschirmen mitwachsen, aber nicht ins
   Uferlose: sehr lange Zeilen liest niemand gern (REQ-UX-020). */
.wz-main { min-width: 0; max-width: 1100px; padding-bottom: var(--sh-space-sm); }

/* ------------------------------------------------------------ Fortschritt */

.wz-head {
    display: grid;
    gap: var(--sh-space-sm);
    padding-bottom: var(--sh-space-md);
    border-bottom: 1px solid var(--sh-border-soft);
    margin-bottom: var(--sh-space-lg);
}

.wz-head__crumbs {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.wz-head__crumbs span:not(:last-child)::after {
    content: "›";
    margin-left: var(--sh-space-xs);
    opacity: .6;
}

.wz-head__title { display: flex; align-items: baseline; gap: var(--sh-space-sm); flex-wrap: wrap; }
.wz-head__title h1 { margin: 0; font-size: 1.35rem; }

/* Der Kurzsteckbrief im Kopf: sobald Spezies und Klan stehen, sagt er mehr
   als „Neuer Spielercharakter" (REQ-UX-004). */
.wz-head__facts {
    font-size: .82rem;
    color: var(--sh-text-dim);
}

.wz-head__facts span:not(:last-child)::after {
    content: "·";
    margin: 0 var(--sh-space-xs);
    color: var(--sh-text-faint);
}

.wz-progress {
    display: flex;
    align-items: center;
    gap: var(--sh-space-md);
    font-size: .78rem;
    color: var(--sh-text-dim);
}

.wz-progress__bar {
    flex: 1;
    height: 4px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-surface-2);
    overflow: hidden;
}

.wz-progress__fill {
    height: 100%;
    border-radius: var(--sh-radius-pill);
    background: linear-gradient(90deg, var(--sh-accent-dim), var(--sh-accent));
    transition: width var(--sh-slow) ease;
}

/* --------------------------------------------------------- Schrittliste */

.wz-steps { position: sticky; top: var(--sh-space-sm); display: grid; gap: var(--sh-space-md); }

/* Umschalter und Abdunklung gehören allein den schmalen Geräten (REQ-CHAR-031,
   REQ-UX-020). Sie hier auszublenden und erst in der Medienabfrage einzuschalten
   ist derselbe Weg, den app.css für .sh-nav-toggle geht: Oberhalb von 900px bleibt
   das Bild unverändert, und es braucht an keiner Stelle ein !important. */
.wz-steps__toggle { display: none; }
.wz-steps__backdrop { display: none; }

.wz-steps__group { display: grid; gap: var(--sh-space-2xs); }

.wz-steps__label {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    padding: 0 var(--sh-space-xs) var(--sh-space-xs);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
    border-bottom: 1px solid var(--sh-border-soft);
    margin-bottom: var(--sh-space-xs);
}

/* Kompakt genug, dass alle 24 Schritte auf den Bildschirm passen
   (REQ-UX-006) — die Zeilenhöhe ist hier die entscheidende Größe. */
.wz-step {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: var(--sh-space-sm);
    width: 100%;
    padding: var(--sh-space-xs) var(--sh-space-sm);
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    border-radius: var(--sh-radius);
    background: transparent;
    color: var(--sh-text-dim);
    font: inherit;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--sh-fast), color var(--sh-fast), border-color var(--sh-fast);
}

.wz-step:hover { background: var(--sh-surface-2); color: var(--sh-text); }

.wz-step:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 1px;
}

/* Der aktuelle Schritt: farbige Kante, eigene Fläche, leichter Schein —
   nicht nur ein dunkler Balken (REQ-UX-005). */
.wz-step.is-current {
    background: var(--sh-accent-soft);
    border-color: var(--sh-accent-line);
    border-left-color: var(--sh-accent);
    color: var(--sh-text);
    box-shadow: var(--sh-shadow-glow);
}

.wz-step__no {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--sh-radius-pill);
    border: 1px solid var(--sh-border-strong);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--sh-text-faint);
}

.wz-step.is-current .wz-step__no {
    border-color: var(--sh-accent);
    background: var(--sh-accent);
    color: var(--sh-text-invert);
}

.wz-step.is-done .wz-step__no { border-color: var(--sh-success); color: var(--sh-success); }

.wz-step__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Zustand steht als Symbol UND trägt einen Titel — Farbe allein wäre
   für niemanden mit Farbsehschwäche lesbar (REQ-UX-015, REQ-UX-058). */
.wz-step__state { display: grid; place-items: center; width: 16px; }
.wz-step__state--done { color: var(--sh-success); }
.wz-step__state--open { color: var(--sh-text-faint); }
.wz-step__state--hint { color: var(--sh-warn); }
.wz-step__state--problem { color: var(--sh-danger); }
.wz-step__state--approval { color: var(--sh-purple); }
/* UX-022: Besuch vor der Erfassung — weder Haken noch „offen“, und blasser als beides. */
.wz-step__state--unknown { color: var(--sh-text-faint); opacity: .6; }

/* ---------------------------------------------------------------- Karten */

/* Eine Karte trägt ihre Bereichsfarbe als schmale Kopfkante. Mehr nicht —
   große Farbflächen ermüden und tragen keine zusätzliche Aussage. */
.wz-card {
    border: 1px solid var(--sh-border);
    border-top: 2px solid var(--wz-tone-line);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    overflow: hidden;
}

.wz-card + .wz-card { margin-top: var(--sh-space-md); }

.wz-card__head {
    display: flex;
    align-items: center;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-sm) var(--sh-space-md);
    background: var(--wz-tone-soft);
    border-bottom: 1px solid var(--sh-border-soft);
}

.wz-card__icon { color: var(--wz-tone); display: grid; place-items: center; }

.wz-card__title {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sh-text);
}

.wz-card__body { padding: var(--sh-space-md); display: grid; gap: var(--sh-space-md); }

/* Was rechts im Kartenkopf steht — eine Kennzahl, ein Abzeichen. Es beschreibt
   die Karte und wird nicht in ihr bedient, deshalb steht es im Kopf. */
.wz-card__aside { margin-left: auto; display: flex; align-items: center; gap: var(--sh-space-xs); }

/* ---------------------------------------------------------------- Felder */

/* Etwas mehr Höhe, deutlicher Fokusring, sichtbarer Hover: die alten Felder
   wirkten technisch und ließen nicht erkennen, dass man sie anfassen darf
   (REQ-UX-016, REQ-UX-017). */
.wz-field { display: grid; gap: var(--sh-space-xs); }

.wz-field__label {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sh-text);
}

.wz-field__required { color: var(--sh-accent); }

.wz-input {
    width: 100%;
    padding: var(--sh-space-sm) var(--sh-space-md);
    /* Feldrand mit 3 : 1 gegen die Fläche (UI-009, siehe --sh-border-field). */
    border: 1px solid var(--sh-border-field);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    color: var(--sh-text);
    font: inherit;
    transition: border-color var(--sh-fast), box-shadow var(--sh-fast), background var(--sh-fast);
}

.wz-input::placeholder { color: var(--sh-text-faint); }
.wz-input:hover:not(:disabled) { border-color: var(--sh-text-faint); background: var(--sh-surface-2); }

.wz-input:focus {
    outline: none;
    border-color: var(--sh-accent);
    box-shadow: var(--sh-ring) var(--sh-accent-soft);
}

.wz-input:disabled { opacity: .55; cursor: not-allowed; }

/* Rückmeldung am Feld, nicht nur am Seitenkopf (REQ-UX-013). */
.wz-field__note {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .74rem;
}

.wz-field__note--ok { color: var(--sh-success); }
.wz-field__note--warn { color: var(--sh-warn); }
.wz-field__note--error { color: var(--sh-danger); }
.wz-field__note--info { color: var(--sh-text-dim); }

/* Der leere Fehlerschlitz bleibt im Baum und verschwindet nur fuer das Auge.
   Mit display:none faende role="status" nichts, woran es eine Aenderung
   bemerken koennte, und aria-describedby zeigte ins Leere. */
.wz-field__note--leer { display: block; height: 0; overflow: hidden; }

/* Die Beschriftung traegt jetzt ein echtes <label for>. Es erbt Schrift und
   Farbe vom Rahmen — sichtbar aendert sich nichts, hoerbar alles. */
.wz-field__label label { font: inherit; color: inherit; cursor: pointer; }
.wz-input.is-error { border-color: var(--sh-danger); }
.wz-input.is-error:focus { box-shadow: var(--sh-ring) var(--sh-danger-soft); }

.wz-grid { display: grid; gap: var(--sh-space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-grid__full { grid-column: 1 / -1; }

/* Ein Feld, das die freie Breite einer Zeile nimmt — daneben steht meist die
   Schaltflaeche, die es bedient. */
.wz-field--grow { flex: 1 1 16rem; }

/* Ein mehrzeiliges Feld und ein Zahlenfeld — dieselben Masse wie ihre
   Entsprechungen in app.css, damit der Wizard nicht aussieht wie eine zweite
   Anwendung. */
.wz-input--area { min-height: 4.5rem; resize: vertical; }
.wz-input--num { text-align: right; }

/* Eine Feldgruppe nimmt den Fokus an (tabindex="-1"), damit die Schlusspruefung
   auf sie springen kann. Ohne sichtbaren Ring waere das ein Sprung, den niemand
   bemerkt. */
.wz-field[tabindex]:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 2px; }

/* ------------------------------------------------------------ Auswahlkarten */

/* Auswahl als anklickbare Karte statt Kästchenwüste. Der Zustand steht an
   Farbe, Symbol UND Text (REQ-UX-015). */
.wz-choices { display: flex; flex-wrap: wrap; gap: var(--sh-space-sm); }

.wz-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border-strong);
    border-radius: var(--sh-radius-pill);
    background: var(--sh-bg-2);
    color: var(--sh-text-dim);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: all var(--sh-fast);
}

.wz-choice:hover { border-color: var(--wz-tone-line); color: var(--sh-text); }

.wz-choice:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }

/* Der Vergleich ist bewusst schreibungsunabhängig (das i am Ende).
   Blazor rendert einen booleschen Wert als „True" mit großem T; CSS vergleicht
   Attributwerte sonst genau. Genau daran ist die Auswahl vorher unsichtbar
   geblieben — der Zustand wurde gesetzt und gespeichert, nur sah man es nicht.
   Die Komponenten geben inzwischen kleingeschriebene Zeichenketten aus; das i
   verhindert, dass derselbe Fehler noch einmal unbemerkt durchrutscht. */
.wz-choice[aria-pressed="true" i] {
    border-color: var(--wz-tone);
    background: var(--wz-tone-soft);
    color: var(--sh-text);
    font-weight: 600;
}

.wz-choice__mark { color: var(--wz-tone); display: none; }
.wz-choice[aria-pressed="true" i] .wz-choice__mark { display: inline-grid; }

/* ------------------------------------------------------------- Hinweistext */

/* Erklärung am Symbol statt Fließtext unter jedem Feld (REQ-UX-012). */
.wz-hint {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: var(--sh-radius-pill);
    border: 1px solid var(--sh-border-strong);
    background: transparent;
    color: var(--sh-text-faint);
    font-size: .62rem;
    cursor: help;
    padding: 0;
}

.wz-hint:hover, .wz-hint:focus-visible { border-color: var(--sh-accent); color: var(--sh-accent); }

/* -------------------------------------------------------------- Kurzbogen */

/* Haftet, aber nur bis zur Fensterhöhe — sonst wächst der Kurzbogen bei vielen
   Fertigkeiten über den Bildschirm hinaus und man kommt nicht mehr an sein Ende
   (REQ-UX-033). */
.wz-side {
    position: sticky;
    top: var(--sh-space-sm);
    max-height: calc(100vh - var(--sh-space-xl));
    overflow-y: auto;
    display: grid;
    gap: var(--sh-space-md);
    align-content: start;
}

.wz-sheet {
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    overflow: hidden;
}

/* Solange kein Portrait hinterlegt ist, bleibt der Platzhalter flach.
   Mit aspect-ratio 3/4 wären das bei 330 Pixeln Spaltenbreite über 440 Pixel
   leere Fläche gewesen — genau die tote Fläche, die den Wizard leer wirken
   ließ (REQ-UX-031, REQ-UX-032). */
.wz-sheet__portrait {
    min-height: 84px;
    background: var(--sh-bg-2);
    display: grid;
    place-items: center;
    padding: var(--sh-space-md);
    text-align: center;
    color: var(--sh-text-faint);
    border-bottom: 1px solid var(--sh-border-soft);
}

/* Erst wenn wirklich ein Bild da ist, darf die Karte wachsen. */
.wz-sheet__portrait.has-image { padding: 0; min-height: 0; aspect-ratio: 3 / 4; }
.wz-sheet__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wz-sheet__body { padding: var(--sh-space-md); display: grid; gap: var(--sh-space-sm); }
.wz-sheet__name { font-size: 1.02rem; font-weight: 600; }

.wz-sheet__line {
    display: flex;
    justify-content: space-between;
    gap: var(--sh-space-sm);
    font-size: .8rem;
    padding: var(--sh-space-xs) 0;
    border-bottom: 1px solid var(--sh-border-soft);
}

.wz-sheet__line:last-child { border-bottom: 0; }
.wz-sheet__key { color: var(--sh-text-faint); }
.wz-sheet__value { color: var(--sh-text); text-align: right; }

/* Überzogenes Punktbudget im Kurzbogen (CHAR-007). Nicht Farbe allein — der Text sagt
   „zu viel“ (REQ-UX-015). */
.wz-sheet__value--over { color: var(--sh-danger); font-weight: 600; }

/* Machtwerte tragen Gold — sie sind Regelwerte, keine Beschreibung. */
.wz-sheet__tier { color: var(--sh-gold); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Die neun Attribute als kompaktes Raster im Kurzbogen (REQ-UX-010 des
   Attributauftrags). Drei mal drei, damit der Bau als Ganzes erkennbar ist —
   eine Liste untereinander würde die halbe Spalte fressen. */
.wz-sheet__attrs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-xs);
    margin-top: var(--sh-space-xs);
}

.wz-sheet__attr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-xs);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    font-size: .74rem;
}

.wz-sheet__attr-key { color: var(--sh-text-faint); letter-spacing: .04em; }

.wz-sheet__attr-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--sh-text);
}

/* Dieselbe Staffelung wie auf den Attributkarten, damit hohe Werte auch in der
   Übersicht sofort auffallen — dezent, die Zahl bleibt lesbar. */
.wz-sheet__attr--none  .wz-sheet__attr-value { color: var(--sh-text-faint); }
.wz-sheet__attr--low   .wz-sheet__attr-value { color: var(--sh-text-dim); }
.wz-sheet__attr--mid   .wz-sheet__attr-value { color: var(--sh-accent); }
.wz-sheet__attr--high  .wz-sheet__attr-value { color: var(--sh-gold); }

/* ------------------------------------------------------------- Aktionsleiste */

/* Haftet am unteren Rand, damit Weiter und Zurück nicht irgendwo im leeren
   Raum stehen (REQ-UX-009). */
.wz-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sh-space-md);
    margin-top: var(--sh-space-lg);
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface-2);
    box-shadow: var(--sh-shadow);
}

.wz-actions__spacer { flex: 1; }

/* ------------------------------------------------------------ Speicherstand */

.wz-save {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .76rem;
    color: var(--sh-text-faint);
}

.wz-save--saved { color: var(--sh-success); }
.wz-save--dirty { color: var(--sh-text-dim); }
.wz-save--busy { color: var(--sh-accent); }
.wz-save--failed { color: var(--sh-danger); font-weight: 600; }

/* -------------------------------------------------------------- Leerzustand */

.wz-empty {
    display: grid;
    justify-items: center;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-xl) var(--sh-space-md);
    border: 1px dashed var(--sh-border-strong);
    border-radius: var(--sh-radius-lg);
    color: var(--sh-text-dim);
    text-align: center;
}

/* ------------------------------------------------------------- Schmalere Geräte */

/* Tablet: der Kurzbogen wandert unter den Inhalt, statt drei Spalten zu
   quetschen (REQ-UX-020). */
@media (max-width: 1400px) {
    .wz-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .wz-side { position: static; grid-column: 1 / -1; }
    .wz-sheet__portrait { aspect-ratio: 16 / 5; }

    /* Auch mit Bild. Sonst gewinnt `.wz-sheet__portrait.has-image` mit seinen 3/4 durch
       die höhere Spezifität — eine Medienabfrage erhöht die Spezifität nicht. Und der
       Kurzbogen liegt hier über die volle Breite (`.wz-side { grid-column: 1 / -1 }`):
       Ein hochkantes Bild würde über tausend Pixel hoch und schöbe den Inhalt aus dem
       Bild. */
    .wz-sheet__portrait.has-image { aspect-ratio: 16 / 5; }
}

/* Mobil: die Schrittliste liegt hinter einem Umschalter und fährt als Leiste von
   links ein, der Inhalt bekommt die volle Breite (REQ-CHAR-031, REQ-UX-020).

   Vorher stand hier nur `position: static`. Damit standen alle 24 Schaltflächen in
   voller Länge über jedem Formular — auf einem Telefon rund zwei Bildschirmhöhen,
   die man nach jedem Schrittwechsel erneut überrollen musste.

   z-index 930/920 liegt bewusst UNTER den 950/940 der Hauptnavigation in app.css:
   Wer beide offen hat, soll die Hauptnavigation obenauf finden.

   `align-content: start`, weil .wz-steps ein Grid ist: Als fensterhohe Schublade
   würden die fünf Abschnitte sonst über die ganze Höhe auseinandergezogen.

   `visibility: hidden` gehört zum eingefahrenen Zustand. Ein bloßes
   `translateX(-100%)` schiebt die Leiste nur aus dem Bild — ihre 24 Schaltflächen
   blieben mit der Tabulatortaste erreichbar, und der Fokus verschwände neben dem
   Fenster. Die Angabe steht mit in der Übergangsliste, weil `visibility` beim
   Ausblenden bis zum Ende sichtbar bleibt: Ohne sie verschwände die Leiste im
   ersten Moment, statt hinauszufahren. */
@media (max-width: 900px) {
    .wz-shell { grid-template-columns: minmax(0, 1fr); }

    .wz-steps__toggle {
        display: flex;
        align-items: center;
        gap: var(--sh-space-xs);
        width: 100%;
        padding: var(--sh-space-sm) var(--sh-space-md);
        border: 1px solid var(--sh-border);
        border-radius: var(--sh-radius-lg);
        background: var(--sh-surface-2);
        color: var(--sh-text);
        /* font und text-align ausdruecklich: Ein button erbt sonst die Schrift des
           Browsers und zentriert seinen Text. .wz-step tut es aus demselben Grund. */
        font: inherit;
        font-size: .82rem;
        text-align: left;
        cursor: pointer;
    }

    .wz-steps__toggle:focus-visible {
        outline: 2px solid var(--sh-accent);
        outline-offset: 1px;
    }

    .wz-steps {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 262px;
        z-index: 930;
        align-content: start;
        overflow-y: auto;
        padding: var(--sh-space-md) var(--sh-space-sm);
        background: var(--sh-bg-2);
        border-right: 1px solid var(--sh-border);
        box-shadow: var(--sh-shadow-lg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .18s ease-out, visibility .18s;
    }

    .wz-steps.is-open { transform: none; visibility: visible; }

    .wz-steps__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 920;
        border: 0;
        background: var(--sh-overlay);
    }
    .wz-grid, .wz-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .wz-actions { flex-wrap: wrap; }
}

/* Wer Bewegung reduziert haben möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .wz-step, .wz-steps, .wz-input, .wz-choice, .wz-progress__fill { transition: none; }
}

/* Auf Papier gibt es nichts umzuschalten — und das ist keine Kosmetik, sondern die
   Absicherung gegen eine stille Verschlechterung (REQ-UX-020).

   Eine A4-Seite misst rund 794 CSS-Pixel, eine Letter-Seite 816. Die Abfrage oben
   greift im Druck also MIT. Ohne diesen Block traegt der Ausdruck den Umschalter,
   und die Schrittliste steht um ihre eigene Breite nach links geschoben und mit
   `visibility: hidden` — sie faellt vom Blatt. Vor der Schublade stand `.wz-steps`
   auch im Druck static und druckte sich als vollstaendige Liste; genau dieser Stand
   wird hier gehalten.

   Kein !important noetig: Der Block steht nach der 900px-Abfrage, und bei gleicher
   Spezifitaet entscheidet die Reihenfolge. app.css blendet im Druck aus demselben
   Grund .sh-nav, .sh-topbar und .sh-nav__backdrop aus. */
@media print {
    .wz-steps__toggle, .wz-steps__backdrop { display: none; }

    .wz-steps {
        position: static;
        width: auto;
        overflow: visible;
        padding: 0;
        background: transparent;
        border-right: 0;
        box-shadow: none;
        transform: none;
        visibility: visible;
    }
}

/* ==========================================================================
   Geschlechtsbaustein (REQ-GEN-011, REQ-GEN-025)

   Vier Abschnitte untereinander: Identität, Pronomen, Transidentität,
   körperliche Ausprägung. Sie nebeneinander in eine Zeile zu quetschen wäre
   sparsam und unlesbar — die Auswahlflächen brauchen Breite, nicht Enge.
   ========================================================================== */

/* Der Baustein steht auch außerhalb eines Wizard-Schritts, etwa im
   Charakterdetail. Dort setzt kein .wz--… den Bereichston, und .wz-choice
   stünde ohne Farbe da. Deshalb ein Grundton auf der Wurzel — mit :where()
   ohne Gewicht, damit jeder Schritt ihn weiterhin mühelos übersteuert. */
:where(:root) {
    --wz-tone: var(--sh-accent);
    --wz-tone-soft: var(--sh-accent-soft);
    --wz-tone-line: var(--sh-accent-line);
}

.wz-gender {
    display: grid;
    gap: var(--sh-space-lg);
    min-width: 0;
}

.wz-gender__intro {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--sh-text-dim);
}

/* Auf schmalen Geräten brechen die Auswahlflächen um. Eine waagerechte
   Bildlaufleiste gibt es hier nicht: was man wegschieben muss, wählt man nicht
   (REQ-UX-020). */
.wz-gender .wz-choices { min-width: 0; }
.wz-gender .wz-choice { max-width: 100%; text-align: left; }

/* Das Freitextfeld erscheint nur unter „Andere" und gehört sichtbar zu der
   Fläche darüber — deshalb eingerückt und schmaler als die volle Zeile. */
.wz-gender__custom {
    margin-top: var(--sh-space-xs);
    padding-left: var(--sh-space-sm);
    border-left: 2px solid var(--wz-tone-line);
    max-width: min(24rem, 100%);
}

/* Beide Sonderfälle teilen sich die Darstellung; die eigenen Namen halten sie
   im Baum unterscheidbar. */
.wz-gender__custom--pronouns .wz-input,
.wz-gender__custom--body .wz-input { width: 100%; }

/* Das Angebot: der Vorschlag zur aktuellen Identität, solange eine eigene Wahl
   steht. Er wird angeboten, nicht angewandt (REQ-GEN-010). */
.wz-gender__offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm);
    margin-top: var(--sh-space-xs);
}

.wz-gender__offer-text {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: .76rem;
    color: var(--sh-text-dim);
}

@media (max-width: 560px) {
    /* Ganz schmal dürfen die Flächen die Zeile teilen, statt sie einzeln zu
       füllen — sonst wird aus sieben Möglichkeiten eine sieben Zeilen lange
       Liste. */
    .wz-gender .wz-choice { flex: 1 1 auto; justify-content: center; text-align: center; }
    .wz-gender__offer .sh-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Schritt 12 — Attribute als Bogen

   Neun Karten statt neun Tabellenzeilen. Der Wert ist das größte Element der
   Karte; alles andere ordnet sich ihm unter. Die Erklärung liegt am
   Hinweiszeichen (REQ-UX-012), nicht als Dauertext neben jeder Zeile.
   ========================================================================== */

/* Nur für Vorlesewerkzeuge: sichtbar entfernt, im Zugänglichkeitsbaum
   vorhanden. Nicht display:none — das nähme den Text auch dort heraus.

   Das margin: -1px ist kein Gestaltungsabstand und bekommt deshalb mit Absicht
   kein Abstandstoken (REQ-UX-018): Es gehört zum Muster und zieht den
   verbliebenen Ein-Pixel-Rest aus dem Fluss, damit er die Zeile nicht
   verschiebt. Eine Abstandsstufe an dieser Stelle macht den Text wieder
   sichtbar. Der Wächter kennt diesen Block als einzige Ausnahme. */
.wz-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- Punktbudget */

.wz-budget__count {
    display: flex;
    align-items: baseline;
    gap: var(--sh-space-xs);
    margin: 0;
}

/* Gold, weil das Budget ein Machtwert ist (REQ-UX-001). */
.wz-budget__used {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sh-gold);
}

/* Bei S+ steht hier ein Wort statt einer Zahl — es darf nicht wie eine Ziffer wirken. */
.wz-budget__used--open { font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }

.wz-budget__of {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--sh-text-dim);
}

.wz-budget__word { font-size: .82rem; color: var(--sh-text-faint); }

.wz-budget__bar {
    height: 6px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-surface-2);
    border: 1px solid var(--sh-border-soft);
    overflow: hidden;
}

.wz-budget__fill {
    height: 100%;
    border-radius: var(--sh-radius-pill);
    background: linear-gradient(90deg, var(--sh-gold-dim), var(--sh-gold));
    transition: width var(--sh-slow) ease;
}

.wz-budget__note {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    margin: 0;
    font-size: .8rem;
    color: var(--sh-text-dim);
}

.wz-budget__note--ok { color: var(--sh-success); }
.wz-budget__note--over { color: var(--sh-danger); font-weight: 600; }

/* Über dem Budget färbt sich der Balken mit — die Zahl darüber sagt es
   zusätzlich im Klartext. */
.wz-budget.is-over { border-top-color: var(--sh-danger); }
.wz-budget.is-over .wz-budget__used { color: var(--sh-danger); }
.wz-budget.is-over .wz-budget__fill { background: var(--sh-danger); }

/* ------------------------------------------------------------- Kartenraster */

/* Drei Spalten auf dem Schreibtisch, zwei auf dem Tablet, eine auf dem
   Telefon. minmax(0, 1fr) verhindert, dass ein langes Wort die Spalte
   aufzieht und eine waagerechte Bildlaufleiste erzeugt (REQ-UX-021). */
.wz-attrs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-md);
    margin-top: var(--sh-space-md);
}

/* Die Zelle trägt die Karte und — nur bei MAG — den Schalter darunter. */
.wz-attr-cell { display: grid; gap: var(--sh-space-sm); align-content: start; }

.wz-attr {
    display: grid;
    justify-items: center;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-top: 2px solid var(--wz-tone-line);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    text-align: center;
    transition: border-color var(--sh-fast), box-shadow var(--sh-fast);
}

.wz-attr:hover { border-color: var(--sh-border-strong); }

.wz-attr:focus-visible {
    outline: 2px solid var(--wz-tone);
    outline-offset: 2px;
    box-shadow: var(--sh-shadow);
}

.wz-attr__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sh-space-xs);
}

.wz-attr__abbr {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sh-text);
}

.wz-attr__name { font-size: .76rem; color: var(--sh-text-faint); }

/* Der Mittelpunkt der Karte. */
.wz-attr__value {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: var(--sh-space-xs) 0;
}

/* Staffelung: gedämpft, neutral, türkis, gold. Bewusst ohne Leuchten — die
   Zahl muss auf dunklem Grund ruhig lesbar bleiben (REQ-UX-002). */
.wz-attr__value--none { color: var(--sh-text-faint); }
.wz-attr__value--base { color: var(--sh-text); }
.wz-attr__value--high { color: var(--sh-accent); }
.wz-attr__value--peak { color: var(--sh-gold); }

.wz-attr__scale {
    font-size: .78rem;
    color: var(--sh-text-dim);
    min-height: 1.2em;
}

.wz-attr__steps {
    display: flex;
    gap: var(--sh-space-sm);
    width: 100%;
    margin-top: var(--sh-space-xs);
}

/* Breit und hoch genug für den Daumen — die alten Kleinstknöpfe waren auf
   dem Tablet kaum zu treffen (REQ-UX-016). */
.wz-attr__btn {
    flex: 1;
    display: inline-grid;
    place-items: center;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border-strong);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    color: var(--sh-text);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--sh-fast), border-color var(--sh-fast), color var(--sh-fast);
}

.wz-attr__btn:hover:not(:disabled) {
    border-color: var(--wz-tone);
    background: var(--wz-tone-soft);
    color: var(--wz-tone);
}

.wz-attr__btn:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }

/* Gesperrt heißt: die Grenze des Regelwerks ist erreicht. Der Zeiger sagt es
   mit, nicht nur die Deckkraft. */
.wz-attr__btn:disabled { opacity: .35; cursor: not-allowed; }

/* ------------------------------------------------- Schalter nicht magiefähig */

.wz-flag {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-bg-2);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--sh-fast), background var(--sh-fast);
}

.wz-flag:hover { border-color: var(--wz-tone-line); }
/* Den Fokus trägt das Kästchen darin; die Fläche zeigt ihn mit (UI-009). */
.wz-flag:has(:focus-visible) { outline: 2px solid var(--wz-tone); outline-offset: 1px; }

.wz-flag.is-active {
    border-color: var(--wz-tone);
    background: var(--wz-tone-soft);
}

.wz-flag__box { margin-top: var(--sh-space-2xs); accent-color: var(--wz-tone); cursor: pointer; }

.wz-flag__text { display: grid; gap: var(--sh-space-2xs); }

.wz-flag__title {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .8rem;
    color: var(--sh-text-dim);
}

.wz-flag.is-active .wz-flag__title { color: var(--wz-tone); font-weight: 600; }

.wz-flag__hint { font-size: .74rem; color: var(--sh-text-faint); }

/* --------------------------------------------------------- Schmalere Geräte */

@media (max-width: 1200px) {
    .wz-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .wz-attrs { grid-template-columns: minmax(0, 1fr); }
    .wz-attr__value { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wz-attr, .wz-attr__btn, .wz-flag, .wz-budget__fill { transition: none; }
}

/* ==========================================================================
   Schritt 13 — Fertigkeiten

   Die alte Ansicht setzte je Fertigkeit sechs Zahlenknöpfe nebeneinander. Bei 54
   Fertigkeiten waren das über 300 Klickflächen, und die meisten gehörten zu
   Einträgen mit Wert 0 — also zu Fertigkeiten, die der Charakter gar nicht hat.
   Deshalb trennt diese Ansicht den Bestand des Charakters vom Katalog, und der
   Wert wird über einen Schrittregler gestellt statt über eine Knopfreihe.

   Eigener Namensraum .wz-sk-*: der Schritt bringt Bausteine mit, die es sonst
   nirgends gibt (Schrittregler, Rückfrage in der Zeile, Katalogzeile). Ein
   Kurzname wie .wz-row wäre in einer gemeinsamen Datei über kurz oder lang
   doppelt vergeben.

   Abstände ausschließlich aus --sh-space-*, Farben ausschließlich aus den
   vorhandenen Tokens (REQ-UX-018). Zustand steht an Farbe, Symbol und Text
   zugleich (REQ-UX-015).
   ========================================================================== */

/* Rechte Seite eines Kartenkopfes — dort steht die Kennzahl, nicht der Titel. */
.wz-sk-headend {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-xs);
}

/* ------------------------------------------------------------------ Budget */

.wz-sk-budget { display: grid; gap: var(--sh-space-sm); }

.wz-sk-budget__value {
    margin: 0;
    font-size: .84rem;
    color: var(--sh-text-dim);
}

.wz-sk-budget__value strong {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wz-tone);
    font-variant-numeric: tabular-nums;
    margin-right: var(--sh-space-xs);
}

.wz-sk-budget__bar {
    height: 6px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-surface-2);
    border: 1px solid var(--sh-border-soft);
    overflow: hidden;
}

.wz-sk-budget__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sh-gold-dim), var(--sh-gold));
    transition: width var(--sh-slow) ease;
}

.wz-sk-budget__rest {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    margin: 0;
    font-size: .8rem;
    color: var(--sh-success);
}

/* Über dem Budget: Farbe allein sagt es nicht — das Symbol und der Satz daneben
   tragen dieselbe Aussage. Gesperrt wird nichts, der Entwurf darf darüber liegen. */
.wz-sk-budget.is-over .wz-sk-budget__fill { background: var(--sh-danger); }
.wz-sk-budget__rest--over { color: var(--sh-danger); font-weight: 600; }

/* -------------------------------------------------------------- Hinweiszeile */

.wz-sk-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-xs);
    margin: 0;
    font-size: .76rem;
    color: var(--sh-text-faint);
}

.wz-sk-note svg { flex: 0 0 auto; margin-top: var(--sh-space-2xs); }

.wz-sk-emptytext {
    margin: 0;
    max-width: 46rem;
    font-size: .8rem;
    color: var(--sh-text-faint);
}

/* ----------------------------------------------------------------- Gruppen */

.wz-sk-group { display: grid; gap: var(--sh-space-xs); }
.wz-sk-group + .wz-sk-group { margin-top: var(--sh-space-sm); }

/* Der Gruppenkopf ist die Klappe. Er trägt den Zustand dreifach: als Pfeil, als
   Wort und als Farbe der Fläche. */
.wz-sk-group__head {
    display: flex;
    align-items: center;
    gap: var(--sh-space-sm);
    width: 100%;
    padding: var(--sh-space-xs) var(--sh-space-sm);
    border: 1px solid var(--sh-border-soft);
    border-left: 2px solid var(--wz-tone-line);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    color: var(--sh-text);
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--sh-fast), border-color var(--sh-fast);
}

.wz-sk-group__head:hover:not(:disabled) {
    background: var(--sh-surface-3);
    border-left-color: var(--wz-tone);
}

.wz-sk-group__head:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }
.wz-sk-group__head:disabled { cursor: default; opacity: .9; }
.wz-sk-group__head svg { color: var(--wz-tone); flex: 0 0 auto; }

.wz-sk-group__name { font-weight: 600; letter-spacing: .02em; }

.wz-sk-group__count {
    margin-left: auto;
    color: var(--sh-text-faint);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.wz-sk-group__state {
    flex: 0 0 auto;
    min-width: 6rem;
    text-align: right;
    color: var(--sh-text-faint);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Mehrere Einträge sollen gleichzeitig sichtbar sein — deshalb Spalten, sobald
   die Breite dafür reicht, statt einer einzigen langen Liste. */
.wz-sk-list {
    display: grid;
    gap: var(--sh-space-xs);
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

/* ------------------------------------------------- Zeile einer Fertigkeit */

.wz-sk-row {
    display: grid;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-sm);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    transition: border-color var(--sh-fast);
}

.wz-sk-row:hover { border-color: var(--sh-border-strong); }

/* Solange eine Rückfrage offen ist, hebt sich die Zeile heraus: sonst sucht man
   die Frage, die man selbst ausgelöst hat. */
.wz-sk-row.is-pending {
    border-color: var(--sh-warn);
    background: var(--sh-surface-2);
    grid-column: 1 / -1;
}

.wz-sk-row__head {
    display: flex;
    align-items: baseline;
    gap: var(--sh-space-sm);
}

.wz-sk-row__name {
    font-weight: 600;
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wz-sk-row__cat {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.wz-sk-row__controls {
    display: flex;
    align-items: center;
    gap: var(--sh-space-sm);
}

.wz-sk-row__drop { margin-left: auto; gap: var(--sh-space-xs); }
.wz-sk-row__drop:hover:not(:disabled) { color: var(--sh-danger); }
.wz-sk-row__drop:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }

/* ---------------------------------------------------------- Schrittregler */

/* Der Wert steht in der Mitte und ist das Größte an der Zeile — nicht die beiden
   Knöpfe daneben. Zahl und Stufenwort gehören zusammen: die Zahl ist der Regelwert,
   das Wort seine Bedeutung (GameText.SkillScale). */
.wz-sk-stepper {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
}

.wz-sk-step {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--sh-border-strong);
    border-radius: var(--sh-radius-pill);
    background: var(--sh-surface);
    color: var(--sh-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--sh-fast), border-color var(--sh-fast), color var(--sh-fast);
}

.wz-sk-step:hover:not(:disabled) {
    border-color: var(--wz-tone);
    background: var(--wz-tone-soft);
    color: var(--wz-tone);
}

.wz-sk-step:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }
.wz-sk-step:disabled { opacity: .4; cursor: not-allowed; }

.wz-sk-stepper__value {
    display: flex;
    align-items: baseline;
    gap: var(--sh-space-xs);
    min-width: 8.5rem;
    justify-content: center;
}

.wz-sk-stepper__value strong {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--wz-tone);
    font-variant-numeric: tabular-nums;
}

.wz-sk-stepper__word { font-size: .78rem; color: var(--sh-text-dim); }

/* ------------------------------------------------------ Spezialisierungsstand */

/* Nur der Stand. Verwaltet werden Spezialisierungen in Schritt 14 — zwei Orte für
   dieselbe Sache wären eine Einladung, sie auseinanderlaufen zu lassen. */
.wz-sk-row__spec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
    margin: 0;
    font-size: .72rem;
    color: var(--sh-text-faint);
}

.wz-sk-row__spec svg { color: var(--sh-gold); flex: 0 0 auto; }
.wz-sk-row__free { color: var(--sh-accent); }
.wz-sk-row__resting { color: var(--sh-warn); }

/* ------------------------------------------------------------- Rückfrage */

/* Eine Rückfrage in der Zeile, kein Fenster über der Seite: sie steht dort, wo die
   Entscheidung fällt, und nimmt den Blick nicht vom Rest. */
.wz-sk-confirm {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sh-space-sm);
    margin-top: var(--sh-space-xs);
    padding: var(--sh-space-sm);
    border: 1px solid var(--sh-warn);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
}

.wz-sk-confirm.is-blocked {
    border-color: var(--sh-danger);
    background: var(--sh-danger-soft);
}

.wz-sk-confirm__icon { color: var(--sh-warn); flex: 0 0 auto; margin-top: var(--sh-space-2xs); }
.wz-sk-confirm.is-blocked .wz-sk-confirm__icon { color: var(--sh-danger); }

.wz-sk-confirm__text {
    display: grid;
    gap: var(--sh-space-2xs);
    flex: 1 1 14rem;
    min-width: 0;
    font-size: .78rem;
    color: var(--sh-text-dim);
}

.wz-sk-confirm__text strong { color: var(--sh-text); }

.wz-sk-confirm__actions {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    margin-left: auto;
}

/* ---------------------------------------------------------------- Katalog */

.wz-sk-search {
    display: flex;
    align-items: flex-end;
    gap: var(--sh-space-sm);
}

.wz-sk-search__field { flex: 1 1 auto; min-width: 0; }
.wz-sk-search__clear { flex: 0 0 auto; gap: var(--sh-space-xs); }

/* Eine Katalogzeile ist bewusst einzeilig: der Katalog wird überflogen, nicht
   gelesen. Die vollständige Beschreibung steht im Titel der Zeile. */
.wz-sk-cat {
    display: flex;
    align-items: center;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-xs) var(--sh-space-sm);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    transition: border-color var(--sh-fast), background var(--sh-fast);
}

.wz-sk-cat:hover { border-color: var(--wz-tone-line); background: var(--sh-surface-2); }
.wz-sk-cat:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }

.wz-sk-cat__text {
    display: flex;
    align-items: baseline;
    gap: var(--sh-space-sm);
    min-width: 0;
    flex: 1 1 auto;
}

.wz-sk-cat__name { font-size: .84rem; flex: 0 0 auto; }

.wz-sk-cat__desc {
    font-size: .72rem;
    color: var(--sh-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hinzufügen trägt Symbol und Text: „+" allein sagt nicht, auf welcher Stufe der
   Eintrag landet. */
.wz-sk-add {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-xs);
    flex: 0 0 auto;
    padding: var(--sh-space-xs) var(--sh-space-sm);
    border: 1px solid var(--wz-tone-line);
    border-radius: var(--sh-radius-pill);
    background: var(--wz-tone-soft);
    color: var(--wz-tone);
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    transition: background var(--sh-fast), border-color var(--sh-fast);
}

.wz-sk-add:hover:not(:disabled) { border-color: var(--wz-tone); background: var(--sh-surface-2); }
.wz-sk-add:focus-visible { outline: 2px solid var(--wz-tone); outline-offset: 1px; }
.wz-sk-add:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------- Schmalere Geräte */

@media (max-width: 900px) {
    .wz-sk-list { grid-template-columns: minmax(0, 1fr); }
    .wz-sk-group__state { display: none; }
    .wz-sk-confirm__actions { margin-left: 0; }
    .wz-sk-search { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .wz-sk-budget__fill,
    .wz-sk-group__head,
    .wz-sk-row,
    .wz-sk-step,
    .wz-sk-cat,
    .wz-sk-add { transition: none; }
}

/* ================================================ Die Übergangsregeln sind weg

   Hier standen bis zum 07.09.2026 fünf Regeln, die im Wizard nach KONTEXT
   gestalteten statt nach Komponente: `.wz-main .sh-rule` gab dem
   Regelwerksabschnitt das Kartenaussehen, `.wz-main .sh-input` gab dem
   gemeinsamen Eingabefeld die Höhe der neuen. Sie waren die Brücke zu
   REQ-UX-037 und bezeichneten sich selbst als befristet: „Diese Regeln
   verschwinden, sobald ein Schritt eigene .wz-card bekommt."

   Mit UX-023 haben alle 23 Schritte ihre eigene Karte über <WizardKarte> und
   ihre Felder über <WizardFeld>. Damit gibt es im Wizard weder eine <Rule>
   noch ein .sh-input mehr, und die Brücke hätte auf nichts mehr gewirkt.

   Sie ist ERSATZLOS entfernt und nicht ergänzt — genau das war das Kriterium.
   Ein Wächter hält fest, dass keine von beiden zurückkommt: Käme sie wieder,
   sähe ein neu hinzugefügter Schritt mit <Rule> richtig aus, ohne einer zu
   sein, und niemand bemerkte, dass er den Baustein nicht benutzt.

   Die Luft unter dem Inhalt - die haftende Aktionsleiste verdeckt sonst die letzte
   Zeile (REQ-UX-035 des Attributauftrags) - steht seit dem 04.09.2026 oben an der
   einen Deklaration von `.wz-main`. Sie stand hier als zweite, 1380 Zeilen entfernt. */

/* ==========================================================================
   Betriebsart, Rückmeldungen und Schnellanlage
   CHAR-021 · CHAR-022 · CHAR-024

   Drei Bausteine, die zu jedem Schritt gehören können und deshalb nicht bei
   einem einzelnen stehen. Farbe trägt auch hier Bedeutung und keine
   Dekoration (REQ-UX-001): Blau für die Lage des Bogens, Orange für eine
   offene Rückmeldung, Türkis für das Anlegen.
   ========================================================================== */

/* ------------------------------------------------------ Betriebsart im Kopf */

/* Das Abzeichen neben dem Namen. Es sagt in zwei Wörtern, worin man gerade
   arbeitet — der Kasten darunter sagt es ausführlich. */
.wz-mode {
    display: inline-flex;
    align-items: center;
    padding: var(--sh-space-2xs) var(--sh-space-sm);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-xl);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sh-text-dim);
    white-space: nowrap;
}

.wz-mode--create        { border-color: var(--sh-accent-line); color: var(--sh-accent); }
.wz-mode--edit          { border-color: var(--sh-border-strong); color: var(--sh-text-dim); }
.wz-mode--legacymigration { border-color: var(--sh-gold); color: var(--sh-gold); }
.wz-mode--adminedit     { border-color: var(--sh-purple); color: var(--sh-purple); }

.wz-modebar {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-sm) var(--sh-space-md);
    margin-bottom: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-left: 3px solid var(--sh-blue);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface-2);
    font-size: .82rem;
    color: var(--sh-text-dim);
}

/* Ohne Bearbeitungsrecht ist der Kasten kein Hinweis mehr, sondern eine
   Grenze. Er sieht deshalb anders aus. */
.wz-modebar.is-readonly { border-left-color: var(--sh-warn); }

.wz-modebar__icon { flex: none; margin-top: var(--sh-space-2xs); color: var(--sh-blue); }
.wz-modebar.is-readonly .wz-modebar__icon { color: var(--sh-warn); }

.wz-modebar__text { display: grid; gap: var(--sh-space-xs); min-width: 0; }

.wz-modebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
}

/* ------------------------------------------------ Marke am Schritt in der Liste */

/* Ein Briefsymbol am Schritt, an dem eine Rückmeldung offen ist. Symbol und
   Titel, nicht Farbe allein — Farbe trägt für manche Leser nichts
   (REQ-UX-015). */
.wz-step__mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--sh-warn-soft);
    color: var(--sh-warn);
}

/* --------------------------------------------------------- Rückmeldungen */

.wz-feedback {
    display: grid;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-md);
    margin-bottom: var(--sh-space-lg);
    border: 1px solid var(--sh-border);
    border-left: 3px solid var(--sh-warn);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface-2);
}

.wz-feedback__error {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .8rem;
    color: var(--sh-danger);
}

.wz-feedback__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-sm);
}

/* Erledigtes bleibt stehen, tritt aber zurück: Es ist Beleg und keine
   Aufgabe mehr. */
.wz-feedback__item.is-resolved { opacity: .6; }

.wz-feedback__icon { flex: none; margin-top: var(--sh-space-2xs); color: var(--sh-warn); }
.wz-feedback__item.is-resolved .wz-feedback__icon { color: var(--sh-success); }

.wz-feedback__body { display: grid; gap: var(--sh-space-xs); min-width: 0; }

.wz-feedback__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .72rem;
    color: var(--sh-text-faint);
}

.wz-feedback__text {
    font-size: .86rem;
    color: var(--sh-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wz-feedback__compose {
    display: grid;
    gap: var(--sh-space-xs);
    padding-top: var(--sh-space-sm);
    border-top: 1px solid var(--sh-border-soft);
}

.wz-feedback__label { font-size: .76rem; color: var(--sh-text-dim); }

/* ---------------------------------------------------------- Schnellanlage */

.wz-quick {
    display: grid;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-sm) var(--sh-space-md);
    margin-top: var(--sh-space-md);
    border: 1px dashed var(--sh-border-strong);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-bg-2);
}

.wz-quick__head {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
    font-size: .78rem;
    color: var(--sh-accent);
}

.wz-quick__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm);
}

.wz-quick__row .sh-input { flex: 1 1 220px; min-width: 0; }

.wz-quick__note { font-size: .74rem; color: var(--sh-text-faint); }
.wz-quick__note--error { color: var(--sh-danger); }
.wz-quick__denied { font-size: .74rem; color: var(--sh-text-faint); margin: 0; }

/* Das Bild auf einer Wizardkarte — Blutlinie, Haus (CHAR-109, REQ-CHAR-035).
   Feste Hoehe und object-fit, damit eine Reihe Karten nicht je nach Bildformat
   unterschiedlich hoch wird; ohne das springt das Raster bei jedem Laden. */
.wz-karte__bild {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--sh-radius-lg);
    display: block;
}

/* Die Ortsvorschau der Schreibhilfe: was uebernommen WIRD, bevor es uebernommen ist.
   Zweispaltig, wo Platz ist — das Bild links, der Text rechts —, sonst untereinander. */
.wz-vorschau {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: var(--sh-space-md);
    align-items: start;
    padding: var(--sh-space-sm);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-bg-2);
}

.wz-vorschau__bild {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: var(--sh-radius-lg);
    display: block;
}

@media (max-width: 640px) {
    .wz-vorschau { grid-template-columns: minmax(0, 1fr); }
}

/* Eine beschriftete Zeile auf einer Karte. Sie entsteht nur, wenn Inhalt da ist —
   die Entscheidung faellt in WizardMerkmalzeile.razor und nicht hier. */
.wz-merkmal {
    display: grid;
    gap: var(--sh-space-2xs);
}

.wz-merkmal__titel {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sh-text-faint);
}

.wz-merkmal__text { font-size: .82rem; }

/* Die Warnung vor ähnlichen Einträgen. Sie hält den Weg offen und versperrt
   ihn nicht: daneben steht „Trotzdem anlegen" (REQ-CAT-005). */
.wz-quick__warn {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-sm);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
    color: var(--sh-warn);
    font-size: .78rem;
}

.wz-quick__warn > div { display: grid; gap: var(--sh-space-xs); }

.wz-quick__list { margin: 0; padding-left: var(--sh-space-lg); }

/* ------------------------------------------- Befund der Schlusspruefung */

/* Ein Befund der Pruefung fuehrt zu dem Schritt, der ihn behebt (REQ-UX-045).
   Bewusst eine Schaltflaeche im Textfluss und kein Knopf: Sie steht mitten in
   einer Aufzaehlung und darf die Zeile nicht sprengen. */
.wz-finding {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: .18em;
    cursor: pointer;
}

.wz-finding:hover,
.wz-finding:focus-visible { text-decoration-style: solid; }

/* Ein freigabepflichtiger Befund samt Antragsweg (GRUND-006).
   Er steht innerhalb der orangen Warnung und braucht deshalb keinen eigenen Rahmen —
   nur Luft, damit mehrere Befunde nicht ineinanderlaufen. */
.wz-freigabe {
    margin-top: var(--sh-space-md);
    padding-top: var(--sh-space-md);
    border-top: 1px solid var(--sh-border-soft);
}

.wz-freigabe:first-of-type { border-top: 0; padding-top: 0; }

.wz-freigabe__satz { margin: 0 0 var(--sh-space-xs); }

.wz-freigabe__antrag {
    margin-top: var(--sh-space-sm);
    display: grid;
    gap: var(--sh-space-sm);
}

/* Die Befunde der Schlusspruefung an dem Schritt, der sie behebt (GRUND-006).
   Ein schmaler Stapel ueber dem Schrittinhalt: Er soll auffallen, aber den
   Schritt nicht verdraengen. */
.wz-schrittbefunde { display: flex; flex-direction: column; gap: var(--sh-space-sm); }
.wz-schrittbefunde .sh-alert { margin: 0; }

/* ------------------------------------------------------------ Schrittkopf */

/* Der gemeinsame Kopf eines Wizard-Schritts (REQ-UX-011): Symbol, Titel und der
   eine erklärende Satz. Die feine Linie darunter ist dieselbe, die .wz-head unter
   dem Seitenkopf zieht — ohne sie laufen Überschrift und erste Karte ineinander.
   Alle Abstände aus den Stufen des Designsystems, keine Einzelwerte. */
.wz-stephead {
    display: grid;
    gap: var(--sh-space-xs);
    margin-bottom: var(--sh-space-lg);
    padding-bottom: var(--sh-space-sm);
    border-bottom: 1px solid var(--sh-border-soft);
}

/* Der Kopf steht ausserhalb der .wz-Fläche, die den Bereichston setzt. Einen Grundton
   trägt zwar auch :where(:root) weiter unten in dieser Datei — aber der steht dort
   ausdrücklich nur wegen der Bausteine ausserhalb des Wizards und mit :where() ohne
   Gewicht. Der Ersatzwert hält das Symbol farbig, falls diese Zeile einmal wandert. */
.wz-stephead__icon { flex: none; color: var(--wz-tone, var(--sh-accent)); }

/* Die Überschrift sitzt in einer Flex-Zeile neben dem Symbol — der Vorgabeabstand
   von h2 würde sie dort gegen das Symbol verschieben. */
.wz-stephead__title { margin: 0; font-size: 1.12rem; }