/* Seite /aufgaben — die Magnetwand. Baut auf den Tokens aus style.css auf.
   Anders als der Rest der Engine hier bewusst weich: Rundungen, Schatten, viel Luft —
   es soll wie eine Tafel mit Stickern wirken, nicht wie Projektmanagement.
   Farbe gehoert allein der Prioritaet. Alles andere bleibt grau/weiss.
   Zweite Fassung (21.09.): dichter, damit auch 30+ Sticker je Spalte ueberschaubar bleiben. */

:root {
  --ab-high: #E86A6A;
  --ab-medium: #E9C86A;
  --ab-low: #B7B7B7;
  --ab-tinte: #1c1d21;              /* Schrift auf allen drei Stickerfarben */
  --ab-wand: #f4f5f7;
  --ab-feld: #eceef2;
  --ab-filter-h: 46px;
  --ab-schatten: 0 1px 1px rgba(20, 24, 33, .10), 0 2px 5px rgba(20, 24, 33, .08);
  --ab-schatten-hoch: 0 2px 3px rgba(20, 24, 33, .10), 0 8px 18px rgba(20, 24, 33, .16);
  --ab-schatten-griff: 0 4px 6px rgba(20, 24, 33, .12), 0 20px 36px rgba(20, 24, 33, .26);
}

.ab-body { background: var(--ab-wand); height: 100dvh; overflow: hidden; overscroll-behavior: none; }

.ab-wer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.ab-wer select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); width: auto; }
.ab-luft { flex: 1; }
.ab-klein { font-size: 12px; color: var(--text-muted); }

/* ---------- Filterleiste ---------- */
.ab-filter {
  position: fixed; top: var(--head-h); left: 0; right: 0; z-index: 15; height: var(--ab-filter-h);
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  background: rgba(244, 245, 247, .92); backdrop-filter: blur(6px);
  overflow-x: auto; scrollbar-width: none;
}
.ab-filter::-webkit-scrollbar { display: none; }
.ab-filter > * { flex-shrink: 0; }
.ab-suche { position: relative; display: flex; align-items: center; text-transform: none; letter-spacing: 0; }
.ab-suche input {
  width: 170px; font: inherit; font-size: 13px; padding: 6px 10px 6px 28px; border-radius: 9px;
  border: 1px solid transparent; background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line);
  transition: width .18s ease;
}
.ab-suche input:focus { width: 220px; outline: none; box-shadow: 0 0 0 2px rgba(0, 80, 176, .35); border-color: transparent; }
.ab-lupe { position: absolute; left: 10px; width: 10px; height: 10px; border: 1.6px solid var(--text-muted); border-radius: 50%; pointer-events: none; }
.ab-lupe::after { content: ""; position: absolute; width: 5px; height: 1.6px; background: var(--text-muted); right: -5px; bottom: -2px; transform: rotate(45deg); }

