/* cf-uikit.css — die vier Bausteine, die ab jetzt UEBERALL dieselben sind (2026-07-31).
 *
 * Der Operator hat vier Dinge verlangt, die kein Bereich fuer sich allein loesen darf, weil sie
 * sonst in jedem Bereich anders aussehen und anders funktionieren:
 *
 *   1. ERKLAER-ZEICHEN — ein Mini-SVG an jedem Fachbegriff. "Der Nutzer wird nicht alles sofort
 *      verstehen." Ein Fragezeichen als TEXT faellt durch jeden Kontrast-Test und sieht in jeder
 *      Schriftgroesse anders aus; deshalb ein Symbol aus dem Sprite.
 *   2. DOPPELTE BESTAETIGUNG — vor der Aktion ein Blatt, das sagt was passiert, was es ausloest
 *      und was danach dran ist; nach der Aktion ein Blatt, das sagt was passiert IST und wohin
 *      es weitergeht. Zwei Blaetter, nicht eins.
 *   3. EIN FILTER — nicht sechs. Dieselbe Leiste in Journal, Fristen, Vorgaengen und Katalog:
 *      Volltext, Facetten, Zeitraum, Sortierung, Trefferzaehler, Zuruecksetzen. Eine Zeile hoch,
 *      solange nichts gewaehlt ist — der Platz gehoert dem Inhalt.
 *   4. HERKUNFTS-MARKE — Mensch, KI oder System an jedem Satz, der irgendwo entstanden ist.
 *      Geschaltet wird sie zentral im Regelwerk (Regel 1), nicht hier.
 *
 * Praefix cfu-, damit nichts aus dem Bestand still ueberschrieben wird. Alle Farben aus den
 * Theme-Variablen — beide Themes tragen ohne Sonderfall, EIN Akzent (--lime), nie zwei. */

/* =============================================================== 1. Erklaer-Zeichen */
.cfu-i{display:inline-grid;place-items:center;width:17px;height:17px;flex:none;padding:0;margin:0 0 0 5px;
  border:0;border-radius:50%;background:var(--surface-3);color:var(--ink-faint);cursor:help;
  vertical-align:1px;transition:.15s}
.cfu-i .ic{width:11px;height:11px}
.cfu-i:hover,.cfu-i[aria-expanded="true"]{background:var(--lime);color:var(--on-lime)}
/* In einer Tabellen-Kopfzeile sitzt das Zeichen auf Grossbuchstaben-Hoehe, nicht auf Zeilenmitte. */
th .cfu-i{vertical-align:0}

.cfu-pop{position:fixed;z-index:210;width:min(330px,calc(100vw - 24px));padding:16px 18px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm,12px);
  box-shadow:var(--shadow-lg);font-size:.86rem;line-height:1.55;color:var(--ink-soft);
  opacity:0;transform:translateY(-4px);transition:.14s var(--ease);pointer-events:none}
.cfu-pop.open{opacity:1;transform:none;pointer-events:auto}
.cfu-pop b{display:block;color:var(--ink);font-size:.92rem;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.cfu-pop .cfu-pop-mehr{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-faint)}
.cfu-pop .cfu-pop-mehr i{font-style:normal;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;display:block;margin-bottom:3px}

/* =============================================================== 2. Doppelte Bestaetigung */
.cfu-scrim{position:fixed;inset:0;z-index:200;background:rgba(10,11,13,.58);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:.18s}
.cfu-scrim.open{opacity:1;pointer-events:auto}
.cfu-dlg{width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg,18px);box-shadow:var(--shadow-lg);
  transform:scale(.965) translateY(8px);transition:.2s var(--ease)}
.cfu-scrim.open .cfu-dlg{transform:none}
.cfu-dlg-h{display:flex;gap:14px;align-items:flex-start;padding:24px 26px 0}
.cfu-dlg-ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--info-bg);color:var(--info)}
.cfu-dlg-ic .ic{width:22px;height:22px}
.cfu-dlg.t-gefahr .cfu-dlg-ic{background:var(--bad-bg);color:var(--bad)}
.cfu-dlg.t-gut .cfu-dlg-ic{background:var(--good-bg);color:var(--good)}
.cfu-dlg-h h3{font-family:var(--disp);font-size:1.2rem;font-weight:900;letter-spacing:-.02em;
  line-height:1.25;margin:0;text-wrap:balance}
.cfu-dlg-h .cfu-dlg-sub{color:var(--ink-soft);font-size:.88rem;line-height:1.5;margin-top:5px}
.cfu-dlg-b{padding:20px 26px 0;display:flex;flex-direction:column;gap:12px}

/* Die drei Schritte. Nummer als Flaeche, damit die Reihenfolge auch ohne Lesen ankommt. */
.cfu-step{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm,12px);
  background:var(--surface-2);border:1px solid var(--line)}
