/* ============================================================================
 * AN DER WERKBANK — Hobbyziele und Challenges (13.08.2026)
 * ----------------------------------------------------------------------------
 * Tim: "Sehen wir Challenges im Dashboard? Unten vor den Statistiken?"
 *
 * Zeilen, keine Kacheln — dieselbe Entscheidung wie beim Block "Meine Spiele"
 * am selben Tag. Ein Ziel ist ein Satz mit einem Balken darunter, und drei
 * offene Ziele sollen nicht den halben Bildschirm nehmen.
 *
 * Der Balken ist hier ECHTER Fortschritt (anders als beim Saisonband, wo Zeit
 * verrinnt) — deshalb darf er den Akzent tragen und sich fuellen.
 *
 * Seit 14.08.2026 eigene Datei statt Anhang von dashboard-page.css: Die
 * Werkbank laeuft in derselben Fassung auch im Untergrund (Old Krenks Raum),
 * und der laedt dashboard-page.css nicht — die Ziele standen dort in
 * Browser-Schwarz auf braunem Grund. Geladen von dashboard.html UND
 * untergrund.html; den Abschnittsrahmen bringt components/dash-section.css.
 * ========================================================================== */

.wb-ziel {
  padding: var(--tc-space-3, 12px);
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--tc-radius-md, 8px);
  background: var(--tc-bg-surface-1, rgba(255, 255, 255, 0.03));
  margin-bottom: var(--tc-space-2, 8px);
}
/* Das eigene Ziel bekommt die Kante — man soll es finden, ohne zu suchen. */
.wb-ziel.ist-meins { border-left: 3px solid var(--tc-highlight, #d4c4a0); }
/* Entschiedenes tritt zurueck. Kein Spott ueber Fehlschlaege: Es steht da,
   es wird nicht kommentiert, und nach 30 Tagen ist es weg. */
.wb-ziel.ist-beendet { opacity: 0.6; }

.wb-ziel__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2, 8px);
  flex-wrap: wrap;
}
.wb-ziel__wer {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-weight: 600;
  color: var(--tc-highlight, #d4c4a0);
}
.wb-ziel__titel { flex: 1 1 10rem; min-width: 0; color: var(--tc-text-strong, #eee); }
.wb-ziel__rest { font-size: var(--tc-text-xs, 0.8rem); color: var(--tc-text-muted, #9e9e9e); }
.wb-ziel__ergebnis { font-size: var(--tc-text-xs, 0.8rem); font-weight: 600; }
.wb-ziel__ergebnis--ja   { color: var(--tc-success, #4ade80); }
.wb-ziel__ergebnis--nein { color: var(--tc-text-muted, #9e9e9e); }

.wb-ziel__fortschritt {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  margin-top: 6px;
}
.wb-ziel__balken {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
/* GOLD STATT ROT (16.08.2026). Tim: „Der ganze Part ist auch sehr rot — das
   ist der Rest vom Dashboard nicht."

   Hier stand `var(--tc-accent)`, im Mordheim-Theme das dunkle #8b0000. Das war
   regelkonform (§9: Komponenten ziehen den Akzent aus dem Theme) und trotzdem
   falsch am Platz: Der Balken zeigt einen WERT, und Werte tragen auf dieser
   Plattform `--tc-highlight` — dieselbe Farbe wie die Zahlen in „Bilanz &
   Wertung" und im Fortschrittsblock direkt darueber. Drei rote Flaechen in
   einem Abschnitt (Balken, „Fortschritt eintragen", „Ziel setzen") lasen sich
   als Warnung, nicht als Fortschritt. */
.wb-ziel__balken > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tc-highlight, #d4c4a0);
}
.wb-ziel__zahl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-sm, 0.9rem);
  color: var(--tc-text-default, #ddd);
}

/* Die geforderte Stufe neben dem Stand. Sie ist der Massstab des Balkens —
   ohne sie behauptet „6 / 6" unter dem Titel „…bemalen" etwas, das das Ziel
   gar nicht verlangt (siehe die Notiz in js/ui/werkbank.js). Zurueckhaltend
   gesetzt: Sie erklaert die Zahl, sie konkurriert nicht mit ihr. */
.wb-ziel__stufe {
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-xs, 0.8rem);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--tc-radius-full, 999px);
  background: var(--tc-bg-surface-3, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--tc-text-muted, #9e9e9e);
  white-space: nowrap;
}

.wb-ziel__haengt {
  margin-top: 6px;
  font-size: var(--tc-text-xs, 0.8rem);
  color: var(--tc-text-muted, #9e9e9e);
}

.wb-ziel__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2, 8px);
  margin-top: var(--tc-space-2, 8px);
}
.wb-knopf {
  min-height: var(--tc-touch-min, 36px);
  padding: 0 12px;
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--tc-radius-md, 8px);
  background: transparent;
  color: var(--tc-text-default, #ddd);
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-xs, 0.8rem);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.wb-knopf:hover, .wb-knopf:focus-visible {
  color: var(--tc-highlight, #d4c4a0);
  border-color: var(--tc-border-strong, rgba(255, 255, 255, 0.2));
}
.wb-knopf.ist-an { color: var(--tc-highlight, #d4c4a0); border-color: var(--tc-highlight, #d4c4a0); }
.wb-knopf--ja { border-color: var(--tc-success, #4ade80); color: var(--tc-success, #4ade80); }

/* „Fortschritt eintragen" am eigenen Ziel — der einzige Knopf in dieser
   Reihe, der etwas LIEFERT statt zu kommentieren. Er trägt deshalb den
   Akzent. Als <a> gebaut (echter Link, mittelklickbar), muss die
   Knopf-Optik der Nachbarn aber mitbringen: display und die Zentrierung
   erbt ein Anker nicht von .wb-knopf. */
.wb-knopf--tun {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* Ebenfalls von Akzent auf Highlight umgestellt (16.08.2026) — er steht
     direkt unter dem Balken, und zwei verschiedene Warntoene nebeneinander
     waren einer zu viel. */
  border-color: rgba(var(--tc-highlight-rgb), 0.45);
  color: var(--tc-highlight, #d4c4a0);
  background: rgba(var(--tc-highlight-rgb), 0.10);
}
.wb-knopf--tun:hover, .wb-knopf--tun:focus-visible {
  background: rgba(var(--tc-highlight-rgb), 0.18);
  border-color: var(--tc-highlight, #d4c4a0);
}

.wb-leer, .wb-beendet-kopf {
  font-size: var(--tc-text-xs, 0.8rem);
  color: var(--tc-text-muted, #9e9e9e);
}
.wb-beendet-kopf {
  margin: var(--tc-space-4, 16px) 0 var(--tc-space-2, 8px);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide, 0.06em);
}

/* Die beiden Hauptwege, UNTER den Zielen (Tim, 14.08.2026: „sollten Main CTAs
   sein und markant unter den Challenges liegen, aktuell fallen sie kaum ins
   Auge"). Vorher standen sie als `dash-section__more` in der Kopfzeile — das
   ist die Klasse des leisen Nebenlinks, also genau das Gegenteil.

   Am Handy untereinander und über die volle Breite: zwei Knöpfe mit diesen
   Beschriftungen nebeneinander wären auf 375px je unter 170px und säßen am
   Rand. Ab 480px nebeneinander. */
.wb-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2, 8px);
  margin-top: var(--tc-space-4, 16px);
}
.wb-cta__knopf {
  flex: 1 1 100%;
  min-height: 48px;
  justify-content: center;
}
@media (min-width: 480px) {
  .wb-cta__knopf { flex: 1 1 0; }
}

/* Woher der Balken seine Zahl nimmt. Leise, aber vorhanden — ohne diesen
   Satz war nicht auffindbar, wie man Fortschritt einträgt. */
.wb-hinweis {
  margin: var(--tc-space-3, 12px) 0 0;
  font-size: var(--tc-text-xs, 0.8rem);
  line-height: 1.55;
  color: var(--tc-text-muted, #9e9e9e);
}
.wb-hinweis strong { color: var(--tc-text-default, #ddd); font-weight: 600; }
.wb-hinweis__link {
  display: inline-block;
  min-height: var(--tc-touch-min, 36px);
  line-height: var(--tc-touch-min, 36px);
  color: var(--tc-highlight, #d4c4a0);
  text-decoration: none;
}
.wb-hinweis__link:hover, .wb-hinweis__link:focus-visible { text-decoration: underline; }

/* Die Forderung (seit 14.08.2026): noch kein Ziel, sondern eine wartende
   Frage — deshalb gestrichelt statt durchgezogen (Varianten-Modifier statt
   neuer Komponente, Heuristik 3). */
.wb-ziel--forderung { border-style: dashed; }

/* ============================================================================
   AUS DER WERKSTATT — der UGC-Teaser im Dashboard (15.08.2026)
   ----------------------------------------------------------------------------
   Tim: „wir brauchen auch neue UGC Elemente, neue Vorschlaege bei Grubb und
   so weiter irgendwo im Dashboard."

   Liegt bei der Werkbank statt in dashboard-page.css, weil es dieselbe Sache
   ist: was zwischen den Abenden entsteht. Und weil dieses Stilblatt ohnehin
   auf dem Dashboard UND im Untergrund liegt — der Teaser kann damit spaeter
   ohne Umzug auch dort stehen.

   Zwei Spalten uebernehmen .dash-split (dashboard-page.css); hier steht nur,
   was darin anders ist. Die Galerie-Haelfte ist ein Raster aus Miniaturen,
   die Baustellen-Haelfte eine Liste — bewusst verschieden, weil das eine
   BILDER sind und das andere SAETZE.
   ========================================================================== */

.wt-bilder {
  display: grid;
  /* auto-fill statt auto-fit: Bei nur zwei Bildern sollen sie ihre Groesse
     behalten und nicht auf halbe Spaltenbreite aufgeblasen werden — ein
     Miniaturbild auf 300px gezogen sieht nach Fehler aus. */
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--tc-space-2, 8px);
}

.wt-bild {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--tc-radius-sm, 6px);
  background: var(--tc-bg-surface-2, #2d2d2d);
  text-decoration: none;
}

.wt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--tc-motion-normal, 0.2s) ease;
}

.wt-bild:hover img,
.wt-bild:focus-visible img { transform: scale(1.06); }

.wt-bild:focus-visible {
  outline: 2px solid var(--tc-highlight, #d4c4a0);
  outline-offset: 2px;
}

/* Zwei Etiketten, oben das Werk, unten der Name. Beide auf einem eigenen
   Verlauf statt auf einer Flaeche: Ueber einem Foto ist jede feste Farbe
   mal zu hell und mal zu dunkel — der Verlauf traegt beides (Lesbarkeit
   gewinnt, CLAUDE.md §9/8). */
.wt-bild__werk,
.wt-bild__wer {
  position: absolute;
  left: 0;
  right: 0;
  padding: 3px 6px;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-bild__werk {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  font-weight: 600;
}

.wt-bild__wer {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

/* ----------------------------------------------------------------------------
   DER STAPEL — ein Upload ist ein Ereignis (21.08.2026)
   ----------------------------------------------------------------------------
   Tim: „das ein Bild angezeigt wird und gleichzeitig eine Stapelung dahinter,
   ein Plus oder etwas, was mir als Nutzer sagt: Hier sind ganz viele Bilder
   vom gleichen Ereignis."

   Zwei versetzte Kanten hinter der Kachel statt eines zweiten Bildes: Sie
   kosten keine Ladezeit und funktionieren auch dann, wenn das zweite Foto der
   Gruppe noch gar nicht geladen ist. Gebaut aus einem Element mit zwei
   Schatten — ein zweites waere ein Knoten mehr je Kachel.

   ⚠ DER STAPEL BRAUCHT PLATZ AUSSERHALB DER KACHEL, die Kachel selbst aber
   `overflow: hidden` fuer das Bild. Deshalb liegt der Rand als margin am
   Raster und nicht als padding an der Kachel: Sonst schnitte die eigene
   Kachel ihre Papierkanten ab.
   -------------------------------------------------------------------------- */
.wt-bilder { padding-right: 5px; padding-bottom: 5px; }

.wt-bild.is-stapel { overflow: visible; }

/* Das Bild braucht die Rundung jetzt selbst — `overflow: visible` an der
   Kachel gibt ihre Beschneidung auf, und ein quadratisches Foto in einem
   gerundeten Rahmen sieht aus wie ein Ladefehler. */
.wt-bild.is-stapel img {
  border-radius: inherit;
}

.wt-bild__stapel {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    3px 3px 0 -1px var(--tc-bg-surface-2, #2d2d2d),
    3px 3px 0 0 var(--tc-border-subtle, rgba(255, 255, 255, 0.16)),
    6px 6px 0 -1px var(--tc-bg-surface-2, #2d2d2d),
    6px 6px 0 0 var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
}

/* Die Zahl sitzt oben rechts — dort, wo bei den Werkstattkacheln KEIN Etikett
   liegt (das Werk-Etikett laeuft ueber die volle Breite darunter durch). */
.wt-bild__zahl {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* Steht ein Werk-Etikett darueber, weicht die Zahl darunter aus — sonst
   liegen zwei Beschriftungen uebereinander. */
.wt-bild__werk ~ .wt-bild__zahl,
.wt-bild__zahl:has(~ .wt-bild__werk) { top: 22px; }

/* --- Die zweite Reihe: Momente ------------------------------------------
   Sie zeigt weniger, groessere Kacheln: Auf einem Spielfoto muss man Gesichter
   und Aufstellungen erkennen koennen, bei einem Modell reicht die Silhouette.
   Und sie steht unter der Werkstatt, nicht daneben — die Arbeit kommt zuerst. */
.wt-momente { margin-top: var(--tc-space-4, 16px); }

.wt-bilder--momente {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

/* --- Die Baustellen-Haelfte --- */

.wt-wuensche {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
}

.wt-wunsch {
  display: block;
  /* 44px Mindesthoehe: Touch-First (Heuristik 5). Zwei Textzeilen kommen
     ohnehin darueber, aber ein Vorschlag mit sehr kurzem Titel nicht. */
  min-height: 44px;
  padding: 8px 10px;
  border-left: 2px solid var(--tc-accent, #a1917a);
  border-radius: 0 var(--tc-radius-sm, 6px) var(--tc-radius-sm, 6px) 0;
  background: var(--tc-bg-surface-2, #2d2d2d);
  text-decoration: none;
  color: inherit;
}

.wt-wunsch:hover,
.wt-wunsch:focus-visible {
  background: var(--tc-bg-surface-3, #3a3a3a);
  outline: none;
}

.wt-wunsch.is-arbeit { border-left-color: var(--tc-success, #4ade80); }

.wt-wunsch__titel {
  display: block;
  font-size: 0.88rem;
  color: var(--tc-text-strong, #e0e0e0);
}

.wt-wunsch__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--tc-text-muted, #9e9e9e);
}

.wt-fuss,
.wt-leer {
  margin: var(--tc-space-3, 12px) 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tc-text-muted, #9e9e9e);
}

.wt-leer a { color: var(--tc-highlight, #d4c4a0); }

@media (prefers-reduced-motion: reduce) {
  /* Nicht `transition: none` — hier ist es zwar unkritisch (es gibt keinen
     Endzustand, der verloren ginge), aber die Vorlage am Ende von
     css/dashboard.css gilt fuer die ganze Plattform, und eine Ausnahme
     erklaert spaeter niemand mehr. */
  .wt-bild img { transition-duration: 0.01ms; }
}

/* Der Prozentwert neben dem Bruch (16.08.2026). Seit der Stand eine Kommazahl
   sein kann ("2,4 / 6"), ist der Prozentwert die schneller lesbare Fassung
   derselben Aussage — gedaempft, damit er den Bruch nicht verdraengt. */
.wb-ziel__prozent {
  margin-left: 5px;
  font-size: 0.85em;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ DIE BEIDEN HAUPTWEGE ZIEHEN NICHT MEHR DIE SYSTEMFARBE (16.08.2026).
   Tim: "Und die Buttons beim Hobbyprojekt unten gehen auch auf mein
   Systemfallback."

   `tc-button--primary` faerbt sich aus --tc-accent, und das ist die
   SYSTEMFARBE des Spielers — bei coreSystem 'aos' das tiefe Sigmar-Rot
   #9e2b25. "Ziel setzen" stand damit als grosser roter Block in einem
   Abschnitt, dessen uebrige Farbe Gold ist.

   Die Werkbank gehoert keinem Spielsystem: Ein bemalter Trupp ist ein
   bemalter Trupp, egal wer ihn spielt. Deshalb traegt sie hier den
   TownCryer-Glanz (--tc-highlight) statt der Systemidentitaet — dieselbe
   Entscheidung wie beim Fortschrittsbalken und beim Achievement-Titel.

   Bewusst als lokale Regel auf .wb-cta__knopf und NICHT als Aenderung an
   tc-button--primary: Die Komponente ist ueberall sonst richtig, ihre
   Systemfaerbung ist Absicht (CLAUDE.md §9). */
.wb-cta__knopf.tc-button--primary {
  background: rgba(var(--tc-highlight-rgb), 0.14);
  border-color: rgba(var(--tc-highlight-rgb), 0.45);
  color: var(--tc-highlight);
}

.wb-cta__knopf.tc-button--primary:hover,
.wb-cta__knopf.tc-button--primary:focus-visible {
  background: rgba(var(--tc-highlight-rgb), 0.22);
  border-color: var(--tc-highlight);
}

/* Ein erfuelltes Ziel bekommt einen gruenen Balken — auch wenn er nicht voll
   ist. Das ist der Fall "Ziel geschafft, Arbeit geht weiter": Noswads Ritter
   erfuellen ein Grundier-Ziel bei 30 % Reife. Gruen ist die Datenfarbe fuer
   erledigt (CLAUDE.md §9). */
.wb-ziel__balken.ist-erfuellt > span { background: #4ade80; }

/* Der Haken sitzt jetzt AM ZUSTAND, nicht daneben als Erfolgsmeldung:
   "✓ grundiert" statt "grundiert  Ziel erreicht". Gruen ist die Datenfarbe
   fuer erledigt (CLAUDE.md §9) — sie sagt hier "diese Stufe steht", nicht
   "die Arbeit ist fertig". */
.wb-ziel__stufe.ist-erreicht {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.45);
  color: #4ade80;
  font-weight: 600;
}

.wb-ziel__prozent { font-size: var(--tc-text-xs, 0.8rem); color: var(--tc-text-muted); }

/* Der Reifegrad ist jetzt die Hauptzahl der Zeile — er hat den Bruch
   abgeloest (siehe die Notiz in js/ui/werkbank.js). */
.wb-ziel__prozentgross {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-sm, 0.9rem);
  font-weight: 700;
  color: var(--tc-text-strong, #eee);
  font-variant-numeric: tabular-nums;
}

/* Die geforderte Stufe, solange das Ziel offen ist. Zurueckhaltender als der
   Zustand: Sie sagt, wohin es geht, nicht wo es steht. */
.wb-ziel__soll {
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-xs, 0.8rem);
  color: var(--tc-text-muted, #9e9e9e);
  white-space: nowrap;
}

.wb-ziel__stufe--leer { font-style: italic; }


/* ===================================================================
   DER ZIELSATZ IM WERKBANK-FORMULAR (22.08.2026)
   -------------------------------------------------------------------
   „Du nimmst dir vor: 6x Einheit, mindestens bemalt bis zum 30.11."
   Er wiederholt nur, was in den Feldern darueber steht — aber als Aussage
   statt als Formular, und genau daran merkt man, ob man etwas anderes
   gemeint hat. Der zweite Teil sagt, mit welcher Angabe am Foto das spaeter
   gezaehlt wird; das war die Auskunft, die vollstaendig gefehlt hat.

   ⚠️ ER STAND ZUERST IN css/social.css — UND WAERE DORT WIRKUNGSLOS GEBLIEBEN.
   Das Formular laeuft auf dashboard.html und untergrund.html, und KEINE der
   beiden laedt social.css (nachgesehen, nicht vermutet: 0 Treffer). Eine
   Klasse ohne Regel faellt nicht auf, sie sieht nur nach nichts aus —
   dieselbe Falle wie bei `tc-subhead` in CLAUDE.md §7i.
   Diese Datei liegt auf beiden Seiten, also gehoert er hierher. */
.wb-zielsatz {
  margin-top: var(--tc-space-3);
  padding: var(--tc-space-3);
  border-left: 3px solid var(--tc-accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--tc-radius-sm);
  font-size: var(--tc-text-sm);
  line-height: 1.6;
  color: var(--tc-text-default);
}
.wb-zielsatz:empty { display: none; }
.wb-zielsatz__wie {
  display: block;
  margin-top: var(--tc-space-2);
  color: var(--tc-text-muted);
}

/* ===================================================================
   DIE NACHWEISE AM ZIEL (22.08.2026)
   -------------------------------------------------------------------
   Tim: „An meinem Ziel steht jetzt ‚Noch nichts gezeigt', aber ich hatte 5
   oder 6 Bilder hochgeladen. Die sollten dann auch verlinkt sein."

   Die Miniaturen beantworten die Frage, die der Balken offen laesst: WORAUS
   besteht die Zahl? Ohne sie stand dort „2 von 100", und woher die 2 kamen,
   war nirgends zu sehen — genau daran war nicht zu erkennen, dass die Fotos
   je nur ein Stueck auswiesen.

   ⚠️ Die Zahl auf dem Bild ist die STUECKZAHL des Nachweises, nicht seine
   Position. Sie ist die Angabe, die man beim Nachrechnen sucht, und sie ist
   der Grund, aus dem eine 1 auf sechs Bildern sofort auffaellt. */
.wb-ziel__nachweise {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  flex-wrap: wrap;
  margin-top: var(--tc-space-2);
}
.wb-ziel__nachweise-titel {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.wb-nachweis {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--tc-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex: 0 0 auto;
  transition: transform var(--tc-motion-fast) ease, border-color var(--tc-motion-fast) ease;
}
.wb-nachweis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-nachweis:hover,
.wb-nachweis:focus-visible {
  transform: scale(1.08);
  border-color: var(--tc-accent);
}
/* Die Stueckzahl sitzt auf dem Bild, nicht daneben: Sie gehoert zu DIESEM
   Nachweis, und daneben waere sie bei sechs Miniaturen nicht mehr zuzuordnen. */
.wb-nachweis__zahl {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 15px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--tc-text-strong);
  background: rgba(0, 0, 0, 0.72);
  border-top-left-radius: var(--tc-radius-sm);
}
.wb-nachweis--mehr {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  background: rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .wb-nachweis { transition: none; }
  .wb-nachweis:hover,
  .wb-nachweis:focus-visible { transform: none; }
}

/* ===================================================================
   DIE ZWEI WAHLEN IM ZIELFORMULAR (22.08.2026)
   -------------------------------------------------------------------
   Modellbau/Bemalung und Stufen/Prozent — beide als Knopfpaar statt als
   Auswahlliste. Bei genau zwei Moeglichkeiten, die sich gegenseitig
   ausschliessen und die Folgefelder umstellen, ist ein Paar ehrlicher: Man
   sieht beide Optionen gleichzeitig, statt eine aufklappen zu muessen.
   Dasselbe Muster wie die Beitrag/Trashtalk-Wahl in der Galerie. */
.wb-wahl { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; }
.wb-wahl__knopf {
  flex: 1 1 44%;
  /* Heuristik 5: mindestens 36px Trefferflaeche, unter grobem Zeiger mehr. */
  min-height: 36px;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--tc-radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tc-text-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--tc-motion-fast) ease,
              background var(--tc-motion-fast) ease,
              color var(--tc-motion-fast) ease;
}
.wb-wahl__knopf:hover { border-color: var(--tc-accent); color: var(--tc-text-default); }
/* ⚠️ Der aktive Zustand faerbt RAND, FLAECHE UND SCHEIN — nicht die Schrift
   mit --tc-accent. Das Token faerbt nirgends Text (CLAUDE.md §9). */
.wb-wahl__knopf.is-aktiv {
  border-color: var(--tc-accent);
  background: rgba(255, 255, 255, 0.10);
  color: var(--tc-text-strong);
  box-shadow: inset 0 0 0 1px var(--tc-accent);
}
@media (pointer: coarse) { .wb-wahl__knopf { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .wb-wahl__knopf { transition: none; } }

/* ===================================================================
   DIE PROJEKTKARTEN (Etappe 2, 22.08.2026)
   -------------------------------------------------------------------
   Tim: „Projekt anlegen. Projekt kriegt optional eine oder nacheinander
   mehrere Hobbygoals von Krenk. Die gehen im Bereich ‚Arbeitsnachweise' in
   ein Album pro Projekt."

   Die Karte zeigt WIE WEIT (Balken), WORAUS (Album) und WAS DRANHÄNGT
   (Ziele). Der Balken ist der Reglerstand — kein Rechenweg, keine Anteile. */
.wb-prj-kopf {
  font-family: var(--tc-font-display, inherit);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--tc-space-3) 0 var(--tc-space-2);
}
.wb-prj-liste { display: flex; flex-direction: column; gap: var(--tc-space-3); }

.wb-prj {
  padding: var(--tc-space-3);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--tc-radius-md);
  background: rgba(255, 255, 255, 0.03);
}
.wb-prj__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  margin-bottom: var(--tc-space-2);
}
.wb-prj__art { flex: 0 0 auto; font-size: 1.05rem; }
.wb-prj__titel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--tc-text-strong);
  /* Lange Projektnamen dürfen die Karte nicht sprengen — sie kommen aus
     Notizen und sind manchmal ein ganzer Satz. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-prj__stand {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--tc-highlight);
  font-weight: 600;
}

.wb-prj__balken {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wb-prj__balken > span {
  display: block;
  height: 100%;
  background: var(--tc-accent);
  transition: width var(--tc-motion-normal) ease;
}
.wb-prj__wort {
  margin-top: var(--tc-space-1);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

/* Die Ziele am Projekt — „nacheinander mehrere" heißt: die alten bleiben
   sichtbar. Sie sind die Geschichte der Arbeit. */
.wb-prj__ziele {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-2);
}
.wb-prj__ziel {
  font-size: var(--tc-text-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--tc-text-muted);
}
/* Erfolg und Fehlschlag sind DATEN-Farben (CLAUDE.md §9) — sie bedeuten etwas
   über den Zustand, nicht über die Stimmung. */
.wb-prj__ziel.ist-erreicht {
  color: var(--tc-success);
  border-color: color-mix(in srgb, var(--tc-success) 45%, transparent);
}
.wb-prj__ziel.ist-versaeumt { color: var(--tc-text-muted); opacity: 0.7; }

.wb-prj__album {
  display: flex;
  gap: var(--tc-space-2);
  flex-wrap: wrap;
  margin-top: var(--tc-space-3);
}
.wb-prj__leer {
  margin-top: var(--tc-space-3);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .wb-prj__balken > span { transition: none; }
}

/* Woher der Reglerstand kommt, wenn nicht aus dem jüngsten Foto (23.08.2026).
   Ein erfülltes Ziel hebt ihn — und ein Sprung ohne Begründung liest sich
   als Fehler. Bewusst leiser als das Stufenwort daneben: Es ist eine
   Fußnote, keine zweite Aussage. */
.wb-prj__quelle {
  font-size: 0.82em;
  color: var(--tc-text-muted);
  font-style: italic;
}