/* Team app ▸ Aufgaben ▸ Bug Report, two-column view (24.10.2026). Started as the admin-only copy „Bug Report (neu)“
   (#botTestingView) of branch bug-report-zweispaltig with every class prefix bugs- renamed to bgn-; the same day
   it replaced the old Bug Report (bot-testing.css, modules/botTestingTab.js, both removed) for everybody under the old
   ids #botTestingView / #botTestingMount. The bar counts keep the shared class .bugs-menue-zahl (below, tabbar.css).
   Building blocks from d-bot.css (dbot-reiter, dbot-knopf, dbot-feld, dbot-trenner, dbot-zahl). The Web3 look rules
   for this view (formerly in web3-design-team.css and web3-design-privat-team.css) sit at the end of this file.
   Module: modules/botTestingNeuTab.js. */

.bgn-view { width: 100%; }

/* 11.10.: 40 % breiter (1180 → 1650 px), Nutzer: „mehr vom Bildschirm verwenden“.
   24.10.2026: full width like every Team app view, edges in line with the tab bar (docs/TEAM-APP.md „Layout“). */
#botTestingMount {
  padding: var(--space-6) 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Visually hidden, still read and focusable (the category heading, 24.10.2026). */
.bgn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Two columns (24.10.2026, user): categories left, entries of the selected one right ----------
   Below 900 px the category list becomes a pill row above the entries. The Web3 look (--w3-*) where it is on,
   else the app tokens (fallbacks), like team/team-verwaltung.css. */
#botTestingView {
  --bgn-kopf-oben: 0px;
  --bgn-karte-grund: var(--w3-karte, var(--surface-1));
  --bgn-kante: var(--w3-kante, inset 0 0 0 1px var(--border-1));
  --bgn-fuellung: var(--w3-fuellung, var(--surface-2));
  --bgn-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3));
  --bgn-kante-feld: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2));
  --bgn-akzent: var(--w3-akzent, var(--text-1));
  --bgn-radius-feld: var(--w3-radius-feld, var(--radius-md));
  --bgn-radius-karte: var(--w3-radius-karte, var(--radius-lg));
  /* Description brighter than before (user 24.10.): the Web3 hint text (white/80, light: ink/86), else text-1 softened.
     Contrast ≥ 12:1 on the card in dark and light (was white/60 ≈ 7:1). */
  --bgn-text-hell: var(--w3-text-tip, color-mix(in srgb, var(--text-1) 90%, var(--surface-1)));
}
.bgn-rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.bgn-haupt { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.bgn-kats { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bgn-kats__liste { display: flex; flex-direction: column; gap: 2px; }
.bgn-kat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--bgn-radius-feld);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.bgn-kat__name { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.bgn-kat__zahlen { grid-column: 1; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.bgn-kat__dringend { color: var(--text-danger); font-weight: var(--fw-semibold); }
/* In the column the count line says it all; the number badge is for the pill row. */
.bgn-kat__zahl { display: none; }
.bgn-kat:hover { background: var(--w3-zeile-hover, var(--surface-2)); color: var(--text-1); }
.bgn-kat.is-aktiv { background: var(--bgn-fuellung-stark); box-shadow: var(--bgn-kante); color: var(--text-1); }
.bgn-kat.is-aktiv .bgn-kat__name { font-weight: var(--fw-semibold); }
.bgn-kat.is-aktiv::before {
  content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2); width: 3px;
  border-radius: var(--radius-pill); background: var(--bgn-akzent);
}
.bgn-kat:focus-visible, .bgn-kats__plus:focus-visible, .bgn-seite:focus-visible, .bgn-name:focus-visible,
.bgn-toast__knopf:focus-visible, .bgn-kopf__titel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Vorschlag-Bot set apart at the end of the list */
.bgn-kat.is-vorschlag { margin-top: var(--space-4); }
.bgn-kat.is-vorschlag::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); top: calc(-1 * var(--space-2) - 1px); height: 1px;
  background: var(--w3-rand-leise, var(--border-1));
}
.bgn-kat.is-vorschlag:not(.is-aktiv) .bgn-kat__name { color: var(--gold); }
.bgn-kats__plus {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3);
  border: 1px dashed var(--border-3); border-radius: var(--bgn-radius-feld); background: transparent;
  color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer;
}
.bgn-kats__plus:hover { color: var(--text-1); border-color: var(--text-3); }
.bgn-kats__plus-zeichen { font-size: var(--fs-17); line-height: 1; }

