/* ============================================================
   CRM Suite — Aufgaben (crs-aufgaben.js)
   Praefix cau. Hell wie die ganze Suite; Farben ueber die
   Variablen des CRM mit festen Rueckfallwerten, weil #crsEigen
   nicht in .scrm-frame steht.
   ============================================================ */
.cau{ --cau-linie:var(--scrm-linie,#e7eef6); --cau-linie2:#d9e4f0; --cau-mut:var(--scrm-mut,#8a97a8); --cau-text2:#41556d; --cau-tinte:#12233a;
  --cau-akz:var(--accent,#f0862f); --cau-akz-rgb:var(--accent-rgb,240,134,47); --cau-akz-dunkel:var(--accent-dark,#a3530f);
  --cau-gut:var(--scrm-gut,#0e7c6b); --cau-gut-rgb:var(--scrm-gut-rgb,14,124,107); --cau-kalt:var(--scrm-kalt,#b3261e); --cau-kalt-rgb:var(--scrm-kalt-rgb,179,38,30);
  --cau-grund:var(--scrm-grund,#f5f8fc);
  position:relative; flex:1; min-width:0; min-height:0; display:flex; overflow:hidden; margin:-14px; color:var(--cau-tinte); font-size:13px; }
.cau .material-symbols-rounded{ vertical-align:middle; line-height:1; }
.cau-spalte{ flex:1; min-width:0; min-height:0; overflow:auto; padding:14px 16px 28px; }
.cau-luecke{ flex:1; }
.cau kbd, .cau-menue kbd{ font:inherit; font-size:10.5px; font-weight:700; padding:1px 5px; border-radius:5px; background:#eef2f7; color:#5b6b7d; }
.cau-chip{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--cau-text2); background:#fff; box-shadow:inset 0 0 0 1px var(--cau-linie2); white-space:nowrap; }
.cau-chip:hover{ background:#f4f8fc; }
.cau-chip.an{ background:rgba(var(--cau-akz-rgb),.14); color:var(--cau-akz-dunkel); box-shadow:inset 0 0 0 1px rgba(var(--cau-akz-rgb),.5); }
.cau-chip .material-symbols-rounded{ font-size:16px; }
.cau-chip .n{ font-size:11px; font-weight:800; color:var(--cau-mut); font-variant-numeric:tabular-nums; }
.cau-chip:focus-visible, .cau-ub:focus-visible, .cau-tz:focus-visible, .cau-tzeile:focus-visible, .cau-seg button:focus-visible,
.cau-haken:focus-visible, .cau-wahl:focus-visible, .cau-vz:focus-visible, .cau-wunsch:focus-visible, .cau-kz:focus-visible{ outline:2px solid var(--cau-akz); outline-offset:2px; }
.cau-reihe{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; font-size:12.5px; color:var(--cau-text2); }
.cau-leise{ color:var(--cau-mut); }

/* ---------- Kopfzeile: Uebersicht (1/3) und Filter (2/3) ---------- */
/* ---------- Die Kopfzahlen ----------
   Vorher eine einzige Zeile, die sich bei Enge in sieben Stufen
   selbst ausduennte: die Zahl blieb bei 19 Pixeln, und was sie
   bedeutete, verschwand als Erstes. Jetzt gleich hohe Karten im
   Raster - Label oben, ZAHL darunter, Erlaeuterung unten. Das
   Raster bricht von selbst um, uebPassen() entfaellt. */
.cau-kopfzahlen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr) auto;
  gap:10px; margin-bottom:12px; }
.cau-kopfzahlen.ohnenext{ grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
.cau-ub{ all:unset; box-sizing:border-box; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:13px 15px 14px; border-radius:14px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--cau-linie);
  transition:box-shadow .15s ease, background .15s ease, transform .12s ease; }
.cau-ub:hover{ box-shadow:inset 0 0 0 1px var(--cau-linie2); transform:translateY(-1px); }
.cau-ub:active{ transform:translateY(0); }
.cau-ub:focus-visible{ outline:2px solid var(--cau-akz); outline-offset:2px; }

/* Label oben, ein Zeichen rechts. */
.cau-ubk{ display:flex; align-items:center; gap:8px; min-width:0; }
.cau-ubk b::first-letter{ text-transform:uppercase; }
.cau-ubk b{ flex:1; min-width:0; font-size:12.5px; font-weight:650; color:var(--cau-text2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-ubp{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:#f1f5f9; color:var(--cau-mut); }
.cau-ubp .material-symbols-rounded{ font-size:14px; }
.cau-ub.rot .cau-ubp{ background:rgba(var(--cau-kalt-rgb),.1); color:var(--cau-kalt); }
.cau-ubnext .cau-ubp{ background:rgba(var(--cau-akz-rgb),.14); color:var(--cau-akz-dunkel); }

/* DIE ZAHL. Sie ist die Nachricht, nicht das Beiwerk. */
.cau-ubz{ font-size:30px; font-weight:700; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--cau-tinte); }
.cau-ub.rot .cau-ubz{ color:var(--cau-kalt); }
.cau-ub.ruhig .cau-ubz{ color:#b0bccb; }

.cau-ubt{ font-size:11.5px; color:var(--cau-mut); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-ubt em{ font-style:normal; font-weight:650; color:var(--cau-akz-dunkel); }

/* Gewaehlt: gefuellt, nicht nur umrandet - ein Filter, den man
   uebersieht, ist schlimmer als keiner. */
.cau-ub.an{ background:rgba(var(--cau-akz-rgb),.1); box-shadow:inset 0 0 0 1px rgba(var(--cau-akz-rgb),.5); }
.cau-ub.an .cau-ubk b{ color:var(--cau-akz-dunkel); }
.cau-ub.rot.an{ background:rgba(var(--cau-kalt-rgb),.08); box-shadow:inset 0 0 0 1px rgba(var(--cau-kalt-rgb),.4); }
.cau-ub.rot.an .cau-ubk b{ color:var(--cau-kalt); }

/* Die Mischung der Arten statt einer Erlaeuterung: vier Anrufe
   sind ein anderer Tag als vier Termine. */
.cau-ubmix{ display:flex; gap:8px; }
.cau-ubart{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:650;
  color:var(--cau-mut); font-variant-numeric:tabular-nums; }
.cau-ubart .material-symbols-rounded{ font-size:14px; }

/* Als Naechstes: die einzige Karte ohne Zahl - die Uhrzeit nimmt
   ihre Stelle ein. */
.cau-ubnext .cau-ubz{ font-size:24px; display:flex; align-items:baseline; gap:8px; min-width:0; }
.cau-ubnext .cau-ubz em{ font-size:13px; font-weight:600; font-style:normal; color:var(--cau-tinte);
  letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Der Ring zeigt, er filtert nicht - darum kein Knopf. */
.cau-ubfort{ cursor:default; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:11px; padding:13px 16px; }
.cau-ubfort:hover{ transform:none; box-shadow:inset 0 0 0 1px var(--cau-linie); }
.cau-ubfort svg{ width:38px; height:38px; flex:none; transform:rotate(-90deg); }
.cau-ubfort circle{ fill:none; stroke-width:3; }
.cau-ubfort .rh{ stroke:#e8eef5; }
.cau-ubfort .rv{ stroke:var(--cau-gut); stroke-linecap:round; transition:stroke-dasharray .7s cubic-bezier(.3,.85,.25,1); }
.cau-ubnz{ min-width:0; }
.cau-ubnz b{ display:block; font-size:17px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--cau-gut); }
.cau-ubnz small{ display:block; font-size:11px; color:var(--cau-mut); white-space:nowrap; }

@media (max-width:1240px){
  .cau-kopfzahlen, .cau-kopfzahlen.ohnenext{ grid-template-columns:repeat(2,minmax(0,1fr)) auto; }
}
@media (max-width:700px){
  .cau-kopfzahlen, .cau-kopfzahlen.ohnenext{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cau-ubfort{ grid-column:span 2; }
}

/* Der Filter steht in der Ansichtszeile, zwischen den Ansichten
   und der Gruppierung: eine Zeile fuer alles, womit man die
   Liste einstellt. flex:1 nimmt den Platz dazwischen. */
.cau-smart{ position:relative; flex:1; min-width:240px; height:var(--cau-zh); box-sizing:border-box;
  display:flex; align-items:center; gap:6px; padding:0 8px 0 11px; border-radius:10px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--cau-linie2); cursor:text; }
/* Mehr als ein paar Filter rollen seitlich, statt die Ansichten
   zu verdraengen. */
.cau-smart > .cau-tok{ flex:none; }
.cau-smart > .material-symbols-rounded{ color:var(--cau-mut); font-size:20px; }
.cau-smart.offen, .cau-smart:focus-within{ box-shadow:inset 0 0 0 2px var(--cau-akz); }
.cau-smart input{ flex:1; min-width:140px; height:32px; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; color:inherit; }
.cau-smart > kbd{ margin-right:4px; }
.cau-tok{ --tc:var(--cau-text2); --tb:#eef2f6; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 4px 0 9px; border-radius:9px; background:var(--tb); color:var(--tc);
  font-size:12.5px; font-weight:700; white-space:nowrap; max-width:100%; }
.cau-tok small{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.7; margin-right:1px; }
.cau-tok .material-symbols-rounded{ font-size:15px; }
.cau-tok button{ all:unset; cursor:pointer; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; }
.cau-tok button:hover{ background:rgba(16,24,40,.1); }
.cau-tok button .material-symbols-rounded{ font-size:15px; }
.cau-tok.t-produkt{ --tb:rgba(47,111,196,.11); --tc:#2459a0; }
.cau-tok.t-anf{ --tb:rgba(109,79,196,.11); --tc:#5a3fb0; }
.cau-tok.t-gewicht, .cau-tok.t-score{ --tb:rgba(179,38,30,.09); --tc:#a1221b; }
.cau-tok.t-wunsch{ --tb:rgba(14,124,107,.1); --tc:#0b6b5c; }
.cau-tok.t-phase{ --tb:rgba(240,134,47,.14); --tc:var(--cau-akz-dunkel); }
.cau-tok.t-kampagne{ --tb:rgba(31,122,140,.12); --tc:#16606e; }
.cau-tok.t-zeit, .cau-tok.t-versuch{ --tb:#eaf0f6; --tc:#34495f; }
.cau-vorschlag{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-height:440px; overflow:auto; padding:8px; border-radius:14px; background:#fff;
  box-shadow:0 18px 40px -12px rgba(18,35,58,.35), 0 0 0 1px var(--cau-linie); cursor:default; }
.cau-vspalten{ columns:2 260px; column-gap:10px; }
.cau-vg{ break-inside:avoid; margin-bottom:8px; }
.cau-vk{ display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--cau-mut); }
.cau-vk .material-symbols-rounded{ font-size:15px; }
.cau-vans{ padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--cau-linie); }
.cau-vachips{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 0; }
.cau-chip.ansicht{ border-radius:15px; }
.cau-aweg{ display:inline-grid; place-items:center; width:18px; height:18px; margin-right:-6px; border-radius:50%; color:var(--cau-mut); }
.cau-aweg:hover{ background:rgba(16,24,40,.08); color:var(--cau-tinte); }
.cau-aweg .material-symbols-rounded{ font-size:14px; }
.cau-vz{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:4px 8px; border-radius:8px; font-size:13px; }
.cau-vz:hover, .cau-vz.an{ background:rgba(var(--cau-akz-rgb),.1); }
.cau-vz .vt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-vz .vt small{ display:block; font-size:11px; color:var(--cau-mut); }
.cau-vz .vn{ min-width:22px; height:20px; padding:0 6px; border-radius:10px; display:grid; place-items:center; background:#eef2f6; font-size:11px; font-weight:800; color:var(--cau-text2); font-variant-numeric:tabular-nums; }
.cau-vz.null{ opacity:.5; }
.cau-vz .crs-pchip, .cau-vz .crs-z, .cau-vz .scrm-score{ flex:none; margin:0; }
.cau-vfuss{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 8px 2px; border-top:1px solid var(--cau-linie); font-size:11.5px; color:var(--cau-mut); }
.cau-vleer{ padding:18px; text-align:center; color:var(--cau-mut); }
.cau-vleer .material-symbols-rounded{ display:block; font-size:28px; opacity:.5; margin:0 auto 6px; }
.cau-treffer{ display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; margin:-2px 4px 10px; min-height:26px; font-size:12px; color:var(--cau-mut); }
.cau-treffer b{ color:var(--cau-tinte); }
.cau-aktans{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:11px; background:rgba(var(--cau-akz-rgb),.14); color:var(--cau-akz-dunkel); font-weight:700; }
.cau-aktans .material-symbols-rounded{ font-size:14px; }
.cau-treffer .m3-btn{ height:26px; }

/* ---------- Leiste ---------- */
/* Eine Zeile: Ansichten links, Filter in der Mitte, Gruppierung
   rechts. Alle Kaesten darin gleich hoch - drei verschiedene
   Hoehen nebeneinander sieht man. */
.cau-leiste{ --cau-zh:36px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cau-leiste > .m3-btn, .cau-leiste .crs-sel{ height:var(--cau-zh); box-sizing:border-box; }
.cau-seg{ display:inline-flex; align-items:center; height:var(--cau-zh); box-sizing:border-box; padding:3px; border-radius:11px; background:#e9eef4; gap:2px; }
.cau-seg button{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--cau-text2); }
.cau-seg button .material-symbols-rounded{ font-size:17px; }
.cau-seg button.an{ background:#fff; color:var(--cau-tinte); box-shadow:0 1px 3px rgba(20,40,70,.12); }
.cau-segtrenn{ width:1px; height:20px; margin:0 8px; background:#c9d4e0; }
.cau-gruppierung{ display:inline-flex; align-items:center; height:var(--cau-zh); box-sizing:border-box; gap:6px; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--cau-text2); }
.cau-gruppierung .material-symbols-rounded{ font-size:17px; color:var(--cau-mut); }
.cau-wahlleiste{ display:flex; align-items:center; gap:6px; padding:5px 8px 5px 14px; margin-bottom:12px; border-radius:12px; background:var(--cau-tinte); color:#fff; box-shadow:0 8px 20px -10px rgba(18,35,58,.6); }
.cau-wahlleiste b{ font-size:13px; margin-right:6px; }
.cau-wahlleiste .m3-btn{ color:#fff; }
.cau-wahlleiste .m3-btn:hover{ background:rgba(255,255,255,.12); }
.cau-wahlleiste .m3-icon-btn{ color:#c9d4e2; }
.cau-tasten{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:11.5px; color:var(--cau-mut); }

/* ---------- Bausteine der Zeilen ---------- */
/* 30 statt 32, Zeichen 16 statt 18 - die Masse der Vorschau. */
.cau-art{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(var(--c),.12); color:rgb(var(--c)); }
.cau-art .material-symbols-rounded{ font-size:16px; }
.cau-art.mini{ width:22px; height:22px; border-radius:6px; }
.cau-art.mini .material-symbols-rounded{ font-size:14px; }
.cau-av{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:9.5px; font-weight:800; letter-spacing:-.02em; }
.cau-av.gross{ width:44px; height:44px; font-size:14px; }
/* 26 statt 22, duennerer Ring, und er waechst beim Zeigen -
   wie in der Vorschau. */
.cau-haken{ all:unset; box-sizing:border-box; flex:none; width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1.6px #d9d9de; display:grid; place-items:center; cursor:pointer; color:transparent; transition:box-shadow .15s ease, color .15s ease, transform .15s ease; }
.cau-haken:hover{ transform:scale(1.08); }
.cau-haken:active{ transform:scale(.94); }
.cau-haken .material-symbols-rounded{ font-size:15px; font-weight:700; }
.cau-haken:hover{ box-shadow:inset 0 0 0 2px var(--cau-gut); color:var(--cau-gut); }
.cau-haken.fertig{ background:var(--cau-gut); box-shadow:none; color:#fff; cursor:default; }
.cau-haken.ruht{ color:var(--cau-mut); cursor:default; }
.cau-haken.ruht:hover{ box-shadow:inset 0 0 0 2px #c3cedb; }
.cau-wahl{ all:unset; box-sizing:border-box; flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:#b4bfcc; cursor:pointer; }
.cau-wahl .material-symbols-rounded{ font-size:19px; }
.cau-wahl.an{ color:#2f6fc4; }
.cau-kchip{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; background:rgba(31,122,140,.11); color:#16606e; }
.cau-kchip .material-symbols-rounded{ font-size:13px; }
.cau-kmini{ flex:none; display:inline-block; width:34px; height:5px; border-radius:3px; background:#e6edf4; overflow:hidden; vertical-align:middle; }
.cau-kmini.breit{ width:64px; }
.cau-kmini i{ display:block; height:100%; border-radius:3px; background:#1f7a8c; }
.cau-wchip{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; background:#eef2f6; color:var(--cau-text2); }
.cau-wchip .material-symbols-rounded{ font-size:13px; flex:none; }
.cau-wchip.killer{ background:rgba(var(--cau-kalt-rgb),.09); color:#a1221b; }
.cau-wchip.wichtig{ background:rgba(194,105,26,.11); color:#8a4a10; }
.cau-wchip.umg{ background:rgba(var(--cau-gut-rgb),.12); color:var(--cau-gut); }
.cau-score{ margin-left:0; }
.cau-phase{ font-size:11.5px; font-weight:700; color:var(--cau-akz-dunkel); }
.cau-melden{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:var(--cau-gut); }
.cau-melden .material-symbols-rounded{ font-size:15px; }
.cau-wichtig{ flex:none; font-size:16px; color:var(--cau-kalt); font-variation-settings:'FILL' 1; }
.cau-versuche{ flex:none; display:inline-flex; gap:3px; }
.cau-versuche i{ width:8px; height:8px; border-radius:50%; background:#e3e9f0; }
.cau-versuche i.weg{ background:#9aa8b8; }
.cau-versuche i.jetzt{ background:var(--cau-akz); }
.cau-sperrgrund{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11.5px; font-weight:600; color:#a1221b; }
.cau-sperrgrund .material-symbols-rounded{ font-size:15px; }
.cau-sperrgrund.gross{ margin-top:10px; padding:8px 10px; border-radius:9px; background:rgba(var(--cau-kalt-rgb),.07); font-size:12.5px; }
.cau-vzhin{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11.5px; color:var(--cau-text2); }
.cau-vzhin .material-symbols-rounded{ font-size:15px; color:#6d4fc4; }

/* ---------- Gruppen ---------- */
.cau-gruppe{ margin-bottom:14px; }
.cau-gkopf{ display:flex; align-items:center; flex-wrap:wrap; row-gap:4px; gap:8px; margin:0 2px 7px; }
.cau-gkopf h3{ margin:0; font-size:13px; font-weight:800; color:var(--cau-text2); white-space:nowrap; }
.cau-gkopf .n{ font-size:11px; font-weight:800; color:var(--cau-mut); }
.cau-gkopf.rot h3, .cau-gkopf.rot .n{ color:var(--cau-kalt); }
.cau-gkopf .d{ font-size:12px; color:var(--cau-mut); }
.cau-gkopf .crs-pchip, .cau-gkopf .crs-z{ flex:none; }
.cau-gfilter{ margin-left:auto; height:26px; }

/* ---------- Tabelle ---------- */
/* table-layout:auto, nicht fixed - siehe den Kommentar bei
   listeHtml in crs-aufgaben.js. Kurz: bei fixed verteilt der
   Browser ueberschuessige Breite gleichmaessig auf alle
   Spalten, und auf einem breiten Bildschirm stehen zwischen
   vier Spalten drei leere Flaechen. Bei auto entscheidet der
   Inhalt, und die Tabelle bleibt links dicht. */
/* width:auto statt 100% - DER LETZTE SCHRITT.
   Mit 100% muss der Browser die ganze Breite aufbrauchen, und
   er verteilt sie auf die dehnbaren Spalten: gemessen bei 1885
   Pixeln Fenster wurde "Aufgabe" 942 und "Firma" 530 breit.
   Mit auto wird die Tabelle nur so breit, wie ihre Spalten
   brauchen - links dicht, rechts Leerraum. max-width haelt sie
   im Rahmen, min-width (inline, aus der Spaltensumme) sorgt
   dafuer, dass sie bei Enge rollt statt zu quetschen. */
.cau-tab{ width:100%; table-layout:auto; border-collapse:separate; border-spacing:0; margin-bottom:6px; font-size:13px; }
/* Die drei festen Spalten standen frueher im colgroup. Mit auto
   gibt es keines mehr, also stehen ihre Breiten hier. */
.cau-tab th.fix, .cau-tab td.fix{ width:36px; }
.cau-tab th.akt, .cau-tab td.akt{ width:48px; }
.cau-tab th, .cau-tab td{ border-bottom:1px solid var(--cau-linie); }
.cau-tab thead th{ position:sticky; top:-14px; z-index:4; height:40px; padding:0 10px; background:#f7f9fc; border-top:1px solid var(--cau-linie); border-bottom-color:var(--cau-linie2);
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cau-text2); white-space:nowrap; cursor:pointer; user-select:none; }
.cau-tab thead th:first-child{ border-left:1px solid var(--cau-linie); border-top-left-radius:16px; }
.cau-tab thead th:last-child{ border-right:1px solid var(--cau-linie); border-top-right-radius:16px; }
.cau-tab thead th:hover{ background:#eef3f8; }
.cau-tab thead th.sortiert{ background:#fdf1e6; color:var(--cau-akz-dunkel); }
.cau-tab thead th:focus-visible{ outline:2px solid var(--cau-akz); outline-offset:-2px; }
.cau-tab th .th{ display:inline-flex; align-items:center; gap:3px; max-width:100%; vertical-align:middle; }
.cau-tab th .thn{ overflow:hidden; text-overflow:ellipsis; }
.cau-tab th .griff{ flex:none; width:14px; margin-left:-7px; font-size:15px; color:#aab6c4; opacity:0; cursor:grab; text-transform:none; letter-spacing:normal; }
.cau-tab th .pfeil{ flex:none; font-size:15px; text-transform:none; letter-spacing:normal; }
.cau-tab th:hover .griff{ opacity:1; }
.cau-tab th .pfeil.leise{ color:#aab6c4; opacity:0; }
.cau-tab th:hover .pfeil.leise{ opacity:1; }
.cau-tab th small{ font-size:10px; font-weight:800; }
.cau-tab th.rechts{ text-align:right; }
.cau-tab th.zieht{ opacity:.4; }
.cau-tab th.cau-drop-l{ box-shadow:inset 3px 0 0 var(--cau-akz); }
.cau-tab th.cau-drop-r{ box-shadow:inset -3px 0 0 var(--cau-akz); }
/* Polster 10/14 wie in previews/aufgaben-drei.html. height ist
   an einer Zelle die INHALTShoehe: mit 48 und 5er Polster kam
   die Zeile auf 59, mit der zweizeiligen Spalte auf 67. 34
   plus 20 plus Rand ergibt die 55 der Vorschau. */
.cau-tab td{ height:34px; padding:10px 14px; background:#fff; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cau-text2); }
/* ---------- Titel und Kontakt in EINER Zelle ----------
   Zwei Zeilen untereinander statt zwei Spalten nebeneinander.
   Beide haben so mehr Platz als vorher jede fuer sich, und die
   Zeile wird nur um 8 Pixel hoeher - 56 statt 48. */
/* Keine eigene Hoehe noetig: der zweizeilige Inhalt ist 32
   Pixel hoch und passt in die 34 der Grundregel. */
.cau-tzwei{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cau-tzwei b{ font-size:13px; font-weight:600; color:var(--cau-tinte); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-tzwei > span{ font-size:11.5px; color:var(--cau-text3, #7d8ba0); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-tzwei .cau-wichtig{ font-size:14px; vertical-align:-2px; }
.cau-tab td:first-child{ border-left:1px solid var(--cau-linie); }
.cau-tab td:last-child{ border-right:1px solid var(--cau-linie); }
.cau-tab tbody:last-child tr:last-child td:first-child{ border-bottom-left-radius:16px; }
.cau-tab tbody:last-child tr:last-child td:last-child{ border-bottom-right-radius:16px; }
.cau-tab .fix{ padding:0 0 0 8px; }
.cau-tab td.rechts{ text-align:right; }
.cau-tz{ cursor:pointer; }
.cau-tz:hover td{ background:#fafcfe; }
.cau-tz.markiert td{ background:#f2f6fd; }
.cau-tz.an td{ background:#fef5ee; }
.cau-tz.an td:first-child{ box-shadow:inset 3px 0 0 var(--cau-akz); }
.cau-tgruppe td{ height:auto; padding:14px 10px 7px; background:var(--cau-grund); }
.cau-tgruppe .cau-gkopf{ margin:0; }
.cau-tart{ display:inline-flex; align-items:center; gap:8px; }
.cau-ttitel{ display:flex; align-items:center; gap:3px; min-width:0; }
.cau-ttitel b{ overflow:hidden; text-overflow:ellipsis; font-weight:700; color:var(--cau-tinte); }
.cau-tkontakt{ display:flex; align-items:center; gap:7px; min-width:0; font-weight:600; color:var(--cau-tinte); }
.cau-tkontakt .tn{ overflow:hidden; text-overflow:ellipsis; }
.cau-tsperre{ flex:none; font-size:16px; color:var(--cau-kalt); }
.cau-tleer{ color:#b8c3cf; }
.cau-tzahl{ font-variant-numeric:tabular-nums; }
/* Faelligkeit als Pille mit drei Bedeutungsstufen - wie in
   previews/aufgaben-drei.html. Vorher blosser Text, der nur bei
   Ueberfaelligkeit rot wurde: vier Zustaende, von denen man
   drei nicht sah. */
.cau-twann{
  display:inline-block; font-size:12px; font-weight:650; white-space:nowrap;
  padding:4px 9px; border-radius:7px;
  background:#f1f4f8; color:var(--cau-mut);
  font-variant-numeric:tabular-nums;
}
.cau-twann.spaet{ background:rgba(var(--cau-kalt-rgb),.11); color:var(--cau-kalt); }
.cau-twann.heute{ background:rgba(var(--cau-akz-rgb),.14); color:var(--cau-akz-dunkel); }
.cau-twann.bald { background:rgba(var(--cau-gut-rgb),.12); color:var(--cau-gut); }
.cau-twerinn{ display:block; margin-top:3px; font-size:11px; font-weight:500; color:var(--cau-mut); }
/* .rot bleibt fuer aeltere Stellen, die es noch setzen. */
.cau-twann.rot{ background:rgba(var(--cau-kalt-rgb),.11); color:var(--cau-kalt); }

.cau-tversuch{ display:inline-flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; }
.cau-tnotiz{ display:block; overflow:hidden; text-overflow:ellipsis; }
.cau-tab td .cau-wchip, .cau-tab td .cau-kchip{ max-width:100%; }
.cau-tab .akt{ position:sticky; right:0; z-index:2; padding:0; text-align:center; overflow:visible; }
.cau-tab thead .akt{ z-index:5; }
.cau-schnell{ display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%); align-items:center; gap:2px; padding-left:30px;
  background:linear-gradient(90deg, rgba(250,252,254,0), #fafcfe 30px); }
.cau-schnell .m3-btn{ height:32px; }
.cau-tz:hover .cau-schnell, .cau-tz.an .cau-schnell{ display:flex; }
.cau-tz.an .cau-schnell{ background:linear-gradient(90deg, rgba(254,245,238,0), #fef5ee 30px); }

/* ---------- Woche ---------- */
.cau-wochewrap{ overflow-x:auto; padding-bottom:6px; }
.cau-woche{ display:grid; grid-template-columns:repeat(7,minmax(160px,1fr)); gap:10px; min-width:1160px; }
.cau-wsp{ display:flex; flex-direction:column; gap:7px; min-height:420px; padding:8px; border-radius:12px; background:#eef2f7; }
.cau-wsp.heute{ background:rgba(var(--cau-akz-rgb),.1); }
.cau-wsp.rot{ background:rgba(var(--cau-kalt-rgb),.07); }
.cau-wsp.ziel{ box-shadow:inset 0 0 0 2px var(--cau-akz); }
.cau-wkopf{ display:flex; align-items:baseline; justify-content:space-between; padding:2px 4px 4px; }
.cau-wkopf b{ font-size:12.5px; font-weight:800; }
.cau-wkopf span{ font-size:11.5px; color:var(--cau-mut); font-weight:700; }
.cau-wk{ background:#fff; border-radius:10px; padding:8px 9px; box-shadow:0 1px 2px rgba(20,40,70,.08); cursor:pointer; border-left:3px solid rgb(var(--c)); }
.cau-wk[draggable="true"]{ cursor:grab; }
.cau-wk.an{ box-shadow:0 0 0 2px var(--cau-akz); }
.cau-wk .tt{ font-size:12.5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cau-wk .ctx{ margin-top:2px; font-size:11.5px; color:var(--cau-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-wk .wz{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:11px; font-weight:700; color:rgb(var(--c)); }
.cau-wk .wz .material-symbols-rounded{ font-size:14px; }

/* ---------- Tafel ----------
   Vier Faecher statt sieben Tagen. Weil es nur vier sind, haben
   sie keine Mindestbreite noetig und muessen nicht rollen - der
   Unterschied zur Wochenansicht, die bei 1160 Pixeln anfaengt.

   Die Karte traegt hier den Haken gleich mit: in vier breiten
   Spalten ist Platz dafuer, und Erledigen ist die haeufigste
   Handlung an einer Aufgabe. */
.cau-tafel{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:start; }
.cau-tsp{ display:flex; flex-direction:column; gap:7px; min-width:0; min-height:260px;
  padding:9px; border-radius:12px; background:#eef2f7; }
.cau-tsp.heute{ background:rgba(var(--cau-akz-rgb),.1); }
.cau-tsp.rot{ background:rgba(var(--cau-kalt-rgb),.07); }
.cau-tsp.ziel{ box-shadow:inset 0 0 0 2px var(--cau-akz); }
.cau-tkopf{ display:flex; align-items:baseline; gap:8px; padding:2px 4px 3px; }
.cau-tkopf b{ font-size:12.5px; font-weight:800; }
.cau-tkopf span{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--cau-mut);
  font-variant-numeric:tabular-nums; }
.cau-tsp.rot .cau-tkopf b, .cau-tsp.rot .cau-tkopf span{ color:var(--cau-kalt, #b3261e); }

.cau-tk{ background:#fff; border-radius:10px; padding:9px 10px; min-width:0;
  box-shadow:0 1px 2px rgba(20,40,70,.08); cursor:pointer; border-left:3px solid rgb(var(--c)); }
.cau-tk[draggable="true"]{ cursor:grab; }
.cau-tk.an{ box-shadow:0 0 0 2px var(--cau-akz); }
.cau-tk .kz{ display:flex; align-items:flex-start; gap:7px; min-width:0; }
.cau-tk .kz > .material-symbols-rounded{ flex:none; font-size:16px; color:rgb(var(--c)); margin-top:1px; }
.cau-tk .tt{ flex:1; min-width:0; font-size:12.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cau-tk .kf{ display:flex; align-items:center; gap:8px; margin-top:6px; padding-left:23px; min-width:0; }
/* ZWEI ZEILEN, NICHT ABSCHNEIDEN: in einer Karte ist Hoehe
   uebrig, anders als in einer Tabellenzelle. Mit nowrap endeten
   acht von sechzehn Namen in drei Punkten. */
.cau-tk .ctx{ flex:1; min-width:0; font-size:11.5px; color:var(--cau-mut); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cau-tk .wz{ flex:none; font-size:11px; font-weight:700; color:rgb(var(--c));
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.cau-tleerfach{ padding:16px 6px; text-align:center; font-size:11.5px; color:var(--cau-mut); }

@media (max-width:900px){
  .cau-tafel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .cau-tafel{ grid-template-columns:1fr; }
}

/* ---------- Telefon ---------- */
.cau-tkarten{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.3fr); gap:10px; margin-bottom:10px; }
.cau-tk{ position:relative; display:flex; flex-direction:column; gap:8px; padding:12px 14px; }
.cau-tkt b{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cau-text2); }
.cau-tkt b .m3-icon-btn{ width:26px; height:26px; }
.cau-tkt b .m3-icon-btn .material-symbols-rounded{ font-size:15px; }
.cau-tkt > span{ display:block; font-size:12.5px; color:var(--cau-mut); }
.cau-tk.ziel{ flex-direction:row; align-items:center; gap:14px; }
.cau-ring{ width:72px; height:72px; flex:none; transform:rotate(-90deg); }
.cau-ring circle{ fill:none; stroke-width:8; }
.cau-ring .rh{ stroke:#e8eef5; }
.cau-ring .rv{ stroke:var(--cau-akz); stroke-linecap:round; transition:stroke-dasharray .4s; }
.cau-rz{ position:absolute; left:14px; top:50%; width:72px; transform:translateY(-50%); text-align:center; line-height:1.05; }
.cau-rz b{ display:block; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.cau-rz span{ font-size:10.5px; color:var(--cau-mut); font-weight:700; }
.cau-serie{ display:inline-flex !important; align-items:center; gap:3px; margin-top:4px; font-size:12px !important; font-weight:700; color:#c2691a !important; }
.cau-serie .material-symbols-rounded{ font-size:16px; font-variation-settings:'FILL' 1; }
.cau-balken{ display:flex; align-items:flex-end; gap:6px; height:58px; }
.cau-bs{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; }
.cau-bs i{ display:block; width:100%; max-width:34px; border-radius:5px 5px 2px 2px; background:#dbe5ef; }
.cau-bs.beste i{ background:var(--cau-gut); }
.cau-bs.jetzt i{ box-shadow:0 0 0 2px var(--cau-akz); }
.cau-bs small{ font-size:10.5px; color:var(--cau-mut); font-weight:700; font-variant-numeric:tabular-nums; }
.cau-kz{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:9px; padding:5px 8px; margin:0 -8px; border-radius:9px; }
.cau-kz:hover{ background:#f4f8fc; }
.cau-kz.an{ background:rgba(31,122,140,.1); box-shadow:inset 0 0 0 1px rgba(31,122,140,.4); }
.cau-kz > .material-symbols-rounded{ font-size:19px; color:#1f7a8c; }
.cau-kz .kn{ flex:1; min-width:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cau-kz .kn small{ display:block; font-size:11px; font-weight:500; color:var(--cau-mut); }
.cau-blockstart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 12px 12px 16px; margin-bottom:14px;
  background:linear-gradient(90deg, rgba(var(--cau-akz-rgb),.1), rgba(var(--cau-akz-rgb),.03)); box-shadow:inset 0 0 0 1px rgba(var(--cau-akz-rgb),.3); }
.cau-blockstart .bst{ flex:1; min-width:220px; }
.cau-blockstart .bst b{ display:block; font-size:15px; font-weight:800; }
.cau-blockstart .bst span{ display:block; font-size:12.5px; color:var(--cau-text2); }
.cau-blockstart .m3-btn kbd{ background:rgba(255,255,255,.25); color:#fff; margin-left:2px; }
.cau-tzeile{ display:flex; align-items:center; gap:10px; padding:9px 12px 9px 10px; border-bottom:1px solid var(--cau-linie); cursor:pointer; }
.cau-tzeile:last-child{ border-bottom:0; }
.cau-tzeile:hover{ background:#fafcfe; }
.cau-tzeile.an{ background:rgba(var(--cau-akz-rgb),.07); box-shadow:inset 3px 0 0 var(--cau-akz); }
.cau-tnr{ flex:none; width:20px; text-align:center; font-size:12px; font-weight:800; color:var(--cau-mut); font-variant-numeric:tabular-nums; }
.cau-tnr .material-symbols-rounded{ font-size:17px; color:var(--cau-kalt); }
.cau-tzeile .cau-av{ width:30px; height:30px; font-size:11px; }
.cau-tzeile.gesperrt .cau-av{ filter:grayscale(1); opacity:.55; }
.cau-tzeile.gesperrt .tt .x{ color:var(--cau-mut); }
.cau-inhalt{ flex:1; min-width:0; }
.cau-inhalt .tt{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; min-width:0; }
.cau-inhalt .tt .x{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cau-inhalt .tt .x.durch{ text-decoration:line-through; color:var(--cau-mut); }
.cau-inhalt .ctx{ display:flex; align-items:center; flex-wrap:wrap; gap:3px 6px; margin-top:2px; font-size:12px; color:var(--cau-mut); min-width:0; }
.cau-inhalt .ctx b{ font-weight:600; color:var(--cau-text2); }
.cau-wann{ flex:none; text-align:right; font-size:12px; font-weight:700; color:var(--cau-text2); font-variant-numeric:tabular-nums; min-width:62px; }
.cau-wann small{ display:block; font-weight:500; color:var(--cau-mut); }
.cau-wann.rot{ color:var(--cau-kalt); }
.cau-ezeile{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--cau-linie); }
.cau-ezeile:last-child{ border-bottom:0; }

/* ---------- Blatt: gleitet von rechts herein ----------
   position:FIXED, nicht absolute: es soll vom oberen bis zum
   unteren Bildschirmrand reichen, nicht nur so weit wie die
   Flaeche unter dem Suite-Kopf (Flo am 11.11.).

   KEIN Schleier dahinter, anders als bei Kontakten und Firmen:
   die Liste daneben soll lesbar bleiben, man arbeitet mit
   beidem zugleich. Zu geht es ueber das X oder Escape.

   40 Prozent wie die anderen Blaetter, unter 1100 Pixeln ganz.
   Vorher waren es 380 Pixel fest. */
.cau-blatt{ position:fixed; top:0; right:0; bottom:0; z-index:1500; width:40vw;
  overflow:auto; background:#fff; border-left:1px solid var(--cau-linie);
  box-shadow:-22px 0 44px -24px rgba(18,35,58,.38); transform:translateX(104%); visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
@media (max-width:1100px){ .cau-blatt{ width:100%; } }
.cau.blattauf .cau-blatt{ transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.cau-bzu{ position:absolute; top:10px; right:10px; z-index:2; }
.cau-bk{ padding:16px 50px 12px 16px; border-bottom:1px solid var(--cau-linie); }
.cau-bk .crs-z{ margin-bottom:8px; }
.cau-bk h3{ display:flex; align-items:center; gap:4px; margin:0 0 4px; font-size:17px; font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
.cau-bw{ font-size:12.5px; color:var(--cau-text2); display:flex; align-items:center; gap:6px; }
.cau-bw .material-symbols-rounded{ font-size:17px; }
.cau-bw.rot{ color:var(--cau-kalt); font-weight:700; }
.cau-bakt{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cau-babs{ padding:14px 16px; border-bottom:1px solid var(--cau-linie); }
.cau-babs:last-child{ border-bottom:0; }
.cau-babs .scrm-nh{ display:flex; align-items:center; gap:6px; }
.cau-person{ display:flex; align-items:center; gap:11px; }
.cau-person b{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:14px; }
.cau-person small{ display:block; font-size:12px; color:var(--cau-mut); }
.cau-kontaktw{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.cau-auch{ display:flex; gap:6px; margin-top:10px; padding:8px 10px; border-radius:9px; background:rgba(var(--cau-akz-rgb),.08); font-size:12.5px; color:var(--cau-text2); }
.cau-auch .material-symbols-rounded{ font-size:16px; color:var(--cau-akz-dunkel); }
.cau-chance{ display:flex; flex-direction:column; gap:3px; width:100%; padding:9px 11px; border-radius:10px; background:#f7f9fc; box-shadow:inset 0 0 0 1px var(--cau-linie); text-align:left; }
.cau-chance.knopf{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:3px; width:100%; padding:9px 11px; border-radius:10px; background:#f7f9fc; box-shadow:inset 0 0 0 1px var(--cau-linie); }
.cau-chance.knopf:hover{ box-shadow:inset 0 0 0 1px var(--cau-linie2); background:#f2f6fa; }
.cau-chance small{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cau-akz-dunkel); }
.cau-chance b{ font-size:13px; }
.cau-chance span{ font-size:12px; color:var(--cau-mut); display:flex; align-items:center; gap:6px; }
.cau-wunsch{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; width:100%; padding:9px 10px; margin-bottom:6px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--cau-linie); }
.cau-wunsch:hover{ background:#fafcfe; box-shadow:inset 0 0 0 1px var(--cau-linie2); }
.cau-wunsch .wt{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; }
.cau-wunsch .wt .material-symbols-rounded{ font-size:16px; color:var(--cau-mut); opacity:0; }
.cau-wunsch:hover .wt .material-symbols-rounded{ opacity:1; }
.cau-wunsch .wm{ display:flex; flex-wrap:wrap; gap:5px; }
.cau-wmelden{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; background:rgba(var(--cau-gut-rgb),.1); color:var(--cau-gut); font-size:12px; font-weight:700; }
.cau-wmelden .material-symbols-rounded{ font-size:16px; }
.cau-notiz{ font-size:13px; color:var(--cau-text2); white-space:pre-line; }
.cau-notiz.klein{ font-size:12.5px; }
.cau-verlauf > div:not(.scrm-nh){ display:flex; gap:8px; padding:5px 0; font-size:12.5px; }
.cau-verlauf .material-symbols-rounded{ font-size:17px; color:var(--cau-mut); flex:none; margin-top:1px; }
.cau-verlauf span{ flex:1; min-width:0; }
.cau-verlauf small{ display:block; color:var(--cau-mut); overflow:hidden; text-overflow:ellipsis; }
.cau-verlauf em{ font-style:normal; font-size:11.5px; color:var(--cau-mut); }
.cau-danach{ margin-top:12px; padding:12px; border-radius:12px; background:rgba(var(--cau-gut-rgb),.06); box-shadow:inset 0 0 0 1px rgba(var(--cau-gut-rgb),.25); }
.cau-danach .dh{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--cau-gut); margin-bottom:8px; }
.cau-feld{ width:100%; }
.cau-ta{ height:auto; min-height:70px; padding:9px 10px; resize:vertical; }

/* ---------- Menues, Snack, Dialoge ---------- */
/* Ueber dem Blatt (1500): das Menue haengt am body und wuerde
   sonst dahinter aufklappen -- unsichtbar, aber anklickbar. */
.cau-menue{ position:fixed; z-index:1600; min-width:210px; padding:6px; border-radius:12px; background:var(--panel); color:#12233a;
  box-shadow:0 12px 30px -8px rgba(18,35,58,.35), 0 0 0 1px var(--scrm-linie,#e7eef6); font-size:13px; }
.cau-menue button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:0 10px; border-radius:8px; }
.cau-menue button:hover, .cau-menue button:focus-visible{ background:#f2f6fa; }
.cau-menue button .material-symbols-rounded{ font-size:18px; color:#8a97a8; }
.cau-menue button small{ margin-left:auto; padding-left:12px; color:#8a97a8; font-size:11.5px; }
.cau-menue button.gefahr{ color:#b3261e; }
.cau-menue button.gefahr .material-symbols-rounded{ color:#b3261e; }
.cau-menue hr{ border:0; border-top:1px solid var(--scrm-linie,#e7eef6); margin:5px 2px; }
.cau-menue input[type=date]{ height:30px; border-radius:7px; border:0; box-shadow:inset 0 0 0 1px #d9e4f0; padding:0 6px; font:inherit; font-size:12.5px; margin:2px 4px 4px; }
.cau-mlbl{ padding:2px 8px 4px; font-size:11.5px; color:#8a97a8; }
.cau-mlbl.kopf{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.cau-mlbl.kopf small{ font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
.cau-menue.spalten{ width:260px; max-height:72vh; overflow:auto; }
.cau-smz{ display:flex; align-items:center; gap:2px; height:32px; padding:0 6px 0 2px; border-radius:8px; }
.cau-smz:hover{ background:#f2f6fa; }
.cau-smz .griff{ flex:none; width:20px; font-size:17px; color:#aab6c4; cursor:grab; }
.cau-smz label{ flex:1; display:flex; align-items:center; gap:9px; height:100%; cursor:pointer; }
.cau-smz input{ accent-color:var(--accent-dark, var(--accent,#f0862f)); width:15px; height:15px; margin:0; }
.cau-smz.aus label{ color:#41556d; }
.cau-smz.zieht{ opacity:.4; }
.cau-smz.cau-drop-o{ box-shadow:inset 0 2px 0 var(--accent,#f0862f); }
.cau-smz.cau-drop-u{ box-shadow:inset 0 -2px 0 var(--accent,#f0862f); }
.cau-snack{ position:absolute; left:50%; bottom:18px; z-index:35; display:flex; align-items:center; gap:14px; padding:9px 9px 9px 16px; border-radius:10px; background:#1f2a3a; color:#fff;
  font-size:13px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100% - 40px); }
.cau-snack.an{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.cau-snack button{ all:unset; cursor:pointer; padding:5px 9px; border-radius:7px; color:#ffc08c; font-weight:700; }
.cau-snack button[hidden]{ display:none; }
.cau-klist{ display:flex; flex-direction:column; border-radius:12px; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cau-kzeile{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.cau-kzeile:last-child{ border-bottom:0; }
.cau-kzeile > .material-symbols-rounded{ color:#1f7a8c; font-size:21px; }
.cau-kzeile .kn{ flex:1; min-width:0; }
.cau-kzeile .kn b{ display:block; font-size:13.5px; }
.cau-kzeile small{ display:block; font-size:11.5px; color:#8a97a8; }
.cau-kzeile .kst{ width:180px; }
.cau-kneu{ display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }

@media (max-width:1250px){ .cau-tkarten{ grid-template-columns:1fr 1fr; } .cau-tk.kamp{ grid-column:1 / -1; } }
@media (prefers-reduced-motion:reduce){ .cau-blatt, .cau.blattauf .cau-blatt, .cau-snack, .cau-ring .rv, .cau-ubfort .rv{ transition:none; } }

/* Navigation der Suite: ueberfaellige Aufgaben */
.crs-nz.rot{ background:var(--scrm-kalt,#b3261e); color:#fff; }


/* ---- SCHWARZ: Modale, Menues und Popups ---- */
/* Aus den hellen Regeln erzeugt, die Flaeche oder Schrift fest gesetzt
   hatten. Die hellen Regeln bleiben unveraendert — hier steht nur, was
   im Schwarzen anders sein muss. */
body.theme-dark .cau kbd,
body.theme-dark .cau-menue kbd{ background:var(--field); }
body.theme-dark .cau-menue{ color:var(--text); }
body.theme-dark .cau-menue button:hover,
body.theme-dark .cau-menue button:focus-visible{ background:var(--field); }