/* ===== Kanban-Board (.board) ===== */
.board {
  height: 100%; overflow-x: auto; overflow-y: hidden;
  padding: 14px; display: flex;
}
/* Schmale Leiste über den Spalten: Rückgängig/Wiederholen/Versionen.
   Nimmt dem Board oben den Innenabstand ab, kostet also kaum Höhe. */
.bd-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.bd-wrap > .board { flex: 1; min-height: 0; height: auto; }
.bd-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 4px 10px 0; flex: none;
}
.bd-bar + .board { padding-top: 4px; }
.bd-bar .icon-btn { font-size: 13px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 4px; }
.bd-bar .icon-btn:disabled { opacity: .35; cursor: default; }
.bd-bar .bd-hist span { font-size: 12px; color: var(--muted); }
.board-cols { display: flex; gap: 12px; align-items: flex-start; min-height: 100%; }

.bd-col {
  width: 270px; min-width: 270px; max-height: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
}

/* Handy: Spalten rasten ein. Eine Spalte füllt fast die Breite und steht nach
   jedem Wischen MITTIG, die Nachbarn lugen am Rand hervor (zeigt, dass es
   weitergeht). `scroll-snap-stop: always` = ein Wisch, eine Spalte.
   Breite in cqw (Breite des Boards, nicht des Bildschirms — gilt auch in der
   geteilten Ansicht); vw als Rückfall. Der Rand links/rechts steht an
   .board-cols, nicht am Scroll-Container: dort zählt er sicher zur
   Scrollbreite, sonst ließe sich die letzte Spalte nicht mittig stellen. */
@media (max-width: 700px) {
  .board {
    container-type: inline-size;
    padding: 12px 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .board-cols { padding-inline: 28px; }
  .bd-col, .bd-add-col {
    width: calc(100vw - 56px); min-width: calc(100vw - 56px);
    width: calc(100cqw - 56px); min-width: calc(100cqw - 56px);
    scroll-snap-align: center; scroll-snap-stop: always;
  }
}
.bd-col.bd-dragging { opacity: .45; }
.bd-col.bd-drop { border-color: var(--accent); }
.bd-col-head {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px 7px 12px;
  font-weight: 700; font-size: 13px; cursor: grab; user-select: none;
}
.bd-col-head:active { cursor: grabbing; }
.bd-col-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-col-count {
  background: var(--panel2); color: var(--muted); border-radius: 9px;
  font-size: 11px; font-weight: 600; padding: 1px 7px;
}
.bd-col-btns { display: flex; gap: 0; opacity: 0; transition: opacity .15s; }
.bd-col:hover .bd-col-btns { opacity: 1; }
/* Ohne Maus gibt es kein Hover — die Knöpfe (u.a. Einfügen) sonst unsichtbar. */
@media (hover: none) { .bd-col-btns { opacity: 1; } }
.bd-col-btns .icon-btn { font-size: 12px; padding: 3px 5px; }

.bd-cards {
  flex: 1; overflow-y: auto; padding: 2px 8px 8px;
  display: flex; flex-direction: column; gap: 7px; min-height: 36px;
}
.bd-card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; user-select: none; position: relative;
  /* Karten außerhalb des Bildes (unten in der Spalte, Nachbarspalten) werden
     weder gelayoutet noch gemalt, bis sie ins Bild kommen oder jemand sie misst
     (Suche, Ziehen — getBoundingClientRect holt das nach). Am Handy ist nur
     EINE Spalte sichtbar: 251 Karten öffneten mit ~0,5 s Zwangs-Layout.
     `auto` merkt sich die echte Höhe → nichts springt beim Zurückscrollen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
/* Verschieben per Langdruck: die gewählte Karte wackelt (wie am Homescreen),
   alle Spalten sind Ziele. Kein System-Menü/Lupe beim langen Drücken. */
.bd-card { -webkit-touch-callout: none; -webkit-user-select: none; }
@keyframes bd-wackeln {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
/* Doppelte Klasse: schlägt `.bd-gelandet` (steht weiter unten, gleiche
   Spezifität) — sonst wackelte eine gerade umgesetzte Karte beim nächsten
   Langdruck NICHT. */
.bd-card.bd-card.bd-wackeln {
  animation: bd-wackeln .22s ease-in-out infinite;
  border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.35);
  position: relative; z-index: 2;
}
.board.bd-umzug .bd-col { cursor: pointer; transition: border-color .15s, background .15s; }
.board.bd-umzug .bd-col:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.board.bd-umzug .bd-col-btns, .board.bd-umzug .bd-add-card { pointer-events: none; opacity: .4; }
@keyframes bd-gelandet { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
.bd-card.bd-gelandet { animation: bd-gelandet .7s ease-out; }
/* Kein Ausschalten bei prefers-reduced-motion: Energiesparmodus am Handy
   setzt das stillschweigend — dann „wackelte es manchmal nicht". Das Wackeln
   IST hier die Rückmeldung, dass der Langdruck gegriffen hat. */
/* Auch im Betrachten-Modus öffnet ein Klick die Karte (Kommentare lesen). */
.board:focus { outline: none; }
.bd-card:hover { border-color: var(--muted); }
.bd-card.bd-dragging { opacity: .4; border-style: dashed; }
.bd-card-title { font-size: 13px; font-weight: 600; word-break: break-word; }

/* Anklickbare Fundstellen im Kartentext (Rufnummer, Mail, Web, Anschrift).
   Bewusst dezent unterstrichen statt knallig eingefärbt: auf einer Karte
   stehen oft mehrere davon, und der Text soll lesbar bleiben. */
.bd-fund {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: 3px;
}
.bd-fund:hover { background: var(--accent-dim); text-decoration-style: solid; }
/* Auf dem Telefon ist ein Finger breiter als ein Mauszeiger — etwas Luft
   drumherum, damit man die Stelle sicher trifft, ohne die Karte zu öffnen. */
@media (pointer: coarse) {
  .bd-fund { padding: 1px 2px; }
}
.bd-card-desc {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  /* Zeilenumbrüche aus der Beschreibung stehen lassen — wer eine Karte in
     mehreren Zeilen schreibt, meint das auch so. `pre-line` hält Umbrüche und
     Leerzeilen, fasst aber Folge-Leerzeichen zusammen (im Gegensatz zu `pre`,
     das jede Einrückung mitnimmt und die Karte in die Breite zieht). */
  white-space: pre-line;
  /* KEIN Zeilen-Deckel (09.10.): alle Angaben/Attribute der Karte sollen im
     Board sichtbar sein — die Spalte scrollt ohnehin. Lange Wörter/Links umbrechen. */
  overflow-wrap: anywhere;
}
.bd-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; align-items: center; }
.bd-tag {
  background: var(--accent-dim); color: var(--text); border-radius: 8px;
  font-size: 10.5px; padding: 1px 7px;
}
.bd-due {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  font-size: 10.5px; padding: 1px 7px; color: var(--muted);
}
.bd-due-over { background: var(--err); border-color: var(--err); color: #fff; font-weight: 600; }

.bd-add-card {
  margin: 0 8px 8px; padding: 6px; background: none; border: 1px dashed var(--line);
  border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 12.5px;
}
.bd-add-card:hover { border-color: var(--accent); color: var(--text); }
.bd-add-col {
  min-width: 160px; height: 40px; background: none; border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--muted); cursor: pointer; font-size: 13px;
}
.bd-add-col:hover { border-color: var(--accent); color: var(--text); }

/* Titelbild (Trello-„Cover"): randlos oben in der Karte */
.bd-cover {
  margin: -8px -10px 8px; border-radius: 7px 7px 0 0; overflow: hidden;
  background: var(--panel); max-height: 160px; display: flex; justify-content: center;
}
.bd-cover img { width: 100%; max-height: 160px; object-fit: cover; display: block; pointer-events: none; }
.bd-at-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--muted); padding: 1px 4px;
}
.bd-at-count .ico { width: 12px; height: 12px; }
/* Dateien vom Rechner hineinziehen */
.bd-card.bd-file-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.bd-edit.bd-file-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 8px; }

