/*
  workspace-bento-vorgaben.css — Gestaltung der Bento-Seite „Vorgaben für Chat & Mails" (workspace-bento-vorgaben.js).

  Kurzbeschreibung (für Laien): Gleiche Form wie die Einstellungen (workspace-bento-konto.css): Übersicht im Raster der
  Startseite (6 Spalten, Reihen 168 px, 16 px Luft) mit je einer Kachel pro Bereich (Chat, E-Mail, Wissensdatenbank).
  Geöffnet: links die große blaue Kopfkarte, daneben eine breite weiße Kachel mit der eingebetteten Vorgaben-Seite, die
  mit ihrem Inhalt wächst (kein zweiter Rollbalken). Kacheln, Kopfkarte und Raster kommen aus den vorhandenen Klassen
  (.wbe-*, .wbk-*, .bs-kopfkarte) — hier steht nur, was für diesen Bereich anders ist. Greift nur mit html.ws-bento;
  Farben aus der Marke über die Bento-Werte (--wb-*), dunkel automatisch mit. Handy (< 700 px): eine Spalte.
*/

/* Ohne Kennzahl-Kopf füllt das Raster die ganze Höhe — sonst würde der geöffnete Bereich unten abgeschnitten */
:root.bs-offen #bsBereich[data-bereich="vorgaben"] { grid-template-rows: minmax(0, 1fr); }

/* ── Übersicht: Kacheln im Raster der Startseite ── */
#bsBereich[data-bereich="vorgaben"] .bs-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; padding-top: 10px; }
#bsBereich[data-bereich="vorgaben"] .bs-kachel { grid-column: span 2; min-height: 0; gap: 4px; padding: 20px 22px; }
.wbv-zahl { margin-top: auto; align-self: flex-start; padding: 2px 10px; border-radius: var(--marke-r-pill); background: var(--wb-weich);
  color: var(--wb-text); font-size: 12px; font-weight: 600; line-height: 1.6; }

/* ── Geöffneter Bereich: kein weißes Blatt, sondern Kopfkarte + eine breite Kachel auf dem grauen Grund ── */
#bsBereich[data-bereich="vorgaben"][data-ansicht="raster"].bs-detail-auf .bs-detail { background: transparent; box-shadow: none; padding: 10px 2px 20px; }
.wbv-kopf { align-self: start; min-height: 168px; }
.wbv-k { grid-column: span 4; padding: 12px 16px; }
.wbv-k:hover { box-shadow: var(--wb-rand); }   /* Kachel mit Formular hebt sich nicht an */
.wbv-rahmen { display: block; width: 100%; height: 480px; border: 0; background: transparent; overflow: hidden; }

/* Tablet: 4 Spalten — Kopfkarte oben über die ganze Breite, darunter die Vorgaben */
@media (max-width: 1100px) {
  #bsBereich[data-bereich="vorgaben"] .bs-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wbv-kopf { grid-column: span 4; min-height: 120px; }
}
@media (max-width: 900px) {
  #bsBereich[data-bereich="vorgaben"] .bs-kacheln { gap: 12px; }
}
/* Handy: eine Spalte, Reihen wachsen mit dem Inhalt, nie seitlich scrollen */
@media (max-width: 699px) {
  #bsBereich[data-bereich="vorgaben"] .bs-kacheln { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  #bsBereich[data-bereich="vorgaben"] .bs-kachel { grid-column: auto; min-height: 132px; padding: 16px 18px; }
  .wbv-kopf, .wbv-k { grid-column: auto; }
  .wbv-k { padding: 8px 10px; }
}

/* Übersicht der Bereiche, solange keiner gewählt ist (Ralph 08.11.2026) */
.wbv-ue { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 16px; max-width: 560px; }
.wbv-ue-titel { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.wbv-ue-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bsl-linie, var(--wb-linie)); border-radius: 9px; background: var(--bs-karte, #fff); font: inherit; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.wbv-ue-zeile:hover { background: var(--bs-weich, rgba(0,0,0,.04)); }
.wbv-ue-sym { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--bs-weich, rgba(0,0,0,.05)); }
.wbv-ue-sym svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wbv-ue-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wbv-ue-text b { font-size: 13px; font-weight: 600; }
.wbv-ue-text small { font-size: 12px; color: var(--bs-leise, var(--wb-leise)); }
.wbv-ue-zahl { flex: none; font-size: 12px; font-weight: 600; color: var(--bs-leise, var(--wb-leise)); white-space: nowrap; }

/* Spalte auf Standardbreite und -lage (Ralph 08.11.2026): Rand rechts wie bei Notizen/Kontakte (Liste endet am Kartenrand, Trennlinie bei 1172 px) */
@media (min-width: 901px) {
  :root.wb-menue-modus #bsBereich.wbm-seite[data-bereich="vorgaben"] { padding-right: 0 !important; margin-right: 20px !important; }
}
@media (min-width: 901px) {
  :root.wb-menue-modus #bsBereich.wbm-seite[data-bereich="vorgaben"] { column-gap: 0; }
  :root.wb-menue-modus #bsBereich.wbm-seite[data-bereich="vorgaben"] .bs-liste { padding-left: 8px; box-sizing: border-box; }
}