@media (min-width: 900px) {
  .bgn-rahmen { grid-template-columns: minmax(208px, 256px) minmax(0, 1fr); gap: var(--space-6); }
  /* Sticky below the app bar; short enough never to need an inner scroll (13 rows ≈ 640 px). */
  .bgn-kats {
    position: sticky; top: calc(var(--bgn-kopf-oben) + var(--space-4));
    padding: var(--space-2);
    border-radius: var(--bgn-radius-karte);
    background: var(--bgn-karte-grund);
    background-image: var(--w3-glanz, none);
    box-shadow: var(--bgn-kante);
  }
  .bgn-kats__plus { margin: var(--space-1) 0 0; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .bgn-kat { min-height: 36px; padding-block: var(--space-1); }
}
/* Pill row below 900 px (wraps, never scrolls sideways) */
@media (max-width: 899.98px) {
  .bgn-kats { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bgn-kats__liste { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
  .bgn-kat {
    display: inline-flex; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3);
    border-radius: var(--radius-pill); background: var(--bgn-fuellung); box-shadow: var(--bgn-kante-feld); font-size: var(--fs-13);
  }
  .bgn-kat__zahlen { display: none; }
  .bgn-kat__zahl { display: inline-block; }
  .bgn-kat.is-aktiv::before, .bgn-kat.is-vorschlag::after { display: none; }
  .bgn-kat.is-aktiv { background: var(--bgn-fuellung-stark); box-shadow: var(--bgn-kante), inset 0 0 0 1px var(--bgn-akzent); }
  .bgn-kat.is-vorschlag { margin-top: 0; outline: 1px dashed var(--gold-rand); outline-offset: -1px; }
  .bgn-kats__plus { min-height: 36px; border-radius: var(--radius-pill); }
}

/* Category dropdown up to 600 px (Designkatalog/Dropdown, like the Tier dropdown in team/team-pp-nutzer.css):
   „Kategorie: V3 Bot · 5 offen“, the list right below the button. Above 600 px the pills/column stay. */
.bgn-dd { display: none; position: relative; width: 100%; min-width: 0; }
.bgn-dd-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 var(--space-3) 0 var(--space-4);
  border: 0; border-radius: var(--bgn-radius-feld); background: var(--input-bg, var(--bgn-fuellung));
  box-shadow: var(--bgn-kante-feld); color: var(--text-1); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer;
}
.bgn-dd-knopf:hover { background: var(--bgn-fuellung-stark); }
.bgn-dd-knopf:focus-visible, .bgn-dd-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgn-dd-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgn-dd-etikett { color: var(--text-3); }
.bgn-dd-name { font-weight: var(--fw-semibold); }
.bgn-dd-zahlen { color: var(--text-2); font-variant-numeric: tabular-nums; }
.bgn-dd-pfeil { color: var(--text-3); transition: transform var(--t-fast, .12s); }
.bgn-dd.ist-offen .bgn-dd-pfeil { transform: rotate(180deg); }
.bgn-dd-menue {
  position: absolute; z-index: var(--z-dropdown, 100); top: calc(100% + var(--space-1)); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; padding: var(--space-1);
  border-radius: var(--bgn-radius-karte); background: var(--w3-popover, var(--surface-2));
  box-shadow: var(--bgn-kante), var(--w3-schatten, var(--shadow-md));
  animation: bgn-dd-rein var(--t-fast, .12s) ease both;
}
.bgn-dd-menue[hidden] { display: none; }
@keyframes bgn-dd-rein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.bgn-dd-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-3);
  min-height: 40px; box-sizing: border-box; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-1); font-size: var(--fs-14); cursor: pointer;
}
.bgn-dd-option:hover, .bgn-dd-option:focus { background: var(--bgn-fuellung-stark); outline: none; }
.bgn-dd-option[aria-selected="true"] { font-weight: var(--fw-semibold); }
.bgn-dd-option.is-vorschlag { margin-top: var(--space-1); box-shadow: inset 0 1px 0 var(--w3-rand-leise, var(--border-1)); }
.bgn-dd-option.is-vorschlag:not([aria-selected="true"]) .bgn-dd-text { color: var(--gold); }
.bgn-dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgn-dd-zahl { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bgn-dd-haken { width: 16px; height: 16px; color: var(--check, var(--bgn-akzent)); }
@media (max-width: 600px) {
  .bgn-dd { display: block; }
  .bgn-kats__liste { display: none; }
}

/* Toolbar on top (24.10.2026, user: no title, no category head): search and both toggles left, pencil and
   „+ Neuer Eintrag“ right, the status line below across the full width (its reserved line keeps everything
   below in place). It spans both columns, so the category list and the entries start on the same line. */
.bgn-kopf { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.bgn-kopf .bgn-filter { flex: 1 1 auto; min-width: 0; }
.bgn-kopf .bgn-kopf-knoepfe { margin-left: auto; }
.bgn-kopf__meldung { flex: 1 0 100%; }
.bgn-zahl.is-offen { background: var(--gold-flaeche); color: var(--gold); }
.bgn-zahl.is-null { opacity: .5; }
.bgn-zahl.is-dringlich { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text-danger); }

/* Count at the bar entry „Bug Report“ and its sub-menu entries (leiste.js); shared class .bugs-menue-zahl, moved here
   from bot-testing.css (24.10.2026). Placement in the menu: tabbar.css. */
.bugs-menue-zahl {
  margin-left: auto;
  min-width: 22px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--gold-flaeche);
  color: var(--gold);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bugs-menue-zahl.is-null { background: var(--surface-3); color: var(--text-3); }
.bugs-menue-zahl.is-dringlich { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text-danger); }

