/*
  workspace-bento-wissen.css — Zusatz-Gestaltung des Bereichs „Wissen" in der Bento-Ansicht (Logik: workspace-bento-wissen.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026, nach seinen 10 Bento-Regeln: der Bereich besteht nur aus Kacheln im
  Raster der Bento-Startseite (gleiche Spalten, Reihenhöhe, Abstände, Rundung, Schatten wie workspace-bento.css) — vorn
  die kleine Filter-Kachel, danach je Dokument eine Kachel, am Ende die „+"-Kachel (gestrichelt wie auf der Startseite).
  Kennzahl-Leiste, Suchfeld, Plus-Knopf und Filter-Pillen der Vorlage sind hier ausgeblendet. Dazu das Dateityp-Symbol,
  die Vorschau im großen Detail (Bild, PDF, Auszug, Unterseiten) und das Formular „Wissen hinzufügen" mit Ablagefläche.
  Vorschau an der Karte (Ralph 24.10.2026, nachgebessert: „halbtransparent im Hintergrund, rechts und links wieder
  weiß, nur leicht erkennbar"): normale Karte mit Name, Quelle, Datum in Textfarbe; dahinter randlos die erste Seite,
  das Bild bzw. die Webseite — blass, zu den Rändern links und rechts in die Kartenfarbe auslaufend, beim Überfahren
  etwas deutlicher. Ohne Bild nur das Art-Symbol blass im Hintergrund. Platzhalter-Karten im ersten Moment nach dem
  Öffnen (kein Ladekreis über dem Bereich). Dazu die weißen Art-Pillen in der blauen Kopf-Karte.
  Menü-Modus (Beta, Ralph 02.11.2026): statt der Kacheln eine schlichte Liste (Klassen .wss-* aus workspace-bento-schlicht.css);
  die Regeln ganz unten richten nur Rand, Scrollen und die Knopfleiste des Details darin zurecht.
  Greift nur im geöffneten Wissens-Bereich (#bsBereich[data-bereich="wissen"]). Farben nur aus marke.css.
*/

/* ── Nur Kacheln: Kennzahl-Leiste, Suche, Plus-Knopf und Pillen der Vorlage weg; das Raster scrollt mit Luft für Hover (Regel 9) ── */
#bsBereich[data-bereich="wissen"] { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="wissen"] .bs-kopf, #bsBereich[data-bereich="wissen"] .bs-werkzeug, #bsBereich[data-bereich="wissen"] .bs-pillen { display: none; }
#bsBereich[data-bereich="wissen"] .bs-liste-karte { overflow: visible; }
#bsBereich[data-bereich="wissen"] .bs-liste { margin: 0 -20px -20px; padding: 12px 20px 20px; }
/* Raster und Kachel exakt wie die Startseite (.wb-raster / .wb-k in workspace-bento.css) */
#bsBereich[data-bereich="wissen"] .bw-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; }
#bsBereich[data-bereich="wissen"] .bw-k { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 20px 22px; box-sizing: border-box; overflow: hidden;
  background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); font-family: var(--marke-schrift); transition: box-shadow .25s, transform .25s; }
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel { cursor: pointer; }
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); }
/* Regel 10: Karten heben sich wie die Kacheln der Startseite (.wb-k:hover) */
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); }
#bsBereich[data-bereich="wissen"] .bw-leer { grid-column: span 2; }
#bsBereich[data-bereich="wissen"] .bw-kopf { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 0; }
#bsBereich[data-bereich="wissen"] .bw-leer { align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--bs-leise); }
/* „+"-Kachel am Ende — wie „+ Kachel hinzufügen" auf der Startseite (.wb-k.plus / .wk-plus) */
#bsBereich[data-bereich="wissen"] .bw-plus { align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--marke-linie-stark); box-shadow: none;
  color: var(--bs-leise); font: 600 13px var(--marke-schrift); cursor: pointer; text-align: center; }
