/* systemkarte.css — der Kopf der Einzelseite.
 *
 * Die Systemkarte selbst ist ein Panel-Board und bleibt es. Was ihr
 * fehlte, war der RAHMEN: sie fing ohne Anlauf mit neun Feldern an,
 * waehrend Konkurrenten und Systemuebersicht beide ein dunkelgruenes
 * Band tragen, das sagt, wo man ist.
 *
 * Das Band traegt denselben Verlauf wie das Hero der beiden anderen
 * Seiten. Die Werte stehen hier ausgeschrieben und nicht per
 * wettbewerb.css geliehen: map.html laedt dashboard.css, und die
 * beiden Stilblaetter teilen sich Klassennamen wie .panel und .stats.
 * Ein zweites vollstaendiges Stilblatt daruebergelegt, nur um ein Band
 * zu faerben, waere ein Kaskadenkonflikt fuer neun Panels -- und der
 * faellt erst auf, wenn eins davon schief steht.
 *
 * Der Preis ist bekannt: drei Farbwerte stehen zweimal im Haus. Wenn
 * das Gruen wechselt, wechselt es hier mit. Das ist der kleinere
 * Schaden.
 *
 * WARUM DIE 56 KNOEPFE WEG SIND
 * Der Programmwaehler zeichnete einen Knopf je Programm. Bei vier war
 * das eine Leiste; bei sechsundfuenfzig ist es eine Wand. Die Auswahl
 * gehoert auf die Uebersicht, wo sie gesucht und gefiltert werden
 * kann -- hier steht nur noch der Weg zurueck.
 */

.sk-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--green, #003300);
  padding: 5px 12px; border: 1px solid var(--line, #E4E1D8); border-radius: 999px;
  background: var(--surface, #fff);
}
.sk-zurueck:hover { background: var(--hover, #F5F3EC); border-color: var(--green, #003300); }

.sk-band {
  background: linear-gradient(100deg, #003300 0%, #003300 42%, #0D4A38 100%);
  color: #fff; padding: 26px 0 24px;
}
.sk-band__in {
  width: min(1180px, calc(100% - 48px)); margin-inline: auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

/* Dasselbe Sinnbildfeld wie auf den Kacheln der Uebersicht, damit ein
   System auf beiden Seiten gleich aussieht. */
.sk-zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none;
  border-radius: 12px; background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sk-zeichen svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.sk-wer { flex: 1 1 260px; min-width: 0; }
.sk-kicker {
  display: block; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.sk-name {
  margin: 3px 0 0; font-family: var(--sans);
  font-size: clamp(22px, 3vw, 30px); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.15; color: #fff;
}
/* Bei den 54 Systemen aus dem Bestand steht in `lead` der Typ
   ("Kampfflugzeug"). Bei den vier älteren Programmen steht dort ein
   ganzer Absatz -- der blähte das Band auf acht Zeilen auf und schob
   die Karte aus dem Bild. Zwei Zeilen genügen als Anriss; der volle
   Text steht ohnehin im Record-Panel darunter. */
.sk-typ {
  margin: 3px 0 0; font-size: 14px; line-height: 1.45;
  color: rgba(255, 255, 255, .82); max-width: 72ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Die drei Zahlen. Ohne Rahmen -- es sind Zahlen, keine Objekte. */
.sk-zahlen { display: flex; gap: 26px; flex: none; flex-wrap: wrap; }
.sk-zahl__kopf {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}
.sk-zahl__wert {
  margin: 2px 0 0; font-size: 20px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sk-zahl__wert--leer { color: rgba(255, 255, 255, .42); font-weight: 400; font-size: 15px; }

.sk-marke {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: 999px; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
}
.sk-marke--offen     { background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); }
.sk-marke--in_arbeit { background: #D8A05C; color: #2A1A06; }
.sk-marke--fertig    { background: #9CC5A1; color: #00250A; }

@media (max-width: 720px) {
  .sk-band { padding: 20px 0 18px; }
  .sk-zahlen { gap: 18px; width: 100%; }
}