/* ---------- Formular ---------- */

.bgn-formular {
  border: 1px solid var(--gold-rand);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bgn-formular--bearbeiten { border-color: var(--border-3); }
.bgn-formular__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bgn-formular__kopf h3 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-1); }
.bgn-art { display: inline-flex; gap: var(--space-1); }
.bgn-etikett-zaehler { display: flex; align-items: baseline; gap: var(--space-2); }
.bgn-zeichen { margin-left: auto; font-size: var(--fs-11); color: var(--text-3); font-variant-numeric: tabular-nums; }
.bgn-fehlt { margin: 0; font-size: var(--fs-12); color: var(--text-danger); }

.bgn-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.bgn-stufe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
}
.bgn-stufe:hover { border-color: var(--border-3); }
.bgn-stufe:focus-visible, .bgn-erledigt-kopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgn-stufe__name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-13); color: var(--text-1); }
.bgn-stufe__text { font-size: var(--fs-12); color: var(--text-3); line-height: var(--lh-normal); }
.bgn-stufe.is-gewaehlt.is-dringlich { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.bgn-stufe.is-gewaehlt.is-noetig { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.bgn-stufe.is-gewaehlt.is-nice { border-color: var(--border-3); background: var(--surface-2); }

.bgn-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.is-dringlich > .bgn-punkt, .is-dringlich .bgn-stufe__name .bgn-punkt { background: var(--danger); }
.is-noetig > .bgn-punkt, .is-noetig .bgn-stufe__name .bgn-punkt { background: var(--warning); }

/* ---------- Liste ---------- */

.bgn-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.bgn-karte.is-dringlich:not(.is-erledigt) { border-left: 3px solid var(--danger); }
/* Nötig (Nutzer 11.10.): wie Dringlich ein Streifen vorn, leicht orange. */
.bgn-karte.is-noetig:not(.is-erledigt) { border-left: 3px solid color-mix(in srgb, var(--warning) 70%, transparent); }
.bgn-karte.is-frisch { border-color: var(--gold-rand); }
.bgn-karte.is-erledigt { background: transparent; }
.bgn-karte.is-erledigt .bgn-name { color: var(--text-3); text-decoration-line: underline line-through; }
.bgn-karte.is-erledigt .bgn-beschreibung { color: var(--text-3); }

.bgn-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bgn-zeile1 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Title on its own line below „Dringlich · Bug“ (user 24.10.2026): larger, semibold, ALWAYS underlined (FRF Design
   24.10.2026) – quiet text-3 line at rest, text-1 and thicker on hover/focus. It is a button that opens the details,
   so the underline means something. The bottom padding keeps the line inside the box: closed cards clip the title
   (overflow hidden for the ellipsis), which used to cut the underline off – it only showed on open cards. */
.bgn-titelzeile { margin: 0; min-width: 0; font-size: var(--fs-17); line-height: var(--lh-tight); }
.bgn-karte .bgn-name {
  display: inline-block; max-width: 100%; padding: 0 0 var(--space-1); margin-bottom: calc(-1 * var(--space-1));
  border: 0; border-radius: 2px; background: none;
  font: inherit; font-weight: var(--fw-semibold); color: var(--text-1); text-align: left; cursor: pointer;
  text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--text-3);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--t-fast, .12s);
}
.bgn-karte .bgn-name:hover, .bgn-karte .bgn-name:focus-visible { text-decoration-color: var(--text-1); text-decoration-thickness: 2px; }
.bgn-name { font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }
.bgn-beschreibung {
  --bgn-zeile: 1.6em;
  margin: 0; font-size: var(--fs-14); line-height: var(--bgn-zeile);
  color: var(--bgn-text-hell, color-mix(in srgb, var(--text-1) 90%, var(--surface-1)));
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bgn-beschreibung.is-leer { color: var(--text-3); font-style: italic; }
/* Full width (24.10.2026): the text keeps a readable line length (low specificity, own rules win). */
:where(#botTestingMount .bgn-beschreibung) { max-width: 72ch; }
/* Closed: title one line, text exactly two lines – every card the same height; „mehr“ opens the rest. */
.bgn-karte.is-zu .bgn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.bgn-karte.is-zu .bgn-beschreibung {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; max-height: calc(2 * var(--bgn-zeile));
}
/* Short entries (FRF Design 24.10.2026): the meta line follows the text directly, no reserved second line. */
.bgn-text > .bgn-fuss { margin-top: calc(-1 * var(--space-1)); }
/* „mehr ▾ · N Bilder“ sits right after the meta line, not at the far end (user 25.10.2026). */
.bgn-fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--space-1) var(--space-3); }
.bgn-karte.is-klappbar { cursor: pointer; }
/* Nur oben/rechts/unten: der farbige Streifen links (Dringlich/Nötig) bleibt. */
.bgn-karte.is-klappbar:hover { border-top-color: var(--border-3); border-right-color: var(--border-3); border-bottom-color: var(--border-3); }
.bgn-mehr { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: var(--fs-12); cursor: pointer; }
.bgn-mehr:hover { text-decoration: underline; }
.bgn-mehr:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.bgn-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-rand); }
.bgn-link:hover { border-bottom-color: var(--gold); }
.bgn-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.bgn-quellen { display: inline-flex; gap: var(--space-2); }
.bgn-meta { font-size: var(--fs-12); color: var(--text-3); }
/* Team app (25.10.2026): author circle with the Discord picture over the initials (team/teamAvatar.js). */
.bgn-av { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--text-2); font-size: 9px; font-weight: var(--fw-semibold); line-height: 1; }
/* Team app, mode „Scrollen“ (botTestingNeuTab.js passeListe → team/teamListen.js): the entries scroll inside, down to the
   bottom of the viewport; a little room for the card borders. */
