:root {
  --accent: #ef7c00;
  --bg: #ffffff;
  --bg-alt: #f9f9f9;
  --item: #eee;
  --item-hover: #ddd;
  --text: #111;
  --muted: #666;
  --danger: #f44336;
  --ok: #2e7d32;
}

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, sans-serif; }
* { box-sizing: border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* alles mit print-only standardmäßig ausblenden */
.print-only { display: none !important; }

.header { background: var(--accent); color: #fff; padding: 20px 16px; position: sticky; top: 0; z-index: 5; }
.header .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.brand-logo { height: 48px; width: auto; display: block; }
#projectTitle { margin: 0; font-size: 28px; line-height: 1.1; text-align: center; }
#projectTitle[contenteditable="true"]:focus { outline: 2px dashed rgba(255,255,255,.85); background: rgba(255,255,255,.12); border-radius: 8px; padding: 2px 6px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; }

#newTodo, #newTag, #newTagSelect, #newPrio {
  padding: 10px; border: none; border-radius: 6px; font-size: 16px;
}
#newTodo, #newTag, #newTagSelect { flex: 1 1 180px; min-width: 180px; }

.btn { border: none; border-radius: 6px; padding: 10px 14px; cursor: pointer; background: #000; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.btn-danger { background: var(--danger); }
.btn-ghost  { background: #f0f0f0; color: #111; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.head-icon { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px; }
.head-icon i { font-size: 16px; }

.toolbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.filters { display: inline-flex; background: #f0f0f0; border-radius: 999px; overflow: hidden; }
.filters button { background: transparent; border: none; padding: 6px 12px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1px #ddd inset; }
select { padding: 6px 10px; border-radius: 6px; border: 1px solid #ddd; background: #fff; }

.counter { color: var(--muted); margin-left: auto; }

ul { list-style: none; margin: 0; padding: 0 16px 60px; }

/* Listen-Items */
li.todo {
  position: relative; background: var(--item);
  margin: 10px 0; padding: 12px 14px 12px 92px; border-radius: 10px;
  display: flex; align-items: center;
}
li.todo:nth-child(odd) { background: var(--bg-alt); }
li.todo:hover { background: var(--item-hover); }
.drag-handle.icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: transparent; cursor: grab; }
.drag-handle.icon:active { cursor: grabbing; }
.drag-handle.icon i { font-size: 18px; color: #666; }
.drag-handle[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.toggle.icon { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; }
.toggle.icon i { font-size: 20px; color: #555; }
.todo.done .toggle.icon i { color: var(--ok); }
.todo.dragging { opacity: .6; }
.title { flex: 1 1 auto; margin-right: 8px; }
.actions { display: inline-flex; gap: 6px; }
.icon { background: transparent; border: none; cursor: pointer; }
.icon i { font-size: 16px; }
.badge { font-size: 12px; padding: 2px 6px; border-radius: 999px; background: #ececec; margin-left: 8px; cursor: pointer; }

/* Inline-Edit Optik */
.todo.editing { outline: 2px dashed #bbb; }
.todo.editing .title { background:#fff; box-shadow: inset 0 0 0 1px #ddd; padding:2px 4px; border-radius:4px; }

.empty { text-align: center; color: var(--muted); padding: 32px 16px; }

.footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: #fff; border-top: 1px solid #eee; display: flex; gap: 8px; align-items: center; }

/* Kategorie-Header */
li.anchor { list-style: none; margin: 22px 0 6px; padding: 0 4px; background: transparent; }
li.anchor .cat-header { display: flex; align-items: center; gap: 8px; }
li.anchor h3 { margin: 0; font-size: 16px; color: var(--muted); flex: 1; }
.cat-controls { display: inline-flex; gap: 6px; align-items: center; }
.cat-controls select { padding: 4px 8px; border-radius: 6px; border: 1px solid #ddd; font-size: 13px; }
.cat-controls .cat-rename { background: transparent; border: none; cursor: pointer; }
.cat-controls .cat-rename i { font-size: 14px; color: #555; }
.cat-controls .cat-rename:hover i { color: #000; }

/* Drop-Indikator (Liste) */
li.drop-marker { position: relative; list-style: none; height: 0; margin: 6px 0; pointer-events: none; }
li.drop-marker::after { content: ""; position: absolute; left: 92px; right: 8px; top: -1px; border-top: 2px dashed var(--accent); }

/* Priorität: Farbmapping für Icons (deine Vorgabe) */
.prio[data-prio="5"] i { color: #ef7c00; } /* orange Stern */
.prio[data-prio="4"] i { color: #f57c00; } /* orange Quadrat (Icon-Ersatz: Kreis gefärbt) */
.prio[data-prio="3"] i { color: #000000; } /* schwarzes Quadrat (Icon-Ersatz: bullseye) */
.prio[data-prio="2"] i { color: #999999; } /* schwarzer/grauer Kreis */
.prio[data-prio="1"] i { color: #999999; } /* grauer Kreis */

/* Fälligkeits-Badge */
.due-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: #ececec; margin-left: 8px; cursor: pointer; }
.due-badge i { font-size: 12px; }
.due-badge.overdue { background: #ffe6e6; color: #a40000; }
.due-badge.today   { background: #fff3e0; color: #8a4b00; }
.due-badge.week    { background: #e8f5e9; color: #1b5e20; }
.due-badge.empty   { background: #f5f5f5; color: #666; opacity: .9; }

/* Hinweis-Chip */
.filter-info { background: #f0f0f0; border-radius: 999px; padding: 4px 10px; font-size: 14px; color: #444; display: inline-flex; align-items: center; gap: 6px; }
.filter-info .chip-close { border: none; background: transparent; cursor: pointer; padding: 2px; line-height: 0; }
.filter-info .chip-close i { font-size: 14px; }
.filter-info .chip-close:hover { opacity: .8; }

/* Modal (Date-Picker) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal .dialog { background: #fff; border-radius: 12px; padding: 16px; width: 90%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal .dialog h3 { margin: 0 0 8px; }
.dialog-body { display: flex; align-items: center; gap: 10px; }
#dueInput { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.dialog-body .hint { font-size: 12px; color: #666; }
.dialog-actions { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.dialog-actions .spacer { flex: 1; }

/* Drag&Drop Import Overlay */
.drop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.drop-overlay[hidden] { display: none; }
.drop-inner { background: #fff; color: #111; padding: 24px 28px; border-radius: 12px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.drop-inner i { font-size: 28px; display:block; margin-bottom: 8px; }

/* Mini-Menü (Buttons + Checks) */
.menu-popover { position: fixed; min-width: 240px; background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.20); z-index: 1100; }
.menu-popover button { width: 100%; background: transparent; border: none; padding: 8px 10px; text-align: left; cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.menu-popover button:hover { background: #f6f6f6; }
.menu-popover hr { border: none; border-top: 1px solid #eee; margin: 6px 0; }

/* Checkbox-Zeilen im Menü */
.menu-popover .menu-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 14px; }
.menu-popover .menu-check:hover { background: #f6f6f6; cursor: pointer; }
.menu-popover .menu-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.menu-popover .spacer { flex: 1; }

/* Print */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .print-only { display: block !important; }

  .header .row,
  .header .brand,
  .toolbar,
  .footer,
  .drag-handle,
  .actions,
  .toggle.icon,
  .modal,
  .drop-overlay,
  .menu-popover { display: none !important; }

  #printHeader { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  #printHeader .ph-left { background: var(--accent); padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; }
  #printHeader .ph-left img { height: 28px; width: auto; display:block; }
  #printHeader .ph-right { text-align: right; }
  #printHeader h2 { margin: 0; font-size: 18px; }
  #printHeader #printDate, #printHeader #printMeta { font-size: 12px; color: #333; }

  ul { padding: 0; }
  li.todo {
    background: transparent; border: 1px solid #000; border-radius: 6px;
    padding: 8px 10px 8px 28px; margin: 8px 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  li.todo::before { content: "☐"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; }
  li.todo.done::before { content: "☑"; }

  li.anchor { margin: 18px 0 6px; padding: 0; }
  li.anchor h3 { margin: 0; color: #000; page-break-after: avoid; }

  .prio i { display: none !important; }
  .due-badge { background: transparent; color: #000; border: 0; }
}

/* neu -------------------------- */

/* Popover/Minimenüs: Baseline (JS setzt top/left dynamisch) */
#dueMenu, #catMenu, #csvMenu, #tagFilterMenu {
  position: absolute;
  z-index: 1000;
  max-width: 280px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* ---------- Mobile Layout (≤ 767px): Title in Zeile 1 vollbreit, Rest in Zeile 2 ---------- */
@media (max-width: 767px) {
  /* Aufgabenzeile in zwei Zeilen umbrechen */
  li.todo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px; /* Zeilen/Spalten-Abstand */
  }

  /* 1. Zeile: Reihenfolge + Verhalten */
  li.todo .drag-handle { order: 1; }
  li.todo .toggle      { order: 2; }

  li.todo .title {
    order: 3;
    flex: 1 1 auto;   /* nimmt restliche Breite in der ersten Zeile */
    min-width: 0;     /* Text-Overflow sauber */
  }

  /* Zeilenumbruch nach dem Titel erzwingen */
  li.todo::after {
    content: "";
    order: 3;
    flex-basis: 100%;
  }

  /* 2. Zeile: alle „Meta“-Controls nebeneinander */
  li.todo .badge,
  li.todo .due-badge,
  li.todo .prio,
  li.todo .set-cat,
  li.todo .actions {
    order: 4;
    margin-top: 2px;
  }

  /* kleine Abstände in der 2. Zeile */
  li.todo .badge,
  li.todo .due-badge,
  li.todo .prio,
  li.todo .set-cat {
    margin-right: 6px;
  }

  /* Aktions-Buttons (Edit/Duplikat/Löschen) an das rechte Ende der 2. Zeile schieben */
  li.todo .actions {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
  }

  /* etwas kompaktere Titel-Schrift auf sehr schmalen Screens (optional) */
  li.todo .title { font-size: 16px; }

  /* Badge & Fälligkeits-Badge kompakter (optional) */
  .badge { font-size: 12px; padding: 2px 6px; }
  .due-badge time { font-size: 12px; }
}

/* Popover/Minimenüs – stets im Viewport positioniert (per JS mit getBoundingClientRect) */
#dueMenu, #catMenu, #csvMenu, #tagFilterMenu {
  position: fixed;              /* war: absolute */
  z-index: 1000;
  max-width: 320px;
  max-height: 60vh;             /* falls Menü sehr hoch wird */
  overflow: auto;               /* intern scrollbar */
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

@media (max-width: 480px) {
  #dueMenu, #catMenu, #csvMenu, #tagFilterMenu {
    max-width: 92vw;            /* auf sehr schmalen Screens etwas flexibler */
  }
}

/* neu */

/* --- Kategorie-Accordion Styles --- */
.accordion-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-toggle i {
  transition: transform .25s ease;
}
.accordion-toggle[aria-expanded="false"] i {
  transform: rotate(-90deg);
}
.cat-panel[hidden] {
  display: none;
}
/* --- Accordion für erledigte Aufgaben --- */
.cat-done-panel {
  margin-top: 6px;
  padding-left: 20px;
}
.accordion-toggle {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.accordion-toggle i {
  transition: transform .25s ease;
}
.accordion-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* --- Erledigt-Accordion unterhalb der Kategorie --- */
.cat-done-acc {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0 4px;
}

.done-header {
  display: block;              /* eigene Zeile unterhalb der offenen Aufgaben */
  margin-top: 4px;
}

.done-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.done-toggle i {
  transition: transform .2s ease;
}

.done-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.cat-done-panel {
  margin-top: 6px;
  padding-left: 0;             /* gleiche Einrückung wie normale Liste */
}

/* Optional: leichte Einrückung für erledigte Items
.cat-done-panel .todo { margin-left: 0; }
*/

/* --- Erledigt-Accordion Button Style --- */
.done-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;

  padding: 6px 12px;
  border: 1px solid #000;        /* schwarze Border */
  border-radius: 6px;            /* leicht abgerundet */
  background: #fff;
  color: #000;
  cursor: pointer;
}

.done-toggle:hover {
  background: #f6f6f6;
}

.done-toggle i {
  transition: transform .25s ease;
}

.done-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* neu */

/* ==== Klick-Verschieben Zielbuttons ==== */
body.move-mode .todo { position: relative; }
.place-btn {
  border: 1px solid #000;
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.place-btn i { font-size: 14px; }
.place-btn:hover { background: #f6f6f6; }

/* im Actions-Bereich rechts andocken; greift dein vorhandenes .actions-Layout auf */
.todo .actions .place-btn { margin-left: 4px; }

/* Quelle leicht hervorheben */
.todo.moving { outline: 2px dashed var(--accent); }

/* Top-Button im Kategorie-Header */
.anchor .place-top { margin-left: 8px; }

/* --- Mehrzeilige Aufgabentitel --- */
.todo .title {
  white-space: pre-wrap;   /* \n anzeigen */
  word-break: break-word;  /* lange Wörter umbrechen */
}

/* Hinweispunkt hinter dem Projektnamen bei ungesicherten Änderungen */
#projectTitle[data-dirty="1"]::after {
  content: " •";
  font-weight: normal;
}

/* High-Priority Aufgaben hervorheben – ohne Layout zu verschieben */
.todo.prio-5 {
  /* KEIN padding-left ändern! */
  box-shadow: inset 7px 0 0 var(--accent);
}

.todo.prio-4 {
  box-shadow: inset 7px 0 0 #f9a825; /* etwas helleres Orange/Gelb */
}

/* Optional: kleine Betonung beim Hover */
li.todo.prio-5:hover { box-shadow: inset 7px 0 0 var(--accent); }
li.todo.prio-4:hover { box-shadow: inset 7px 0 0 #f9a825; }

.title { white-space: pre-wrap; }




/* neu von TM gestylt ################################## */

li.anchor h3 {
  color: #995104;
  background: #f4dbad;
  padding-left: 5px;
  margin-bottom: 15px;
}

.cat-controls {margin-bottom: 15px;}
.badge, .due-badge {
  border: 1px solid #a6a6a6;
  margin-left: 15px;
}
.actions {
  gap: 15px;
  margin-left: 15px;
}
@media (max-width: 767px) {
	li.todo .actions {
  gap: 25px;
  margin-top: 15px; margin-bottom: 10px;
}
}
.badge {text-align: center;}
li.todo {
  padding: 12px 14px 12px 104px;
}
.drag-handle.icon {
  left: 20px;
}
.toggle.icon {
  left: 52px;
}