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

  Kurzbeschreibung (für Laien): Ralph, 08.11.2026 — Dokumentenablage. Weiße Kacheln im Raster wie auf der Startseite (12 Spalten, gleiche
  Rundung, gleicher Schatten): links groß das Dokument oder das Hochladen, rechts schmal die Liste. Die Hochlade-Kachel läuft von zartem Blau
  leicht ins Weiße aus. Kein farbiger Seitenstreifen, keine Beispieltexte in Feldern, kein eigenes Suchfeld (das Suchfeld oben filtert die
  Liste). Listen und Tabellen passen sich der Breite an und scrollen nur senkrecht. Greift nur im geöffneten Bereich (#bsBereich[data-bereich="dokumente"]).
*/
/* marke-ausnahme: Bento-Ansicht wie im AIOS — Kachel-Radien (--bs-r) und Pillen-Reiter gelten hier bewusst (marke/REGELN.md, Abschnitt Bento-Ansicht) */

#bsBereich[data-bereich="dokumente"] .bs-pillen { display: none; }
#bsBereich[data-bereich="dokumente"] .bs-liste-karte { overflow: visible; background: transparent; box-shadow: none; }
#bsBereich[data-bereich="dokumente"] .bs-liste { margin: 0 -20px -20px; padding: 4px 20px 20px; }
/* Reiter „Für mich“ / „Verwaltung“: erste Zeile bei y 152 wie überall (die Rahmenregel gab 12 px oben dazu) */
:root.wb-menue-modus #bsBereich[data-bereich="dokumente"] .bs-liste { padding-top: 0; }

#bsBereich[data-bereich="dokumente"] .dk-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
#bsBereich[data-bereich="dokumente"] .dk-k { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px; box-sizing: border-box;
  background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); font-family: var(--marke-schrift); font-size: 13px; }
#bsBereich[data-bereich="dokumente"] .dk-k.b8 { grid-column: 1 / -1; }
#bsBereich[data-bereich="dokumente"] .dk-k.b12, #bsBereich[data-bereich="dokumente"] .dk-k.breit { grid-column: 1 / -1; }
html.wb-menue-modus #bsBereich[data-bereich="dokumente"] .dk-k { border: 1px solid var(--bs-linie); box-shadow: none; }
/* Farbige Fläche: zartes Blau, das nach rechts unten ins Weiße ausläuft */
#bsBereich[data-bereich="dokumente"] .dk-k.b8:first-child { background: linear-gradient(135deg, var(--wb-akzent-zart, var(--marke-nav-kachel)) 0%, var(--bs-karte) 100%); }
#bsBereich[data-bereich="dokumente"] .dk-k-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--bs-leise); }
#bsBereich[data-bereich="dokumente"] .dk-k.hoch > .dk-k-l:first-child { color: var(--bs-text); font-size: 15px; font-weight: 700; }
#bsBereich[data-bereich="dokumente"] .dk-sub { display: block; font-size: 12px; color: var(--bs-leise); margin: 0; }
#bsBereich[data-bereich="dokumente"] .dk-sub-form { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--bs-linie); }
#bsBereich[data-bereich="dokumente"] .dk-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
#bsBereich[data-bereich="dokumente"] .dk-link { border: 0; background: none; padding: 0; font: 600 12px var(--marke-schrift); color: var(--wb-auswahl, var(--marke-nav-blau)); cursor: pointer; text-decoration: underline; }
#bsBereich[data-bereich="dokumente"] .dk-link:hover { color: var(--bs-text); }
#bsBereich[data-bereich="dokumente"] .dk-leer { padding: 12px 4px; text-align: center; color: var(--bs-leise); font-size: 13px; }
#bsBereich[data-bereich="dokumente"] .dk-hinweis { padding: 8px 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-warn) 14%, var(--bs-karte)); font-size: 12px; }
#bsBereich[data-bereich="dokumente"] .dk-meldung { padding: 8px 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-ok) 12%, var(--bs-karte)); font-size: 12px; }
#bsBereich[data-bereich="dokumente"] .dk-meldung.fehler { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); }
#bsBereich[data-bereich="dokumente"] .dk-vorschlag { margin-left: 4px; padding: 1px 7px; border-radius: var(--marke-r-pill); background: var(--wb-akzent-zart, var(--marke-nav-kachel)); color: var(--bs-text); font-size: 11px; font-weight: 600; cursor: help; }
#bsBereich[data-bereich="dokumente"] .dk-dreh { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--bs-linie); border-top-color: var(--wb-auswahl, var(--marke-nav-blau)); border-radius: 50%; vertical-align: -2px; animation: dk-dreh .8s linear infinite; }
@keyframes dk-dreh { to { transform: rotate(360deg); } }

/* Reiter im Dokument */
#bsBereich[data-bereich="dokumente"] .dk-reiter { display: flex; gap: 4px; flex-wrap: wrap; }
#bsBereich[data-bereich="dokumente"] .dk-reiter button { height: 28px; padding: 0 12px; border: 1px solid var(--bs-linie); border-radius: var(--marke-r-pill); background: transparent; color: var(--bs-leise); font: 600 12px var(--marke-schrift); cursor: pointer; }
#bsBereich[data-bereich="dokumente"] .dk-reiter button.an { background: var(--wb-auswahl, var(--marke-nav-blau)); border-color: transparent; color: #fff; }
#bsBereich[data-bereich="dokumente"] .dk-innen { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; max-height: 52vh; }