.ab-chips { display: flex; gap: 4px; background: #fff; padding: 3px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.ab-chip {
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 9px; border: none; border-radius: 7px;
  background: none; color: var(--text-secondary); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.ab-chip:hover { color: var(--text); background: var(--ab-wand); }
.ab-chip[aria-pressed="true"] { background: var(--ab-tinte); color: #fff; }
.ab-punkt i { width: 10px; height: 10px; border-radius: 50%; }
.ab-punkt[data-prio="high"] i { background: var(--ab-high); }
.ab-punkt[data-prio="medium"] i { background: var(--ab-medium); }
.ab-punkt[data-prio="low"] i { background: var(--ab-low); }
.ab-punkt[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px #fff; }

.ab-auswahl { width: auto; font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 9px; border: none; background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ab-auswahl.an { background: var(--ab-tinte); color: #fff; }
.ab-zuruecksetzen { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border: none; border-radius: 9px; background: rgba(0, 80, 176, .1); color: var(--accent); cursor: pointer; white-space: nowrap; }
.ab-zuruecksetzen span { font-weight: 500; opacity: .8; margin-left: 2px; }
.ab-archiv-knopf { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border: none; border-radius: 9px; background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line); cursor: pointer; white-space: nowrap; }
.ab-archiv-knopf:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--ab-schatten); }
.ab-archiv-knopf span { font-weight: 600; color: var(--text-muted); margin-left: 3px; font-variant-numeric: tabular-nums; }

/* ---------- Board ---------- */
.ab-board {
  margin: 0; padding: calc(var(--head-h) + var(--ab-filter-h) + 4px) 18px 16px; height: 100dvh;
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; scroll-padding: 0 18px;
  -webkit-overflow-scrolling: touch;
}
.ab-spalte {
  flex: 1 1 0; min-width: 230px; max-width: 360px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ab-feld); border-radius: 16px; padding: 4px;
  transition: background .18s ease, box-shadow .18s ease;
}
.ab-spalte.ziel { background: #e3e8f1; box-shadow: inset 0 0 0 2px rgba(0, 80, 176, .22); }
.ab-spalte-kopf { display: flex; align-items: center; gap: 8px; padding: 9px 10px 7px; min-height: 38px; }
.ab-spalte-kopf h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-zahl { font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(255, 255, 255, .7); border-radius: 999px; min-width: 22px; padding: 1px 7px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-kopf-knopf { font: inherit; font-size: 11.5px; font-weight: 500; padding: 3px 8px; border: none; border-radius: 7px; background: rgba(255, 255, 255, .6); color: var(--text-secondary); cursor: pointer; }
.ab-kopf-knopf:hover { background: #fff; color: var(--text); }

.ab-liste {
  flex: 1; min-height: 50px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 6px; padding: 3px 6px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(20, 24, 33, .16) transparent;
}
.ab-leer { font-size: 12px; color: var(--text-muted); text-align: center; padding: 16px 8px; border: 1.5px dashed rgba(20, 24, 33, .12); border-radius: 11px; pointer-events: none; }
.ab-fussnote { font-size: 11px; color: var(--text-muted); text-align: center; padding: 2px 8px 7px; }

.ab-neu {
  margin: 2px 6px 6px; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: #fff; border: none; border-radius: 11px; cursor: pointer;
  box-shadow: var(--ab-schatten); transition: transform .15s ease, box-shadow .15s ease;
}
.ab-neu:hover { transform: translateY(-1px); box-shadow: var(--ab-schatten-hoch); }
.ab-neu:active { transform: translateY(0); }

/* ---------- Sticker ---------- */
.ab-sticker {
  position: relative; display: block; width: 100%; text-align: left; font: inherit; color: var(--ab-tinte);
  border: none; border-radius: 9px; padding: 7px 10px; cursor: grab;
  box-shadow: var(--ab-schatten); transform: rotate(var(--dreh, 0deg));
  transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease, opacity .2s ease;
  touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  flex-shrink: 0;
}
.ab-sticker[hidden] { display: none; }
.ab-sticker[data-prio="high"] { background: var(--ab-high); }
.ab-sticker[data-prio="medium"] { background: var(--ab-medium); }
.ab-sticker[data-prio="low"] { background: var(--ab-low); }
.ab-sticker:hover { transform: translateY(-1px) rotate(0deg); box-shadow: var(--ab-schatten-hoch); }
.ab-sticker:focus-visible { outline: 3px solid rgba(0, 80, 176, .55); outline-offset: 2px; }
/* Titel und Angaben in einer Zeile, damit ein Sticker meist nur eine Zeile hoch ist */
.ab-sticker-zeile { display: flex; align-items: flex-start; gap: 6px; }
.ab-sticker-titel {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ab-sticker-fuss { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11px; font-weight: 500; color: rgba(28, 29, 33, .78); line-height: 17px; }
.ab-sticker-fuss:empty { display: none; }
.ab-kuerzel { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .55); font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--ab-tinte); }
.ab-datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-datum.spaet { font-weight: 700; color: var(--ab-tinte); text-decoration: underline; text-underline-offset: 2px; }
.ab-notizmarke { width: 11px; height: 8px; border-top: 1.6px solid rgba(28, 29, 33, .45); border-bottom: 1.6px solid rgba(28, 29, 33, .45); position: relative; }
.ab-notizmarke::after { content: ""; position: absolute; left: 0; right: 3px; top: 1.6px; border-top: 1.6px solid rgba(28, 29, 33, .45); }

/* Erledigt: bleibt sichtbar und farbig, tritt aber zurueck */
[data-liste="completed"] .ab-sticker { opacity: .72; }
[data-liste="completed"] .ab-sticker:hover { opacity: 1; }
[data-liste="completed"] .ab-sticker-titel::before { content: "✓ "; font-weight: 700; }

/* Ziehen: der Platzhalter haelt die Luecke, der Geist haengt am Zeiger */
.ab-sticker.platz { opacity: .28 !important; box-shadow: none; transform: none; outline: 2px dashed rgba(20, 24, 33, .35); outline-offset: -2px; }
.ab-geist {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin: 0; opacity: 1 !important;
  box-shadow: var(--ab-schatten-griff); cursor: grabbing; will-change: transform;
  transition: box-shadow .16s ease;
}
.ab-geist.heim { transition: transform .2s cubic-bezier(.2, .9, .3, 1.15), box-shadow .2s ease; box-shadow: var(--ab-schatten); }
.ab-zieht, .ab-zieht * { cursor: grabbing !important; }
.ab-zieht .ab-board { scroll-snap-type: none !important; }
.ab-zieht .ab-sticker:hover { transform: rotate(var(--dreh, 0deg)); box-shadow: var(--ab-schatten); }
@keyframes ab-einrasten { 0% { transform: scale(1.05); box-shadow: var(--ab-schatten-hoch); } 55% { transform: scale(.98); } 100% { transform: scale(1) rotate(var(--dreh, 0deg)); } }
.ab-sticker.einrasten { animation: ab-einrasten .28s ease-out; }
@keyframes ab-neu-da { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.ab-sticker.frisch { animation: ab-neu-da .26s ease-out; }

/* ---------- Fenster ---------- */
.ab-schleier { position: fixed; inset: 0; z-index: 40; background: rgba(20, 24, 33, .32); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; animation: ab-blende .16s ease-out; }
@keyframes ab-blende { from { opacity: 0; } }
@keyframes ab-hoch { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ab-fenster {
  width: min(440px, 100%); max-height: calc(100dvh - 36px); overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 18px; display: grid; gap: 13px;
  box-shadow: 0 30px 80px rgba(20, 24, 33, .3); animation: ab-hoch .22s cubic-bezier(.2, .9, .3, 1.1);
  border-top: 7px solid var(--ab-fenster-farbe, var(--ab-feld)); transition: border-color .2s ease;
}
.ab-fenster-kopf { display: flex; align-items: center; justify-content: space-between; }
.ab-fenster-kopf h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ab-x { font-size: 22px; line-height: 1; width: 32px; height: 32px; border: none; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.ab-x:hover { background: var(--ab-wand); color: var(--text); }

.ab-feld { display: grid; gap: 6px; text-transform: none; letter-spacing: 0; }
.ab-feld > span { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.ab-feld em { font-style: normal; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.ab-fenster input[type="text"], .ab-fenster input[type="date"], .ab-fenster textarea, .ab-fenster select,
.ab-lade input, .ab-lade select {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; color: var(--text);
  background: var(--ab-wand); border: 1.5px solid transparent; border-radius: 10px; outline: none; resize: vertical;
}
.ab-fenster input:focus, .ab-fenster textarea:focus, .ab-fenster select:focus,
.ab-lade input:focus, .ab-lade select:focus { border-color: rgba(0, 80, 176, .5); background: #fff; outline: none; }
.ab-zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ab-prio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab-prio-k {
  font: inherit; text-align: left; color: var(--ab-tinte); border: none; border-radius: 12px; padding: 10px 11px;
  cursor: pointer; display: grid; gap: 1px; opacity: .45; box-shadow: none;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ab-prio-k b { font-size: 13.5px; font-weight: 700; }
.ab-prio-k i { font-style: normal; font-size: 11px; line-height: 1.25; color: rgba(28, 29, 33, .75); }
.ab-prio-k[data-prio="high"] { background: var(--ab-high); }
.ab-prio-k[data-prio="medium"] { background: var(--ab-medium); }
.ab-prio-k[data-prio="low"] { background: var(--ab-low); }
.ab-prio-k:hover { opacity: .8; }
.ab-prio-k[aria-checked="true"] { opacity: 1; transform: translateY(-2px); box-shadow: var(--ab-schatten-hoch), inset 0 0 0 2.5px rgba(28, 29, 33, .85); }
/* noch nichts gewaehlt: alle gleich kraeftig, damit keine wie vorausgewaehlt aussieht */
.ab-prio.offen .ab-prio-k { opacity: .9; }
.ab-prio-k:focus-visible { outline: 3px solid rgba(0, 80, 176, .55); outline-offset: 2px; }

.ab-personen { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-person { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1.5px solid transparent; background: var(--ab-wand); color: var(--text-secondary); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ab-person:hover { color: var(--text); }
.ab-person[aria-pressed="true"] { background: var(--ab-tinte); color: #fff; }

.ab-fehler { font-size: 13px; color: var(--err); text-align: center; }
.ab-fenster-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ab-knopf { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: none; cursor: pointer; background: var(--ab-tinte); color: #fff; transition: transform .12s ease, opacity .12s ease; }
.ab-knopf:hover { transform: translateY(-1px); }
.ab-knopf:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ab-knopf.leise { background: var(--ab-wand); color: var(--text); }
.ab-loeschen { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 4px; border: none; background: none; color: var(--err); cursor: pointer; }
.ab-loeschen:hover { text-decoration: underline; }

/* ---------- Archiv (Lade von rechts) ---------- */
.ab-schleier-seite { place-items: stretch end; padding: 0; }
@keyframes ab-rein { from { transform: translateX(30px); opacity: 0; } }
.ab-lade {
  width: min(420px, 100vw); height: 100dvh; background: #fff; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: -20px 0 60px rgba(20, 24, 33, .2);
  animation: ab-rein .22s cubic-bezier(.2, .9, .3, 1.05);
}
.ab-lade-filter { display: grid; gap: 8px; }
.ab-archiv-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.ab-archiv-zeile { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 9px; }
.ab-archiv-zeile:hover { background: var(--ab-wand); }
.ab-archiv-zeile > i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ab-archiv-zeile > i[data-prio="high"] { background: var(--ab-high); }
.ab-archiv-zeile > i[data-prio="medium"] { background: var(--ab-medium); }
.ab-archiv-zeile > i[data-prio="low"] { background: var(--ab-low); }
.ab-archiv-text { flex: 1; min-width: 0; display: grid; }
.ab-archiv-text b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-archiv-text span { font-size: 11.5px; color: var(--text-muted); }
.ab-archiv-zeile button { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 9px; border: none; border-radius: 8px; background: var(--ab-wand); color: var(--text); cursor: pointer; white-space: nowrap; }
.ab-archiv-zeile button:hover { background: var(--ab-tinte); color: #fff; }
.ab-archiv-monat { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 12px 6px 4px; }

/* ---------- Hinweis unten ---------- */
.ab-hinweis {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 28px);
  background: var(--ab-tinte); color: #fff; font-size: 13.5px; padding: 10px 12px 10px 16px; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(20, 24, 33, .35); animation: ab-hoch .2s ease-out;
}
.ab-hinweis button { font: inherit; font-weight: 600; color: var(--ab-tinte); background: #fff; border: none; border-radius: 8px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.ab-hinweis button:empty { display: none; }

/* ---------- Tablet & Handy: waagerecht durch die Bereiche wischen ---------- */
@media (max-width: 1000px) {
  .ab-spalte { flex: 0 0 260px; }
}
@media (max-width: 700px) {
  .ab-filter { padding: 0 12px; gap: 6px; }
  .ab-suche input { width: 120px; }
  .ab-suche input:focus { width: 160px; }
  .ab-punkt span { display: none; }
  .ab-punkt { padding: 5px 7px; }
  .ab-board { gap: 10px; padding: calc(var(--head-h) + var(--ab-filter-h) + 2px) 12px max(12px, env(safe-area-inset-bottom)); scroll-snap-type: x mandatory; scroll-padding: 0 12px; }
  .ab-spalte { flex: 0 0 86vw; max-width: none; scroll-snap-align: center; }
  .ab-wer span { display: none; }
  .ab-topbar .brand { display: none; }
  .ab-topbar .topbar-tabs { margin-left: 0; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .ab-topbar .topbar-tabs::-webkit-scrollbar { display: none; }
  .ab-topbar .apptab { white-space: nowrap; flex-shrink: 0; }
  .ab-topbar .topbar-right { margin-left: 8px; }
  .ab-schleier { place-items: end center; padding: 0; }
  .ab-schleier-seite { place-items: stretch; }
  .ab-lade { width: 100vw; }
  .ab-fenster { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .ab-prio-k i { display: none; }
  .ab-sticker { padding: 9px 11px; }          /* am Finger etwas mehr Griffflaeche */
  .ab-sticker:hover { transform: rotate(var(--dreh, 0deg)); box-shadow: var(--ab-schatten); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-sticker, .ab-geist, .ab-fenster, .ab-schleier, .ab-hinweis, .ab-neu, .ab-prio-k, .ab-lade, .ab-suche input { animation: none !important; transition: none !important; }
}