iobroker.kanban 0.3.0

package/www/css/app.css

@@ -0,0 +1,1022 @@
+/* ioBroker Kanban — Theming über CSS-Custom-Properties, data-theme am <html> */
+
+:root {
+    --accent: #7E57C2;
+    --bg: #f2f2f5;
+    --surface: #ffffff;
+    --surface2: #e9e9ee;
+    --text: #1c1c1e;
+    --muted: #71717a;
+    --border: #d4d4d8;
+    --danger: #d32f2f;
+    --warn: #ef6c00;
+    --shadow: 0 1px 3px rgba(0, 0, 0, .12);
+    --radius: 10px;
+    /* Plastik: eine Lichtquelle links oben. Aufliegende Flaechen werfen ihren
+       Schatten nach rechts unten, eingelassene sind oben links dunkel und unten
+       rechts hell. Dazu ein Hauch Verlauf von oben nach unten. */
+    --card-shadow: 2px 4px 5px rgba(0, 0, 0, .45);
+    --card-edge: inset 1px 1px 0 rgba(255, 255, 255, .06);
+    --col-emboss: inset 1px 1px 2px rgba(0, 0, 0, .40), inset -1px -1px 0 rgba(255, 255, 255, .06);
+    --avatar-shadow: 2px 4px 4px rgba(0, 0, 0, .95);
+    --chip-shadow: 1px 2px 2px rgba(0, 0, 0, .90);
+    --ui-shadow: 1px 1px 2px rgba(0, 0, 0, .85);
+    --ui-emboss: inset 1px 1px 2px rgba(0, 0, 0, .40), inset -1px -1px 0 rgba(255, 255, 255, .35);
+    --count-emboss: inset 1px 1px 2px rgba(0, 0, 0, .20), inset -1px -1px 0 rgba(255, 255, 255, .20);
+    --sheen: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .10) 100%);
+}
+
+html[data-theme="dark"] {
+    --bg: #16161a;
+    --surface: #232329;
+    --surface2: #2d2d35;
+    --text: #ececf0;
+    --muted: #9d9da8;
+    --border: #3c3c46;
+    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
+}
+
+* { box-sizing: border-box; }
+
+/* Schlanke, themenkonforme Scrollbalken */
+* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+/* Native Bedienelemente (Datums-/Zeit-Picker, Dropdowns, Scrollbars) folgen dem Theme */
+:root[data-theme="dark"] { color-scheme: dark; }
+:root[data-theme="light"] { color-scheme: light; }
+
+::-webkit-scrollbar { width: 11px; height: 11px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-corner { background: transparent; }
+
+html, body {
+    margin: 0;
+    height: 100%;
+    background: var(--bg);
+    color: var(--text);
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-size: 15px;
+}
+
+body { display: flex; flex-direction: column; }
+
+/* ------------------------------------------------------------ Kopfzeile */
+
+#topbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+}
+
+body.embed #topbar { display: none; }
+
+.spacer { flex: 1; }
+
+#boardSelect {
+    box-shadow: var(--ui-shadow);
+    font-size: 16px;
+    font-weight: 600;
+    padding: 6px 8px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    max-width: 40vw;
+}
+
+button {
+    font: inherit;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: 8px;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+
+button:hover { background: var(--surface2); }
+
+button.primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--accent-text, #fff);
+    font-weight: 600;
+}
+
+button.primary:hover { filter: brightness(1.1); background: var(--accent); }
+
+button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
+
+button.iconbtn { padding: 6px 10px; font-size: 16px; line-height: 1; }
+button.iconbtn svg { width: 18px; height: 18px; display: block; }
+button.iconbtn.active { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
+
+button.linkbtn {
+    border: none;
+    background: none;
+    color: var(--accent);
+    padding: 4px 0;
+    text-align: left;
+}
+
+/* Benutzer-Chips */
+
+#userChips { display: flex; gap: 4px; align-items: center; }
+#topbar button { box-shadow: var(--ui-shadow); }
+
+.user-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: 2px solid var(--border);
+    border-radius: 999px;
+    padding: 3px 10px 3px 4px;
+    cursor: pointer;
+    background: var(--surface);
+    user-select: none;
+    box-shadow: var(--ui-shadow);
+}
+
+/* Ausgeblendeter Benutzer: Chip wirkt eingedrueckt statt aufliegend */
+.user-chip:not(.active) { box-shadow: var(--ui-emboss); }
+
+.user-chip .avatar { width: 33px; height: 33px; font-size: 16px; }
+
+.user-chip.active { border-color: var(--uc, var(--accent)); }
+
+.avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    flex: none;
+    overflow: hidden;
+}
+img.avatar, .avatar img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; }
+
+/* Avatar-Verwaltung im Einstellungen-Dialog */
+.avatar-edit { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+.avatar-edit .avatar-prev { width: 32px; height: 32px; font-size: 13px; }
+.avatar-edit .avatar-name { flex: 1; font-size: 14px; }
+
+/* ------------------------------------------------------------ Board */
+
+#board {
+    flex: 1;
+    display: flex;
+    gap: 12px;
+    padding: 12px;
+    overflow-x: auto;
+    align-items: flex-start;
+}
+
+.empty { color: var(--muted); padding: 24px; }
+
+.column {
+    background: var(--surface2);
+    background-image: var(--sheen);
+    box-shadow: var(--col-emboss);
+    border-radius: var(--radius);
+    min-width: 280px;
+    flex: 1 1 280px;   /* teilt die Bildschirmbreite unter allen Spalten auf; erst
+                          wenn 280px je Spalte nicht mehr passen, wird gescrollt */
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.column-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px 6px;
+    font-weight: 700;
+}
+
+/* Das erste Icon im Spaltenkopf schiebt sich samt aller folgenden nach rechts;
+   die weiteren Icons stehen dann dicht daneben (sonst wuerde der freie Platz
+   mehrfach verteilt und z. B. das Auge landete in der Kopfmitte). */
+.column-head > button:first-of-type { margin-left: auto; }
+
+.column-head .count {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+    background: var(--surface);
+    border-radius: 999px;
+    padding: 1px 8px;
+    box-shadow: var(--count-emboss);
+}
+
+.column.over-wip .column-head, .column.over-wip .count { color: var(--danger); }
+
+.cards {
+    padding: 4px 8px 8px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 24px;
+}
+
+.column-foot { padding: 0 8px 10px; }
+/* Karte anlegen: derselbe Stil wie "+ Karte" in der Kopfzeile, nur mit Plus.
+   Haengt in der Kartenliste (gleiche Breite wie die Karten) und bleibt beim
+   Scrollen unten sichtbar. */
+.add-card-btn {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25%;
+    margin: 0 auto;
+    padding: 5px 0;
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    background: var(--accent);
+    color: var(--accent-text, #fff);
+    box-shadow: var(--card-shadow);
+}
+.add-card-btn:hover { filter: brightness(1.1); background: var(--accent); }
+.add-card-btn svg { width: 18px; height: 18px; display: block; }
+
+.card {
+    position: relative;
+    background: var(--surface);
+    background-image: var(--sheen);
+    border-radius: 8px;
+    box-shadow: var(--card-shadow), var(--card-edge);
+    padding: 8px 10px;
+    cursor: grab;
+    -webkit-tap-highlight-color: transparent;
+    /* Beruehrung, die auf einer Karte beginnt, darf nur senkrecht scrollen.
+       Ohne diese Angabe uebernimmt der Browser eine Seitwaertsbewegung als
+       waagerechtes Scrollen von #board, bricht den laufenden Zug ab und die
+       Karte springt zurueck — auf dem Tablet liess sich deshalb nichts in eine
+       andere Spalte ziehen. Senkrechtes Scrollen der Spalte bleibt erhalten. */
+    touch-action: pan-y;
+    /* Ziehen heisst auf dem Touchscreen: aufliegen und halten. Genau das ist
+       fuer den Browser auch ein langer Druck — nach etwa einer Sekunde beginnt
+       er, Text zu markieren bzw. das Kontextmenue zu oeffnen, schickt
+       touchcancel und der Zug bricht ab. Die Karte fiel dadurch mitten in der
+       Bewegung zurueck. Markieren wird hier nicht gebraucht: Text bearbeitet
+       man im Karten-Dialog, und der ist davon nicht betroffen. */
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+/* touch-action vererbt sich nicht: Der Finger liegt beim Ziehen meist auf einem
+   Kind der Karte (Titel, Badge, Symbol), nicht auf der Karte selbst. Ohne diese
+   Zeile gilt dort wieder die Voreinstellung. Symbole ausserdem nicht als Bild
+   behandeln, damit die WebView beim langen Druck nicht ihr Bildmenue anbietet. */
+.card * {
+    touch-action: pan-y;
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
+}
+
+/* Farbstreifen links - unabhaengig vom Kartenrahmen (nutzt --card-color) */
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0; bottom: 0; left: 0;
+    width: 4px;
+    background: var(--card-color, transparent);
+    border-radius: 8px 0 0 8px;
+    pointer-events: none;
+}
+
+/* Kartenfuss: Checklisten-Zaehler links, Aufklapp-Chevron mittig, Icons fuer
+   Beschreibung, Link und Wiederholung rechts. Nur der Chevron darf tiefer
+   ruecken, Zaehler und Icons halten den normalen Abstand zum Kartenrand. */
+.card-foot {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    /* seitlich und unten buendig wie alle anderen Zeilen; nur der Chevron
+       darf tiefer ruecken (siehe unten) */
+    margin: 8px 0 0;
+}
+/* Die Icon-Flaechen sind groesser als die Symbole darin. Der negative Rand
+   schiebt die Flaeche so weit nach aussen, dass die Symbole selbst mit der
+   rechten Textkante fluchten. */
+.card-foot-icons { margin-right: -4px; }
+/* Ohne Checkliste haengen die Icons rechtsbuendig in der letzten Chip-Zeile */
+.card-foot-icons.inline-icons { margin-left: auto; }
+.card-foot .check-count { justify-self: start; }
+.card-foot .card-check-toggle { grid-column: 2; justify-self: center; align-self: end; margin-bottom: -8px; }
+/* z-index: die vergroesserte Trefferflaeche des Chevrons (::after) reicht seitlich
+   in diese Spalte hinein und darf die Icons nicht ueberdecken. */
+.card-foot-icons { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 3px; position: relative; z-index: 2; }
+/* Icon-Badges ohne Text: quadratische Flaeche statt liegender Pille */
+.card-foot-icons .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+}
+.card-foot-icons .badge svg { width: 15px; height: 15px; vertical-align: 0; }
+/* Icons im Kartenfuss und der Checklisten-Zaehler brauchen keine eigene Flaeche;
+   im dunklen Theme wirkt sie wie eine Umrandung um das Symbol. */
+.card .card-foot-icons .badge, .card .check-count { background: none; }
+.card-desc-btn { cursor: pointer; }
+.card-desc-btn:hover { color: var(--accent); }
+
+/* Checklisten-Aufklappbutton (Chevron): flache, breite Leiste. Das Icon behaelt
+   seine Groesse und ragt dank overflow:visible ueber die Buttonhoehe hinaus. */
+.card-check-toggle {
+    position: relative;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    padding: 0;
+    width: 90px;
+    height: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    font-size: 18px;
+    line-height: 0;
+    color: var(--muted);
+    cursor: pointer;
+    opacity: 0.8;
+}
+/* Treffer- und Hoverflaeche deutlich groesser als der Button selbst: seitlich je
+   25 px, nach oben 8 px. Das laeuft ueber ein absolut positioniertes ::after, damit
+   weder das Grid der Fusszeile noch die Lage des Chevrons sich veraendern. */
+.card-check-toggle::after {
+    content: '';
+    position: absolute;
+    left: -25px;
+    right: -25px;
+    top: -8px;
+    bottom: 0;
+    border-radius: 5px;
+}
+.card-check-toggle svg { position: relative; z-index: 1; }   /* Chevron ueber der Hoverflaeche */
+.card-check-toggle:hover { opacity: 1; color: var(--accent); }
+.card-check-toggle:hover::after { background: var(--surface2); }
+
+/* Ausgeklappte Checkliste, ueber der Fusszeile */
+.card-checklist { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
+.card-checklist[hidden] { display: none; }   /* [hidden] muss das display:flex schlagen */
+.card-check-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    padding: 1px 0;
+}
+.card-check-item input { flex: none; }
+.card-check-item.done .card-check-text { text-decoration: line-through; color: var(--muted); }
+
+.card.dragging, .sortable-ghost { opacity: .5; }
+/* Aufgenommene Karte: doppelter Versatz und Radius, deutlich dunkler */
+.card.sortable-chosen, .card.sortable-drag { box-shadow: 4px 8px 10px rgba(0, 0, 0, .70), var(--card-edge); }
+
+.card .title { font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: baseline; gap: 5px; line-height: 1.3; }
+/* Die Titelhoehe wird je Spalte angeglichen (siehe alignCardTitles in board.js):
+   alle Karten einer Spalte bekommen die Hoehe des laengsten Titels, damit
+   Prioritaet, Faelligkeit und Ort auf gleicher Hoehe beginnen, ohne dass bei
+   lauter einzeiligen Titeln eine leere Zeile entsteht. */
+
+.card .badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    margin-top: 6px;
+}
+/* Labels beginnen immer in einer eigenen Zeile unter Prioritaet, Faelligkeit und Ort */
+.card .labels-row { margin-top: 6px; }
+
+.badge {
+    font-size: 12px;
+    border-radius: 6px;
+    padding: 1px 6px;
+    background: var(--surface2);
+    color: var(--muted);
+    white-space: nowrap;
+}
+
+.card .badges > .badge, .card .badges > .label-pill { box-shadow: var(--chip-shadow); }
+.badge svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
+.card-check-toggle svg { width: 14px; height: 14px; }
+.col-chevron svg { width: 13px; height: 13px; vertical-align: -2px; }
+.badge.date-badge { color: var(--text); font-weight: 500; }
+.badge.due-overdue { background: var(--danger); color: #fff; }
+/* Link-Symbol sieht aus wie die anderen Icons im Kartenfuss: keine Umrandung,
+   gleiche Flaeche und Farbe, beim Zeigen die Akzentfarbe */
+a.link-badge {
+    text-decoration: none;
+    cursor: pointer;
+    border: none;
+    background: var(--surface2);
+    color: var(--muted);
+}
+a.link-badge:hover { color: var(--accent, #7E57C2); }
+.badge.due-soon { background: var(--warn); color: #fff; }
+.badge.due-done { background: #2e7d32; color: #fff; }   /* erledigt → grün */
+.badge.prio-1 { background: var(--warn); color: #fff; font-weight: 700; }
+.badge.prio-2 { background: var(--danger); color: #fff; font-weight: 700; }
+
+.label-pill {
+    font-size: 11px;
+    border-radius: 999px;
+    padding: 1px 8px;
+    color: #fff;
+    font-weight: 600;
+}
+
+.card .avatars { display: inline-flex; margin-left: auto; }
+.card .avatars .avatar { width: 30px; height: 30px; font-size: 15px; font-weight: 500; margin-left: -3px; box-shadow: 0 0 0 2px var(--uc, var(--surface)), var(--avatar-shadow); }
+
+/* Zustaendige oben rechts im Titel, der Titeltext umfliesst sie. Eng gestapelt;
+   Hover oder Klick faechert sie nach links auf. Bewegt wird nur per transform,
+   damit sich der umflossene Bereich und der Zeilenumbruch nicht aendern. */
+.card.has-avatars .title { display: block; }
+.card.has-avatars .title .title-text { display: inline; }
+.card.has-avatars .title .avatars { float: right; margin: 0 -2px 6px 6px; position: relative; z-index: 3; }   /* -2px: rechts derselbe Abstand zum Kartenrand wie oben (8px) */
+.card.has-avatars .badges, .card.has-avatars .done-stamp { clear: right; }
+.card .title .avatars .avatar { margin-left: -14px; transition: transform .18s ease; }
+.card .title .avatars .avatar:first-child { margin-left: 0; }
+.card .title .avatars.open { z-index: 6; }
+.card .title .avatars.open .avatar { transform: translateX(calc((var(--n) - 1 - var(--i)) * -11px)); }
+
+/* Beschreibung nur lesend (Klick auf das Notiz-Icon der Karte) */
+#descDialog .desc-title { margin: 0 0 10px; font-size: 15px; }
+#descDialog .desc-body { max-height: 60vh; overflow: auto; }
+#descDialog .desc-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
+
+/* ------------------------------------------------------------ Dialoge */
+
+dialog {
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
+    padding: 18px;
+    /* auf großen Bildschirmen 60vw, aber nie zu schmal/überbreit */
+    width: min(calc(100vw - 32px), max(600px, 60vw));
+    max-height: calc(100vh - 48px);
+}
+
+dialog::backdrop { background: rgba(0, 0, 0, .45); }
+
+dialog h3 { margin: 0 0 12px; }
+
+dialog form { display: flex; flex-direction: column; gap: 10px; }
+
+dialog label { display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
+/* [hidden] muss das display:flex der Labels schlagen, sonst bleiben nicht
+   relevante Wiederholungs-Felder sichtbar */
+dialog [hidden] { display: none !important; }
+/* Inline-Label (z.B. Checkbox + Text nebeneinander statt gestapelt) */
+dialog label.inline { flex-direction: row; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; font-weight: 400; color: var(--muted); }
+dialog button { font-size: 13px; }
+#shareBody { display: flex; flex-direction: column; gap: 10px; }
+#checklistEdit:empty { display: none; }
+
+/* Ansicht-teilen: URL-Feld + Kopieren nebeneinander */
+.share-url { display: flex; gap: 8px; align-items: stretch; }
+.share-url-input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
+.share-url button { flex: 0 0 auto; }
+.share-cols { display: flex; flex-wrap: wrap; gap: 6px 14px; }
+.board-members { margin: 4px 0 12px; }
+.board-members-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
+.share-cols label.inline { font-size: 13px; }
+
+dialog input, dialog textarea, dialog select {
+    font: inherit;
+    color: var(--text);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 7px 9px;
+}
+
+dialog input:focus, dialog textarea:focus, dialog select:focus { outline: 2px solid var(--accent); border-color: transparent; }
+
+dialog .row { display: flex; gap: 10px; flex-wrap: wrap; }
+
+dialog footer { display: flex; gap: 8px; margin-top: 8px; }
+/* Beschriftungen werden bei wenig Platz mit … gekuerzt statt umzubrechen */
+dialog footer > button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.hint { font-weight: 400; color: var(--muted); font-size: 13px; }
+
+.chip-pick { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.pick-chip {
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 3px 10px;
+    cursor: pointer;
+    font-size: 13px;
+    user-select: none;
+    background: var(--bg);
+}
+
+.pick-chip.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
+.req-star { color: var(--danger); margin-left: 2px; font-weight: 700; }
+.req-cap { display: inline-flex; align-items: baseline; align-self: flex-start; }
+.req-legend { color: var(--danger); font-size: 10px; margin: 6px 0 0; }
+.req-proxy { display: block; width: 100%; height: 1px; margin: -1px 0 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
+
+.color-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+
+.color-swatch {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid transparent;
+}
+
+.color-swatch.selected { border-color: var(--text); }
+.color-swatch.none { background: var(--surface2); position: relative; }
+.color-swatch.none::after { content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
+
+/* Freie Farbwahl: Swatch mit Regenbogen (öffnet den eigenen Colorpicker) */
+.color-swatch.custom {
+    background: conic-gradient(red, #ff0, lime, cyan, blue, magenta, red);
+    cursor: pointer;
+}
+
+/* Klickbarer Farb-Swatch (Labels) – öffnet den Colorpicker */
+.cp-trigger {
+    width: 26px;
+    height: 26px;
+    min-width: 26px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+}
+.cp-trigger.empty { background: conic-gradient(red, #ff0, lime, cyan, blue, magenta, red); }
+
+/* ---- Eingebetteter Colorpicker (colorpicker.js) ---- */
+.cp-pop {
+    position: fixed;
+    z-index: 1000;
+    width: 220px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    touch-action: none;
+}
+.cp-sv {
+    position: relative;
+    width: 100%;
+    height: 130px;
+    border-radius: 6px;
+    cursor: crosshair;
+    touch-action: none;
+}
+.cp-hue {
+    position: relative;
+    width: 100%;
+    height: 14px;
+    border-radius: 7px;
+    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+    cursor: pointer;
+    touch-action: none;
+}
+.cp-cursor {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+.cp-hue-cursor {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 20px;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+.cp-row { display: flex; align-items: center; gap: 8px; }
+.cp-preview { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); flex: none; }
+.cp-hex { flex: 1; text-transform: uppercase; }
+.cp-presets { display: flex; flex-wrap: wrap; gap: 5px; }
+.cp-swatch {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid var(--border);
+}
+.cp-swatch.none { position: relative; background: var(--surface2); }
+.cp-swatch.none::after { content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
+
+#checklistEdit { display: flex; flex-direction: column; gap: 4px; }
+
+.check-item { display: flex; gap: 6px; align-items: center; }
+.check-item input[type="text"] { flex: 1; }
+.check-item .rm { border: none; background: none; color: var(--muted); font-size: 16px; padding: 2px 6px; }
+/* Anfasser zum Umsortieren – erst ab zwei Punkten sichtbar, Platz bleibt reserviert */
+.check-item .ck-grip { display: flex; align-items: center; color: var(--muted); cursor: grab; opacity: 0; pointer-events: none; }
+#checklistEdit.multi .check-item .ck-grip { opacity: 0.75; pointer-events: auto; }
+.check-item .ck-grip:hover { opacity: 1; color: var(--accent); }
+.check-item .ck-grip:active { cursor: grabbing; }
+.check-item .ck-grip svg { display: block; }
+.check-item.ck-ghost { opacity: 0.4; }
+
+.md-preview {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 10px;
+    font-size: 14px;
+}
+
+.md-preview p { margin: 4px 0; }
+
+/* Board-Verwaltung */
+
+#boardDialogBody { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 84px); }
+
+/* Tab-Layout im Einstellungen-Dialog: Kopf + Tabs fest, Inhalt scrollt, Footer fest */
+.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex: none; }
+.tab-btn {
+    background: none;
+    border: none;
+    border-radius: 0;
+    border-bottom: 2px solid transparent;
+    padding: 8px 14px;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 14px;
+}
+.tab-btn:hover { background: none; color: var(--text); }
+.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
+.tab-panels { height: 380px; max-height: calc(100vh - 210px); overflow-y: auto; padding-right: 4px; }
+.tab-panel { display: flex; flex-direction: column; gap: 10px; }
+#boardDialogBody > footer { flex: none; border-top: 1px solid var(--border); padding-top: 10px; }
+
+.col-edit {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 6px;
+}
+
+.col-edit .drag { cursor: grab; color: var(--muted); flex: 0 0 18px; text-align: center; padding: 0; }
+.col-edit input[type="text"] { flex: 1; min-width: 80px; }
+.col-edit input[type="number"] { flex: 0 0 60px; width: 60px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
+.col-edit input[type="number"]::-webkit-outer-spin-button,
+.col-edit input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.col-edit .col-chk { display: flex; justify-content: center; align-items: center; margin: 0; }
+.col-edit .col-chk.c-new { flex: 0 0 58px; }
+.col-edit .col-chk.c-done { flex: 0 0 76px; }
+.col-edit .rm { flex: 0 0 30px; width: 30px; padding: 2px 0; }
+.col-head { display: flex; gap: 6px; align-items: flex-end; padding: 0 7px 4px; margin-bottom: -6px; font-size: 12px; font-weight: 600; color: var(--muted); }
+.col-head .h-drag { flex: 0 0 18px; }
+.col-head .h-name { flex: 1; min-width: 80px; }
+.col-head .h-num { flex: 0 0 60px; text-align: center; }
+.col-head .h-new { flex: 0 0 58px; text-align: center; }
+.col-head .h-done { flex: 0 0 76px; text-align: center; }
+.col-head .h-rm { flex: 0 0 30px; }
+.col-head span[title] { cursor: help; }
+.col-more { font-size: 12px; color: var(--muted); padding: 4px 2px 2px; }
+
+/* Label-Verwaltung (Board-Einstellungen) */
+.label-edit {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 6px;
+}
+.label-edit input[type="text"] { flex: 1; min-width: 80px; }
+
+/* nativer Colorpicker – kompakt und konsistent */
+input[type="color"] {
+    width: 34px;
+    min-width: 34px;
+    height: 30px;
+    padding: 2px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    cursor: pointer;
+}
+
+/* Inline-Label-Anlegen im Karten-Dialog */
+.label-new {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 2px 4px;
+}
+.label-new input[type="text"] { width: 120px; padding: 2px 6px; font-size: 13px; }
+.label-new input[type="color"] { width: 28px; min-width: 28px; height: 24px; }
+button.mini {
+    padding: 2px 8px;
+    font-size: 14px;
+    line-height: 1;
+    border-radius: 6px;
+}
+
+/* ------------------------------------------------------------ Mobil */
+
+@media (max-width: 600px) {
+    /* Spalten untereinander statt nebeneinander (Akkordeon) */
+    #board { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
+    .column { min-width: 0; width: 100%; max-width: none; flex: none; max-height: none; }
+    .cards { overflow-y: visible; }
+    .column-head { cursor: pointer; user-select: none; }
+    .column.collapsed .cards, .column.collapsed .column-foot { display: none; }
+    html, body { overflow-x: hidden; max-width: 100%; }
+    #boardSelect { max-width: 40vw; }
+    /* Benutzer-Chips umbrechen statt horizontal ueberlaufen */
+    #userChips { flex-wrap: wrap; }
+
+    /* Dialoge vollfl\u00e4chig, Felder gestapelt, Footer sticky */
+    /* Dialoge als bodennahes Vollflaechen-Sheet: volle Breite, Hoehe = Inhalt (max. Schirm),
+       nur der Inhalt scrollt, Footer klebt unten, Buttons gleich gross nebeneinander */
+    dialog[open] {
+        width: 100%; max-width: 100%;
+        height: 100dvh; max-height: 100dvh;           /* immer gleiche, volle Hoehe */
+        margin: 0; inset: 0;
+        padding: 0; border: none; border-radius: 0;
+        display: flex; flex-direction: column;
+        overflow: hidden;                             /* nichts ragt seitlich heraus */
+    }
+    #cardForm, #boardDialogBody, #shareBody {
+        margin: 0; padding: 14px 12px 0;
+        display: flex; flex-direction: column;
+        overflow-y: auto; -webkit-overflow-scrolling: touch;
+        min-height: 0; flex: 1 1 auto; max-height: none;
+    }
+    dialog .row { flex-direction: column; }
+    .share-url { flex-direction: column; }
+    .tab-panels { height: auto; max-height: none; overflow: visible; }
+    .tabbar { position: sticky; top: 0; background: var(--surface); z-index: 3; }
+
+    /* Footer klebt unten, volle Breite, gleich grosse Buttons nebeneinander */
+    dialog footer {
+        position: sticky; bottom: 0; z-index: 2;
+        margin: auto -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+        background: var(--surface); border-top: 1px solid var(--border);
+        display: flex; gap: 8px; flex-wrap: nowrap;
+    }
+    dialog footer .spacer { display: none; }          /* kein Auseinanderdruecken auf Mobil */
+    dialog footer > button { flex: 1 1 0; min-width: 0; }
+
+    .col-chevron { display: inline !important; }      /* schlaegt die spaetere Basisregel */
+}
+
+/* Einklapp-Chevron im Spaltenkopf – nur auf schmalen Screens sichtbar */
+.col-chevron { display: none; font-size: 12px; color: var(--muted); }
+
+/* Hervorgehobene Karte (Benachrichtigungs-Link-Ziel \u201eBoard\u201c) */
+.card-focus { outline: 2px solid var(--accent); }
+.card-focus { animation: card-pulse 1s ease-in-out 2; }
+@keyframes card-pulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 4px var(--accent); } }
+
+.col-toggle {
+    background: none;
+    border: none;
+    padding: 0 2px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0.85;
+    /* wie die Sortier-Icons daneben, nicht in der Textfarbe der Ueberschrift */
+    color: var(--muted);
+}
+.col-toggle:hover { background: none; opacity: 1; color: var(--accent); }
+.col-toggle.off { opacity: 0.55; }
+.col-toggle svg { display: block; }
+
+/* Schnellablage-Ziele beim Ziehen einer Karte (unter der aufgenommenen Karte) */
+/* Leiste quer ueber die volle Breite statt einer Spalte am rechten Rand: Dort
+   war der Weg vom aufgenommenen Kaertchen im ungenstigsten Fall die gesamte
+   Bildschirmbreite. Waagerecht verteilt liegt jedes Ziel hoechstens eine halbe
+   Breite entfernt, und die Reihenfolge entspricht der der Spalten. */
+.quick-move {
+    position: fixed;
+    z-index: 900;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+    pointer-events: none;   /* die Leiste selbst fängt keine Klicks, nur die Zonen */
+}
+.quick-target {
+    pointer-events: auto;
+    position: relative;
+    flex: 1 1 110px;
+    max-width: 220px;
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 10px;
+    border: 2px dashed var(--accent);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    font-weight: 600;
+    font-size: 13px;
+    box-shadow: var(--shadow);
+    opacity: 0.96;
+}
+.quick-label {
+    position: absolute;
+    inset: 0;
+    z-index: 1;            /* bleibt ueber der hineingezogenen Karte lesbar */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10px;
+    text-align: center;
+    pointer-events: none;
+}
+/* Die hineingezogene Karte tritt zurueck und wird flach gehalten, behaelt aber
+   ihre Box: SortableJS misst sie, ohne Geometrie faellt die Zone als Ziel aus. */
+/* Falls SortableJS doch eine Karte in die Zone legt: flach und zurueckhaltend */
+.quick-target > .card { opacity: 0.2; max-height: 36px; overflow: hidden; pointer-events: none; }
+
+.quick-target.sortable-over,
+.quick-target:hover {
+    background: var(--accent);
+    color: #fff;
+    border-style: solid;
+}
+.quick-target.quick-trash { border-color: var(--muted); }
+
+/* ---- 0.3.0: Sortier-Umschalter je Spalte (Feature 1) ---- */
+.col-sort {
+    background: none;
+    border: none;
+    padding: 0 2px;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0.85;
+    /* bewusst nicht 'inherit': sonst faerbt die WIP-Warnfarbe der Spalte die Icons rot */
+    color: var(--muted);
+}
+.col-sort:hover { opacity: 1; color: var(--accent); }
+.col-sort svg { display: block; }
+/* Auge und Sortier-Icons stehen im selben Raster wie der Rest des Kopfes (gap) */
+.col-sort + .col-sort { margin-left: 6px; }
+/* Richtungspfeil gehoert optisch zum Sortier-Button: eng zusammen */
+.col-sort-dir { padding-right: 0; }
+.col-sort-dir + .col-sort { margin-left: -3px; padding-left: 0; }
+/* Auge in Erledigt-Spalten ebenfalls von der WIP-Warnfarbe entkoppeln */
+.column.over-wip .column-head .col-toggle { color: var(--muted); }
+
+.sort-menu {
+    position: fixed;
+    z-index: 1000;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    min-width: 160px;
+}
+.sort-menu-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+    padding: 6px 10px 4px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 4px;
+}
+.sort-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    text-align: left;
+    padding: 7px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--text);
+    font-size: 13px;
+}
+.sort-item:hover { background: var(--bg); }
+.sort-item.active { color: var(--accent); }
+.sort-item svg { display: block; }
+
+/* ---- 0.3.0: Grid-Sortiermodus - Anfasser links an der Karte ---- */
+.card.has-grip { padding-left: 28px; }
+.card-grip {
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    color: var(--muted);
+    cursor: grab;
+    opacity: 0.75;
+}
+.card-grip:hover { opacity: 1; color: var(--accent); }
+.card-grip:active { cursor: grabbing; }
+
+/* ---- 0.3.0: erledigte Karten (Feature 3+4) ---- */
+/* Erledigte Karten treten zurueck: gedaempfter Titel (hell -> heller, dunkel -> dunkler) */
+.card .title.title-done .title-text { text-decoration: line-through; color: var(--muted); }
+.card .done-stamp { font-size: 13px; font-weight: 400; color: var(--muted); margin: 2px 0 0; }
+.card-action { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; opacity: 0.8; }
+.card-action:hover { opacity: 1; color: var(--accent); }
+.card-action svg { display: block; }
+/* Kopier-Icon sitzt direkt hinter dem Kartentitel */
+.card-copy { flex: 0 0 auto; padding: 0; line-height: 1; align-self: center; margin-left: 5px; }
+.card-copy svg { width: 15px; height: 15px; }
+/* Editor-Icon direkt hinter dem Titelende - nur hierueber oeffnet sich der Editor */
+.card-edit { flex: 0 0 auto; padding: 0; line-height: 1; align-self: center; margin-left: 5px; }
+.card-edit svg { width: 16px; height: 16px; }
+
+/* ---- 0.3.0: Papierkorb-Spalte (Feature 5), feste graue Optik ---- */
+.column.trash-col { --trash-bg: #56565e; --trash-card: #676770; --trash-fg: #f0f0f3; background: var(--trash-bg); }
+[data-theme="dark"] .column.trash-col { --trash-bg: #43434b; --trash-card: #53535c; --trash-fg: #e8e8ee; }
+.column.trash-col .column-head, .column.trash-col .col-toggle { color: var(--trash-fg); }
+.column.trash-col .column-head .count { color: var(--trash-fg); background: rgba(255, 255, 255, 0.16); }
+.card.card-trash { background: var(--trash-card); color: var(--trash-fg); border-color: rgba(0, 0, 0, 0.18); }
+.card.card-trash .title { color: var(--trash-fg); }
+.card.card-trash .trash-info { font-size: 12px; margin-top: 4px; color: var(--trash-fg); opacity: 0.85; }
+.card.card-trash .trash-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
+.card.card-trash .card-action { color: var(--trash-fg); }
+.card.card-trash .card-action:hover { color: var(--accent); }
+
+/* ---- 0.3.0: gepaarte Editor-Felder (Feature 62) ---- */
+dialog .row .field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+dialog .icon-btn { padding: 5px 8px; line-height: 1; }
+dialog .icon-btn svg { display: block; }
+dialog label.inline-num { flex-direction: row; align-items: center; gap: 6px; }
+dialog label.inline-num input { width: 80px; }
+
+/* ---- 0.3.0: Übertragen-Dialog (Feature 6) ---- */
+.transfer-mode { display: flex; gap: 8px; }
+.transfer-mode-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.transfer-mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
+dialog button:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.6); }
+.transfer-note { font-size: 12px; color: var(--muted); background: var(--surface2); border-radius: 6px; padding: 8px 10px; }
+
+/* ---- 0.3.0: Kopfzeile der Board-Einstellungen (Feature 64) ---- */
+.board-toprow { align-items: center; gap: 8px; flex-wrap: wrap; }
+.board-toprow select { flex: 1 1 140px; min-width: 0; }
+.board-toprow .board-new-name { flex: 1 1 140px; min-width: 0; }
+.board-toprow .icon-btn { flex: 0 0 auto; }
+.board-toprow .icon-btn:disabled { opacity: 0.4; cursor: default; }
+@media (max-width: 600px) {
+    .board-toprow { flex-direction: row; }
+}
+
+/* Cron-Wiederholung: Klartext, naechste Termine, Fehlermeldung */
+.rec-cron-info { margin: 4px 0 2px; font-size: 12px; line-height: 1.5; }
+.rec-cron-info .cron-good { color: var(--accent); font-weight: 600; }
+.rec-cron-info .cron-next { color: var(--muted); }
+.rec-cron-info .cron-bad { color: var(--danger, #d32f2f); }
+input[name="recCron"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }