/* sachsen.css — die Organigramm-App.
 * ════════════════════════════════════════════════════════════════════
 * Ergänzt wettbewerb.css, ersetzt es nicht. Aufbau, Maße, Farben und
 * die Abschnittsbänder kommen von dort; hier stehen nur die vier
 * Bauteile, die es dort nicht gibt: die Häuserkarte, der Weg, die
 * Leitungszeile und das Protokoll.
 *
 * KEIN EIGENES FARBSYSTEM. Alle Farben kommen aus --wb-* und den
 * Haustoken. Eine App, die sich ihre eigenen Grüntöne mischt, sieht
 * nach zwei Wochen aus wie eine fremde Seite im selben Portal.
 */

/* ── Der Laufstreifen ─────────────────────────────────────────────── */
.sx-laufstreifen {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; font-size: 13.5px; color: var(--wb-leise);
  background: var(--wb-hell); border-bottom: 1px solid var(--wb-rand);
  padding-inline: max(24px, calc((100% - 1180px) / 2));
}
.sx-lauf__punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--wb-still);
}
/* Die Farbe ist nie die einzige Auskunft — daneben steht der Satz. */
.sx-lauf__punkt--frisch { background: var(--wb-tief); }
.sx-lauf__punkt--alt    { background: var(--terratext); }
.sx-lauf__punkt--fehler { background: #C8553D; }
.sx-laufstreifen b { color: var(--wb-text); }

/* ── Die Kennzahlzeile ────────────────────────────────────────────
   Bleibt, obwohl die Häuserkarten entfallen sind: der Kopf der
   Hausseite baut seine vier Kennzahlen damit, und sie sollen dort
   aussehen wie überall sonst im Haus. */
.sx-zahl { display: flex; flex-direction: column; gap: 2px; }
.sx-zahl__kopf {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wb-still);
}
.sx-zahl__wert {
  font-size: 15px; font-weight: 700; color: var(--wb-text);
  font-variant-numeric: tabular-nums;
}
.sx-zahl__wert--leer { color: var(--wb-still); font-weight: 400; }

/* ── Der Weg ──────────────────────────────────────────────────────── */
/* Nummeriert, weil die Reihenfolge hier wirklich etwas bedeutet: wer
   mit Schritt 3 anfängt, spricht mit der Bank über eine Entscheidung,
   die das Ministerium trifft. */
.sx-weg { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.sx-schritt {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--wb-rand);
}
.sx-schritt:last-child { border-bottom: 1px solid var(--wb-rand); }
.sx-schritt__nr {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wb-tief); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sx-schritt__titel {
  margin: 4px 0 6px; font-family: var(--sans);
  font-size: 16px; font-weight: 700; color: var(--wb-tief);
}
.sx-schritt__text { margin: 0; font-size: 14px; line-height: 1.62; color: var(--wb-text); max-width: 68ch; }

/* ── Die Leitungen ────────────────────────────────────────────────── */
.sx-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.sx-filter .wb-suche__feld { flex: 1 1 320px; min-width: 0; }

.sx-leitungen { margin-top: 16px; }
.sx-gruppe { margin-bottom: 22px; }
.sx-gruppe__kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--wb-tief);
}
.sx-gruppe__stand { font-size: 12.5px; font-weight: 400; color: var(--wb-leise); }

.sx-zeile {
  display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 6px 18px;
  padding: 11px 0; border-top: 1px solid var(--wb-rand);
  font-size: 14px; line-height: 1.5;
}
.sx-zeile:last-child { border-bottom: 1px solid var(--wb-rand); }
.sx-zeile__einheit { font-weight: 700; color: var(--wb-tief); }
.sx-zeile__person { color: var(--wb-text); }
.sx-zeile__titel { color: var(--wb-leise); }
.sx-zeile__aufgaben {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 13px; line-height: 1.55; color: var(--wb-leise);
}
@media (max-width: 560px) {
  .sx-zeile { grid-template-columns: 1fr; }
}

/* ── Das Protokoll ────────────────────────────────────────────────── */
.sx-protokoll { display: grid; gap: 0; margin-top: 18px; }
.sx-lauf {
  display: grid; grid-template-columns: 96px 130px 1fr; gap: 6px 16px;
  padding: 13px 0; border-top: 1px solid var(--wb-rand);
  font-size: 13.5px; line-height: 1.5;
}
.sx-lauf:last-child { border-bottom: 1px solid var(--wb-rand); }
.sx-lauf__haus { font-weight: 700; color: var(--wb-tief); }
.sx-lauf__zeit { color: var(--wb-leise); font-variant-numeric: tabular-nums; }
.sx-lauf__was { color: var(--wb-text); min-width: 0; }
.sx-lauf__was a { word-break: break-all; }

/* Die drei Zustände. Auch hier trägt das Wort die Auskunft, nicht die
   Farbe: „geändert“ steht als Wort da, das Band betont es nur. */
