/* Issue #12: Farben kommen ausschließlich aus den Theme-Tokens (vorher Tailwind-Rohwerte
   #6b7280/#2563eb/#eab308/…, die im Dark-Theme neben der Palette standen). */
/* ================= TO-DO-APP (Kap. 227) =================
   Optik nach dem Haus-Standard: weiße Karten, 1px-Kanten, EIN kräftiger Akzent
   (Modulfarbe --todo für To Do), Farbe nur als Signal — keine Vollflächen-Tönung.
   Layout wie Mail/Kalender: Ribbon oben, Sidebar links, Liste, Detail rechts. */

/* ---- Ribbon ----
   KEINE eigenen Regel nötig: `.td-ribbonbar` ist jetzt in den Sammelregeln von
   ui-2026.css mitgeführt (neben mail-/cal-/ct-ribbonbar), außerdem
   `body[data-mod="todo"] {--mod:var(--todo)}` für die farbige Registerkante.
   User-Hinweis Kap. 228: „die ribbon leiste oben folgt nicht dem schema" — genau
   das war die Ursache (die Klasse fehlte in der maßgeblichen Datei). */
.td-ribbonbar.rb-collapsed .mrb-panels{display:none}
.td-app{display:grid;grid-template-columns:minmax(180px,250px) 5px minmax(220px,320px) minmax(0,1fr);
        background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
        box-shadow:var(--shadow);overflow:hidden;height:var(--app-h,calc(100vh - 175px));min-height:420px;margin-top:10px;
        position:relative}
/* ---- Kanban: Board braucht die VOLLE Breite (User-Befund) ----
   Das Board liegt in der Listenspalte (#tdListe) und war dort auf max. 320px
   begrenzt — dadurch schnitt das Detailpane die Spalten ab. Im Kanban-Modus
   bekommt das Board deshalb alles rechts der Sidebar (Spalte 3 = 1fr, Spalte 4
   = 0), und das Detail erscheint als Slide-over über der rechten Kante, wenn
   eine Karte gewählt ist. (Spaltenzahl bleibt 4 = Kinderzahl, sonst rutscht ein
   Kind in eine neue Zeile — genau dieser Fehler war schon einmal drin.) */
.td-app.td-kanban{grid-template-columns:minmax(180px,250px) 5px minmax(0,1fr) 0px}
.td-app.td-kanban .td-detail{display:none}
.td-app.td-kanban .td-listbar{max-width:none}
.td-app.td-kanban.td-detail-offen .td-detail{
  display:flex;position:absolute;top:0;right:0;bottom:0;width:min(430px,46%);z-index:var(--z-base-6);
  background:var(--card);border-left:1px solid var(--border);
  box-shadow:-10px 0 28px rgba(15,20,30,.14)}
.td-detail-schliessen{margin-left:auto;border:1px solid var(--border);background:var(--card);
  color:var(--text2);border-radius:var(--radius);width:26px;height:26px;cursor:pointer;
  display:none;align-items:center;justify-content:center;flex:none}
.td-app.td-kanban.td-detail-offen .td-detail-schliessen{display:inline-flex}
.td-detail-schliessen:hover{border-color:var(--danger);color:var(--danger)}
.td-side{display:flex;flex-direction:column;min-height:0;background:color-mix(in srgb,var(--todo) 3%,var(--card))}
.td-col-resize{cursor:col-resize;background:var(--border);opacity:.5}
.td-col-resize:hover{background:var(--todo);opacity:1}
.td-list-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.td-detail{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--card);
           border-left:1px solid var(--border)}

/* ---- Sidebar ---- */
.td-new{margin:10px 10px 6px;padding:9px 12px;border:0;border-radius:var(--radius);
        background:var(--todo);color:#fff;font-weight:600;font-size:13px;cursor:pointer;
        display:flex;align-items:center;gap:7px;justify-content:center}
.td-new:hover{filter:brightness(1.08)}
.td-search{display:flex;align-items:center;gap:6px;margin:4px 10px 8px;padding:6px 8px;
           border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2)}
.td-search input{border:0;background:none;outline:none;width:100%;font:inherit;font-size:12.5px;color:var(--text)}
.td-side-h{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text2);
           font-weight:700;padding:10px 12px 4px}
.td-side-h::before{content:"";display:inline-block;width:3px;height:10px;margin-right:6px;
                   vertical-align:-1px;background:var(--todo);border-radius:2px}
