/* sanktionen.css — der Sanktions-Desk.
 *
 * ZWEI VORLAGEN, UND WARUM BEIDE
 *
 * Aufbau, Farben und Masse kommen aus wettbewerb.css, das hier
 * unveraendert mitgeladen wird -- Hero, weisse Suchkarte, dieselben
 * Abstaende. Was hier dazukommt, ist die ERGEBNISLISTE nach dem
 * Vorbild von RECHT.NRW: links eine Filterleiste, rechts die Treffer
 * als Zeilen mit Statusmarken.
 *
 * Kacheln waeren hier falsch. Achtzehn Konkurrenten kann man als
 * Kachelfeld zeigen; sechstausend Listungen nicht. Eine Ergebnisliste
 * beantwortet ausserdem die Frage, die man an ein Register stellt --
 * "wie viele, und welche" -- waehrend ein Kachelfeld sie verdeckt.
 *
 * ── DIE REGEL, DIE DAS AUSSEHEN BESTIMMT ────────────────────────────
 *
 * Ein Falschtreffer ist hier rufschaedigend. Deshalb sehen die drei
 * Zustaende AUSDRUECKLICH verschieden aus:
 *
 *   exakt     Der gesuchte Name IST ein gelisteter Name. Rot.
 *   teil      Der Name kommt in einem gelisteten Namen vor. Terra,
 *             und daneben steht, dass das noch kein Befund ist.
 *   nichts    Kein Treffer -- und daneben steht, was NICHT geprueft
 *             wurde. Das ist der wichtigste der drei.
 */

.sa-body {
  /* Creme, nicht Weiss (17.09.2026): der Grund der Seite liegt unter
     dem gruenen Kopf und soll dort creme sein. Die Abschnitte malen
     sich weiterhin selbst -- geaendert hat sich nur, was in den
     Luecken und unter dem letzten Abschnitt zu sehen ist. */
  background: var(--boden, #F9F2E4);
}

/* ── Die Pruefkarte ─────────────────────────────────────────────────
   Steht GANZ OBEN, noch vor dem Register. Das ist die Frage, wegen
   der jemand diese Seite aufmacht: "stehen wir drauf, oder unser
   Partner?" Sie unter eine Ergebnisliste zu schieben hiesse, die
   Hauptsache zu verstecken. */
.sa-pruefkarte {
  background: #fff; border-radius: 22px; padding: 24px;
  box-shadow: 0 1px 2px rgba(0,51,0,.06), 0 8px 24px rgba(0,51,0,.07);
}
.sa-pruef__titel {
  margin: 0 0 6px; font-family: var(--sans);
  font-size: 20px; font-weight: 700; color: var(--wb-tief);
}
.sa-pruef__dek {
  margin: 0 0 16px; max-width: 68ch;
  font-size: 14.5px; line-height: 1.6; color: var(--wb-text);
}
.sa-pruef__form { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-pruef__feld {
  flex: 1 1 320px; min-width: 0; font: inherit; font-size: 16px;
  color: var(--wb-text); border: 1px solid var(--wb-tief);
  border-radius: 999px; padding: 13px 22px; background: #fff;
}
.sa-pruef__feld::placeholder { color: var(--wb-still); font-style: italic; }

/* ── Das Ergebnis der Pruefung ─────────────────────────────────────── */
.sa-befund { margin-top: 18px; border-radius: 14px; padding: 16px 18px; }
.sa-befund--exakt  { background: #FBEAE6; border: 1px solid #C8553D; }
.sa-befund--teil   { background: #FAF1E8; border: 1px solid var(--terratext); }
.sa-befund--nichts { background: var(--wb-hell); border: 1px solid var(--wb-rand); }

.sa-befund__kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 16px; font-weight: 700; margin: 0 0 6px;
}
.sa-befund--exakt  .sa-befund__kopf { color: #9B2C13; }
.sa-befund--teil   .sa-befund__kopf { color: var(--terratext); }
.sa-befund--nichts .sa-befund__kopf { color: var(--wb-tief); }

/* Der Satz, der sagt, was NICHT geprueft wurde. Er steht bei JEDEM
   Ergebnis, nicht nur beim Nulltreffer -- auch ein Treffer sagt
   nichts ueber Sektormassnahmen. */
.sa-befund__grenze {
  margin: 10px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--wb-leise);
  border-top: 1px solid rgba(0,0,0,.08); padding-top: 10px;
}

.sa-treffer { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sa-treffer li {
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 10px;
  padding: 10px 14px;
}
.sa-treffer__name { font-weight: 700; font-size: 15px; color: var(--wb-text); }
.sa-treffer__unter {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 4px; font-size: 12.5px; color: var(--wb-leise);
}

/* ── Die Ergebnisliste nach RECHT.NRW ──────────────────────────────── */
.sa-werk {
  display: grid; grid-template-columns: minmax(200px, 250px) 1fr;
  gap: 28px; align-items: start; margin-top: 18px;
}
.sa-filter { position: sticky; top: 16px; }
.sa-filter__gruppe { margin-bottom: 18px; }
.sa-filter__titel {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wb-tief);
}
.sa-filter__zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 14px; color: var(--wb-text); cursor: pointer;
}
.sa-filter__zeile input { accent-color: var(--wb-tief); }
.sa-filter__n {
  margin-left: auto; font-size: 12px; color: var(--wb-leise);
  font-variant-numeric: tabular-nums;
}

/* Die Programmgruppe führt alle 34 Kennungen. Ungekürzt — eine
   Filterleiste, die nur die häufigsten zeigt, lässt den Leser glauben,
   es gäbe keine anderen. Damit die Leiste trotzdem neben der
   Trefferliste stehen bleibt, rollt die Gruppe in sich. Die Höhe ist so
   gewählt, dass die angefangene letzte Zeile sichtbar bleibt: ein
   Rollbereich, der genau an einer Zeilenkante endet, sieht aus wie ein
   Ende. */
.sa-filter__rollen {
  max-height: 340px; overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.sa-liste { list-style: none; margin: 0; padding: 0; min-width: 0; }
.sa-zeile {
  border-bottom: 1px solid var(--wb-rand); padding: 14px 0;
}
.sa-zeile:first-child { border-top: 1px solid var(--wb-rand); }
.sa-zeile__titel {
  margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 600;
  color: var(--wb-text);
}
.sa-zeile__titel a { color: inherit; text-decoration: none; }
.sa-zeile__titel a:hover { text-decoration: underline; }
.sa-zeile__marken {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px;
}
.sa-marke {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 4px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em;
}
.sa-marke--person { background: var(--wb-hell); color: var(--wb-tief); }
.sa-marke--entity { background: #E3EDE4; color: var(--wb-tief); }
.sa-marke--prog   { background: #EFF0EC; color: var(--wb-leise); }
.sa-marke--datum  { color: var(--wb-leise); font-weight: 400; }
.sa-zeile__alias {
  margin: 6px 0 0; font-size: 13px; color: var(--wb-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sa-mehr {
  margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ── Der Fuss: Erinnerung und Auszug ───────────────────────────────── */
.sa-fuss { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.sa-karte {
  background: #fff; border: 1px solid var(--wb-rand); border-radius: 14px; padding: 20px;
}
.sa-karte h3 {
  margin: 0 0 6px; font-family: var(--sans); font-size: 17px;
  font-weight: 700; color: var(--wb-tief);
}
.sa-karte p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--wb-text); }
.sa-alarmliste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sa-alarmliste li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; padding: 7px 10px;
  background: var(--wb-hell); border-radius: 8px;
}
.sa-alarmliste button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 1; color: var(--wb-leise);
}
.sa-alarmliste button:hover { color: var(--terratext); }

.sa-stand {
  margin: 0; font-size: 13px; color: var(--wb-leise);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .sa-werk { grid-template-columns: 1fr; gap: 18px; }
  .sa-filter { position: static; }
}

/* ── Der Auszug ─────────────────────────────────────────────────────
   Kein PDF-Erzeuger als Bibliothek: die Richtlinie dieser Seite
   erlaubt nur eigene Skripte (script-src 'self'), und ein 200-kB-
   Paket nur fuers Drucken waere auch ohne die Richtlinie zu viel.
   Statt dessen ein Druckbild -- jeder Browser legt daraus ein PDF an,
   und es traegt dieselben Zahlen wie der Bildschirm, weil es DIESELBE
   Seite ist. */
@media print {
  .lh, .wb-hero, .sa-pruefkarte, .sa-filter, .sa-mehr, .sa-fuss,
  .wb-suchkarte { display: none !important; }
  .sa-werk { grid-template-columns: 1fr; }
  .sa-druckkopf { display: block !important; }
  body { background: #fff; }
  .sa-zeile { break-inside: avoid; }
}
.sa-druckkopf { display: none; }
.sa-druckkopf h1 {
  font-family: var(--sans); font-size: 20px; margin: 0 0 4px; color: #000;
}
.sa-druckkopf p { margin: 0 0 16px; font-size: 12px; color: #444; }

/* ── Der Laufstreifen ────────────────────────────────────────────────
   Direkt unter dem Hero, vollbreit und flach. Er sagt einen Satz:
   wann zuletzt geprüft wurde. Das ist der ganze Unterschied zwischen
   einem Register und einer Überwachung — und er gehört deshalb nicht
   in eine Fußzeile. */
.sa-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));
}
.sa-lauf__punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--wb-still); }
/* Frisch, alt, ausgefallen. Die Farbe ist nie die einzige Auskunft --
   daneben steht der Satz. */
.sa-lauf__punkt--frisch { background: var(--wb-tief); }
.sa-lauf__punkt--alt    { background: var(--terratext); }
.sa-lauf__punkt--fehler { background: #C8553D; }
.sa-lauf__punkt--nie    { background: var(--wb-still); }
.sa-laufstreifen b { color: var(--wb-text); }

.sa-aend { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sa-aend__art {
  flex: none; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
}
.sa-aend__art--neu       { background: #FBEAE6; color: #9B2C13; }
.sa-aend__art--entfernt  { background: #E3EDE4; color: var(--wb-tief); }
.sa-aend__art--geaendert { background: #FAF1E8; color: var(--terratext); }
.sa-aend__meins {
  flex: none; padding: 1px 7px; border-radius: 4px;
  background: var(--wb-tief); color: #fff; font-size: 11px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   Land zuerst, Unterfilter oben
   ═══════════════════════════════════════════════════════════════════
   Seit dem 16.09.2026 führt die linke Leiste Länder statt Regime. Die
   Begründung steht in sanktionen.js über `filter` und gehört gelesen,
   bevor hier jemand etwas verschiebt: die Reihenfolge ist keine
   Geschmacksfrage, sie war der Fehler.                                */

.sa-filter__hinweis {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--wb-leise);
}

.sa-land {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 7px; margin: 0 0 1px;
  background: none; border: 0; border-radius: 7px;
  font: inherit; font-size: 14px; color: var(--wb-text);
  text-align: left; cursor: pointer;
}
.sa-land:hover { background: var(--wb-hell); }
.sa-land--an { background: var(--wb-tief); color: #fff; }
.sa-land--an:hover { background: var(--wb-tief); }
.sa-land__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-land__n {
  margin-left: auto; font-size: 12px; color: var(--wb-leise);
  font-variant-numeric: tabular-nums;
}
.sa-land--an .sa-land__n { color: rgba(255,255,255,.8); }
/* „Ohne Länderbezug" ist kein Land und steht deshalb abgesetzt --
   sonst läse es sich als einhundertzwölftes. */
.sa-land--ohne { margin-top: 8px; border-top: 1px solid var(--wb-rand); padding-top: 9px; }

.sa-kopfleiste {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--wb-hell); border: 1px solid var(--wb-rand); border-radius: 12px;
}
.sa-kopf__zeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sa-kopf__titel {
  margin: 0; font-family: var(--sans); font-size: 20px; font-weight: 700;
  color: var(--wb-tief); letter-spacing: -0.01em;
}
.sa-kopf__weg {
  margin-left: auto; background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; color: var(--wb-leise);
  text-decoration: underline; cursor: pointer;
}
.sa-kopf__weg:hover { color: var(--wb-tief); }

.sa-kopf__unter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.sa-unter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border: 1px solid var(--wb-rand); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13.5px; color: var(--wb-text); cursor: pointer;
}
.sa-unter:hover { border-color: var(--wb-tief); }
.sa-unter--an { background: var(--wb-tief); border-color: var(--wb-tief); color: #fff; }
.sa-unter__n { font-size: 12px; color: var(--wb-leise); font-variant-numeric: tabular-nums; }
.sa-unter--an .sa-unter__n { color: rgba(255,255,255,.8); }
.sa-kopf__prog { margin-left: auto; }
.sa-kopf__prog select {
  padding: 6px 10px; border: 1px solid var(--wb-rand); border-radius: 9px;
  background: #fff; font: inherit; font-size: 13.5px; color: var(--wb-text); cursor: pointer;
}

.sa-kopf__fuss {
  margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wb-leise);
}
/* Der Ukraine-Satz. Er steht nicht in Grau wie eine Fußnote: er
   korrigiert ein Missverständnis, mit dem ein Leser sonst aus der Seite
   herausgeht. */
.sa-kopf__warnung {
  margin: 11px 0 0; padding: 10px 12px;
  background: #FAF1E8; border-left: 3px solid var(--terratext); border-radius: 0 8px 8px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--wb-text);
}

@media (max-width: 860px) {
  .sa-kopf__prog { margin-left: 0; width: 100%; }
  .sa-kopf__prog select { width: 100%; }
}