.cfu-step-n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:var(--on-lime);font-size:.72rem;font-weight:900;margin-top:1px}
.cfu-step-t{min-width:0;flex:1}
.cfu-step-t b{display:block;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:4px}
.cfu-step-t p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink)}
.cfu-step-t ul{margin:4px 0 0;padding-left:17px;font-size:.88rem;line-height:1.55;color:var(--ink)}
.cfu-step-t li{margin-top:3px}
.cfu-step.s-gefahr{background:var(--bad-bg);border-color:transparent}
.cfu-step.s-gefahr .cfu-step-n{background:var(--bad);color:#fff}
.cfu-step.s-gefahr .cfu-step-t p{color:var(--bad)}

/* Rueckweg: die einzige Zeile, die der Operator wirklich sucht, bevor er drueckt. */
.cfu-rueck{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;line-height:1.5;
  color:var(--ink-faint);padding:0 2px}
.cfu-rueck .ic{width:15px;height:15px;flex:none;margin-top:2px}
.cfu-rueck.r-nein{color:var(--bad)}

.cfu-dlg-f{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:20px 26px 24px}
.cfu-dlg-f .cfu-links{margin-right:auto;font-size:.8rem;color:var(--ink-faint);align-self:center}
@media(max-width:520px){.cfu-dlg-h,.cfu-dlg-b,.cfu-dlg-f{padding-left:18px;padding-right:18px}
  .cfu-dlg-f .btn{flex:1;justify-content:center}}

/* =============================================================== 3. Der EINE Filter */
.cfu-fl{display:flex;flex-direction:column;gap:0;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm,12px)}
.cfu-fl-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 10px 9px 12px}
.cfu-fl-such{display:flex;align-items:center;gap:8px;flex:1;min-width:190px}
.cfu-fl-such .ic{width:16px;height:16px;color:var(--ink-faint);flex:none}
.cfu-fl-such input{flex:1;min-width:0;height:32px;border:0;background:none;color:var(--ink);
  font-family:inherit;font-size:.9rem}
.cfu-fl-such input:focus{outline:none}
.cfu-fl-such input::placeholder{color:var(--ink-faint)}

.cfu-fac{position:relative}
.cfu-fac-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
.cfu-fac-b .ic{width:14px;height:14px}
.cfu-fac-b:hover{border-color:var(--line-strong);color:var(--ink)}
.cfu-fac-b.an{border-color:var(--lime);background:var(--lime);color:var(--on-lime)}
.cfu-fac-b .zahl{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--surface);color:var(--ink);font-size:.68rem;font-weight:900}
.cfu-fac-b .kar{width:9px;height:9px;opacity:.6}

.cfu-fac-p{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:max(220px,100%);
  max-height:320px;overflow-y:auto;padding:7px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-sm,12px);box-shadow:var(--shadow-lg);
  display:none}
.cfu-fac.auf .cfu-fac-p{display:block}
/* Am rechten Rand der Leiste klappt das Blatt nach LINKS auf — sonst steht es halb ausserhalb. */
.cfu-fac.li .cfu-fac-p{left:auto;right:0}
.cfu-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:0;border-radius:8px;
  background:none;color:var(--ink);font-family:inherit;font-size:.86rem;text-align:left;cursor:pointer}
.cfu-opt:hover{background:var(--surface-2)}
.cfu-opt .box{width:16px;height:16px;flex:none;border-radius:5px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;color:transparent}
.cfu-opt .box .ic{width:11px;height:11px}
.cfu-opt.an .box{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.cfu-opt .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfu-opt .n{font-size:.76rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.cfu-fac-p .trenn{height:1px;background:var(--line);margin:6px 4px}
.cfu-fac-p .zeit-eig{display:flex;gap:7px;padding:4px 5px 6px}
.cfu-fac-p .zeit-eig input{flex:1;min-width:0;height:32px;padding:0 8px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:.82rem}
.cfu-fac-p .zeit-eig input:focus{outline:none;border-color:var(--lime)}

.cfu-fl-rechts{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:4px}
.cfu-fl-zahl{font-size:.8rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cfu-fl-zahl b{color:var(--ink);font-weight:800}
.cfu-fl-weg{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:8px;
  border:1px solid var(--line);background:none;color:var(--ink-soft);font-family:inherit;
  font-size:.79rem;font-weight:700;cursor:pointer}
.cfu-fl-weg .ic{width:12px;height:12px}
.cfu-fl-weg:hover{border-color:var(--bad);color:var(--bad)}

/* Zweite Zeile: NUR wenn etwas gewaehlt ist. Solange nichts gewaehlt ist, ist der Filter eine
   Zeile hoch — der Operator wollte ausdruecklich keinen Platz an eine leere Leiste verlieren. */
.cfu-fl-akt{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;align-items:center}
.cfu-fl-akt .lbl{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:2px}
.cfu-wert{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:20px;
  background:var(--surface-3);color:var(--ink);font-size:.78rem;font-weight:700}
.cfu-wert i{font-style:normal;color:var(--ink-faint);font-weight:800;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.06em}
.cfu-wert button{width:16px;height:16px;border:0;border-radius:50%;background:var(--surface);
  color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;padding:0}
.cfu-wert button .ic{width:9px;height:9px}
.cfu-wert button:hover{background:var(--bad);color:#fff}

/* Leerer Treffer: ein Filter, der nichts findet, muss sagen WELCHER Wert es war. */
.cfu-leer{padding:34px 24px;text-align:center;color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.cfu-leer .ic{width:26px;height:26px;color:var(--ink-faint);margin-bottom:10px}
.cfu-leer b{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px}

/* =============================================================== 4. Herkunfts-Marke */
.cfu-hk{display:inline-flex;align-items:center;gap:5px;flex:none;padding:2px 8px 2px 6px;border-radius:20px;
  font-size:.68rem;font-weight:900;letter-spacing:.04em;white-space:nowrap;vertical-align:1px}
.cfu-hk .ic{width:11px;height:11px}
.cfu-hk.h-mensch{background:var(--good-bg);color:var(--good)}
.cfu-hk.h-ki{background:var(--info-bg);color:var(--info)}
.cfu-hk.h-system{background:var(--surface-3);color:var(--ink-soft)}
.cfu-hk.h-gemischt{background:var(--warn-bg);color:var(--warn)}