/* Das hidden-Attribut MUSS verstecken — auch bei Elementen mit eigenem display
   (Flex/Grid würde [hidden]{display:none} sonst überschreiben). */
[hidden] { display: none !important; }

/* Farbschema angelehnt an broschart.net (Light: Creme / Teal / Gold) */
:root {
  --bg: #e6f5ee;          /* Hellmint (Seitenhintergrund) */
  --card: #ffffff;        /* Karten */
  --card-alt: #e3efe9;    /* sehr helles Grün (leicht kräftiger) */
  --border: #dde7e2;      /* helle Ränder */
  --text: #0d1410;        /* fast-schwarzes Dunkelgrün */
  --muted: #566058;       /* gedämpftes Graugrün (etwas dunkler für Kontrast) */
  --nav-active: #cfe8dc;  /* Hinterlegung aktiver/gehoverter Menüpunkte (kräftigeres Grün) */
  --accent: #0d7373;      /* Teal (Primär) */
  --accent-hover: #0b6262;/* dunkleres Teal */
  --gold: #c8941a;        /* Gold-Akzent (aus #fdd782 abgeleitet, lesbar) */
  --gold-bg: #fdf3da;     /* heller Gold-Hintergrund */
  --danger: #b3261e;
  --pos: #1f7a5a;
  --own: var(--gold);
  /* Body-Hintergrundverlauf (über das Theme-Widget der Startseite einstellbar) */
  --grad-angle: 180deg;
  --grad-1: #f4fbf8;      /* oben */
  --grad-2: #e6f5ee;      /* Mitte (= --bg) */
  --grad-mid: 45%;        /* Position des mittleren Farbstopps */
  --grad-3: #d8efe4;      /* unten */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Hellmint-Verlauf: oben heller, nach unten etwas kräftiger — Stopps via Theme-Widget */
  background: linear-gradient(var(--grad-angle), var(--grad-1) 0%, var(--grad-2) var(--grad-mid), var(--grad-3) 100%);
  background-attachment: fixed;
  color: var(--text);
}
header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: var(--card);
}
header h1 { font-size: 20px; margin: 0; color: var(--accent); letter-spacing: .2px; }
header h1.brand { display: flex; align-items: center; }
.brand-logo { height: 22px; width: auto; display: block; }
/* Monochrome Inline-Icons (currentColor) — ersetzen farbige Emoji systemweit. */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; flex: 0 0 auto; }
.ic-fill { fill: currentColor; stroke: none; }
.som-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13.5px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; z-index: 1300;
  transition: opacity .18s, transform .18s; }
/* Globaler Aufnahme-Modus (Selektor-FAB unten links) + Mappe */
.cap-fab-wrap { position: fixed; left: 20px; bottom: 20px; z-index: 1250; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cap-fab-wrap[hidden] { display: none; }
.cap-fab { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(13,115,115,.45);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, background .12s, box-shadow .12s; }
.cap-fab:hover { transform: translateY(-2px); background: var(--accent-hover); }
.cap-fab[aria-pressed="true"] { background: #d4541a; animation: capfab-pulse 1.5s ease-out infinite; }
@keyframes capfab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,84,26,.6), 0 4px 16px rgba(212,84,26,.5); }
  70%  { box-shadow: 0 0 0 13px rgba(212,84,26,0), 0 4px 16px rgba(212,84,26,.5); }
  100% { box-shadow: 0 0 0 0 rgba(212,84,26,0), 0 4px 16px rgba(212,84,26,.5); }
}
.cap-mappe-btn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.cap-mappe-btn:hover { border-color: var(--accent); }
.cap-mappe-btn .ic { width: 20px; height: 20px; }
.cap-mappe-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #d4541a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cap-highlight { position: fixed; z-index: 1240; pointer-events: none; border: 2px solid #1f9d57;
  background: rgba(31,157,87,.12); border-radius: 6px; box-shadow: 0 0 0 2px rgba(31,157,87,.18); }
.cap-highlight[hidden] { display: none; }
.cap-hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1245;
  background: var(--text); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.cap-hint[hidden] { display: none; }
body.capture-mode { cursor: crosshair; }
.mappe-drawer { position: fixed; top: 70px; right: 20px; width: 340px; max-width: 92vw; max-height: 78vh; z-index: 1260;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22);
  display: flex; flex-direction: column; overflow: hidden; }
.mappe-drawer[hidden] { display: none; }
.mappe-drawer.mappe-droptarget { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 34px rgba(0,0,0,.22); }
.mappe-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-weight: 600; cursor: move; user-select: none; }
.mappe-head .x { cursor: pointer; }
.mappe-drawer.dragging { box-shadow: 0 16px 44px rgba(0,0,0,.32); }
.mappe-hint { font-size: 12px; padding: 10px 16px 0; margin: 0; }
.mappe-searchrow { display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; }
.mappe-search { flex: 1 1 auto; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--card); color: var(--text); }
.mappe-search:focus { border-color: var(--accent); outline: none; }
.mappe-searchrow .meta { flex: 0 0 auto; font-size: 11.5px; }
.mappe-list { flex: 1 1 auto; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.mappe-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--card-alt); cursor: grab; }
.mappe-item:active { cursor: grabbing; }
.mappe-item.dragging { opacity: .5; }
.mappe-item img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; background: #fff; border-radius: 6px; cursor: zoom-in; }
.mappe-item .mappe-cap { font-size: 12px; color: var(--text); margin: 6px 2px 2px; white-space: pre-wrap; word-break: break-word; }
.mappe-item .mappe-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.mappe-item .mappe-actions button { font-size: 11.5px; padding: 3px 8px; }
/* CSV-/Datei-Karte in der Mappe */
.mappe-file { position: relative; }
.mappe-x { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; padding: 0; line-height: 18px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--muted);
  font-size: 12px; cursor: pointer; text-align: center; }
.mappe-x:hover { border-color: #c0392b; color: #c0392b; }
.mappe-file .mappe-file-row { display: flex; align-items: center; gap: 9px; padding-right: 22px; }
.mappe-file .mappe-file-ic { display: flex; color: var(--accent); flex: 0 0 auto; }
.mappe-file .mappe-file-ic svg { width: 22px; height: 22px; }
.mappe-file .mappe-file-name { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.mappe-file .mappe-file-sub { font-size: 11px; color: var(--muted); }
/* CSV-Anhang in einem Kommentar */
.bff-note-file { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-alt); }
.bff-note-file svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.bff-note-file-link { font-size: 13px; font-weight: 600; word-break: break-all; }
.bff-note-fileedit { font-size: 11.5px; padding: 2px 8px; }
/* CSV-Tabellen-Editor (Modal) */
.csv-modal { position: fixed; inset: 0; z-index: 1320; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
/* Canvas-Text-Eingabe (Markdown) */
.ctext-modal { position: fixed; inset: 0; z-index: 1330; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.ctext-modal[hidden] { display: none; }
.ctext-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  width: min(92vw, 560px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.ctext-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--border); font-weight: 600; }
.ctext-head .x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.ctext-tools { display: flex; align-items: center; gap: 6px; padding: 8px 15px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ctext-tools button[data-md] { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; font-size: 13px; }
.ctext-tools button[data-md]:hover { border-color: var(--accent); color: var(--accent); }
.ctext-tools .meta { font-size: 11px; }
#ctext-input { margin: 14px 15px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; min-height: 120px; }
#ctext-input:focus { border-color: var(--accent); outline: none; }
.ctext-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 15px 14px; }
.csv-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  width: min(92vw, 980px); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.csv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); }
.csv-head .csv-title { font-weight: 600; }
.csv-head .x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.csv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.csv-toolbar .csv-status { margin-left: auto; }
.csv-grid-wrap { overflow: auto; flex: 1; padding: 4px; }
/* Auto-Layout: Spalten wachsen mit dem Inhalt; bei vielen Spalten wird die Tabelle breiter als
   der Container und der Wrap zeigt einen horizontalen Scrollbalken — statt die Spalten zu quetschen. */
.csv-grid { border-collapse: collapse; font-size: 13px; width: max-content; max-width: none; }
.csv-grid th, .csv-grid td { border: 1px solid var(--border); padding: 0; vertical-align: top; }
.csv-grid thead th { background: var(--card-alt); position: sticky; top: 0; z-index: 1; }
.csv-grid thead th { position: relative; }
.csv-cell { min-width: 120px; max-width: 460px; padding: 5px 8px; outline: none; white-space: pre-wrap;
  word-break: break-word; min-height: 20px; }
