/* systeme.css — die Systemübersicht.
 *
 * DIESE DATEI IST ABSICHTLICH KURZ.
 *
 * Aufbau, Maße und Farben kommen aus wettbewerb.css, das hier
 * unverändert mitgeladen wird. Der Nutzer wollte das Konkurrenten-
 * Design "eins zu eins" -- und der einzige Weg, bei dem das nach der
 * nächsten Änderung noch stimmt, ist, dieselbe Datei zu benutzen
 * statt ihre Werte abzuschreiben. Abgeschriebene Werte driften; eine
 * gemeinsame Datei kann es nicht.
 *
 * Hier steht nur, was sich wirklich unterscheidet:
 *
 *   1. Die Kachel ist ein LINK, kein Knopf. wettbewerb.css stylt
 *      .wb-kachel für <button>; ein <a> bringt Unterstreichung und
 *      Linkfarbe mit, die weg müssen.
 *   2. Im Zeichen steht ein Sinnbild des Bereichs statt eines Logos.
 *      Für 54 Systeme gibt es keine Logos, und ein Monogramm aus
 *      "F125" wäre nur das Wort noch einmal.
 *   3. Der Punkt zeigt den Bearbeitungsstand, nicht den Defence-Bezug.
 */

/* ── 1. Die Kachel als Link ─────────────────────────────────────────
   Sie führt auf map.html#<slug>, also auf eine andere Seite. Ein
   Knopf wäre hier falsch: man soll sie in einem neuen Tab öffnen und
   ihre Adresse kopieren können. */
a.wb-kachel { text-decoration: none; color: inherit; }
a.wb-kachel:focus-visible {
  outline: 2px solid var(--wb-tief); outline-offset: 2px;
}

/* ── 2. Das Sinnbild ───────────────────────────────────────────────
   Gleiche Maße wie das Logofeld der Konkurrenten, damit die Kacheln
   in beiden Ansichten gleich hoch stehen. */
.sy-zeichen svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 3. Der Stand ──────────────────────────────────────────────────
   Drei Zustände, dieselben wie in der Datenbank. Die Farbe ist nie
   die einzige Auskunft -- daneben steht das Wort. */
.wb-kachel__punkt--offen     { background: var(--wb-still); }
.wb-kachel__punkt--in_arbeit { background: var(--terratext); }
.wb-kachel__punkt--fertig    { background: var(--wb-tief); }

/* Das Nutzungsdauerende rechts in der Kachelzeile. Bündig rechts,
   wie das "neu"-Zeichen der Konkurrenten -- nur ohne Auszeichnung,
   weil eine Jahreszahl keine Neuigkeit ist. */
.sy-ende {
  margin-left: auto; flex: none;
  font-variant-numeric: tabular-nums; color: var(--wb-leise);
}