.bgn-liste.tl-scroll { padding: 1px 6px 1px 1px; margin: -1px -6px -1px -1px; }

.bgn-stufe-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
.bgn-stufe-chip.is-dringlich { color: var(--text-danger); }
.bgn-stufe-chip.is-noetig { color: var(--text-warning); }
.bgn-art-chip {
  font-size: var(--fs-11);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-3);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.bgn-art-chip.is-bug { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--text-danger); }

/* ---------- Status neu / in Bearbeitung / erledigt (26.10.2026) ---------- */
/* Mark in line 1 of an open card: hollow dot = new, accent = in progress (the app's accent, no new colour). */
.bgn-status-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--space-2);
  border: 1px solid var(--border-3); border-radius: var(--radius-pill);
  font-size: var(--fs-11); color: var(--text-2); white-space: nowrap;
}
.bgn-status-chip.is-in_arbeit { border-color: var(--gold-rand); background: var(--gold-hauch); color: var(--gold); font-weight: var(--fw-semibold); }
.bgn-status-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; box-sizing: border-box; border: 1.5px solid currentColor; }
.bgn-status-punkt.is-in_arbeit { background: currentColor; }
/* Switch in the actions column: one connected segmented control (Designkatalog/Tabs), stacked like the buttons below
   it; a row on phones. The active segment carries the accent, „Erledigt“ keeps its check icon. */