/* Anhänge im Karten-Dialog */
.bd-ats { margin-top: 4px; }
.bd-ats > .field-label { display: flex; align-items: center; gap: 6px; }
.bd-ats > .field-label .ico { width: 14px; height: 14px; }
.bd-at-list { display: flex; flex-direction: column; gap: 6px; }
.bd-at { display: flex; gap: 10px; align-items: flex-start; }
.bd-at-thumb {
  flex: none; width: 76px; height: 54px; border-radius: 6px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.bd-at-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-at-thumb .ico { width: 22px; height: 22px; }
.bd-at-thumb:hover { border-color: var(--accent); }
.bd-at-info { min-width: 0; flex: 1; }
.bd-at-name {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; text-align: left; word-break: break-word;
}
.bd-at-name:hover { color: var(--accent); text-decoration: underline; }
.bd-at-name .ico { width: 12px; height: 12px; vertical-align: -1px; color: var(--muted); }
.bd-at-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.bd-at-weg .bd-at-name { text-decoration: line-through; color: var(--muted); }
.bd-at-weg .bd-at-sub b { color: var(--err); font-weight: 600; }
.bd-at-acts { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.bd-at-acts button {
  background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.bd-at-acts button:hover { color: var(--text); }
.bd-at-acts .bd-at-del:hover { color: var(--err); }
.bd-at-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bd-at-add .btn { font-size: 12px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; }
.bd-at-add .ico { width: 13px; height: 13px; }
.bd-at-hint { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-all; }

/* Kommentar-Zähler auf der Karte */
.bd-cm-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--muted); padding: 1px 4px;
}
.bd-cm-count .ico { width: 12px; height: 12px; }

/* Kommentare im Karten-Dialog (Trello-artig: neueste oben) */
/* Karten-Dialog in Reitern: Allgemein | Kommentare | To-Dos | Verlauf.
   Die Fläche hat eine Mindesthöhe, damit der Dialog beim Reiterwechsel
   nicht springt. */
.modal.bd-modal { width: min(760px, 96vw); }
.bd-edit { min-width: 0; }
.bd-edit-main, .bd-pane { min-width: 0; }
.bd-panes { min-height: min(550px, 62vh); }
.bd-cms > .field-label { display: none; }
.bd-cm-new { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.bd-cm-new .input { width: 100%; resize: vertical; }
.bd-cm-new .btn { font-size: 12px; padding: 5px 12px; }
.bd-cm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bd-cm-empty { color: var(--muted); font-size: 12.5px; }
.bd-cm {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px;
}
.bd-cm-head { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); }
.bd-cm-by { font-weight: 600; color: var(--text); }
.bd-cm-text { font-size: 13px; margin-top: 3px; white-space: pre-line; word-break: break-word; }
.bd-cm-text .input { width: 100%; resize: vertical; white-space: pre-wrap; }
.bd-cm-edit-btns { display: flex; gap: 6px; margin-top: 6px; }
.bd-cm-edit-btns .btn { font-size: 12px; padding: 4px 10px; }
.bd-cm-acts { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.bd-cm-acts button {
  background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.bd-cm-acts button:hover { color: var(--text); }
.bd-cm-acts .bd-cm-del:hover { color: var(--err); }
.bd-view-desc { white-space: pre-line; word-break: break-word; font-size: 13.5px; }
.bd-view-meta { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Einfügen aus einer Tabelle: Vorschau der entstehenden Karten */
.bd-paste-info { font-size: 13px; margin: 0 0 6px; }
.bd-paste-head { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 10px 0; cursor: pointer; }
.bd-paste-list { display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; }
.bd-paste-card { cursor: default; }
.bd-paste-more { color: var(--muted); font-size: 12px; }
/* Kartenaufbau beim Einfügen: Bausteine (Tabellenspalten) je Kartenzeile */
.bd-plan-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.bd-plan-reset {
  background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 11.5px;
  text-decoration: underline; cursor: pointer;
}
.bd-plan-reset[hidden] { display: none; }
.bd-plan-hilfe { font-size: 11.5px; color: var(--muted); margin: -2px 0 6px; }
.bd-plan { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; user-select: none; -webkit-user-select: none; }
.bd-plan-zeile, .bd-plan-weg {
  display: flex; align-items: center; gap: 8px; min-height: 36px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
}
.bd-plan-weg { background: none; border-style: dashed; opacity: .85; }
.bd-plan-griff { cursor: grab; color: var(--muted); font-size: 15px; padding: 2px 2px; touch-action: none; }
.bd-plan-nr { flex: none; width: 58px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.bd-plan-zeile:first-child .bd-plan-nr { color: var(--accent); }
/* „Weglassen" hat keinen Griff — dessen Breite (15 + 8 px Abstand) dem Etikett
   geben, dann stehen die Bausteine bündig und das Wort passt. */
.bd-plan-weg .bd-plan-nr { width: 81px; }
.bd-plan-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; min-height: 26px; align-items: center; }
.bd-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px 3px 4px; font-size: 12px; cursor: grab; touch-action: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-chip b {
  background: var(--accent-dim); color: var(--text); border-radius: 999px;
  font-size: 10px; padding: 1px 6px; flex: none;
}
.bd-chip:hover { border-color: var(--accent); }
.bd-plan-trenner {
  flex: none; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 11.5px; padding: 2px 4px;
}
.bd-plan-neu {
  border: 1px dashed var(--line); border-radius: 8px; padding: 7px; text-align: center;
  font-size: 12px; color: var(--muted);
}
/* Ziehen */
.bd-plan-quelle { opacity: .35; }
.bd-plan-geist {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: .95;
}
.bd-plan-ziel { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); }
.bd-chip-vor { box-shadow: -3px 0 0 0 var(--accent); }
.bd-chip-nach { box-shadow: 3px 0 0 0 var(--accent); }
.bd-zeile-vor { box-shadow: 0 -3px 0 0 var(--accent); }
.bd-zeile-nach { box-shadow: 0 3px 0 0 var(--accent); }

/* Doppelte (gleiche Überschrift): markiert; beim Überspringen durchgestrichen */
.bd-paste-duprow[hidden] { display: none; }
.bd-paste-dupmark { font-size: 10.5px; font-weight: 600; color: var(--warn, #f5b941); margin-bottom: 2px; }
.bd-paste-dupcard { border-color: color-mix(in srgb, var(--warn, #f5b941) 55%, var(--line)); }
.bd-paste-weg { opacity: .5; }
.bd-paste-weg .bd-card-title, .bd-paste-weg .bd-card-desc { text-decoration: line-through; }

/* ===== Graph-Ansicht (Wissens-Graph, läuft als Tab im #content) ===== */
.graph-view {
  height: 100%; background: var(--bg);
  display: flex; flex-direction: column;
  /* Interaktive Canvas-Ansicht: kein Text/Element-Markieren beim (Lang-)Drücken
     — sonst selektiert der Browser beim Halten unkontrolliert die ganze Seite;
     auf iOS zusätzlich kein Lang-Druck-Auswahl-Callout. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.graph-head {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.graph-scope {
  font-weight: 700; font-size: 13.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 45vw;
}
.graph-stats { font-size: 12px; color: var(--muted); }
.graph-spacer { flex: 1; }
.graph-depth-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.graph-depth {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 6px; font: inherit; font-size: 12.5px; outline: none;
}
.graph-auto { font-size: 12.5px; padding: 5px 11px; }
.graph-close { font-size: 19px; }
.graph-body { flex: 1; position: relative; overflow: hidden; }
.graph-canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.graph-canvas:active { cursor: grabbing; }
.graph-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--muted); font-size: 14px; pointer-events: none;
}

/* ===== Graph: Breadcrumbs, Tooltip, Kopfzeile ===== */
.graph-ico { display: inline-flex; color: var(--accent); }
.graph-ico svg.ico { width: 17px; height: 17px; }
.graph-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.graph-crumb {
  color: var(--muted); cursor: pointer; font-size: 13.5px;
  white-space: nowrap; border-radius: 5px; padding: 2px 5px;
}
.graph-crumb:hover { background: var(--panel2); color: var(--text); }
.graph-crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.graph-crumb-sep { color: var(--line); }
.graph-stats { color: var(--muted); font-size: 12px; white-space: nowrap; margin-left: 10px; }
.graph-spacer { flex: 1; }
.graph-depth-label { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.graph-depth {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 6px; font-size: 12.5px;
}
.graph-auto { display: inline-flex; align-items: center; gap: 5px; }
.graph-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.graph-tip-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; word-break: break-all; }

/* ===== Graph: Joysticks (unten links Zoom, unten rechts Bewegen) ===== */
.graph-joystick {
  position: absolute; bottom: 18px; width: 86px; height: 86px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  z-index: 6; opacity: .7; transition: opacity .15s ease;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.graph-joystick:hover, .graph-joystick.active { opacity: 1; }
.graph-joystick.gj-zoom { left: 16px; }
.graph-joystick.gj-move { right: 16px; }
.gj-knob {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); transform: translate(-50%,-50%);
  pointer-events: none; touch-action: none;
}
.graph-joystick.active .gj-knob { box-shadow: 0 0 0 4px var(--accent-dim), 0 2px 8px rgba(0,0,0,.4); }
.gj-plus, .gj-minus {
  position: absolute; left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 16px; font-weight: 700; line-height: 1; pointer-events: none;
}
.gj-plus { top: 7px; }
.gj-minus { bottom: 7px; }
.gj-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); opacity: .4; pointer-events: none;
}
.gj-center svg { width: 20px; height: 20px; }
@media (pointer: coarse) {
  .graph-joystick { width: 96px; height: 96px; opacity: .82; }
  .gj-knob { width: 40px; height: 40px; }
}

/* ---- Graph: Typ-Filter- und Treffer-Chips ---- */
.graph-filter {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.graph-filter:empty { display: none; }
/* .base-Graph (eingebettet): kein eigener Filter/Tiefe/Breadcrumbs — der
   Base-Filter bestimmt die Knotenmenge. */
.graph-embedded .graph-depth-label,
.graph-embedded .graph-crumbs { display: none; }
.graph-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer; user-select: none;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px;
}
.graph-chip:hover { border-color: var(--muted); color: var(--text); }
.graph-chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.graph-chip .gc-count {
  font-size: 10.5px; color: var(--muted);
  background: var(--panel); border-radius: 999px; padding: 0 6px; line-height: 1.5;
}
.graph-chip .ico { width: 13px; height: 13px; }
.graph-chip .gc-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-chip-hl { color: #f5b941; border-color: #f5b941; }
.graph-chip-hl.on { border-color: #f5b941; background: color-mix(in srgb, #f5b941 14%, var(--panel2)); color: var(--text); }

/* ===== Frühere Stände (board-versions.js) ===== */
.bdv-leer, .bdv-hilfe { color: var(--muted); font-size: 13px; padding: 4px 2px 10px; }
.bdv-liste { display: flex; flex-direction: column; gap: 6px; }
.bdv-zeile { border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.bdv-zeile.offen { border-color: var(--accent); }
.bdv-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 8px 10px; cursor: pointer; user-select: none;
}
.bdv-zeit { font-weight: 700; min-width: 110px; }
.bdv-sum { color: var(--muted); font-size: 12px; }
.bdv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.bdv-chip {
  font-size: 11px; padding: 1px 8px; border-radius: 9px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
}
.bdv-chip.bdv-weg { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.bdv-detail { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.bdv-eintrag {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--err) 7%, var(--panel));
}
.bdv-eintrag .btn { flex: none; }
.bdv-grau { color: var(--muted); font-size: 12px; font-weight: 400; }
.bdv-bau {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  font-size: 13px; padding: 6px 0;
}
.bdv-bau > div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; overflow: hidden; }
.bdv-ganz { align-self: flex-start; }

/* Inhalt kopieren (ohne Titel): Knopf im Dialog + Mini-Knopf auf der Karte
   (erscheint beim Darüberfahren; am Touchgerät immer dezent sichtbar). */
.bd-f-desc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.bd-copy {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.bd-copy:hover { color: var(--text); background: var(--panel2); }
.bd-copy .ico { width: 13px; height: 13px; }
.bd-view .bd-copy { margin-bottom: 8px; }
.bd-card-copy {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.bd-card-copy .ico { width: 13px; height: 13px; }
.bd-card:hover .bd-card-copy { opacity: 1; }
.bd-card-copy:hover { color: var(--text); border-color: var(--accent); }
@media (hover: none) { .bd-card-copy { opacity: .55; } }
.bd-umzug .bd-card-copy, .bd-dragging .bd-card-copy { display: none; }

/* Reiter im Karten-Dialog */
.bd-rtabs {
  display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.bd-rtabs::-webkit-scrollbar { display: none; }
.bd-rtabs button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; flex: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 12px;
  color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.bd-rtabs button[hidden] { display: none; }
.bd-rtabs button .ico { width: 15px; height: 15px; }
.bd-rtabs button:hover { color: var(--text); }
.bd-rtabs button.an { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.bd-rtab-n:empty { display: none; }
.bd-rtab-n {
  font-size: 11px; font-weight: 600; background: var(--panel2); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.bd-rtab-n.bd-rtab-fertig { background: #2e9d5b; color: #fff; }
@media (max-width: 480px) {
  .bd-rtabs button { padding: 7px 8px; gap: 4px; font-size: 13px; }
}

/* To-Dos (features/board-todos.js) */
.bd-td-count { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); padding: 1px 4px; border-radius: 4px; }
.bd-td-count .ico { width: 12px; height: 12px; }
.bd-td-count.bd-td-alle { color: #fff; background: #2e9d5b; }
.bd-td-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bd-td-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.bd-td-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .2s; }
.bd-td-fertig .bd-td-bar span { background: #2e9d5b; }
.bd-td-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-td-hide { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; white-space: nowrap; }
.bd-td-list { display: flex; flex-direction: column; margin-bottom: 10px; }
.bd-td {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px;
  border-radius: 6px; border-bottom: 1px solid var(--line);
}
.bd-td:hover { background: var(--panel2); }
.bd-td-grip {
  flex: none; cursor: grab; color: var(--muted); opacity: .45; font-size: 12px; letter-spacing: -2px;
  padding: 3px 2px 0; touch-action: none; user-select: none;
}
.bd-td:hover .bd-td-grip { opacity: .9; }
.bd-td-check { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #2e9d5b; cursor: pointer; }
.bd-td-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; cursor: text; }
.bd-view .bd-td-text { cursor: default; }
.bd-td-done .bd-td-text { text-decoration: line-through; color: var(--muted); }
.bd-td-edit { width: 100%; padding: 3px 6px; }
.bd-td-del {
  flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px;
  opacity: 0; border-radius: 4px;
}
.bd-td-del .ico { width: 15px; height: 15px; }
.bd-td:hover .bd-td-del { opacity: .8; }
.bd-td-del:hover { color: var(--danger, #d33); opacity: 1; }
@media (hover: none) { .bd-td-del { opacity: .6; } .bd-td-grip { opacity: .7; } }
.bd-td-ziehen { background: var(--panel2); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.bd-td-new { display: flex; gap: 8px; }
.bd-td-new .input { flex: 1; min-width: 0; }
.bdl-erledigt { text-decoration: line-through; }

/* Verlauf (board-log.js) */
.bdl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bdl-chip {
  border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px;
  padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.bdl-chip.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.bdl-chip .bdl-n { opacity: .75; font-size: 11px; margin-left: 2px; }
.bdl-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.bdl-sub .ico { width: 13px; height: 13px; }
.bdl-stays {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px;
}
.bdl-stay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; }
.bdl-stay.bdl-jetzt b { color: var(--accent); }
.bdl-dauer { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.bdl-grau { color: var(--muted); font-size: 12px; }
.bdl-list { display: flex; flex-direction: column; }
.bdl-e { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bdl-e:last-child { border-bottom: 0; }
.bdl-ico {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--panel2);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.bdl-ico .ico { width: 13px; height: 13px; }
.bdl-t-neu .bdl-ico, .bdl-t-wieder .bdl-ico { color: #2e9d5b; }
.bdl-t-spalte .bdl-ico { color: var(--accent); }
.bdl-t-bearb .bdl-ico { color: #c58a16; }
.bdl-body { min-width: 0; flex: 1; }
.bdl-head { display: flex; gap: 8px; font-size: 11px; color: var(--muted); }
.bdl-text { font-size: 13px; word-break: break-word; }
.bdl-feld { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bdl-alt { text-decoration: line-through; opacity: .8; }
.bdl-neu { color: var(--text); }
.bdl-fuss { margin-top: 8px; }
@media (hover: none) { .bd-card:has(.bd-card-copy) .bd-card-title { padding-right: 24px; } }
.modal.bd-modal:focus { outline: none; }

/* Termin (features/board-termin.js) — Abzeichen auf der Karte */
.bd-termin {
  --bd-termin-farbe: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--bd-termin-farbe); border-radius: 8px;
  font-size: 10.5px; padding: 1px 7px 1px 5px; color: var(--text);
}
.bd-termin .ico { width: 12px; height: 12px; color: var(--bd-termin-farbe); }
.bd-termin-vorbei { color: var(--muted); opacity: .75; }
.bd-termin-weg { color: var(--muted); text-decoration: line-through; }

/* Termin im Karten-Dialog */
.bd-tm { margin-top: 4px; }
.bd-tm > .field-label { display: flex; align-items: center; gap: 6px; }
.bd-tm .field-label .ico, .bd-tm-add .ico { width: 14px; height: 14px; }
.bd-tm-add { display: inline-flex; align-items: center; gap: 6px; }
.bd-tm-karte {
  --bd-termin-farbe: var(--accent);
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 4px solid var(--bd-termin-farbe); border-radius: 8px;
  padding: 8px 11px; display: flex; flex-direction: column; gap: 4px;
}
.bd-tm-karte.weg { opacity: .7; }
.bd-tm-karte.weg .bd-tm-titel { text-decoration: line-through; }
.bd-tm-titel { font-weight: 600; font-size: 14px; }
.bd-tm-cal {
  font-weight: 400; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; margin-left: 4px;
}
.bd-tm-wann, .bd-tm-ort { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; }
.bd-tm-wann .ico, .bd-tm-ort .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--muted); }
.bd-tm-desc {
  font-size: 12.5px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 160px; overflow: auto;
}
.bd-tm-hinweis { font-size: 12px; color: var(--err); }
.bd-tm-acts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-top: 2px; }
.bd-tm-acts a, .bd-tm-acts button {
  background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.bd-tm-acts .ico { width: 12px; height: 12px; }
.bd-tm-acts a:hover, .bd-tm-acts button:hover { text-decoration: underline; }
.bd-tm-acts .bd-tm-del { color: var(--muted); }

/* Termin auswählen */
.bd-tw { display: flex; flex-direction: column; gap: 8px; min-width: min(460px, 80vw); }
.bd-tw-such { display: flex; align-items: center; gap: 6px; }
.bd-tw-such > .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bd-tw-such .input { flex: 1; }
.bd-tw-liste {
  position: relative; max-height: min(55vh, 460px); overflow: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.bd-tw-tag {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 6px 2px 3px;
}
.bd-tw-tag.heute { color: var(--accent); }
.bd-tw-tag.vorbei, .bd-tw-ev.vorbei { opacity: .6; }
.bd-tw-ev {
  --bd-termin-farbe: var(--accent);
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--bd-termin-farbe); border-radius: 7px;
  padding: 6px 9px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px;
}
.bd-tw-ev:hover, .bd-tw-ev:focus-visible { border-color: var(--accent); border-left-color: var(--bd-termin-farbe); }
.bd-tw-zeit { flex: none; width: 92px; color: var(--muted); font-size: 12px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.bd-tw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-tw-text b { font-weight: 600; overflow-wrap: anywhere; }
.bd-tw-wdh { color: var(--muted); font-weight: 400; }
.bd-tw-ort { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; }
.bd-tw-ort .ico { width: 11px; height: 11px; flex: none; }
@media (max-width: 700px) {
  .bd-tw { min-width: 0; }
  .bd-tw-zeit { width: 74px; }
}

/* Automation je Spalte (board-automation.js): To-Do-Vorlagen + Regeln */
.bd-col-btns .bd-auto { display: inline-flex; align-items: center; gap: 2px; }
.bd-col-btns .bd-auto.an { color: var(--accent); }
.bd-col-btns .bd-auto span { font-size: 10px; font-weight: 700; }
/* Mit Automation auch ohne Hover sichtbar — sonst weiß man nicht, dass die Spalte welche hat. */
.bd-col-btns:has(.bd-auto.an) { opacity: 1; }
.bd-col-btns:has(.bd-auto.an) .icon-btn:not(.an) { opacity: 0; transition: opacity .15s; }
/* Hover blendet ALLE ein — auch in Spalten mit Automation. Die Regel darüber
   (:has(.bd-auto.an) … :not(.an)) ist spezifischer als ein schlichtes
   „.bd-col:hover … .icon-btn": dort blieben Sortieren/Umbenennen/Löschen sonst
   für immer unsichtbar (10.10.). Darum hier mit demselben :has()-Gewicht. */
.bd-col:hover .bd-col-btns .icon-btn,
.bd-col:hover .bd-col-btns:has(.bd-auto.an) .icon-btn:not(.an),
.bd-col:focus-within .bd-col-btns:has(.bd-auto.an) .icon-btn:not(.an) { opacity: 1; }
.bd-col:focus-within .bd-col-btns { opacity: 1; }
@media (hover: none) { .bd-col-btns .icon-btn { opacity: 1 !important; } }
.bd-vl { display: flex; flex-direction: column; gap: 10px; min-width: min(440px, 80vw); }
.bd-vl-hilfe { font-size: 12.5px; color: var(--muted); }
.bd-vl-text { width: 100%; resize: vertical; font: inherit; }
.bd-vl-alle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Offene To-Dos ROT — auf der Karte, am Reiter und in der Liste */
.bd-td-count.bd-td-offen { color: #fff; background: var(--err); font-weight: 600; }
.bd-rtab-n.bd-rtab-offen { background: var(--err); color: #fff; }
.bd-td-rest .bd-td-n { color: var(--err); font-weight: 600; }
.bd-td:not(.bd-td-done) .bd-td-text { color: var(--err); }

/* Sortierung je Spalte (board-sort.js) */
.bd-col-btns .bd-sort { display: inline-flex; align-items: center; gap: 2px; }
.bd-col-btns .bd-sort.an { color: var(--accent); }
.bd-col-btns .bd-sort span { font-size: 10px; font-weight: 700; }
.bd-col-btns:has(.bd-sort.an) { opacity: 1; }
.bd-sort-badge { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Freie Fläche mit der Maus ziehen = Board schieben (board.js, freieFlaeche) */
@media (hover: hover) and (pointer: fine) {
  .board, .board-cols, .bd-cards { cursor: grab; }
  .board.bd-schieben, .board.bd-schieben * { cursor: grabbing !important; user-select: none; }
}

/* Kartenfarben (board-farben.js): nur leicht getönt — Kategorien
   unterscheiden, ohne dass es schreit. color-mix mit dem Kartengrund passt
   sich hell/dunkel von selbst an; Rand etwas kräftiger als die Fläche. */
.bd-farbe-rot     { --bd-farbe: #e5484d; }
.bd-farbe-orange  { --bd-farbe: #f0883e; }
.bd-farbe-gelb    { --bd-farbe: #e2b93b; }
.bd-farbe-gruen   { --bd-farbe: #46a758; }
.bd-farbe-tuerkis { --bd-farbe: #12a594; }
.bd-farbe-blau    { --bd-farbe: #3e83f8; }
.bd-farbe-lila    { --bd-farbe: #8e4ec6; }
.bd-farbe-rosa    { --bd-farbe: #d6409f; }
.bd-farbe-grau    { --bd-farbe: #8b8d98; }
.bd-card[class*="bd-farbe-"] {
  background: color-mix(in srgb, var(--bd-farbe) 13%, var(--panel2));
  border-color: color-mix(in srgb, var(--bd-farbe) 30%, var(--line));
}
[data-theme="light"] .bd-card[class*="bd-farbe-"] {
  background: color-mix(in srgb, var(--bd-farbe) 11%, var(--panel2));
}
.bd-card[class*="bd-farbe-"]:hover { border-color: color-mix(in srgb, var(--bd-farbe) 55%, var(--line)); }

/* Farbwahl im Karten-Dialog */
.bd-f-farbe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bd-swatch {
  width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--bd-farbe, var(--muted)) 70%, var(--line));
  background: color-mix(in srgb, var(--bd-farbe, transparent) 55%, var(--panel2));
}
.bd-swatch-keine {
  background: linear-gradient(135deg, transparent 45%, var(--muted) 45% 55%, transparent 55%), var(--panel2);
}
.bd-swatch:hover { transform: scale(1.08); }
.bd-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent-dim); }

/* Webseite der Karte (board-web.js) */
.bd-f-web { display: flex; gap: 6px; }
.bd-f-web .input { flex: 1; min-width: 0; }
.bd-f-web .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bd-f-webstatus { font-size: 12px; color: var(--muted); margin: 3px 0 8px; min-height: 0; }
.bd-f-webstatus:empty { margin: 0 0 8px; }
.bd-card-meta .bd-web { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); cursor: pointer; }
.bd-card-meta .bd-web:hover { color: var(--accent); }
.bd-card-meta .bd-web .ico { width: 11px; height: 11px; }
.bd-web-sucht { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent); animation: bd-sucht 1.2s ease-in-out infinite; }
.bd-web-sucht .ico { width: 11px; height: 11px; }
@keyframes bd-sucht { 50% { opacity: .4; } }

/* Spalten-Regeln */
.bd-autom { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 80vw); }
.bd-autom .bd-rtabs { margin-bottom: 0; }
.bd-auto-pane { display: flex; flex-direction: column; gap: 10px; min-height: min(380px, 50vh); }
.bd-auto-pane[hidden] { display: none; }
.bd-rg-neu-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-rg-neu-zeile .btn { display: inline-flex; align-items: center; gap: 5px; }
.bd-rg-akt { border-top: 1px dashed var(--line); padding-top: 6px; }
.bd-rg-akt-kopf { font-weight: 600; }
.bd-rg-akt-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px 24px; }
.bd-rg-akt:not(:has(.bd-rg-an:checked)) .bd-rg-akt-body { opacity: .45; }
.bd-rg-tage { width: 80px; }
.bd-rg-tage[hidden], .bd-rg-tage-text[hidden] { display: none; }
.bd-rg-liste { display: flex; flex-direction: column; gap: 12px; }
.bd-rg-regel { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; background: var(--panel2); }
.bd-rg-zeile { display: flex; align-items: center; gap: 8px; }
.bd-rg-zeile select { flex: 1; min-width: 0; }
.bd-rg-check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.bd-rg-titel { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.bd-rg-felder { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-rg-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--panel); }
.bd-rg-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.bd-rg-farbe { margin-bottom: 0; }
.bd-rg-akt .bd-rg-zeile select { flex: none; width: auto; }
.bd-rg-ki { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--accent); border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; margin-left: 2px; }
.bd-rg-unter { font-size: 12px; font-weight: 600; margin-top: 4px; }
.bd-rg-unter span { font-weight: 400; color: var(--muted); }
.bd-rg-eigene { display: flex; flex-direction: column; gap: 4px; }
.bd-rg-eigene:empty { display: none; }
.bd-rg-eigen { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 6px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent-dim); }
.bd-rg-eigen.zieht { box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: .9; }
.bd-rg-griff { cursor: grab; touch-action: none; user-select: none; color: var(--muted); padding: 2px 5px; font-size: 15px; line-height: 1; }
.bd-rg-eigen.zieht .bd-rg-griff { cursor: grabbing; }
.bd-rg-eigen-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bd-rg-eigen button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 13px; border-radius: 4px; }
.bd-rg-eigen button:hover { color: var(--text); background: var(--panel); }
.bd-rg-eigen:first-child [data-zug="-1"], .bd-rg-eigen:last-child [data-zug="1"] { visibility: hidden; }
.bd-rg-plus-zeile .input { flex: 1; min-width: 0; }
.bd-rg-plus-zeile .btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bd-rg-vorschau { font-size: 12px; color: var(--muted); }
.bd-rg-vorschau pre { margin: 4px 0 0; padding: 7px 9px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-family: inherit; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.bd-f-desc-btns { display: inline-flex; align-items: center; gap: 2px; }
.bd-fett b { font-size: 13px; padding: 0 3px; }
.bd-card-desc strong, .bd-view-desc strong, .bd-cm-text strong, .bd-td-text strong { font-weight: 700; color: var(--text); }
.bd-rg-prompt { width: 100%; resize: vertical; font: inherit; font-size: 13px; }

/* Beschreibung: Fett schon beim Tippen (board.js fettSpiegel). Spiegel unten,
   Textfeld durchsichtig darüber — Maße setzt das Skript vom Textfeld. */
.bd-fs-wrap { position: relative; background: var(--bg); border-radius: 8px; }
.bd-fs-spiegel {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-style: solid; border-color: transparent; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--text);
}
.bd-fs-spiegel b { font-weight: inherit; -webkit-text-stroke: .045em currentColor; }
.bd-fs-spiegel .bd-fs-mk { color: var(--muted); opacity: .55; }
.bd-fs-ta.input { position: relative; display: block; background: transparent; color: transparent; caret-color: var(--text); }
/* Modernes Design (modern.css: html.modern .input — höhere Spezifität) gab dem Textfeld
   wieder einen deckenden Hintergrund → der Spiegel darunter war verdeckt, die Beschreibung
   wirkte LEER (12.10.). Hintergrund gehört hier dem Rahmen, nie dem Textfeld. */
html.modern .bd-fs-ta.input, html.modern .bd-fs-ta.input:focus { background: transparent; }
html.modern .bd-fs-wrap { background: var(--panel2); border-radius: 10px; }
html.modern .bd-fs-wrap:focus-within { background: var(--bg); }
.bd-fs-ta::placeholder { color: var(--muted); }
.bd-fs-ta::selection { color: transparent; background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Automation-Reiter „E-Mail" (features/board-mail.js) */
.bd-ml-liste { display: flex; flex-direction: column; gap: 12px; }
.bd-ml-kopf select { flex: 1; min-width: 0; }
.bd-ml-kopf .bd-ml-role { flex: 0 1 180px; }
.bd-ml-opt { font-weight: 400; }
.bd-ml-filter .input { flex: 1; min-width: 0; }
.bd-ml-stand { font-size: 12.5px; color: var(--muted); }
.bd-ml-ok { color: #3fb950; font-weight: 600; }
.bd-ml-wartet { color: var(--muted); }
.bd-ml-fehler { color: #ff5d5d; }
.bd-ml-laeuft { color: var(--muted); font-style: italic; }
.bd-ml-probe { display: inline-flex; align-items: center; gap: 5px; }
.bd-ml-probe-hin { font-size: 12px; color: var(--muted); }
.bd-ml-ergebnis { font-size: 13px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.bd-ml-ergebnis[hidden] { display: none; }
.bd-ml-mail { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--muted); }
.bd-ml-mail b { color: var(--text); }
.bd-ml-mail .ico { width: 14px; height: 14px; }
.bd-ml-skip { color: #d29922; }
.bd-ml-vorlage { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.bd-ml-feld { display: grid; grid-template-columns: 105px 1fr; gap: 3px 10px; align-items: start; }
.bd-ml-flabel { font-size: 12.5px; font-weight: 600; padding-top: 7px; color: var(--muted); }
.bd-ml-feld[data-k="titel"] .bd-ml-flabel { color: var(--text); }
.bd-ml-feld[data-k="titel"] .bd-ml-fwert { font-weight: 600; }
.bd-ml-fwert { width: 100%; min-width: 0; font: inherit; font-size: 13px; resize: vertical; }
.bd-ml-fprobe { grid-column: 2; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; padding: 5px 8px; border-radius: 6px; background: var(--accent-dim); border-left: 3px solid var(--accent); }
.bd-ml-fprobe[hidden] { display: none; }
.bd-ml-fprobe.leer { background: none; border-left-color: var(--line); color: var(--muted); }
.bd-ml-feld[data-k="titel"] .bd-ml-fprobe { font-weight: 600; }
.bd-ml-farbpunkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--bd-farbe, var(--accent)); }
.bd-ml-ok-hin { color: var(--muted); }
.bd-ml-verlauf { font-size: 12.5px; }
.bd-ml-verlauf summary { cursor: pointer; color: var(--muted); }
.bd-ml-verlauf > div { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.bd-ml-v span:first-child { color: var(--muted); }
@media (max-width: 600px) {
  .bd-ml-kopf, .bd-ml-filter { flex-wrap: wrap; }
  .bd-ml-kopf .bd-ml-role { flex: 1 1 100%; }
}
.bd-ml-test .bd-ml-mailwahl { flex: 1; min-width: 0; }
.bd-ml-test .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bd-ml-ausloesen { border-color: var(--accent); }
.bd-ml-hand { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 600px) { .bd-ml-test { flex-wrap: wrap; } .bd-ml-test .bd-ml-mailwahl { flex: 1 1 100%; } }

/* Automation kopieren / einfügen (board-automation.js) */
.bd-auto-klip { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-auto-klip .btn, .bd-vl-kopie { display: inline-flex; align-items: center; gap: 5px; }
.bd-auto-klip .btn .ico, .bd-vl-kopie .ico { width: 15px; height: 15px; }

/* ===== Automation-Fenster am Handy (≤ 600 px) =====
   Vollbild im Board, Reiter kleben oben, Speichern fest unten; je Regel nur die
   angehakten Aktionen offen; Kopfzeilen umbrechen statt abschneiden. */
@media (max-width: 600px) {
  .modal-overlay:has(.bd-autom) { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal:has(> .modal-body > .bd-autom) {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: 0;
  }
  .modal:has(> .modal-body > .bd-autom) > .modal-head { padding: 10px 12px 4px; }
  .modal:has(> .modal-body > .bd-autom) > .modal-body { padding: 0 12px 16px; flex: 1; min-height: 0; overscroll-behavior: contain; }
  .modal:has(> .modal-body > .bd-autom) > .modal-foot {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel);
  }
  .modal:has(> .modal-body > .bd-autom) > .modal-foot .btn { flex: 1; min-height: 44px; }

  .bd-autom { min-width: 0; gap: 10px; }
  .bd-autom .input { font-size: 16px; }   /* iOS zoomt sonst beim Antippen hinein */
  .bd-autom .bd-vl-hilfe { font-size: 13px; line-height: 1.45; }

  /* Kopieren/Einfügen: zwei gleich breite, flache Knöpfe */
  .bd-auto-klip .btn { flex: 1; justify-content: center; padding: 7px 8px; font-size: 13.5px; }

  /* Reiter: kleben beim Scrollen oben, teilen sich die Breite */
  .bd-autom .bd-rtabs {
    position: sticky; top: 0; z-index: 3; background: var(--panel);
    margin: 0 -12px; padding: 0 12px;
  }
  .bd-autom .bd-rtabs button { flex: 1; justify-content: center; padding: 10px 4px; }

  /* Regel-Karte */
  .bd-autom .bd-rg-regel { padding: 10px; gap: 8px; }
  .bd-autom .bd-rg-regel > .bd-rg-zeile:first-child { flex-wrap: wrap; row-gap: 6px; }
  .bd-autom .bd-rg-regel > .bd-rg-zeile:first-child .bd-rg-wann { flex: 1 1 100%; order: 3; width: 100%; }
  .bd-autom .bd-rg-kopie { margin-left: auto; }
  .bd-autom .icon-btn.bd-rg-kopie, .bd-autom .icon-btn.bd-rg-weg, .bd-autom .icon-btn.bd-ml-kopie { width: 38px; height: 38px; }
  .bd-autom .bd-rg-akt-body { padding: 6px 0 2px 0; }
  .bd-autom .bd-rg-akt:not(:has(.bd-rg-an:checked)) .bd-rg-akt-body { display: none; }
  .bd-autom .bd-rg-akt-kopf { min-height: 36px; }
  .bd-autom .bd-rg-akt[data-a="faellig"] .bd-rg-zeile { flex-wrap: wrap; }
  .bd-autom .bd-rg-plus-zeile { align-items: stretch; }
  .bd-autom .bd-rg-plus-zeile .btn { font-size: 0; gap: 0; padding: 0 14px; min-width: 48px; justify-content: center; }
  .bd-autom .bd-rg-plus-zeile .btn .ico { width: 18px; height: 18px; }
  .bd-autom .bd-rg-farbe { gap: 8px; }

  /* E-Mail-Lauscher: „Postfach" + Knöpfe oben, Auswahlfelder darunter in voller Breite */
  .bd-autom .bd-ml-kopf { flex-wrap: wrap; row-gap: 6px; }
  .bd-autom .bd-ml-kopf .bd-ml-acct { flex: 1 1 100%; order: 3; }
  .bd-autom .bd-ml-kopf .bd-ml-role { flex: 1 1 100%; order: 4; }
  .bd-autom .bd-ml-kopie { margin-left: auto; }
  .bd-autom .bd-ml-kopf .bd-ml-kopie + .bd-rg-weg { margin-left: 0; }
  .bd-autom .bd-ml-filter .input { flex: 1 1 100%; }
  .bd-autom .bd-ml-vorlage { padding: 10px; gap: 10px; }
  .bd-autom .bd-ml-feld { grid-template-columns: 1fr; gap: 4px; }
  .bd-autom .bd-ml-flabel { padding-top: 0; }
  .bd-autom .bd-ml-fprobe { grid-column: 1; }
  .bd-autom .bd-ml-test .btn { flex: 1; justify-content: center; min-height: 40px; }
  .bd-autom .bd-rg-neu-zeile .btn { flex: 1 1 140px; justify-content: center; min-height: 42px; }
  .bd-autom .bd-rg-regel { gap: 4px; }
  .bd-autom .bd-rg-akt { padding-top: 2px; }
  .bd-autom .bd-rg-akt-kopf { min-height: 40px; }
}

/* Überkategorien (board-gruppen.js): Rahmen um zusammengehörige Spalten.
   Spalten darin strecken sich auf gleiche Höhe (Prozent-Höhen lösen sich in
   der Spalten-Flexbox nicht auf), die Kartenliste scrollt darin. */
.bd-gruppe {
  display: flex; flex-direction: column; max-height: 100%; min-height: 0;
  border: 1px solid color-mix(in srgb, var(--bd-farbe, var(--muted)) 35%, var(--line));
  background: color-mix(in srgb, var(--bd-farbe, var(--muted)) 6%, transparent);
  border-radius: calc(var(--radius) + 4px); padding: 0 6px 6px;
}
.bd-gruppe.bd-dragging { opacity: .45; }
.bd-gruppe-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 2px;
  font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bd-farbe, var(--muted)) 70%, var(--text)); cursor: grab; user-select: none;
}
.bd-gruppe-head .icon-btn { font-size: 12px; padding: 2px 4px; }
.bd-gruppe-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-gruppe-menu { opacity: 0; transition: opacity .15s; }
.bd-gruppe-head:hover .bd-gruppe-menu { opacity: 1; }
@media (hover: none) { .bd-gruppe-menu { opacity: 1; } }
.bd-gruppe-cols { display: flex; gap: 10px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.bd-gruppe-cols > .bd-col { max-height: none; min-height: 0; }
.bd-gruppe[class*="bd-farbe-"] { border-width: 1.5px; background: color-mix(in srgb, var(--bd-farbe) 9%, transparent); }
/* eingeklappt: schmaler Streifen mit senkrechtem Namen */
.bd-gruppe.zu { width: 44px; min-width: 44px; padding: 0 0 8px; cursor: pointer; }
.bd-gruppe.zu .bd-gruppe-cols { display: none; }
.bd-gruppe.zu .bd-gruppe-head { flex-direction: column; padding: 8px 0; gap: 8px; }
.bd-gruppe.zu .bd-gruppe-title { writing-mode: vertical-rl; flex: none; max-height: 60vh; }
.bd-gruppe.zu .bd-gruppe-menu { display: none; }
/* Ohne Maus darüber nehmen die unsichtbaren Spaltenknöpfe keinen Platz —
   sonst kürzten sie den Titel auch dann („Ange…"). */
@media (hover: hover) {
  .bd-col:not(:hover) .bd-col-btns .icon-btn:not(.an) { display: none; }
}
@media (max-width: 700px) {
  .bd-gruppe { padding: 0 4px 4px; }
  .bd-gruppe.zu { scroll-snap-align: center; }
}

/* Spalte löschen oder leeren (board.js .bd-del) */
.bd-spalte-weg p { margin: 0 0 8px; }
.bd-spalte-weg-hin { font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px) {
  .modal:has(> .modal-body > .bd-spalte-weg) > .modal-foot { flex-direction: column-reverse; }
  .modal:has(> .modal-body > .bd-spalte-weg) > .modal-foot .btn { width: 100%; min-height: 44px; }
}

/* Sprung-Leiste: nur Nummern je Spalte, Spalten einer Überkategorie als
   zusammenhängendes Segment in deren Farbe (ohne Farbe: grau). Gleiche
   Sprache wie Gruppen-Rahmen und Spaltenkopf: sanfte Tönung, runde Ecken. */
.bd-nav {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; padding: 3px 2px; margin-right: 8px;
  scroll-behavior: smooth;
}
.bd-nav::-webkit-scrollbar { display: none; }
.bd-nav:empty { display: none; }
.bd-nav-chip {
  flex: none; min-width: 26px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: var(--panel2); color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.bd-nav-chip:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.bd-nav-chip.an { background: var(--accent); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 45%, transparent); }
.bd-nav-grp {
  flex: none; display: inline-flex; gap: 1px; padding: 2px; border-radius: 9px;
  background: color-mix(in srgb, var(--bd-farbe, var(--muted)) 22%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bd-farbe, var(--muted)) 40%, transparent);
}
.bd-nav-grp .bd-nav-chip {
  background: transparent; height: 22px; min-width: 24px;
  color: color-mix(in srgb, var(--bd-farbe, var(--muted)) 55%, var(--text));
}
.bd-nav-grp .bd-nav-chip:hover { background: color-mix(in srgb, var(--bd-farbe, var(--muted)) 30%, transparent); color: var(--text); }
.bd-nav-grp .bd-nav-chip.an {
  background: var(--bd-farbe, var(--muted)); color: #fff;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--bd-farbe, var(--muted)) 50%, transparent);
}
.bd-nav-grp.zu { opacity: .6; }
/* Karte wackelt (Langdruck): Nummern sind Ziele */
.bd-nav.bd-umzug-ziel .bd-nav-chip { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text); }
.bd-nav.bd-umzug-ziel .bd-nav-grp .bd-nav-chip { box-shadow: inset 0 0 0 1.5px var(--bd-farbe, var(--accent)); }
.bd-nav.bd-umzug-ziel { animation: bd-nav-ziel 1.2s ease-in-out infinite; }
@keyframes bd-nav-ziel { 50% { opacity: .7; } }
.bd-col.bd-angesprungen, .bd-gruppe.bd-angesprungen { animation: bd-angesprungen .5s ease-out; }
@keyframes bd-angesprungen {
  0% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
.board { scroll-padding-inline: 14px; }
/* Handy: eine Zeile — Nummern links (wischbar), rechts nur noch die Symbole
   (ohne „Versionen"-Schrift); fingergroß, kostet keine zweite Zeile. */
@media (max-width: 700px) {
  .bd-bar { padding: 4px 4px 0 8px; gap: 0; }
  .bd-bar .bd-hist span { display: none; }
  .bd-nav { margin-right: 4px; gap: 6px; padding-right: 14px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
  .bd-nav-chip { min-width: 34px; height: 30px; font-size: 13px; border-radius: 8px; }
  .bd-nav-grp { border-radius: 10px; }
  .bd-nav-grp .bd-nav-chip { height: 28px; min-width: 32px; }
}

/* ===== Automation „Ablauf": Eingang → Verarbeitung → Ausgabe (board-ablauf.js) ===== */
.bd-ab-liste { display: flex; flex-direction: column; gap: 12px; }
.bd-ab { gap: 8px; }
.bd-ab-kopf .bd-ab-name { flex: 1; min-width: 0; font-weight: 600; }
.bd-ab-kopf .bd-rg-check { white-space: nowrap; }
/* Schrittleiste: 1 Datensammlung → 2 Verarbeitung → 3 Output — immer nur EIN Schritt offen */
.bd-ab-schritte { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.bd-ab-schritte li { position: relative; display: flex; }
.bd-ab-schritte li + li::before { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 2px; background: var(--line); z-index: 0; }
.bd-ab-schritte li.fertig + li::before, .bd-ab-schritte li.an::before { background: var(--accent); }
.bd-ab-schritte button {
  flex: 1; min-width: 0; margin: 0 9px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; z-index: 1;
}
.bd-ab-schritte li:first-child button { margin-left: 0; }
.bd-ab-schritte li:last-child button { margin-right: 0; }
.bd-ab-schritte button i {
  grid-row: 1 / 3; font-style: normal; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--muted); color: var(--muted); font-size: 12.5px;
}
.bd-ab-schritte button b { font-size: 13px; }
.bd-ab-sum { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-ab-schritte button:hover { border-color: var(--muted); }
.bd-ab-schritte li.an button { border-color: var(--accent); background: var(--accent-dim); }
.bd-ab-schritte li.an button i { background: var(--accent); border-color: var(--accent); color: #fff; }
.bd-ab-schritte li.fertig button i { border-color: var(--accent); color: var(--accent); }
.bd-ab-schritt { border: 1px solid var(--accent); border-radius: 10px; padding: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.bd-ab-schritt[hidden] { display: none; }
.bd-ab-frage { font-size: 14px; font-weight: 700; }
.bd-ab-frage span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.bd-ab-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.bd-ab-vor { border-color: var(--accent); font-weight: 600; }
.bd-ab-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-ab-filter[hidden], .bd-ab-zusatz[hidden] { display: none; }
.bd-ab-zusatz { display: flex; flex-direction: column; gap: 6px; }
.bd-ab-bsp { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-ab-meldung { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.bd-ab-meldung[hidden] { display: none; }
.bd-ab-daten summary { cursor: pointer; color: var(--muted); }
.bd-ab-daten pre { margin: 6px 0 0; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.4; padding: 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
.bd-ab-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bd-ab-art {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text); font: inherit; cursor: pointer;
}
.bd-ab-art .ico { width: 17px; height: 17px; color: var(--muted); }
.bd-ab-art b { font-size: 13px; }
.bd-ab-art span { font-size: 11.5px; color: var(--muted); }
.bd-ab-art:hover { border-color: var(--muted); }
.bd-ab-art.an { border-color: var(--accent); background: var(--accent-dim); }
.bd-ab-art.an .ico { color: var(--accent); }
.bd-ab-ein { display: flex; flex-direction: column; gap: 6px; }
.bd-ab-ein[hidden], .bd-ab-schritt [hidden] { display: none; }
.bd-ab-ein .bd-rg-zeile select, .bd-ab-ein .bd-ml-filter .input { flex: 1 1 200px; min-width: 0; }
.bd-ab-ein .bd-rg-zeile { flex-wrap: wrap; }
.bd-ab-zeile { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.bd-ab-zeile .input { color: var(--text); font-size: 13px; }
.bd-ab-hin { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.bd-ab-hin .ico { width: 13px; height: 13px; }
.bd-ab-ansicht { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bd-ab-ansicht button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.bd-ab-ansicht button .ico { width: 13px; height: 13px; }
.bd-ab-ansicht button.an { background: var(--accent-dim); color: var(--text); font-weight: 600; }
.bd-ab-ansicht button:disabled { opacity: .45; cursor: default; }
/* Die Vorlage sieht aus wie eine Board-Karte: Titel, Beschreibung, darunter die Merkmale. */
.bd-ab-karte {
  position: relative; max-width: 420px; width: 100%; padding: 10px 12px 10px 16px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 4px;
}
.bd-ab-karte[hidden] { display: none; }
.bd-ab-kfarbe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 8px 0 0 8px; background: var(--bd-farbe, var(--line)); }
.bd-ab-karte[class*="bd-farbe-"] { background: color-mix(in srgb, var(--bd-farbe) 11%, var(--panel2)); }
.bd-ab-fw {
  width: 100%; min-width: 0; border: 1px dashed transparent; border-radius: 5px; background: transparent; color: var(--text);
  font: inherit; font-size: 12.5px; padding: 3px 5px; resize: vertical;
}
.bd-ab-fw:hover { border-color: var(--line); }
.bd-ab-fw:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.bd-ab-fw::placeholder { color: var(--muted); opacity: .75; font-style: italic; }
.bd-ab-fw:not(:placeholder-shown) { background: var(--accent-dim); }
.bd-ab-ktitel { font-size: 14px; font-weight: 600; }
.bd-ab-kdesc { color: var(--text); }
.bd-ab-kmeta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.bd-ab-kfeld { display: grid; grid-template-columns: 16px 78px 1fr; align-items: start; gap: 6px; font-size: 11.5px; color: var(--muted); }
.bd-ab-kfeld .ico { width: 13px; height: 13px; margin-top: 6px; }
.bd-ab-kfeld > span { padding-top: 5px; }
.bd-ab-erg[hidden] { display: none; }
.bd-ab-erg .bd-ab-sim { max-width: 420px; cursor: default; content-visibility: visible; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.bd-ab-sim-todos { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.bd-ab-sim-todos div { display: flex; align-items: center; gap: 6px; }
.bd-ab-box { width: 11px; height: 11px; border: 1.5px solid var(--muted); border-radius: 3px; flex: none; }
.bd-ab-sim-komm { margin-top: 6px; display: flex; gap: 6px; font-size: 12px; padding: 5px 7px; border-radius: 6px; background: var(--panel); white-space: pre-wrap; }
.bd-ab-sim-komm .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--muted); }
.bd-ab .bd-ml-test .bd-ab-wahl, .bd-ab .bd-ml-test .bd-ab-url { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .bd-ab-arten { grid-template-columns: 1fr; }
  .bd-ab-schritt { padding: 10px; }
  .bd-ab-schritte li + li::before { display: none; }
  .bd-ab-schritte button { margin: 0 2px; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 2px; row-gap: 3px; }
  .bd-ab-schritte button i { grid-row: auto; }
  .bd-ab-schritte button b { font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .bd-ab-sum { display: none; }
  .bd-ab-filter { grid-template-columns: 1fr; }
  .bd-ab-nav .btn { flex: 1; min-height: 42px; padding: 0 6px; }
  .bd-ab-art { flex-direction: row; align-items: center; gap: 8px; }
  .bd-ab-art span { margin-left: auto; text-align: right; }
  .bd-autom .bd-ab-kopf { flex-wrap: wrap; }
  .bd-autom .bd-ab-kopf .bd-ab-name { flex: 1 1 100%; }
  .bd-autom .bd-ab-kopf .bd-rg-check { margin-right: auto; }
    .bd-ab-kfeld { grid-template-columns: 16px 1fr; }
  .bd-ab-kfeld > span { padding-top: 4px; }
  .bd-ab-kfeld .bd-ab-fw { grid-column: 1 / -1; }
  .bd-autom .bd-ab .bd-ml-test .bd-ab-wahl, .bd-autom .bd-ab .bd-ml-test .bd-ab-url { flex: 1 1 100%; }
  .bd-autom .bd-rtabs button { padding: 10px 2px; font-size: 12.5px; }
}

/* „Alle vorhandenen einfügen" (board-ablauf.js) */
.bd-ab-alle { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.bd-ab-alle[hidden], .bd-ab-fortschritt[hidden] { display: none; }
.bd-ab-alle .btn { display: inline-flex; align-items: center; gap: 5px; }
.bd-ab-fortschritt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.bd-ab-balken { height: 6px; border-radius: 3px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.bd-ab-balken i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* Links als kurzer Name (board.js linkChip, linkify.js linkName) — volle Adresse im Tooltip */
.bd-link { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; padding: 0 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); white-space: nowrap; vertical-align: baseline; }
.bd-link .ico { width: 11px; height: 11px; flex: none; }
.bd-link:hover { text-decoration: none; background: var(--accent-dim); }
.bd-ab-gelesen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); }
.bd-ab-gelesen > .ico { width: 13px; height: 13px; }
.bd-ab-gelesen .bd-link { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.bd-ab-lfehler { opacity: .5; text-decoration: line-through; }

/* Link-Vorschau (board-vorschau.js) */
.bd-lp {
  margin: 6px 0 2px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
  background: var(--panel); cursor: pointer; display: flex; flex-direction: column;
}
.bd-lp:hover { border-color: var(--accent); }
.bd-lp-img { background: var(--bg); display: flex; justify-content: center; }
.bd-lp-img img { width: 100%; max-height: 150px; object-fit: cover; display: block; pointer-events: none; }
.bd-lp.bd-lp-bild .bd-lp-img img { max-height: 260px; object-fit: contain; }
.bd-lp-text { padding: 5px 8px 6px; min-width: 0; }
.bd-lp-title {
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-lp-desc {
  font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-lp-site {
  display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-lp-site .ico { width: 11px; height: 11px; flex: none; }
.bd-lp-laedt { opacity: .6; }
.bd-lp-gross .bd-lp-img img { max-height: 280px; }
.bd-lp-gross.bd-lp-bild .bd-lp-img img { max-height: 420px; }
.bd-lp-gross .bd-lp-title { font-size: 14px; }
.bd-lp-gross .bd-lp-site { font-size: 12px; }
.bd-lp-gross { margin: 6px 0 10px; }
.bd-f-lp-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.bd-f-lp-k {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-f-lp-k .ico { width: 12px; height: 12px; flex: none; }
.bd-f-lp-k.on { border-color: var(--accent); background: var(--accent-dim); }

/* Einstiegspunkt (doc.einstieg): Spalte, die beim Einfügen vorausgewählt ist */
.bd-einstieg-mark { display: inline-flex; color: var(--accent); font-size: 12px; }
.bd-col-btns .bd-einstieg.an { color: var(--accent); }
.bd-paste-ewarn-an { color: var(--err); font-weight: 600; }