/*
  workspace-bento-kacheln.css — Aussehen der Zusatz-Kacheln (workspace-bento-kacheln.js) auf der Bento-Startseite.

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — Mein Tag, Aktionsplan, Arbeitszeit, Freigaben & Co. Die Kacheln
  selbst (Rahmen, Titel, große Zahl, Listenzeilen) kommen aus workspace-bento.css; hier stehen nur die Teile, die
  neu dazukommen: Säulen mit Wert darüber, Fortschrittsbalken, Abhak-Kreis, kleine Knöpfe, Rückfrage in der Kachel.
  Farben nur über die Marken-Variablen; greift nur in der Bento-Ansicht (html.ws-bento).
*/

/* Grundaufbau einer Zusatz-Kachel: Inhalte untereinander, nichts läuft über den Rand */
:root.ws-bento .wb-k[data-id^="z-"] .wk-inhalt { gap: 8px; }
:root.ws-bento .wb-k[data-id^="z-"] .wk-h { margin-bottom: 0; }
.zk-reihe { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: none; }
.zk-gross { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zk-rot { color: var(--wb-rot); font-weight: 600; }
.zk-gruen { color: var(--wb-gruen); }
.zk-leise { color: var(--wb-leise); font-weight: 400; }
/* Kontakte 1×1: Name des einen fälligen Kontakts auf bis zu zwei Zeilen statt abgeschnitten (Testlauf 24.10.2026) */
.zk-name2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.wk-z.blau { color: var(--wb-akzent); }

/* Leerzustand mit Knopf */
.zk-leer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.zk-leer .wk-s:empty { display: none; }

/* Kleine Knöpfe im Bento-Look (Ralph 24.10.2026, gleiche Form wie der Bento-Baukasten .wb-knopf-klein): runde Pillen,
   normal grau gefüllt, Hauptaktion schwarz, Gefahr mit roter Schrift */
.zk-aktion { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.zk-aktion:last-child { margin-top: auto; }
.zk-knopf { height: 30px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich);
  color: var(--wb-text); font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: background .2s, color .2s; }
.zk-knopf:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)); }
.zk-knopf.haupt { background: var(--wb-dunkel); color: #fff; }
.zk-knopf.haupt:hover { background: color-mix(in srgb, var(--wb-dunkel) 84%, #fff); }
.zk-knopf.gefahr { color: var(--wb-rot); }
.zk-frage .zk-knopf:not(.haupt) { background: var(--wb-karte); }
.zk-knopf:not(.haupt):not(.gefahr) { color: var(--marke-text); }   /* Knopf-Schrift folgt dem Knopf, nicht der Kachelfarbe (Ralph 24.10.) */
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .zk-knopf:not(.haupt) { background: #fff; color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .zk-knopf.gefahr { color: var(--marke-gefahr); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .zk-knopf:not(.haupt):hover { background: color-mix(in srgb, #fff 86%, var(--marke-grafit)); }
.zk-knopf:disabled { opacity: .55; cursor: default; }

/* Listen: Zeilen mit Abhak-Kreis, Text, Zusatz rechts */
.zk-liste { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin: 0 -8px; }
.zk-zeile { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-top: 1px solid var(--wb-linie); background: none;
  font: 500 13px var(--marke-schrift); color: inherit; text-align: left; border-radius: var(--marke-r-m); min-width: 0; flex: none; width: 100%; box-sizing: border-box; }
.zk-zeile .zk-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-zeile small { color: var(--wb-leise); font-size: 12px; white-space: nowrap; flex: none; }
.zk-zeile small.zk-rot { color: var(--wb-rot); }
.zk-knopfzeile { cursor: pointer; transition: background .15s, padding .2s; }
.zk-knopfzeile:hover { background: var(--wb-weich); padding-left: 12px; }
.zk-trenn { padding: 8px 8px 2px; }
.zk-unter { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.zk-unter .zk-lade { display: inline-flex; }

.zk-haken { width: 18px; height: 18px; flex: none; border: 2px solid var(--marke-linie-stark); border-radius: 50%; background: var(--wb-karte);
  cursor: pointer; padding: 0; position: relative; transition: border-color .15s, background .15s; }
.zk-haken:hover { border-color: var(--wb-gruen); }
.zk-haken.ok { background: var(--wb-gruen); border-color: var(--wb-gruen); }
.zk-haken.ok::after, .zk-haken:hover::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--wb-gruen); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.zk-haken.ok::after { border-color: #fff; }

/* Status-Punkt (Automationen, Neuigkeiten) */
.zk-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--wb-leise); }
.zk-punkt.ok { background: var(--wb-gruen); }
.zk-punkt.fehl { background: var(--wb-rot); }
.zk-punkt.neu { background: var(--wb-akzent); }

/* Pläne/Projekte mit Fortschritt */
.zk-plaene { display: flex; flex-direction: column; gap: 8px; flex: none; }
.zk-plan { display: flex; flex-direction: column; gap: 4px; }
.zk-plan-k { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.zk-plan-k .zk-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-plan-k small { font-size: 12px; font-weight: 500; color: var(--wb-leise); white-space: nowrap; }
.zk-plan-k small.zk-rot { color: var(--wb-rot); }
.zk-fort { display: block; height: 6px; border-radius: var(--marke-r-pill); background: var(--wb-weich); overflow: hidden; }
.zk-fort i { display: block; height: 100%; border-radius: inherit; background: var(--kachel-balken, var(--wb-akzent)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.zk-fort.rot i { background: var(--wb-rot); }

/* Säulen: Wert über jeder Säule, Tag/Monat darunter */
.zk-saeulen { flex: 1 1 auto; min-height: 64px; max-height: 200px; display: flex; align-items: stretch; gap: 8px; padding-top: 16px; }
.zk-s { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.zk-st { flex: 1; width: 100%; position: relative; }
.zk-sb { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 34px; min-height: 2px; border-radius: 6px 6px 3px 3px;
  background: var(--wb-akzent-zart); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.zk-s.an .zk-sb { background: var(--kachel-balken, var(--wb-akzent)); }
.zk-sw { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--wb-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zk-sl { font-size: 11px; color: var(--wb-leise); white-space: nowrap; }
.zk-s.an .zk-sl { color: var(--wb-text); font-weight: 700; }

/* Zwei Spalten (Arbeitszeit 2×1: Zahl links, Säulen rechts) */
.zk-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; flex: 1; min-height: 0; }
.zk-spalte { display: flex; flex-direction: column; min-height: 0; }
.zk-zwei .zk-saeulen { padding-top: 12px; }

/* „läuft seit" */
.zk-lauf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wb-gruen); font-weight: 600; }
.zk-lauf i { width: 8px; height: 8px; border-radius: 50%; background: var(--wb-gruen); animation: zkPuls 1.6s ease-in-out infinite; }
@keyframes zkPuls { 50% { opacity: .35; } }

/* Kennzahlen nebeneinander (Verkauf, Seit gestern) */
.zk-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px 12px; flex: none; }
.zk-zahlen div { display: flex; flex-direction: column; min-width: 0; }
.zk-zahlen b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-zahlen small { font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tabelle mit Kopf (Wochenrückblick) */
.zk-tab { width: 100%; border-collapse: collapse; font-size: 12px; flex: none; }
.zk-tab th { text-align: right; font-weight: 600; color: var(--wb-leise); padding: 4px 0 4px 8px; }
.zk-tab td { text-align: right; padding: 4px 0 4px 8px; border-top: 1px solid var(--wb-linie); font-variant-numeric: tabular-nums; }
.zk-tab td:first-child, .zk-tab th:first-child { text-align: left; padding-left: 0; }

/* Freigaben und Postfach: Eintrag mit Rückfrage direkt in der Kachel */
.zk-frei, .zk-mail { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px solid var(--wb-linie); flex: none; }
.zk-mail { padding: 0; gap: 0; border-top: 0; }
.zk-frei-k { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.zk-frei-k .zk-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-frei-k small { font-size: 12px; color: var(--wb-leise); font-weight: 500; }
.zk-vorschau { margin: 0; font-size: 12px; color: var(--wb-leise); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zk-frage { display: flex; flex-direction: column; gap: 8px; background: var(--wb-weich); border-radius: var(--wb-r-k, 14px); padding: 10px 12px; margin: 4px 8px 8px;
  font-size: 12px; line-height: 1.45; color: var(--wb-text); cursor: default; }
.zk-frei .zk-frage { margin: 0; }
.zk-frage .zk-lade { display: inline-flex; vertical-align: middle; }
.zk-lade .a4h-spin { width: 16px; height: 16px; color: var(--marke-ladekreis); }
.zk-entwurf { max-height: 140px; overflow-y: auto; white-space: pre-wrap; background: var(--wb-karte); border-radius: var(--marke-r-m); padding: 8px; font-size: 12px; user-select: text; }

/* Kurze Fehlermeldung unten in der Kachel */
.zk-meldung { margin-top: auto; font-size: 12px; color: var(--wb-rot); flex: none; }

/* Kleine Kachel (1×1): Knopf unten */
.wb-k[data-id^="z-"] .wk-s + .zk-aktion, .wb-k[data-id^="z-"] .wk-s + .zk-leer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .zk-lauf i { animation: none; } .zk-sb, .zk-fort i { transition: none; } }

/* Zusammengelegte Kacheln „Aufgaben“/„Kontakte“ und Sprung-Kacheln mit Inhalt (workspace-bento-aufgabenkachel.js,
   workspace-bento-sprungkacheln.js, Ralph 24.10.2026): gleicher Aufbau wie die Zusatz-Kacheln, Knopf im Kopf rechts */
:root.ws-bento .wb-k.seite .wk-inhalt:has(.zk-reihe, .zk-liste, .zk-aktion) { gap: 8px; }
:root.ws-bento .wb-k.seite .wk-inhalt:has(.zk-reihe) > .wk-z { margin-top: auto; }
.wk-h:has(> .zk-knopf) { align-items: center; min-width: 0; }
.wk-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-h > .zk-knopf { flex: none; height: 28px; }
/* Rot auf kräftig gefärbter Kachel ist kaum lesbar: dort folgt „überfällig“ der Kachelschrift (fett bleibt) */
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-rot { color: var(--wb-text); }

/* Postfach-Bento: Mails und Team-Chat in einer Zeitleiste (Ralph 25.10.2026) — Datum links, Symbol Mail/Chat, Lese-Ansicht im Bento */
.zk-pf-zeile { gap: 8px; }
.zk-pf-zeile .zk-datum { flex: none; min-width: 40px; color: var(--wb-leise); font-variant-numeric: tabular-nums; }
.zk-art { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--wb-leise); }
.zk-art svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zk-mail.zk-frisch > .zk-pf-zeile { animation: zkFrisch 4s ease-out; }
@keyframes zkFrisch { from { background: color-mix(in srgb, var(--wb-akzent) 16%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .zk-mail.zk-frisch > .zk-pf-zeile { animation: none; } }
.zk-pf-lesen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; cursor: default; }
.zk-pf-kopf { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.zk-pf-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.zk-pf-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-pf-meta small { color: var(--wb-leise); font-size: 12px; }
.zk-pf-betreff { flex: none; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.zk-pf-lage { flex: none; line-height: 1.35; overflow-wrap: anywhere; }
.zk-pf-text { flex: 1 1 auto; min-height: 64px; overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45;
  padding: 8px 10px; border-radius: var(--marke-r-m); background: var(--wb-weich); user-select: text; cursor: text; }
.zk-pf-verlauf { white-space: normal; display: flex; flex-direction: column; gap: 8px; }
.zk-pf-n { display: flex; flex-direction: column; gap: 2px; max-width: 92%; }
.zk-pf-n small { color: var(--wb-leise); font-size: 11px; }
.zk-pf-n > span { white-space: pre-wrap; overflow-wrap: anywhere; }
.zk-pf-n.eigen { align-self: flex-end; text-align: right; }
.zk-pf-antwort { flex: none; display: flex; flex-direction: column; gap: 6px; }
.zk-pf-antwort textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px; max-height: 160px; font: 400 13px var(--marke-schrift); }
.zk-pf-meldung:empty { display: none; }
.zk-lade-mitte { display: flex; align-items: center; justify-content: center; min-height: 60px; height: 100%; }
/* Titel „Postfach" öffnet die ganze Seite — Hover zeigt das */
.wb-k[data-id="z-postfach"] .wk-h { cursor: pointer; border-radius: var(--marke-r-m); transition: color .15s; }
.wb-k[data-id="z-postfach"] .wk-h:hover { color: var(--wb-akzent); }
/* Zweigeteilt: oben Nachrichten (Team-Chat), unten Postfach (Mails) */
.zk-pf-abschnitt { display: flex; flex-direction: column; min-height: 0; flex: none; }
.zk-pf-zwischen { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--wb-leise); text-transform: uppercase; padding: 0 0 2px; }
.zk-pf-zwischen small { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--wb-akzent); }
.zk-pf-leer { padding: 7px 8px; border-top: 1px solid var(--wb-linie); }
.zk-pf-zwischen small { flex: none; }
.zk-pf-abschnitt.eng .zk-zeile, .zk-pf-abschnitt.eng .zk-pf-leer { padding-top: 4px; padding-bottom: 4px; }
/* Antwort schreiben: Knöpfe bleiben sichtbar, der Mailtext gibt Platz ab */
.zk-pf-lesen.verfassen { overflow: hidden; }
.zk-pf-lesen.verfassen .zk-pf-lage { display: none; }
.zk-pf-lesen.verfassen .zk-pf-text { flex: 1 1 0; min-height: 24px; }
/* Einzeilig (1 Reihe hoch) ohne Trennstriche; ab zwei Reihen sehen Mails/Chats aus wie die Aufgaben-Zeile (Ralph 25.10.2026):
   Datum links, Betreff + „Absender · Uhrzeit" darunter, Trennlinie zwischen den Zeilen */
.zk-pf-abschnitt .zk-zeile, .zk-pf-abschnitt .zk-pf-leer { border-top: 0; }
.zk-pf-abschnitt .zk-pf-zwei > .zk-zeile { border-top: 1px solid var(--wb-linie); align-items: center; }
.zk-pf-zwei .zk-datum { align-self: flex-start; min-width: 44px; padding-left: 4px; }
/* Ein gemeinsamer Eingang (Ralph 25.10.2026): die Mails füllen die echte Höhe und scrollen im Bento (workspace-bento-innenlisten.css),
   unten die Knopfzeile „+ Neue Mail" / „Alle Mails" */
.zk-pf-mails { flex: 1 1 0; min-height: 0; }
.zk-pf-mails > .zk-liste { flex: 1 1 0; }
.zk-pf-knoepfe { flex-wrap: nowrap; align-items: center; min-width: 0; }
.zk-pf-knoepfe .zk-knopf { flex: none; }
.zk-pf-mehr { margin-left: auto; min-width: 0; height: 30px; padding: 0 4px; border: 0; background: none; font: 600 12px var(--marke-schrift); color: var(--wb-leise);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.zk-pf-mehr:hover { color: var(--wb-akzent); }
.zk-pf-mehr[hidden] { display: none; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-pf-mehr:hover { color: var(--wb-text); text-decoration: underline; }
.zk-pf-hinweis { flex: none; }
/* Neue Mail im Bento: An / Betreff / Text, nur Entwurf */
.zk-pf-neu { overflow-y: auto; }
.zk-pf-feld { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: var(--wb-leise); }
.zk-pf-feld > span { flex: none; width: 52px; }
.zk-pf-feld .a4h-field { flex: 1 1 auto; min-width: 0; height: 32px; font-size: 13px; }
.zk-pf-neu textarea.zk-pf-neutext { flex: 1 1 auto; width: 100%; box-sizing: border-box; min-height: 60px; resize: none; font: 400 13px var(--marke-schrift); }
/* „x ungelesen" in der Zwischenzeile: auf farbigen Bentos in Kachelschrift (Akzentblau wäre auf Blau unsichtbar) */
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-pf-zwischen small { color: var(--wb-text); }

/* Kontrast auf farbiger Fläche (Ralph 26.10.2026: „Karte dunkel gefärbt → Texte hell, Balken eine andere Farbe“, überall gleich wie im
   AIOS): auf einer kräftig/dunkel gefärbten Kachel wechseln Säulen, Fortschritt, Ampel-Punkte, Haken und Scrollleiste in helle Töne.
   Rot/Grün bleiben als aufgehellte Markenfarbe erkennbar. Eine eigene Balkenfarbe der Kachel (Pinsel) geht weiter vor. */
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]),
:root[data-g-flaeche="farbig"] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei, [data-flaeche="hell"]) {
  --wb-akzent-zart: color-mix(in srgb, var(--wb-auf-farbe) 58%, transparent); --kachel-balken: var(--wb-auf-farbe);
  --wb-rot: color-mix(in srgb, var(--marke-gefahr) 26%, #fff); --wb-gruen: color-mix(in srgb, var(--marke-ok) 24%, #fff);
  color-scheme: dark;
}
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) :is(.zk-haken:not(.ok), .zk-fort),
:root[data-g-flaeche="farbig"] .wb-k:not(.blau, .dunkel, .kraeftig, .zart, .plus, .frei, [data-flaeche="hell"]) :is(.zk-haken:not(.ok), .zk-fort) { background: var(--wb-weich); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-haken:not(.ok) { border-color: var(--wb-auf-farbe-leise); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-haken.ok::after { border-color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .zk-punkt.neu { background: var(--wb-auf-farbe); }