.bgn-status-wahl {
  display: flex; flex-direction: column; gap: 2px; padding: 2px;
  border: 1px solid var(--border-2); border-radius: var(--radius-md);
}
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg {
  display: flex; align-items: center; min-height: 30px; justify-content: flex-start; text-align: left; gap: var(--space-2); border-color: transparent; background: transparent; box-shadow: none;
  color: var(--text-2); font-size: var(--fs-12);
}
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg:hover:not([disabled]) { color: var(--text-1); background: var(--bgn-fuellung); }
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg.is-aktiv {
  color: var(--gold); background: var(--gold-hauch); border-color: var(--gold-rand); font-weight: var(--fw-semibold); cursor: default;
}
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgn-status-wahl .bgn-status-punkt { margin-inline: 3px; }
/* Status pills above the open entries: the count beside each label. */
.bgn-status-filter { align-self: flex-start; width: fit-content; margin: 0 0 var(--space-1); max-width: 100%; flex-wrap: wrap; }
.bgn-status-filter .bgn-filter__wahl { display: inline-flex; align-items: center; }
.bgn-status-filter .bgn-filter__wahl { gap: var(--space-1); }
.bgn-status-filter__zahl { font-variant-numeric: tabular-nums; color: var(--text-3); }
.bgn-status-filter .is-aktiv .bgn-status-filter__zahl { color: inherit; }
/* Edit form: category pills wrap (up to ~15 categories). */
.bgn-form-kategorie { flex-wrap: wrap; border-radius: var(--radius-md); max-width: 100%; }
.bgn-bearbeiten-knopf { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Actions stacked in the right column, full-size buttons of equal width (user 25.10.2026: there is room). */
.bgn-aktionen { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 9rem; }
:root #botTestingView .bgn-aktionen .dbot-knopf { min-height: 34px; padding: 0 var(--space-4); font-size: var(--fs-13); justify-content: center; text-align: center; }
/* „Löschen“ / „Verwerfen“: quiet, red only on hover/focus (undo via toast instead of a second click).
   :root raises the weight above the Web3 button rules (the Web3 rules for #botTestingView .dbot-knopf at the end of this file). */
:root #botTestingView .dbot-knopf.bgn-loeschen { color: var(--text-3); background: transparent; border-color: transparent; box-shadow: none; }
:root #botTestingView .dbot-knopf.bgn-loeschen:hover:not([disabled]),
:root #botTestingView .dbot-knopf.bgn-loeschen:focus-visible {
  color: var(--text-danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: transparent;
}
:root #botTestingView .dbot-knopf.bgn-loeschen:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* „Erledigt“ / „Wieder öffnen“: secondary button with an icon (not the primary accent). */
.bgn-erledigt-knopf { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Two columns: status | buttons (26.10.2026, user: „eine spalte für status machen und eine spalte für die
   buttons nebeneinander“) ---------- */
.bgn-karte { container: bgn-karte / inline-size; }
.bgn-aktionen.bgn-aktionen--spalten { flex-direction: row; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.bgn-aktionen--spalten > .bgn-status-wahl { flex: 0 0 auto; min-width: 9.5rem; }
.bgn-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 7.5rem; }
.bgn-knoepfe:empty { display: none; }
/* Narrow card: stacked again, the status as a 2 × 2 grid (four segments do not fit in one row), never sideways scroll. */
@container bgn-karte (max-width: 390px) {
  .bgn-aktionen.bgn-aktionen--spalten { flex-direction: column; align-items: stretch; width: 100%; }
  .bgn-aktionen--spalten > .bgn-status-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  :root #botTestingView .bgn-aktionen--spalten .bgn-status-wahl .dbot-knopf.bgn-status-seg { min-width: 0; justify-content: center; gap: var(--space-1); padding: 0 var(--space-2); }
  .bgn-aktionen--spalten .bgn-status-seg > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bgn-knoepfe { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

/* ---------- Rejected (26.10.2026): red only as a sparing mark (chip, active segment, hint line) ---------- */
.bgn-status-chip.is-abgelehnt { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--text-danger); font-weight: var(--fw-semibold); }
.bgn-status-chip .bgn-symbol { width: 11px; height: 11px; }
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg.is-abgelehnt.is-aktiv,
:root #botTestingView .bgn-status-wahl .dbot-knopf.bgn-status-seg.is-abgelehnt.is-offen {
  color: var(--text-danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.bgn-karte.is-abgelehnt .bgn-name { text-decoration-line: underline; }
.bgn-grund { margin: 0; font-size: var(--fs-13); color: var(--text-2); overflow-wrap: anywhere; }
.bgn-grund__etikett { color: var(--text-3); }
.bgn-ablehnen {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); cursor: default;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 5%, transparent);
}
.bgn-ablehnen .dbot-aktionen { flex-wrap: wrap; }
.bgn-aehnlich--abgelehnt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--text-danger); }
.bgn-aehnlich--abgelehnt .bgn-mehr { color: inherit; }
.bgn-treffer.is-abgelehnt { border-color: color-mix(in srgb, var(--danger) 35%, transparent); cursor: pointer; }
.bgn-treffer__wann { margin: 0; font-size: var(--fs-12); color: var(--text-3); }
.bgn-treffer .bgn-mehr[data-aktion="zeigen"] { align-self: flex-start; }