.csv-cell.csv-hcell { font-weight: 600; padding-right: 38px; }
.csv-cell:focus { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Spaltenbreite ziehen (rechter Rand der Kopfzelle) */
.csv-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.csv-resize:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Klickbare URL in einer Zelle (öffnet in neuem Tab) */
.csv-grid tbody td { position: relative; }
.csv-link { position: absolute; top: 1px; right: 1px; font-size: 11px; line-height: 1.3; text-decoration: none;
  color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 0 3px; opacity: 0; }
.csv-grid tbody td:hover .csv-link { opacity: 1; }
.csv-link:hover { background: var(--card-alt); }
.csv-delcol { position: absolute; top: 2px; right: 2px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; padding: 1px 3px; }
.csv-delcol:hover, .csv-delrow:hover { color: #c0392b; }
.csv-sort { position: absolute; top: 2px; right: 18px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px; line-height: 1; padding: 1px 2px; }
.csv-sort:hover, .csv-sort.active { color: var(--accent); }
.csv-rowhdr { background: var(--card-alt); text-align: center; width: 26px; }
.csv-delrow { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 4px; }
.csv-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
/* CSV-Editor: Suche */
.csv-search-wrap { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.csv-search { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); width: 180px; }
.csv-search:focus { border-color: var(--accent); outline: none; }
.csv-search-nav { border: 1px solid var(--border); background: var(--card); border-radius: 6px; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 3px 8px; color: var(--text); }
.csv-search-nav:hover { border-color: var(--accent); color: var(--accent); }
.csv-cell.csv-hit { background: #fff3bf; }
.csv-cell.csv-hit-active { background: #ffd43b; outline: 2px solid #f08c00; }
/* Mappe: CSV-Kommentar bearbeiten */
.mappe-capedit { margin: 4px 2px 0; }
.mappe-capedit textarea { width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 6px; resize: vertical; background: var(--card); color: var(--text); }
.mappe-cap-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.mappe-cap-actions button { font-size: 11.5px; padding: 3px 8px; }
.mappe-cap.muted { font-style: italic; opacity: .7; }
.mappe-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 0; }
.mappe-tip { font-size: 12px; color: var(--muted); background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; line-height: 1.45; }
.mappe-tip.warn { background: #fff6e9; border-color: #e6c98a; color: #7a5a1e; }
.board-droptarget { outline: 3px dashed #1f9d57 !important; outline-offset: -3px; }
.bff-droptarget { box-shadow: inset 0 0 0 3px #1f9d57; }
.bff-droptarget::after { content: "Als Bild-Kommentar ablegen"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: #1f9d57; color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 999px; z-index: 30; pointer-events: none; }
.som-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- Startseite (kein Projekt geladen) ---------- */
.home { position: relative; max-width: 1100px; margin: 0 auto; }
.home[hidden] { display: none; }
.home-hero { text-align: center; padding: 56px 16px 30px; }
.home-logo { height: 64px; width: auto; display: block; margin: 0 auto 10px; }
.home-tagline { color: var(--muted); font-size: 15px; margin: 0 0 18px; letter-spacing: 1px; text-transform: uppercase; }

/* ---- Theme-Widget (Farben der Startseite testweise einstellen) ---- */
.theme-tweak-btn { position: absolute; top: 12px; right: 8px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 12.5px; transition: border-color .12s, color .12s; }
.theme-tweak-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-tweak-btn .ic { width: 15px; height: 15px; }
.theme-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 1400;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(0,0,0,.12);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
.theme-panel.open { transform: translateX(0); }
.theme-panel-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.theme-panel-head h3 { margin: 0; font-size: 15px; color: var(--accent); }
.theme-panel-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; }
.theme-panel-close:hover { color: var(--text); }
.theme-panel-body { padding: 12px 16px; overflow-y: auto; flex: 1; }
.theme-grad-preview { height: 46px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 12px;
  background: linear-gradient(var(--grad-angle), var(--grad-1) 0%, var(--grad-2) var(--grad-mid), var(--grad-3) 100%); }
.theme-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  margin: 16px 0 8px; font-weight: 700; }
.theme-sec:first-child { margin-top: 0; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.theme-row label { font-size: 13px; color: var(--text); flex: 1; }
.theme-row input[type="color"] { width: 38px; height: 26px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.theme-row input[type="range"] { flex: 0 0 130px; }
.theme-row .theme-val { font-size: 11px; color: var(--muted); width: 42px; text-align: right; flex: 0 0 auto; }
.theme-panel-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.theme-panel-foot .muted { font-size: 11.5px; }
.theme-reset-btn { flex: 1; padding: 8px; cursor: pointer; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
.theme-reset-btn:hover { border-color: var(--danger); color: var(--danger); }
.home-what { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 24px; }
.home-what p { margin: 0; line-height: 1.6; color: var(--text); font-size: 14.5px; }
.home-projects { margin-top: 26px; }
.home-projects h2 { margin: 0; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.home-card { position: relative; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .12s, box-shadow .12s, transform .12s; font: inherit; color: inherit; }
/* „neue Tasks"-Hinweis auf der Projektkachel */
.home-task-badge { position: absolute; top: -9px; right: 14px; z-index: 2; background: #b3261e; color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(179,38,30,.35); }
.home-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(13,115,115,.10); transform: translateY(-2px); }
.home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-card-name { font-size: 17px; font-weight: 700; color: var(--text); }
.home-card-own { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Fokus-Kachel: zwei Kernzahlen (Health + Share) je mit Trend-Delta und Sparkline */
.home-card-metrics { display: flex; gap: 16px; padding: 2px 0; }
.home-metric { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-metric-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-metric-row { display: flex; align-items: baseline; gap: 7px; }
.home-metric-val { font-size: 32px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -1.5px; }
.home-metric-val.is-empty { color: var(--muted); font-weight: 700; }
.home-trend { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap; }
.home-trend.up { color: var(--pos); }
.home-trend.down { color: var(--danger); }
.home-trend.flat { color: var(--muted); }
.home-spark-wrap { height: 24px; margin-top: 1px; }
.home-spark { display: block; width: 100%; height: 24px; overflow: visible; }
.home-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home-spark .spark-area { fill: var(--accent); opacity: .1; stroke: none; }
.home-spark .spark-dot { fill: var(--accent); stroke: var(--card); stroke-width: 1; }
.home-card-sub { font-size: 12.5px; color: var(--muted); }
.home-card-sub b { color: var(--text); font-weight: 700; }
.home-card-foot { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 9px; }
.home-card-empty { color: var(--muted); font-style: italic; font-size: 13px; }
.home-card-setup { border-style: dashed; border-color: #d9a441; }
.home-card-setup:hover { border-color: #c8941a; box-shadow: 0 4px 16px rgba(200,148,26,.14); }
.home-setup-badge { font-size: 10.5px; font-weight: 700; color: #fff; background: #c8941a; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.home-setup-status { font-size: 13.5px; display: flex; align-items: center; gap: 7px; padding: 6px 0; }
.home-setup-status .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.home-setup-status.running { color: #b06f12; }
.home-setup-status.done { color: var(--accent); font-weight: 600; }
.home-card-add { align-items: center; justify-content: center; text-align: center; border-style: dashed;
  color: var(--accent); font-weight: 600; min-height: 150px; gap: 6px; }
.home-card-add .home-add-plus { font-size: 34px; line-height: 1; font-weight: 400; }
header h1.brand { cursor: pointer; }
body.home-mode .header-projects { display: none; }
/* Balken in der „Strukturierte Daten"-Auswertung */
.schema-bar { display: inline-block; width: 60px; height: 7px; border-radius: 4px;
  background: var(--card-alt); vertical-align: middle; margin-left: 8px; overflow: hidden; }
/* Prozentzahl linksbündig mit fester Breite, damit die nachfolgenden Balken fluchten. */
.schema-val { display: inline-block; min-width: 78px; }
/* HTML-Kommentare: Pagination-Leiste */
.hc-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* Quellen: Pagination-Leiste */
.src-pager { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
/* Besuche: Tracking-Snippet */
.visits-snippet-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.visits-snippet { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--card-alt); color: var(--text); }
.board-visits-win { font-size: 12px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text); }
/* Besucher-Analyse-Panel (frei verschiebbar) */
.visitor-panel { position: fixed; z-index: 1205; width: 480px; max-width: 95vw; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(13,20,16,.18); font-size: 13.5px; }
.visitor-panel[hidden] { display: none; }
.vp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: move; }
.vp-title { font-weight: 600; font-size: 15px; }
.vp-close { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.vp-close:hover { color: var(--danger); }
.vp-modes { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--border); }
.vp-mode { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 4px; cursor: pointer; color: var(--muted); font-size: 13.5px; border-radius: 6px 6px 0 0; }
.vp-mode:hover { color: var(--accent); background: var(--nav-active); }
.vp-mode.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.vp-body { padding: 16px; min-height: 120px; }
.vp-pane label { display: block; margin-bottom: 10px; color: var(--muted); }
.vp-pane select { margin-left: 8px; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.vp-status { margin-top: 12px; font-size: 13px; }
#vp-sel-clear { margin-top: 12px; }
/* Besucher-Detail-Popup (Auswahl-Modus) */
.visitor-detail { position: fixed; z-index: 1206; width: 420px; max-width: 95vw; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(13,20,16,.22); font-size: 13px; }
.visitor-detail[hidden] { display: none; }
.vd-body { padding: 14px 16px 16px; }
.vd-id { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.vd-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.vd-vid { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }
.vd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.vd-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vd-v { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.vd-v a { color: var(--accent); }
.vd-pages-h { font-weight: 600; margin: 4px 0 6px; }
.vd-pages { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.vd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vd-table th { position: sticky; top: 0; background: var(--card); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.vd-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.vd-table tr:last-child td { border-bottom: none; }
.vd-table .vd-i, .vd-table .vd-sc, .vd-table .vd-du { color: var(--muted); white-space: nowrap; }
.vd-table .vd-t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-table .vd-p { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-table .vd-p .ic { width: 12px; height: 12px; vertical-align: -1px; color: var(--muted); margin-right: 2px; }
.vd-row { cursor: pointer; }
.vd-row:hover td { background: #e7f3ee; }
.vd-row:hover .vd-p { color: #2e7459; }
.vd-row:hover .vd-p .ic { color: #2e7459; }
/* Wahrnehmung (Content Awareness) */
.vd-catypes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vd-catype { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #e7f3ee; color: #2e7459; }
.vd-catype b { font-weight: 700; }
.vd-calist { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.vd-cael { display: grid; grid-template-columns: 52px 1fr 70px 58px; align-items: center; gap: 8px; font-size: 12px; }
.vd-catag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.vd-cael .vd-cams { text-align: right; }
/* Kombinierte Seiten-+-Wahrnehmungsliste */
.vd-pages-combined { display: flex; flex-direction: column; gap: 8px; }
.vd-page { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.vd-page-head { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 7px;
  padding: 7px 10px; background: #fafcfb; cursor: pointer; }
.vd-page-head:hover { background: #e7f3ee; }
.vd-page-head .vd-pico .ic, .vd-page-head .vd-pico svg { width: 12px; height: 12px; color: var(--muted); }
.vd-page-head:hover .vd-pname { color: #2e7459; }
.vd-pnum { font-size: 11px; color: var(--muted); min-width: 16px; }
.vd-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vd-pmeta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.vd-page .vd-calist { padding: 7px 10px; max-height: none; }
.vd-noca { padding: 6px 10px; font-size: 11.5px; }
.vd-page-foot { padding: 0 10px 8px; }
.vd-page-foot .bf-mini-btn { font-size: 11px; padding: 3px 8px; }
/* „Elemente der Seite auslesen"-Popup */
.vd-els-box { width: min(680px, 94vw); max-height: 86vh; }
.vd-els-list { max-height: 64vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.vd-el { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 8px; font-size: 12.5px;
  padding: 5px 8px; border-radius: 6px; }
.vd-el-hit { background: #e7f3ee; }
.vd-el-lbl { line-height: 1.35; }
.vd-el-hit .vd-el-lbl { font-weight: 600; }
.vd-el-dw { color: #2e7459; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-calbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-cabar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.vd-cabar i { display: block; height: 100%; background: #2e7459; }
.vd-cams { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-chart { height: 220px; margin: 12px 0 6px; }
.vp-slider { width: 100%; margin: 8px 0 4px; accent-color: var(--accent); height: 22px; }
/* Zeitfenster (Datepicker) für Zeitraum/Verlauf */
.vp-range { display: flex; gap: 10px; margin-bottom: 8px; }
.vp-range label { flex: 1; display: flex; flex-direction: column; gap: 3px; margin: 0; color: var(--muted); font-size: 12px; }
.vp-range input[type="datetime-local"] { font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); width: 100%; box-sizing: border-box; }
.vp-range-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.vp-range-presets .vp-go { margin-left: auto; font-weight: 600; }
/* Seitengruppen-Popup */
.vp-groups-pop { padding: 8px; }
.vp-groups-search { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); margin-bottom: 8px; }
.vp-groups-actions { margin-bottom: 8px; }
.vp-groups-pop .vp-groups { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: 220px; }
/* Besuchsfilter-Batterie */
.vp-filter { border-top: 1px solid var(--border); padding: 14px 16px 10px; }
.vp-filter > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 2px 0; }
.vp-filter-body { padding: 14px 0 4px; }
.vp-frow { margin-bottom: 13px; }
.vp-frow > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12.5px; }
.vp-frow input[type="text"] { width: 100%; font-size: 12.5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font-family: ui-monospace, monospace; }
.vp-input-row { display: flex; gap: 6px; align-items: stretch; }
.vp-input-row input { flex: 1 1 auto; min-width: 0; }
.vp-input-row .bf-mini-btn { flex: 0 0 auto; }
.vp-groups { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 120px; overflow: auto; }
.vp-gchk { display: flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.vp-gchk input { margin: 0; }
.vp-frow-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.vp-frow-actions .meta { margin-left: 2px; }
/* Pfad-Preset-Popup (wie Board-Suche: letzte Suchen + Vorlagen) */
.vp-path-pop { margin-top: 6px; max-height: 210px; overflow: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); box-shadow: 0 6px 18px rgba(13,20,16,.12); padding: 6px; }
.vp-path-pop[hidden] { display: none; }
.vp-pp-head { font-size: 11px; font-weight: 600; color: var(--muted); margin: 8px 4px 3px; }
.vp-pp-head:first-child { margin-top: 0; }
.vp-pp-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 5px 7px; border-radius: 6px; font-size: 12.5px; color: var(--text); }
.vp-pp-item:hover { background: var(--nav-active); color: var(--accent); }
.vp-pp-item code { font-size: 11.5px; }
/* Gespeicherte Filter-Popup */
.vp-filter-pop { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  box-shadow: 0 6px 18px rgba(13,20,16,.12); padding: 8px; }
.vp-filter-pop[hidden] { display: none; }
.vp-fp-save { display: flex; gap: 6px; margin-bottom: 8px; }
.vp-fp-save input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.vp-fp-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow: auto; }
.vp-fp-item { display: flex; align-items: center; gap: 4px; }
.vp-fp-apply { flex: 1 1 auto; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-fp-apply:hover { border-color: var(--accent); color: var(--accent); }
.vp-fp-del { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 6px; }
.vp-fp-del:hover { color: var(--danger); }
/* Vorschau: Seite einer Gruppe zuordnen */
.bff-addgroup { display: flex; gap: 6px; align-items: center; margin: 4px 0 2px; flex-wrap: wrap; }
.bff-addgroup[hidden] { display: none; }
.bff-addgroup select, .bff-addgroup-name { font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.bff-addgroup-name { flex: 1 1 150px; min-width: 0; }
/* Content-Performance: durchsuchbare Tabellen */
.cp-block { margin-bottom: 6px; }
.cp-search { min-width: 260px; max-width: 380px; margin-bottom: 8px; }
.schema-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
main { max-width: 1400px; margin: 0 auto; padding: 24px 32px; }
.card {
  background: var(--card); border: 1px solid #e7ede9;
  border-radius: 14px; padding: 28px 32px; margin-bottom: 18px; position: relative;
  box-shadow: 0 1px 2px rgba(13,20,16,.04), 0 8px 22px rgba(13,20,16,.05);
}

/* Hilfe-Tooltip (?) oben rechts in Auswertungs-Karten */
.help-icon {
  position: absolute; top: 14px; right: 14px; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card-alt);
  color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
  user-select: none; z-index: 5; transition: background .12s, color .12s, border-color .12s;
}
.help-icon:hover, .help-icon:focus { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.help-tip {
  display: none; position: absolute; top: 26px; right: 0; width: 380px; max-width: 80vw;
  background: #fff; color: var(--text); border: 1px solid var(--accent);
  box-shadow: 0 4px 14px rgba(13,20,16,0.18);
  padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.45;
  text-align: left; white-space: pre-line; z-index: 20;
}
.help-icon:hover .help-tip, .help-icon:focus .help-tip { display: block; }
/* Inline-?-Icon (z.B. neben einer Fließtext-Zeile) */
.help-inline {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--card-alt); color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: help; user-select: none; margin-left: 6px; vertical-align: middle;
}
.help-inline:hover, .help-inline:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.help-inline:hover .help-tip, .help-inline:focus .help-tip { display: block; }
/* Farblich abgesetzter Optionsblock (Direktiven + Schalter) */
.run-options {
  background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px;
}
/* Platz fürs ?-Icon neben rechtsbündigen Steuerelementen (z.B. Firmen-Dropdown) */
.tab-panel .card .row.spread { padding-right: 30px; }
.project-bar { background: var(--card-alt); }
/* Projektauswahl rechts in der Kopfzeile */
.header-projects { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-user { display: flex; align-items: center; gap: 8px; margin-left: 16px; }
/* Ohne Projektauswahl (Startseite) das Konto-Menü selbst nach ganz rechts schieben. */
body.home-mode .header-user { margin-left: auto; }
.user-menu { position: relative; }
.user-menu-trigger { background: transparent; border: none; border-radius: 6px;
  padding: 4px 6px; cursor: pointer; font-size: 13px; color: var(--text); display: inline-flex; gap: 7px; align-items: center; }
.user-menu-trigger:hover { color: var(--accent); background: transparent; }
.user-menu-trigger .caret { color: var(--muted); font-size: 11px; }
.user-menu-list { position: absolute; top: calc(100% + 4px); right: 0; min-width: 160px;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(13,20,16,0.15); z-index: 50; display: flex; flex-direction: column; padding: 4px; }
.user-menu-list button { background: transparent; border: none; text-align: left;
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 4px; }
.user-menu-list button:hover { background: var(--card-alt); color: var(--accent); }
.login-overlay { position: fixed; inset: 0; background: var(--bg); display: flex;
  align-items: center; justify-content: center; z-index: 1000; }
.login-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; width: 300px;
  box-shadow: 0 8px 30px rgba(13,20,16,0.15); }
.login-box .login-logo { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 8px; }
.login-box h2 { margin: 0 0 6px; color: var(--accent); }
.login-box input { padding: 10px 12px; }
.header-projects .hp-label { font-size: 13px; color: var(--muted); }
.hp-wrap { position: relative; }
.hp-btn { background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  padding: 7px 12px; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; max-width: 280px; }
.hp-btn:hover { border-color: var(--accent); }
.hp-btn #project-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-btn .caret { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.hp-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 80; min-width: 220px; max-width: 320px; max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,16,.22); padding: 4px; }
.hp-pop[hidden] { display: none; }
.hp-item { display: block; width: 100%; text-align: left; box-sizing: border-box; background: transparent; border: none;
  border-radius: 6px; padding: 7px 10px; cursor: pointer; color: var(--text); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-item:hover { background: var(--card-alt); }
.hp-item.sel { font-weight: 600; color: var(--accent); }
.hp-add { color: var(--accent); font-weight: 600; }
.hp-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.plus-btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  font-size: 26px; line-height: 1; font-weight: 400;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.plus-btn:hover { background: var(--accent-hover); }
h2 { font-size: 19px; margin: 0 0 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.muted { color: var(--muted); font-size: 14px; }
.badge {
  font-size: 12px; padding: 3px 10px; border: 1px solid var(--border);
  background: var(--card-alt); color: var(--muted);
}
.badge.mock { background: var(--gold-bg); color: var(--gold); border-color: var(--gold); }
.badge.live { background: #e3f0f0; color: var(--accent); border-color: var(--accent); }

/* Tabs */
/* ---- Tabs/Subtabs: durchgängiger Underline-Stil mit gemeinsamer Grundlinie ---- */
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.tab.tab-right { margin-left: auto; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;                 /* Unterstrich überlagert die Grundlinie */
  padding: 9px 15px 8px; cursor: pointer;
  font-size: 14px; color: var(--muted); border-radius: 6px 6px 0 0;
  transition: color .12s, background .12s, border-color .12s;
}
.tab:hover { color: var(--accent); background: var(--nav-active); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: transparent; }
/* „neue Tasks" empfangen: Reiter farblich hervorheben */
.tab.has-new { color: #b3261e; font-weight: 600; }
.tab.has-new::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 50%; background: #b3261e; vertical-align: middle; }

/* Ebene 2 (Subtabs) — gleicher Stil, etwas kleiner */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  overflow: visible; background: transparent; max-width: 100%;
}
.subtab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 7px 14px 6px; cursor: pointer; font-size: 13px;
  color: var(--muted); border-radius: 6px 6px 0 0;
  transition: color .12s, background .12s, border-color .12s; white-space: nowrap;
}
.subtab:hover { color: var(--accent); background: var(--nav-active); }
.subtab.active { background: transparent; color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Ebene 3 (Subtabs2) — noch dezenter: kleiner, dünnere Linie */
/* Beim Scrollen mit-fixieren (wie die vertikale Subnavi), Hintergrund deckt den scrollenden Inhalt ab. */
.subtabs2 { margin-bottom: 12px; border-radius: 0; position: sticky; top: 12px; z-index: 6;
  background: var(--bg); padding-top: 6px; }
.subtab2 { padding: 5px 11px 4px; font-size: 12px; }
.subtab2.active { border-bottom-width: 2px; }

/* Vertikale 1. Subnavi (linker Rail) — Panels mit class "vnav" (Auswertung, Projekt) sowie
   die Card-interne Variante .an-layout (Kommentare: Liste/Kalender).
   Die 1. Ebene wandert nach links (sticky); eine 2. Ebene bleibt horizontal oben im Inhalt. */
.tab-panel.vnav,
.an-layout { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; align-items: start; }
.tab-panel.vnav > .subtabs,
.an-layout > .subtabs {
  grid-column: 1; grid-row: 1 / -1;
  flex-direction: column; flex-wrap: nowrap; gap: 2px;
  margin-bottom: 0; padding-right: 12px; min-width: 158px;
  border-bottom: none; border-right: 1px solid var(--border);
  position: sticky; top: 12px; align-self: start;
}
.tab-panel.vnav > .subtabs .subtab,
.an-layout > .subtabs .subtab {
  width: 100%; text-align: left; white-space: normal;
  margin-bottom: 0; margin-right: -1px;
  border-bottom-color: transparent; border-right: 2px solid transparent;
  border-radius: 7px 0 0 7px;
}
.tab-panel.vnav > .subtabs .subtab.active,
.an-layout > .subtabs .subtab.active {
  border-bottom-color: transparent; border-right-color: var(--accent);
  background: var(--nav-active);
}
.tab-panel.vnav > .subpanel,
.an-layout > .an-content { grid-column: 2; min-width: 0; }
@media (max-width: 820px) {
  .tab-panel.vnav,
  .an-layout { display: block; }
  .tab-panel.vnav > .subtabs,
  .an-layout > .subtabs {
    flex-direction: row; flex-wrap: wrap; position: static; min-width: 0;
    border-right: none; border-bottom: 1px solid var(--border);
    padding-right: 0; margin-bottom: 16px;
  }
  .tab-panel.vnav > .subtabs .subtab,
  .an-layout > .subtabs .subtab { width: auto; border-right-color: transparent; border-radius: 6px 6px 0 0; }
  .tab-panel.vnav > .subtabs .subtab.active,
  .an-layout > .subtabs .subtab.active { border-right-color: transparent; border-bottom-color: var(--accent); }
}
/* Assets → Galerie: Raster aus Bild + Fundstellen */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gal-item { border: 1px solid var(--border); border-radius: 12px; background: var(--card-alt); overflow: hidden; display: flex; flex-direction: column; }
.gal-thumb { width: 100%; height: 150px; object-fit: cover; cursor: zoom-in; background: #fff; display: block; border-bottom: 1px solid var(--border); }
.gal-uses { padding: 9px 11px; }
.gal-uses-h { font-size: 11px; margin-bottom: 4px; }
.gal-uses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gal-uses li { font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.gal-uses li svg.ic, .gal-uses li svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }
.gal-use { color: var(--accent); cursor: pointer; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-use:hover { text-decoration: underline; }
/* Assets → CSV-Dateien */
.csvf-item { padding: 0; }
.csvf-head { display: flex; align-items: center; gap: 7px; padding: 11px 11px 6px; font-weight: 600; font-size: 13px; }
.csvf-head svg.ic, .csvf-head svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; }
.csvf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csvf-actions { display: flex; gap: 6px; padding: 0 11px 9px; }
.csvf-actions .bf-mini-btn { text-decoration: none; }

/* Talking-Points: Firmen-Überschrift */
.tp-company { font-size: 14px; margin: 16px 0 6px; color: var(--accent); }
.tp-company:first-child { margin-top: 0; }
.tp-company.own { color: var(--gold); }
.tp-section > .tp-company:first-child { margin-top: 0; }
/* Talking-Points: Tab-Leiste je Firmendomain */
.tp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tp-tab { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.tp-tab:hover { border-color: var(--accent); }
.tp-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-tab.active .meta { color: #e6f2ef; }
/* Talking-Point: Kernaussage fett, Quellen kleiner/dezent */
.tp-claim { font-weight: 700; }
.tp-sources { margin-top: 4px; font-size: 11px; color: var(--muted); }
.tp-sources a { font-size: 11px; }

input[type=text], select, textarea {
  background: #fff; border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; font-size: 14px;
}
input[type=text] { flex: 1; min-width: 120px; }
/* Dropdowns systemweit etwas kompakter als Textfelder. */
select { padding: 4px 6px; font-size: 13px; }
/* Labels an Dropdowns ebenfalls etwas kleiner. */
label:has(select) { font-size: 13px; }
/* Bester/schlechtester Firmenwert je Kategorie (Kennzahlen je Kategorie) */
.cat-best { background: #e3f3ea; color: var(--pos); font-weight: 600; }
.cat-worst { background: #f7e3e1; color: var(--danger); font-weight: 600; }
/* Anklickbarer Kategoriename -> gefilterte Prompt-Übersicht */
td.cat-link { cursor: pointer; color: var(--accent); }
td.cat-link:hover { text-decoration: underline; }
/* Kennzahlen je Kategorie: Spalten rechts von „Kategorie" gleich breit */
#category-breakdown table { table-layout: fixed; width: 100%; }
#category-breakdown th:first-child, #category-breakdown td:first-child { width: 22%; }
/* Quellen: Zwischenüberschriften (Domain-Übersicht / Einzelne Quellen) */
.src-sub { font-size: 14px; margin: 16px 0 6px; color: var(--muted); }
.src-sub:first-child { margin-top: 4px; }
#links-table a { color: var(--accent); word-break: break-all; }
#links-table a:hover { text-decoration: underline; }
.dom-toggle { margin: 8px 0 4px; }
.fc-contra td { background: #f7e3e1; }
.crawl-text { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow-y: auto;
  background: var(--card-alt); border: 1px solid var(--border); padding: 10px; font-size: 12px; }
/* Fixe Chart-Höhe (Funnel / Positionierung) */
.chart-h320 { height: 320px; position: relative; }
.chart-h220 { height: 220px; position: relative; }
/* Movers: Auf-/Abwärtspfeile */
.mv-up { color: var(--pos); font-weight: 600; }
.mv-down { color: var(--danger); font-weight: 600; }
/* Attribut-Gap: zwei Spalten */
.attr-gap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.attr-gap-cols h3 { font-size: 14px; margin: 4px 0 8px; color: var(--muted); }
@media (max-width: 820px) { .attr-gap-cols { grid-template-columns: 1fr; } }
/* Modell × Firma-Heatmap: erste Spalte fix, Firmenspalten alle gleich breit */
.hm-cell { text-align: center; font-weight: 600; }
table.hm-table { table-layout: fixed; width: 100%; }
table.hm-table th:first-child, table.hm-table td:first-child { width: 30%; }
table.hm-table th { white-space: normal; word-break: break-word; }
/* Divergenz-Spotlight */
.div-prompt { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--card-alt); }
.div-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.div-models { display: flex; flex-wrap: wrap; gap: 6px; }
.div-chip { cursor: pointer; }
.div-chip:hover { border-color: var(--accent); }
/* Verwalten-Subtab: Lösch-Aktionen */
.manage-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.manage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--card-alt);
}
.manage-row strong { font-size: 14px; }
.manage-row button { flex: 0 0 auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
button {
  background: #fff; color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; cursor: pointer; font-size: 14px; border-radius: 8px; font-weight: 500;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(13,115,115,.25); }
button.primary:hover { background: var(--accent-hover); color: #fff; }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger); color: #fff; }
.list { list-style: none; padding: 0; margin: 0 0 12px; }
.list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); background: var(--card-alt);
  margin-bottom: 6px; font-size: 14px; gap: 8px;
}
.list li.inactive, .list li.disabled { opacity: 0.5; }
.list li.editing { display: block; }
/* Bearbeiten-/Löschen-Buttons rechts immer nebeneinander (kein Umbruch) */
.list li > .row:last-child { flex-wrap: nowrap; flex-shrink: 0; }
.list li > :first-child { min-width: 0; }
.list .meta { color: var(--muted); font-size: 12px; }
/* Prompt-Liste: Prompt links (füllt), Kategorie als ausgerichtete Spalte rechts, dann Steuerung */
.list li.prompt-li > .prompt-main { flex: 1 1 auto; min-width: 0; }
.list li.prompt-li > .prompt-cat { flex: 0 0 180px; display: flex; align-items: center; overflow: hidden; }
.list li.prompt-li > .prompt-cat .chip { max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.list li.prompt-li .pmt-toggle { min-width: 68px; }
.list .x { color: var(--danger); cursor: pointer; background: none; border: none; }
.company-form, .model-form { display: flex; flex-direction: column; gap: 8px; }
.inline { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tag.own { color: var(--gold); font-weight: 600; }
.bulk { margin-top: 12px; }
.bulk summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.bulk textarea { width: 100%; margin: 8px 0; resize: vertical; }
.pill { font-size: 11px; padding: 2px 7px; background: var(--card-alt);
        color: var(--muted); border: 1px solid var(--border); }

table.scores { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
table.scores th, table.scores td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.scores th { color: var(--muted); font-weight: 500; }

.progress { height: 6px; background: var(--border); margin: 6px 0 2px;
  width: 240px; max-width: 100%; }
.progress > span { display: block; height: 100%; background: var(--accent);
  transition: width .4s ease; }
/* Antworten-Modal */
.modal {
  position: fixed; inset: 0; background: rgba(13,20,16,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 100; overflow-y: auto;
}
/* hidden-Attribut muss display:flex überstimmen, sonst bleibt das Modal sichtbar */
.modal[hidden] { display: none; }
.modal-box {
  background: var(--bg); border: 1px solid var(--border);
  width: 100%; max-width: 900px; max-height: 94vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--card);
}
.modal-head h2 { margin: 0; }
.modal-body { padding: 18px; overflow-y: auto; }
/* Firmen-Dossier */
#dossier-modal .modal-box { max-width: 1180px; }
#dossier-modal .modal-body { padding: 16px; background: var(--bg); }
.dos-meta { margin: 0 0 14px; font-size: 12px; }
.dos-sec { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; break-inside: avoid; }
.dossier-pdf-wrap { background: #fff; padding: 8px 12px; }
#dossier-pdf { font-size: 13px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; }
#dossier-pdf:hover { border-color: var(--accent); color: var(--accent); }
.dos-sec h3 { font-size: 14px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.dos-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.dos-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dos-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.dos-stat { flex: 1 1 100px; min-width: 100px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; }
.dos-stat-v { font-size: 19px; font-weight: 700; color: var(--text); }
.dos-stat-l { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.dos-stat .sneg { color: var(--danger); } .dos-stat .spos { color: #1f7a5a; } .dos-stat .sneu { color: var(--muted); }
.dos-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dos-pill { font-size: 12px; border-radius: 12px; padding: 3px 10px; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 5px; }
.dos-pill.pos { background: rgba(31,122,90,.10); border-color: rgba(31,122,90,.35); color: #18664c; }
.dos-pill.neg { background: rgba(184,38,30,.10); border-color: rgba(184,38,30,.35); color: var(--danger); }
.dos-pill b { font-weight: 700; }
.dos-list { list-style: none; margin: 0; padding: 0; }
.dos-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.dos-list li:last-child { border-bottom: none; }
.dos-list li:hover { background: var(--card-alt); border-radius: 6px; }
.dos-li-l { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dos-li-l a { color: var(--accent); text-decoration: none; }
.dos-li-l a:hover { text-decoration: underline; }
.dos-li-x { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.dos-li-n { flex: 0 0 auto; min-width: 30px; text-align: center; font-weight: 700; font-size: 12px; color: var(--accent);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.dos-fact { flex: 0 0 auto; font-size: 11px; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.dos-fact.neg { background: rgba(184,38,30,.12); color: var(--danger); }
.dos-fact.neu { background: var(--bg); color: var(--muted); }
.sneg { color: var(--danger); }
@media (max-width: 780px) { .dos-two, .dos-geo { grid-template-columns: 1fr !important; } }
/* HTML-/Inhalts-Änderungen je Domain */
.hc-domain { margin: 0 0 18px; }
.hc-domain:last-child { margin-bottom: 0; }
.hc-head { font-size: 14px; margin-bottom: 6px; }
.hc-runs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hc-runchip { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; }
.hc-ch { color: var(--gold, #c8941a); } .hc-nw { color: var(--pos, #1f7a5a); }
a.dossier-link { color: var(--accent); cursor: pointer; text-decoration: none; }
a.dossier-link:hover { text-decoration: underline; }
button.dos-btn { font-size: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--accent); cursor: pointer; white-space: nowrap; }
button.dos-btn:hover { border-color: var(--accent); background: var(--bg); }
/* Dossier — GEO-Readiness */
.dos-geo { display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: start; }
.dos-geo-scores { display: flex; gap: 14px; margin-bottom: 8px; }
.dos-gscore { text-align: center; }
.dos-gscore-v { font-size: 30px; font-weight: 800; line-height: 1; }
.dos-gscore-v.rstrong { color: #1f7a5a; } .dos-gscore-v.rgap { color: #c8941a; }
.dos-gscore-v.rluck { color: #b06a00; } .dos-gscore-v.rweak { color: var(--danger); }
.dos-quad-label { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 6px; padding: 3px 10px; margin: 2px 0 12px; }
.dos-quad-label.q-strong { background: rgba(31,122,90,.14); color: #18664c; }
.dos-quad-label.q-gap { background: rgba(200,148,26,.16); color: #8a6400; }
.dos-quad-label.q-luck { background: rgba(176,106,0,.14); color: #8a5200; }
.dos-quad-label.q-weak { background: rgba(184,38,30,.13); color: var(--danger); }
.dos-dim { margin: 8px 0; }
.dos-dim-head { display: flex; justify-content: space-between; font-size: 12.5px; }
.dos-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 3px 0; }
.dos-bar i { display: block; height: 100%; border-radius: 4px; }
.dos-bar i.hi { background: #1f7a5a; } .dos-bar i.mid { background: #c8941a; } .dos-bar i.lo { background: var(--danger); }
.dos-dim-ev { display: flex; flex-wrap: wrap; gap: 4px; }
.dos-dim-ev span { font-size: 10.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; }
.dos-matrix-wrap { font-size: 10px; color: var(--muted); }
.dos-matrix { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 1; }
.dos-q { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10.5px;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 4px; color: var(--muted); background: var(--card); }
.dos-q.on { font-weight: 700; color: #fff; }
.dos-q.on.strong { background: #1f7a5a; border-color: #1f7a5a; }
.dos-q.on.gap { background: #c8941a; border-color: #c8941a; }
.dos-q.on.luck { background: #b06a00; border-color: #b06a00; }
.dos-q.on.weak { background: var(--danger); border-color: var(--danger); }
.dos-axis-x { text-align: center; margin-top: 3px; }
.dos-axis-y { margin-bottom: 3px; }
.answer-item { border: 1px solid var(--border); background: var(--card); margin-bottom: 14px; }
.answer-item.dc-critical { border-left: 3px solid var(--danger); }
.answer-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--card-alt);
}
.answer-meta .prompt-text { font-weight: 600; flex: 1; min-width: 200px; }
.answer-output {
  padding: 12px; white-space: pre-wrap; word-break: break-word;
  font-size: 13px; line-height: 1.5; max-height: 70vh; overflow-y: auto;
}
.answer-output.err { color: var(--danger); }
.modal-nav { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--border); background: var(--card-alt); }
.modal-nav button { min-width: 40px; font-size: 16px; }
.pm-prompt { font-weight: 600; margin-bottom: 8px; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
/* klickbare Prompt-Zeilen in der Auswertung nach Prompt */
table.pb tr[data-pid] { cursor: pointer; }
table.pb tr[data-pid]:hover td { background: var(--card-alt); }
/* Widerspruchszeilen rot umranden */
table.pb tr.contradiction td { border-top: 2px solid var(--danger); border-bottom: 2px solid var(--danger); }
table.pb tr.contradiction td:first-child { border-left: 2px solid var(--danger); }
table.pb tr.contradiction td:last-child { border-right: 2px solid var(--danger); }
.warn { color: var(--danger); font-weight: 700; cursor: help; }
/* klickbare Link-Zeilen */
table.pb tr[data-url] { cursor: pointer; }
table.pb tr[data-url]:hover td { background: var(--card-alt); }
/* Fundstellen-Snippets */
.occ-item { border: 1px solid var(--border); background: var(--card); margin-bottom: 12px; }
.occ-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--card-alt); }
.occ-text { padding: 12px; font-size: 13px; line-height: 1.6; }
.occ-text mark { background: var(--gold-bg); color: var(--text);
  border-bottom: 2px solid var(--gold); padding: 0 2px; }
.occ-text.md p { margin: 0; }
/* Radar: zentriert und rund (quadratisch begrenzt) */
.radar-wrap { max-width: 560px; margin: 0 auto;
  background: #14201b; border: 1px solid #233830; border-radius: 12px; padding: 10px; }
.radar-wrap.radar-lg { max-width: 720px; }   /* Kritik-Gesamt-Radar etwas größer */
/* Diagramm-Container mit dunklem Hintergrund (z. B. Cluster-Karte) */
.chart-dark { background: #14201b; border: 1px solid #233830; border-radius: 12px; padding: 12px; }
/* Kritik: Radar links, Negativ-Eigenschaften (Pills) rechts daneben */
.crit-main { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin: 32px 0; }
.crit-main .radar-wrap { flex: 0 0 auto; margin: 0; width: min(460px, 100%); max-width: 460px; }
.crit-list { flex: 1 1 320px; min-width: 0; }
.crit-list .narr-company:first-child { margin-top: 0; }
/* hervorgehobene Firmennamen im Antworttext */
.answer-output mark.co { background: #dff0ef; color: var(--accent-hover);
  border-bottom: 2px solid var(--accent); padding: 0 2px; }
.chip .cnt { color: var(--muted); margin-left: 4px; }

/* Auswertung nach Keyword */
.kw-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 13px; }
.kw-leg { display: inline-flex; align-items: center; gap: 6px; }
.kw-leg .sw { width: 12px; height: 12px; display: inline-block; border: 1px solid var(--border); }
table.kwtable { table-layout: fixed; }
table.kwtable th.kw, table.kwtable td.kw { width: 24%; text-align: left; white-space: normal; word-break: break-word; }
table.kwtable th { white-space: normal; word-break: break-word; }
table.kwtable td, table.kwtable th { vertical-align: middle; }
.kwbar { position: relative; height: 18px; background: var(--card-alt); border: 1px solid var(--border); }
.kwbar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.kwbar-lbl { position: absolute; right: 4px; top: 0; line-height: 18px; font-size: 11px; color: var(--text); }
.run-done { color: var(--pos); }
.run-cancelled { color: var(--muted); }
.run-running { color: var(--gold); }
.run-error { color: var(--danger); }

/* Narrativ */
.narr-company { margin-bottom: 14px; }
.narr-company .name { font-weight: 600; margin-bottom: 6px; }
.narr-company .name.own { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border: 1px solid var(--border);
        background: #fff; color: var(--text); border-radius: 999px; }
.chip .cnt { color: var(--muted); margin-left: 4px; }
.chip.pos { border-color: #bfe0d3; color: var(--pos); background: #eef7f2; }
.chip.neg { border-color: #f3c9c5; color: var(--danger); background: #fdeeec; }
.chip.neu { border-color: var(--border); background: var(--card-alt); }
.chip.crit { cursor: pointer; }
.chip.crit:hover { background: var(--gold-bg); }

/* Crawl-Verlauf je Firmendomain (kleine Mehrfach-Charts) */
.crawl-ts-grid { display: flex; flex-direction: column; gap: 18px; }
.crawl-ts-item > h4 { margin: 0 0 6px; font-size: 14px; }
.crawl-ts-item > h4 .meta { font-weight: 400; }

/* Suche (Auswertung → Suche) */
.sum-movers-block { margin: 6px 0 16px; }
.sum-movers-block h3 { font-size: 15px; margin: 0 0 8px; }
.search-bar { display: flex; gap: 8px; margin: 8px 0 14px; }
.search-input-wrap { position: relative; flex: 1 1 auto; display: flex; }
.search-bar input { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 15px; background: #fff; }
.search-input-wrap input { width: 100%; box-sizing: border-box; padding-right: 34px;
  -webkit-appearance: none; appearance: none; }
.search-input-wrap input::-webkit-search-cancel-button { display: none; }
.search-input-wrap #search-clear { position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: transparent; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 3px; }
.search-input-wrap #search-clear:hover { color: var(--danger); }
.search-bar input:focus { outline: none; border-color: var(--accent); }
/* Ergebnis-Filter als Segmented Control */
.search-filter { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 14px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--card); max-width: 100%; }
.search-chip { background: transparent; border: none; border-left: 1px solid var(--border);
  padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--muted); white-space: nowrap;
  transition: background .12s, color .12s; }
.search-chip:first-child { border-left: none; }
.search-chip:hover { color: var(--accent); background: var(--card-alt); }
.search-chip.active { background: var(--accent); color: #fff; font-weight: 600; }
.search-chip .c { opacity: .65; font-weight: 400; margin-left: 3px; }
.search-chip.active .c { opacity: .85; }
.search-h { font-size: 14px; margin: 16px 0 6px; color: var(--accent); }
.search-hit { border: 1px solid var(--border); background: var(--card-alt); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px; cursor: pointer; }
.search-hit:hover { border-color: var(--accent); }
.search-hit-title { font-weight: 600; overflow-wrap: anywhere; }
.search-hit-meta { font-size: 12px; color: var(--muted); margin: 1px 0 4px; }
.search-hit-snip { font-size: 13px; color: #2c3a34; overflow-wrap: anywhere; }
.search-hit mark, .answer-output mark { background: #fde68a; }

/* Content Strategy */
.cs-h { font-size: 16px; margin: 22px 0 4px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.cs-h4 { font-size: 13px; margin: 0 0 8px; color: var(--accent); }
/* Jede Lücken-Tabelle in einer eigenen Box */
.cs-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(13,20,16,.04); }
.cs-box table.pb { margin-bottom: 0; }
.cs-box table.pb th { background: var(--card); }   /* sticky-Header passend zur Box */
.cs-recs { display: grid; gap: 8px; margin: 6px 0 4px; }
.cs-rec { display: flex; gap: 10px; align-items: flex-start; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.cs-rec .chip { margin-top: 1px; }
.cs-rec-link { cursor: pointer; transition: border-color .12s, background .12s; }
.cs-rec-link:hover { border-color: var(--accent); background: #fff; }
.cs-jump { color: var(--accent); font-size: 11px; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.cs-rec-link:hover .cs-jump { text-decoration: underline; }
.cs-up { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--card-alt);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.cs-up-q { font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.cs-up-q:hover { color: var(--accent); }
.cs-up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 680px) { .cs-up-grid { grid-template-columns: 1fr; } }
.cs-lab { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.cs-list { margin: 0; padding-left: 16px; font-size: 13px; }
.cs-list li { overflow-wrap: anywhere; margin: 1px 0; }
.cs-tp { margin-top: 8px; font-size: 13px; }
.cs-miss-q { cursor: pointer; overflow-wrap: anywhere; }
.cs-miss-q:hover { color: var(--accent); }
.cs-narrative { background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 16px; margin: 0 0 14px; }

/* Hervorhebung der Zitat-Wechsel-URLs in den Antworten (Popup) */
.cs-hl { border-radius: 3px; padding: 0 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.cs-hl-new { background: #cdeccd; }
.cs-hl-old { background: #f6cccc; }
a.cs-hl { text-decoration: underline; }
.cs-legend { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.cs-legend .cs-hl { color: var(--text); }
.cs-sources { margin-top: 10px; font-size: 13px; border-top: 1px solid var(--border); padding-top: 8px; }
.cs-sources ul, .cs-sources ol { margin: 4px 0 0; padding-left: 22px; }
.cs-sources li { overflow-wrap: anywhere; padding: 1px 2px; }
.cs-sources li.cs-hl { padding: 2px 5px; font-weight: 600; box-shadow: none; }

/* Zitat-Wechsel je Prompt (Crawl-Übersicht) */
.cs-prompt { border: 1px solid var(--border); background: var(--card-alt); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px; }
.cs-head { font-weight: 600; margin-bottom: 6px; }
.cs-model { margin: 6px 0 6px 6px; padding-left: 8px; border-left: 2px solid var(--border); }
.cs-model-name { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.cs-model-link { cursor: pointer; }
.cs-model-link:hover { color: var(--accent, #0d7373); text-decoration: underline; }
.cs-url { font-size: 13px; padding: 2px 0; overflow-wrap: anywhere; }
.cs-url.cs-old { color: var(--danger); }
.cs-url.cs-new { color: var(--pos); }
.cs-url .meta { color: var(--muted); }

/* Domain-Check: Konflikt „zitiert trotz Blockade" (Verdacht auf getarnten Bot) */
.dc-conflict-banner { background: #fdecea; border: 1px solid #f5c6cb; color: #7a1f17;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.dc-conflict-banner ul { margin: 6px 0 0; padding-left: 20px; }
tr.dc-conflict > td { background: #fdecea; }
.crit-charts, #crit-ts-wrap {
  background: #f1f3f3; border: 1px solid #e2e6e5; border-radius: 10px; padding: 16px 18px; }
.crit-charts { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
#crit-ts-wrap { margin-top: 16px; }
#crit-ts-wrap h3 { margin-top: 0 !important; }
.crit-pie { max-width: 320px; flex: 1 1 260px; }
.crit-pie canvas { max-height: 260px; }
.crit-tone { flex: 1 1 260px; }
.crit-charts h3 { font-size: 14px; margin: 0 0 8px; }
.tone-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.tone-row > span:first-child { flex: 1; }

/* Prompt-Auswertung */
.table-scroll { overflow-x: auto; }
table.pb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pb th, table.pb td { padding: 6px 10px; border-bottom: 1px solid var(--border);
  text-align: right; white-space: nowrap; }
table.pb th.prompt, table.pb td.prompt { text-align: left; max-width: 420px;
  white-space: normal; }
table.pb th { color: var(--muted); font-weight: 600; position: sticky; top: 0;
  background: var(--card); z-index: 1; box-shadow: inset 0 -1px 0 var(--border); }
table.pb th, table.pb td { font-variant-numeric: tabular-nums; }
/* Zebra-Streifen (Kopfzeile = 1. Zeile bleibt frei); best-Zellen behalten ihre Goldfärbung */
table.pb tr:nth-child(2n) td:not(.best) { background: rgba(13,115,115,.035); }
table.pb tr:hover td:not(.best) { background: var(--card-alt); }
table.pb td.best { background: var(--gold-bg); font-weight: 600; color: var(--text); }
table.pb td.own { color: var(--gold); }
table.pb .qc { color: var(--muted); }

/* KPI-Stat-Karten (Überblick, eigene Firma) */
.kpi-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi-tile { background: var(--card); border: 1px solid #e7ede9; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(13,20,16,.04), 0 8px 22px rgba(13,20,16,.05);
  border-top: 3px solid var(--accent); }
.kpi-val { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.kpi-delta { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--pos); }
.kpi-delta.down { color: var(--danger); }
.kpi-delta.flat { color: var(--muted); font-weight: 500; }
.pb-group { font-size: 14px; margin: 16px 0 6px; color: var(--accent); }
.pb-group:first-child { margin-top: 0; }
/* Matrix-Tabellen (Prompt-/Modell-Auswertung): Domain-Spalten alle gleich breit */
table.pb-matrix { table-layout: fixed; }
table.pb-matrix th.prompt, table.pb-matrix td.prompt { width: 40%; }
table.pb-matrix th:nth-child(2), table.pb-matrix td:nth-child(2) { width: 58px; }
/* übrige (Firmen-/Domain-)Spalten teilen sich den Rest dank table-layout:fixed gleichmäßig */
table.pb-matrix th { white-space: normal; word-break: break-word; }
table.pb-matrix td:not(.prompt) { overflow: hidden; text-overflow: ellipsis; }
/* Faktencheck-Tabellen: drei gleich breite Spalten, Text umbrechen statt scrollen */
table.pb-fc { table-layout: fixed; }
table.pb-fc th, table.pb-fc td { width: 33.33%; text-align: left; white-space: normal;
  word-break: break-word; vertical-align: top; max-width: none; }
td.fc-claim { cursor: pointer; }
td.fc-claim:hover { color: var(--accent); text-decoration: underline; }
.tag.fc-claim { cursor: pointer; }

/* Lade-Spinner (Lazy-Load von Tabs/Inhalten) */
@keyframes som-spin { to { transform: rotate(360deg); } }
.spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 6px solid var(--border); border-top-color: var(--accent);
  animation: som-spin .8s linear infinite;
}
.tab-panel { position: relative; }
/* Lade-Overlay (Logo + Spinner) — füllt randlos die ganze Inhaltsfläche unter Kopf + Haupt-Navi.
   `top` wird per JS auf die Unterkante der Navi gesetzt; kein Karten-Rahmen/-Schatten. */
.page-loading { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1290; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding-bottom: 9vh; }
.page-loading[hidden] { display: none; }
.page-loading-logo { height: 46px; width: auto; }
.panel-spinner {
  position: absolute; inset: 0; z-index: 50; min-height: 320px;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 90px;
  background: rgba(235, 233, 225, .72);   /* --bg, halbtransparent */
}
.box-spinner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 0; color: var(--muted); }

/* Site Explorer — ausklappbarer Pfad-Baum mit tabellarischen Status-Spalten */
#site-tree details { margin: 0; }
.tree-domain { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.tree-domain:first-child { border-top: none; margin-top: 0; }
.tree-domain > summary { font-size: 14px; }
.tree-node > summary, .tree-leaf { font-size: 13px; }
/* Zeile: volle Breite (box-border), Label links (flexibel), Status rechts. Einrückung über
   inline padding-left je Tiefe -> die rechten Status-Spalten bleiben über ALLE Ebenen bündig. */
#site-tree summary, #site-tree .tree-leaf {
  display: flex; width: 100%; box-sizing: border-box; align-items: baseline; gap: 10px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
#site-tree summary:hover, #site-tree .tree-leaf:hover { background: var(--card-alt); }
/* Eigenes Aufklapp-Dreieck (fixe Breite, damit Knoten- und Blatt-Labels bündig stehen) */
#site-tree summary { list-style: none; }
#site-tree summary::-webkit-details-marker { display: none; }
#site-tree summary::before, #site-tree .tree-leaf::before {
  flex: none; width: 13px; text-align: center; font-size: 9px; color: var(--muted);
}
#site-tree summary::before { content: "▶"; transition: transform .15s; transform: translateY(-1px); }
#site-tree .tree-leaf::before { content: ""; }
#site-tree details[open] > summary::before { transform: translateY(-1px) rotate(90deg); }
.tree-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tree-count { color: var(--muted); font-size: 11px; font-weight: 500; }
/* „enthält zitierte Seiten"-Marker (führt visuell zum zitierten Eintrag) */
.tree-cited-badge { color: var(--accent); font-weight: 700; font-size: 11px; }
.tree-redir { color: var(--gold); font-size: 11px; background: var(--gold-bg); padding: 0 6px; border-radius: 8px; white-space: nowrap; }
#site-tree .has-cite { box-shadow: inset 3px 0 0 var(--accent); }
/* Split-Layout: Site Explorer links, Text-Vorschau rechts */
#site-explorer-wrap.split { display: flex; gap: 16px; align-items: flex-start; }
#site-explorer-wrap.split #site-tree { flex: 1 1 50%; min-width: 0; }
#site-preview { flex: 1 1 50%; position: sticky; top: 12px; max-height: 74vh; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--card-alt); }
#site-preview .crawl-text { white-space: pre-wrap; word-break: break-word; font-size: 12px; margin: 8px 0 0; }
.sp-hint { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }

/* In die Executive Summary eingebettete Diagramme + Deep-Links */
.es-graph { margin: 14px 0; border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--card-alt); }
.es-graph-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.es-graph-title { font-size: 13px; font-weight: 600; color: var(--accent); }
.es-graph .es-chart { height: 280px; }
.es-link { color: var(--accent); cursor: pointer; font-weight: 500; white-space: nowrap;
  text-decoration: none; border-bottom: 1px dotted var(--accent); }
.es-link:hover { color: var(--accent-hover); border-bottom-style: solid; }
/* Executive-Summary-Text: mehr Luft vor Abschnitts-Überschriften (z. B. „Kennzahlen im Detail") */
#exec-summary-text.md h2 { margin: 32px 0 10px; line-height: 1.3; }
#exec-summary-text.md h3 { margin: 24px 0 6px; line-height: 1.3; }
#exec-summary-text.md h1 { margin: 6px 0 12px; }
#exec-summary-text.md > :first-child { margin-top: 0; }
/* dezente Trennlinien statt dominanter Default-<hr> */
#exec-summary-text.md hr { border: none; border-top: 1px solid var(--border); opacity: .85; margin: 20px 0; }
/* Body der Summary großzügiger einrücken */
#exec-summary-text.md { padding: 8px 18px 16px; line-height: 1.6; }
#exec-summary-text.md > :first-child { margin-top: 0; }
/* „Highlights" als eigenes, hellgrün hinterlegtes Segment (auch im Aufnahme-/Selektionstool wählbar) */
.es-highlights { background: #e7f6ec; border: 1px solid #cfe8d8; border-radius: 12px; padding: 16px 20px; margin: 20px 0; }
.es-highlights > :first-child { margin-top: 0; }
.es-highlights > :last-child { margin-bottom: 0; }

/* PDF-Export der Executive Summary (html2pdf) — sauberes, helles Layout */
.pdf-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.45);
  overflow: auto; padding: 24px 0; }
/* Breite < html2pdf-Innencontainer (186mm ≈ 703px), sonst wird rechts abgeschnitten.
   Kein eigenes horizontales Padding — den Seitenrand setzt html2pdf bereits über die margin-Option. */
.pdf-export { width: 700px; max-width: 100%; margin: 0 auto; background: #fff; box-sizing: border-box;
  overflow: hidden; color: #14201b; padding: 0 6px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
/* nichts darf horizontal über die Seite hinausragen (sonst Rechts-Beschnitt im PDF) */
.pdf-export * { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.pdf-export pre, .pdf-export code { white-space: pre-wrap; word-break: break-word; }
.pdf-export .es-link { white-space: normal; }   /* Links dürfen umbrechen, keine überbreiten Zeilen */
.pdf-export .card { border: none; background: #fff; padding: 0; margin: 0 0 14px; }
/* einheitliche Überschriften-Hierarchie für Summary-Text UND Karten */
.pdf-export h1 { font-size: 21px; margin: 0 0 12px; color: #0d7373; line-height: 1.25; }
.pdf-export h2 { font-size: 16px; margin: 22px 0 6px; line-height: 1.3; }
.pdf-export h3 { font-size: 14px; margin: 16px 0 4px; line-height: 1.3; }
.pdf-export h4 { font-size: 12.5px; margin: 12px 0 4px; }
.pdf-export .es-graph { background: #fff; border: 1px solid #e2e8e4; }
.pdf-export .es-graph .es-chart, .pdf-export .chart-h320 { height: auto; }
/* Charts als Bild: max-Maße werden in JS gesetzt; width/height auto -> Seitenverhältnis bleibt erhalten */
.pdf-canvas-img { display: block; margin: 4px auto; max-width: 100%; width: auto; height: auto; }
.pdf-export table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pdf-export table td, .pdf-export table th { border-bottom: 1px solid #e2e8e4; padding: 4px 6px; }
/* keine Zeile/Absatz/Diagramm mitten am Seitenende abschneiden */
.pdf-export p, .pdf-export li, .pdf-export h1, .pdf-export h2, .pdf-export h3, .pdf-export h4,
.pdf-export tr, .pdf-export blockquote, .pdf-export .es-graph, .pdf-export .pdf-canvas-img,
.pdf-export .card { break-inside: avoid; page-break-inside: avoid; }
/* Überschrift nicht allein am Seitenende: Headline + Folgeblock zusammenhalten */
.pdf-export h1, .pdf-export h2, .pdf-export h3, .pdf-export h4 { break-after: avoid; page-break-after: avoid; }
.pdf-export .pdf-keep { break-inside: avoid; page-break-inside: avoid; }
.pdf-export .pdf-keep > :first-child { margin-top: 0; }
/* Anhang (PDF + Details): jeder Detailbereich ist ein eigener Block (eigene Seite via addPage) */
.pdf-export .pdf-appendix-title { margin: 0 0 8px; padding-bottom: 8px; font-size: 19px; color: #0d7373;
  border-bottom: 2px solid #0d7373; }
.pdf-export .pdf-section-title { margin: 6px 0 8px; font-size: 16px; color: #0d7373;
  border-bottom: 1px solid #cfe0db; padding-bottom: 4px; }
/* Detail-Panels im Anhang: App-Layout (Flex/Grid/feste Höhen) zu schlichtem Fluss neutralisieren */
.pdf-export .subpanel2, .pdf-export .subpanel, .pdf-export .grid, .pdf-export .row,
.pdf-export .cards, .pdf-export .ts-grid { display: block; height: auto; }
/* Vertikale Subnavi im Export zu schlichtem Fluss neutralisieren */
.pdf-export .tab-panel.vnav { display: block; }
.pdf-export .tab-panel.vnav > .subtabs { position: static; flex-direction: row; flex-wrap: wrap; border-right: none; }
.pdf-export [hidden] { display: none !important; }

/* Begriffserklärungen (eigene Seite in beiden PDFs) */
.pdf-export .pdf-glossary { page-break-before: always; break-before: page; }
.pdf-export .pdf-gloss-title { font-size: 20px; color: #0d7373; border-bottom: 2px solid #0d7373;
  padding-bottom: 8px; margin: 0 0 14px; }
.pdf-export .pdf-gloss dt { font-weight: 700; color: #14201b; margin-top: 12px; }
.pdf-export .pdf-gloss dd { margin: 2px 0 0; color: #333; }

/* Highlights-Abschnitt der Summary: hellgrün, von Rand zu Rand (über das 6px-Padding hinaus) */
.pdf-export .pdf-highlight { background: #e7f6ec; margin: 10px -6px; padding: 10px 16px;
  border-left: 4px solid #1f7a5a; break-inside: avoid; page-break-inside: avoid; }
.pdf-export .pdf-highlight > :first-child { margin-top: 0; }
.pdf-export .pdf-highlight > :last-child { margin-bottom: 0; }

/* Deckblatt (PDF + Details, Seite 1) */
.pdf-cover { min-height: 980px; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 6px; }
.pdf-cover-logo { width: 300px; max-width: 70%; height: auto; margin-bottom: 48px; }
.pdf-cover-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #5a6b65; margin-bottom: 14px; }
.pdf-cover-title { font-size: 36px; font-weight: 700; color: #0d7373; line-height: 1.1; margin-bottom: 12px; }
.pdf-cover-sub { font-size: 19px; color: #14201b; margin-bottom: 34px; }
.pdf-cover-meta { font-size: 13px; color: #5a6b65; }

/* Inhaltsverzeichnis (Seite 2) */
.pdf-toc-logo { height: 28px; width: auto; display: block; margin: 0 0 18px; }
.pdf-toc h1 { font-size: 22px; color: #0d7373; margin: 0 0 16px; border-bottom: 2px solid #0d7373; padding-bottom: 8px; }
.pdf-toc-head { margin: 16px 0 4px; font-weight: 700; color: #0d7373; font-size: 14px; }
.pdf-toc-entry { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px dotted #cfe0db; font-size: 14px; }
.pdf-toc-entry.pdf-toc-indent { padding-left: 16px; }
.pdf-toc-entry a { color: #14201b; text-decoration: none; }
.pdf-toc-entry .pg { color: #0d7373; font-variant-numeric: tabular-nums; }

/* Fallback: PDF-Export der Executive Summary (Druckdialog) */
@media print {
  body.printing-summary header,
  body.printing-summary .tabs,
  body.printing-summary #project-desc,
  body.printing-summary #exec-summary-select,
  body.printing-summary #exec-pdf-btn,
  body.printing-summary #exec-regen-btn,
  body.printing-summary .es-link,
  body.printing-summary .tab-panel:not([data-panel="exec"]) { display: none !important; }
  body.printing-summary .tab-panel[data-panel="exec"] { display: block !important; }
  body.printing-summary, body.printing-summary main { background: #fff; padding: 0; max-width: none; }
  body.printing-summary .card { border: none; box-shadow: none; background: #fff; padding: 0 0 12px; margin: 0 0 12px; }
  body.printing-summary .es-graph, body.printing-summary .ts-grid .card,
  body.printing-summary #sum-movers-card { break-inside: avoid; }
  @page { margin: 16mm; }
}

/* Einrichtungs-Wizard */
.wizard-box { max-width: 640px; width: 92vw; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(13,20,16,.28); }
/* Wizard als ganze SEITE statt schwebender Layer: opaker Vollbild-Hintergrund, kein Dialog-Schatten. */
.modal.wizard-page { background: var(--bg); padding: 0; align-items: stretch; justify-content: stretch; z-index: 120; }
.modal.wizard-page .wizard-box { max-width: 760px; width: 100%; margin: 0 auto; border: none; border-radius: 0;
  box-shadow: none; min-height: 100vh; max-height: none; }
.modal.wizard-page .modal-head { padding-top: 30px; }
.modal.wizard-page .modal-body { flex: 1 1 auto; }
.modal.wizard-page .wiz-foot { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); }
/* Schrittleiste: nummerierte Pillen */
.wiz-stepbar { display: flex; gap: 6px; padding: 14px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--card-alt); }
.wiz-dot { font-size: 12px; color: var(--muted); padding: 5px 12px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); line-height: 1; }
.wiz-dot.active { background: var(--accent); color: #fff; font-weight: 600; border-color: var(--accent); }
.wiz-dot.done { color: var(--pos); border-color: var(--pos); }
.wizard-box .modal-body { padding: 20px; }
.wiz-step h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--text);
  padding-top: 14px; border-top: 1px solid var(--border); }
.wiz-step h3:first-of-type { border-top: none; padding-top: 0; }
.wiz-step > p.muted { margin: 0 0 12px; line-height: 1.5; }
/* Felder: Label als Caption, Input volle Breite + einheitlicher Stil */
.wiz-field { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.wiz-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; font-size: 14px; color: var(--text);
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.wiz-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,115,115,.12); }
.wiz-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.wiz-row input { flex: 1 1 0; min-width: 0; box-sizing: border-box; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.wiz-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,115,115,.12); }
.wiz-comp .x { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--border); background: #fff;
  color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.wiz-comp .x:hover { border-color: var(--danger); color: var(--danger); }
.wiz-prov { margin-bottom: 12px; }
.wiz-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.wiz-check { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
#wiz-prompts .wiz-check { display: block; padding: 5px 2px; border-bottom: 1px solid var(--border); }
.wiz-crawl { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.wiz-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--card-alt); }
.wiz-foot button:not(.primary) { font-size: 13px; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; }
.wiz-foot button:not(.primary):hover { border-color: var(--accent); color: var(--accent); }
.wiz-foot button.primary { font-size: 13px; padding: 8px 16px; border-radius: 8px; }
.req { color: var(--danger); font-weight: 700; }
.wiz-req:required:invalid { border-color: var(--danger); background: #fff6f5; }
button.small { font-size: 12px; padding: 3px 10px; }
.tree-status { display: inline-flex; gap: 8px; flex: none; align-items: baseline; }
/* feste Spaltenbreiten -> Performance/Sitemap/robots stehen über alle Zeilen bündig */
.st-spd, .st-size, .st-perf, .st-sm, .st-rb { font-size: 11px; padding: 1px 7px; border-radius: 10px;
  white-space: nowrap; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.st-spd { width: 86px; }
.st-size { width: 66px; color: var(--muted); text-align: right; }
.st-spd.fast { background: rgba(31,122,90,.13); color: var(--pos); }   /* schnell */
.st-spd.mid  { background: var(--card-alt); color: var(--muted); }     /* mittel */
.st-spd.slow { background: var(--gold-bg); color: var(--gold); }       /* langsam (auffällig) */
.st-spd.bad  { background: rgba(184,32,32,.14); color: var(--danger); }/* kritisch */
.perf-domain { margin-bottom: 18px; }
.perf-domain h3 { margin: 0 0 4px; }
table.pb th.own { color: var(--gold); }
tr.dr-sum td { border-top: 2px solid var(--border); background: var(--card-alt); }
.st-perf { width: 132px; }
.st-perf.cited { background: rgba(13,115,115,.12); color: var(--accent); cursor: pointer; }
.st-sm { width: 92px; }
.st-sm.ok { background: rgba(31,122,90,.13); color: var(--pos); }   /* in Sitemap = positiv (grün) */
.st-sm.no { background: var(--gold-bg); color: var(--gold); }       /* NICHT in Sitemap = auffällig (orange) */
.st-rb { width: 132px; }
.st-rb.free { background: var(--card-alt); color: var(--muted); }
.st-rb.block { background: rgba(184,32,32,.14); color: var(--danger); }
.st-sm.sm-link:hover { text-decoration: underline; }
/* Sitemap-Button im Domain-Kopf + Popup-Zeilen */
.sm-btn { font-size: 12px; padding: 2px 10px; border-radius: 12px; background: var(--card-alt);
  color: var(--accent); cursor: pointer; white-space: nowrap; }
.sm-btn:hover { background: var(--accent); color: #fff; }
.sm-row { padding: 2px 0; font-size: 13px; overflow-wrap: anywhere; }
.sm-uncrawled { color: var(--muted); }

/* Competitive URLs */
.cu-mention { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
.cu-mention:hover { border-color: var(--accent); }
.cu-head { margin-bottom: 8px; }
.cu-groups { display: flex; flex-wrap: wrap; gap: 16px; }
.cu-group { min-width: 220px; flex: 1; }
.cu-co { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.cu-co.own { color: var(--gold); }
.cu-url { font-size: 12px; padding: 1px 0; overflow-wrap: anywhere; }

/* Gerenderter Markdown in Antworten */
.answer-output.md { white-space: normal; }
.answer-output.md h1, .answer-output.md h2, .answer-output.md h3,
.answer-output.md h4 { margin: 10px 0 4px; line-height: 1.25; }
.answer-output.md h1 { font-size: 18px; }
.answer-output.md h2 { font-size: 16px; }
.answer-output.md h3 { font-size: 14px; }
.answer-output.md p { margin: 6px 0; }
.answer-output.md ul, .answer-output.md ol { margin: 6px 0; padding-left: 22px; }
.answer-output.md li { margin: 2px 0; }
.answer-output.md a { color: var(--accent); }
.answer-output.md code { background: var(--card-alt); padding: 1px 4px; font-size: 12px; }
.answer-output.md pre { background: var(--card-alt); padding: 10px; overflow-x: auto; }
.answer-output.md pre code { background: none; padding: 0; }
.answer-output.md table { border-collapse: collapse; margin: 8px 0; }
.answer-output.md th, .answer-output.md td { border: 1px solid var(--border); padding: 4px 8px; }
.answer-output.md blockquote { border-left: 3px solid var(--border); margin: 6px 0;
  padding-left: 10px; color: var(--muted); }

.crit-charts canvas { height: 240px !important; width: 100% !important; }

.narr-top { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.narr-top .radar-wrap { flex: 0 0 auto; width: min(460px, 100%); max-width: 460px; margin: 0; }  /* links */
.narr-top .narr-right { flex: 1 1 320px; min-width: 0; }  /* rechts: Pills oben, Tonalität darunter */
.narr-tone { flex: 0 1 300px; }                          /* etwas schmaler */
.narr-tone h3 { font-size: 14px; margin: 0 0 6px; color: var(--muted); }
.narr-tone canvas { height: 460px !important; }          /* etwa auf Radar-Höhe */
/* „Tonalität je Domain" rückt unter den Radar+Pills-Block */
.narr-tone-below { flex: none; width: 100%; max-width: 560px; margin-top: 22px; }
/* Tonalitäts-Skala (gezoomter Punkt-Plot, macht kleine Unterschiede sichtbar) */
.tone-scale { margin-top: 4px; }
.tone-axis { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--muted); margin: 0 52px 8px 162px; }
.tone-row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 12px; margin: 9px 0; }
.tone-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tone-track { position: relative; height: 8px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: 5px; }
.tone-dot { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(13,20,16,0.25); }
.tone-val { font-size: 13px; font-weight: 700; text-align: right; }

#run-list { margin-top: 12px; }

#share-chart-wrap { position: relative; width: 100%; }

.card h2 { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 820px) { .ts-grid { grid-template-columns: 1fr; } }
.ts-grid .card { margin-bottom: 0; }

/* ---------------- Handbuch-Drawer (rechts) ---------------- */
.handbook-btn {
  background: var(--card-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.handbook-btn:hover { border-color: var(--accent); color: var(--accent); }
.help-backdrop {
  position: fixed; inset: 0; background: rgba(13,20,16,0.28); z-index: 150;
  opacity: 0; transition: opacity .25s;
}
.help-backdrop.open { opacity: 1; }
.help-backdrop[hidden] { display: none; }
.help-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 94vw);
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(13,20,16,0.18); z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
}
.help-drawer.open { transform: translateX(0); }
.help-drawer[hidden] { display: none; }
.help-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.help-drawer-head strong { font-size: 15px; }
.help-close {
  background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 0 4px;
}
.help-close:hover { color: var(--accent); }
.help-drawer-nav {
  display: flex; flex-wrap: wrap; gap: 0; padding: 8px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--border); background: var(--card-alt);
}
.help-drawer-nav button {
  background: transparent; border: 1px solid transparent; border-radius: 14px;
  padding: 4px 11px; cursor: pointer; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.help-drawer-nav button:hover { color: var(--accent); }
.help-drawer-nav button.active { background: var(--accent); color: #fff; }
.help-drawer-body {
  position: relative; flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 40px;
}
.help-drawer-body h1 { font-size: 20px; margin: 14px 0 6px; }
.help-drawer-body h2 { font-size: 16px; margin: 22px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.help-drawer-body h3 { font-size: 14px; margin: 16px 0 4px; color: var(--accent); }
.help-drawer-body p, .help-drawer-body li { font-size: 13px; line-height: 1.55; }
.help-drawer-body code { background: var(--card-alt); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.help-flash {
  animation: helpflash 1.6s ease; border-radius: 6px;
}
@keyframes helpflash {
  0%, 30% { background: #fde68a; box-shadow: 0 0 0 6px #fde68a; }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (max-width: 560px) { .handbook-btn { padding: 6px 9px; } }

/* Datenbank-Übersicht (Admin) */
.db-head { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.db-stat { flex: 1 1 120px; background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; border-top: 3px solid var(--accent); }
.db-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* Marktumfeld-Tabelle */
.mk-table td, .mk-table th { vertical-align: middle; }
/* HTML-Kommentare */
.hc-cmt { text-align: left; white-space: normal; max-width: 560px; }
.hc-cmt code { font-size: 12px; color: #2c3a34; word-break: break-word; white-space: pre-wrap; display: block;
  background: var(--card-alt); border-radius: 4px; padding: 2px 6px; }
.mk-bar { width: 120px; height: 8px; background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; }
.mk-bar span { display: block; height: 100%; background: var(--accent); }
.mk-add { font-size: 11px; padding: 2px 8px; margin-left: 6px; border: 1px solid var(--border);
  background: var(--card-alt); border-radius: 6px; cursor: pointer; color: var(--accent); }
.mk-add:hover { border-color: var(--accent); background: #fff; }

/* Export-Dropdown (Executive Summary) */
.export-menu { position: relative; display: inline-block; }
.export-trigger { background: var(--card-alt); border: 1px solid var(--border); padding: 6px 12px;
  cursor: pointer; font-size: 13px; color: var(--text); border-radius: 8px; display: inline-flex; gap: 6px; align-items: center; }
.export-trigger:hover { border-color: var(--accent); color: var(--accent); }
.export-trigger .caret { color: var(--muted); font-size: 11px; }
.export-list { position: absolute; top: calc(100% + 4px); right: 0; min-width: 240px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(13,20,16,0.15); z-index: 60; padding: 4px; }
.export-list[hidden] { display: none; }
.export-list button { display: block; width: 100%; background: transparent; border: none; text-align: left;
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 4px; white-space: nowrap; }
.export-list button:hover { background: var(--card-alt); color: var(--accent); }
.export-group { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 7px 12px 2px; }

/* Data Lab: parallele Koordinaten */
.datalab-card { padding: 18px 20px; }
/* „?"-Icon sitzt hier in der Snapshot-Leiste, nicht in der Karten-Ecke -> keine 30px-Reserve rechts */
.tab-panel .card.datalab-card .row.spread { padding-right: 0; }
.dl-ctl { display: flex; flex-direction: column; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; gap: 3px; }
.dl-ctl select { font-size: 13px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); text-transform: none; letter-spacing: 0; }
.dl-ctl.dl-check { flex-direction: row; align-items: center; gap: 6px; color: var(--text);
  font-size: 13px; text-transform: none; letter-spacing: 0; align-self: flex-end; padding-bottom: 5px; }
#dl-count { align-self: flex-end; padding-bottom: 5px; }
.dl-wrap { position: relative; width: 100%; height: 58vh; min-height: 360px; display: flex; flex-direction: column;
  background: #14201b; border: 1px solid #233830; border-radius: 10px; overflow: hidden; --dl-op: .55; }
.dl-heads { display: flex; flex: 0 0 auto; padding: 8px 46px 6px 8px; border-bottom: 1px solid #233830; background: #1a2a24; }
.dl-axis-head { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; }
.dl-axis-head.dl-dragover { box-shadow: inset 2px 0 0 var(--accent); }
.dl-axdrag { cursor: grab; color: #7f9b92; font-size: 13px; line-height: 1; padding: 0 1px; user-select: none; }
.dl-axdrag:active { cursor: grabbing; }
.dl-axbtn { max-width: 100%; min-width: 0; font-size: 12px; padding: 3px 7px; border: 1px solid #2c4f47;
  border-radius: 6px; background: #0f1f1b; color: #e6efeb; cursor: pointer; display: inline-flex; align-items: center;
  gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-axbtn:hover { border-color: var(--accent); }
.dl-axcaret { color: #7f9b92; font-size: 9px; flex: 0 0 auto; }
.dl-axrm { border: none; background: transparent; color: #7f9b92; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.dl-axrm:hover { color: var(--danger); }
.dl-svg { flex: 1 1 auto; width: 100%; display: block; }
.dl-line { fill: none; stroke-width: 1.5; stroke-opacity: var(--dl-op); pointer-events: stroke; cursor: pointer; }
.dl-line.hl { stroke-width: 3; stroke-opacity: 1; }
.dl-line.dim { stroke: #5b726b !important; stroke-opacity: .05; pointer-events: none; }
.dl-axln { stroke: #5f7a72; stroke-width: 1; }
.dl-bubble { fill: rgba(232,89,12,.16); stroke: rgba(232,89,12,.45); stroke-width: .6; pointer-events: none; }
.dl-axval { fill: #9fb6ae; font-size: 10.5px; }
.dl-axcat { fill: #dcebe5; font-size: 10px; stroke: #14201b; stroke-width: 3px; paint-order: stroke; }
.dl-axtick { fill: #9fb6ae; font-size: 9px; stroke: #14201b; stroke-width: 2.5px; paint-order: stroke; }
.dl-axtickln { stroke: #5f7a72; stroke-width: 1; }
.dl-axhit { fill: transparent; cursor: ns-resize; }
.dl-brush { fill: rgba(64,210,191,.20); stroke: #40d2bf; stroke-width: 1; pointer-events: auto; cursor: move; }
.dl-brush-temp { fill: rgba(64,210,191,.12); stroke-dasharray: 3 2; pointer-events: none; }
.dl-wrap .board-empty { color: #9fb6ae; }
.dl-add-fab { position: absolute; top: 8px; right: 10px; z-index: 5; width: 23px; height: 23px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff; font-size: 15px; line-height: 21px; text-align: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); padding: 0; }
.dl-add-fab:hover { filter: brightness(1.1); }

/* Data Lab: Parameter-Auswahl-Popup */
.dl-pop { position: fixed; z-index: 60; width: 270px; max-height: 62vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,16,.25); padding: 8px; }
.dl-pop[hidden] { display: none; }
.dl-snap-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 270px; max-height: 62vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,16,.25); padding: 4px; text-align: left; }
.dl-snap-pop[hidden] { display: none; }
.dl-sp-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 4px; }
.dl-sp-item { display: block; width: 100%; text-align: left; box-sizing: border-box; background: transparent; border: none;
  border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: 12.5px; }
.dl-sp-item:hover { background: var(--card-alt); }
.dl-sp-snaprow { display: flex; align-items: center; gap: 2px; }
.dl-sp-snaprow .dl-sp-snap { flex: 1 1 auto; }
.dl-sp-del { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 6px; }
.dl-sp-del:hover { color: var(--danger); background: var(--card-alt); }
.dl-sp-empty { padding: 6px 8px; }
.dl-color-btn { background: #fff; border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  padding: 6px 9px; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.dl-color-btn:hover { border-color: var(--accent); }
.dl-color-btn #dl-color-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-color-btn .caret { color: var(--muted); font-size: 11px; margin-left: auto; }
.dl-color-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: 250px; max-height: 60vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,16,.22); padding: 4px; }
.dl-color-pop[hidden] { display: none; }
.dl-cp-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 4px; }
.dl-cp-item { display: block; width: 100%; text-align: left; box-sizing: border-box; background: transparent; border: none;
  border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: 12.5px; }
.dl-cp-item:hover { background: var(--card-alt); }
.dl-cp-item.sel { font-weight: 600; color: var(--accent); }
.dl-pop-search { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; margin-bottom: 6px; }
.dl-pop-list { overflow-y: auto; }
.dl-pop-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: transparent;
  border: none; border-radius: 6px; padding: 5px 7px; font-size: 13px; cursor: pointer; color: var(--text); }
.dl-pop-item:hover { background: var(--card-alt); }
.dl-pop-item.sel { font-weight: 600; color: var(--accent); }
.dl-pop-check { width: 12px; flex: 0 0 auto; color: var(--accent); }
.dl-pop-tag { margin-left: auto; font-size: 11px; color: var(--muted); background: var(--card-alt);
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.dl-pop-item.used .dl-pop-tag { color: var(--accent); border-color: var(--accent); }
.dl-pop-empty { padding: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.dl-pop-item .dl-pop-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mehrspaltiges, gruppiertes Parameter-Popup */
.dl-param-wide { width: 480px; }
.dl-pop-list.dl-cols { column-count: 2; column-gap: 14px; }
.dl-pop-group { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 9px; }
.dl-pop-ghdr { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
  margin: 2px 6px 3px; font-weight: 600; }
.dl-pop-item { font-size: 12.5px; padding: 4px 7px; }
.dl-pop-tag { padding: 0 6px; }
/* Zahnrad-Button + Darstellungs-Popup */
.dl-snap-sel { align-self: flex-end; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--text); max-width: 170px; }
.dl-icon-btn { border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.dl-icon-btn:hover, .dl-icon-btn.active { color: var(--accent); }
/* „?"-Hilfe-Icon in die Snapshot-Leiste einreihen (statt absolut in die Karten-Ecke) */
.dl-snapbar .help-icon.in-toolbar { position: relative; top: auto; right: auto; flex: 0 0 auto; }
/* Klartext-Liste der gefilterten Seiten unter dem Graphen */
.dl-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  padding: 10px 12px; max-height: 320px; overflow: auto; }
.dl-list[hidden] { display: none; }
.dl-list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.dl-list-head .dl-list-title { font-weight: 600; }
.dl-list-head .spacer { flex: 1 1 auto; }
.dl-list-item { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--accent); text-decoration: none; padding: 2px 4px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dl-list-item:hover { background: var(--card-alt); text-decoration: underline; }
.dl-list-empty { color: var(--muted); font-size: 13px; }
.dl-list-more { color: var(--muted); font-size: 12px; padding: 6px 4px 0; }
.dl-list-head .bf-mini-btn:disabled { opacity: .45; cursor: default; }
/* Gruppen-Zuordnung im Data Lab */
.dl-group-pop { margin-top: 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; max-width: 420px;
  box-shadow: 0 8px 24px rgba(13,20,16,.15); }
.dl-group-pop[hidden] { display: none; }
.dl-group-pop .dgp-title { font-weight: 600; font-size: 13.5px; }
.dl-group-pop label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.dl-group-pop select, .dl-group-pop input { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--card); color: var(--text); }
.dl-group-pop .dgp-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 2px; }
/* Farb-Legende neben „Einfärben nach" */
.dl-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; font-size: 12px; color: var(--muted); }
.dl-legend:empty { display: none; }
.dl-leg-cap { color: var(--muted); }
.dl-leg-cap b { color: var(--text); font-weight: 600; }
.dl-leg-grad { width: 96px; height: 11px; border-radius: 3px; border: 1px solid var(--border); flex: 0 0 auto; }
.dl-leg-min, .dl-leg-max { font-variant-numeric: tabular-nums; }
.dl-leg-cat { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.dl-leg-cat i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dl-gear-pop { width: 230px; gap: 12px; }
.dl-gctl { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; }
.dl-gctl input[type="range"] { width: 100%; }
.dl-gctl.dl-gcheck { flex-direction: row; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 12px; cursor: pointer; }
.dl-gctl.dl-gcheck input { flex: 0 0 auto; margin: 0; }
.dl-gval { float: right; font-variant-numeric: tabular-nums; color: var(--text); text-transform: none; letter-spacing: 0; }
#dl-hue { background: linear-gradient(to right, hsl(0,62%,54%), hsl(60,62%,54%), hsl(120,62%,54%),
  hsl(180,62%,54%), hsl(240,62%,54%), hsl(300,62%,54%), hsl(360,62%,54%)); border-radius: 4px; height: 6px;
  -webkit-appearance: none; appearance: none; }

.bf-ts-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
/* Projekteinstellungen: Task-Status-Editor */
.task-status-editor { display: flex; flex-direction: column; gap: 6px; }
.task-status-editor .tse-row { display: flex; align-items: center; gap: 8px; }
.task-status-editor .tse-color { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.task-status-editor .tse-label { flex: 1 1 auto; max-width: 280px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.task-status-editor .tse-del { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.task-status-editor .tse-del:hover { color: var(--danger); }

/* Board: dunkle Farbschemata (Hintergrund wird je Theme inline gesetzt, s. boardSetTheme) */
.board-wrap.board-dark .board-empty { color: #b6bcc6; }

/* Board: Task Hub (frei platzierbare Aufgaben-Bäume) */
.board-iconbtn.active { color: var(--accent); background: var(--card-alt); }
.board-taskhub-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12.5px;
  box-shadow: 0 2px 10px rgba(13,20,16,.2); }
.board-taskhub-hint[hidden] { display: none; }
/* Board-Hub: einklappbare Unteraufgaben */
.bff-note-chead { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-alt); font-size: 13px; }
.bff-note-chead:hover { border-color: var(--accent); }
.bff-note-collapsed { margin: 4px 0; }
.bff-note-caret { color: var(--muted); font-size: 10px; flex: 0 0 auto; cursor: pointer; user-select: none; }
.bff-note-caret-open { margin-right: 2px; }
.bff-note-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.bff-note-ctitle { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bff-note-cn { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
/* Board: Fokus-/Einbettungs-Hinweis über der Notizliste (Klick auf Unteraufgabe) */
.bff-focusbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px;
  background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; }
.bff-focusbar[hidden] { display: none; }
.bff-focus-label { color: var(--muted); margin-right: 2px; }
.bff-focus-crumb { background: transparent; border: none; color: var(--accent); cursor: pointer; padding: 0 2px;
  font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bff-focus-crumb:hover { text-decoration: underline; }
.bff-focus-cur { color: var(--text); font-weight: 600; }
.bff-focus-all { margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer; font-size: 11.5px; padding: 2px 8px; }
.bff-focus-all:hover { border-color: var(--accent); color: var(--accent); }
/* Board: kurzes Hervorheben einer Notiz (z. B. beim „Unteraufgabe anfügen") */
.bff-note-item.bff-note-flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s; border-radius: 8px; }
/* Board: Task-Hub-Umbenennen im Drawer-Kopf */
.bff-hub-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--card); }
.bff-hub-name[hidden] { display: none; }

/* Board: Site-Graph der gecrawlten Seiten */
.board-card { padding: 18px 20px; }
/* Vollbreite-Modus: Hauptnavigation aus, Board füllt das Fenster */
body.board-mode .tabs { display: none; }
body.board-mode #project-desc { display: none; }
body.board-mode main { max-width: none; margin: 0; padding: 6px 12px 0; }
body.board-mode .tab-panel[data-panel="board"] .board-card {
  border: none; box-shadow: none; border-radius: 0; padding: 6px 14px; margin: 0; }
/* Planung: identischer Immersiv-Modus (Vollbreite, ohne Navi) wie das Board. */
body.plan-mode .tabs { display: none; }
body.plan-mode #project-desc { display: none; }
body.plan-mode main { max-width: none; margin: 0; padding: 6px 12px 0; }
body.plan-mode .tab-panel[data-panel="planung"] .plan-card { border: none; box-shadow: none; border-radius: 0; padding: 6px 14px; margin: 0; }
body.plan-mode .plan-canvas-wrap { height: 86vh; }
body.plan-mode .board-nav-fab .ic-explode { display: none; }
body.plan-mode .board-nav-fab .ic-implode { display: block; }
.board-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.board-legend .bl { display: inline-flex; align-items: center; gap: 6px; }
.board-legend .bl i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.board-wrap { position: relative; width: 100%; height: 72vh; min-height: 440px;
  background: #f4faf7; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: grab; }
.board-wrap canvas { display: block; }
/* 3D-Ring-Tunnel-Overlay (Alternativ-Ansicht) */
.board3d { position: absolute; inset: 0; z-index: 40; background: #0b1020; }
.board3d[hidden] { display: none; }
.board3d > canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.board3d > canvas:active { cursor: grabbing; }
.board3d-bar { position: absolute; left: 12px; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 8px 12px; background: rgba(18,22,34,.72); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; color: #e6ecf5; backdrop-filter: blur(4px); }
.board3d-bar .board3d-title { font-weight: 600; font-size: 13px; }
.board3d-bar .board3d-help { color: #aeb8cc; font-size: 11.5px; }
.board3d-bar .board3d-help b { color: #e6ecf5; }
.board3d-bar #board3d-status { color: #aeb8cc; font-size: 12px; }
.board3d-bar #board3d-invert, .board3d-bar #board3d-exit { font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.board3d-bar #board3d-invert { margin-left: auto; }
.board3d-bar #board3d-invert:hover, .board3d-bar #board3d-exit:hover { background: rgba(255,255,255,.16); }
.board3d-bar #board3d-invert.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.board3d-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 320px;
  background: rgba(10,14,22,.92); color: #eef2f8; border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
  padding: 6px 9px; font-size: 12px; line-height: 1.35; box-shadow: 0 4px 16px rgba(0,0,0,.4); word-break: break-all; }
.board3d-tip .meta { color: #aeb8cc; }
.board-tip { position: absolute; z-index: 5; background: var(--card); border: 1px solid var(--accent);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; max-width: 250px; pointer-events: none;
  box-shadow: 0 4px 14px rgba(13,20,16,.18); }
.board-tip[hidden], .board-empty[hidden] { display: none; }
.board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }

/* Board: Filter-Layer (links einblendbar) */
.bf-toggle { position: absolute; top: 10px; left: 10px; z-index: 4;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.bf-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Board: Seitenzahlen je Domain (oben rechts) */
.board-stats { position: absolute; top: 10px; right: 10px; z-index: 4; min-width: 150px; max-width: 280px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(13,20,16,.08); font-size: 12px; }
.board-stats:empty { display: none; }
/* Community-Legende (Einfärbemodus „nach Community") — unten links, scrollbar. */
.board-comm-legend { position: absolute; left: 10px; bottom: 10px; z-index: 4; width: 220px; max-height: 46%;
  overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(13,20,16,.08); font-size: 12px; }
.board-comm-legend[hidden] { display: none; }
.board-comm-legend .bcl-head { font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.board-comm-legend .bcl-mod { font-weight: 600; color: var(--accent); text-transform: none; letter-spacing: 0; }
.board-comm-legend .bcl-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.board-comm-legend .bcl-row i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.board-comm-legend .bcl-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.board-comm-legend .bcl-n { color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.board-stats .bs-title { font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 6px; }
.board-stats .bs-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.board-stats .bs-row i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.board-stats .bs-dom { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.board-stats .bs-cnt { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.board-stats .bs-cnt b { color: var(--text); }
.board-stats.filtering .bs-cnt b { color: var(--accent); }
.board-filter { position: absolute; top: 0; left: 0; height: 100%; width: 280px; z-index: 6;
  background: var(--card); border-right: 1px solid var(--border); box-shadow: 2px 0 14px rgba(13,20,16,.10);
  display: flex; flex-direction: column; }
.board-filter[hidden] { display: none; }
.bf-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px;
  border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.bf-head button { background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.bf-head button:hover { color: var(--accent); }
.bf-body { overflow-y: auto; padding: 10px 14px; }
.bf-group { margin-bottom: 16px; }
.bf-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 6px; }
/* Board-Toolbar: monochrome Icon-Buttons + Darstellungs-Popup */
.board-toolbar { gap: 8px; }
.board-crawl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border: 1px solid var(--danger); color: var(--danger); background: var(--card);
  border-radius: 999px; cursor: pointer; line-height: 1; }
.board-crawl-btn[hidden] { display: none; }
.board-crawl-btn:hover { background: #fdecea; }
.board-crawl-btn.active { background: var(--danger); color: #fff; }
/* Besucher-Analyse / Bot-Abdeckung: klassisches dunkel-mintgrün */
.board-mint-btn { border-color: #2e7459; color: #2e7459; }
.board-mint-btn:hover { background: #e7f3ee; }
.board-mint-btn.active { background: #2e7459; color: #fff; border-color: #2e7459; }
.board-crawl-ll { position: absolute; left: 14px; bottom: 14px; z-index: 21; max-width: calc(100% - 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.board-crawl-label { max-width: 100%;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--card);
  border: 1px solid var(--danger); border-radius: 8px; box-shadow: 0 6px 20px rgba(13,20,16,.18);
  font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-crawl-label[hidden] { display: none; }
.board-crawl-label a { color: var(--accent); text-decoration: none; }
.board-crawl-label a:hover { text-decoration: underline; }
.board-crawl-follow { font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; line-height: 1; }
.board-crawl-follow[hidden] { display: none; }
.board-crawl-follow:hover { border-color: var(--accent); color: var(--accent); }
.board-crawl-follow.on { border-color: var(--accent); color: var(--accent); background: #eaf5f1; }
.board-crawl-new { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 23;
  padding: 10px 20px; background: #e8590c; color: #fff; font-size: 16px; font-weight: 700; border-radius: 10px;
  box-shadow: 0 8px 26px rgba(232,89,12,.4); animation: bcl-pulse 1s ease-in-out infinite; }
.board-crawl-new[hidden] { display: none; }
.board-crawl-ended { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 23;
  padding: 10px 22px; background: var(--ok, #1f7a5a); color: #fff; font-size: 16px; font-weight: 700;
  border-radius: 10px; box-shadow: 0 8px 26px rgba(31,122,90,.4); }
.board-crawl-ended[hidden] { display: none; }
.board-crawl-timer { position: absolute; right: 16px; bottom: 14px; z-index: 21; font-size: 34px; font-weight: 700;
  color: var(--danger); font-variant-numeric: tabular-nums; letter-spacing: .02em; pointer-events: none;
  text-shadow: 0 1px 3px rgba(255,255,255,.85), 0 0 2px rgba(255,255,255,.85); }
.board-crawl-timer[hidden] { display: none; }
.board-dark .board-crawl-timer { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bcl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: 0 0 auto;
  animation: bcl-pulse 1s ease-in-out infinite; }
@keyframes bcl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* Flache, randlose Icons in einer Reihe — höhengleich zum ?-Icon (21px). */
/* Burger / Hauptnavigation-Umschalter vor dem „Board"-Titel — grüner Kreis */
.board-nav-fab { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto;
  background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(13,115,115,.4);
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, transform .12s; }
.board-nav-fab svg { width: 25px; height: 25px; fill: currentColor; display: block; }
/* Implode-/Explode-Icon: stroke statt fill; Zustand am Board-Modus (Navi ausgeblendet = Board groß). */
.board-nav-fab .ic-explode, .board-nav-fab .ic-implode { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.board-nav-fab .ic-implode { display: none; }
body.board-mode .board-nav-fab .ic-explode { display: none; }
body.board-mode .board-nav-fab .ic-implode { display: block; }
.board-nav-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.board-iconbtn { background: transparent; border: none; border-radius: 6px; padding: 0;
  width: 21px; height: 21px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; }
.board-iconbtn svg { width: 18px; height: 18px; fill: currentColor; display: block; flex: 0 0 auto; }
.board-iconbtn:hover { background: transparent; border: none; color: var(--accent); }
.board-iconbtn.active { background: transparent; border: none; color: var(--accent); }
/* ?-Icon in der Toolbar einreihen statt absolut in die Karten-Ecke. */
.board-toolbar .help-icon.in-toolbar { position: relative; top: auto; right: auto; flex: 0 0 auto; }
.board-pop-wrap { position: relative; display: inline-flex; }
.board-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(13,20,16,.14); padding: 12px; min-width: 230px;
  display: flex; flex-direction: column; gap: 12px; }
.board-pop[hidden] { display: none; }
.board-pop-title { font-size: 12px; font-weight: 600; color: var(--text); }
/* Kreisgröße-Popup: frei verschiebbar (fixed) + Optionen als Buttons (kein Dropdown) */
#board-size-pop { position: fixed; top: auto; right: auto; }
#board-size-pop .board-pop-title { cursor: move; user-select: none; display: flex; align-items: center; gap: 6px; }
#board-size-pop .board-pop-title::before { content: "⠿⠿"; letter-spacing: -2px; color: var(--muted); font-size: 12px; line-height: 1; }
.board-size-opts { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.board-size-grp { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  font-weight: 700; margin: 7px 0 1px; }
.board-size-grp:first-child { margin-top: 0; }
.board-size-opt { text-align: left; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.board-size-opt:hover { border-color: var(--accent); color: var(--accent); }
.board-size-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.board-size-opt.active:hover { color: #fff; }
.grpcolor-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.grpcolor-row { display: flex; align-items: center; gap: 8px; }
.grpcolor-row label { flex: 1 1 auto; display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; min-width: 0; }
.grpcolor-row label input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.grpcolor-row label .meta { flex: 0 0 auto; }
.grpcolor-swatch { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.grpcolor-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grpcolor-foot .meta { font-size: 11px; }
.board-pop > label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.board-pop > label select, .board-pop > label input[type="range"] { width: 100%; }
.board-pop > label.board-disp-check { flex-direction: row; align-items: center; gap: 7px; cursor: pointer; color: var(--text); }
.board-pop > label.board-disp-check input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.board-pop > label select { font-size: 13px; color: var(--text); padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border); background: #fff; }

/* Filter-Reset + Zähler je Gruppe */
.bf-head .bf-reset { margin-left: auto; margin-right: 4px; border: 1px solid var(--border);
  font-size: 12px; line-height: 1; padding: 4px 9px; border-radius: 6px; color: var(--muted); }
.bf-head .bf-reset:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.bf-head .bf-reset:disabled { opacity: .45; cursor: default; }
.bf-cnt { color: var(--accent); font-weight: 700; }

/* Aufklappbare Filter-Bereiche */
.bf-acc { border-top: 1px solid var(--border); }
.bf-acc:first-of-type { border-top: none; }
.bf-acc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text); padding: 7px 2px; }
.bf-acc > summary::-webkit-details-marker { display: none; }
.bf-acc > summary::before { content: "▸"; color: var(--muted); font-size: 10px; transition: transform .15s ease; }
.bf-acc[open] > summary::before { transform: rotate(90deg); }
.bf-acc > label { margin-left: 8px; }
.bf-acc > label:last-child { margin-bottom: 6px; }
.bf-body label { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 5px 0; cursor: pointer; }
/* Hinweis-/Leertexte in den Filtergruppen so groß wie die übrigen (eingeklappten) Filtertexte */
.bf-acc .meta, #bf-alerts-list .meta, #bf-cat-list .meta, #bf-group-list .meta { font-size: 13px; }
.bf-body input[type="range"] { width: 100%; margin: 2px 0 8px; }
.bf-body input[type="search"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.bf-body .meta { margin-left: auto; }
.bf-gsc-import { margin: 4px 0 8px 8px; }
.bf-gsc-import #bf-gsc-status { margin: 0 0 6px; font-size: 12px; }
.bf-gsc-hint { margin-top: 6px; font-size: 11.5px; opacity: .8; }
.bf-gsc-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-mini-btn { font-size: 12px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); cursor: pointer; line-height: 1.3; }
.bf-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.bf-make-group { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; text-align: center; }
.bf-make-group:disabled { opacity: .45; cursor: default; color: var(--muted); }
.bf-make-group:disabled:hover { border-color: var(--border); }
.bf-addgroup-sel { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 12px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.bf-search-wrap { position: relative; display: flex; gap: 6px; align-items: center; }
.bf-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.bf-search-field input[type="search"] { width: 100%; box-sizing: border-box; padding-right: 26px;
  -webkit-appearance: none; appearance: none; }
.bf-search-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.bf-search-field #bf-search-clear, .bf-search-field #plan-search-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: transparent; border: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px; }
.bf-search-field #bf-search-clear:hover, .bf-search-field #plan-search-clear:hover { color: var(--danger); }
.bf-search-menu { flex: 0 0 auto; background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.bf-search-menu:hover { color: var(--accent); }
.bf-search-menu[aria-expanded="true"] { color: var(--accent); }
.bf-search-pop { position: fixed; z-index: 70; width: 460px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(13,20,16,.28); padding: 4px; }
.bf-sp-cols { display: flex; gap: 6px; align-items: flex-start; }
.bf-sp-col { flex: 1 1 0; min-width: 0; }
.bf-sp-col + .bf-sp-col { border-left: 1px solid var(--border); padding-left: 6px; }
.bf-sp-empty { padding: 6px 8px; }
.bf-search-pop[hidden] { display: none; }
.bf-sp-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px -4px 2px; padding: 7px 6px 7px 10px; background: var(--card-alt); border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0; cursor: move; user-select: none; touch-action: none; }
.bf-sp-title { font-size: 12px; font-weight: 600; color: var(--text); }
.bf-sp-close { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bf-sp-close:hover { color: var(--danger); }
.bf-sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 4px; }
.bf-sp-clear { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.bf-sp-clear:hover { color: var(--danger); }
.bf-sp-item { display: block; width: 100%; text-align: left; box-sizing: border-box; background: transparent; border: none;
  border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: 12.5px; }
.bf-sp-item:hover { background: var(--card-alt); }
.bf-sp-item code { font-size: 11.5px; color: var(--accent); word-break: break-all; }
.bf-sp-toggle.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }

/* Board: Seiten-Vorschau als rechtes Layer (iframe) */
.board-frame { position: fixed; top: 0; right: 0; height: 100vh; width: min(760px, 80%); z-index: 60;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(13,20,16,.14);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.board-frame.open { transform: translateX(0); }
/* Inhalts-Diff im Vorschau-Layer */
.bff-cite { font-size: 12.5px; border-radius: 7px; padding: 8px 10px; margin: 0 0 10px; border: 1px solid var(--border); }
.bff-cite.new { background: rgba(31,122,90,.10); border-color: rgba(31,122,90,.35); color: #18664c; }
.bff-cite.lost { background: rgba(184,38,30,.10); border-color: rgba(184,38,30,.35); color: var(--danger); }
.bff-diff-meta { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.bff-diff-meta b.add { color: var(--pos, #1f7a5a); } .bff-diff-meta b.del { color: var(--danger); }
.bff-diff { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; }
.bff-diff .dl { padding: 0 6px; border-radius: 3px; }
.bff-diff .dl.add { background: rgba(31,122,90,.12); color: #18664c; }
.bff-diff .dl.del { background: rgba(184,38,30,.12); color: var(--danger); }
.bff-diff .dl.ctx { color: var(--muted); margin-top: 6px; }
.bff-diff .dl.eq { color: var(--text); opacity: .7; }
.board-frame[hidden] { display: none; }
.bff-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.bff-url { flex: 1 1 auto; font-size: 12px; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bff-url:hover { text-decoration: underline; }
.bff-url.bff-url-bad { color: #b3261e; font-weight: 600; }
.bff-head button#bff-copy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; line-height: 1; }
.bff-head button#bff-copy .ic { width: 16px; height: 16px; }
.bff-head button#bff-copy:hover { border-color: var(--accent); color: var(--accent); background: var(--card-alt); }
.bff-head button { flex: 0 0 auto; background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.bff-head button:hover { color: var(--accent); }
.bff-head .bff-back { font-size: 12.5px; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 10px; color: var(--accent); line-height: 1.4; }
.bff-head .bff-back:hover { background: var(--accent); color: #fff; }
.bff-head .bff-back[hidden] { display: none; }
/* Vor/Zurück-Navigation (History) der Vorschau */
.bff-head button.bff-nav-btn { flex: 0 0 auto; font-size: 13px; line-height: 1; padding: 4px 9px; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); background: transparent; cursor: pointer; }
.bff-head button.bff-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--card-alt); }
.bff-head button.bff-nav-btn:disabled { opacity: .4; cursor: default; }
.bff-head button.bff-nav-btn[hidden] { display: none; }
/* Diagnose-Buttons (Traceroute / Waterfall) — kleine Pillen, nicht wie das große × */
.bff-head button#bff-navmode { font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px; color: var(--text); line-height: 1.5; font-weight: 600; }
.bff-head button#bff-navmode:hover { border-color: var(--accent); color: var(--accent); background: var(--card-alt); }
.bff-head button#bff-navmode.active { background: #b3261e; border-color: #b3261e; color: #fff; }
.bff-head button#bff-tools-btn { font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px; color: var(--text); line-height: 1.5; font-weight: 600; }
.bff-head button#bff-tools-btn:hover, .bff-head button#bff-tools-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--card-alt); }
.bff-tools-dd { position: relative; flex: 0 0 auto; }
.bff-tools-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 70; min-width: 260px; max-width: 380px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px; }
.bff-tools-menu[hidden] { display: none; }
.bff-tools-menu button { text-align: left; font: inherit; font-size: 12.5px; padding: 6px 10px; border: 0;
  border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
.bff-tools-menu button:hover { background: var(--card-alt); color: var(--accent); }
.bff-tools-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.bff-tools-toggle.active { font-weight: 600; }
/* Traceroute-Popup */
#trace-modal { align-items: center; padding: 24px 16px; }   /* vertikal mittig, wie Waterfall */
/* Tool-Diagnose-Fenster (Traceroute/Waterfall/Consent/Lighthouse/Sicherheit):
   weißer Hintergrund, farblich abgesetzte Kopfzeile, mehr Luft im Diagnosebereich. */
.tool-box { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(13, 20, 16, .30); }
.tool-box .modal-head { background: #eef6f2; border-bottom: 1px solid #d6e7df; padding: 16px 26px; }
.tool-box .modal-head h2 { color: #1f5e4c; }
.tool-box .modal-body { background: #fff; padding: 26px 30px; }
.trace-box { width: min(1320px, 97vw); max-width: none; height: min(92vh, 1000px); }
.trace-box .modal-body { display: flex; flex-direction: column; min-height: 0; }
.trace-status { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.trace-map { width: 100%; flex: 0 0 auto; height: 360px; min-height: 200px; display: block; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.trace-resize { flex: 0 0 auto; height: 12px; margin: 2px 0 4px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; }
.trace-resize::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: var(--border); }
.trace-resize:hover::before { background: var(--accent); }
.trace-mk span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.trace-mk-origin span { background: #0d7373; width: 24px; height: 24px; font-size: 13px; }
.trace-seg { background: rgba(20,32,27,.82); color: #fff; font-size: 9.5px; font-weight: 600; text-align: center;
  border-radius: 8px; line-height: 16px; white-space: nowrap; padding: 0 2px; }
.trace-controls { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.trace-controls select { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--text); margin-left: 4px; }
.trace-slider { flex: 1 1 220px; min-width: 160px; accent-color: var(--accent); cursor: pointer; }
.trace-readout { margin: 0 0 8px; color: var(--text); }
.trace-readout b { color: var(--accent); }
.trace-hop.trace-hop-active { background: rgba(13,115,115,.16); box-shadow: inset 3px 0 0 var(--accent); }
.trace-hop-seg { color: var(--muted); margin-left: 6px; font-size: 11px; }
.trace-packet span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #0d7373; border: 2px solid #fff; }
.trace-packet span { animation: tracePulse 1s ease-in-out infinite; }
@keyframes tracePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(13,115,115,.45); } 50% { box-shadow: 0 0 0 9px rgba(13,115,115,.12); } }
.trace-hops { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; max-height: 26vh; overflow-y: auto; }
.trace-hop { display: grid; grid-template-columns: 28px 12px 150px 1fr auto auto; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
.trace-hop:hover { background: var(--card-alt); }
.trace-hop-ttl { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.trace-hop-dot { width: 9px; height: 9px; border-radius: 50%; }
.trace-hop-ip { font-family: ui-monospace, monospace; color: var(--text); }
.trace-hop-loc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-hop-dist { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 11.5px; white-space: nowrap; }
.trace-hop-rtt { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Ladewasserfall */
#wf-modal { align-items: center; padding: 24px 16px; }   /* vertikal mittig */
/* Consent-Check-Modal */
.modal-head-actions { display: flex; align-items: center; gap: 12px; }
.cc-box { width: min(1040px, 96vw); max-width: none; height: min(90vh, 960px); }
.cc-box .modal-body { display: flex; flex-direction: column; min-height: 0; }
.cc-verdict { margin: 4px 0 12px; }
.cc-badge { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px;
  border-left: 5px solid var(--cc); background: color-mix(in srgb, var(--cc) 9%, transparent); }
.cc-badge b { color: var(--cc); font-size: 15px; }
.cc-badge span { color: var(--muted); font-size: 12.5px; }
/* Netzwerk-Scan */
.ns-findings { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.ns-findings li { padding: 5px 10px; background: var(--card-alt, #f6f8f7); border-radius: 6px; font-size: 13px; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ns-chips span { font-size: 12px; background: var(--card-alt, #f1f4f3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--text); }
#ns-detail h3 { font-size: 13px; margin: 14px 0 6px; }
.ns-hosts td, .ns-hosts th { font-size: 12px; padding: 3px 8px; }
.ns-hosts tr.ns-3c td { background: #fdecea; color: #b3261e; }
.ns-list { margin: 0; padding-left: 18px; font-size: 12px; }
.ns-list li { margin: 2px 0; word-break: break-all; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cc-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: #fafcfb; }
.cc-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.cc-v { font-size: 13.5px; line-height: 1.35; }
.cc-timeline { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px; }
.cc-tl-h { font-weight: 600; margin: 0 0 8px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cc-table th { position: sticky; top: 0; background: var(--card); text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.cc-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cc-table .cc-t { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.cc-table .cc-svc { font-weight: 600; }
.cc-table .cc-host { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-table tr.cc-bad td { background: rgba(179,38,30,.06); }
.cc-ph { font-size: 10px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.cc-ph-pre { background: #fbe3e0; color: #b3261e; }
.cc-ph-post { background: #e7eef9; color: #1d418e; }
.cc-hit { color: #b3261e; font-weight: 600; white-space: nowrap; }
.cc-load { color: var(--muted); }
.cc-note { margin-top: 8px; font-size: 11.5px; }
/* Projekt-Proxys (Standorte) */
.proxy-box { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: #fafcfb; }
.proxy-head { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.proxy-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.proxy-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.proxy-item .proxy-nm { font-weight: 600; min-width: 120px; }
.proxy-item .proxy-u { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.proxy-del { color: var(--danger); }
.proxy-add-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.proxy-add-row input { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; }
/* Standort-Radios im Vorschau-Toolmenü */
.bff-tools-proxy { padding: 6px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.bff-proxy-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 4px 4px; }
.bff-proxy-opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 6px; cursor: pointer; border-radius: 5px; }
.bff-proxy-opt:hover { background: var(--nav-active); }
.bff-proxy-opt input { margin: 0; flex: 0 0 auto; }
.bff-proxy-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-note { margin: 0 0 10px; padding: 8px 11px; border-left: 3px solid #b26a00; background: #fff7ec;
  border-radius: 7px; font-size: 12px; line-height: 1.4; color: var(--text); }
.trace-note[hidden] { display: none; }
#bff-shot-btn.via-proxy { border-color: #2e7459; color: #2e7459; font-weight: 600; }
/* User-Agent-Vergleich */
.ua-box { width: min(1120px, 96vw); max-width: none; height: min(92vh, 1000px); }
.ua-box .modal-body { display: flex; flex-direction: column; min-height: 0; }
.ua-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.ua-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ua-table th { position: sticky; top: 0; background: var(--card); text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.ua-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ua-table tr.ua-bad td { background: rgba(178, 106, 0, .07); }
.ua-table .ua-lbl { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-table .ua-num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.ua-table .ua-fp { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.ua-table .ua-hint { font-size: 11.5px; }
.ua-cat { font-size: 10px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.ua-cat-br { background: #e7eef9; color: #1d418e; }
.ua-cat-ai { background: #efe7fb; color: #6d28d9; }
.ua-cat-bot { background: #eef2f1; color: #444; }
.ua-grp { display: inline-block; font-size: 10.5px; font-weight: 600; color: #fff; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ua-grp-na { background: none; color: var(--muted); padding: 0; }
.wf-box { width: min(1320px, 97vw); max-width: none; height: min(92vh, 1000px); --wf-lbl: 250px; }
.wf-box .modal-body { display: flex; flex-direction: column; min-height: 0; }
.wf-summary { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.wf-summary .wf-warn { color: #b3261e; font-weight: 600; }
.wf-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; font-size: 11.5px; color: var(--muted); }
.wf-leg { display: inline-flex; align-items: center; gap: 5px; }
.wf-leg i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.wf-chart { position: relative; flex: 1 1 auto; min-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.wf-row { display: flex; align-items: center; height: 22px; font-size: 11.5px; }
.wf-row:hover { background: var(--card-alt); }
.wf-row-flag { background: rgba(179,38,30,.06); }
.wf-label { flex: 0 0 var(--wf-lbl); display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; }
.wf-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.wf-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.wf-track { position: relative; flex: 1 1 auto; height: 100%; }
.wf-bar { position: absolute; top: 6px; height: 9px; border-radius: 3px; min-width: 2px; }
.wf-wait { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.55); border-radius: 3px 0 0 3px; }
.wf-bar-lbl { position: absolute; top: 4px; font-size: 10px; color: var(--muted); white-space: nowrap; transform: translateX(2px); }
.wf-tag { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 8px; margin-left: 4px; flex: 0 0 auto; }
.wf-tag-block { background: #fde68a; color: #92400e; }
.wf-tag-slow { background: #fecaca; color: #b3261e; }
.wf-tag-big { background: #ddd6fe; color: #5b21b6; }
.wf-vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed; pointer-events: none; }
.wf-vline span { position: absolute; top: -1px; left: 2px; font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 3px; color: #fff; }
.wf-vline-dcl { border-color: #2563eb; } .wf-vline-dcl span { background: #2563eb; }
.wf-vline-load { border-color: #16a34a; } .wf-vline-load span { background: #16a34a; }
/* Lighthouse */
#lh-modal { align-items: center; padding: 24px 16px; }
.lh-box { width: min(1020px, 96vw); max-width: none; }
.lh-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lh-strat { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.lh-strat button { font: inherit; font-size: 12px; padding: 5px 12px; border: 0; border-right: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer; }
.lh-strat button:last-child { border-right: 0; }
.lh-strat button.active { background: var(--accent); color: #fff; }
.lh-scores { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin: 6px 0 18px; }
.lh-gauge { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.lh-ring { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--card-alt) 0); }
.lh-ring span { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 19px; font-weight: 700; color: var(--c); }
.lh-gauge-lbl { font-size: 12px; color: var(--text); font-weight: 600; }
.lh-sec-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 14px 0 8px; }
.lh-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.lh-metric { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); }
.lh-metric-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lh-metric-val { font-size: 14px; font-weight: 700; color: var(--text); }
.lh-metric-lbl { font-size: 11.5px; color: var(--muted); margin-left: auto; text-align: right; }
.lh-opp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; }
.lh-opp:hover { background: var(--card-alt); }
.lh-opp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lh-opp-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-opp-save { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Sicherheit (Header & TLS) */
#sec-modal { align-items: center; padding: 24px 16px; }
.sec-box { width: min(1060px, 96vw); max-width: none; }
.sec-top { display: flex; gap: 16px; align-items: stretch; margin-bottom: 6px; flex-wrap: wrap; }
.sec-grade-badge { flex: 0 0 auto; width: 88px; border-radius: 12px; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
.sec-grade-badge span { font-size: 12px; font-weight: 600; opacity: .9; }
.sec-card { flex: 1 1 320px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.sec-card-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sec-tls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; font-size: 12.5px; }
.sec-tls-grid .sec-k { display: inline-block; width: 78px; color: var(--muted); }
.sec-tls-bad { color: #b3261e; font-size: 13px; }
.sec-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; font-size: 12.5px; }
.sec-row:hover { background: var(--card-alt); }
.sec-badge { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.sec-row-lbl { flex: 0 0 auto; color: var(--text); font-weight: 500; min-width: 210px; }
.sec-row-det { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-ck-name { font-family: ui-monospace, monospace; color: var(--text); min-width: 140px; }
.sec-flag { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); }
.sec-flag.on { color: #16a34a; border-color: rgba(22,163,74,.4); }
.sec-flag.off { color: #b3261e; border-color: rgba(179,38,30,.4); }
.sec-rd-code { flex: 0 0 auto; font-weight: 700; color: #d97706; font-variant-numeric: tabular-nums; }
/* Gruppen-FAB in der Vorschau (über „Aa") */
#bff-group-fab { background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
#bff-group-fab:hover { background: var(--accent); color: #fff; filter: none; }
#bff-group-fab[hidden] { display: none; }
.bff-body { flex: 1 1 auto; min-height: 0; position: relative; }
.bff-body iframe { display: block; width: 100%; height: 100%; border: none; background: #fff; }
.bff-spinner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.82); }
.bff-spinner[hidden] { display: none; }
/* Hinweis, wenn die Seite nicht als Frame ladbar ist -> Navigationsmodus anbieten */
.bff-frame-hint { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; }
.bff-frame-hint[hidden] { display: none; }
.bff-frame-hint-box { max-width: 420px; text-align: center; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px 24px; box-shadow: 0 6px 22px rgba(0,0,0,.12); }
.bff-frame-hint-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bff-frame-hint-text { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.bff-frame-hint-text b { color: var(--text); }
.bff-frame-hint-box button.primary { font-size: 13px; padding: 8px 16px; }
.bff-note { font-size: 11px; padding: 6px 12px; margin: 0; border-top: 1px solid var(--border); }
/* Board: Tabs im Vorschau-Layer (Vorschau / Kommentare / Prompts / Antworten) */
.bff-tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--border); background: var(--bg); }
/* Wie die Hauptnavi-Tabs: gleiche Schrift, Hover und Unterstrich-Aktivzustand. */
.bff-tabs button { flex: 1 1 auto; background: transparent; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 9px 12px 8px; font-size: 14px; color: var(--muted); cursor: pointer;
  border-radius: 6px 6px 0 0; transition: color .12s, background .12s, border-color .12s; }
.bff-tabs button:hover { color: var(--accent); background: var(--card-alt); }
.bff-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: transparent; }
.bff-tab-n { font-size: 10px; color: var(--muted); margin-left: 3px; }
.bff-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bff-pane[hidden] { display: none; }
.bff-scroll { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
/* Board: Kommentar-Bereich im Vorschau-Layer */
.bff-notes { flex: 1 1 auto; min-height: 0; padding: 14px 16px 16px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px; }
.bff-notes-title { font-size: 12px; font-weight: 600; color: var(--text); }
.bff-notes-list { overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
/* Datei-Popup aus der Code-Ansicht */
.linkframe-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(13,20,16,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.linkframe-modal[hidden] { display: none; }
.linkframe-box { width: 90vw; height: 88vh; max-width: 1200px; background: var(--card); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 14px 48px rgba(0,0,0,.5); }
.linkframe-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.linkframe-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--accent); text-decoration: none; }
.linkframe-url:hover { text-decoration: underline; }
.linkframe-head #linkframe-tab { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.linkframe-head #linkframe-tab:hover { color: var(--accent); }
.linkframe-head #linkframe-close { background: transparent; border: none; font-size: 17px; cursor: pointer; color: var(--muted); }
.linkframe-head #linkframe-close:hover { color: var(--danger); }
.linkframe-box iframe { flex: 1 1 auto; width: 100%; border: none; background: #fff; }

/* „Kommentare"-Sicht (alle Kommentare, nach Seite gruppiert) */
#allnotes-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.an-group { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.an-page { padding: 8px 12px; background: var(--card-alt); font-size: 12.5px; font-weight: 600; color: var(--text);
  cursor: pointer; border-bottom: 1px solid var(--border); }
.an-page:hover { color: var(--accent); }
.an-notes { padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; background: var(--card); }
.an-note { border-left: 2px solid rgba(13,115,115,.35); padding: 4px 6px 4px 10px; cursor: pointer;
  border-radius: 0 6px 6px 0; transition: background .12s; }
.an-note:hover { border-left-color: var(--accent); background: var(--card-alt); }
.an-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.an-body { font-size: 12.5px; color: var(--text); margin-top: 4px; white-space: pre-wrap; }
.an-body.md p { margin: 0 0 6px; }
.an-img { max-width: 220px; max-height: 150px; border-radius: 6px; border: 1px solid var(--border); margin-top: 6px; display: block; }
.an-replies { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.an-reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.an-react { font-size: 11.5px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-alt); color: var(--muted); }
/* Kommentare-Tab: Sub-Tabs / Filter / Pager */
.an-subtabs { display: flex; gap: 4px; }
.an-filters { gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; align-items: center; }
.an-filters label { font-size: 12px; color: var(--muted); }
.an-filters select, .an-filters input { font-size: 12.5px; }
.an-dayfilter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px;
  border: 1px solid var(--gold); border-radius: 999px; background: var(--gold-bg); color: var(--text); }
.an-day-clear { background: transparent; border: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); padding: 0; }
.an-day-clear:hover { color: var(--danger); }
.an-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.an-pager button { font-size: 12.5px; padding: 5px 12px; }
.an-pager button:disabled { opacity: .45; cursor: default; }
/* Kategorie-Badges */
.an-cat { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  background: rgba(13,115,115,.1); color: var(--accent); border: 1px solid rgba(13,115,115,.3); white-space: nowrap; }
.an-cat.empty { background: transparent; color: var(--muted); border-color: var(--border); }
.an-cat:hover { border-color: var(--accent); }
.an-cat .an-cat-in { font: inherit; font-size: 11px; width: 110px; border: none; background: transparent; outline: none; color: var(--text); }
.bff-note-cat { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(13,115,115,.1);
  color: var(--accent); border: 1px solid rgba(13,115,115,.3); margin-left: 4px; }
/* Tags-Eingabe in der Kommentar-Bearbeitung */
.bff-edit-tags { display: block; margin: 6px 0; font-size: 12px; color: var(--muted); }
.bff-edit-tags input { font: inherit; font-size: 12px; width: 70%; min-width: 160px; margin-left: 4px;
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
/* Followed-Tags-Sicht: Chips mit ★-Folgen-Umschalter */
.followed-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.ft-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: var(--card-alt); color: var(--text); border: 1px solid var(--border); }
.ft-chip:hover { border-color: var(--accent); }
.ft-chip.on { background: rgba(13,115,115,.12); color: var(--accent); border-color: rgba(13,115,115,.5); font-weight: 600; }
.ft-chip .ic { width: 12px; height: 12px; vertical-align: -2px; }
/* Tag-Auswahl-Popup (mit Suche) */
.tag-pick-pop { position: fixed; z-index: 90; width: 240px; max-height: 270px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.18); padding: 8px; }
.tag-pick-pop[hidden] { display: none; }
.tag-pick-pop #tag-pick-search { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); margin-bottom: 6px; }
.tag-pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tag-pick-item { text-align: left; font: inherit; font-size: 12.5px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-pick-item:hover { background: var(--card-alt); }
.tag-pick-item.on { color: var(--accent); font-weight: 600; }
.tag-pick-item.tag-pick-new { color: var(--accent); font-style: italic; }
.tag-pick-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tag-pick-foot[hidden] { display: none; }
.tag-pick-foot #tag-pick-sel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-pick-foot button { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
/* Heatmap-Kalender */
.an-cal-scroll { overflow-x: auto; padding-bottom: 6px; }
.an-cal-months { display: flex; gap: 3px; margin: 0 0 3px 0; padding-left: 0; }
.an-cal-mon { width: 13px; font-size: 9px; color: var(--muted); flex: 0 0 auto; }
.an-cal-grid { display: flex; gap: 3px; }
.an-cal-col { display: flex; flex-direction: column; gap: 3px; }
.an-cal-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--card-alt); display: block; }
.an-cal-cell[data-day] { cursor: pointer; }
.an-cal-cell[data-day]:hover { outline: 1px solid var(--accent); }
.an-cal-cell.empty { background: transparent; }
.an-cal-cell.lvl0 { background: #e7ece9; }
.an-cal-cell.lvl1 { background: #b7e0cd; }
.an-cal-cell.lvl2 { background: #6cc6a0; }
.an-cal-cell.lvl3 { background: #2f9e74; }
.an-cal-cell.lvl4 { background: #0d7373; }
.an-cal-cell.sel { outline: 2px solid var(--gold); }
.an-cal-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.an-cal-legend .an-cal-cell { width: 12px; height: 12px; }
/* Board-Filter: Kategorien-Liste */
.bf-cat-list { display: flex; flex-direction: column; gap: 2px; }
.bf-cat-list label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
/* Board-Filter: Gruppen-Liste (Zeile = Checkbox + Link), darunter Trennlinie */
#bf-group-list { border-bottom: 1px solid var(--border); padding-bottom: 9px; margin-bottom: 2px; }
.bf-grp-row { display: flex; align-items: center; gap: 6px; }
.bf-grp-row label { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.bf-grp-link { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.bf-grp-link:hover { background: var(--card-alt); }
/* Gruppen-Beschreibung: Karte + Kommentarfenster */
.grp-desc { padding: 8px 14px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border);
  cursor: pointer; white-space: pre-wrap; }
.grp-desc:hover { background: var(--card-alt); }
.grp-desc-add { color: var(--muted); font-style: italic; }
.bff-group-desc { padding: 8px 11px; margin: 2px 0; font-size: 12.5px; color: var(--text);
  background: var(--card-alt); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; white-space: pre-wrap; }
.bff-group-desc[hidden] { display: none; }

/* Navigations-Berechtigungen (Benutzerverwaltung) */
.nav-editor { margin-top: 14px; padding: 12px; border: 1px solid var(--accent); border-radius: 9px; background: var(--card-alt); }
.nav-editor-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.nav-editor-head .x { margin-left: auto; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 15px; }
.nav-editor-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.nav-tab-opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* Seitengruppen-Tab */
#groups-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
/* CSV-Dateien: breitere Kacheln — genau zwei nebeneinander. */
#csvfiles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #csvfiles-list { grid-template-columns: 1fr; } }
.grp-card { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden;
  display: flex; flex-direction: column; }
.grp-x { position: absolute; top: 6px; right: 8px; z-index: 2; background: transparent; border: none;
  color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; padding: 1px 5px; border-radius: 6px; }
.grp-x:hover { color: var(--danger); background: var(--card); }
.grp-head { padding: 12px 30px 12px 14px; border-bottom: 1px solid var(--border); background: var(--card-alt);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.grp-title { display: flex; align-items: center; gap: 6px; }
.grp-name { font-size: 14px; font-weight: 600; color: var(--text); }
.grp-rename { background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; }
.grp-rename:hover { color: var(--accent); }
.grp-stats { font-size: 11.5px; color: var(--muted); }
.grp-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.grp-actions button { font-size: 11px; padding: 3px 8px; }
.grp-mem-chk { flex: 0 0 auto; margin: 0; cursor: pointer; }
.grp-mem-head { padding: 6px 12px 0 14px; }
.grp-mem-alllbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.grp-mem-alllbl input { margin: 0; cursor: pointer; }
.grp-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--border); background: var(--card-alt); }
.grp-selcount { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.grp-sel-movelbl { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Alle Eingabeelemente der Auswahl-Leiste gleich hoch (Dropdown war kleiner als die Buttons). */
.grp-selbar .bf-mini-btn, .grp-selbar .grp-sel-move { height: 30px; box-sizing: border-box; font-size: 11.5px; }
.grp-sel-move { padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.icon-btn { border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.grp-members-list { list-style: none; margin: 0; padding: 8px 6px 8px 14px; display: flex; flex-direction: column;
  gap: 2px; max-height: 260px; overflow: auto; }
.grp-mem { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 0; border-radius: 6px; }
.grp-mem:hover { background: var(--card-alt); }
.grp-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); cursor: pointer; text-decoration: none; font-size: 12.5px; }
.grp-url:hover { text-decoration: underline; }
.grp-mem-del { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; }
.grp-mem-del:hover { color: var(--danger); }
.grp-mem-empty { padding: 4px 0; }

/* Board-Auswahlmodus: Selektionsleiste + Gruppen-Zuweisung */
body.board-selecting #board-canvas { cursor: cell; }
.board-multi-pop { position: fixed; z-index: 72; width: 360px; max-width: calc(100vw - 16px); max-height: 70vh;
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--danger);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,16,.28); overflow: hidden; }
.board-multi-pop[hidden] { display: none; }
.bmp-bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 8px 12px;
  background: var(--card-alt); border-bottom: 1px solid var(--border); cursor: move; user-select: none; touch-action: none; }
.bmp-row { display: flex; align-items: center; gap: 8px; }
.bmp-row2 { display: flex; gap: 6px; align-items: center; }
.bmp-csv { flex: 0 0 auto; white-space: nowrap; }
.bmp-group-sel { flex: 1 1 auto; min-width: 0; }
.bmp-title { font-size: 12px; font-weight: 600; color: var(--danger); flex: 1 1 auto; }
.bmp-close { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bmp-close:hover { color: var(--danger); }
.bmp-list { list-style: none; margin: 0; padding: 4px 0; overflow: auto; }
.bmp-list li { padding: 4px 12px; }
.bmp-list li:nth-child(even) { background: var(--card-alt); }
.bmp-link { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 12px; word-break: break-all; }
.bmp-link:hover { text-decoration: underline; }
.bmp-more { padding: 4px 12px; }
.board-selbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 24px); flex-wrap: wrap; row-gap: 6px; justify-content: center;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card);
  border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 6px 22px rgba(13,20,16,.22); }
.board-selbar[hidden] { display: none; }
.board-selbar .bs-count { font-size: 12.5px; font-weight: 600; color: var(--text); }
.board-selbar button { font-size: 12px; padding: 5px 11px; }
.board-selbar select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; max-width: 180px; }
.board-selbar .bs-hint { font-size: 11px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 10px; }
/* Zeichen-/Objekt-Leiste auf dem Board */
.board-draw-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 24px); flex-wrap: wrap; row-gap: 6px; justify-content: center;
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; background: var(--card);
  border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 6px 22px rgba(13,20,16,.22); }
.board-draw-bar[hidden] { display: none; }
.board-draw-bar .bdt { font-size: 14px; line-height: 1; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--card); color: var(--text); cursor: pointer; min-width: 30px; }
.board-draw-bar .bdt:hover { border-color: var(--accent); }
.board-draw-bar .bdt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.board-draw-bar .bdt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.board-draw-bar input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.board-draw-bar select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; }
.board-draw-bar button#board-draw-del, .board-draw-bar button#board-draw-done { font-size: 12px; padding: 5px 11px; border-radius: 7px; }
.board-draw-bar .bs-hint { font-size: 11px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 8px; max-width: 320px; }
/* Bild-Popup (Upload + Galerie) */
.board-img-pop { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 22;
  width: min(94vw, 460px); max-height: 50vh; overflow: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(13,20,16,.25); padding: 10px 12px; }
.board-img-pop[hidden] { display: none; }
.bip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bip-head .x { margin-left: auto; background: none; border: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.bip-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.bip-thumb { padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--card-alt); cursor: pointer; overflow: hidden; height: 60px; }
.bip-thumb:hover { border-color: var(--accent); }
.bip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.board-annot #board-canvas { cursor: crosshair; }
/* Fixierte Verlinkungs-Visualisierung (Chip oben mittig) */
.board-linkpin { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 21;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 11px; background: var(--card);
  border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 6px 22px rgba(13,20,16,.22); font-size: 12.5px; }
.board-linkpin[hidden] { display: none; }
.board-linkpin .ic { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.board-linkpin #board-linkpin-label { font-weight: 600; color: var(--text); }
.board-linkpin button { font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); cursor: pointer; color: var(--muted); }
.board-linkpin button:hover { border-color: var(--accent); color: var(--accent); }
.board-linkpin .board-linkpin-act { color: var(--text); font-weight: 600; }
.board-grouppop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 280px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  box-shadow: 0 10px 30px rgba(13,20,16,.25); display: flex; flex-direction: column; gap: 9px; text-align: left; }
.board-grouppop[hidden] { display: none; }
.bg-title { font-size: 12px; font-weight: 600; color: var(--text); }
.board-grouppop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.board-grouppop select, .board-grouppop input { font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; box-sizing: border-box; }
.bg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.bg-actions button { font-size: 12px; padding: 5px 12px; }
/* Kategorie-Filterchips oben im Kommentarbereich */
.bff-cat-filter { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 2px; }
.bff-cat-filter[hidden] { display: none; }
.bff-catf { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--card-alt); color: var(--muted); border: 1px solid var(--border); }
.bff-catf:hover { border-color: var(--accent); }
.bff-catf.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Gruppen-Banner im Kommentarbereich */
.bff-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 2px; }
.bff-groups[hidden] { display: none; }
.bff-cn { margin: 6px 0 2px; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  background: #fdecea; border: 1px solid var(--danger); border-radius: 8px; color: var(--text); }
.bff-cn[hidden] { display: none; }
.bff-cn code { font-size: 11.5px; background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 4px; }
/* Doppelter-Inhalt-Hinweis (rot) — immer sichtbar über den Vorschau-Panes */
.bff-dup { margin: 4px 12px 6px; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  background: #fdecea; border: 1px solid var(--danger); border-radius: 8px; color: var(--danger); }
.bff-dup[hidden] { display: none; }
.bff-dup .ic { width: 14px; height: 14px; vertical-align: -2px; }
/* Hinweis auf 40x/30x-Links in der Navigationsansicht (eigene Akzentfarbe). */
.bff-broken { margin-top: 6px; background: #fff7ec; border-color: #b26a00; color: var(--text); }
.bff-broken .meta { color: var(--muted); }
/* Hinweis auf die Wahrnehmungs-Heatmap (Besucher-Analyse). */
.bff-perc { margin-top: 6px; background: #fdeceb; border-color: #d93025; color: var(--text); }
.bff-perc .meta { color: var(--muted); }
.bff-perc .ic { width: 14px; height: 14px; vertical-align: -2px; }
.bff-dup a.cl-url { color: var(--danger); text-decoration: underline; }
.bff-dup-cmp, .bff-dup-copy { border: 1px solid var(--danger); background: #fff; color: var(--danger); border-radius: 6px;
  cursor: pointer; padding: 1px 5px; margin-left: 4px; vertical-align: -3px; line-height: 1; }
.bff-dup-cmp svg, .bff-dup-copy svg { width: 14px; height: 14px; display: block; }
.bff-dup-cmp:hover, .bff-dup-copy:hover { background: var(--danger); color: #fff; }
/* Popup: Canonical/hreflang-Vergleich + Bewertung */
.dup-cmp-modal { position: fixed; inset: 0; z-index: 1340; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dup-cmp-modal[hidden] { display: none; }
.dup-cmp-card { background: var(--card); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.3); width: min(1080px, 96vw); max-height: 86vh; display: flex; flex-direction: column; }
.dup-cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dup-cmp-head .ic { width: 16px; height: 16px; vertical-align: -3px; }
.dup-cmp-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.dup-cmp-close:hover { color: var(--danger); }
.dup-cmp-body { padding: 14px 16px; overflow: auto; }
.dup-cmp-body table { table-layout: fixed; width: 100%; }
.dup-cmp-body th, .dup-cmp-body td { word-break: break-word; overflow-wrap: anywhere; vertical-align: top; }
.dup-cmp-body td:first-child { width: 42%; }
.dup-cmp-body .cl-url { word-break: break-all; }
.dup-cmp-body code { font-size: 11.5px; background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 4px; word-break: break-all; }
.dup-cmp-assess { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); }
.dup-cmp-assess.dup-good { background: #e7f6ec; border-color: var(--pos); }
.dup-cmp-assess.dup-warn { background: var(--gold-bg); border-color: var(--gold); }
.dup-cmp-assess.dup-bad { background: #fdecea; border-color: var(--danger); }
.dup-bad { color: var(--danger); }
.bff-schema { margin: 6px 0 2px; padding: 7px 10px; font-size: 12px; line-height: 1.6;
  background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.bff-schema[hidden] { display: none; }
.bff-schema code { font-size: 11.5px; background: rgba(13,115,115,.10); color: var(--accent);
  padding: 1px 5px; border-radius: 4px; margin-right: 2px; }
.bff-group-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(13,115,115,.1); color: var(--accent); border: 1px solid rgba(13,115,115,.35); }
.bff-group-chip:hover { background: rgba(13,115,115,.18); }
/* Gruppen-Modus des Drawers: nur Kommentare-Tab + keine Vorschau-Werkzeuge */
#board-frame.group-mode .bff-tabs button:not([data-bfftab="comments"]) { display: none; }
#board-frame.group-mode #bff-copy, #board-frame.group-mode .bff-tools, #board-frame.group-mode .bff-tools-dd, #board-frame.group-mode #bff-navmode { display: none; }

/* Verwaiste Kommentare (Tasks-Tab) */
.orphan-card { border-color: var(--gold); }
.orphan-card h2 { color: var(--gold); }
#orphan-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.orphan-row { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; background: var(--card); }
.orphan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.orphan-oldurl { margin-left: auto; }
.orphan-row .task-body { font-size: 12.5px; color: var(--text); margin: 6px 0 8px; }
.orphan-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.orphan-url { flex: 1 1 280px; min-width: 200px; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; }
.orphan-assign-btn { font-size: 12px; padding: 6px 12px; }
.orphan-del { font-size: 16px; line-height: 1; padding: 2px 8px; color: var(--muted); border-color: var(--border); }
.orphan-del:hover { color: var(--danger); border-color: var(--danger); }

/* Kommentar-Karte: weißer Body, nur Kopf-/Fußzeile leicht grau, feine grüne Umrandung */
.bff-note-item { border: 1px solid rgba(13,115,115,.45); border-radius: 9px; padding: 0; background: var(--card); }
.bff-note-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: #f3f4f5; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
/* Normale Antwort (Kommentar ohne Status): kein Rahmen, keine graue Kopfzeile */
.bff-note-item.bff-note-comment { border: none; background: transparent; }
.bff-note-item.bff-note-comment > .bff-note-meta { background: transparent; border-bottom: none; border-radius: 0; padding: 6px 4px 1px; }
.bff-note-item.bff-note-comment > .bff-note-mid { padding: 0 4px 4px; }
.bff-note-mid { padding: 11px 13px; }
.bff-note-body { font-size: 12.5px; color: var(--text); white-space: pre-wrap; margin-top: 0; }
.bff-note-meta .bff-note-mappe { margin-left: auto; background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 0 3px; display: inline-flex; align-items: center; }
.bff-note-meta .bff-note-mappe .ic { width: 14px; height: 14px; }
.bff-note-meta .bff-note-mappe:hover { color: var(--accent); }
.bff-note-meta .bff-note-del { background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.bff-note-meta .bff-note-del:hover { color: var(--danger); }
.bff-note-meta .bff-note-reply, .bff-note-meta .bff-note-zoom { background: transparent; border: none; color: var(--accent); cursor: pointer;
  font-size: 11px; padding: 0 2px; }
.bff-note-meta .bff-note-reply:hover, .bff-note-meta .bff-note-zoom:hover { text-decoration: underline; }
.bff-reply-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bff-reply-statuslbl { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.bff-reply-statuslbl select { font-size: 12px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.bff-reply-row .bff-reply-send { margin-left: auto; }
.bff-note-replies { margin: 0 13px; padding: 0 0 11px 8px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; }
.bff-reply-box { margin: 0 13px 11px; display: flex; flex-direction: column; gap: 4px; }
.bff-reply-box[hidden] { display: none; }
.bff-reply-box textarea { width: 100%; resize: vertical; font: inherit; font-size: 12px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; }
.bff-reply-box button { align-self: flex-start; font-size: 11.5px; padding: 4px 10px; }
.bff-notes textarea { width: 100%; resize: vertical; font: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; }
.bff-notes #bff-note-save { align-self: flex-start; font-size: 12px; padding: 5px 12px; }
/* Marker-Pen im Vorschau-Frame */
.bff-markers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bff-markers.marking { pointer-events: auto; cursor: crosshair; background: rgba(13,115,115,.05); }
.bff-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; border: 2px solid #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.bff-pin.pending { background: #c8941a; }
.bff-pin.flash { animation: pinflash 1.2s ease; }
@keyframes pinflash { 0%, 40% { box-shadow: 0 0 0 7px rgba(13,115,115,.4); } 100% { box-shadow: 0 1px 4px rgba(0,0,0,.35); } }
/* Runde Werkzeug-Buttons (FAB) im Vorschau-Frame */
.bff-tools { position: absolute; right: 14px; bottom: 16px; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.bff-fab { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff;
  font-size: 19px; cursor: pointer; box-shadow: 0 3px 10px rgba(13,20,16,.28); display: flex; align-items: center; justify-content: center; }
.bff-fab:hover { filter: brightness(1.08); }
.bff-fab.active { background: #c8941a; box-shadow: 0 0 0 4px rgba(200,148,26,.3), 0 3px 10px rgba(13,20,16,.28); }
#bff-code-toggle { font-size: 15px; font-weight: 700; font-family: ui-monospace, monospace; letter-spacing: -1px; }
/* Code-Ansicht (HTML-Quelltext, markierbar) */
.bff-code { position: absolute; inset: 0; z-index: 2; background: #1e2430; display: flex; flex-direction: column; }
.bff-code[hidden] { display: none; }
.bff-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px;
  background: #181d27; border-bottom: 1px solid #2b3340; }
#bff-code-search { flex: 1 1 180px; min-width: 140px; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid #333c4a; border-radius: 6px; background: #0f131b; color: #e7ebf2; }
/* Komponenten-Filter als Dropdown (Platz sparen) */
.bff-code-filterwrap { position: relative; flex: 0 0 auto; }
.bff-code-fbtn { font: inherit; font-size: 11.5px; padding: 6px 11px; border: 1px solid #333c4a; border-radius: 6px;
  background: #0f131b; color: #b9c2d0; cursor: pointer; white-space: nowrap; }
.bff-code-fbtn:hover { border-color: #5b9; }
.bff-code-fbtn.active { background: #0d7373; border-color: #0d7373; color: #fff; }
.bff-code-fmenu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 6; width: 232px;
  background: #181d27; border: 1px solid #2b3340; border-radius: 8px; padding: 9px;
  display: flex; flex-wrap: wrap; gap: 5px; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.bff-code-fmenu[hidden] { display: none; }
.bff-code-flabel { width: 100%; font-size: 11px; color: #8b94a3; margin-bottom: 2px; }
.bff-code-chip { font: inherit; font-size: 11.5px; padding: 3px 9px; border: 1px solid #333c4a; border-radius: 999px;
  background: #0f131b; color: #b9c2d0; cursor: pointer; }
.bff-code-chip:hover { border-color: #5b9; }
.bff-code-chip.active { background: #0d7373; border-color: #0d7373; color: #fff; }
.bff-code-pre { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 12px 14px;
  font: 12px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #c9d1d9;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.bff-code-pre mark.bff-code-hl { background: #fde047; color: #1e2430; border-radius: 2px; }
/* HTML-Syntax-Färbung (GitHub-dark-ähnlich) */
.bff-code-pre .ct-tag { color: #7ee787; }
.bff-code-pre .ct-attr { color: #79c0ff; }
.bff-code-pre .ct-str { color: #ffa657; }
.bff-code-pre .ct-comment { color: #8b949e; font-style: italic; }
.bff-code-pre .ct-punc { color: #8b949e; }
.bff-code-pre a.bff-code-link { color: #ffa657; text-decoration: underline; cursor: pointer; }
.bff-code-pre a.bff-code-link:hover { color: #ffd7a8; }
/* Markierte Textstelle als Zitat im Kommentar */
.bff-note-quote { margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--accent);
  background: rgba(13,115,115,.06); color: var(--muted); font-size: 12px; font-style: italic;
  white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0 6px 6px 0; }
/* Markierter Code als Code-Block im Kommentar (dunkel, monospace) */
.bff-note-code { margin: 0 0 10px; padding: 9px 11px; background: #1e2430; color: #c9d1d9;
  font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; border-radius: 7px;
  border-left: 3px solid var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
/* Gecrawlter Text (auswählbar, annotierbar) */
.bff-text { position: absolute; inset: 0; overflow-y: auto; background: #fff; padding: 24px 28px; z-index: 2; }
.bff-text-inner { max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.bff-fab svg { display: block; }
.bff-text mark.bff-hl { background: #fff1a8; border-radius: 2px; cursor: pointer; padding: 0 1px; }
.bff-text mark.bff-hl:hover { background: #ffe770; }
.bff-sel-pop { position: absolute; z-index: 5; transform: translate(-50%, -100%); }
.bff-sel-pop[hidden] { display: none; }
.bff-sel-pop button { font-size: 12px; padding: 5px 11px; border: none; border-radius: 6px; background: #14201b;
  color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap; }
/* Breite des Vorschau-Layers ziehen */
.bff-resize { position: absolute; left: -3px; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 9; }
.bff-resize:hover { background: rgba(13,115,115,.18); }
.bff-marker-hint { background: var(--gold-bg, #fbf3df); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; margin-bottom: 6px; }
.bff-marker-hint .lnk { color: var(--danger); cursor: pointer; text-decoration: underline; }
/* Marker-Badge: monochrom, Pin-Icon + Zahl in einem Kreis */
.bff-note-marker { display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid var(--muted); background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.bff-note-marker:hover { border-color: var(--accent); color: var(--accent); }
.bff-note-marker svg { display: block; }

/* Avatare (Kommentare, Header, Konto-Dialog) */
.bff-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card-alt);
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; vertical-align: middle; }
.bff-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bff-avatar-fb { border: 1px solid var(--border); }
.bff-avatar-sm { width: 20px; height: 20px; font-size: 9px; margin-right: 7px; }
.bff-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

.bff-note-edited { color: var(--muted); font-style: italic; }
.bff-note-meta .bff-note-edit { background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0 2px; }
.bff-note-meta .bff-note-edit:hover { color: var(--accent); }

/* Screenshot in einem Kommentar */
.bff-note-img { max-width: 100%; max-height: 240px; border-radius: 7px; border: 1px solid var(--border);
  margin-top: 8px; display: block; cursor: zoom-in; }

/* Inline-Bearbeiten */
.bff-edit-box { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.bff-edit-box[hidden] { display: none; }
.bff-edit-box textarea { width: 100%; resize: vertical; font: inherit; font-size: 12.5px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 7px; box-sizing: border-box; }
.bff-edit-actions { display: flex; gap: 6px; }
.bff-edit-actions button { font-size: 11.5px; padding: 4px 10px; }

/* Emoji-Reaktionen */
.bff-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.bff-react-chip { font-size: 12px; line-height: 1; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card-alt); color: var(--text); cursor: pointer; }
.bff-react-chip.mine { border-color: var(--accent); background: rgba(13,115,115,.12); color: var(--accent); font-weight: 600; }
.bff-react-chip:hover { border-color: var(--accent); }
.bff-react-add { position: relative; display: inline-flex; }
.bff-react-addbtn { font-size: 12px; line-height: 1; padding: 3px 7px; border: 1px dashed var(--border);
  border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.bff-react-addbtn:hover { border-color: var(--accent); color: var(--accent); }
.bff-react-pop { display: none; position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 6;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 5px;
  box-shadow: 0 6px 18px rgba(13,20,16,.16); gap: 2px; }
.bff-react-add:hover .bff-react-pop, .bff-react-add:focus-within .bff-react-pop { display: flex; }
.bff-react-pick { font-size: 16px; line-height: 1; padding: 3px 4px; border: none; background: transparent; cursor: pointer; border-radius: 6px; }
.bff-react-pick:hover { background: var(--card-alt); }

/* Umfrage-Anzeige */
.bff-poll { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.bff-poll-opt { position: relative; overflow: hidden; text-align: left; display: flex; align-items: center;
  gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--card);
  cursor: pointer; font-size: 12.5px; color: var(--text); }
.bff-poll-opt:hover { border-color: var(--accent); }
.bff-poll-opt.mine { border-color: var(--accent); }
.bff-poll-bar { position: absolute; left: 0; top: 0; height: 100%; background: rgba(13,115,115,.13); z-index: 0; transition: width .25s ease; }
.bff-poll-opt.mine .bff-poll-bar { background: rgba(13,115,115,.22); }
.bff-poll-label { position: relative; z-index: 1; flex: 1 1 auto; }
.bff-poll-pct { position: relative; z-index: 1; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bff-poll-total { font-size: 11px; color: var(--muted); }

/* Composer (Eingabe-Bereich) */
/* Eingabe-Bereich: hebt sich farblich von den (grauen) Kommentaren ab; Höhe per Handle oben. */
.bff-composer { position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px 12px; margin-top: 4px; }
.bff-composer-grip { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 12px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; }
.bff-composer-grip::before { content: ""; width: 46px; height: 4px; border-radius: 3px; background: var(--border); }
.bff-composer-grip:hover::before { background: var(--accent); }
.bff-notes textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }
#bff-note-input { min-height: 120px; }
#bff-note-input.bff-note-dragover { outline: 2px dashed #2e7459; outline-offset: -3px; background: #e7f3ee; }
.bff-compose-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.bff-mini { font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--text); cursor: pointer; }
.bff-mini:hover { border-color: var(--accent); color: var(--accent); }
.bff-mini.active { border-color: var(--accent); background: rgba(13,115,115,.1); color: var(--accent); }
.bff-poll-edit { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card-alt); }
.bff-poll-edit[hidden] { display: none; }
.bff-poll-edit-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
#bff-poll-opts { display: flex; flex-direction: column; gap: 5px; }
.bff-poll-opt-in { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; box-sizing: border-box; background: var(--card); }
#bff-poll-add { align-self: flex-start; }
.bff-img-preview { position: relative; display: inline-block; align-self: flex-start; }
.bff-img-preview[hidden] { display: none; }
.bff-img-preview img { max-height: 110px; max-width: 100%; border-radius: 7px; border: 1px solid var(--border); display: block; }
#bff-img-remove { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: #14201b; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }

/* „Task"-Bereich unten visuell abgrenzen */
.bff-compose { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px;
  padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-alt); }
.bff-compose label { font-size: 12px; color: var(--muted); }
.bff-compose select { font-size: 12px; }
.bff-note-img { cursor: zoom-in; }

/* Bild-Annotations-Editor (Lightbox + Zeichentools) */
.annot-modal { position: fixed; inset: 0; z-index: 1310; background: rgba(13,20,16,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.annot-modal[hidden] { display: none; }
.annot-box { background: var(--card); border-radius: 12px; width: 92vw; height: 90vh; max-width: 92vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.45); }
.annot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); }
.annot-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.annot-tool, .annot-tools button { font-size: 14px; line-height: 1; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--card); color: var(--text); cursor: pointer; }
.annot-tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.annot-tool:hover, .annot-tools button:hover { border-color: var(--accent); }
.annot-tool svg { display: block; }
.annot-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }
.annot-cropapply { font-size: 13px; line-height: 1; padding: 6px 10px; border: 1px solid #1f9d57;
  background: #1f9d57; color: #fff; border-radius: 7px; cursor: pointer; font-weight: 600; flex: 0 0 auto; }
.annot-cropapply:hover { background: #18834a; border-color: #18834a; }
#annot-color { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
#annot-width { font-size: 12px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; }
.annot-x { background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.annot-x:hover { color: var(--danger); }
.annot-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex;
  align-items: center; justify-content: center; background: #2a2f2c; padding: 12px; }
#annot-canvas { max-width: 100%; max-height: 100%; background: #fff; cursor: crosshair; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
/* fehlendes Kommentar-Bild */
.bff-note-imggone { margin-top: 8px; padding: 8px 10px; font-size: 12px; color: var(--muted);
  background: var(--card-alt); border: 1px dashed var(--border); border-radius: 7px; }
.annot-textin { position: absolute; z-index: 2; font: 600 18px system-ui, sans-serif;
  background: rgba(255,255,255,.9); border: 1px dashed var(--accent); border-radius: 3px; padding: 1px 4px; min-width: 90px; }
.annot-textin[hidden] { display: none; }
.annot-footer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.annot-footer textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; min-height: 52px; }
.annot-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.annot-actions .meta { margin-right: auto; }
.bff-compose #bff-note-save { margin-left: auto; }
/* Fußzeile: leicht graue, randlose Leiste unten */
.bff-note-task { font-size: 11px; color: var(--muted); margin: 0; padding: 9px 13px;
  background: #f3f4f5; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px;
  display: flex; align-items: center; gap: 6px; }
.bff-note-task select { font-size: 11px; }
.bff-note-body.md p { margin: 0 0 6px; }

/* Konto-Dialog: Profilbild */
.acct-section { margin-bottom: 18px; }
.acct-section-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 8px; }
.acct-avatar-row { display: flex; align-items: center; gap: 14px; }
.acct-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.acct-avatar-actions button { font-size: 12px; padding: 5px 11px; }
.task-badge { font-size: 11px; border-radius: 10px; padding: 1px 7px; margin-left: 6px; }
.task-badge.open { background: rgba(184,38,30,.12); color: var(--danger); }
.task-badge.pending { background: rgba(200,148,26,.16); color: #8a6400; }
.task-badge.closed { background: rgba(31,122,90,.14); color: #18664c; }
/* Tasks-Tab */
.task-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.task-row.open { border-left: 3px solid var(--danger); }
.task-row.pending { border-left: 3px solid #c8941a; }
.task-row.closed { border-left: 3px solid #1f7a5a; opacity: .72; }
.task-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.task-row-status { font-size: 12px; }
.task-url { color: var(--accent); cursor: pointer; text-decoration: none; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.task-url:hover { text-decoration: underline; }
.task-assignee { font-size: 11.5px; color: var(--text); }
.task-marker { font-size: 11px; background: var(--accent); color: #fff; border-radius: 10px; padding: 0 7px; }
.task-body.md { font-size: 13px; margin-top: 6px; }
.task-body.md p { margin: 0 0 6px; }
/* Board: Prompts-/Antworten-Tab */
.bff-src { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; background: var(--card); }
.bff-src-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bff-src-model { font-weight: 600; color: var(--text); }
.bff-src-prompt { font-size: 12.5px; color: var(--text); }
.bff-src-prompt b { color: var(--accent); }
.bff-src-models { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bff-src-pill { font-size: 10.5px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; color: var(--muted); }
.bff-src-answer { font-size: 12.5px; color: var(--text); margin-top: 6px; max-height: 240px; overflow-y: auto;
  border-top: 1px dashed var(--border); padding-top: 6px; }
.bff-src-answer.md p { margin: 0 0 6px; }
.bff-empty { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }
/* Links-Tab: ein-/ausgehende interne Links mit Suchfilter */
.bff-links { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#bff-links-search { margin: 10px 12px 0; font: inherit; font-size: 12.5px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.bff-links-sec { margin-bottom: 12px; }
.bff-links-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px;
  color: var(--text); padding: 4px 2px; position: sticky; top: 0; background: var(--bg); }
.bff-link-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; margin-bottom: 6px; background: var(--card); color: var(--text); }
.bff-link-row:hover { border-color: var(--accent); background: var(--bg); }
.bff-link-row.bff-link-flash { animation: bffLinkFlash 1.6s ease-out; }
@keyframes bffLinkFlash { 0%, 30% { background: rgba(138,71,209,.22); border-color: #8a47d1; } 100% { background: var(--card); } }
.bff-link-cb { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.bff-link-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.bff-link-label { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bff-link-url { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bff-link-groups { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 46%; }
.bff-link-chip { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  background: var(--card-alt); border: 1px solid var(--border); color: var(--muted); }
/* Verbindungs-Kommentare im Links-Tab */
.bff-link-cbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.bff-link-cbtn .ic { width: 13px; height: 13px; }
.bff-link-cbtn:hover { border-color: var(--accent); color: var(--accent); }
.bff-link-cbtn.has { border-color: var(--accent); color: var(--accent); background: var(--card-alt); }
.bff-link-cbtn.open { background: var(--accent); color: #fff; border-color: var(--accent); }
.bff-link-cpanel { margin: -2px 0 8px 26px; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0; background: var(--card-alt); display: flex; flex-direction: column; gap: 7px; }
.bff-link-cnote { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-style: italic; }
.bff-link-cnote .ic { width: 13px; height: 13px; }
.bff-link-cmt { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; }
.bff-link-cmt-head { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 3px; }
.bff-link-cmt-head .bff-avatar { width: 18px; height: 18px; font-size: 9px; }
.bff-link-cmt-head .meta { color: var(--muted); }
.bff-link-cmt-act { margin-left: auto; display: inline-flex; gap: 4px; }
.bff-link-cmt-act button { font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.bff-link-cmt-act button:hover { border-color: var(--accent); color: var(--accent); }
.bff-link-cmt-act .ic { width: 12px; height: 12px; }
.bff-link-cmt-body { font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.bff-link-ccompose { display: flex; gap: 6px; align-items: flex-end; }
.bff-link-cinput, .bff-link-einput { flex: 1 1 auto; font: inherit; font-size: 12.5px; padding: 5px 8px; resize: vertical;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.bff-link-cmt.editing { display: flex; flex-direction: column; gap: 6px; }
/* Auswahl-/Zuordnen-Leiste */
.bff-links-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 12px 0; }
.bff-links-actions .meta { min-width: 86px; }
.bff-links-groupsel { font: inherit; font-size: 12px; padding: 4px 7px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--text); max-width: 160px; }
.bff-links-newname { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--text); }
.bff-links-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 12px 0; }
.bff-links-dir { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.bff-links-dir button { font: inherit; font-size: 12px; padding: 5px 11px; border: 0; background: var(--card);
  color: var(--text); cursor: pointer; border-right: 1px solid var(--border); }
.bff-links-dir button:last-child { border-right: 0; }
.bff-links-dir button.active { background: var(--accent); color: #fff; }
.bff-links-af { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }

/* ===== Planungsmodus (Ist/Soll-Baum) ===== */
.plan-toolbar { display: flex; gap: 6px; align-items: center; }
.plan-toolbar .btn-ghost, .plan-mini { font-size: 12px; }
.plan-tool-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
.plan-version-wrap { display: inline-flex; align-items: center; gap: 4px; }
.plan-version-select { font-size: 12px; max-width: 170px; padding: 4px 6px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--card); color: var(--text); }
.plan-version-wrap .btn-ghost.icon-only { padding: 4px 7px; }
.plan-version-wrap .btn-ghost.armed { background: #b3261e; border-color: #b3261e; color: #fff; padding: 4px 8px; }
/* KI-Restrukturierungs-Wizard */
.plan-ai-box { width: 560px; max-width: 94vw; }
.plan-ai-block { padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--border); }
.plan-ai-block:last-of-type { border-bottom: none; }
.plan-ai-field { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 0; }
.plan-ai-field textarea, .plan-ai-field input, .plan-ai-field select {
  display: block; width: 100%; margin-top: 5px; font-weight: 400; font-size: 13px; box-sizing: border-box;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.plan-ai-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0 0; }
.plan-ai-preset { font-size: 11.5px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); cursor: pointer; }
.plan-ai-preset:hover { border-color: var(--accent); color: var(--accent); }
.plan-ai-field input[type=range] { width: 100%; margin-top: 7px; accent-color: var(--accent); }
.plan-ai-slider-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.plan-ai-row { display: flex; gap: 14px; }
.plan-ai-row .plan-ai-field { flex: 1; }
.plan-ai-status { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--border); white-space: pre-wrap; }
.plan-ai-loading { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 38px 16px 30px; }
.plan-ai-loading[hidden] { display: none; }
.plan-ai-spin-logo { height: 40px; width: auto; animation: planAiLogoPulse 1.6s ease-in-out infinite; }
@keyframes planAiLogoPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.plan-ai-loading-text { font-size: 14px; font-weight: 600; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .plan-ai-spin-logo { animation: none; opacity: 1; } }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
/* Übersicht/Minimap-Layer (links oben im Canvas), Ausschnitt durch Klicken/Ziehen verschiebbar */
.plan-overview { position: absolute; top: 8px; right: 8px; z-index: 5; background: rgba(255,255,255,.96); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 6px 6px; box-shadow: 0 3px 12px rgba(13,20,16,.12); }
.plan-overview[hidden] { display: none; }
.plan-ov-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 2px 4px; cursor: move; user-select: none; }
.plan-ov-head button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; }
.plan-ov-head button:hover { color: var(--accent); }
#plan-ov-canvas { display: block; cursor: crosshair; border-radius: 4px; }
/* Canvas-Fläche mit Ist + Soll nebeneinander, pan-/zoombar. */
.plan-canvas-wrap { position: relative; margin-top: 10px; height: 72vh; min-height: 460px; border: 1px solid var(--border);
  border-radius: 8px; background: #fbfdfc; overflow: hidden; }
.plan-canvas-wrap[hidden] { display: none; }
#plan-canvas { display: block; width: 100%; height: 100%; }
.plan-legend { position: absolute; bottom: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 11px; box-shadow: 0 2px 8px rgba(13,20,16,.06); }
.plan-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; border: 1.5px solid; }
.plan-legend-count { font-weight: 700; color: var(--text); padding-bottom: 3px; margin-bottom: 2px; border-bottom: 1px solid var(--border); width: 100%; }
/* Tag-Zuweisungs-Panel (rechts neben der Soll-Spalte) */
.plan-tagpanel { position: absolute; top: 8px; right: 8px; bottom: 8px; width: 300px; z-index: 7;
  display: flex; flex-direction: column; background: rgba(255,255,255,.97); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 3px 12px rgba(13,20,16,.12); }
.plan-tagpanel[hidden] { display: none; }
.plan-tagpanel-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px;
  font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
.plan-tagpanel-head button { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); }
.plan-tagpanel-head button:hover { color: var(--accent); }
.plan-tagpanel-body { overflow-y: auto; padding: 6px 9px 10px; }
.plan-tagpanel-empty { color: var(--muted); font-size: 12px; padding: 8px 2px; }
.plan-tagpanel-grp { margin-bottom: 12px; }
.plan-tagpanel-tag { font-weight: 700; font-size: 12px; color: var(--accent); margin: 4px 0 3px; display: flex; gap: 5px; align-items: baseline; }
.plan-tagpanel table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.plan-tagpanel td { padding: 3px 4px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.plan-tagpanel td.ptp-del { width: 20px; text-align: right; }
.plan-tagpanel td.ptp-del button { border: none; background: none; cursor: pointer; color: #b3261e; font-size: 14px; line-height: 1; padding: 0 2px; }
.plan-legend .pl-ist { background: #eef1f0; border-color: #c2ccc7; }
.plan-legend .pl-soll { background: #fff; border-color: #0d7373; }
.plan-legend .pl-mov { background: #fff; border-color: #e8830c; }
.plan-legend .pl-reord { background: #e7f0ff; border-color: #2f6fe0; }
.plan-legend .pl-neu { background: #eafaf3; border-color: #1f7a5a; }
.plan-legend .pl-ret { background: #fdecea; border-color: #d9534f; }
.plan-legend .pl-dup { background: #f3e8f8; border-color: #8b3fb0; transform: rotate(45deg); }
.plan-legend .pl-cons { background: #e7f0ff; border-color: #2f6fe0; border-style: dashed; }
.plan-legend .pl-ext { background: #e6f5f5; border-color: #0d7373; border-style: dashed; }
/* Such-Vorlagen (Regex) + Inhalts-Umschalter im Planungs-Filter. */
.plan-preset-acc { border-top: none; margin-top: 6px; }
.plan-preset-acc > summary { padding: 5px 0; font-size: 12.5px; }
.plan-preset-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin: 7px 0 3px; }
.plan-preset-list { display: flex; flex-direction: column; gap: 3px; }
.plan-preset-btn { text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text); font-size: 12px; }
.plan-preset-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Vertikales Filterpanel (wie Board): Funnel-Button oben links, Legende daneben. */
#plan-filter-btn.bf-toggle { top: 8px; left: 8px; }
.plan-filter-panel.board-filter { z-index: 8; }
/* Filterleiste ist dauerhaft ausgeklappt (kein Schließen) */
.plan-filter-static { display: block !important; }
.plan-filter-static .bf-head { justify-content: flex-start; }
.plan-btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.plan-btn-row .plan-mini { padding: 4px 9px; }
.plan-mini { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1; }
.plan-mini:hover { border-color: var(--accent); color: var(--accent); }
.plan-hint { position: absolute; bottom: 8px; left: 8px; z-index: 3; background: rgba(255,255,255,.9); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 8px; font-size: 11px; }
.plan-tip { position: absolute; z-index: 6; max-width: 240px; background: var(--card); border: 1px solid var(--accent); border-radius: 7px;
  padding: 6px 9px; font-size: 11.5px; box-shadow: 0 4px 14px rgba(13,20,16,.16); pointer-events: none; word-break: break-all; }
.plan-tip[hidden] { display: none; }
.plan-rename { position: absolute; z-index: 7; font: inherit; font-size: 12px; height: 22px; border: 1.5px solid var(--accent);
  border-radius: 4px; padding: 0 5px; background: #fff; color: var(--text); }
.plan-rename[hidden] { display: none; }
.plan-nodebar { position: absolute; z-index: 6; display: flex; gap: 1px; background: var(--card); border: 1px solid var(--border);
  border-radius: 7px; padding: 2px; box-shadow: 0 3px 12px rgba(13,20,16,.15); }
.plan-nodebar[hidden] { display: none; }
.plan-nodebar button { width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.plan-nodebar button:hover { background: var(--card-alt); color: var(--accent); }
.plan-nodebar button[data-pa="del"]:hover { color: var(--danger); }
.plan-doc-box { max-width: 860px; width: 92vw; max-height: 88vh; display: flex; flex-direction: column; }
.plan-doc-body { overflow: auto; padding: 4px 2px; }
.plan-doc-body table { font-size: 12px; }
.plan-doc-body td, .plan-doc-body th { padding: 2px 8px; }

/* Planung: Filterbar + Darstellungs-Popup */
/* Filterbar im Board-Look: helle Toolbar-Leiste, runde Controls. */
.plan-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 12.5px;
  padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.plan-filterbar input[type="search"] { min-width: 200px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px; background: #fff; color: var(--text); -webkit-appearance: none; appearance: none; }
.plan-filterbar select { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.plan-filterbar .inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.plan-fspacer { flex: 1 1 auto; }
.plan-pop-wrap { position: relative; }
.plan-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 22px rgba(0,0,0,.18); min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.plan-pop[hidden] { display: none; }
.plan-pop label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.plan-mini.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Move-Modus: großer, mittiger Schalter ganz oben im Filterpanel (über „Filter"). */
.plan-move-toggle { display: block; width: calc(100% - 24px); margin: 12px auto 2px; padding: 11px 12px; box-sizing: border-box;
  font-size: 14px; font-weight: 700; text-align: center; letter-spacing: .3px; cursor: pointer;
  border: 2px solid var(--accent); border-radius: 10px; background: var(--card); color: var(--accent); }
.plan-move-toggle:hover { background: var(--accent); color: #fff; }
.plan-move-toggle.active { background: #c8941a; border-color: #c8941a; color: #fff; animation: planTogglePulse 1.4s ease-in-out infinite; }
@keyframes planTogglePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,148,26,.45); } 50% { box-shadow: 0 0 0 6px rgba(200,148,26,0); } }
@media (prefers-reduced-motion: reduce) { .plan-move-toggle.active { animation: none; box-shadow: 0 0 0 3px rgba(200,148,26,.25); } }
.plan-move-toggle + .plan-move-toggle { margin-top: 4px; }
/* Lade-Overlay im Restructure Desk: halbtransparent (Baum scheint durch), blockiert aber das Bearbeiten. */
.plan-loading { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(248,250,249,.62); backdrop-filter: blur(1px); cursor: progress; }
body.plan-mode .plan-loading, .plan-loading { }
.plan-loading[hidden] { display: none; }
.plan-loading-box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 420px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 30px; box-shadow: 0 10px 34px rgba(13,20,16,.18); }
.plan-loading-box .spinner { width: 42px; height: 42px; border-width: 5px; }
.plan-loading-text { font-size: 14px; font-weight: 700; color: var(--text); }
.plan-loading-box .meta { font-size: 12px; line-height: 1.4; }
/* Auswahl-Infolayer (erscheint bei markierten Soll-Einträgen, unten mittig). */
/* fixed (viewport-relativ), damit die Bar auf hohen/immersiven Canvas nicht unter den sichtbaren Bereich rutscht */
.plan-selbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 720px; max-width: calc(100vw - 24px);
  justify-content: center; background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 9px 16px;
  box-shadow: 0 8px 26px rgba(13,20,16,.22); }
.plan-selbar[hidden] { display: none; }
.plan-selinfo { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-right: 2px; }
/* Tag verschieben (von→nach). */
.plan-tagmove { display: inline-flex; align-items: center; gap: 5px; }
.plan-tagmove[hidden] { display: none; }
.plan-tagmove select { font-size: 11.5px; max-width: 130px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
/* Auto-Speichern-Status (ersetzt den Speichern-Button). */
.plan-save-status { font-size: 11.5px; min-width: 92px; display: inline-block; text-align: center; color: var(--muted); }
.plan-save-status.ok { color: #1f7a5a; }
.plan-save-status.err { color: var(--danger); }
.plan-move-hint { font-size: 11.5px; color: var(--gold); font-weight: 600; }