#bsBereich[data-bereich="wissen"] .bw-plus:hover { background: var(--bs-karte); }
#bsBereich[data-bereich="wissen"] .bw-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
#bsBereich[data-bereich="wissen"] .bw-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Kopf-Karte: unter „Wissen“ die Art-Pillen — weiß mit dunkler Schrift, die gewählte invertiert (Ralph 24.10.2026) */
#bsBereich[data-bereich="wissen"] .bw-kopf { justify-content: flex-end; gap: 12px; }
#bsBereich[data-bereich="wissen"] .bw-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
#bsBereich[data-bereich="wissen"] .bw-pille { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill);
  background: var(--wb-auf-farbe, #fff); color: var(--marke-grafit); font: 600 12px var(--marke-schrift); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
#bsBereich[data-bereich="wissen"] .bw-pille b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .55; }
#bsBereich[data-bereich="wissen"] .bw-pille:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
#bsBereich[data-bereich="wissen"] .bw-pille.an { background: var(--marke-grafit); color: #fff; }
#bsBereich[data-bereich="wissen"] .bw-pille.an b { opacity: .7; }
#bsBereich[data-bereich="wissen"] .bw-pille:focus-visible { outline: 2px solid var(--wb-auf-farbe, #fff); outline-offset: 2px; }

/* Dokument-Kachel: normale Karte, Text in Textfarbe; die Vorschau liegt randlos und blass dahinter */
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel { isolation: isolate; }
/* Ralph 24.10.2026 (Artefakt-Wahl „Nur rechte Hälfte“): Bild sitzt rechts und läuft nach links ins Weiß aus, der Name steht frei */
#bsBereich[data-bereich="wissen"] .bw-vs { position: absolute; inset: 0 0 0 40%; z-index: -1; pointer-events: none; display: flex; align-items: center; justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 65%); mask-image: linear-gradient(90deg, transparent 0, #000 65%); }
/* Bild: oberer Teil der ersten Seite bzw. der Webseite, blass; beim Überfahren etwas deutlicher */
#bsBereich[data-bereich="wissen"] .bw-vs img { width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: .6; transition: opacity .25s, transform .35s; }
#bsBereich[data-bereich="wissen"] .bw-art-bild .bw-vs img { object-position: center; }
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:hover .bw-vs img { opacity: .8; transform: scale(1.03); }
/* Dunkelmodus: helle Seiten auf dunkler Karte noch leiser, damit der Text vorn bleibt */
/* Testlauf 24.10.2026: hell wirkte die rechte Hälfte wie ein grauer, verwaschener Block → Bild abdunkeln statt nur blasser */
:root[data-theme="dark"] #bsBereich[data-bereich="wissen"] .bw-vs img { opacity: .25; filter: brightness(.75); }
:root[data-theme="dark"] #bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:hover .bw-vs img { opacity: .4; }
/* Webseiten-Karte: Datum unten rechts auf ruhigem Grund — das Bild läuft auch nach unten aus */
#bsBereich[data-bereich="wissen"] .bw-art-web .bw-vs {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 65%), linear-gradient(180deg, #000 45%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 65%), linear-gradient(180deg, #000 45%, transparent 85%);
  mask-composite: intersect; }
/* Ohne Bild: nur das Art-Symbol, groß und blass in der Farbe der Art */
#bsBereich[data-bereich="wissen"] .bw-gross { display: inline-flex; color: var(--bs-text); opacity: .12; transition: opacity .25s; }
#bsBereich[data-bereich="wissen"] .bw-gross svg { width: 96px; height: 96px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:hover .bw-gross { opacity: .18; }
#bsBereich[data-bereich="wissen"] .bw-gross.bw-web { color: var(--marke-akzent); }
#bsBereich[data-bereich="wissen"] .bw-gross.bw-pdf { color: var(--marke-gefahr); }
#bsBereich[data-bereich="wissen"] .bw-gross.bw-tabelle { color: var(--marke-ok); }
#bsBereich[data-bereich="wissen"] .bw-gross.bw-word, #bsBereich[data-bereich="wissen"] .bw-gross.bw-bild { color: var(--marke-nav-blau); }
#bsBereich[data-bereich="wissen"] .bw-gross.bw-praes { color: var(--marke-warn); }
/* Vorschau lädt noch: Symbol noch leiser */
#bsBereich[data-bereich="wissen"] .bw-vs.bw-laedt .bw-gross { opacity: .05; }
#bsBereich[data-bereich="wissen"] .bw-k-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#bsBereich[data-bereich="wissen"] .bw-k-kopf .bs-marke { background: color-mix(in srgb, var(--bs-weich) 86%, transparent); }
#bsBereich[data-bereich="wissen"] .bw-k-name { font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; padding-right: 12%; }
/* Lesbarkeit (Befund 28.10.2026): Titel und Datum bekommen einen weichen Kartengrund, die Vorschau blendet dort aus; Vorschau bleibt (Ralph 24.10.) */
#bsBereich[data-bereich="wissen"] .bw-k-name, #bsBereich[data-bereich="wissen"] .bw-k-fuss {
  background: color-mix(in srgb, var(--bs-karte) 88%, transparent); box-shadow: 0 0 10px 8px color-mix(in srgb, var(--bs-karte) 88%, transparent); border-radius: 6px; position: relative; }