.sx-lauf--wechsel { background: linear-gradient(90deg, rgba(200,85,61,.07), transparent 42%); }
.sx-marke {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700; margin-right: 8px;
}
.sx-marke--wechsel { background: #FBEAE6; color: #9B2C13; }
.sx-marke--gleich  { background: #E3EDE4; color: var(--wb-tief); }
.sx-marke--fehler  { background: #FAF1E8; color: var(--terratext); }

.sx-namen {
  grid-column: 1 / -1; margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.7; color: var(--wb-leise);
}
.sx-namen b { color: var(--wb-text); }

.sx-leer {
  margin: 0; padding: 26px 0; font-size: 14px; line-height: 1.6;
  color: var(--wb-leise); max-width: 64ch;
}
@media (max-width: 680px) {
  .sx-lauf { grid-template-columns: 1fr; }
}

/* ── Die Häuserkacheln ──────────────────────────────────────────────
 *
 * Derselbe Baustein wie im Workspace. Die Regeln sind aus
 * dashboard.css ÜBERNOMMEN und nicht neu erfunden -- Maße, Radius,
 * Übergänge stimmen auf den Punkt, damit eine Sachsen-Kachel und eine
 * Workspace-Kachel dieselbe Sache sind.
 *
 * Warum kopiert und nicht dashboard.css mitgeladen: jene Datei bringt
 * ein vollständiges Seitenraster mit (.board, .panel, .foot), und
 * diese Seite baut auf wettbewerb.css. Zwei Rastersysteme auf einer
 * Seite streiten sich; fünf Kachelregeln tun das nicht.
 */
.sx-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px; margin: 18px 0 0;
}
.sx-kacheln .sx-leer { grid-column: 1 / -1; padding: 12px 0; }

.sx-kachel {
  display: block; background: #fff;
  border: 1px solid var(--wb-rand); border-radius: 18px;
  padding: 18px 18px 16px; text-decoration: none; color: var(--wb-text);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.sx-kachel:hover {
  background: var(--wb-hell); border-color: var(--wb-tief);
  transform: translateY(-1px);
}
.sx-kachel:focus-visible { outline: 2px solid var(--wb-weit); outline-offset: 2px; }

/* Zeichen und gezeichnete Marke sitzen im GLEICHEN Feld: 34 Punkte
   hoch, linksbündig. Sonst springt die Grundlinie der Namen zwischen
   den Kacheln, je nachdem ob ein Haus ein Logo hat. */
.sx-kachel__zeichen {
  display: flex; align-items: center;
  height: 34px; margin-bottom: 10px;
}
.sx-kachel__zeichen svg {
  width: 34px; height: 34px; display: block;
  fill: none; stroke: var(--wb-tief); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sx-kachel__zeichen svg .fill { fill: var(--terra); stroke: none; }
.sx-kachel__zeichen svg .tick { stroke: var(--terratext); stroke-width: 2; }

/* Ein fremdes Zeichen wird nicht eingefärbt und nicht beschnitten --
   es behält seine Proportion und seine Farben. Begrenzt wird nur die
   Fläche, damit ein breites Wortzeichen die Kachel nicht sprengt. */
.sx-kachel__logo {
  max-height: 34px; max-width: 150px;
  width: auto; height: auto; object-fit: contain; display: block;
}

.sx-kachel .app__name {
  display: block; margin-top: 0;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 900;
  color: var(--wb-tief); line-height: 1.2;
}
.sx-kachel .app__meta {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.5; color: var(--wb-leise);
}
.sx-kachel .app__meta b {
  color: var(--terratext); font-weight: 700;
  font-family: var(--mono); font-size: 0.75rem;
}

.sx-unterkopf {
  margin: 38px 0 6px; font-family: var(--sans);
  font-size: 16px; font-weight: 700; color: var(--wb-tief);
}
.sx-unterdek {
  margin: 0 0 4px; max-width: 62ch;
  font-size: 13.5px; line-height: 1.6; color: var(--wb-leise);
}

/* ── Der Ruhezustand der Leitungssuche ────────────────────────────────
 *
 * Eine Suchmaske ohne Ergebnis ist eine Sackgasse, wenn sie nicht
 * sagt, ob sich das Suchen lohnt. Deshalb nennt sie die Zahl und die
 * Häuser -- aber keinen Menschen.
 */
.sx-ruhe {
  margin-top: 18px; padding: 26px 26px 22px;
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 14px;
}
.sx-ruhe__zahl {
  margin: 0; font-family: var(--sans);
  font-size: 22px; font-weight: 700; color: var(--wb-tief);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.sx-ruhe__auf {
  margin: 6px 0 0; font-size: 13px; color: var(--wb-leise);
  font-variant-numeric: tabular-nums;
}
.sx-ruhe__auf b { color: var(--wb-text); font-variant-numeric: tabular-nums; }
.sx-ruhe__satz {
  margin: 14px 0 0; max-width: 64ch;
  font-size: 13.5px; line-height: 1.62; color: var(--wb-text);
}
.sx-ruhe__satz i { color: var(--wb-tief); font-style: normal; font-weight: 700; }
.sx-ruhe__satz--still { color: var(--wb-still); font-size: 12.5px; }

.sx-beispiele { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sx-beispiel {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--wb-rand); background: var(--wb-hell);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--wb-tief);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sx-beispiel:hover { background: var(--wb-tief); color: #fff; border-color: var(--wb-tief); }
.sx-beispiel:focus-visible { outline: 2px solid var(--wb-weit); outline-offset: 2px; }

.sx-trefferzeile {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 10px; color: var(--wb-leise);
}
.sx-zurueck {
  padding: 0; border: none; background: none; font: inherit;
  color: var(--wb-tief); text-decoration: underline; cursor: pointer;
}
.sx-zurueck:hover { color: var(--wb-weit); }

/* Die Durchwahl in der Trefferzeile -- schmal, damit sie den Namen
   nicht überstimmt. */
.sx-zeile__dw {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--wb-still);
  background: var(--wb-hell); border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}