/***********************************************************************************************/
/* Todo-Liste - eigenes Stylesheet                                                              */
/* Norbert Hohmann / 27.08.2026                                                                 */
/*                                                                                             */
/* Die 5-stufige Prioritaets-Farbskala lebt bewusst NUR hier, nicht in includes/theme.css - um   */
/* den Wirkungsbereich auf dieses eine Feature zu begrenzen (gleiches Prinzip wie                */
/* schach/spiel.html's Holzfarben oder budget.css's --accent-Override). Vier-Block-Muster wie    */
/* includes/theme.css selbst: bares :root = Dunkel-Vorgabe, @media (prefers-color-scheme:light)  */
/* fuer Browser ohne expliziten Umschalter, :root[data-theme="dark"/"light"] fuer die            */
/* Umschaltung per Knopf.                                                                        */
/***********************************************************************************************/

:root {
	--prio-1-bg: #4a2420; --prio-1-border: #6b3530;
	--prio-2-bg: #4a3420; --prio-2-border: #6b4d30;
	--prio-3-bg: #3f3a24; --prio-3-border: #5c5536;
	--prio-4-bg: #33342c; --prio-4-border: #454738;
	--prio-5-bg: #262a30; --prio-5-border: #363c44;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--prio-1-bg: #fbe0dc; --prio-1-border: #e8a99f;
		--prio-2-bg: #fbebd6; --prio-2-border: #e8c98f;
		--prio-3-bg: #f6f2d8; --prio-3-border: #d9d09a;
		--prio-4-bg: #eef0e6; --prio-4-border: #ccd0bd;
		--prio-5-bg: #eef1f4; --prio-5-border: #ccd2da;
	}
}
:root[data-theme="dark"] {
	--prio-1-bg: #4a2420; --prio-1-border: #6b3530;
	--prio-2-bg: #4a3420; --prio-2-border: #6b4d30;
	--prio-3-bg: #3f3a24; --prio-3-border: #5c5536;
	--prio-4-bg: #33342c; --prio-4-border: #454738;
	--prio-5-bg: #262a30; --prio-5-border: #363c44;
}
:root[data-theme="light"] {
	--prio-1-bg: #fbe0dc; --prio-1-border: #e8a99f;
	--prio-2-bg: #fbebd6; --prio-2-border: #e8c98f;
	--prio-3-bg: #f6f2d8; --prio-3-border: #d9d09a;
	--prio-4-bg: #eef0e6; --prio-4-border: #ccd0bd;
	--prio-5-bg: #eef1f4; --prio-5-border: #ccd2da;
}

.karte { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin:1rem 0; }
.hinweis { color:var(--text-muted-custom); font-size:.9rem; }
/* [hidden] muss display:none behalten, auch wenn das Element eine Layout-Klasse traegt - sonst
   gewinnt display:flex (dieselbe Falle wie bei den Live-Spielen und dokumenteAnzeige.inc.php). */
[hidden] { display:none !important; }

/* --- Filter-Umschalter --- */
.filter-zeile { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; font-size:.9rem; }
.filter-zeile label { display:flex; align-items:center; gap:.4rem; cursor:pointer; }

/* --- Anlegen/Bearbeiten-Formular (ein Formular fuer beide Faelle, siehe index.php) --- */
.aufgabe-form { display:flex; flex-direction:column; gap:.7rem; }
.aufgabe-form textarea { width:100%; box-sizing:border-box; padding:.6rem .8rem; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-main); font:inherit; resize:vertical; min-height:4.5rem; }
.aufgabe-form .feld-reihe { display:flex; gap:.7rem; flex-wrap:wrap; }
.aufgabe-form .feld { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; flex:1 1 10rem; }
.aufgabe-form .feld label { color:var(--text-muted-custom); }
.aufgabe-form input[type=date], .aufgabe-form input[type=text], .aufgabe-form select {
	padding:.5rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-main); font:inherit;
}
.aufgabe-form input[type=file] { color:var(--text-main); font-size:.85rem; }
.aufgabe-form .knopfreihe { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.aufgabe-form button { padding:.6rem 1.2rem; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
.aufgabe-form button:hover { filter:brightness(1.1); }
.aufgabe-form .abbrechen { background:none; border:1px solid var(--border); color:var(--text-main); font-weight:400; }
.aufgabe-form .zeichen-zaehler { font-size:.78rem; color:var(--text-muted-custom); align-self:flex-end; }
.aufgabe-form .bild-aktuell { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text-muted-custom); }
.aufgabe-form .bild-aktuell img { width:2.2rem; height:2.2rem; object-fit:cover; border-radius:6px; }
.aufgabe-form .bild-entfernen-label { display:flex; align-items:center; gap:.3rem; cursor:pointer; }

/* --- Karten-Grid --- */
.aufgaben-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.9rem; margin-top:1rem; }
.aufgabe-karte { border-radius:10px; border:1px solid var(--prio-3-border); background:var(--prio-3-bg); padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.aufgabe-karte--prio-1 { background:var(--prio-1-bg); border-color:var(--prio-1-border); }
.aufgabe-karte--prio-2 { background:var(--prio-2-bg); border-color:var(--prio-2-border); }
.aufgabe-karte--prio-3 { background:var(--prio-3-bg); border-color:var(--prio-3-border); }
.aufgabe-karte--prio-4 { background:var(--prio-4-bg); border-color:var(--prio-4-border); }
.aufgabe-karte--prio-5 { background:var(--prio-5-bg); border-color:var(--prio-5-border); }
.aufgabe-karte.erledigt { opacity:.6; }
.aufgabe-karte.erledigt .aufgabe-karte__text { text-decoration:line-through; }
.aufgabe-karte__bild { width:100%; max-height:9rem; object-fit:cover; border-radius:8px; display:block; }
.aufgabe-karte__text { color:var(--text-strong); font-size:.95rem; overflow-wrap:anywhere; white-space:pre-wrap; }
.aufgabe-karte__meta { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.78rem; }
.aufgabe-karte__badge { background:var(--tag-bg); border:1px solid var(--tag-border); color:var(--tag-text); border-radius:999px; padding:.15rem .55rem; }
.aufgabe-karte__faellig.ueberfaellig { color:var(--negative); font-weight:700; }
.aufgabe-karte__aktionen { display:flex; gap:.3rem; margin-top:auto; padding-top:.3rem; }
.aufgabe-karte__aktion { flex:none; background:none; border:none; cursor:pointer; font-size:1.05rem; padding:.3rem .4rem; border-radius:6px; color:var(--text-muted-custom); line-height:1; }
.aufgabe-karte__aktion:hover { color:var(--accent); background:var(--hover-bg); }
.aufgabe-karte__aktion.gefahr:hover { color:#e05555; }