/* Dialog „Das gab es schon“ (Designkatalog/Modal standard, size sm–md) */
.bgn-modal {
  position: fixed; inset: 0; z-index: var(--z-modal, 200); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-4);
  background: var(--overlay); backdrop-filter: blur(3px); animation: bgn-modal-rein var(--t-fast, .12s) ease both;
}
.bgn-modal__karte {
  /* min-width 0 + the one minmax(0, 1fr) column: a long title (nowrap, ellipsis) never widens the card past the screen
     (probe n183: the card stood ~60 px over the right edge at 390 px). */
  width: min(520px, 100%); min-width: 0; max-height: 85vh; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--border-1); border-radius: var(--radius-xl);
  background: var(--w3-popover, var(--surface-1)); box-shadow: var(--shadow-lg); color: var(--text-1);
}
.bgn-modal__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.bgn-modal__titel { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-semibold); }
.bgn-modal__zu {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--fs-20); line-height: 1; cursor: pointer;
}
.bgn-modal__zu:hover { color: var(--text-1); background: var(--bgn-fuellung, var(--surface-2)); }
.bgn-modal__zu:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgn-modal__text { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.bgn-modal__inhalt { display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; min-height: 0; }
.bgn-modal__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-1); }
@keyframes bgn-modal-rein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bgn-modal { animation: none; } }
.bgn-symbol { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bgn-erledigt-knopf.is-laeuft { opacity: .6; cursor: progress; }
.bgn-erledigt-kopf { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.bgn-leer { margin: 0; padding: var(--space-6); text-align: center; color: var(--text-2); border: 1px dashed var(--border-2); border-radius: var(--radius-md); }

/* Pager (like depegTab.js): no inner scroll, 10 entries per page */
.bgn-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.bgn-seiten__info { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.bgn-seiten__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.bgn-seite {
  min-width: 32px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--bgn-radius-feld);
  background: var(--bgn-fuellung); box-shadow: var(--bgn-kante-feld); color: var(--text-2);
  font: inherit; font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bgn-seite:hover:not([disabled]):not(.bgn-seite--luecke) { color: var(--text-1); background: var(--bgn-fuellung-stark); }
.bgn-seite[aria-current="page"] { background: var(--bgn-fuellung-stark); box-shadow: var(--bgn-kante); color: var(--text-1); font-weight: var(--fw-semibold); }
.bgn-seite[disabled] { opacity: .4; cursor: default; }
.bgn-seite--luecke { display: inline-grid; place-items: center; background: none; box-shadow: none; cursor: default; }

/* Toast with „Rückgängig“ (Designkatalog/Toast, like team-pp-nutzer.css) */
.bgn-toast {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-toast, 60); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-4);
  max-width: calc(100vw - 2 * var(--space-4)); box-sizing: border-box; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-pill); background: var(--w3-popover, var(--surface-3)); box-shadow: var(--w3-schatten, var(--shadow-md)), inset 0 0 0 1px var(--border-2);
  color: var(--text-1); font-size: var(--fs-13);
  animation: bgn-toast-rein var(--t-fast, .12s) ease both;
}
.bgn-toast__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgn-toast__knopf {
  flex: 0 0 auto; height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: var(--bgn-fuellung-stark); box-shadow: var(--bgn-kante-feld); color: var(--text-1);
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer;
}
.bgn-toast__knopf:hover { background: var(--bgn-fuellung); }
@keyframes bgn-toast-rein { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 640px) {
  #botTestingMount { padding-inline: 0; }
  .bgn-karte { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  .bgn-aktionen { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  /* Phone: the card is one column; status and buttons stay two columns below the text until the card is narrower
     than 390 px (container query below). */
  .bgn-aktionen--spalten { flex-wrap: nowrap; }
  .bgn-stufen { grid-template-columns: 1fr; }
  .bgn-kopf-knoepfe { width: 100%; }
  /* Phone: a closed card's title gets two lines before the ellipsis; one line cut half of them after ~28 characters
     (responsive pass 25.10.2026). The bottom padding keeps the underline of the second line inside the clip. */
  .bgn-karte.is-zu .bgn-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* ---------- Bilder (11.10.2026) ---------- */

/* Großansicht: in beiden Themen dunkel hinterlegt (das Bild soll wirken),
   deshalb eigene Werte statt der Thema-Flächen. */
:root {
  --bgn-gross-grund: rgba(0, 0, 0, .86);
  --bgn-gross-bildgrund: #fff;
  --bgn-gross-knopf: rgba(20, 20, 22, .8);
  --bgn-gross-knopf-rand: rgba(255, 255, 255, .25);
  --bgn-gross-text: #fff;
  --bgn-gross-zahl: rgba(255, 255, 255, .8);
}

.bgn-formular.is-ziel { border-color: var(--gold); background: var(--gold-hauch); }

.bgn-anhang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.bgn-anhang__bild { position: relative; width: 84px; height: 64px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-0); }
.bgn-anhang__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgn-anhang__weg {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: var(--overlay, rgba(0, 0, 0, .65)); color: var(--text-1);
  font-size: 14px; line-height: 20px; cursor: pointer;
}
.bgn-anhang__weg:hover { background: var(--danger); }
.bgn-anhang__plus {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 84px; height: 64px; border: 1px dashed var(--border-3); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-12); cursor: pointer;
}
.bgn-anhang__plus:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.bgn-anhang__plus[disabled] { opacity: .45; cursor: default; }
.bgn-anhang__plus-zeichen { font-size: var(--fs-20); line-height: 1; }
.bgn-anhang__hinweis { font-size: var(--fs-12); color: var(--text-3); }
.bgn-anhang__weg:focus-visible, .bgn-anhang__plus:focus-visible, .bgn-vorschau__bild:focus-visible, .bgn-gross button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bgn-vorschau { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.bgn-vorschau__bild { width: 96px; height: 72px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-0); cursor: zoom-in; }
.bgn-vorschau__bild:hover { border-color: var(--border-3); }
.bgn-vorschau__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Großansicht über allem; Bild so groß wie der Bildschirm erlaubt. */
.bgn-gross {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-10);
  background: var(--bgn-gross-grund);
}
.bgn-gross__bild { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: var(--bgn-gross-bildgrund); }
.bgn-gross__zu, .bgn-gross__pfeil {
  position: absolute; border: 1px solid var(--bgn-gross-knopf-rand); border-radius: 50%;
  background: var(--bgn-gross-knopf); color: var(--bgn-gross-text); cursor: pointer; font-size: 22px; line-height: 1;
  width: 40px; height: 40px; display: grid; place-items: center;
}
.bgn-gross__zu { top: var(--space-4); right: var(--space-4); }
.bgn-gross__pfeil.is-links { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.bgn-gross__pfeil.is-rechts { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.bgn-gross__zahl { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); color: var(--bgn-gross-zahl); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .bgn-gross { padding: var(--space-10) var(--space-2); }
  .bgn-gross__pfeil { top: auto; bottom: var(--space-3); transform: none; }
}

/* ---------- Suche und Filter (11.10.2026) ---------- */

.bgn-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bgn-filter .bgn-suche { flex: 1 1 280px; max-width: 520px; }
.bgn-filter__gruppe { display: inline-flex; gap: var(--space-1); padding: 2px; border: 1px solid var(--border-2); border-radius: var(--radius-pill); }
.bgn-filter__wahl { border-color: transparent; padding: 2px var(--space-3); font-size: var(--fs-12); }
.bgn-filter__info { margin: 0 0 var(--space-1); font-size: var(--fs-12); color: var(--text-3); }
.bgn-bot-chip { border-color: var(--gold-rand); color: var(--gold); text-transform: none; letter-spacing: 0; }
.bgn-filter__info .bgn-mehr { margin-left: var(--space-1); }
.bgn-zahl.is-treffer { background: var(--surface-3); color: var(--text-1); }

/* ---------- Prüfung auf Doppelte ---------- */

.bgn-pruefung { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); }
.bgn-pruefung.is-laeuft { flex-direction: row; align-items: center; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-13); background: var(--surface-0); }
.bgn-pruefung__kreis {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--border-3); border-top-color: var(--gold);
  animation: bgn-dreh .8s linear infinite;
}
@keyframes bgn-dreh { to { transform: rotate(360deg); } }
.bgn-pruefung.is-treffer { border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 7%, transparent); animation: bgn-auf .25s ease-out 1; }
@keyframes bgn-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bgn-pruefung__titel { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-14); color: var(--text-warning); }
.bgn-pruefung__text { margin: 0; font-size: var(--fs-13); color: var(--text-2); }

