/* AufgabenplanerPlus — MAIN-Look (Glas-Spalten, Board-Hintergründe)
 *
 * Farbpalette 1:1 aus DispoConnect (`DispoConnect\ui_styles.py`), damit die
 * Suite einheitlich aussieht. Beim Ändern dort nachziehen — die Werte sind
 * bewusst dieselben, nicht „ungefähr gleich".
 */
:root {
  /* --- Basis (ui_styles.py:10-25) --- */
  --navy: #1E1F5B;            /* HEADER — Kopfzeile, Tabellenköpfe */
  --navy-hover: #2C2E6E;      /* Header-Hover */
  --primary: #008BA3;         /* TUERKIS — Primärbutton, Tab-Bar, Akzent */
  --primary-hover: #0A7C90;   /* TUERKIS_DUNKEL */
  --accent: #008BA3;          /* identisch zu --primary; beide Namen im Code in Gebrauch */
  --bg: #EEF0F4;              /* BG — App-Hintergrund */
  --text: #202020;            /* TEXT */
  --muted: #6B6F76;           /* GRAU — Sekundärtext */
  --border: #DCE0E6;          /* Rahmen/Trennlinien */
  --border-input: #C9CDD4;    /* Eingabefeld-Rahmen */
  --grid: #EBEDF0;            /* Gridlines in Tabellen */

  /* --- Priorität, als Ampel (ui_styles.py:20-23) --- */
  --danger: #D7263D;
  --prio-hoch: #D7263D;
  --prio-mittel: #F4A300;
  --prio-niedrig: #2E9E5B;    /* in DispoConnect GRÜN, nicht grau */
  --prio-keine: #9AA0A6;

  /* --- Alter einer Karte (objektlage_tab.py:32) --- */
  --alter-frisch: #2E9E5B;
  --alter-heute: #008BA3;
  --alter-alt: #F4A300;
  --alter-sehr-alt: #D7263D;

  /* --- Chips/Hervorhebungen --- */
  --chip-bg: #DCF2F5;
  --chip-rand: #7FCBD6;
  --chip-text: #0A5A66;
  --gelb-bg: #FFF6D9;         /* hervorgehoben */
  --gelb-rand: #F4A300;
  --rot-bg: #FDECEE;          /* fällig/Warnung */

  --shadow-card: 0 1px 2px rgba(16,24,64,.10), 0 2px 8px rgba(16,24,64,.06);
  --shadow-lift: 0 6px 18px rgba(16,24,64,.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(30,31,91,.25); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,31,91,.4); background-clip: content-box; }

/* ---- Buttons ---- */
.btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 500;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: #f4f5fb; box-shadow: 0 2px 6px rgba(16,24,64,.10); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn.ghost { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
.btn.ghost:hover { background: rgba(255,255,255,.30); }

/* ---- Header ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, #15163f, #1E1F5B 55%, #2E3192);
  color: #fff; padding: 0 20px; height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 2px 10px rgba(16,24,64,.25); position: sticky; top: 0; z-index: 40;
}
/* User-Menü hinter den Initialen (oben rechts) */
.avatar-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.avatar-btn:hover { background: rgba(255,255,255,.30); }
.topbar h1 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: 13px; opacity: .9; }
.topbar button.link { color: #fff; background: none; border: none; opacity: .85; font-size: 13px; }
.topbar button.link:hover { opacity: 1; text-decoration: underline; }

/* ---- Auth ---- */
.auth-bg { min-height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#00C9A7 0%,#008BA3 45%,#2E3192 100%); padding: 24px; }
.auth-wrap { width: 100%; max-width: 380px; background: #fff;
  border-radius: 16px; padding: 30px; box-shadow: 0 20px 60px rgba(16,24,64,.35); }
.auth-wrap h2 { margin: 0 0 4px; color: var(--navy); }
.auth-wrap .sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.auth-wrap label { display: block; margin: 14px 0 4px; font-size: 12px; color: var(--muted); }
.auth-wrap input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.auth-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,49,146,.12); }
.auth-wrap .btn { width: 100%; margin-top: 18px; padding: 11px; }
.auth-wrap .switch { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.auth-wrap .switch a { color: var(--primary); cursor: pointer; font-weight: 600; }
.error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 16px; }

/* ---- Board-Liste ---- */
.page { padding: 24px; max-width: 1100px; margin: 0 auto; }
.page h2 { color: var(--navy); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.board-card { background: #fff; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-card); transition: transform .1s ease, box-shadow .15s ease; }
.board-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.board-card .banner { height: 78px; background-size: cover; background-position: center; }
.board-card .body { padding: 12px 14px 14px; }
.board-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 15px; }
.board-card .meta { color: var(--muted); font-size: 12px; }
.board-card .role { display: inline-block; margin-top: 8px; font-size: 11px; padding: 2px 8px;
  border-radius: 10px; background: #EEF0F6; color: var(--muted); }
.new-board { display: flex; align-items: center; justify-content: center; min-height: 150px;
  border: 2px dashed #C7CCDB; color: var(--primary); font-weight: 600; background: #fff;
  border-radius: 14px; cursor: pointer; }
.new-board:hover { background: #f6f7fc; }

/* ---- Board-Toolbar ---- */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; position: sticky;
  top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 35; }
.toolbar .title { font-weight: 700; color: var(--navy); font-size: 16px; }
.toolbar .spacer { flex: 1; }
.toolbar input.search { padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; min-width: 190px; }
.toolbar input.search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,49,146,.12); }
.viewswitch { display: inline-flex; background: #EDEFF6; border-radius: 9px; padding: 3px; }
.viewswitch button { border: none; background: transparent; padding: 6px 13px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 13px; }
.viewswitch button.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(16,24,64,.16); }

/* ---- View-Fläche (trägt den Board-Hintergrund) ---- */
#view { min-height: calc(100vh - 113px); }

