:root{
  /* Flaechen (neutrale Graustufen statt teal-getoent) */
  --bg:#f7f8fa; --bg2:#ffffff; --bg3:#f2f4f7; --bg4:#eaecf0;
  --border:#e4e7ec; --border2:#d0d5dd;
  /* Text */
  --text:#101828; --text2:#667085; --text3:#98a2b3;
  /* Akzent: verfeinertes Teal */
  --accent:#0e8c82; --accent2:#0a6e67; --accent-light:#e6f5f3;
  /* Status */
  --green:#067a56; --green-bg:#e7f6ef; --green-text:#05613f;
  --red:#d92d20; --red-bg:#fef3f2; --amber:#b54708; --amber-bg:#fef6ee;
  --orange:#e8590c;   /* Zwischenstufe amber->rot, fuer die 5-stufige Klassen-Rampe (A-E) */
  --blue:#2563eb;     /* neutrale KATEGORIE-Farbe (kein Status!) - z. B. Bauart im Glasdach-Report */
  /* Sidebar */
  --sidebar:#0c1b26; --sidebar2:#081319;
  /* Form / Rhythmus */
  --radius:14px; --radius-sm:9px; --gap:1rem;
  --font:'Outfit','Inter',system-ui,-apple-system,sans-serif;
  --font-num:'Inter','Outfit',system-ui,sans-serif;
  /* Schatten: papierweich, neutral (kein Farbstich) */
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 24px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.05);
  --ring:0 0 0 3px rgba(14,140,130,.18);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================================
   [hidden] gewinnt. IMMER.

   DER FEHLER (21.08.2026): `.fb-panel{display:flex}` schlug die Regel `[hidden]{display:none}`
   aus dem Browser-Standard -- Regeln des Dokuments zaehlen mehr als die des Browsers. Das
   Meldefenster stand damit von der ersten Sekunde an offen, zeigte "Wird geladen ..." (den
   Inhalt holt es erst beim Klick) und liess sich weder oeffnen noch schliessen: das Skript
   setzte `hidden` brav hin und her, nur sah man davon nichts.

   Die Anzeige laesst sich nicht am Server pruefen und nicht mit einem DOM-Test: dort stimmte
   `panel.hidden` die ganze Zeit. Sichtbar war es nur im Browser -- gemeldet mit einem Bild.

   Deshalb steht die Regel hier ein fuer alle Mal, mit !important: wer kuenftig einem Element
   ein `display` gibt, das per Javascript ein- und ausgeblendet wird, faellt nicht mehr in
   dieselbe Grube.
   ============================================================================ */
[hidden]{display:none !important}

*{box-sizing:border-box}
html{font-size:15px;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
.mono{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));
  display:flex;flex-direction:column;padding:1.3rem .9rem;z-index:100;box-shadow:3px 0 24px rgba(0,0,0,.18)}
/* Nav-Bereich scrollt, Logo + Abmelden bleiben fix sichtbar (auch bei vielen Menuepunkten) */
.s-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.s-nav::-webkit-scrollbar{width:6px}
.s-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.s-logo,.s-bottom{flex-shrink:0}
.main{margin-left:240px;flex:1;padding:1.8rem 2.4rem;min-width:0}
@media(max-width:1100px){.main{padding:1.4rem 1.4rem}}