.td-p{display:flex;align-items:center;gap:8px;width:calc(100% - 12px);margin:1px 6px;
      padding:6px 8px;border:0;border-left:3px solid transparent;border-radius:var(--radius);
      background:none;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.td-p:hover{background:color-mix(in srgb,var(--todo) 8%,transparent)}
.td-p.active{background:color-mix(in srgb,var(--todo) 13%,transparent);
             border-left-color:var(--todo);font-weight:600}
.td-p.warn{color:var(--danger)}
.td-p.warn .td-cnt{background:var(--danger);color:#fff}
.td-p span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-cnt{font-size:11px;padding:1px 6px;border-radius:9px;background:var(--bg2);color:var(--text2)}
.td-leer{padding:8px 12px;font-size:12px;color:var(--text2)}
.td-sum{margin-top:auto;border-top:1px solid var(--border);padding:10px 12px;font-size:12px;
        display:flex;flex-direction:column;gap:3px;color:var(--text2)}
.td-sum b{color:var(--text);font-size:14px}
.td-sum .warn b{color:var(--danger)}
.td-sum .ok b{color:var(--ok)}

/* ---- Liste ---- */
.td-listbar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border)}
.td-lb-titel{flex:1;font-weight:600;font-size:13.5px}
.td-list{overflow-y:auto;flex:1;min-height:0}
.td-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer;
        border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.td-row:hover{background:color-mix(in srgb,var(--todo) 5%,transparent)}
.td-row.sel{background:color-mix(in srgb,var(--todo) 11%,transparent);
            box-shadow:inset 3px 0 0 var(--todo)}
.td-row.done .td-row-t{text-decoration:line-through;color:var(--text2)}
.td-cb{width:16px;height:16px;margin-top:2px;accent-color:var(--todo);cursor:pointer;flex:none}
.td-row-m{min-width:0;flex:1}
.td-row-t{font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.td-row-s{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:3px;font-size:11.5px;color:var(--text2)}
.td-kennung{font-family:ui-monospace,Menlo,monospace;opacity:.75}
.td-datum{display:inline-flex;align-items:center;gap:3px}
.td-datum.ueber{color:var(--danger);font-weight:600}
.td-pri{font-size:10.5px;padding:1px 7px;border-radius:9px;border:1px solid currentColor}
.td-pri-1{color:var(--text2)}.td-pri-2{color:var(--accent)}.td-pri-3{color:var(--warn)}
.td-pri-4{color:var(--danger)}.td-pri-5{color:var(--danger-dark);font-weight:700}
.td-lab{font-size:10.5px;padding:1px 7px;border-radius:9px;background:var(--bg2);color:var(--text2)}
.td-ass{font-size:10.5px;padding:1px 7px;border-radius:9px;
        background:color-mix(in srgb,var(--todo) 14%,transparent);color:var(--text)}

/* ---- Detail ---- */
.td-d-head{padding:14px 16px 12px;border-bottom:1px solid var(--border);
           border-top:3px solid var(--todo);background:color-mix(in srgb,var(--todo) 4%,var(--card))}
.td-d-titel{font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.td-d-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px;
           font-size:12px;color:var(--text2)}
.td-d-meta span{display:inline-flex;align-items:center;gap:4px}
.td-d-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.td-d-sec{padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.td-d-sh{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
         color:var(--text2);margin-bottom:7px}
.td-d-sh::before{content:"";display:inline-block;width:3px;height:10px;margin-right:6px;
                 vertical-align:-1px;background:var(--todo);border-radius:2px}
.td-d-beschr{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.td-kom{border-left:2px solid color-mix(in srgb,var(--todo) 45%,transparent);
        padding:2px 0 2px 9px;margin-bottom:9px}
.td-kom-h{font-size:11px;color:var(--text2);margin-bottom:2px}
.td-kom-t{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.td-kom-neu{margin-top:10px}
.td-kom-neu textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);
                     padding:7px 9px;font:inherit;font-size:13px;background:var(--bg2);
                     color:var(--text);resize:vertical}
.td-kom-neu button{margin-top:6px}

/* ---- Formular (Detailseite, KEIN Modal — User-Vorgabe) ---- */
.td-form{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.td-lbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
        color:var(--text2);margin-top:9px}
.td-lbl::before{content:"";display:inline-block;width:3px;height:10px;margin-right:6px;
                vertical-align:-1px;background:var(--todo);border-radius:2px}
.td-inp{border:1px solid var(--border);border-radius:var(--radius);padding:7px 9px;
        font:inherit;font-size:13px;background:var(--bg2);color:var(--text);width:100%}
.td-inp:focus{outline:2px solid color-mix(in srgb,var(--todo) 45%,transparent);outline-offset:-1px}
textarea.td-inp{resize:vertical;line-height:1.5}
.td-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.td-fbtns{display:flex;gap:8px;margin-top:14px}

/* ---- Toast ---- */
          background:var(--card);border:1px solid var(--border);border-left:3px solid var(--todo);
          border-radius:var(--radius);box-shadow:var(--shadow);padding:9px 15px;font-size:13px;
          opacity:0;pointer-events:none;transition:opacity var(--dur-3),transform var(--dur-3);z-index:var(--z-toast);max-width:70vw}

/* ---- Rail-Knopf im To-Do-Modus ---- */
body[data-mod="todo"] .td-ribbonbar{background:color-mix(in srgb,var(--todo) 3%,var(--card))}
#railTodo.active{background:color-mix(in srgb,var(--todo) 16%,transparent);color:var(--todo)}

/* ---- Ribbon-Gruppen: KEINE eigenen Regeln nötig ----
   Die Knöpfe/Gruppen nutzen jetzt die Haus-Klassen (.mc-grp/.mc-grp-row/
   .mc-grp-lbl/.mc-btn), die es in styles.css schon gibt — damit ist die Optik
   automatisch identisch mit Mail/Kalender/Kontakte. Eigene .td-rb-*-Regeln
   entfielen (sie waren die Ursache dafür, dass das Ribbon „nicht dem Schema"
   folgte). */

/* ---- Kanban-Board ----
   flex-wrap:nowrap ist entscheidend: die Spalten müssen NEBENEINANDER bleiben
   und die Fläche waagerecht scrollen. Ohne nowrap brachen sie untereinander um
   und die schmalen Spalten wurden zusätzlich vom Detailpane überlagert. */
.td-board{display:flex;flex-wrap:nowrap;gap:10px;padding:10px;overflow-x:auto;overflow-y:hidden;
          align-items:flex-start;height:100%;min-height:0}
.td-sp{flex:0 0 clamp(190px,17vw,250px);background:var(--bg2);border:1px solid var(--border);
       border-radius:var(--radius);display:flex;flex-direction:column;max-height:100%;min-height:0}
.td-sp-ohne{border-style:dashed;background:color-mix(in srgb,var(--todo) 4%,var(--bg2))}
.td-sp-b{overflow-y:auto;overflow-x:hidden}
.td-sp-h{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12px;font-weight:600;
         border-bottom:1px solid var(--border)}
.td-sp-h .td-cnt{margin-left:auto}
.td-sp-x{border:0;background:none;color:var(--text2);cursor:pointer;font-size:15px;line-height:1;
         padding:0 3px;border-radius:4px}
.td-sp-x:hover{background:var(--danger);color:#fff}
.td-sp-b{padding:7px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:40px}
.td-kcard{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--todo);
          border-radius:var(--radius);padding:8px 9px;cursor:grab;font-size:12.5px}
.td-kcard:hover{box-shadow:var(--shadow)}
.td-kcard.done{opacity:.6}
.td-kcard.done .td-kcard-t{text-decoration:line-through}
.td-kcard-t{line-height:1.35;overflow-wrap:anywhere}
.td-kcard-s{font-size:11px;color:var(--text2);margin-top:3px}
.td-sp-add{border:1px dashed var(--border);background:none;color:var(--text2);border-radius:var(--radius);
           padding:6px;font:inherit;font-size:12px;cursor:pointer;width:100%}
.td-sp-add:hover{border-color:var(--todo);color:var(--todo)}

/* ---- Kap. 228: Chips, Fortschritt, Verknüpfungen ---- */
.td-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.td-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px 8px;
         border-radius:11px;background:var(--bg2);border-left:4px solid var(--todo)}