/* ---- Kanban ---- */
.board-scroll { padding: 18px; overflow-x: auto; }
.columns { display: flex; gap: 16px; align-items: flex-start; min-height: 60vh; }
.column { width: 282px; flex: 0 0 auto; border-radius: 22px; display: flex; flex-direction: column; max-height: calc(100vh - 160px);
  background: rgba(255,255,255, var(--col-alpha, .14));
  backdrop-filter: blur(var(--col-blur, 4px)) saturate(155%);
  -webkit-backdrop-filter: blur(var(--col-blur, 4px)) saturate(155%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 10px 30px rgba(8,12,40,.22), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.12); }
.column .col-head { text-shadow: 0 1px 3px rgba(255,255,255,.7); }
.column .col-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; font-weight: 700; color: var(--navy); }
.column .col-head .count { color: var(--muted); font-weight: 600; font-size: 12px;
  background: rgba(30,31,91,.08); border-radius: 10px; padding: 1px 9px; }
.column .col-body { padding: 4px 10px 6px; overflow-y: auto; flex: 1; min-height: 12px; }
.column .add-card { margin: 4px 10px 12px; font-size: 13px; color: var(--primary); cursor: pointer; font-weight: 600; padding: 6px; border-radius: 8px; }
.column .add-card:hover { background: rgba(46,49,146,.08); }

/* Karte: Glas + Fälligkeits-Tönung (rötlich/orange/grün) wie im Desktop.
   Die Tönung liegt als eigene Farbschicht ÜBER dem Glas → die Transparenz
   bleibt erhalten, der Farbton ist aber immer sichtbar (unabhängig vom Glas-Regler). */
.kcard { --tint: 255,255,255; --slider: transparent; --glasbase: 255,255,255;
  background: linear-gradient(0deg, rgba(var(--tint),.34), rgba(var(--tint),.34)),
              linear-gradient(0deg, rgba(var(--glasbase),.45), rgba(var(--glasbase),.45)),
              rgba(var(--glasbase), var(--card-alpha, .55));
  backdrop-filter: blur(var(--card-blur, 8px));
  -webkit-backdrop-filter: blur(var(--card-blur, 8px));
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  border: 1px solid rgba(224,224,224,.9); border-left: 5px solid var(--slider);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .12s ease; }
.kcard:hover { transform: translateY(-2px); border-color: var(--primary);
  background: linear-gradient(0deg, rgba(var(--tint),.4), rgba(var(--tint),.4)), rgba(var(--glasbase),.95);
  box-shadow: 0 5px 16px rgba(0,0,0,.22); border-left-color: var(--slider); }
/* Unschärfe-Regler auf 0 → Filter komplett aus, Schrift bleibt knackscharf */
#view.cardnoblur .kcard { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Desktop-Hülle (QtWebEngine): GPU-Compositing ist aus (Flacker-Fix), deshalb ist
   der backdrop-filter je Karte sehr teuer und macht das Board zäh/„versetzt“.
   Weichzeichner aus; Spalten dafür etwas deckender, damit sie ohne Glas sichtbar
   bleiben. Im echten Browser (GPU an) bleibt der Glas-Look. */
.qtshell .kcard, .qtshell .column { backdrop-filter: none; -webkit-backdrop-filter: none; }
.qtshell .column { background: rgba(255,255,255,.55); }
/* Fälligkeits-Status: Tönung (--tint) + linker Balken (--slider) – wie Desktop:
   überfällig=rot, heute=orange, offen/künftig=grün, erledigt/ohne Datum=grün+Pink-Balken */
