/* Ausschreibungs-Monitor - Oberflaeche im Controlware-Design
 *
 * Anstrich "Terrazzo CW" nach docs/entwuerfe/2026-09-17-anstriche.html,
 * Reiter 9: die Form von Terrazzo (Karten mit Abstand, harter Schlagschatten,
 * dunkle Schiene, runde Kapseln gegen eckige Flaechen), die Mittel des
 * Firmendesigns.
 *
 * Quelle der Marke: pptx-skill, assets/cw/marke.json.
 *
 * Firmengruen ist 3AAA35 (auf den Folien der Unternehmenspraesentation
 * 128 Mal gesetzt). Der Wert 20AD20 aus dem Theme der Master-Vorlage ist
 * Altbestand - marke.json haelt das unter `abweichung` fest.
 *
 * Kontrast, gegen Weiss gemessen:
 *   3AAA35  3,01:1  nur Flaeche oder Schrift ab 24 px
 *   2A7D26  5,17:1  kleine gruene Schrift, weisse Schrift auf gruener Flaeche
 *   005F8D  6,95:1  zweiter Akzent
 *   575651  7,36:1  Nebentext
 * Abgeleitet fuer den Bildschirm, weil die Markentoene als kleine Schrift
 * reissen (E73331 4,27:1 / F39325 2,33:1 / 018EBE 3,74:1):
 *   C62828  5,62:1  Frist eilig
 *   A35C08  5,13:1  Frist bald
 *   01769B  5,16:1  Hinweis
 *   3A3935  abgedunkeltes Markengrau fuer die Schiene, Weiss darauf 11,56:1
 * Papierton F2F2F2 ist der dk2-Wert des Master-Themes, Blockflaeche E5E5E5
 * steht in marke.json. Keine erfundenen Farbwerte.
 *
 * Drei weitere Toene sind abgeleitet, weil der Entwurf sie als kleine
 * Schrift setzt und die Vorlagenwerte dort die 4,5:1 verfehlen:
 *   6E6D69  aufgehelltes Markengrau, 5,18:1 auf Weiss, 4,63:1 auf F2F2F2
 *           (der Entwurf setzt hier 84837E mit nur 3,80:1)
 *   A8A6A2  Zahlen auf der Schiene, 4,76:1 auf 3A3935
 *           (der Entwurf setzt hier 9B9995 mit nur 4,06:1)
 *   1F5C1C  abgedunkeltes Gruen fuer den Hover gruener Flaechen, 8,06:1
 *
 * Die Flaechen hinter farbiger Schrift sind so hell gewaehlt, dass die
 * Schrift darauf die Schwelle haelt: C62828 auf FBEAEA 4,83:1,
 * A35C08 auf FBF3EA 4,67:1, 01769B auf EAF3F8 4,59:1, 575651 auf E5E5E5
 * 5,84:1.
 */

:root {
  color-scheme: light;

  /* Marke */
  --cw-green: #3aaa35;          /* Firmengruen - Flaechen, Logo, Balken */
  --cw-green-dark: #2a7d26;     /* Text und Schaltflaechen (AA-tauglich) */
  --cw-green-darker: #1f5c1c;   /* Hover */
  --block: #e5e5e5;             /* Blockflaeche, Etiketten, Balkenspur */
  --hover: #f7f7f6;             /* Zeilenhover, zarte Flaechen */

  /* Flaechen und Schrift */
  --page: #f2f2f2;              /* Papierton des Master-Themes */
  --surface: #ffffff;           /* Karten */
  --surface-2: #f7f7f6;
  --text-primary: #000000;
  --text-secondary: #575651;
  --text-muted: #6e6d69;
  --border: #d2d2d0;
  --border-strong: #b9b9b5;
  --track: #e5e5e5;

  /* Schiene - dunkles Markengrau */
  --rail-bg: #3a3935;
  --rail-tx: #cfcecb;
  --rail-tx-2: #a8a6a2;
  --rail-hover: #4a4944;

  /* Status - Fristen. Farbe steht nie allein, immer mit Text. */
  --urgent: #c62828;
  --urgent-bg: #fbeaea;
  --urgent-border: #e3c4c4;
  --soon: #a35c08;
  --soon-bg: #fbf3ea;
  --hinweis: #01769b;
  --hinweis-dark: #005f8d;
  --hinweis-bg: #eaf3f8;
  --ok-bg: var(--block);

  /* Terrazzo: eckige Flaechen, runde Kapseln, harter Schlagschatten */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 999px;
  --gap: 16px;
  --rail-w: 250px;
  /* Geoeffnet nimmt die Detailansicht die Haelfte des Bildschirms ein. So haben
     Leistungsbeschreibung, Lose und Nachweise genug Platz zum Lesen. */
  --detail-w: 50vw;
  --font: Arial, "Liberation Sans", Helvetica, sans-serif;
  --mono: Arial, "Liberation Sans", Helvetica, sans-serif;
  --shadow: 3px 3px 0 rgba(58, 57, 53, 0.16);
  --shadow-an: 4px 4px 0 var(--cw-green);
}

/* Dunkelmodus: der Entwurf kennt ihn nicht, der Schalter im Kopf schon.
 * Grundlage ist dasselbe Markengrau, weiter abgedunkelt; die Markentoene
 * halten auf dem dunklen Grund von sich aus - gemessen gegen 2A2926:
 * 3AAA35 4,84:1, F39325 6,24:1. Rot und Blau werden aufgehellt, weil
 * E73331 (3,41:1) und 018EBE (3,89:1) dort reissen. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cw-green: #3aaa35;
  --cw-green-dark: #63c05f;     /* 6,40:1 auf der Kartenflaeche */
  --cw-green-darker: #7ccd79;   /* 7,53:1 - Hover */
  --block: #34322f;
  --hover: #322f2c;
  --page: #1f1e1c;
  --surface: #2a2926;
  --surface-2: #242320;
  --text-primary: #f2f2f2;      /* 12,99:1 */
  --text-secondary: #b9b9b5;    /* 7,39:1 */
  --text-muted: #a8a6a2;        /* 5,99:1 */
  --border: #45433f;
  --border-strong: #56534e;
  --track: #34322f;
  --rail-bg: #171614;
  --rail-tx: #cfcecb;
  --rail-tx-2: #a8a6a2;
  --rail-hover: #2a2926;
  --urgent: #f08a88;            /* 6,02:1 */
  --urgent-bg: #3a2422;
  --urgent-border: #55302e;
  --soon: #f5a94a;              /* 7,38:1 */
  --soon-bg: #382b1b;
  --hinweis: #5cb8de;           /* 6,49:1 */
  --hinweis-dark: #5cb8de;
  --hinweis-bg: #1e2f38;
  --ok-bg: var(--block);
  --shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Der Rahmen steht, die Spalten scrollen: die Seite selbst scrollt nie. */
  overflow: hidden;
}

.wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Kopf ------------------------------------------------------------- */

header.top {
  padding: 26px 0 0;
}

.brandbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.brandbar img.logo {
  height: 34px;
  width: auto;
  display: block;
}

.brandbar .divider {
  width: 1px;
  height: 26px;
  background: var(--border-strong);
}

.brandbar .product {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.brandbar .spacer { flex: 1; }

/* Kleinschrift-Ueberschrift in Gruen, wie "PROJEKTE" im Vorbild */
.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-green-dark);
  margin: 0 0 6px;
}

.titlerow {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

h1.page {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p.lede {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.titlerow .spacer { flex: 1; }

/* --- Schaltflaechen --------------------------------------------------- */

button, select, input {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

button { cursor: pointer; }
button:hover { background: var(--hover); }

/* Hauptaktion: gefuelltes Gruen mit weisser Schrift wie "Neues Projekt" */
button.primary {
  background: var(--cw-green-dark);
  border-color: var(--cw-green-dark);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
button.primary:hover { background: var(--cw-green-darker); border-color: var(--cw-green-darker); }

:root[data-theme="dark"] button.primary { color: #0d2b0c; }

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cw-green-dark);
  outline-offset: 2px;
}

/* --- Themenfilter ----------------------------------------------------- */

.topicbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: var(--gap);
}

.topicbar h2 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.topicbar p.hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Kerngebiete: zwei grosse Umschalter (Dienstleistung / Hardware) */
.areas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.area-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.area-btn .count {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--track);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
  font-variant-numeric: tabular-nums;
}

.area-btn[aria-pressed="true"] {
  background: var(--cw-green-dark);
  border-color: var(--cw-green-dark);
  color: #fff;
}
.area-btn[aria-pressed="true"] .count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
:root[data-theme="dark"] .area-btn[aria-pressed="true"] { color: #0d2b0c; }
:root[data-theme="dark"] .area-btn[aria-pressed="true"] .count {
  background: rgba(0, 0, 0, 0.2); color: #0d2b0c;
}

.area-btn:hover { border-color: var(--cw-green); }

/* Unterthemen: Kapsel-Etiketten im Stil der Vorbild-Tags */
.topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topic-group-label {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 2px;
}

.topic-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.topic-btn .count {
  margin-left: 1px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.topic-btn:hover {
  border-color: var(--cw-green);
  background: var(--hover);
}

.topic-btn[aria-pressed="true"] {
  background: var(--block);
  border-color: var(--cw-green);
  color: var(--cw-green-dark);
  font-weight: 600;
}
.topic-btn[aria-pressed="true"] .count { color: var(--cw-green-dark); }

.topic-btn[hidden] { display: none; }

/* --- Filterzeile ------------------------------------------------------ */

form.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: var(--gap);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: flex-end;
}

.searchfield {
  position: relative;
  flex: 1 1 300px;
  min-width: 240px;
}

.searchfield input {
  width: 100%;
  padding-left: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.searchfield svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.field { display: flex; flex-direction: column; gap: 4px; }

.field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.field select, .field input { min-width: 132px; border-radius: var(--radius-sm); }
.field.narrow input { min-width: 88px; }

.checks {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.checks input { width: 15px; height: 15px; padding: 0; accent-color: var(--cw-green-dark); }

.filter-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* --- Kennzahlen ------------------------------------------------------- */

main { padding-bottom: 56px; }
/* --- Bewegung ---------------------------------------------------------
   Nur transform und opacity, 120-200 ms, ueber prefers-reduced-motion
   abschaltbar. Nicht animiert werden Hover auf bis zu 500 Karten, Schatten,
   Rahmenfarben, Hoehen, gestaffeltes Einblenden und weiches Scrollen. */

/* Laden dauert laenger als 300 ms: eine 2-px-Laufleiste statt Abdunkeln. */
.ladeleiste {
  height: 2px;
  background: var(--cw-green);
  transform-origin: 0 50%;
  animation: laufleiste 900ms ease-in-out infinite;
}

.ladeleiste[hidden] { display: none; }

@keyframes laufleiste {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Die Detailspalte kommt von rechts herein. */
.detail:not([hidden]) { animation: detail-auf 180ms ease-out; }

@keyframes detail-auf {
  from { transform: translateX(10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Inhaltswechsel in der Detailspalte. */
.detail .abschnitt { animation: inhalt-wechsel 120ms ease-out; }

@keyframes inhalt-wechsel {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Eine markierte Karte verlaesst die Tagesdurchsicht. */
.hit.geht { animation: karte-weg 150ms ease-in forwards; }

@keyframes karte-weg {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.kpi .label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Proportionale Ziffern: tabular-nums laesst grosse Zahlen locker wirken */
.kpi .value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.kpi .value.hero { font-size: 46px; color: var(--cw-green-dark); }

.kpi .note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* --- Verteilungen ---------------------------------------------------- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
  margin-bottom: 22px;
}

.card h2 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.card p.sub { margin: 0 0 14px; font-size: 12px; color: var(--text-secondary); }

/* Eine Farbe fuer alle Balken: die Kategorien haben keine natuerliche
   Ordnung, ein Verlauf wuerde die Laenge doppelt kodieren. */
.bars { display: flex; flex-direction: column; gap: 8px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(88px, 40%) 1fr auto;
  align-items: center;
  gap: 11px;
  border: 0;
  background: none;
  padding: 3px 4px;
  border-radius: 6px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
}

.bar-row:hover { background: var(--hover); }
.bar-row[aria-pressed="true"] { background: var(--block); }
.bar-row[aria-pressed="true"] .bar-label { font-weight: 600; color: var(--text-primary); }

.bar-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track { height: 10px; background: var(--track); border-radius: 2px; overflow: hidden; }

/* Abgerundetes Datenende, eckig an der Grundlinie */
.bar-fill {
  height: 100%;
  background: var(--cw-green);
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}

.bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 12px;
  min-width: 44px;
  text-align: right;
}

/* --- Ergebnisleiste --------------------------------------------------- */

.results-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.results-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.results-head .hint { font-size: 12.5px; color: var(--text-secondary); }
.results-head .spacer { flex: 1; }

.hit-title .nurpdf {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

.perpage {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.perpage select { padding: 7px 10px; }

.viewswitch { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.viewswitch button { border: 0; border-radius: 0; padding: 8px 15px; background: var(--surface); }
.viewswitch button + button { border-left: 1px solid var(--border-strong); }
.viewswitch button[aria-pressed="true"] {
  background: var(--block);
  color: var(--cw-green-dark);
  font-weight: 600;
}

/* --- Trefferkarten (Rasteransicht wie im Vorbild) --------------------- */

.hits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: var(--gap);
}

.hit {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
}

.hit:hover { background: var(--hover); }

/* Etikettenzeile oben - gruene Kapseln wie "Agil" / "Mitte" */
.tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--cw-green-dark);
  color: #fff;
  white-space: nowrap;
}

.tag.neutral { background: var(--block); color: var(--text-secondary); }
.tag.interessant { background: var(--hinweis-dark); color: #fff; }
.tag.bearbeitung { background: var(--soon); color: #fff; }
.tag.verworfen { background: var(--urgent); color: #fff; }
.hit-verworfen {
  margin-top: 8px;
  padding: 7px 9px;
  border-left: 3px solid var(--urgent);
  background: var(--urgent-bg);
  color: var(--urgent);
  font-size: 12.5px;
  font-weight: 700;
}

/* Kapselzeile der aktiven Einschraenkungen: leer nimmt sie keinen Platz. */
.aktivefilter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.aktivefilter:empty { display: none; }

.aktivefilter .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 5px;
}

.aktivefilter .tag-weg {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.aktivefilter .tag-weg:hover { background: rgba(255, 255, 255, 0.22); }

/* Der gespeicherte Standard als eine gestrichelte Pille vor den Kapseln */
.aktivefilter .standardpille {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 3px 10px;
}

/* button.linkish setzt Rahmen, Flaeche und Schriftart schon zurueck - hier
   bleiben Farbe und Gewicht im Pillen-Kontext. */
.aktivefilter .standardpille .linkish {
  font-weight: 700;
  color: var(--cw-green-dark);
}

/* Ruecknahme-Kapsel ueber der Liste */
.rueckgaengig {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--block);
  color: var(--text-secondary);
  font-size: 12.5px;
}

.rueckgaengig[hidden] { display: none; }

.rueckgaengig button {
  border: 0;
  background: var(--cw-green-dark);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* --- Ueberblick: Neuzugang je Tag ------------------------------------- */
#ueberblick[hidden] { display: none; }

.tagbalken-reihe {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-top: 14px;
}

.tagbalken {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.tagbalken > span:first-child {
  width: 100%;
  background: var(--cw-green);
  border-radius: 3px 3px 0 0;
}

.tagbalken-zahl { font-size: 11px; color: var(--text-secondary); }

/* --- Detailspalte -----------------------------------------------------
   Ohne Auswahl klappt sie zu, die Liste bekommt die Breite. Die Entscheidung
   klebt unten: drei Markierungen und der Weg zum Verfahren sind ohne Scrollen
   erreichbar. */
.detail[hidden] { display: none; }

.detail .abschnitt { margin: 0 0 16px; }

.detail .abschnitt[data-abschnitt="titel"] h3 {
  /* 19 px, nicht 27: bei Titeln bis 118 Zeichen waeren das auf 424 px sechs Zeilen. */
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.3;
}

/* Abschnittsueberschriften stechen heraus: groesser, schwerer, in
   Textfarbe statt gedaempft - der Leser springt von Block zu Block. */
.detail .abschnitt-titel {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.detail .entscheidung {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px -22px 0;
  padding: 12px 22px 14px;
  padding-right: 92px;
  border-top: 2px solid var(--cw-green);
  background: var(--surface) url(/static/cw-kachelmotiv.svg) right 10px bottom 5px / 72px auto no-repeat;
}

/* Vier gleich breite Folgeaktionen als ruhiges 2-x-2-Raster. */
.detail .handlung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail .handlung-knopf {
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  border: 1px solid var(--cw-green-dark);
  color: #fff;
  text-decoration: none;
  background: var(--cw-green-dark);
}

.detail .handlung-knopf:hover:not(:disabled) {
  background: var(--cw-green-darker);
  color: #fff;
  text-decoration: none;
}
.detail .handlung-knopf:disabled { opacity: 0.55; cursor: default; }
.detail .handlung-untertitel { font-size: 11px; font-weight: 500; }
.detail .entscheidung .simbar { margin: 0 0 0 auto; }

/* --- Schiene als Navigation -------------------------------------------
   Gruppen, zuerst eingeklappt. Eine Zahl je Wert ist eine Aussage, eine Zahl
   je Kategorie waere keine. */
.railgruppe { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.railkopf {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  /* Eigene Farbe, nicht geerbt: die Schiene traegt --rail-bg, der Rumpf
     aber --text-primary. Geerbt stuende die Ueberschrift im Hellmodus
     schwarz auf dem dunklen Grau (1,82:1). */
  color: var(--rail-tx);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 3px 0 0 var(--cw-green);
  cursor: pointer;
}

.railkopf::after {
  content: '›';
  margin-left: auto;
  font-size: 15px;
}

.railkopf[aria-expanded="true"]::after { content: '⌄'; }

.railkoerper { padding: 0 0 8px; }

.railkoerper[hidden] { display: none; }

/* --- Nutzermenue ------------------------------------------------------ */
.nutzermenue { position: relative; }

.nutzermenue-inhalt {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.nutzermenue-inhalt[hidden] { display: none; }

/* --- Filter-Auszug ----------------------------------------------------
   Eine Ueberlagerung aus dem Listenkopf, keine eigene Seite. Alle Kategorien
   eingeklappt: wenig sichtbar, alles erreichbar. */
.filterauszug {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 0 0 14px;
  max-height: 62vh;
  overflow: auto;
}

.filterauszug[hidden] { display: none; }

.auszugkopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.auszugkopf h2 { margin: 0; font-size: 15px; }

.auszugzahl {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.filterkategorie { border-bottom: 1px solid var(--border); }

.kat-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 11px 16px;
  cursor: pointer;
}

.kat-kopf:hover { background: var(--block); }

.kat-zahl {
  margin-left: auto;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
}

.kat-koerper { padding: 0 16px 14px; }

.kat-koerper[hidden] { display: none; }

.f-uebersteuert {
  font-size: 12px;
  font-weight: 700;
  color: var(--cw-green-dark);
}

.auszugfuss {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px;
}

.auszugfuss label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.auszugmeldung { font-size: 12.5px; color: var(--text-secondary); }

.scantage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.scantage input { width: 68px; }

/* Ende der Tagesdurchsicht: eine Aussage, keine leere Liste */
.endzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px;
  text-align: center;
}

.endzustand-titel {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.endzustand button {
  border: 0;
  background: var(--cw-green-dark);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* Fristbadge: Farbe UND Text, damit die Aussage nie an der Farbe haengt */
.tag.urgent { background: var(--urgent-bg); color: var(--urgent); }
.tag.soon { background: var(--soon-bg); color: var(--soon); }
.tag.none { background: var(--track); color: var(--text-muted); }

.hit-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 5px;
}

.hit-title a { color: inherit; text-decoration: none; }
.hit-title a:hover { color: var(--cw-green-dark); }

.hit-buyer { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 14px; }

/* Datumszeile in Monospace mit Pfeil, wie im Vorbild */
.daterow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.daterow .arrow { color: var(--text-muted); }
.daterow .nodate {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-muted);
}
/* Trennpunkt vor dem Hinweis - als CSS, damit der Text selbst sauber bleibt */
.daterow .nodate::before { content: '· '; }

/* Gruener Fortschrittsbalken: verbleibende Zeit bis zur Frist */
.progress {
  height: 3px;
  background: var(--track);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 14px;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--cw-green);
}

.progress span.urgent { background: var(--urgent); }
.progress span.soon { background: var(--soon); }

/* gap traegt hier die Trennung zwischen den Angaben - ohne sie liest sich
   "Volumen –CPV 72000000Score 100" als ein Wort. */
.hit-facts {
  display: flex;
  gap: 4px 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.hit-facts > span { display: inline-flex; gap: 5px; white-space: nowrap; }
.hit-facts b { color: var(--text-primary); font-weight: 600; }

/* Fusszeile der Karte, abgesetzt wie die Bearbeiterzeile im Vorbild */
.hit-foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--block);
  color: var(--cw-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex: 0 0 auto;
}

.hit-foot .platform { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-foot .spacer { flex: 1; }

/* Wie alt die Bekanntmachung ist - unten links auf der Karte. */
.hit-tage { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hit-foot a { color: var(--cw-green-dark); font-weight: 600; text-decoration: none; }
.hit-foot a:hover { text-decoration: underline; }

/* --- Tabellenansicht -------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }

table.data th, table.data td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.data th {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  position: sticky;
  top: 0;
  background: var(--surface);
}

table.data tbody tr:hover { background: var(--hover); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
table.data td.title { max-width: 400px; font-weight: 500; }
table.data a { color: var(--cw-green-dark); font-weight: 600; }

/* --- Posteingang: eine Zeile je Verfahren ------------------------------ */

.posteingang {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.posteingang .zeile {
  display: grid;
  grid-template-columns: 70px 1fr 176px 112px 96px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.posteingang .zeile:last-child { border-bottom: none; }
.posteingang .zeile:hover { background: var(--hover); }

.posteingang .zeile[aria-current="true"] {
  background: var(--hover);
  box-shadow: inset 4px 0 0 var(--cw-green);
}

.posteingang .zeile.gruppe {
  display: block;
  min-height: 0;
  padding: 6px 14px;
  background: var(--page);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: default;
}

.posteingang .gz { color: var(--text-muted); font-weight: 400; }

.fb {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 5px 4px;
  background: var(--block);
  color: var(--text-secondary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.fb small { display: block; font-size: 10.5px; font-weight: 400; }
.fb.rot { background: var(--urgent-bg); color: var(--urgent); }
.fb.orange { background: var(--soon-bg); color: var(--soon); }
.fb.grau { background: var(--block); color: var(--text-secondary); }
.fb:not(.rot):not(.orange):not(.grau) { background: transparent; color: var(--text-muted); font-weight: 400; }

.posteingang .zt { min-width: 0; }

.posteingang .t {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posteingang .t a { color: var(--cw-green-dark); text-decoration: none; }
.posteingang .t a:hover { text-decoration: underline; }

.posteingang .b {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Die Kapsel bleibt in der Spalte, statt hart abgeschnitten zu werden: ein
   langer Themenname endet mit Auslassungspunkten INNERHALB der Kapsel, das
   "+n" daneben schrumpft nie und bleibt rund. */
.posteingang .tags {
  margin: 0;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  align-items: center;
}

.posteingang .tags .tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posteingang .tags .tag.neutral { flex: none; }

.posteingang .seg {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posteingang .go {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cw-green-dark);
  text-align: right;
  white-space: nowrap;
}

.posteingang .go i { font-style: normal; color: var(--text-muted); font-weight: 400; margin: 0 5px; }
.posteingang .go a { color: inherit; text-decoration: none; }
.posteingang .go a:hover { text-decoration: underline; }

/* --- Platzhalter fuer geplante Bereiche ------------------------------- */

.baustellenseite {
  min-height: calc(100% - 8px);
  display: grid;
  place-items: center;
  padding: 48px 24px;
}

.baustellenseite[hidden] { display: none; }

.adminbereich {
  min-height: calc(100% - 8px);
  padding: 24px;
}
.adminbereich[hidden] { display: none; }
.adminbereich-karte { margin: 0 0 18px; }
.adminbereich h1 { margin: 0 0 6px; }
.adminbereich .auth-formular { width: min(420px, 100%); }

.baustelle-inhalt {
  width: min(560px, 100%);
  padding: 52px 36px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--cw-green);
  box-shadow: var(--shadow);
}

.baustelle-kicker {
  margin: 0 0 10px;
  color: var(--cw-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.baustelle-inhalt h2 { margin: 0 0 8px; font-size: 25px; }
.baustelle-inhalt p:last-child { margin: 0; color: var(--text-secondary); }

/* --- Seitenblaettern, Meldungen, Fuss --------------------------------- */

.pager {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pager button { border-radius: var(--radius-sm); }
.pager button:disabled { opacity: 0.45; cursor: default; }
.pager button:disabled:hover { background: var(--surface); }

.empty, .error {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.error { color: var(--urgent); border-color: var(--urgent); }

footer.foot {
  padding: 0 0 36px;
  color: var(--text-muted);
  font-size: 12px;
  max-width: 900px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  h1.page { font-size: 26px; }
  .kpi .value.hero { font-size: 36px; }
  .hits { grid-template-columns: 1fr; }
  .field select, .field input { min-width: 0; width: 100%; }
  .field { flex: 1 1 140px; }
  .filter-actions { margin-left: 0; width: 100%; }
}

/* --- Quellen-Status --------------------------------------------------- */

.statusbox { margin-bottom: var(--gap); }

.statushead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.statushead .spacer { flex: 1; }
.statushead h2 { margin: 0 0 2px; }
.statushead .sub { margin: 0; }

.legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }

/* Ampelpunkt. Er steht nie allein: in der Tabelle folgt immer ein
   Statuswort, und die Meldungsspalte nennt den Grund im Klartext. */
.dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.dot.gruen { background: var(--cw-green); }
.dot.gelb  { background: var(--soon); }
.dot.rot   { background: var(--urgent); }
.dot.unbekannt { background: var(--text-muted); }

table.sources td.ampel {
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
}
table.sources td.ampel span.txt { margin-left: 7px; }
table.sources td.ampel.gruen span.txt { color: var(--cw-green-dark); }
table.sources td.ampel.gelb span.txt  { color: var(--soon); }
table.sources td.ampel.rot span.txt   { color: var(--urgent); }


table.sources tr.primary-row {
  background: var(--hover);
}
table.sources tr.primary-row td { font-weight: 500; }

/* Weitere Hauptquellen (TED usw.) - dieselbe Ebene wie der Bundesservice,
   deshalb ebenfalls hervorgehoben, nur etwas zurueckhaltender. */
table.sources tr.main-row { background: var(--surface-2); }
table.sources tr.main-row td { font-weight: 500; }

/* Unterportale: eingerueckt und kleiner. Sie sind Herkunftsangaben innerhalb
   einer Hauptquelle, keine eigenen Quellen - das muss man sehen. */
table.sources tr.sub-row td { font-size: 12px; }
table.sources tr.sub-row td.num,
table.sources tr.sub-row td.meldung { color: var(--text-secondary); }

table.sources td.quelle { min-width: 240px; }
table.sources td.quelle a { color: var(--cw-green-dark); font-weight: 600; text-decoration: none; }
table.sources td.quelle a:hover { text-decoration: underline; }
table.sources td.quelle .qplain { font-weight: 600; color: var(--text-secondary); }
table.sources td.quelle .host {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Einrueckung mit Linie, damit die Zugehoerigkeit auch bei langen Listen
   sichtbar bleibt - ein reiner Abstand geht beim Blaettern verloren. */
table.sources td.quelle.eingerueckt {
  padding-left: 30px;
  position: relative;
}
table.sources td.quelle.eingerueckt::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

table.sources td.quelle { display: table-cell; }
table.sources .qname { display: inline-block; vertical-align: top; }

/* Auf-/Zuklappen der Unterportale */
table.sources button.twisty {
  border: none;
  background: none;
  padding: 0 6px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1;
  vertical-align: top;
  margin-top: 2px;
  cursor: pointer;
}
table.sources button.twisty:hover { background: none; color: var(--cw-green-dark); }
table.sources td.rolle { font-size: 11.5px; color: var(--text-secondary); max-width: 300px; }
table.sources td.meldung { font-size: 12px; color: var(--text-secondary); min-width: 240px; }

.statusnote { margin: 14px 0 0; font-size: 11.5px; }

/* --- Hauptnavigation -------------------------------------------------- */

.mainnav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  background: var(--page);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.mainnav button {
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.mainnav button:hover { background: var(--hover); color: var(--text-primary); }

.mainnav button[aria-selected="true"] {
  background: var(--surface);
  color: var(--cw-green-dark);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* --- Filterseite ------------------------------------------------------ */

.pagetitle {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.filterhead {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--gap);
}

.filterhead .spacer { flex: 1; }
.filterhead .sub { margin: 0; max-width: 560px; }

/* Trefferzahl als Leitzahl - zeigt sofort, was die Filter bewirken */
.filtercount { text-align: right; flex: 0 0 auto; }
.filtercount .fc-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--cw-green-dark);
  letter-spacing: -0.02em;
}
.filtercount .fc-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.filtercount .fc-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.filteractions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--gap);
  padding: 14px 18px;
}
.filteractions .spacer { flex: 1; }

/* Eine Kategorie = eine Karte. Reihenfolge nach Wirkung. */
.fcat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: var(--gap);
}

.fcat > h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
}

.fcat > p.kat-hint {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  max-width: 760px;
}

.frow {
  display: grid;
  grid-template-columns: 46px minmax(200px, 1.4fr) minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.frow:first-of-type { border-top: 0; }
.frow.inaktiv { opacity: 0.62; }
.frow.inaktiv:hover { opacity: 1; }

/* Schiebeschalter zum Ab- und Anschalten des Filters */
.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--track);
  cursor: pointer;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .14s;
}
.toggle[aria-checked="true"] { background: var(--cw-green); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); }
.toggle:hover { filter: brightness(0.97); }

.frow .f-label { font-size: 13.5px; font-weight: 600; }
.frow .f-help {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}

.frow .f-input { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.frow .f-input input,
.frow .f-input select { width: 100%; max-width: 260px; }
.frow .f-input .einheit { font-size: 12px; color: var(--text-muted); }

/* Mehrfachauswahl als Etiketten - wie im Portfolio-Filter */
.chipbox { display: flex; gap: 6px; flex-wrap: wrap; }
.chipbox button {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.chipbox button[aria-pressed="true"] {
  background: var(--block);
  border-color: var(--cw-green);
  color: var(--cw-green-dark);
  font-weight: 600;
}

/* Wirkungsanzeige: was passiert beim Abschalten */
.f-effect {
  font-size: 11.5px;
  text-align: right;
  white-space: nowrap;
  min-width: 128px;
  color: var(--text-muted);
}
.f-effect b {
  display: block;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.f-effect.stark b { color: var(--cw-green-dark); }

/* --- Markierungen auf der Trefferkarte -------------------------------- */

.markbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.markbar button {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
}
.markbar button:hover { border-color: var(--cw-green); background: var(--hover); }
.markbar button[aria-pressed="true"] {
  background: var(--cw-green-dark);
  border-color: var(--cw-green-dark);
  color: #fff;
  font-weight: 600;
}
:root[data-theme="dark"] .markbar button[aria-pressed="true"] { color: #0d2b0c; }

.markbar .mark-owner {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-left: 2px;
}
.markbar .mark-owner b { color: var(--text-primary); }

/* Statusentscheidung prominent direkt unter der Frist. */
.detail .statusbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.detail .statusbar button {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 0;
  border: 1px solid var(--cw-green-dark);
  background: var(--cw-green-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.detail .statusbar button:hover { background: var(--cw-green-darker); color: #fff; }
.detail .statusbar button[aria-pressed="true"] {
  background: var(--cw-green-darker);
  border-color: var(--cw-green-darker);
  box-shadow: inset 0 0 0 2px var(--surface);
}
.detail .statusbar .mark-owner,
.detail .statusbar .arbeitsteam,
.detail .statusbar .verworfen-hinweis,
.detail .statusbar .verwerfen-form {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 5px 0 1px;
}
.detail .statusbar .verworfen-hinweis {
  border-left: 3px solid var(--urgent);
  padding: 7px 9px;
  background: var(--urgent-bg);
  color: var(--urgent);
  font-weight: 700;
}
.detail .statusbar .verwerfen-form label { display: flex; flex-direction: column; gap: 4px; }
.detail .statusbar .verwerfen-form textarea { min-height: 70px; resize: vertical; }
.detail .statusbar select { min-height: 38px; min-width: 0; }

/* Markierte Karten heben sich ab, ohne zu schreien */
.hit.mark-interessant { border-left: 3px solid var(--cw-green); }
.hit.mark-bearbeitung { border-left: 3px solid var(--soon); }
.hit.mark-verworfen { opacity: 0.55; }
.hit.mark-verworfen:hover { opacity: 1; }

/* Textauszug auf der Karte. Bewusst kleiner und ruhiger als der Titel - er
   dient dem Überfliegen, nicht dem Lesen. */
.hit-text {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Herkunft des Auszugs, falls er nicht aus der Hauptbeschreibung kommt */
.hit-text .textquelle {
  font-weight: 600;
  color: var(--text-muted);
}

/* --- Account Manager und Decidalo-Ressourcen ------------------------- */
/* Eine Zeile unter der Markierungsleiste: links wer den Kunden betreut,
   rechts wie viele Profile passen. Ohne Trennlinie, damit sie als Fortsetzung
   der Markierungsleiste gelesen wird und nicht als eigener Block. */

.simbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.simbar .am {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cw-green-dark);
  text-decoration: none;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.simbar a.am:hover {
  border-color: var(--cw-green);
  background: var(--hover);
  text-decoration: none;
}

/* Kuerzel des AM als kleiner Kreis - dieselbe Sprache wie das
   Auftraggeber-Kuerzel in der Fusszeile. */
.simbar .am-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cw-green-dark);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.2px;
}
:root[data-theme="dark"] .simbar .am-dot { color: #0d2b0c; }

/* Fehlende Zuordnung ist eine sachliche Feststellung, kein Fehler -
   deshalb grau und ohne Rahmen, nicht rot. */
.am.none {
  font-weight: 500;
  color: var(--text-muted);
  border-color: transparent;
  background: none;
  font-style: italic;
}

.simbar button.decidalo {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
}
.simbar button.decidalo:hover:not(:disabled) {
  border-color: var(--cw-green);
  background: var(--hover);
  color: var(--cw-green-dark);
}
.simbar button.decidalo:disabled {
  opacity: 0.45;
  cursor: default;
  font-weight: 500;
}

/* Zahl in der Tabellenspalte - sieht aus wie ein Link, ist ein Knopf */
button.linkish {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cw-green-dark);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
button.linkish:hover { background: none; color: var(--cw-green-darker); }

/* --- Fenster fuer die Ressourcenliste -------------------------------- */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(17, 21, 17, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  z-index: 50;
  overflow-y: auto;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(17, 21, 17, 0.22);
  width: min(720px, 100%);
  padding: 18px 20px 20px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.modal-head h3 {
  margin: 0;
  font-size: 16px;
  flex: 1;
  color: var(--cw-green-dark);
}
.modal-x {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.modal-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.modal-note {
  margin: 12px 0 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* Hinweis auf die Simulation - deutlich sichtbar, damit niemand die
   Testprofile fuer echte Mitarbeiterdaten haelt. */
.modal-sim {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 2px solid var(--border-strong);
  padding: 6px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.reslist {
  list-style: none;
  counter-reset: res;
  margin: 0;
  padding: 0;
}
.reslist li {
  counter-increment: res;
  border-top: 1px solid var(--border);
  padding: 12px 0 12px 30px;
  position: relative;
}
.reslist li::before {
  content: counter(res);
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  width: 22px;
  text-align: right;
}

.res-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.res-head b { font-size: 13.5px; }
.res-role { font-size: 11.5px; color: var(--text-secondary); }

.res-meta { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0 2px; }

.res-zert, .res-skill {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  font-size: 12px;
}
.res-zert li, .res-skill li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  border: none;
  counter-increment: none;
}
.res-zert li::before, .res-skill li::before { content: none; }
.res-zert li > span:first-child, .res-skill li > span:first-child { flex: 1; }

.zert-ok { color: var(--cw-green-dark); font-size: 11px; white-space: nowrap; }
/* Abgelaufene Zertifikate zaehlen bei der Empfehlung mit, werden aber rot
   ausgewiesen - fuer die Rezertifizierungsplanung ist das der Hinweis. */
.zert-alt { color: var(--urgent); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Skill-Stufe als fuenf Punkte - schneller lesbar als eine Zahl */
.lvl { display: inline-flex; gap: 2px; }
.lvl i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--track);
  display: inline-block;
}
.lvl i.on { background: var(--cw-green); }

@media (max-width: 860px) {
  .frow { grid-template-columns: 46px 1fr; }
  .frow .f-input, .frow .f-effect { grid-column: 2; text-align: left; }
  .mainnav { width: 100%; margin: 8px 0 0; justify-content: space-between; }
  .modal-back { padding: 2vh 8px 8px; }
}

/* --- Dreispaltiges Geruest (Anstrich "Terrazzo CW") -------------------
 *
 * Schiene links, Trefferliste in der Mitte, Verfahren rechts. Die Regeln
 * stammen aus dem Struktur-CSS des Entwurfs (docs/entwuerfe/
 * 2026-09-17-anstriche.html, Block "STRUKTUR"); die Klassennamen des
 * Entwurfs sind auf die vorhandenen Namen dieser Datei abgebildet:
 *   Entwurf .treffer -> .hit      Entwurf .chip  -> .tag
 *   Entwurf .knopf   -> button    Entwurf .ag    -> .hit-buyer
 * Neu sind nur die Namen, fuer die es hier keine Entsprechung gab:
 * .app, .rumpf, .rail, .liste, .listenkopf, .detail, .fusszeile, .modus.
 */

.app {
  display: flex;
  flex-direction: column;
  /* dvh statt vh: auf Notebooks mit eingeblendeter Browserleiste ist vh zu hoch,
     und der Rahmen schoebe die Fusszeile unter den sichtbaren Bereich. */
  height: 100dvh;
  overflow: hidden;
}

.app .rumpf {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Kopfzeile: Wortmarke, Modus-Umschalter, Bearbeitername */
.app .kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  background: var(--surface);
  border-bottom: 2px solid var(--rail-bg);
}

.app .kopf img.logo { height: 26px; width: auto; display: block; }
.app .kopf .produkt { font-weight: 700; font-size: 14px; }
.app .kopf .mini { font-size: 12px; color: var(--text-secondary); }
.app .kopf .spacer { flex: 1; }

.modus {
  display: flex;
  gap: 1px;
  border: 1px solid var(--border-strong);
}

.modus button {
  border: none;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 17px;
  border-radius: 0;
  letter-spacing: 0.04em;
}

.modus button[aria-pressed="true"] {
  background: var(--cw-green-dark);
  color: #fff;
  font-weight: 700;
}

/* Schiene: dunkles Markengrau, Weiss darauf 11,56:1 */
.rail {
  width: var(--rail-w);
  flex: none;
  background: var(--rail-bg);
  padding: 16px 0;
  overflow: auto;
}

.rail h4 {
  margin: 20px 16px 6px;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 11.5px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rail-tx-2);
  font-weight: 700;
}

.rail h4:first-child { margin-top: 0; }

.rail button.rail-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 16px;
  color: var(--rail-tx);
  background: none;
  border: none;
  border-radius: 0;
  font-size: 12.5px;
  margin-bottom: 1px;
}

.rail button.rail-eintrag:hover { background: var(--rail-hover); color: #fff; }

.rail button.rail-eintrag[aria-pressed="true"] {
  background: var(--cw-green-dark);
  color: #fff;
  font-weight: 650;
}

.rail .z {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--rail-tx-2);
  font-variant-numeric: tabular-nums;
}

.rail button.rail-eintrag[aria-pressed="true"] .z { color: #fff; }

.rail button.rail-untergruppe {
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 8px;
}
.rail button.rail-untergruppe::before {
  content: '›';
  width: 10px;
  font-size: 15px;
  line-height: 1;
}
.rail button.rail-untergruppe[aria-expanded="true"]::before { content: '⌄'; }
.rail button.rail-eingerueckt { padding-left: 38px; font-size: 12px; }

.rail .neu {
  margin-left: auto;
  background: var(--cw-green);
  color: #0d2b0c;            /* 5,10:1 auf dem Firmengruen */
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
}

/* Mittelspalte */
.liste {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--page);
}

.listenkopf {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--page);
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--border);
}

.listentitel {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Aussagezeile: Titel und Kennzahlen in einer Zeile (Spec 3.2) */
.aussage {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.aussage .listentitel { margin: 0; }
.aussage .hint { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* Der Fristschalter sah als Teil der Fristlage wie ein Link aus; die Regel
   zieht mit ihm in die Aussagezeile um. */
.aussage .hint .linklike {
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--cw-green-dark);
  text-decoration: underline;
  cursor: pointer;
}

.aussage .hint .linklike:hover { background: none; }

/* Inhalt der Mittelspalte: ein Rand fuer alles, was darin steht */
.listeninhalt { padding: 16px 18px 24px; }

.listenkopf .listenwerkzeuge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.listenkopf .hint { margin: 0 0 8px; }

/* In der Liste stehen die Karten untereinander, nicht im Raster */
.liste .hits {
  grid-template-columns: 1fr;
  gap: 12px;
}

.liste .hit { cursor: pointer; }
.liste .hit[aria-current="true"] {
  border-color: var(--rail-bg);
  box-shadow: var(--shadow-an);
}

/* Detailspalte: das Kachelmotiv der Marke unten rechts, unaufdringlich */
.detail {
  width: var(--detail-w);
  flex: none;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: auto;
  /* Unten kein Innenabstand: die Entscheidungsleiste klebt mit sticky an der
     Unterkante, und sticky rechnet mit der Innenkante des Rahmens. Mit 70 px
     Abstand stand die Leiste 70 px zu hoch, und der Inhalt lief darunter durch. */
  padding: 20px 22px 0;
}

.detail .kicker {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hinweis-dark);
  font-weight: 700;
}

.detail h3 {
  margin: 0 0 4px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.22;
}

.detail .hit-buyer { margin: 0 0 15px; font-size: 13px; }

.detail .leerhinweis { color: var(--text-muted); font-size: 13px; }

.fristbox {
  background: var(--urgent-bg);
  border: 1px solid var(--urgent-border);
  padding: 11px 13px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.fristbox .gross {
  font-size: 32px;
  font-weight: 700;
  color: var(--urgent);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fristbox.soon { background: var(--soon-bg); border-color: var(--border); }
.fristbox.soon .gross { color: var(--soon); }
.fristbox.ruhig { background: var(--block); border-color: var(--border); }
.fristbox.ruhig .gross { color: var(--text-secondary); }

.fristbox .txt { font-size: 12.5px; color: var(--text-secondary); }
.fristbox .txt b { color: var(--text-primary); display: block; }

.detail dl {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px 12px;
  margin: 0;
  font-size: 12.5px;
}

.detail dt {
  color: var(--text-muted);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 1px;
}

.detail dd { margin: 0; color: var(--text-primary); }
.detail dd.leer { color: var(--text-muted); }

/* Einzelheiten: Lose, Kontakte, Kriterien - dieselbe Beschreibungsliste,
   in Bloecken mit eigener Ueberschrift. Nichts wird abgeschnitten, der
   Aufklapper "mehr" holt den Rest. */
.detail .langtext { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.detail .langtext .mehr {
  border: 0;
  padding: 0;
  background: none;
  color: var(--cw-green-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.detail .langtext .mehr:hover { text-decoration: underline; }
.detail .textquelle { margin: 8px 0 4px; font-size: 11.5px; color: var(--text-muted); }
.detail .fragefrist { display: block; margin-top: 3px; }
.detail .los, .detail .kontakt {
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
}
.detail .los:first-of-type, .detail .kontakt:first-of-type { border-top: 0; padding-top: 0; }
.detail .los h5, .detail .kriterien h5 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
}
.detail .kriterien h5 { margin-top: 12px; }
.detail .mehr-lose {
  margin: 6px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cw-green-dark);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.detail .kontakt b { display: block; font-size: 13px; }
.detail .kontakt .rollen { display: block; margin: 2px 0 8px; font-size: 11.5px; color: var(--text-muted); }
.detail .kontakt dl { grid-template-columns: 132px 1fr; gap: 6px 10px; }
.detail .kriterien ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.detail .kriterien li { margin-bottom: 6px; }
.detail .kriterien li b { display: block; }
.detail .kriterien .langtext { margin: 2px 0 4px; font-size: 12.5px; }

.abschnitt {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

.abschnitt h4 {
  margin: 0 0 9px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

/* Belegpfad: warum dieser Treffer ein Treffer ist */
.beleg {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 5px solid var(--cw-green);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.beleg b { color: var(--cw-green-dark); }

.kette {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
}

.kette span {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  color: var(--text-secondary);
  background: var(--surface);
}

.kette em { color: var(--text-muted); font-style: normal; }

.reihe { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

/* Fusszeile: der Urheberhinweis rechts bleibt bewusst gut sichtbar. */
.fusszeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 20px;
  background: var(--block);
  border-top: 1px solid var(--border-strong);
  font-size: 9.5px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

#fussStand {
  color: var(--cw-green-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}


/* --- Technologie-Suche ------------------------------------------------ */

.techzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.techzeile .techfeld { flex: 1; min-width: 220px; margin: 0; }

/* Der Schalter steht immer sichtbar neben der Eingabe, nicht in einem Menue:
   die Nachvollziehbarkeit ist der Vorsprung gegenueber dem gekauften Portal. */
.schalter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.techvorschlaege {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  max-height: 320px;
  overflow: auto;
}

.techvorschlag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  padding: 8px 12px;
  font-size: 13px;
}

.techvorschlag:hover { background: var(--hover); }
.techvorschlag .tv-label { font-weight: 700; }
.techvorschlag .tv-gruppe { font-size: 11.5px; color: var(--text-muted); }

/* Die Zahl steht vor dem Klick - das ist der Punkt dieser Liste. */
.techvorschlag .tv-zahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-secondary);
}

.tags.techkapseln { margin: -6px 0 12px; }

.kapsel-tech {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
}

.kapsel-tech:hover { border-color: var(--cw-green-dark); color: var(--cw-green-dark); }

/* Belegkapsel: "woertlich" oder "ueber Nachbarbegriff" - der Grund steht
   im Titel, der ganze Pfad im Detailbereich. */
.kapsel-beleg { cursor: help; }

/* --- Kopf: Bearbeitername --------------------------------------------- */

/* Der Name steht im Kopf, nicht in einem Abfragefenster je Markierung:
   markiert wird gemeinsam, und die Liste zeigt, wer woran sitzt. */
.bearbeiterfeld {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.bearbeiterfeld input { width: 130px; padding: 6px 9px; font-size: 12.5px; }

/* --- Anmeldung und Administration --------------------------------------- */
.auth-seite {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--page);
}
.auth-karte {
  width: min(100%, 430px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  padding: 30px;
}
.auth-logo { width: 150px; height: auto; }
.auth-produkt { margin: 18px 0 4px; color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.auth-karte h1 { margin: 0 0 10px; font-size: 26px; }
.auth-formular,
.admin-formular { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.auth-formular { flex-direction: column; align-items: stretch; margin-top: 20px; }
.auth-formular label,
.admin-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.auth-formular input { min-height: 38px; }
.auth-fehler { min-height: 20px; margin: 0; color: var(--urgent); font-size: 13px; }
.admin-inhalt { max-width: 1180px; margin: 24px auto 64px; padding: 0 20px; }
.admin-inhalt .card { margin-bottom: 18px; }
.admin-kopf h1 { margin: 0 0 5px; }
.einmalpasswort { margin-top: 16px; padding: 14px; border-left: 4px solid var(--cw-green-dark); background: var(--hover); }
.einmalpasswort code { display: inline-block; margin: 5px 0; padding: 4px 7px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.einmalpasswort p { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); }

/* --- Umschaltung "Zuschläge" (Spec 2026-09-24, Abschnitt 6) ---------------
   Zeilenliste mit drei Spalten: Datum | Verfahren mit Gewinner, Auftraggeber
   und Angaben | Wert mit Link. Neben der offenen Detailspalte bleiben bei
   1440 px nur 434 px Mittelspalte; fünf feste Spalten ließen dem Titel keine
   Breite (Review-Runde 3).

   Verfahrensliste und Zuschläge haben je eine eigene Schiene und Detailspalte.
   Sichtbar ist nur die der gezeigten Seite; gezeichnet werden beide jederzeit.
   Eine späte Antwort der einen Ansicht landet so in deren eigenen, gerade
   unsichtbaren Knoten (Review-Runde 2). */

body[data-seite="zuschlaege"] #rail,
body[data-seite="zuschlaege"] #detail { display: none; }

body:not([data-seite="zuschlaege"]) #zuschlagRail,
body:not([data-seite="zuschlaege"]) #zuschlagDetail { display: none; }

.zuschlagseite[hidden] { display: none; }

/* Beschriftungen im Zuschlagsdetail sind Einzelwoerter ("RAHMENHÖCHSTWERT",
   rund 137 px) - sie brechen nicht um und liefen in 104 px in den Wert. */
#zuschlagDetail dl {
  grid-template-columns: 148px 1fr;
}

.zuschlagfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 12px 14px;
  margin-bottom: var(--gap);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.zuschlagfilter .zfeld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

.zuschlagfilter .zfeld input,
.zuschlagfilter .zfeld select { min-width: 150px; }

/* Eine Einstellung ist erst grün, wenn sie tatsächlich in der Trefferabfrage
   wirkt. So bleiben ungespeicherte Texte und laufende Filter unterscheidbar. */
.zuschlagfilter .zfeld.zfilter-feld-aktiv > span,
.zuschlagfilter .schalter.zfilter-feld-aktiv { color: var(--cw-green-dark); font-weight: 700; }
.zuschlagfilter .zfeld .zfilter-aktiv {
  border-color: var(--cw-green-dark);
  background: var(--cw-green-dark);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--cw-green-darker);
}
.zuschlagfilter .zfeld select.zfilter-aktiv option { background: var(--surface); color: var(--text-primary); }
.zuschlagfilter .schalter .zfilter-aktiv { accent-color: var(--cw-green-dark); }

/* Vorn Suchbegriff, Gewinner, Zeitraum; der Rest aufklappbar darunter */
.zfilter-haupt,
.zfilter-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  flex-basis: 100%;
}

.zuschlagfilter .zfeld-q { flex: 1 1 240px; }
.zuschlagfilter .zfeld-q input { width: 100%; }
.zuschlagfilter .zfeld-von input,
.zuschlagfilter .zfeld-bis input { min-width: 0; }

.zeitraum-schnell,
.zuschlag-vorwahl { display: flex; flex-wrap: wrap; gap: 4px; }
.zeitraum-schnell button,
.zuschlag-vorwahl button {
  padding: 5px 9px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
}
.zeitraum-schnell button[aria-pressed="true"],
.zuschlag-vorwahl button[aria-pressed="true"] {
  background: var(--cw-green-dark);
  border-color: var(--cw-green-dark);
  color: #fff;
}

.zuschlag-schnellfilter {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 0;
}
.zuschlag-schnellfilter-titel {
  margin: 0;
  color: var(--cw-green-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.zuschlag-schnellfilter-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.zuschlag-schnellfilter-gruppe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.zuschlag-schnellfilter-gruppe > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.zfilter-weitere { flex-basis: 100%; }
.zfilter-weitere + .zfilter-weitere { margin-top: -3px; }
.zfilter-weitere summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cw-green-dark);
}
.zfilter-weitere[open] summary { margin-bottom: 10px; }

.zuschlagfilter .hint { flex-basis: 100%; margin: 0; }

.zuschlag-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.zuschlag-werkzeuge .knopf { font-size: 12.5px; }

.wiedervorlage-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.wiedervorlage-formular .zfeld { min-width: 170px; }
.wiedervorlage-formular textarea { min-height: 38px; min-width: 220px; }
.wiedervorlage-formular .sekundaer { background: var(--surface); color: var(--text-primary); }

/* "weitere 7" unter den Gewinnern: leiser als ein Eintrag */
.rail button.rail-mehr {
  font-size: 12.5px;
  color: var(--rail-tx-2);
  padding-left: 16px;
}

.zuschlagliste {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.zuschlagliste .zeile {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.zuschlagliste .zeile:last-child { border-bottom: none; }
.zuschlagliste .zeile:hover { background: var(--hover); }

.zuschlagliste .zeile[aria-current="true"] {
  background: var(--hover);
  box-shadow: inset 4px 0 0 var(--cw-green);
}

.zuschlagliste .zd {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.zuschlagliste .zt { min-width: 0; }

.zuschlagliste .t {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuschlagliste .b,
.zuschlagliste .zg {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuschlagliste .zg { color: var(--text-primary); font-weight: 600; }
.zuschlagliste .zg small { font-weight: 400; color: var(--text-secondary); }

.zuschlagliste .zw {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zuschlagliste .go { display: block; margin-top: 2px; }
.zuschlagliste .go a { color: var(--cw-green-dark); text-decoration: none; font-size: 12.5px; }
.zuschlagliste .go a:hover { text-decoration: underline; }

.zuschlagliste .zw small {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
}