/* Formulare */
#bsBereich[data-bereich="dokumente"] .dk-form { display: flex; flex-direction: column; gap: 10px; }
#bsBereich[data-bereich="dokumente"] .dk-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#bsBereich[data-bereich="dokumente"] .dk-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#bsBereich[data-bereich="dokumente"] .dk-feld .a4h-field { width: 100%; box-sizing: border-box; }
#bsBereich[data-bereich="dokumente"] .dk-hakenreihe { display: flex; flex-wrap: wrap; gap: 6px 16px; }
#bsBereich[data-bereich="dokumente"] .dk-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
#bsBereich[data-bereich="dokumente"] .dk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--marke-r-pill); background: var(--bs-weich); font-weight: 600; }
#bsBereich[data-bereich="dokumente"] .dk-aufgabe { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-warn) 14%, var(--bs-karte)); }

/* Tabellen und Listen */
#bsBereich[data-bereich="dokumente"] .dk-tab { width: 100%; border-collapse: collapse; table-layout: auto; }
#bsBereich[data-bereich="dokumente"] .dk-tab th { padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--bs-leise); border-bottom: 1px solid var(--bs-linie); white-space: nowrap; }
#bsBereich[data-bereich="dokumente"] .dk-tab td { padding: 8px; border-bottom: 1px solid var(--bs-linie); vertical-align: top; overflow-wrap: anywhere; }
#bsBereich[data-bereich="dokumente"] .dk-tab td.z, #bsBereich[data-bereich="dokumente"] .dk-tab th.z { text-align: right; white-space: nowrap; }
#bsBereich[data-bereich="dokumente"] .dk-tab small { display: block; font-size: 11px; color: var(--bs-leise); }
#bsBereich[data-bereich="dokumente"] .dk-liste { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 48vh; }
#bsBereich[data-bereich="dokumente"] .dk-liste.kurz { max-height: 150px; }
#bsBereich[data-bereich="dokumente"] .dk-filterzeile { grid-column: 1 / -1; max-width: 260px; }
#bsBereich[data-bereich="dokumente"] .dk-filter { width: 100%; box-sizing: border-box; }
#bsBereich[data-bereich="dokumente"] > .bs-raster > .bs-detail, #bsBereich[data-bereich="dokumente"] > .bs-kopf, #bsBereich[data-bereich="dokumente"] .bs-werkzeug { display: none !important; }
#bsBereich[data-bereich="dokumente"]:has(> .bs-kopf) { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="dokumente"] .bs-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="dokumente"] .bs-liste { display: flex; flex-direction: column; min-height: 0; -webkit-mask-image: none; mask-image: none; }
#bsBereich[data-bereich="dokumente"] .dk-seite { flex: 1 1 auto; min-height: 0; }
#bsBereich[data-bereich="dokumente"] .dk-seite.bsp-seite { height: auto; }
#bsBereich[data-bereich="dokumente"] .dk-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--marke-r-m, 9px); background: var(--bs-weich); }
#bsBereich[data-bereich="dokumente"] .dk-eintrag b { font-size: 13px; }

/* Stempel: Rahmen und Schrift in der Stempelfarbe (aus der Vorlage), Grund bleibt weiß */
#bsBereich[data-bereich="dokumente"] .dk-stempelliste { display: flex; flex-wrap: wrap; gap: 10px; }
#bsBereich[data-bereich="dokumente"] .dk-stempel { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 2px solid var(--dk-ton, var(--marke-ok)); border-radius: var(--marke-r-m, 9px);
  color: var(--dk-ton, var(--marke-ok)); background: linear-gradient(135deg, color-mix(in srgb, var(--dk-ton, var(--marke-ok)) 10%, var(--bs-karte)) 0%, var(--bs-karte) 100%); font-size: 11px; }
#bsBereich[data-bereich="dokumente"] .dk-stempel b { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 900px) {
  #bsBereich[data-bereich="dokumente"] .dk-innen { max-height: none; }
}

/* Ablagefläche statt Browser-Dateifeld (wie Wissen): gestrichelt, Grafit, Verlauf nach rechts unten ins Weiße */
#bsBereich[data-bereich="dokumente"] .dk-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 96px; padding: 16px; cursor: pointer;
  border: 1px dashed var(--bs-linie); border-radius: var(--marke-r-l, 12px); color: var(--bs-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--marke-grafit) 6%, var(--bs-karte)) 0%, var(--bs-karte) 100%); }
#bsBereich[data-bereich="dokumente"] .dk-drop:hover, #bsBereich[data-bereich="dokumente"] .dk-drop.drauf, #bsBereich[data-bereich="dokumente"] .dk-drop.gewaehlt { border-color: var(--marke-grafit); }
#bsBereich[data-bereich="dokumente"] .dk-drop:focus-visible { outline: 2px solid var(--marke-grafit); outline-offset: 2px; }
#bsBereich[data-bereich="dokumente"] .dk-drop svg { width: 24px; height: 24px; fill: none; stroke: var(--marke-grafit); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bsBereich[data-bereich="dokumente"] .dk-drop b { font: 600 13px var(--marke-schrift); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsBereich[data-bereich="dokumente"] .dk-drop span { font: 400 12px var(--marke-schrift); color: var(--bs-leise); }

/* Knopf neben einem Feld (z. B. „Hinzufügen“ bei den Stempeln): unten bündig mit dem Feld, nicht über die ganze Spalte gezogen */
#bsBereich[data-bereich="dokumente"] .dk-zeile > .dk-feld:has(> .bs-knopf) { justify-content: flex-end; }
#bsBereich[data-bereich="dokumente"] .dk-zeile > .dk-feld > .bs-knopf { align-self: flex-start; }