#bsBereich[data-bereich="wissen"] .bw-k-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--bs-leise); min-width: 0; }
#bsBereich[data-bereich="wissen"] .bw-k-fuss > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsBereich[data-bereich="wissen"] .bw-k-fuss > span:last-child { flex: none; font-variant-numeric: tabular-nums; }
/* Altwidget-Schutz: fremde Texte stehen in <code class="bw-roh"> (siehe workspace-bento-wissen.js roh()) — sieht aus wie normaler Text */
#bsBereich[data-bereich="wissen"] code.bw-roh, .bt-menue.bw-menue code.bw-roh { font: inherit; background: none; padding: 0; margin: 0; border: 0; color: inherit; white-space: inherit; letter-spacing: inherit; }
/* Platzhalter im ersten Moment nach dem Öffnen: Karten mit leisen Balken, sanft pulsierend */
#bsBereich[data-bereich="wissen"] .bw-skelett { justify-content: flex-end; }
#bsBereich[data-bereich="wissen"] .bw-skelett i, #bsBereich[data-bereich="wissen"] .bw-pillen-skelett i { display: block; height: 10px; border-radius: var(--marke-r-pill); background: var(--bs-weich); animation: bwPuls 1.4s ease-in-out infinite; }
#bsBereich[data-bereich="wissen"] .bw-skelett i:nth-child(1) { width: 34%; margin-bottom: auto; }
#bsBereich[data-bereich="wissen"] .bw-skelett i:nth-child(2) { width: 78%; height: 12px; }
#bsBereich[data-bereich="wissen"] .bw-skelett i:nth-child(3) { width: 52%; }
#bsBereich[data-bereich="wissen"] .bw-pillen-skelett i { width: 64px; height: 28px; background: rgba(255, 255, 255, .28); }
@keyframes bwPuls { 50% { opacity: .45; } }
#bsBereich[data-bereich="wissen"] .bw-st-failed, #bsBereich[data-bereich="wissen"] .bw-st-unsupported { color: var(--marke-gefahr); }
#bsBereich[data-bereich="wissen"] .bw-st-extracting { color: var(--bs-text); }

#bsBereich[data-bereich="wissen"] .bw-k.bw-fehler .bw-k-fuss > span:first-child { color: var(--marke-gefahr); }

/* Detail */
#bsBereich[data-bereich="wissen"] .bs-d-titel { margin-bottom: 4px; }
#bsBereich[data-bereich="wissen"] .bw-unter { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
#bsBereich[data-bereich="wissen"] .bs-d-meta a { color: var(--marke-akzent); text-decoration: none; }
#bsBereich[data-bereich="wissen"] .bs-d-meta a:hover { text-decoration: underline; }
#bsBereich[data-bereich="wissen"] .bw-vorschau { flex: 1 0 auto; padding-top: 16px; border-top: 1px solid var(--bs-linie); margin-bottom: 12px; }
#bsBereich[data-bereich="wissen"] .bw-h { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
#bsBereich[data-bereich="wissen"] .bw-datei { margin-bottom: 16px; }
#bsBereich[data-bereich="wissen"] .bw-datei img { display: block; max-width: 100%; max-height: 360px; border-radius: var(--bs-r-k); }
#bsBereich[data-bereich="wissen"] .bw-datei iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: var(--bs-r-k); background: #fff; }
/* PDF-Vorschau als helles Seitenbild (erste Seite) statt des dunklen Browser-PDF-Rahmens (Testlauf 24.10.2026) */
#bsBereich[data-bereich="wissen"] .bw-datei img.bw-seite { max-height: 420px; border: 1px solid var(--bs-linie); background: #fff; }
#bsBereich[data-bereich="wissen"] .bw-auszug { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
#bsBereich[data-bereich="wissen"] .bw-seiten { list-style: none; margin: 0 0 8px; padding: 0; }
#bsBereich[data-bereich="wissen"] .bw-seiten li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--bs-linie); font-size: 13px; min-width: 0; }
#bsBereich[data-bereich="wissen"] .bw-seiten li:last-child { border-bottom: 0; }
#bsBereich[data-bereich="wissen"] .bw-seiten b { font-weight: 600; overflow-wrap: anywhere; }
#bsBereich[data-bereich="wissen"] .bw-seiten a { font-size: 12px; color: var(--marke-akzent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsBereich[data-bereich="wissen"] .bs-meldung .bs-box { margin: 0 0 12px; }
/* Löschen: Gefahr-Farbe nur als Schrift auf dem leisen Knopf */
#bsBereich[data-bereich="wissen"] .bw-gefahr { color: var(--marke-gefahr); margin-left: auto; }
/* Rechts unten sitzt der runde Knopf „Fehler melden" — Platz lassen, damit Löschen nicht daran stößt */
#bsBereich[data-bereich="wissen"] .bs-d-aktion { padding-right: 64px; }