.kcard.due-over  { --tint: 255,210,210; --slider: #D10000; }
.kcard.due-today { --tint: 255,230,192; --slider: #E67700; }
.kcard.due-ok    { --tint: 210,240,214; --slider: #1F8A30; }
.kcard.due-done  { --tint: 211,236,222; --slider: #C026D3; }
.kcard.due-none  { --tint: 218,238,223; --slider: #C026D3; }
.kcard.highlight { --tint: 255,238,176; --slider: #E0A800; }
/* Schrift hell auf KARTEN (Schalter in Hintergrund & Glas): dunkle Glas-Karten, weiße Schrift.
   Statusbalken/Status-Text in hellen Varianten (wie Desktop-Dunkel-Theme). */
#view.clight .kcard { --glasbase: 22,26,52; border-color: rgba(255,255,255,.25);
  box-shadow: 0 3px 12px rgba(0,0,0,.35); }
#view.clight .kcard:hover { border-color: rgba(255,255,255,.55); }
#view.clight .kcard.due-over  { --slider: #FF7B7B; }
#view.clight .kcard.due-today { --slider: #FFB84D; }
#view.clight .kcard.due-ok    { --slider: #5BE07A; }
#view.clight .kcard.due-done  { --slider: #F08CFF; }
#view.clight .kcard.due-none  { --slider: #F08CFF; }
#view.clight .kcard.highlight { --slider: #FFD96A; }
#view.clight .kcard .ktitle { color: #fff; }
#view.clight .kcard .krow { color: rgba(255,255,255,.9); }
#view.clight .kcard .kcount.over  { color: #FF9A9A; }
#view.clight .kcard .kcount.today { color: #FFC97E; }
#view.clight .kcard .kcount.soon  { color: rgba(255,255,255,.9); }
#view.clight .kcard .kmeasure { color: rgba(255,255,255,.85); }
#view.clight .kcard .kbar { background: rgba(255,255,255,.22); }
/* Schrift wie Desktop: Titel #111, Zeilen #333 – ohne Text-Schatten (sonst wirkt Fettes unscharf) */
.kcard .ktitle { font-weight: 700; font-size: 13px; line-height: 1.32; color: #111111; }
/* Fließtext-Zeilen statt Kästchen (Optik wie Desktop) */
.kcard .krow { margin-top: 3px; font-size: 11px; line-height: 1.35; color: #333333; }
.kcard .kstatus { font-weight: 600; color: var(--slider); margin-top: 5px; }
.kcard .kcount { margin-top: 4px; font-size: 11px; font-weight: 600; }
.kcard .kcount.over  { color: #D10000; }
.kcard .kcount.today { color: #E67700; }
.kcard .kcount.soon  { color: #333333; }
.kcard .kbar { margin-top: 7px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; }
.kcard .kbar > i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent, #00C9A7), var(--primary, #2E3192)); }
.kchips, .kfooter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kchips { margin-top: 7px; }
.kfooter { margin-top: 9px; }
.chip { font-size: 11px; background: #EEF0F6; color: #4a5066; border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.chip.cat { background: #E6F3F6; color: #08697d; }
.chip.person { background: #EDEAF7; color: #4a3c8c; }
.chip.prio-hoch { background: #FCE5E5; color: #c0282d; font-weight: 600; }
.chip.prio-mittel { background: #FCF1DC; color: #97640a; font-weight: 600; }
.chip.prio-niedrig { background: #EEF0F2; color: #5a6068; }
.due-pill { font-size: 11px; border-radius: 8px; padding: 2px 8px; background: #EEF0F4; color: #4a5066; white-space: nowrap; }
.due-pill.over { background: #FCE2E2; color: #c0282d; font-weight: 700; }
.due-pill.today { background: #FDEFD6; color: #95590a; font-weight: 700; }
.avatar { margin-left: auto; width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.sortable-ghost { opacity: .35; }
.sortable-drag { box-shadow: var(--shadow-lift) !important; }

/* ---- Kalender ---- */
.cal-nav { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; color: var(--navy); }
.cal-grid { display: grid; grid-template-columns: 46px repeat(7, 1fr); gap: 6px; padding: 8px 18px 18px; align-items: stretch; }
.cal-head { text-align: center; font-weight: 700; color: var(--muted); font-size: 12px; padding-bottom: 2px; }
.cal-head.kw { text-align: center; }
.cal-kw { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--accent); background: #EAF6F9; border-radius: 8px; }
.cal-cell { background: #fff; border: 1px solid var(--border); border-radius: 10px; min-height: 104px; padding: 7px;
  box-shadow: 0 1px 3px rgba(16,24,64,.08); display: flex; flex-direction: column; gap: 3px;
  min-width: 0; /* 1fr-Tracks: automatische Mindestbreite aushebeln, sonst sprengen lange Titel die Spalten */ }
.cal-cell.other { background: #F6F7FB; opacity: .72; }
.cal-cell.today { outline: 2px solid var(--accent); }
.cal-cell.drop { border-color: var(--primary); background: #EEF0FB; box-shadow: inset 0 0 0 2px rgba(46,49,146,.25); }
.cal-cell .daynum { font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-cell .ev { font-size: 11px; background: #EEF0F6; border-radius: 6px; padding: 3px 6px; cursor: grab;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.cal-cell .ev:active { cursor: grabbing; }
.cal-cell .ev.over { background: #FCE2E2; color: #c0282d; }

/* ---- Übersicht ---- */
.ov { padding: 20px; }
.ov .tiles { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ov .tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; min-width: 140px; box-shadow: 0 1px 3px rgba(16,24,64,.08); }
.ov .tile .num { font-size: 28px; font-weight: 800; color: var(--navy); }
.ov .tile .lbl { color: var(--muted); font-size: 12px; }
.ov .panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(16,24,64,.08); }
.ov .bar-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.ov .bar-row .name { width: 140px; font-size: 13px; font-weight: 600; }
.ov .bar-track { flex: 1; background: #EDEFF6; border-radius: 6px; height: 18px; overflow: hidden; }
.ov .bar { height: 18px; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 6px; }
.section-title { margin-top: 16px; font-weight: 700; color: var(--navy); font-size: 13px; }

/* ---- Modal ---- */
/* Kein backdrop-filter: unter abgeschaltetem GPU-Compositing (Flacker-Fix der
   .exe) muss ein Weichzeichner beim Scrollen laufend alles dahinter neu berechnen
   — das macht das Scrollen im geöffneten Dialog sehr träge. Das dunkle Overlay
   allein genügt zur Abhebung. */
.overlay { position: fixed; inset: 0; background: rgba(16,18,40,.5);
  display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 660px; padding: 24px; box-shadow: 0 24px 70px rgba(16,24,64,.4); }
.modal h3 { margin: 0 0 6px; color: var(--navy); }
.modal label { display: block; margin: 10px 0 3px; font-size: 12px; color: var(--muted); }
.modal input, .modal select, .modal textarea { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,49,146,.12); }
.modal textarea { min-height: 72px; resize: vertical; }
/* Notizfeld der Karte: hoch — das ist zum Schreiben da (Gerald) */
.card-modal .m-main textarea { min-height: 190px; }
.modal input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .spacer { flex: 1; }
.chk-item { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.chk-item input[type=text] { flex: 1; }
.att-item { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
/* Verlauf-Eintrag: lesbarer Block (Kopf + Text + Meta) statt einer Zeile */
.hist-item { font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--border); --hist-bg: #fff; }
.hist-item .meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
.hist-itop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hist-itop .hist-type { flex: 0 0 auto; }
.hist-itop .hist-subj { font-weight: 600; min-width: 0; word-break: break-word; }
.hist-itop .hist-actions { margin-left: auto; }
.hist-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; margin-top: 4px; }
.hist-text.clamp { max-height: 4.6em; overflow: hidden; position: relative; }
.hist-text.clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8em;
  background: linear-gradient(transparent, var(--hist-bg)); }
.hist-more { background: none; border: 0; padding: 2px 0; margin-top: 2px; cursor: pointer;
  color: var(--primary); font-size: 12px; font-weight: 600; }
.hist-more:hover { text-decoration: underline; }
.member-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.member-item .grow { flex: 1; }
.muted { color: var(--muted); }

/* ---- Hintergrund-Auswahl ---- */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 8px; }
.bg-sw { height: 58px; border-radius: 10px; cursor: pointer; background-size: cover; background-position: center;
  border: 3px solid transparent; box-shadow: 0 2px 6px rgba(16,24,64,.14); transition: transform .08s ease; }
.bg-sw:hover { transform: scale(1.04); }
.bg-sw.sel { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,49,146,.25); }

/* ---- Logo im Header ---- */
.topbar img.logo { height: 26px; width: auto; display: block; }

/* ---- Spaltenfarbe pro Status ---- */
.column { border-top: 4px solid var(--accent); }
.col-name { display: flex; align-items: center; gap: 8px; }
.col-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* ---- Karten-Dialog: farbiger Kopf + Status ---- */
.modal .mhead { margin: -24px -24px 18px; padding: 18px 22px 16px; border-radius: 16px 16px 0 0;
  color: #fff; display: flex; flex-direction: column; gap: 9px; }
.modal .mhead .mh-input { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-size: 17px; font-weight: 700; padding: 9px 12px; border-radius: 9px; width: 100%; }
.modal .mhead .mh-input::placeholder { color: rgba(255,255,255,.72); }
.modal .mhead .mh-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.modal .mhead .status-pill { align-self: flex-start; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.24); padding: 3px 11px; border-radius: 11px; }

/* ---- Checklisten-Fortschritt ---- */
.chk-progress { height: 7px; background: #EDEFF6; border-radius: 5px; overflow: hidden; margin: 6px 0 9px; }
.chk-bar { height: 7px; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 5px; transition: width .2s ease; }

/* ---- Helle Schrift über dem Hintergrund (für dunkle Bilder) ---- */
#view.tlight .col-head { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
#view.tlight .col-head .count { color: #fff; background: rgba(255,255,255,.22); }
#view.tlight .add-card { color: #fff; }
#view.tlight .add-card:hover { background: rgba(255,255,255,.18); }

/* ---- Helleres Overlay für Live-Vorschau der Glas-Regler ---- */
.overlay.light { background: rgba(16,18,40,.12); backdrop-filter: none; }

/* ---- Regler (Glas-Effekt) ---- */
.slider-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.slider-row label { margin: 0; width: 170px; font-size: 13px; color: var(--text); }
.slider-row input[type=range] { flex: 1; }
.slider-row .val { width: 48px; text-align: right; font-size: 12px; color: var(--muted); }
.toggle-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.toggle-row input[type=checkbox] { width: auto; }

/* ---- Fixierte Hintergrund-Ebene (kein background-attachment:fixed → kein iOS-Zoom) ---- */
#view { position: relative; }
#view.has-bg::before { content: ""; position: fixed; inset: 0; z-index: 0;
  background: var(--bg-img, #EEF1F7); background-size: cover; background-position: center; background-repeat: no-repeat; }
#view.has-bg > * { position: relative; z-index: 1; }

/* ---- Animierter Live-Verlauf als Hintergrund (auf der fixierten Ebene) ---- */
#view.bg-animated.has-bg::before { background-size: 400% 400%; animation: bgshift 22s ease infinite; }
@keyframes bgshift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Karten-Einflug beim Öffnen ---- */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.kcard.enter { animation: cardIn .38s cubic-bezier(.2,.7,.3,1) both; }

/* ---- Phase 1: reiche Karten + Board-Management + Einstellungen ---- */
/* Titelzeile mit Status-Icons */
.ktitle-row { display: flex; align-items: flex-start; gap: 8px; }
.ktitle-row .ktitle { flex: 1; }
.kicons { display: inline-flex; gap: 3px; font-size: 12px; flex: 0 0 auto; opacity: .9; }
.chip.team { background: #E7ECF7; color: #2E3192; }

/* Board-Kachel-Kopf mit Kebab */
.board-card .bhead { display: flex; align-items: flex-start; gap: 6px; }
.board-card .bhead h3 { flex: 1; }
.kebab { border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1;
  padding: 0 6px; border-radius: 6px; }
.kebab:hover { background: #EEF0F6; color: var(--primary); }
.menu-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.menu-list .btn { text-align: left; }

/* Wiedervorlage-Zeile im Karten-Dialog */
.rem-row { display: flex; align-items: center; gap: 6px; }
.rem-row input[type=date] { flex: 1; min-width: 0; }
.rem-row .btn { white-space: nowrap; flex: 0 0 auto; padding: 4px 8px; }

/* Verlauf: Typ-Auswahl */
.modal select.note-type { width: auto; flex: 0 0 auto; }

/* Einstellungen: Tabs */
.tabbar { display: flex; gap: 4px; margin: 12px 0 14px; border-bottom: 1px solid var(--border); }
.tabbar .tab { border: none; background: transparent; padding: 8px 14px; font-weight: 600; font-size: 13px;
  color: var(--muted); border-bottom: 2px solid transparent; }
.tabbar .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.set-panel { min-height: 220px; }

/* Spalten-Verwaltung */
.col-manage { display: flex; flex-direction: column; gap: 6px; }
.col-row { display: flex; align-items: center; gap: 6px; }
.col-row input[type=text] { flex: 1; }

/* ---- Phase 2: Web-Vorteile ---- */
/* Toast (dezenter Hinweis) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px;
  font-weight: 600; box-shadow: 0 8px 24px rgba(16,24,64,.35); opacity: 0;
  transition: opacity .25s ease, transform .25s ease; z-index: 999; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Diktat-Mikrofon */
.mic-btn { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 4px 9px;
  font-size: 14px; line-height: 1; flex: 0 0 auto; }
.mic-btn:hover { background: #f4f5fb; }
.mic-btn.rec { background: #FCE2E2; border-color: var(--danger); animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(209,0,0,.5); } 50% { box-shadow: 0 0 0 6px rgba(209,0,0,0); } }
.label-mic { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label-mic label { margin: 10px 0 3px; }
.mh-title { display: flex; align-items: center; gap: 8px; }
.mh-title .mh-input { flex: 1; }
.mh-title .mic-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.mh-title .mic-btn:hover { background: rgba(255,255,255,.30); }

/* Datei-Drag&Drop-Zone */
.dropzone { margin-top: 8px; border: 2px dashed #C7CCDB; border-radius: 10px; padding: 14px;
  text-align: center; color: var(--muted); font-size: 13px; background: #FAFBFE;
  transition: background .12s ease, border-color .12s ease; }
.dropzone.over { border-color: var(--primary); background: #EEF0FB; color: var(--primary); }
.note-row { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.note-row input[type=text] { flex: 1; }

/* ---- Phase 3 / Feinschliff: schwebende Mail-Drop-Zone (unten rechts) ---- */
  background: #fff; border: 2px dashed #C7CCDB; border-radius: 16px; padding: 10px 14px;
  box-shadow: var(--shadow-lift); color: var(--muted); font-size: 13px; font-weight: 600;
  transition: transform .12s ease, border-color .12s ease, background .12s ease; cursor: default; }

/* ---- Feinschliff: aktiver Toolbar-Button (z.B. Archiv an) ---- */
.btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Feinschliff: Kontextmenü (Rechtsklick auf Karte) ---- */
.ctx-menu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lift); padding: 6px; min-width: 200px; display: flex; flex-direction: column; }
.ctx-item { border: none; background: transparent; text-align: left; padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); }
.ctx-item:hover { background: #EEF0F6; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: #FCE5E5; }

/* ---- Feinschliff: archivierte Karte ---- */
.kcard.archived { opacity: .62; }
.kcard.archived .ktitle { text-decoration: none; }

/* ---- Parität: letzte Maßnahme, HV-Chip, Verlauf-Aktionen, Statistik ---- */
/* Letzte Maßnahme: schlichter Fließtext wie Desktop – KEIN hinterlegtes Kästchen */
.kcard .kmeasure { margin-top: 5px; font-size: 11px; color: #333333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.hv { background: #EAF6F9; color: #08697d; }
.hist-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.dl-row { display: grid; grid-template-columns: 1fr 70px 70px 70px; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dl-row .name { font-weight: 600; }
.dl-row span:not(.name) { text-align: right; color: var(--muted); }
.dl-row.dl-head { font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--border); }
.dl-row.dl-head span:not(.name) { color: var(--navy); }
.ov .panel { margin-bottom: 16px; }
.ov .tile.t-over .num { color: var(--prio-hoch); }
.ov .tile.t-today .num { color: #E8780A; }
.ov .tile.t-week .num { color: #B8860B; }
.ov .tile.t-none .num { color: var(--muted); }
.ov .tile.t-done .num { color: #2E9E5B; }

/* ---- Auswertung / Dashboard ---- */
.ov-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(16,24,64,.08); }
.ov-filters label { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ov-filters select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.ov .tile.clickable { cursor: pointer; transition: transform .08s ease, box-shadow .12s ease; }
.ov .tile.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.ov .tile.sel { outline: 2px solid var(--primary); }
.bar-row .num2 { min-width: 66px; text-align: right; font-weight: 600; font-size: 12px; color: var(--muted); }
.ov-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.ov-li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.ov-li:hover { background: #F4F5FB; }
.ov-li .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ov-li .ti { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-li .mut { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tc-chart { display: flex; align-items: flex-end; gap: 2px; height: 150px; overflow-x: auto; padding-top: 8px; }
.tc-col { flex: 1 0 14px; min-width: 14px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.tc-fill { width: 70%; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 3px 3px 0 0; min-height: 2px; }
.tc-lbl { font-size: 9px; color: var(--muted); margin-top: 3px; height: 12px; white-space: nowrap; }

/* ---- Sprung aus der Übersicht: Karte mit dicker, verblassender Umrandung hervorheben ---- */
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 4px rgba(34,255,120,1), 0 0 22px 7px rgba(34,255,120,.85), 0 8px 26px rgba(8,12,40,.35); }
  60%  { box-shadow: 0 0 0 4px rgba(34,255,120,.85), 0 0 20px 6px rgba(34,255,120,.55), 0 8px 24px rgba(8,12,40,.2); }
  100% { box-shadow: 0 0 0 4px rgba(34,255,120,0), 0 0 22px 7px rgba(34,255,120,0), 0 8px 26px rgba(8,12,40,0); }
}
.kcard.flash { animation: cardFlash 3s ease-out forwards; position: relative; z-index: 5; }

/* ---- Archiv-Spalte ---- */
.column.archiv-col { background: rgba(180,185,195,.16); }
.column.archiv-col .col-head { color: #5a6068; }
.arch-search-wrap { padding: 2px 10px 6px; }
.arch-search { width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: rgba(255,255,255,.85); }
.arch-search:focus { outline: none; border-color: var(--primary); }

/* ---- Eigenes Board-Logo in der Topbar ---- */
.topbar img.logo { max-width: 180px; object-fit: contain; }

/* ---- Verwaltung: Teams ---- */
.team-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.team-members .chip { display: inline-flex; align-items: center; gap: 4px; }
.member-item .chip { margin-left: 4px; }

/* ---- Phase 4: KI-Vorschläge ---- */
.ki-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.ki-btn { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; border: none; }
.ki-btn:hover { filter: brightness(1.08); }
.ki-btn:disabled { opacity: .7; cursor: default; }

/* ---- Mobil / Responsive ---- */
/* ---- Mobile: Agenda-Kalender ---- */
.agenda { padding: 10px 12px 28px; max-width: 720px; margin: 0 auto; }
.agenda-day { position: sticky; top: 0; z-index: 1; background: #EEF1F7; font-weight: 700; color: var(--navy);
  font-size: 13px; padding: 9px 4px 6px; border-bottom: 2px solid var(--border); }
.agenda-day.over { color: var(--prio-hoch); }
.agenda-day.today { color: #E8780A; }
.agenda-item { display: flex; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
.agenda-item:active { background: #F0F2F8; }
.agenda-item .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.agenda-item .ti { flex: 1; font-size: 14px; }

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  .topbar { gap: 8px; padding: 0 12px; height: 50px; }
  .topbar h1 { display: none; }
  .topbar img.logo { height: 22px; }
  .topbar .user { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar { gap: 6px; padding: 8px 10px; }
  .toolbar .title { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar input.search { min-width: 0; flex: 1 1 100%; order: 5; }
  .toolbar .viewswitch { order: 6; }
  .toolbar .btn, .toolbar .btn.small, .viewswitch button { min-height: 38px; }
  .board-scroll { padding: 10px; }
  .columns { gap: 10px; }
  .column { width: 86vw; max-width: 340px; max-height: calc(100vh - 150px); }
  .overlay { padding: 10px 6px; }
  .modal { max-width: 100%; padding: 16px; border-radius: 12px; }
  .modal .mhead { margin: -16px -16px 14px; padding: 14px 16px 12px; }
  .row2 { grid-template-columns: 1fr; gap: 8px; }
  .modal-actions { flex-wrap: wrap; }
  .ctx-menu { min-width: 230px; }
  .ctx-item { padding: 11px 12px; }
  .page { padding: 14px; }
  .ov-filters { gap: 6px; }
  .ov .tiles { gap: 8px; }
  .ov .tile { flex: 1 1 44%; min-width: 0; padding: 12px 10px; }
}


/* ---- Karten-Modal: Verlauf als Seitenpanel (ein-/ausklappbar) ---- */
.modal.card-modal.hist-open { max-width: 1060px; }
.m-cols { display: flex; gap: 20px; align-items: stretch; }
.m-cols .m-main { flex: 1 1 auto; min-width: 0; }
.hist-panel { display: none; }
/* Optisch abgesetzte Verlauf-Karte: eigener Hintergrund, nur so lang wie der Inhalt */
.card-modal.hist-open .hist-panel { display: flex; flex: 0 0 350px; flex-direction: column; min-width: 0;
  background: #F3F5FB; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px;
  position: sticky; top: 0; align-self: flex-start; max-height: calc(100vh - 190px); }
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hist-body { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 4px; }
.hist-body .hist-scroll { overflow-y: auto; flex: 1; min-height: 60px; margin-top: 8px; padding-right: 4px; }
.hist-body .hist-item { border-bottom-color: #E2E5F0; --hist-bg: #F3F5FB; }
.mh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mh-row .status-pill { align-self: center; }
/* Verlauf-Schalter: immer sichtbar, immer an derselben Stelle; "on" = Panel offen */
.hist-open-btn { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 11px; cursor: pointer; }
.hist-open-btn:hover { background: rgba(255,255,255,.32); }
.hist-open-btn.on { background: #fff; color: var(--navy); border-color: #fff; }

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  .modal.card-modal.hist-open { max-width: 100%; }
  .m-cols { display: block; }
  .card-modal.hist-open .hist-panel { position: static; max-height: 320px; margin-top: 14px; }
}

/* Im schmalen Verlauf-Panel: Eingabezeile zweizeilig (Dropdown oben, Text+Knöpfe darunter) */
.hist-body .note-row { flex-wrap: wrap; }
.hist-body .note-row select.note-type { flex: 1 1 100%; width: 100%; }
.hist-body .note-row input[type=text] { min-width: 0; }

/* Diktat-Knopf im Kartenkopf + Zielfeld-Markierung */
.mh-tools { display: flex; gap: 8px; align-items: center; }
/* X rechts oben im farbigen Kartenkopf */
.mh-close { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); color: #fff;
  border-radius: 8px; padding: 5px 11px; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1; }
.mh-close:hover { background: rgba(255,255,255,.32); }
/* „Weitere Felder"-Klappe im Mobil-Dialog */
.more-fields { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px 10px; background: #fafbff; }
.more-fields > summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 8px 0; user-select: none; }
.more-fields[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.hist-open-btn.mic-head.rec { background: #E03131; border-color: #E03131; color: #fff; animation: micpulse 1s ease-in-out infinite; }
.dictate-target { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(224,49,49,.18) !important; }

/* Erinnerungs-Dialog (In-App, unabhaengig von Browser-Benachrichtigungen) */
.rem-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rem-link { flex: 1; cursor: pointer; color: var(--primary); font-weight: 600; font-size: 13px; }
.rem-link:hover { text-decoration: underline; }
.toolbar .btn.rem-alert { border-color: var(--danger); color: var(--danger); font-weight: 700; }

/* ---- Erinnerungs-Sprung: NEONGELB (nur Erinnerungen; Uebersicht bleibt gruen) ---- */
@keyframes cardFlashGelb {
  0%   { box-shadow: 0 0 0 4px rgba(255,230,0,1), 0 0 22px 7px rgba(255,230,0,.9), 0 8px 26px rgba(8,12,40,.35); }
  60%  { box-shadow: 0 0 0 4px rgba(255,230,0,.85), 0 0 20px 6px rgba(255,230,0,.55), 0 8px 24px rgba(8,12,40,.2); }
  100% { box-shadow: 0 0 0 4px rgba(255,230,0,0), 0 0 22px 7px rgba(255,230,0,0), 0 8px 26px rgba(8,12,40,0); }
}
.kcard.flash.flash-gelb { animation-name: cardFlashGelb; }

/* Kalender-Sprung: Eintrag/Agenda-Zeile hervorheben (gruen wie Board-Sprung) */
.ev.flash, .agenda-item.flash { animation: cardFlash 3s ease-out forwards; position: relative; z-index: 5; }

/* Doppelklick zum Oeffnen: keine Textauswahl auf Karten */
.kcard { user-select: none; }

/* ---- Anhang-Vorschau ---- */
.modal.att-preview { max-width: min(920px, 94vw); }
.att-prev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.att-prev-head .spacer { flex: 1; }
.att-prev-head a.btn { text-decoration: none; }
.att-item a.btn { text-decoration: none; }

/* Karten-Symbol "mit E-Mail verknuepft": schlichtes Kuvert statt 📧 (war schwer erkennbar) */
.kicons .ic-mail { color: var(--primary); font-size: 15px; font-weight: 700; line-height: 1; }

/* Vorlagen-Picker */
.tpl-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tpl-use { flex: 1; text-align: left; border: none; background: transparent; padding: 6px 4px; border-radius: 6px; cursor: pointer; color: var(--text); }
.tpl-use:hover { background: #f3f5fb; }

/* ---- Karten-Cover (Foto als Vorschaubild) ---- */
.kcover { height: 116px; margin: -2px -2px 8px; border-radius: 11px 11px 0 0;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.kcard.has-cover { overflow: hidden; }

/* ---- WIP-Limit ---- */
.col-head .count.wip-over { background: var(--danger); color: #fff; font-weight: 700; }
.column.wip-over-col { box-shadow: 0 0 0 2px rgba(209,0,0,.45), 0 10px 30px rgba(8,12,40,.22); }
.att-item .btn.small.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.col-row input[type=number] { padding: 6px; border: 1px solid var(--border); border-radius: 8px; }

/* ---- Swimlanes (Zeilen nach Feld) ---- */
.swim-select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; color: var(--text); max-width: 190px; }
.swimlane { margin-bottom: 14px; }
.swimlane-head { font-weight: 700; color: var(--navy); font-size: 13px; padding: 6px 12px; margin: 0 0 6px;
  background: rgba(255,255,255,.82); border-radius: 10px; display: inline-block;
  box-shadow: 0 1px 4px rgba(16,24,64,.12); position: sticky; left: 8px; }
.swimlane .columns { min-height: 0; }
.swimlane .column { max-height: none; }

/* ---- Automatisierungs-Regeln ---- */
.rule-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rule-build { background: #F7F8FC; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 6px; }
.rule-build label { display: block; margin: 4px 0 4px; font-size: 12px; color: var(--muted); }
.rule-act-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.rule-act-row select { flex: 0 0 auto; }
.rule-act-row .rule-val { flex: 1; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; }

/* ═══════════ Mobil-Modus (Handy < 640px) ═══════════ */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar h1 { display: none; }
  .topbar .logo { height: 26px; }

  /* Aufgeräumte 2-Zeilen-Toolbar */
  .toolbar.mtoolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px; top: 56px; }
  .mtoolbar .mrow1 { display: flex; align-items: center; gap: 8px; }
  .mtoolbar .mrow1 .title { font-size: 15px; }
  .mtoolbar .mviewswitch { width: 100%; display: flex; }
  .mtoolbar .mviewswitch button { flex: 1; }
  .mtoolbar .msearch input.search { width: 100%; min-width: 0; }
  .mtoolbar .btn { padding: 7px 10px; }

  /* Board als eine Spalte mit Tabs */
  .board-scroll { padding: 0; overflow: visible; }
  .mboard { padding: 10px 12px 80px; }
  .mcol-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }
  .mcol-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--text);
    font-size: 13px; font-weight: 600; box-shadow: 0 1px 3px rgba(16,24,64,.12); }
  .mcol-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
  .mcol-tab .mcol-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .mcol-tab.active .mcol-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
  .mcol-tab .mcol-n { font-size: 11px; opacity: .8; }
  .mcol-list { display: flex; flex-direction: column; gap: 10px; }
  .mcol-list .kcard { width: auto; max-width: none; }

  /* Karten gut lesbar: etwas kräftigere Glasbasis am Handy */
  .kcard { --glasbase: 255,255,255; }

  /* Dialoge: fast Vollbild, große Tap-Ziele */
  .modal { max-width: 100%; }
  .ctx-menu { min-width: 240px; }
  .ctx-item { padding: 13px 14px; font-size: 15px; }

  /* Mail-FAB etwas kleiner, stört die Tabs nicht */
}

/* ---- Fälligkeits-Filter (Desktop + Mobil) ---- */
.due-filter { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; color: var(--text); max-width: 175px; }
.due-filter.on { border-color: var(--primary); color: var(--primary); font-weight: 600; background: #f2f3fc; }

/* ---- Swimlane-Häkchenfilter (wie Excel-Autofilter) ---- */
.swimfilter-btn { padding: 6px 11px; font-size: 13px; white-space: nowrap; }
.swimfilter-btn.on { border-color: var(--primary); color: var(--primary); font-weight: 600; background: #f2f3fc; }
.swim-filter-pop { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lift); padding: 8px; width: 250px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 6px; }
.swimf-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 2px; }
.swimf-search { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.swimf-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 0; }
.swimf-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.swimf-item:hover { background: #EEF0F6; }
.swimf-item input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; }
.swimf-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swimf-all { font-weight: 600; }
.swimf-actions { display: flex; align-items: center; gap: 6px; }
.swimf-actions .spacer { flex: 1; }

/* ═══════════ Mobil/Tablet (≤ 1024px) – Ergänzungen ═══════════ */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  /* Filterzeile unter dem Ansichtsumschalter */
  .mtoolbar .mfilter { display: flex; gap: 8px; flex-wrap: wrap; }
  .mtoolbar .mfilter .due-filter { flex: 1; max-width: none; }
  .mtoolbar .mfilter .swim-select { flex: 1; max-width: none; }
  .mtoolbar .mfilter .swimfilter-btn { flex: 1 0 100%; }

  /* Swimlane-Abschnitte in der Mobil-Spalte */
  .mlane-head { font-weight: 700; font-size: 13px; color: var(--text);
    background: rgba(255,255,255,.72); border-radius: 8px; padding: 7px 11px;
    margin: 6px 0 0; backdrop-filter: blur(3px); }

  /* Handy-Gesten auf Karten: horizontal wischen gehört uns, vertikal scrollt die Liste */
  .kcard.kgesture { touch-action: pan-y; }
  .kcard.swipe-go { outline: 2px solid #1F8A30; outline-offset: 2px; }

  /* Home-Bildschirm-App: letzte Karte nicht hinter dem iPhone-Home-Balken */
  .mboard { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* Datumsfelder: kein grauer iOS-Hintergrund, der über die Karte ragt */
  .modal input[type=date], .modal input[type=text], .modal input[type=number], .modal select, .modal textarea {
    width: 100%; max-width: 100%; box-sizing: border-box; }
  .modal input[type=date] { -webkit-appearance: none; appearance: none; background: #fff;
    border: 1px solid var(--border); border-radius: 8px; padding: 9px; text-align: left; min-height: 40px; }

  /* Karten-Detail vollflächig (wie eine eigene Seite) */
  .overlay { padding: 0; }
  .modal.card-modal { max-width: 100%; width: 100%; min-height: 100vh; border-radius: 0; padding: 16px 14px 28px; }
  .modal.card-modal .mhead { margin: -16px -14px 14px; border-radius: 0; }
  .modal:not(.card-modal) { margin: 16px; max-width: calc(100% - 32px); }

  /* Knopfleiste mobil: Schließen/Speichern zuerst, 3 pro Zeile, Löschen am Ende */
  .modal-actions.mobile-actions { flex-wrap: wrap; gap: 8px; }
  .modal-actions.mobile-actions .btn { flex: 1 1 calc(33.33% - 6px); min-width: 0; padding: 11px 8px; }
}

/* ===== Prioritäten (Eisenhower) & Schwerpunkte (Pareto) — Analyse-Ansichten ===== */
.prio-view, .pareto-view { --card-alpha: .97; --card-blur: 0px; max-width: 1180px; margin: 0 auto; }
.prio-view .kcard, .pareto-cards .kcard { width: 235px; margin-bottom: 0; }

.prio-hint { font-size: 12px; color: var(--muted); margin: 0 2px 14px; }
.prio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prio-quad { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--qc, var(--muted));
  border-radius: 14px; padding: 12px 14px 14px; box-shadow: 0 1px 3px rgba(16,24,64,.08); min-height: 130px; }
.prio-quad.q-do    { --qc: #D10000; }
.prio-quad.q-plan  { --qc: #1F8A30; }
.prio-quad.q-deleg { --qc: #E67700; }
.prio-quad.q-later { --qc: #8B9099; }
.prio-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prio-head .pq-icon { font-size: 20px; line-height: 1; }
.prio-head .pq-tt { flex: 1; min-width: 0; }
.prio-head .pq-title { font-weight: 800; color: var(--navy); font-size: 15px; }
.prio-head .pq-sub { font-size: 11px; color: var(--muted); }
.prio-head .pq-count { font-weight: 800; font-size: 17px; color: var(--qc, var(--navy));
  background: rgba(30,31,91,.06); border-radius: 9px; padding: 1px 11px; }
.prio-cards { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.pq-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }
.prio-bar { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; flex-wrap: wrap; }
.prio-bar .prio-hint { margin: 0; }
.prio-grid.list { grid-template-columns: 1fr; }
.prio-rows { display: flex; flex-direction: column; gap: 1px; }
.prio-li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px;
  cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); }
.prio-li:last-child { border-bottom: none; }
.prio-li:hover { background: #F4F5FB; }
.prio-li .pl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #8B9099; }
.prio-li.due-over .pl-dot { background: #D10000; }
.prio-li.due-today .pl-dot { background: #E67700; }
.prio-li.due-ok .pl-dot { background: #1F8A30; }
.prio-li .pl-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.prio-li .pl-prio { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.prio-li .pl-meta { color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }

.pareto-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pareto-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.pareto-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.pareto-legend .lg.sp::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary)); }
.pareto-list { display: flex; flex-direction: column; gap: 8px; }
.pareto-group { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,64,.06); }
.pareto-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.pareto-row:hover { background: #F4F5FB; }
.pareto-row .pr-caret { color: var(--muted); width: 12px; flex: 0 0 auto; }
.pareto-row .pr-name { width: 175px; flex: 0 0 auto; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pareto-row .pr-track { flex: 1; height: 16px; background: rgba(30,31,91,.07); border-radius: 8px; overflow: hidden; }
.pareto-row .pr-fill { height: 100%; border-radius: 8px; background: #B7BDD0; transition: width .2s ease; }
.pareto-row.schwerpunkt .pr-fill { background: linear-gradient(90deg, var(--accent), var(--primary)); }
.pareto-row .pr-hot { color: #D10000; font-weight: 700; flex: 0 0 auto; }
.pareto-row .pr-num { width: 92px; text-align: right; font-weight: 700; color: var(--navy); flex: 0 0 auto; }
.pareto-cards { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 14px 14px;
  background: #FAFBFE; border-top: 1px solid var(--border); }

@media (max-width: 1024px) {
  .prio-grid { grid-template-columns: 1fr; }
  .prio-view .kcard, .pareto-cards .kcard { width: 100%; }
  .pareto-row .pr-name { width: 108px; }
  .pareto-row .pr-num { width: 72px; }
}

/* Startboard-Kennzeichnung in der Board-Liste. Persönliche Einstellung, deshalb
   für jede Rolle sichtbar — nicht nur für Besitzer wie das ⋯-Menü. */
.startboard { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 2px 4px; color: var(--muted); transition: color .15s, transform .15s; }
.startboard:hover { color: var(--prio-mittel); transform: scale(1.15); }
.startboard.an { color: var(--prio-mittel); }