/*
  workspace-bento-aufgaben-zentrale.css — Aufgaben-Zentrale im Menü (Beta-Ring), Vorbild: die Aufgaben im Kunden-AIOS (Kunden-AIOS).
  Gehört zu workspace-bento-aufgaben-ansicht.js (Klasse .av.av-z, nur im Menü-Modus). Seit 08.11.2026: Liste rechts über den Baustein BentoSpalte.

  Kurzbeschreibung (für Laien): eine weiße Karte auf grauem Grund. Links die Übersicht („Deine Aufgaben auf einen Blick“: vier ruhige Zahlen-Kacheln,
  „Kurz zusammengefasst“, „Von dir vergeben“) bzw. die geöffnete Aufgabe; rechts die schmale Liste der Aufgaben (Überfällig, Heute, … mit Quelle und
  „seit n T“), unten das ＋ für eine neue Aufgabe. Am Handy steht erst die Liste, nach dem Antippen die Aufgabe.
  Die Seite der Liste bestimmt die erste Regel unten (--az-flaeche / --az-spalten). Farben nur aus der Marke / den Seiten-Token (--bs-*), hell und dunkel.
*/
:root.wb-menue-modus { --az-flaeche: "inhalt liste"; --az-spalten: minmax(0, 1fr) var(--bsp-b, 224px); }

/* Eine weiße Karte auf grauem Grund: links Übersicht bzw. Aufgabe (.av-mitte), rechts die Spalte (Baustein BentoSpalte, Ralph 08.11.2026) */
:root.wb-menue-modus #bsBereich[data-bereich="aktionsplan"]:has(.av-z) { background: var(--az-grund, var(--bs-grund)); border-radius: var(--marke-r-l, 16px); }
.av.av-z { grid-template-columns: var(--az-spalten); grid-template-areas: var(--az-flaeche); grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; box-sizing: border-box; overflow: hidden;
  background: var(--bs-karte); border-radius: var(--bs-r, 16px); }
.av-z .av-links { grid-area: liste; grid-row: 1; background: transparent; border-radius: 0; padding: 0; }
.av-z .av-links.bsp { height: 100%; }
.av-z .av-mitte { grid-area: inhalt; grid-row: 1; align-self: stretch; background: transparent; border-radius: 0; padding: 0 24px 0 0; }
.av-z .av-suche { display: none; }   /* gesucht wird nur oben in der Kopfleiste */
.av-z .av-ue { padding: 0 0 16px 24px; gap: 16px; }
.av-z .av-raum { padding: 0 0 0 24px; }
.av-z .av-r-kopf { border-bottom: 0; padding: 12px 0 8px; }
.av-z .av-box { padding: 12px 0 16px; }

/* Übersicht ruhig: weiße Kacheln mit feiner Linie, nur Überfälliges rot (Richtlinie: keine bunten Flächen) */
.av-z .av-ue-kopf h1 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
.av-z .av-kzs { gap: 12px; }
.av-z .av-kz { background: var(--bs-karte); border: 1px solid var(--bs-linie); border-radius: var(--marke-r-m, 9px); padding: 12px 16px; }
.av-z .av-kz:hover { transform: none; box-shadow: none; border-color: var(--bs-leise); }
.av-z .av-kz.an { box-shadow: none; border-color: var(--bs-text); }
.av-z .av-kz b { font-size: 24px; font-weight: 700; color: var(--bs-text); font-variant-numeric: tabular-nums; }
.av-z .av-kz.rot b { color: var(--av-rot); }
.av-z .av-kz span { font-size: 12px; color: var(--bs-leise); }
.av-z .av-zusammen { background: var(--bs-weich); border-radius: var(--marke-r-m, 9px); padding: 12px 16px; }
.av-z .av-zusammen-kopf { color: var(--bs-text); font-size: 13px; font-weight: 700; }
.av-z .av-zusammen p { font-size: 13px; }
.av-z .av-ue > .av-karte { background: transparent; border-radius: 0; padding: 0; gap: 2px; }
.av-z .av-karte h3 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.av-z .av-klassisch { align-self: flex-start; margin: 4px 0 0; }
.av-z .mv { max-height: none; }

/* Rechts */
.av-z .av-verg .av-titel { font-weight: 700; }
.av-z .bs-d-aktion { position: static; margin: 12px 0 0; padding: 0; background: none; border: 0; }
.av-z .av-r-kopf { padding-top: 0; }

@media (max-width: 900px) {
  :root.wb-menue-modus { --az-flaeche: "liste" "inhalt"; --az-spalten: minmax(0, 1fr); }
  .av.av-z { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; grid-auto-rows: max-content; overflow-y: auto; }
  .av-z .av-links { grid-area: auto; grid-column: 1; grid-row: 1; }   /* am Handy zuerst die Liste, darunter die Übersicht */
  .av-z .av-mitte { grid-area: auto; grid-column: 1; grid-row: 2; }
  .av-z .av-links.bsp { height: auto; max-height: 52vh; border-left: 0; }
  .av-z .av-mitte, .av-z .av-ue, .av-z .av-raum { padding-left: 16px; padding-right: 16px; }
  .av-z.av-z-detail .av-links { display: none; }
  .av-z .av-kzs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}