/* Formular „Wissen hinzufügen" */
#bsBereich[data-bereich="wissen"] .bw-teil { padding: 16px 0; border-top: 1px solid var(--bs-linie); }
#bsBereich[data-bereich="wissen"] .bw-ablage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center;
  border: 1px dashed var(--bs-linie); border-radius: var(--bs-r-k); background: var(--bs-weich); transition: box-shadow .2s; }
#bsBereich[data-bereich="wissen"] .bw-ablage p { margin: 0; font-size: 13px; color: var(--bs-leise); }
#bsBereich[data-bereich="wissen"] .bw-ablage.drauf { box-shadow: 0 0 0 2px var(--bs-dunkel); }
#bsBereich[data-bereich="wissen"] .bw-ergebnis { list-style: none; margin: 8px 0 0; padding: 0; }
#bsBereich[data-bereich="wissen"] .bw-ergebnis:empty { display: none; }
#bsBereich[data-bereich="wissen"] .bw-ergebnis li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--bs-linie); }
#bsBereich[data-bereich="wissen"] .bw-ergebnis li b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsBereich[data-bereich="wissen"] .bw-ergebnis li span { flex: none; color: var(--bs-leise); }
#bsBereich[data-bereich="wissen"] .bw-ergebnis li span.bs-rot { color: var(--marke-gefahr); flex: 0 1 auto; text-align: right; }
#bsBereich[data-bereich="wissen"] .a4h-field-label { display: block; margin: 0 0 4px; }
#bsBereich[data-bereich="wissen"] .bw-url { width: 100%; box-sizing: border-box; }
#bsBereich[data-bereich="wissen"] .bw-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0; font-size: 13px; color: var(--bs-leise); }
#bsBereich[data-bereich="wissen"] .bw-optionen label { display: inline-flex; align-items: center; gap: 8px; }
#bsBereich[data-bereich="wissen"] .bw-max { width: 88px; }
#bsBereich[data-bereich="wissen"] .bw-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#bsBereich[data-bereich="wissen"] .bw-zeile .bs-hinweis:empty { display: none; }

/* Spalten wie die Startseite (workspace-bento.js spalten(): 6 · 4 bis 1100 px · 3 bis 899 px · 1 unter 700 px) */
@media (max-width: 1100px) { #bsBereich[data-bereich="wissen"] .bw-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { #bsBereich[data-bereich="wissen"] .bw-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  #bsBereich[data-bereich="wissen"] .bs-liste { margin: 0 -12px -12px; padding: 12px; }
  #bsBereich[data-bereich="wissen"] .bw-raster { gap: 12px; }
  #bsBereich[data-bereich="wissen"] .bw-datei iframe { height: 320px; }
  #bsBereich[data-bereich="wissen"] .bs-d-aktion { position: static; margin-top: 8px; }
  #bsBereich[data-bereich="wissen"] .bw-gefahr { margin-left: 0; }
}
@media (max-width: 699px) {
  #bsBereich[data-bereich="wissen"] .bw-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; }
  #bsBereich[data-bereich="wissen"] .bw-k { padding: 16px 18px; }
  #bsBereich[data-bereich="wissen"] .bw-leer { grid-column: span 1; }
  #bsBereich[data-bereich="wissen"] .bw-kopf { grid-column: 1 / -1; grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  #bsBereich[data-bereich="wissen"] .bw-k.bs-kachel:hover .bw-vs img { transform: none; }
  #bsBereich[data-bereich="wissen"] .bw-skelett i, #bsBereich[data-bereich="wissen"] .bw-pillen-skelett i { animation: none; }
}
/* Rechtsklick-Menü einer Wissenskarte: Form und Farben vom Kontakt-Menü (.bc-menue, workspace-bento-crm.css); nur die Breite hier */
.bt-menue.bw-menue { width: 280px; }

/* Team-Sicht „Geteiltes Wissen“ (Menü, Ralph 02.11.2026): „Alles zeigen“ als Textknopf in der Kopf-Karte */
.bw-kopf .bw-alles { border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.bw-kopf .bw-alles:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--marke-r-s); }

/* ── Menü-Modus: schlichte Liste statt Kacheln (Ralph 02.11.2026) ── */
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .bs-liste { margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; overflow: hidden; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .bs-liste-karte { overflow: hidden; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .wss { height: 100%; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .wss .wss-liste { flex: 1 1 auto; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .wss .wss-leer { margin: auto; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .wss-suche { min-width: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="wissen"] .wss-detail .bs-d-aktion { position: static; margin: 0; padding: 12px 0 0; background: none; }