/* ---------- Sidebar ---------- */
.s-logo{display:flex;align-items:center;gap:11px;padding:.2rem .6rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1.1rem}
.s-logo .ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:800;box-shadow:0 4px 16px rgba(10,110,103,.45);flex-shrink:0}
.s-logo .txt{min-width:0}
.s-logo h1{margin:0;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-logo p{margin:0;font-size:10.5px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-sec{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.2px;padding:0 .65rem;margin:14px 0 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.66);width:100%;text-align:left;border:none;background:none;cursor:pointer;transition:all .15s var(--ease);margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(45,212,191,.18);color:#5eead4;font-weight:600}
.nav-item .ni{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.nav-item span.lbl{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.nav-item span.lbl b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item span.lbl i{font-style:normal;font-size:10.5px;opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ptab{padding:9px 16px;text-decoration:none;color:var(--text3);font-weight:600;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s var(--ease),border-color .15s var(--ease)}
.ptab:hover{color:var(--accent)}
.ptab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tbl-search{height:36px;padding:0 12px;border:1px solid var(--border);border-radius:9px;font:inherit;color:var(--text);min-width:180px;margin-left:auto}
.back-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 13px;margin-bottom:14px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.back-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-group{margin:0}
.nav-group>summary{list-style:none;cursor:pointer}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-grp .caret{margin-left:auto;transition:transform .15s;color:var(--text3);font-size:11px}
.nav-group[open] .caret{transform:rotate(90deg)}
.nav-item.sub{padding-left:34px}
.flt-chk{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;cursor:pointer}
.flt-sel{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:9px;font:inherit;color:var(--text);background:#fff;cursor:pointer;transition:border-color .15s var(--ease)}
.flt-sel:hover{border-color:var(--border2)}
.flt-chip{padding:6px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font-weight:600;font-size:13px;cursor:pointer;user-select:none;transition:all .15s var(--ease)}
.flt-chip:hover{border-color:var(--border2)}
.flt-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.s-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:.9rem}
.user-pill{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.07);margin-bottom:8px}
.user-pill .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.user-pill .ui{flex:1;min-width:0}
.user-pill .un{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-pill .ur{font-size:10px;color:rgba(255,255,255,.45);text-transform:capitalize}
.btn-logout{width:100%;padding:8px;border-radius:var(--radius-sm);background:none;border:1.5px solid rgba(255,255,255,.13);
  font-size:12px;font-weight:500;color:rgba(255,255,255,.6);cursor:pointer;transition:all .15s var(--ease)}
.btn-logout:hover{background:rgba(225,29,72,.18);color:#fca5a5;border-color:rgba(225,29,72,.3)}

/* ---------- Page header ---------- */
.page-head{margin-bottom:1.4rem}
.page-head h2{margin:0;font-size:27px;font-weight:700;letter-spacing:-.5px}
.page-head p{margin:4px 0 0;font-size:14px;color:var(--text2)}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.15rem 1.3rem;
  box-shadow:var(--shadow);position:relative;overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.kpi:hover{box-shadow:var(--shadow-lg);border-color:var(--border2)}
.kpi .bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.kpi.g .bar{background:linear-gradient(90deg,var(--green),#06b6d4)}
.kpi.a .bar{background:linear-gradient(90deg,var(--amber),#f59e0b)}
.kpi .ico{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:10px}
.kpi.g .ico{background:var(--green-bg);color:var(--green-text)}
.kpi.a .ico{background:var(--amber-bg);color:var(--amber)}
.kpi .lbl{font-size:11.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .val{font-family:var(--font-num);font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* ---------- Cards ---------- */
.card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.3rem}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.9rem 1.3rem;border-bottom:1px solid var(--border);background:var(--bg3)}
.card-h h3{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.card-h h3 .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-b{padding:1.1rem 1.3rem}
.chip{font-size:12px;padding:3px 10px;background:var(--accent-light);color:var(--accent);border-radius:20px;font-weight:600;flex-shrink:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------- Ranked list ---------- */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--border)}
.rank li:last-child{border-bottom:none}
.rank .rk{width:24px;height:24px;border-radius:7px;background:var(--bg4);color:var(--text2);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank li:nth-child(1) .rk{background:var(--accent);color:#fff}
.rank .nm{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .vl{font-size:13.5px;font-weight:600;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}

/* ---------- Tables ---------- */
.tbl-wrap{overflow:auto;max-height:62vh}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.5px;background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}
.tbl td{padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--border);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .15s var(--ease)}
.tbl tbody tr:hover td{background:var(--bg3)}
.tbl .num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;color:#fff;font-weight:700;font-size:12px}
/* Status-Tags (unveraendert!): werden fuer Prioritaet, Status, Deckungsbeitrag genutzt
   -> A=gut/gruen, B=mittel/amber, C=schlecht/rot. NICHT umfaerben. */
.tag.A{background:var(--green)}.tag.B{background:var(--amber)}.tag.C{background:var(--red)}
/* Neutrales KATEGORIE-Tag (blau). Fuer Merkmale, die KEIN Status sind - z. B. die Bauart im
   Glasdach-Report (Wintergarten/Doppelsteg/Ueberdachung). Gruen/Amber/Rot waeren hier falsch:
   eine Bauart ist weder gut noch schlecht (Design-Richtlinie: Statusfarben nie zweckentfremden).
   Blau ist dort als Kategorie-/Datenfarbe vorgesehen (--chart-2). Kontrast auf Weiss 5,2:1 (AA). */
.tag.n{background:var(--blue)}
/* Eigene 5-stufige Rampe NUR fuer die Fensterkunden-Klassen A-E (gruen = bester €/Std,
   rot = schlechtester). Bewusst getrennt von .tag, damit die Status-Semantik oben gilt. */
.kls{display:inline-block;padding:2px 10px;border-radius:20px;color:#fff;font-weight:700;font-size:12px}
.kls.A{background:var(--green)}.kls.B{background:var(--accent)}.kls.C{background:var(--amber)}
.kls.D{background:var(--orange)}.kls.E{background:var(--red)}

/* Nur fuer Screenreader -- verlangt von docs/design-richtlinien.md fuer Nur-Icon-Elemente.
   Gab es bisher nicht; der runde Feedback-Knopf ist das erste Element, das sie braucht. */
.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}

/* Melde-Panel (Feedback-Modul), Form nach dem Vorbild des Lexoffice-Messengers.
   Der Knopf traegt den Akzent des Hauses -- er steht auf jeder Seite und darf kein
   Fremdkoerper sein. Keine zweite Farbe, keine Fremdmarke. */
.fb-knopf{position:fixed;right:16px;bottom:16px;z-index:200;background:var(--accent);color:#fff;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-decoration:none;font-size:22px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .15s ease}
.fb-knopf:hover{transform:translateY(-1px)}
/* Ueber ALLEM: die Seitenleiste liegt auf 100, der Kopfbereich auf 50. Der Knopf laesst
   sich verschieben -- auch dorthin. Ein Meldefenster, das halb hinter der Navigation
   verschwindet, ist unbedienbar (im Browser gesehen, 21.08.2026).
   Verschiebbar: der Finger soll den Knopf ziehen und nicht die Seite scrollen -- dafuer
   touch-action. Waehrend des Ziehens keine Bewegungsanimation, sonst laeuft der Knopf dem
   Finger hinterher. */
.fb-knopf{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none}
.fb-knopf.wird-gezogen{cursor:grabbing;transition:none;transform:scale(1.06);
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
/* Auf- und zuklappen: geschlossen die Sprechblase mit Stift, offen der Winkel nach unten.
   Gezeichnet statt Emoji -- ein Emoji sieht auf jedem Geraet anders aus, bringt seine eigene
   Farbe mit und passt sich dem gruenen Knopf nicht an. */
.fb-knopf svg{width:24px;height:24px;display:block}
.fb-knopf .fb-zu-zeichen{display:none}
.fb-knopf.ist-offen .fb-auf{display:none}
.fb-knopf.ist-offen .fb-zu-zeichen{display:block}
/* Der Zaehler. Rot ist hier keine zweckentfremdete Statusfarbe, sondern die uebliche
   Kennzeichnung fuer "ungelesen" -- und er traegt seine Zahl als Text, haengt also nicht
   an der Farbe. */
.fb-zaehler{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;
  background:var(--red);color:#fff;border-radius:9px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.fb-reiter-knopf .fb-zaehler{position:static;display:inline-flex;margin-left:4px}
/* Das Panel scrollt NICHT als Ganzes -- Kopf und Reiter bleiben stehen, gescrollt wird
   innerhalb des offenen Reiters. Vorher rutschte beim Blaettern die Reiterleiste mit nach
   oben weg, und "Start" verlangte Scrollen, obwohl dort nur ein Formular steht
   (gemeldet am 21.08.2026). */
.fb-panel{position:fixed;right:16px;bottom:78px;z-index:201;width:min(380px,calc(100vw - 32px));
  max-height:min(680px,calc(100vh - 100px));display:flex;flex-direction:column;
  overflow:hidden;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fb-kopf{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 16px 8px}
.fb-zu{background:none;border:none;font-size:16px;cursor:pointer;color:var(--text2)}
.fb-laedt{padding:16px}
.fb-reiter{display:flex;border-bottom:1px solid var(--border)}
.fb-reiter-knopf{flex:1;background:none;border:none;padding:9px 8px;font:inherit;font-size:13px;
  font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent}
.fb-reiter-knopf.ist-an{color:var(--accent2);border-bottom-color:var(--accent)}
.fb-form{padding:16px;display:flex;flex-direction:column;gap:8px}
.fb-stand-satz{padding:12px 16px 0;margin:0}
.fb-arten{display:flex;gap:12px;font-size:13px}
.fb-label{font-size:13px;font-weight:600}
.fb-form textarea{font:inherit;padding:8px;border:1px solid var(--border);
  border-radius:var(--radius-sm);resize:vertical}
.fb-hinweis{font-size:12px;margin:0}
/* Die KI-Offenlegung. Abgesetzt, aber nicht versteckt -- sie ist eine Auskunft und keine
   Warnung, deshalb kein Amber und kein Rahmen. */
.fb-ki{font-size:11px;line-height:1.5;margin:4px 0 0;padding-top:8px;
  border-top:1px solid var(--border)}
.fb-senden{background:var(--accent);color:#fff;border:none;padding:9px 16px;
  border-radius:var(--radius-sm);font-weight:600;cursor:pointer}
/* Verlauf: Vorschau in der Zusammenfassung, voller Text im aufgeklappten Zustand. */
.fb-liste,.fb-neues{list-style:none;margin:0;padding:0}

/* Jede Meldung eine eigene Karte. Vorher waren es flache Zeilen mit Vorschau und Zeit --
   zwei Meldungen, die beide "test" anfangen, sahen identisch aus (gemeldet am 21.08.2026).
   Unterscheidbar macht sie das, was ueber dem Text steht: Art, Zustand, Nummer. */
.fb-liste{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.fb-liste li{border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg2);overflow:hidden;transition:border-color .15s var(--ease)}
.fb-liste li:hover{border-color:var(--border2)}
.fb-liste li.ist-neu{border-left:3px solid var(--accent);background:var(--accent-light)}
.fb-liste summary{display:flex;flex-direction:column;gap:4px;padding:10px 12px;
  cursor:pointer;font-size:13px;list-style:none}
.fb-liste summary::-webkit-details-marker{display:none}
.fb-liste details[open] summary{border-bottom:1px solid var(--border);margin-bottom:8px}
/* Die Vorschau darf eine Zeile fuellen und wird dann abgeschnitten -- der volle Text steht
   eine Klickbewegung weiter unten in der Unterhaltung. */
.fb-zeile-kopf{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fb-zeile-fuss{font-size:11px}
.fb-vorschau{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--text)}
.fb-wann{white-space:nowrap;margin-left:auto}
.fb-nummer{font-family:var(--font-num);font-size:11px;color:var(--text3)}
.fb-punkt{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* Marken. Die Art faerbt, der Zustand bleibt grau bis auf "erledigt" -- sonst leuchtet
   jede Karte in drei Farben und keine sagt mehr etwas. */
.fb-marke{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.01em}
.fb-marke.wunsch{background:var(--accent-light);color:var(--accent2)}
.fb-marke.frage{background:#eef2ff;color:#3730a3}
.fb-marke.fehler{background:var(--red-bg);color:var(--red)}
.fb-marke.stand{background:var(--bg3);color:var(--text2)}
.fb-marke.stand.erledigt{background:var(--green-bg);color:var(--green-text)}
.fb-marke.stand.abgelehnt{background:var(--bg4);color:var(--text2)}
.fb-marke.stand.in_arbeit{background:var(--amber-bg);color:var(--amber)}
.fb-verlauf{padding:0 12px 12px;font-size:13px;line-height:1.6}
/* Lange Wuensche vollstaendig -- mit Umbruch und erhaltenen Absaetzen. */
.fb-eigen{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 4px}
.fb-antwort{margin-top:8px;padding:8px 12px;background:var(--green-bg);
  border-radius:var(--radius-sm)}
.fb-antwort p{white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0 0}
.fb-leer,.fb-neues li{padding:12px 16px;font-size:13px;line-height:1.5}
.fb-neues li+li{border-top:1px solid var(--border)}
/* Vollseite: kein Javascript, also keine Reiter -- alle drei Bloecke untereinander. */
.fb-seite .fb-reiter{display:none}
/* Die Ueberschriften ersetzen auf der Vollseite die ausgeblendeten Reiter. Im Panel
   waeren sie doppelt -- dort steht der Reiter schon darueber. */
.fb-ueber{display:none}
.fb-seite .fb-ueber{display:block;margin:16px 16px 0;font-size:15px;font-weight:600}
.fb-seite>div+div{border-top:1px solid var(--border);margin-top:8px}
/* Im 380-px-Panel fuellt der Knopf die Breite sinnvoll aus, auf der Seite nicht. */
.fb-seite .fb-senden{align-self:flex-start;min-width:180px}
.fb-seite #fbNachrichten[hidden],.fb-seite #fbNeues[hidden]{display:block !important}

/* Einschraenkungs-Hinweise an einzelnen Zahlen (Fensterkunden). Bewusst NICHT rot:
   Rot heisst in diesem Cockpit "Fehler/negativ" - hier ist der Wert aber nicht falsch,
   sondern nur eingeschraenkt gueltig. Amber = Vorsicht, Blau = neutrale Kategorie
   ("stammt aus einer anderen Rechnung"), passend zur Semantik oben im Stylesheet. */
.hinw{display:inline-block;padding:1px 8px;border-radius:var(--radius-full,20px);color:#fff;
  font-weight:700;font-size:11px;white-space:nowrap;vertical-align:middle}
.hinw.dach{background:var(--amber)}       /* Zeit enthaelt Glasdach-Arbeit -> EUR/Std zu niedrig */
.hinw.abstand{background:var(--amber)}    /* Einsatz und Rechnung liegen weit auseinander */
.hinw.vorletzte{background:var(--blue)}   /* vorletzte Rechnung genutzt (Kundenregel) */
/* "Andere Position auf der Rechnung" (Kundenvorgabe 14.08.2026) gehoert zur selben Familie
   wie .dach/.abstand - Vorsicht, keine Fehlermeldung -, muss aber daneben unterscheidbar
   bleiben. Deshalb dieselbe Amber-Semantik als Umriss statt als Flaeche, mit den vorhandenen
   Tokens. Keine neue Farbe: das Stylesheet vergibt Farben nach Bedeutung, nicht nach Anlass.
   Umbruch erlaubt, weil hier der Positionstitel selbst steht ("Reinigung Solar-Photovoltaik"). */
.hinw.fremd{background:var(--amber-bg);color:var(--amber);white-space:normal;
  box-shadow:inset 0 0 0 1.5px var(--amber);max-width:190px;text-align:left}
/* Der Betrag enthaelt bereits einen Nachlass (sql/152). Amber wie .dach/.abstand: der Wert
   ist nicht falsch, er ist nur anders zu lesen als der Listenpreis. */
.hinw.rabatt{background:var(--amber)}
/* Der Einsatz stammt NICHT aus dem Zeitraum, den die Rechnung nennt, sondern aus der alten
   Schaetzregel. Blau wie .vorletzte - das ist dieselbe Aussage-Art ("stammt aus einer
   anderen Quelle als ueblich"), keine Warnung ueber den Wert selbst. */
.hinw.geschaetzt{background:var(--blue)}

/* Erklaerzeile ueber einer Tabelle. Ersetzt frueher dort stehende Inline-Stile - die
   Richtlinien verlangen Tokens statt Einzelwerten in Selektoren. */
.tbl-erklaerung{padding:0 16px 4px;font-size:13px;line-height:1.6}
/* Zusatzangabe unter einer Zahl (z. B. das Einsatzdatum unter den Stunden). */
.klein{font-size:11px}

/* Notizfeld mit Knopf in EINER Zelle (unberechnete Einsaetze).
   Der Knopf stand vorher in einer eigenen, letzten Spalte -- bei acht Spalten lag die
   ausserhalb des Bildes, und die waagerechte Bildlaufleiste sitzt am unteren Rand eines
   62vh hohen Kastens. Gemeldet mit "wie kann man nach rechts scrollen fuer speichern".
   Jetzt braucht niemand mehr zu scrollen, um zu speichern. */
/* Die Spalte bleibt beim seitlichen Scrollen RECHTS STEHEN -- derselbe Kniff, mit dem
   oben schon die Kopfzeile haengen bleibt (.tbl th ist sticky). Damit ist der Knopf immer
   erreichbar, egal wie breit die Tabelle wird oder wie schmal das Fenster ist.
   Gemeldet mit: "das muss responsive sein oder das man nach rechts scrollen kann".
   Beides gilt jetzt: seitlich scrollen geht (.tbl-wrap), noetig ist es zum Speichern nicht.
   display:flex steht bewusst auf dem INNEREN div, nicht auf dem td -- ein td mit
   display:flex faellt aus dem Tabellenlayout und vertraegt sich schlecht mit sticky. */
.notiz-zelle{position:sticky;right:0;z-index:1;background:var(--bg2);min-width:318px;
  overflow:visible;box-shadow:-8px 0 8px -8px rgba(16,24,40,.25)}
.tbl tbody tr:hover td.notiz-zelle{background:var(--bg3)}
.notiz-kopf{position:sticky;right:0;z-index:3}
.notiz-innen{display:flex;gap:6px;align-items:center}
.notiz-innen input[type=text]{flex:1;min-width:110px}
/* Der FINAL-Haken sitzt MIT im haftenden Bereich, sonst muesste man zum Abhaken nach rechts
   scrollen -- genau das war schon einmal die Beanstandung beim Speichern-Knopf.
   white-space:nowrap haelt Kaestchen und Wort zusammen, flex:none schuetzt sie davor, vom
   Notizfeld zusammengedrueckt zu werden. min-width der Zelle deshalb von 236 auf 318 px. */
.final-haken{display:flex;align-items:center;gap:4px;flex:none;cursor:pointer;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--text2);white-space:nowrap}
.final-haken input{margin:0;width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.final-haken:hover{color:var(--accent)}

/* Zusatzinformation, die die Seite nicht zustellen soll: zugeklappte Karte.
   Die Kernzahl steht in der Kopfzeile, die Tabelle erscheint erst auf Klick.
   <details> wird im Cockpit schon fuer die Navigationsgruppen benutzt. */
.karte-klapp{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px}
.karte-klapp>summary{padding:13px 16px;cursor:pointer;font-size:14px;list-style:none;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.karte-klapp>summary::-webkit-details-marker{display:none}
.karte-klapp>summary::after{content:'▸';margin-left:auto;color:var(--text3);transition:transform .15s var(--ease)}
.karte-klapp[open]>summary::after{transform:rotate(90deg)}
.karte-klapp>summary:hover{color:var(--accent)}
.karte-klapp-inhalt{padding:0 16px 14px}
/* Lange Freitexte (Taetigkeitslisten) duerfen die Tabelle nicht breittreten.
   Der volle Text steht im title-Attribut. */
.zelle-kurz{max-width:210px}
.zelle-kurz>*:first-child,.zelle-kurz{overflow:hidden;text-overflow:ellipsis}

/* ---------- Buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 17px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  cursor:pointer;border:none;background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(14,140,130,.25);transition:all .18s var(--ease)}
.btn:hover{background:var(--accent2);box-shadow:0 6px 18px rgba(10,110,103,.28)}
.btn.ghost{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border2);box-shadow:var(--shadow)}
.btn.ghost:hover{background:var(--bg3);color:var(--text)}
.btn.sm{padding:6px 12px;font-size:12px}
input,select{padding:9px 12px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);font-size:14px;background:var(--bg2);color:var(--text);transition:border-color .15s var(--ease)}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.muted{color:var(--text2)} .right{text-align:right}

/* ---------- Login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sidebar),var(--accent2))}
.login-card{background:#fff;border-radius:18px;padding:32px 30px;width:350px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:15px;animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.login-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:4px}
.login-brand .ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 4px 16px rgba(10,110,103,.4)}
.login-brand b{font-size:1.05rem;color:var(--text)}
.login-brand small{display:block;font-weight:500;color:var(--text3);letter-spacing:.16em;text-transform:uppercase;font-size:.66rem}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--text2);font-weight:500}
.login-card .btn{justify-content:center;padding:11px}
.alert{background:var(--red-bg);color:var(--red);border:1px solid rgba(217,45,32,.25);padding:9px 12px;border-radius:var(--radius-sm);font-size:.86rem}

/* ---------- Page transition ---------- */
.main>*{animation:pageIn .3s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Mobile: sidebar -> bottom bar ---------- */
@media(max-width:768px){
  .sidebar{width:100%;height:auto;top:auto;bottom:0;flex-direction:row;padding:0 4px;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 16px rgba(0,0,0,.18);justify-content:flex-start;align-items:center;background:var(--sidebar);overflow-x:auto}
  .s-logo,.nav-sec,.s-bottom{display:none}
  .s-nav{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;min-height:0;width:100%;align-items:center}
  .nav-item{flex-direction:column;gap:2px;padding:7px 6px;font-size:9.5px;min-width:54px;flex:0 0 auto;justify-content:center}
  .nav-item span.lbl{flex-direction:row;white-space:nowrap}
  .nav-item span.lbl i{display:none}
  .nav-item .ni{font-size:19px}
  .main{margin-left:0;padding:1rem;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}
/* Anmeldung der Konsole: gleiche Karte wie das Cockpit-Login, nur eigener Hinweistext. */
.ops-login-hinweis{font-size:.82rem;text-align:center;margin:0;color:var(--text2)}
.ops-login-form{display:flex;flex-direction:column;gap:15px}

/* ---------- Betreiber-Konsole (ops.<domain>) ----------
   Eigener Host, eigene Aufmachung: dunkle Kopfleiste statt Seitenleiste, damit sofort
   erkennbar ist, dass man NICHT im Cockpit ist. Farben/Radien aus denselben Tokens. */
.ops{background:var(--bg)}
.ops-kopf{display:flex;align-items:center;gap:1.5rem;padding:.9rem 1.6rem;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.18);position:sticky;top:0;z-index:50}
.ops-kopf>strong{font-size:15px;font-weight:700;white-space:nowrap}
.ops-nav{display:flex;gap:.4rem;flex:1}
.ops-nav a{padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.66);transition:all .15s var(--ease)}
.ops-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.ops-nav-rechts{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;
  color:rgba(255,255,255,.66)}
.ops-nav-rechts:hover{background:rgba(255,255,255,.08);color:#fff}
.ops-abmelden button{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:none;
  padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer;transition:all .15s var(--ease)}
.ops-abmelden button:hover{background:rgba(255,255,255,.18);color:#fff}
.ops-inhalt{padding:1.8rem 2.4rem;max-width:1400px}
.ops-inhalt h1{font-size:1.5rem;margin:0 0 .4rem}
.ops-karte{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.4rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.ops-karte h2{font-size:1.05rem;margin:0 0 .8rem}
.ops-hinweis{color:var(--text2);font-size:.88rem;margin:.2rem 0 1.2rem;max-width:75ch}
.ops-leer{color:var(--text3);font-size:.9rem;padding:.6rem 0}
.ops-liste{list-style:none;padding:0;margin:0 0 .8rem}
.ops-liste li{padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.ops-zeit{color:var(--text3);font-family:var(--font-num);font-size:.82rem;margin-right:.6rem}

/* Filterleiste */
.ops-filter{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin-bottom:1.2rem;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem}
.ops-filter label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--text2);font-weight:500}
.ops-filter button{background:var(--accent);color:#fff;border:none;padding:9px 18px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer}
.ops-filter button:hover{background:var(--accent2)}

/* Aenderungstabelle: Vorher gedaempft, Nachher betont -- die Leserichtung ist die Aussage. */
.ops-tabelle{width:100%;border-collapse:collapse;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.88rem}
.ops-tabelle th{text-align:left;padding:.7rem .9rem;background:var(--bg3);color:var(--text2);
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ops-tabelle td{padding:.7rem .9rem;border-top:1px solid var(--border);vertical-align:top}
.ops-tabelle tr:hover td{background:var(--bg3)}
.ops-vorher{color:var(--text3);max-width:26ch}
.ops-nachher{color:var(--text);font-weight:500;max-width:26ch}

/* Gegenueberstellung: nur die Felder, die sich WIRKLICH geaendert haben. Wer zwei komplette
   Textbloecke nebeneinander stellt, laesst den Leser die Aenderung selbst suchen. */
.ops-diff{max-width:44ch}
.ops-diff-zeile{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
  padding:.15rem 0;line-height:1.4}
.ops-diff-zeile + .ops-diff-zeile{border-top:1px dashed var(--border)}
.ops-diff-feld{font-size:.72rem;font-weight:600;color:var(--text2);text-transform:uppercase;
  letter-spacing:.03em;flex-basis:100%}
.ops-diff .ops-vorher{text-decoration:line-through;text-decoration-color:var(--text3);max-width:none}
.ops-diff .ops-nachher{max-width:none}
.ops-pfeil{color:var(--text3);font-size:.85rem}
.ops-marke{display:inline-block;background:var(--accent-light);color:var(--accent2);
  font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:99px;margin-left:.4rem}

/* Knoepfe: neutral fuer das normale Zuruecksetzen, rot NUR wenn etwas ueberschrieben wird. */
.ops-knopf{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border2);
  padding:6px 12px;border-radius:var(--radius-sm);font-size:12.5px;cursor:pointer;
  display:inline-block;transition:all .15s var(--ease)}
.ops-knopf:hover{background:var(--bg3);color:var(--text)}
.ops-knopf-warnung{background:var(--red);color:#fff;border:none;padding:9px 16px;
  border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;margin-right:.6rem}
.ops-knopf-warnung:hover{filter:brightness(.92)}

/* Kacheln: die grosse Zahl ist die Antwort, die Fusszeile der Beleg. */
.ops-abschnitt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin:1.6rem 0 .7rem}
.ops-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-bottom:1.2rem}
.ops-kachel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem 1.1rem;box-shadow:var(--shadow);display:block;transition:all .15s var(--ease)}
a.ops-kachel:hover{border-color:var(--border2);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.ops-kachel .k{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.ops-kachel .v{font-size:1.5rem;font-weight:700;margin:.25rem 0;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;line-height:1.15}
.ops-kachel .f{font-size:.78rem;color:var(--text2)}
.ops-kachel.ok .v{color:var(--green)} .ops-kachel.warn .v{color:var(--amber)} .ops-kachel.bad .v{color:var(--red)}

/* Ein Punkt, drei Zustaende -- und "kein Punkt" fuer "nicht gemessen". */
.ops-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
  background:var(--text3);vertical-align:middle}
.ops-punkt.ok{background:var(--green)} .ops-punkt.warn{background:var(--amber)}
.ops-punkt.bad{background:var(--red)}

/* "—" ist kein Wert, sondern das Eingestaendnis einer fehlenden Messung. Es muss anders
   aussehen als eine Null, sonst liest man Ausfall als Entwarnung. */
.ops-unbekannt{color:var(--text3);font-style:italic}
.ops-fehlertext{color:var(--red)}
.ops-klein{font-size:.78rem;color:var(--text2);margin-top:2px}
.ops-num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ops-ruhig{background:var(--green-bg);color:var(--green-text);border:1px solid rgba(6,122,86,.2);
  padding:.7rem 1rem;border-radius:var(--radius-sm);font-size:.88rem}
.ops-leer-fehler{color:var(--red)}
.ops-fuss{font-size:.78rem;color:var(--text3);margin-top:1.6rem;border-top:1px solid var(--border);padding-top:.8rem}

/* Zeitraum-Schalter: Links statt Knoepfe -- die Wahl steht in der URL und ist teilbar. */
.ops-schalter{display:inline-flex;gap:2px;background:var(--bg3);border-radius:var(--radius-sm);
  padding:3px;margin-bottom:.9rem}
.ops-schalter a{padding:6px 14px;border-radius:7px;font-size:.85rem;color:var(--text2);font-weight:500}
.ops-schalter a:hover{color:var(--text)}
.ops-schalter a.aktiv{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:var(--shadow)}

/* Aktionszeile: Knopf links, Erklaerung daneben -- niemand soll raten muessen, was passiert. */
.ops-aktionsform{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem}
.ops-aktionsform .ops-klein{flex:1;min-width:220px}
.ops-pw{width:160px;font-size:.85rem;padding:6px 10px}

/* Die Lage auf einen Blick -- das Erste, was man auf der Startseite sieht. */
.ops-lage{display:flex;gap:1.2rem;align-items:center;padding:1.4rem 1.6rem;border-radius:var(--radius);
  margin-bottom:1.4rem;border:1px solid var(--border)}
.ops-lage h1{margin:0 0 .2rem;font-size:1.35rem}
.ops-lage p{margin:0;color:var(--text2);font-size:.92rem}
.ops-lage-zeichen{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:26px;font-weight:700;flex-shrink:0;color:#fff}
.ops-lage.ok{background:var(--green-bg);border-color:rgba(6,122,86,.25)}
.ops-lage.ok .ops-lage-zeichen{background:var(--green)}
.ops-lage.ok h1{color:var(--green-text)}
.ops-lage.warn{background:var(--amber-bg);border-color:rgba(181,71,8,.25)}
.ops-lage.warn .ops-lage-zeichen{background:var(--amber)}
.ops-lage.bad{background:var(--red-bg);border-color:rgba(217,45,32,.25)}
.ops-lage.bad .ops-lage-zeichen{background:var(--red)}

/* Je Meldung: was los ist, was es bedeutet, und der Weg zur Loesung. */
.ops-meldungen{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.4rem}
.ops-meldung{display:flex;gap:1rem;align-items:center;background:var(--bg2);
  border:1px solid var(--border);border-left:4px solid var(--text3);
  border-radius:var(--radius-sm);padding:.9rem 1.1rem}
.ops-meldung.warn{border-left-color:var(--amber)}
.ops-meldung.bad{border-left-color:var(--red)}
.ops-meldung-text{flex:1}
.ops-meldung-text strong{display:block;font-size:.98rem}
.ops-meldung-text p{margin:.2rem 0 0;color:var(--text2);font-size:.86rem}

/* Dreier-Raster fuer zusammengehoerige Werte */
.ops-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin:.9rem 0}
.ops-drei-teil{background:var(--bg3);border-radius:var(--radius-sm);padding:.9rem 1rem;
  border-left:4px solid var(--border2)}
.ops-drei-teil.ok{border-left-color:var(--green)}
.ops-drei-teil.warn{border-left-color:var(--amber)}
.ops-drei-teil.bad{border-left-color:var(--red)}
.ops-drei-teil .k{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.ops-drei-teil .v{font-size:1.2rem;font-weight:700;margin:.2rem 0;font-family:var(--font-num)}
.ops-drei-teil .f{font-size:.78rem;color:var(--text2);line-height:1.35}

.ops-knopfreihe{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;
  padding-top:1rem;border-top:1px solid var(--border)}

/* Messzeitpunkt neben den Zahlen, nicht am Seitenende. */
.ops-messstand{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.82rem;
  color:var(--text2);background:var(--bg3);padding:.5rem .8rem;border-radius:var(--radius-sm);
  margin:0 0 .9rem}
.ops-messstand.veraltet{background:var(--amber-bg);color:var(--amber)}
.ops-inline-form{display:inline}

/* Laufender Auftrag: Schritt im Klartext plus Balken. */
.ops-lage-breit{flex:1;min-width:0}
.ops-schritt{font-family:var(--font-num);font-size:.88rem}
.ops-balken{width:100%;max-width:420px;height:10px;border:none;border-radius:99px;
  background:rgba(0,0,0,.08);margin:.3rem 0;vertical-align:middle}
.ops-balken::-webkit-progress-bar{background:rgba(0,0,0,.08);border-radius:99px}
.ops-balken::-webkit-progress-value{background:var(--amber);border-radius:99px;transition:width .3s var(--ease)}
.ops-balken::-moz-progress-bar{background:var(--amber);border-radius:99px}

/* Handlungskasten: eine Frage, eine Bestaetigung, ein Knopf. */
.ops-tun{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.ops-tun-form{background:var(--bg3);border-radius:var(--radius-sm);padding:1.1rem 1.2rem;
  border-left:4px solid var(--amber)}
/* Suchen ist harmlos -- es aendert nichts. Das soll man auch sehen. */
.ops-tun-neutral{border-left-color:var(--accent)}
.ops-tun-frage{margin:0 0 .6rem;font-size:1rem}
.ops-tun-option{display:flex;align-items:center;gap:.5rem;font-size:.88rem;
  color:var(--text2);margin-bottom:.8rem;cursor:pointer;flex-wrap:wrap}
.ops-tun-option input{width:auto;margin:0}
.ops-tun-zeile{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ops-tun-zeile .ops-pw{width:230px}
.ops-knopf-gross{font-size:15px;padding:11px 22px}
.ops-unter{font-size:.95rem;margin:1.4rem 0 .5rem}
.ops-details{margin-top:.9rem}
.ops-details summary{cursor:pointer;font-size:.85rem;color:var(--text2);padding:.4rem 0}
.ops-details summary:hover{color:var(--text)}

/* Wertraster der Detailseite */
.ops-raster{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.2rem;margin:0 0 1rem}
.ops-raster dt{font-size:.78rem;color:var(--text2);font-weight:600}
.ops-raster dd{margin:0}

@media(max-width:768px){
  .ops-kopf{flex-wrap:wrap;gap:.6rem;padding:.7rem 1rem}
  .ops-nav{flex-wrap:wrap;gap:.2rem}
  .ops-inhalt{padding:1rem}
  .ops-tabelle{display:block;overflow-x:auto}
  .ops-kacheln{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Zusammengefalteter Erklaerkasten ueber einer Tabelle. Die Zahlen stehen schon in der
   Zusammenfassung -- wer sie sieht, weiss, ob es sich lohnt aufzuklappen. */
.fb-details{margin:0;padding:0 16px 8px}
.fb-details>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);
  padding:4px 0;list-style:revert}
.fb-details>summary:hover{color:var(--accent2)}
.fb-details>p{margin:6px 0 0;font-size:13px;line-height:1.6}

/* Melden aus einer Tabellenzeile heraus. Gedaempft, damit es die Tabelle nicht zerreisst,
   aber nie unsichtbar: was nur beim Ueberfahren erscheint, findet auf einem Tablet niemand. */
  transition:opacity .15s ease}

/* ---------- Feedback in der Betreiber-Konsole: Karten statt Tabelle ----------
   Eine Tabellenzeile kann einen Freitext zeigen ODER ein Formular tragen, nicht beides:
   .tbl td schneidet ab (max-width + overflow:hidden + nowrap), und der Speichern-Knopf
   fiel dadurch aus dem Bild. Karten koennen beides. */
.fbk-ok{background:var(--green-bg);color:var(--green-text);padding:9px 14px;
  border-radius:var(--radius-sm);font-size:.88rem;margin:0 0 14px}
.fbk-filter{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.fbk-chip{padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-full,20px);
  font-size:13px;font-weight:600;color:var(--text2);text-decoration:none}
.fbk-chip:hover{border-color:var(--border2);color:var(--text)}
.fbk-chip.an{background:var(--accent);color:#fff;border-color:var(--accent)}

.fbk-karte{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px;
  border-left:4px solid var(--border2)}
/* Zustandsfarbe an der Kante: beim Ueberfliegen einer langen Liste sieht man ohne Lesen,
   was noch laeuft. Die Farben folgen der Semantik des Hauses -- Amber = Vorsicht/offen,
   Gruen = fertig, Grau = abgeschlossen ohne Ergebnis. */
.fbk-karte.st-offen{border-left-color:var(--amber)}
.fbk-karte.st-gesehen{border-left-color:var(--amber)}
.fbk-karte.st-in_arbeit{border-left-color:var(--accent)}
.fbk-karte.st-erledigt{border-left-color:var(--green)}
.fbk-karte.st-abgelehnt{border-left-color:var(--text3)}
.fbk-kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}
.fbk-meta{color:var(--text2)}
.fbk-liegt{color:var(--amber);font-weight:600}
.fbk-nr{margin-left:auto;color:var(--text3);font-family:var(--font-num)}
/* Die Freigabe sitzt in der Kopfzeile -- eine Eigenschaft des Eintrags, kein Teil des
   Antwortens. Deshalb auch optisch getrennt vom Speichern-Knopf. */
.fbk-frei{margin:0}
/* Art als Kategorie, nicht als Status -- deshalb neutrale Farben und kein Rot. */
.fbk-art{display:inline-block;padding:2px 9px;border-radius:var(--radius-full,20px);
  font-size:11px;font-weight:700;color:#fff;background:var(--text3)}
.fbk-art.wunsch{background:var(--blue)}
.fbk-art.frage{background:var(--accent)}
.fbk-art.fehler{background:var(--amber)}

/* Der Meldungstext: vollstaendig, mit Umbruch und erhaltenen Absaetzen. Er ist der Grund,
   warum es diese Seite gibt -- ihn abzuschneiden waere absurd. */
.fbk-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6;
  margin:12px 0 8px}
.fbk-herkunft{font-size:12px;color:var(--text2);margin:0 0 12px}
.fbk-herkunft a{color:var(--accent2);text-decoration:underline}
.fbk-herkunft code{font-family:var(--font-num);font-size:11px;background:var(--bg3);
  padding:1px 5px;border-radius:4px}

.fbk-fuss{border-top:1px solid var(--border);padding-top:12px;display:flex;
  flex-direction:column;gap:10px}
.fbk-knopf-frei{background:none;border:1px solid var(--border2);
  color:var(--text2);padding:6px 12px;border-radius:var(--radius-sm);font:inherit;
  font-size:12px;font-weight:600;cursor:pointer}
.fbk-knopf-frei:hover{border-color:var(--accent);color:var(--accent2)}
.fbk-knopf-frei.an{background:var(--green-bg);color:var(--green-text);
  border-color:var(--green)}
.fbk-antwort{display:flex;flex-direction:column;gap:6px}
.fbk-label{font-size:12px;font-weight:600;color:var(--text2)}
.fbk-antwort textarea{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--radius-sm);resize:vertical;width:100%}
.fbk-antwort textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.fbk-signatur{font-size:11px;color:var(--text3);margin:0}
/* Umbrechend: auf einem schmalen Bildschirm rutscht der Knopf sonst wieder heraus --
   genau der Fehler, der diese Seite ueberhaupt neu gemacht hat. */
.fbk-aktionen{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fbk-aktionen select{height:36px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font:inherit;background:#fff;cursor:pointer}
.fbk-haken{display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
.fbk-speichern{margin-left:auto;background:var(--accent);color:#fff;border:none;
  padding:9px 20px;border-radius:var(--radius-sm);font:inherit;font-weight:600;cursor:pointer}
.fbk-speichern:hover{background:var(--accent2)}
.fbk-warnung{font-size:11px;color:var(--text3);margin:0}

.fbk-leer{background:#fff;border:1px dashed var(--border2);border-radius:var(--radius);
  padding:28px 24px;text-align:center}
.fbk-leer p{margin:0 0 6px;font-size:14px}
.fbk-leer p:last-child{margin:0;font-size:13px}

/* Einmaliges Aufmerksammachen, wenn eine Antwort eintrifft, waehrend die Seite offen ist.
   Kein Dauerzappeln: zwei Sekunden, dann ist wieder Ruhe. Wer "Bewegung reduzieren"
   eingestellt hat, bekommt es gar nicht -- das ist keine Information, sondern Betonung. */
@keyframes fb-melden{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.96)}}
.fb-knopf.meldet{animation:fb-melden .5s var(--ease) 2}
@media (prefers-reduced-motion: reduce){.fb-knopf.meldet{animation:none}}

/* Verlauf im Panel: eigene Nachricht links, unsere Antwort abgesetzt. Mehrere Runden
   untereinander -- so liest sich eine Unterhaltung, und genau das ist es. */

/* Die Unterhaltung. Eigene Nachrichten rechts, unsere Antworten links -- die Seite sagt
   schneller als jede Beschriftung, wer geschrieben hat. Vorher standen alle Beitraege als
   gleich aussehende Absaetze untereinander und waren "schwer zu erkennen" (21.08.2026). */
.fb-chat{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px}
.fb-blase{max-width:86%;padding:8px 11px;border-radius:14px;
  font-size:13px;line-height:1.55}
.fb-blase p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-zeit{display:block;margin-top:3px;font-size:11px;opacity:.75}
.fb-von-mir{align-self:flex-end;background:var(--accent);color:#fff;
  border-bottom-right-radius:4px}
.fb-von-uns{align-self:flex-start;background:var(--bg3);color:var(--text);
  border:1px solid var(--border);border-bottom-left-radius:4px}
.fb-von-uns .fb-zeit{color:var(--text3);opacity:1}
.fb-fehler{color:var(--red);margin:6px 0 0}
.fb-nachfassen{display:flex;flex-direction:column;gap:6px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--border)}
.fb-nachfassen textarea{font:inherit;font-size:13px;padding:7px 9px;
  border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical}
.fb-klein{padding:7px 14px;font-size:13px;align-self:flex-end}

/* Frueheres im Verlauf tritt zurueck: gelesen wird der letzte Eintrag, alles davor ist
   Zusammenhang. Die Ruecksprung-Marke links zeigt, dass es sich auf das Darueberliegende
   bezieht. */
.fbk-frueher{border-left:3px solid var(--border);padding-left:10px}
.fbk-frueher-antwort{margin:6px 0 10px;padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--surface-2)}
.fbk-frueher-antwort p{margin:2px 0 0;white-space:pre-wrap}

/* Der schnelle Haken. Zurueckhaltender als "Speichern" -- er ist die Abkuerzung, nicht der
   Hauptweg; das leere Formular daneben darf keinen Platz einnehmen. */
.fbk-schnell{display:none}
.fbk-erledigt{padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--green);border-radius:var(--radius-sm);
  background:transparent;color:var(--green-text)}
.fbk-erledigt:hover{background:var(--green);color:#fff}

/* Zeitstempel an jedem Eintrag -- klein und ueber dem Text, damit er ihn nicht unterbricht. */
.fb-stempel{margin:0 0 2px}
.fbk-stempel{margin:10px 0 2px;font-size:12px;color:var(--text3)}

/* "Vorgemerkt": der Haken ist gesetzt, wirkt aber noch nicht. Warnfarbe, weil es ein
   Zwischenzustand ist -- nicht falsch, aber auch nicht fertig. */
.fbk-vorgemerkt{font-size:12px;font-weight:600;color:var(--amber);
  background:var(--amber-bg);padding:4px 9px;border-radius:999px}
.fbk-kachel-fuss{font-size:11px;color:var(--text3);margin-top:2px}


/* Kopf und Reiterleiste bleiben stehen, der Inhalt darunter bekommt den Rest. */
.fb-kopf{flex:0 0 auto}
#fbPanel #fbInhalt{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#fbPanel .fb-reiter{flex:0 0 auto}
#fbPanel #fbStart,#fbPanel #fbNachrichten,#fbPanel #fbNeues{flex:1 1 auto;min-height:0;
  overflow-y:auto}
/* Der Start-Reiter soll ohne Scrollen auskommen -- deshalb hier weniger Luft als auf der
   Vollseite, wo Platz keine Rolle spielt. */
#fbPanel .fb-form{padding:12px 16px 16px;gap:7px}
#fbPanel .fb-stand-satz{padding:10px 16px 0}
/* Das Kleingedruckte: eine Zeile, der Rest eine Klickbewegung weiter. */
.fb-info{margin:2px 0 0;font-size:11px;line-height:1.5}
.fb-info summary{cursor:pointer}
.fb-info p{margin:4px 0 0}
.fb-ki{font-size:11px}

/* Ein Knopf, der wie ein Verweis aussieht -- er gehoert in den Satz, nicht daneben. */
.fb-verweis{background:none;border:none;padding:0;font:inherit;color:var(--accent2);
  text-decoration:underline;cursor:pointer}

/* Tasten als Tasten. "⊞ + H" versteht jeder auf einen Blick, "Windows-Taste + H" muss man
   erst lesen (Wunsch vom 21.08.2026). */
/* Tastenkappen. Zeichen UND Wort: "⊞ Windows" versteht jeder, das Zeichen allein muss man
   kennen (21.08.2026). Die ganze Kombination haelt zusammen -- ein Umbruch zwischen Taste
   und Pluszeichen zerreisst sie sonst mitten im Satz. */
.tasten{white-space:nowrap}
.taste{display:inline-block;padding:2px 7px;
  font:600 11.5px/1.5 var(--font-num);color:var(--text);text-align:center;
  background:linear-gradient(180deg,#fff,var(--bg3));
  border:1px solid var(--border2);border-bottom-width:2px;border-radius:5px;
  box-shadow:0 1px 0 rgba(16,24,40,.05)}
.taste .win{font-size:13px;vertical-align:-1px}
.taste-plus{margin:0 4px;color:var(--text3);font-weight:600}

/* ── Meldefenster: Feinschliff ─────────────────────────────────────────────
   Die Funktionen standen, die Gestalt hinkte hinterher (21.08.2026). Drei Dinge tragen
   hier den Eindruck: die Auswahl als Schalterpaar statt als Auswahlpunkte, ein Feld, das
   auf den Fokus reagiert, und ein Kleingedrucktes, das sich als solches zu erkennen gibt. */

/* Auswahl: zwei Schalter nebeneinander in einer Schiene. */
/* Nur so breit wie die zwei Schalter. `inline-flex` allein genuegt dafuer NICHT: als Kind
   einer Spalten-Anordnung wird die Schiene zu `flex` umgedeutet und auf die volle Breite
   gedehnt (align-items: stretch ist die Vorgabe). Erst `align-self` haelt sie zusammen --
   und rechts daneben kommt nichts mehr, was die Breite braeuchte. */
.fb-arten{display:flex;align-self:flex-start;gap:2px;padding:3px;margin:2px 0;
  background:var(--bg3);border-radius:999px}
.fb-art-feld{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fb-arten label{padding:5px 16px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--text2);cursor:pointer;user-select:none;
  transition:background .15s var(--ease),color .15s var(--ease)}
.fb-arten label:hover{color:var(--text)}
.fb-art-feld:checked+label{background:var(--bg2);color:var(--accent2);
  box-shadow:0 1px 2px rgba(16,24,40,.08)}
.fb-art-feld:focus-visible+label{box-shadow:var(--ring)}

/* Das Feld: ruhiger Rahmen, deutlicher Fokus. */
.fb-form textarea{border-radius:var(--radius-sm);line-height:1.55;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.fb-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.fb-form textarea::placeholder{color:var(--text3)}

/* Der Diktat-Hinweis: eine ruhige Zeile mit dem Zeichen davor, nicht mittendrin. */
.fb-diktat{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;padding:8px 10px;
  color:var(--text2);background:var(--bg3);border-radius:var(--radius-sm);line-height:1.6}
.fb-diktat-zeichen{flex:0 0 auto;font-size:13px;line-height:1.6}

/* Senden: der einzige gefuellte Knopf im Fenster -- er darf der einzige bleiben. */
#fbPanel .fb-senden{padding:11px 16px;border-radius:var(--radius-sm);font-size:14px;
  transition:background .15s var(--ease)}
#fbPanel .fb-senden:hover{background:var(--accent2)}
#fbPanel .fb-senden:disabled{background:var(--border2);cursor:default}

/* Kleingedrucktes: Trennlinie darueber, eigener Winkel statt des Standard-Dreiecks. */
.fb-ki{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.fb-info summary{list-style:none;color:var(--text2);font-weight:600;
  display:flex;align-items:center;gap:6px}
.fb-info summary::-webkit-details-marker{display:none}
.fb-info summary::before{content:'›';font-size:14px;line-height:1;color:var(--text3);
  transition:transform .15s var(--ease)}
.fb-info[open] summary::before{transform:rotate(90deg)}
.fb-info summary:hover{color:var(--text)}

/* Reiter: der offene traegt mehr Gewicht, die anderen reagieren auf den Zeiger. */
.fb-reiter-knopf{transition:color .15s var(--ease),background .15s var(--ease)}
.fb-reiter-knopf:hover{color:var(--text);background:var(--bg3)}
.fb-reiter-knopf.ist-an{background:none}

/* Kopf: die Anrede traegt, der Satz darunter ordnet sich unter. */
.fb-kopf{padding:16px 16px 10px}
.fb-kopf b{font-size:15px}

/* Schlanker Balken in den Reitern -- der breite Standardbalken nimmt im 380er-Fenster
   sichtbar Platz weg (im Browser nachgesehen, 21.08.2026). */
#fbPanel #fbNachrichten,#fbPanel #fbNeues,#fbPanel #fbStart{scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent}
#fbPanel ::-webkit-scrollbar{width:8px}
#fbPanel ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
#fbPanel ::-webkit-scrollbar-track{background:transparent}

/* Punkt am Reiter: derselbe wie an einer ungelesenen Nachricht -- eine Bedeutung, ein
   Zeichen. Im Reiter etwas kleiner, er steht neben Text und nicht in einer Zeile fuer sich. */
.fb-reiter-knopf .fb-punkt{display:inline-block;width:6px;height:6px;vertical-align:middle}

/* Geschlossener Verlauf: kein Antwortfeld, sondern der Weg in ein neues Thema. */
.fb-zu-hinweis{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.fb-neues-thema{margin-left:4px}

/* Kurztext fuer die Neuigkeiten in der Betreiber-Konsole. */
.fbk-kurztext{width:100%;font:inherit;font-size:13px;padding:8px 10px;margin-top:2px;
  border:1px solid var(--border);border-radius:var(--radius-sm)}
.fbk-kurztext:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.fbk-nebensatz{font-weight:400;color:var(--text3);font-size:11px}

/* ── Sicherheitslage ───────────────────────────────────────────────────────
   Eine Lampe je Zeile, links. Wer die Seite ueberfliegt, soll in zwei Sekunden wissen, ob
   etwas rot ist -- und erst dann lesen muessen. */
.sich-bereich{font-size:14px;font-weight:700;color:var(--text2);margin:22px 0 8px;
  text-transform:uppercase;letter-spacing:.04em}
.sich-liste{display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.sich-punkt{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg2)}
.sich-lampe{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--text3)}
.sich-text{flex:1;min-width:0}
.sich-titel{font-size:14px;font-weight:600}
.sich-erklaerung{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.5}
.sich-wert{flex:0 0 auto;font-family:var(--font-num);font-size:13px;font-weight:600;
  text-align:right;white-space:nowrap}

.sich-punkt.st-ok .sich-lampe{background:var(--green)}
.sich-punkt.st-hinweis .sich-lampe{background:var(--blue)}
.sich-punkt.st-warnung .sich-lampe{background:var(--amber)}
.sich-punkt.st-gefahr .sich-lampe{background:var(--red)}
/* "unbekannt" bleibt grau -- ein nicht gemessener Punkt darf NICHT gruen aussehen. */
.sich-punkt.st-unbekannt .sich-lampe{background:var(--text3)}
.sich-punkt.st-gefahr{background:var(--red-bg)}
.sich-punkt.st-warnung{background:var(--amber-bg)}
.sich-punkt.st-gefahr .sich-wert{color:var(--red)}
.sich-punkt.st-warnung .sich-wert{color:var(--amber)}

.ops-kachel-fuss{font-size:11px;color:var(--text3);margin-top:2px}
.ops-fuss{margin-top:24px;padding-top:12px;border-top:1px solid var(--border)}

/* Die Quittung nach dem Senden. Gruen, weil sie eine Bestaetigung ist -- und oben, wo der
   Blick nach dem Absenden ohnehin hinwandert. */
.fb-quittung{margin:0;padding:10px 16px;font-size:13px;font-weight:600;
  color:var(--green-text);background:var(--green-bg);
  border-bottom:1px solid var(--border)}

/* Ein Objekt aus der Bewertung nehmen. Zurueckhaltend: es ist ein seltener Handgriff, und
   ein auffaelliger Knopf in jeder Zeile wuerde die Tabelle uebernehmen. Der Grund steht
   nicht als Hinweisblase da, sondern in einem Feld -- eine Begruendung, die man tippen muss,
   ist eine, die spaeter jemand lesen kann. */
.abc-ausgeschlossen{margin:0 0 10px;padding:8px 12px;font-size:13px;color:var(--text2);
  background:var(--bg3);border-radius:var(--radius-sm)}
.abc-ausgeschlossen a{color:var(--accent2);text-decoration:underline;margin-left:4px}
/* Klassen-Zelle: Plakette oben, der seltene Griff klein darunter. */
.kls-zelle{white-space:normal}
.abc-aus-link{display:block;margin-top:4px;font-size:10.5px;line-height:1.2;color:var(--text3);text-decoration:none;border-bottom:0}
.abc-aus-link:hover{color:var(--accent2);border-bottom-color:var(--accent2)}
.abc-zurueck{font:inherit;font-size:10.5px;margin-top:4px;padding:3px 7px;cursor:pointer;white-space:normal;
  color:var(--accent2);background:var(--accent-light);border:1px solid var(--border);
  border-radius:999px}
tr:has(.abc-zurueck){opacity:.6}

/* Die Nachfrage-Seite zum Ausschluss. Schmal gehalten: eine Frage, vier Zahlen, ein Feld. */
.aus-daten{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 14px;font-size:13.5px}
.aus-daten dt{color:var(--text3)}
.aus-daten dd{margin:0;font-weight:600}
.aus-folge{margin:0 0 16px;padding:10px 12px;font-size:13px;color:var(--text2);
  background:var(--bg3);border-radius:var(--radius-sm)}
.aus-form label{display:block;margin:0 0 6px;font-size:13px;font-weight:600}
.aus-form input[type=text]{width:100%;font:inherit;font-size:14px;padding:9px 12px;
  color:#0f172a;border:1px solid var(--border);border-radius:8px}
.aus-knoepfe{display:flex;align-items:center;gap:12px;margin-top:14px}
.abc-abbrechen{font-size:13px;color:var(--text3);text-decoration:underline}

/* Wohin das Erledigte gegangen ist. Zurueckhaltend -- es ist ein Hinweis, keine Meldung. */
.fbk-nachklang{margin:0 0 12px;padding:8px 12px;font-size:13px;color:var(--text2);
  background:var(--bg3);border-radius:var(--radius-sm)}
.fbk-nachklang a{color:var(--accent2);text-decoration:underline;margin-left:4px}