.bgn-treffer { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-1); cursor: pointer; }
.bgn-treffer .bgn-zeile1 { flex-wrap: nowrap; }
.bgn-treffer .bgn-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgn-treffer__status { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.bgn-treffer.is-erledigt .bgn-treffer__status { color: var(--text-success); }
.bgn-treffer__text {
  margin: 0; font-size: var(--fs-13); line-height: 1.5em; color: color-mix(in srgb, var(--text-1) 75%, var(--surface-1));
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bgn-treffer.is-auf .bgn-treffer__text { display: block; }
.bgn-treffer.is-auf .bgn-name { white-space: normal; }

/* „✓ Gespeichert“: kurz aufleuchten. */
.dbot-meldung.bgn-ok { color: var(--text-success); font-weight: var(--fw-semibold); animation: bgn-ok 1.6s ease-out 1; }
@keyframes bgn-ok {
  0% { opacity: 0; transform: scale(.96); }
  15% { opacity: 1; transform: scale(1.04); }
  30% { transform: none; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bgn-pruefung__kreis { animation-duration: 2s; }
  .bgn-pruefung.is-treffer, .dbot-meldung.bgn-ok, .bgn-toast { animation: none; }
  .bgn-kat { transition: none; }
  .bgn-dd-menue { animation: none; }
  .bgn-dd-pfeil, .bgn-karte .bgn-name { transition: none; }
}

/* ---------- Vorschlag-Bot (11.10.2026) ---------- */

/* Categories (22.10.2026): admin „+“ at the end of the bar, hidden categories dimmed (admins only) */
/* pencil and „+ Neuer Eintrag“ stay together on the right */
.bgn-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bgn-reiter-aus:not(.is-aktiv) { opacity: 0.55; }
.bgn-reiter-aus .bgn-kat__name { font-style: italic; }
.bgn-bereich-formular textarea { resize: vertical; }
.bgn-aehnlich { margin: 0; font-size: var(--fs-12); color: var(--text-warning); }
.bgn-uebernehmen {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3);
  border: 1px solid var(--gold-rand); border-radius: var(--radius-sm); background: var(--gold-hauch); cursor: default;
}
.bgn-uebernehmen .bgn-filter__gruppe { flex-wrap: wrap; border-radius: var(--radius-md); }

/* ---------- Web3 look (copy of the #botTestingView rules of web3-design-team.css, 24.10.2026) ---------- */
html[data-frf-design="web3"] :is(#botTestingView, .bgn-gross) {
  --gold: var(--w3-akzent);
  --gold-rand: var(--w3-akzent-rand);
  --gold-flaeche: var(--w3-akzent-flaeche);
  --gold-hauch: var(--w3-akzent-hauch);
}
html[data-frf-design="web3"] #botTestingView .dbot-reiter-leiste,
html[data-frf-design="web3"] #botTestingView .bgn-filter__gruppe {
  padding: 3px;
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
/* Wrapping category pills (edit form): a pill-shaped frame around several rows looks like a blob on phones. */
html[data-frf-design="web3"] #botTestingView .bgn-filter__gruppe.bgn-form-kategorie { border-radius: var(--radius-md); }
html[data-frf-design="web3"] #botTestingView .dbot-reiter {
  border-color: transparent;
  background: transparent;
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #botTestingView .dbot-reiter:hover { color: var(--w3-text); }
html[data-frf-design="web3"] #botTestingView .dbot-reiter.is-aktiv {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf:hover:not([disabled]) {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt {
  border-color: var(--w3-akzent);
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt:hover:not([disabled]) {
  border-color: var(--w3-akzent);
  background: var(--w3-akzent);
  box-shadow: none;
  opacity: 0.8;
}
/* The Web3 rules above set box-shadow with more weight than .dbot-knopf:focus-visible (d-bot.css): the ring again. */
html[data-frf-design="web3"] #botTestingView .dbot-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt.is-armiert {
  border-color: var(--w3-warnung);
  background: transparent;
  color: var(--w3-warnung);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--gefahr {
  border-color: transparent;
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] #botTestingView :is(.dbot-suche, input[type="text"], input[type="search"], textarea, select) {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #botTestingView .dbot-suche { border-radius: var(--w3-radius-feld); }
/* Am Handy bricht die Bot-Leiste um: Spur als gerundete Fläche statt Pille. */
@media (max-width: 700px) {
  html[data-frf-design="web3"] #botTestingView .dbot-reiter-leiste { border-radius: var(--w3-radius-karte); }
}

/* ---------- Web3 look, private FRF only (copy of web3-design-privat-team.css; title semibold, description
   brighter as in the redesign) ---------- */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView :is(.bgn-karte, .bgn-formular) {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-formular { border-color: var(--w3-akzent-rand); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-formular--bearbeiten { border-color: var(--w3-rand); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-formular.is-ziel { border-color: var(--w3-akzent); background: var(--w3-glanz), var(--w3-akzent-hauch); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-karte.is-dringlich:not(.is-erledigt) { border-left-color: var(--w3-negativ); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-karte.is-noetig:not(.is-erledigt) { border-left-color: color-mix(in srgb, var(--w3-warnung) 70%, transparent); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-karte.is-frisch { border-color: var(--w3-akzent-rand); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-karte.is-klappbar:hover { background: var(--w3-glanz), var(--w3-zeile-hover); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-karte.is-erledigt {
  background: transparent;
  border-color: var(--w3-rand-leise);
  box-shadow: none;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-name { font-weight: var(--fw-semibold); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-beschreibung { color: var(--bgn-text-hell); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-art-chip { border-radius: var(--w3-radius-feld); }
/* Stufen-Wahl (Dringlich / Nötig / Nice to have) als Feld; gewählt behält die Signalfarbe. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-stufe {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-stufe:hover { background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-stufe.is-gewaehlt.is-dringlich { border-color: var(--w3-negativ); background: color-mix(in srgb, var(--w3-negativ) 10%, transparent); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-stufe.is-gewaehlt.is-noetig { border-color: var(--w3-warnung); background: color-mix(in srgb, var(--w3-warnung) 10%, transparent); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-stufe.is-gewaehlt.is-nice { border-color: var(--w3-rand); background: var(--w3-fuellung-stark); }
/* Felder: Zeilen ganz gerundet, Textfelder in der Kartenrundung; Fokus im Ring. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView :is(input[type="text"], input[type="search"], input:not([type]), select) { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView textarea { border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView :is(.dbot-suche, .dbot-feld, input, textarea, select):focus {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-leer {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  color: var(--w3-text-3);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView :is(.bgn-treffer, .bgn-pruefung) { border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView :is(.bgn-anhang__bild, .bgn-anhang__plus, .bgn-vorschau__bild) { border-radius: var(--w3-radius-tip); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .dbot-zahl { background: var(--w3-fuellung-stark); color: var(--w3-text-2); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .dbot-reiter.is-aktiv .dbot-zahl { color: var(--w3-text); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-zahl.is-offen { background: var(--w3-akzent-flaeche); color: var(--w3-akzent); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .bgn-zahl.is-dringlich { background: color-mix(in srgb, var(--w3-negativ) 22%, transparent); color: var(--w3-negativ-text); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #botTestingView .dbot-trenner { font-weight: 500; }

/* Esc with typed text asks first (26.10.2026, user: „nachfragen“): a short question above the form's buttons. */
.bgn-esc-frage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent);
}
.bgn-esc-frage p { margin: 0; min-width: 0; font-size: var(--fs-13); color: var(--text-1); }
.bgn-esc-frage .dbot-aktionen { margin: 0; }
.bgn-esc-frage .bgn-esc-verwerfen,
html[data-frf-design="web3"] #botTestingView .bgn-esc-frage .bgn-esc-verwerfen { color: var(--danger); }