.td-chip-p{background:color-mix(in srgb,var(--todo) 13%,transparent)}
.td-chip-x{border:0;background:none;color:var(--text2);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.td-chip-x:hover{color:var(--danger)}
.td-mini{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:var(--radius);
         padding:4px 9px;font:inherit;font-size:12px;cursor:pointer}
.td-mini:hover{border-color:var(--todo);color:var(--todo)}
.td-mini.danger:hover{border-color:var(--danger);color:var(--danger)}
.td-fort{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden}
.td-fort-b{height:100%;background:var(--todo)}
.td-rel{margin-bottom:7px}
.td-rel-h{font-size:11px;color:var(--text2);margin-bottom:3px}
.td-rel-i{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 0}
.td-rel-l{cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-rel-l:hover{color:var(--todo);text-decoration:underline}
.td-lab-zeile{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.td-d-fuss{display:flex;flex-wrap:wrap;gap:7px;border-bottom:0}
.td-auf{border-top:3px solid var(--todo);background:color-mix(in srgb,var(--todo) 6%,var(--card))}
.td-fav{width:12px;height:12px;color:var(--warn);vertical-align:-1px}
.td-wdh{display:inline-flex;align-items:center}
.td-app.td-kompakt .td-row{padding:5px 12px}
.td-app.td-kompakt .td-row-s{display:none}
select.td-inp[multiple]{height:auto;min-height:56px;padding:4px}
input[type=color].td-inp{height:32px;padding:2px}
#tdPicker{margin:0 0 0 0}
#tdPicker .td-frow{grid-template-columns:1fr auto;align-items:end}