/*
  workspace-bento-innenlisten.css — Gestaltung der Bentos „Aufgaben", „Kontakte" und „Kalender", in denen man direkt
  arbeitet (Logik: workspace-bento-aufgabenkachel.js, workspace-bento-kontakte-bento.js, workspace-bento-kalender-kachel.js).

  Kurzbeschreibung (für Laien): Ralph, 25.10.2026 — „Was ein Bento anbietet, passiert direkt im Bento." Aufgabe anlegen,
  abhaken, ändern; Kontakt-Karte mit Nachfassen und Notiz; Termin ansehen und anlegen — alles im Bento mit „← Zurück".
  Kein neuer Look: Knöpfe sind die Bento-Knöpfe (zk-knopf, Hauptknopf dunkel, auf farbigen Bentos weiße Pille mit dunkler
  Schrift), Listen die Bento-Zeilen (zk-zeile mit Hover), Felder wie die Felder im Transkription-Bento, Auswahl als Pille
  im Blau der Seitenleiste (marke/REGELN.md „Reiter und Filter"). Datum steht links als TT.MM. wie im Postfach.
  Nie seitlich scrollen: lange Inhalte scrollen im Bento nach unten.
*/

/* Inhalt unter dem Titel: füllt das Bento; nur der Titel öffnet die volle Seite */
.il { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; cursor: default; }
.il.il-flach { overflow: hidden; }
.il > * { flex: none; }
.il .zk-liste { flex: 0 1 auto; }
.il .zk-aktion:last-child { margin-top: auto; }
.wb-k:is([data-id="z-aufgaben"], [data-id="z-kontakte"], [data-id="z-kalender"], [data-id="seite-p-aktionsplan"]) .wk-h > span:first-child,
.wb-k:is([data-id="z-aufgaben"], [data-id="z-kontakte"], [data-id="z-kalender"], [data-id="seite-p-aktionsplan"]) .wk-h > .wk-titel { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.wb-k:is([data-id="z-aufgaben"], [data-id="z-kontakte"], [data-id="z-kalender"], [data-id="seite-p-aktionsplan"]) .wk-h > span:first-child:hover { text-decoration-color: currentColor; }
.il-rechts { display: inline-flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.il-rechts small { white-space: nowrap; }

/* Felder (wie die Felder im Transkription-Bento) */
.il-feld { width: 100%; height: 32px; border: 0; outline: 0; border-radius: var(--marke-r-m); background: var(--wb-feld, var(--wb-weich)); color: var(--wb-text);
  font: 400 13px var(--marke-schrift); padding: 0 12px; min-width: 0; box-sizing: border-box; transition: box-shadow .15s; }
.il-feld::placeholder { color: var(--wb-leise); }
.il-feld:hover { box-shadow: 0 0 0 1px var(--wb-linie); }
.il-feld:focus-visible { box-shadow: 0 0 0 2px var(--marke-akzent); }
textarea.il-feld { height: auto; min-height: 56px; max-height: 160px; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.il-titel { font-weight: 600; }
.il-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.il-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.il-zwei .il-feld { padding: 0 8px; }
.il-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.il-label > span { font-size: 12px; font-weight: 600; color: var(--wb-leise); }
.il-hinweis { font-size: 12px; color: var(--wb-leise); line-height: 1.4; }
.il-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.il-fuss .ib-luecke { flex: 1; }
.il-fuss .zk-knopf { flex: none; }

/* Schnellwahl (Heute · Morgen · Datum): Pille 28 px, gewählt im Blau der Seitenleiste */
.il-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.il-pille { height: 28px; padding: 0 12px; border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-pill); background: transparent; color: var(--wb-text);
  font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.il-pille:hover { background: var(--wb-weich); }
.il-pille.an, .il-pille.an:hover { background: var(--marke-nav-blau); border-color: var(--marke-nav-blau); color: #fff; }
.il-pille:disabled { opacity: .55; cursor: default; }
.il-pillen .il-feld { width: auto; height: 28px; flex: 0 1 150px; }
/* Frist-Datum als Kalender-Symbol: das Datumsfeld liegt unsichtbar unter der Pille (nur für die Auswahl des Browsers) */
.il-datum { position: relative; display: inline-flex; }
.il-datum .il-pille { display: inline-flex; align-items: center; gap: 5px; }
.il-datum svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-datum input { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.il-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .il-pille:not(.an) { background: #fff; border-color: #fff; color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .il-pille:not(.an):hover { background: color-mix(in srgb, #fff 86%, var(--marke-grafit)); }

/* Listenzeilen: Haken · Datum TT.MM. · Text */
.il-zeile { gap: 8px; }
.il-zeile .zk-datum { flex: none; min-width: 40px; color: var(--wb-leise); font-variant-numeric: tabular-nums; }
.il-zeile .zk-datum.zk-rot { color: var(--wb-rot); }
.il-zeile .zk-datum.heute { color: var(--wb-text); font-weight: 700; }
.il-zeile.il-erledigt .zk-t { text-decoration: line-through; opacity: .6; }
.il .zk-knopf.il-klein { height: 24px; padding: 0 10px; font-size: 12px; }
.il-zeile .bs-etikett { flex: none; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .il-zeile .zk-datum.zk-rot { color: var(--wb-text); font-weight: 700; }

/* Kontakt wählen (Aufgabe anlegen) */
.il-vorschlaege { display: flex; flex-direction: column; margin: 0 -8px; }
.il-vorschlaege:empty { display: none; }
.il-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 4px 0 12px; border-radius: var(--marke-r-pill); background: var(--wb-weich);
  font-size: 12px; font-weight: 600; }
.il-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il .il-chip .a4h-icon-btn { width: 22px; height: 22px; }
.il .il-chip .a4h-icon-btn svg { width: 12px; height: 12px; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .il-chip { background: #fff; color: var(--marke-grafit); }

/* Detail- bzw. Karten-Ansicht */
.il-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.il-kopf .ib-luecke { flex: 1; }
.il-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.il-werte { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.il-werte dt { color: var(--wb-leise); font-size: 12px; font-weight: 600; padding-top: 1px; }
.il-werte dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.il-werte a, .il-link { color: var(--marke-akzent); text-decoration: none; font-weight: 600; border-radius: var(--marke-r-s); }
.il-werte a:hover, .il-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .il-werte a { color: var(--wb-text); text-decoration: underline; }
.il-teil { display: flex; flex-direction: column; gap: 6px; }
.il-teil > b { font-size: 12px; font-weight: 700; }
.il-mitte { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.il-mitte .a4h-spin { color: var(--marke-ladekreis); }

/* Breit (eine Reihe): Formular kompakt */
.il-eng { gap: 6px; }
.il-eng .il-felder { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.il-vorschlaege .il-nichts { padding: 4px 8px; }
.il-fuss.il-links { justify-content: flex-start; flex-wrap: nowrap; }
.il-fuss.il-links .il-pillen { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .il-pille.an { box-shadow: 0 0 0 2px #fff; }

/* Mit dem Mausrad im Bento scrollen (Ralph 25.10.2026: „Ich möchte innerhalb der Bentos mit der Maus scrollen können“).
   Nur die Liste scrollt (.bl-scroll), Kopf/Zahl/Knöpfe bleiben stehen. Logik (Position merken, Verlauf unten,
   Scrollleiste greifen ohne Ziehen): workspace-bento-innenlisten.js. Scrollleiste dünn und erst beim Überfahren sichtbar,
   weicher Ausblend-Verlauf unten nur, wenn darunter noch etwas kommt. Mit der Maus scrollt die Seite nicht mit;
   am Handy scrollt die Seite am Listenende weiter. Kleine Größen (1×1, ½) haben keine Liste und bleiben, wie sie sind. */
.wb-k .bl-scroll { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.wb-k .bl-scroll:is(:hover, :focus-within) { scrollbar-color: color-mix(in srgb, var(--wb-text) 26%, transparent) transparent; }
.wb-k .bl-scroll.bl-mehr { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
@media (hover: hover) and (pointer: fine) { .wb-k .bl-scroll { overscroll-behavior: contain; } }
.wb-k .zk-pf-mails > .bl-scroll, .wb-k .ib-liste.bl-scroll { flex: 1 1 0; }
.wb-k .zkk-rechts > .bl-scroll { flex: 1 1 auto; }
.wb-k .bl-ende { flex: none; align-self: flex-start; margin: 4px 8px 2px; height: 26px; padding: 0 4px; }
/* Die Liste ragt 8 px links/rechts über (Zeilen-Hover bis an den Rand); die Hülle darf sie nicht abschneiden, sonst fehlt die Scrollleiste */
.il:has(.bl-scroll), .wb-k .zkk-rechts:has(> .bl-scroll) { overflow: visible; }
/* Aufgaben-Zeile (Ralph 25.10.2026): links die Frist als kleiner Knopf (TT.MM., ohne Frist ein dezentes Kalender-Symbol),
   Mitte Titel und darunter „von … · Quelle · Stand · erstellt …", rechts nur der Abhak-Kreis. Klick auf die Frist öffnet
   darunter einen kleinen Kalender (Ralph 25.10.2026, Aussehen wie der Mini-Monat im Kalender-Bento): Tag antippen = Frist,
   danach Erinnerung als Pillen — zwei Klicks, nichts bestätigen. */
.il-auf { align-items: center; }
.il-auf .il-frist { flex: none; align-self: flex-start; min-width: 44px; height: 22px; margin: -2px 0; padding: 0 4px; border: 0; border-radius: var(--marke-r-s); background: none;
  font: 500 12px var(--marke-schrift); color: var(--wb-leise); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; display: inline-flex; align-items: center;
  transition: background .15s, color .15s; }
.il-auf .il-frist:hover, .il-wahl-offen .il-frist { background: var(--wb-weich); color: var(--wb-text); }
.il-auf .il-frist.zk-rot { color: var(--wb-rot); font-weight: 600; }
.il-auf .il-frist.heute { color: var(--wb-text); font-weight: 700; }
.il-auf .il-frist svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.il-auf .il-frist.leer:hover svg { opacity: 1; }
.il-auf small.il-frist { cursor: default; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .il-auf .il-frist.zk-rot { color: var(--wb-text); font-weight: 800; }
.il-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.il-text .zk-t { flex: none; }
.il-unter { font-size: 11px; font-weight: 500; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.il-unter:empty { display: none; }
.il-unter .zk-rot { font-weight: 700; }
.il-fristwahl { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 8px 56px; cursor: default; }
.il-fristwahl .il-pillen { gap: 4px; }
.il-fristwahl .il-pille { height: 26px; padding: 0 10px; }
.il-fristwahl .il-pille.il-leise { border-color: transparent; color: var(--wb-leise); padding: 0 8px; }
.il-fristwahl .il-pille.il-leise:hover { color: var(--wb-text); }
.il-fristwahl .a4h-icon-btn { width: 26px; height: 26px; }
.il-fristwahl .a4h-icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-kal-kopf { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 280px; }
.il-kal-kopf b { font-size: 13px; font-weight: 700; white-space: nowrap; min-width: 112px; text-align: center; }
.il-kal-kopf .ib-luecke { flex: 1; }
.il-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; max-width: 280px; }
.il-kal > span { font-size: 11px; font-weight: 600; text-align: center; color: var(--wb-leise); padding: 2px 0; }
.il-tag { height: 28px; min-width: 0; border: 0; border-radius: var(--marke-r-s); background: none; color: var(--wb-text); cursor: pointer;
  font: 500 12px var(--marke-schrift); font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.il-tag:hover { background: var(--wb-weich); }
.il-tag.vorbei { opacity: .5; }
.il-tag.heute { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; opacity: 1; }
.il-tag.an, .il-tag.an:hover { background: var(--marke-nav-blau); color: #fff; font-weight: 700; opacity: 1; }
.il-tag:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; }
.il-kal-erinnerung { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--wb-linie); max-width: 360px; }
.il-kal-label { font-size: 12px; font-weight: 600; color: var(--wb-leise); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .il-tag.an { box-shadow: 0 0 0 2px #fff; }
/* Schmale Bentos: Kalender ohne Einzug unter der Zeile */
@container (max-width: 340px) { .il-fristwahl { padding-left: 8px; } }