/*
  workspace-bento-wissen-ordner.css — Gestaltung der Bento-Seite „Ordner vom Firmenlaufwerk“ (workspace-bento-wissen-ordner.js).

  Kurzbeschreibung (für Laien): Gleiche Form wie die Vorgaben-Seite: links die blaue Kopfkarte, daneben eine breite weiße Kachel
  mit der eingebetteten Seite wissen-ordner.html, die mit ihrem Inhalt wächst (kein zweiter Rollbalken). Kacheln, Kopfkarte und
  Raster kommen aus den vorhandenen Klassen (.wbe-*, .wbk-*, .bs-kopfkarte). Greift nur mit html.ws-bento; Farben aus der Marke
  über die Bento-Werte (--wb-*). 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="wissen-ordner"] { grid-template-rows: minmax(0, 1fr); }

/* ── Übersicht: Kacheln im Raster der Startseite ── */
#bsBereich[data-bereich="wissen-ordner"] .bs-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; padding-top: 10px; }
#bsBereich[data-bereich="wissen-ordner"] .bs-kachel { grid-column: span 2; min-height: 0; gap: 4px; padding: 20px 22px; }
.wbo-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="wissen-ordner"][data-ansicht="raster"].bs-detail-auf .bs-detail { background: transparent; box-shadow: none; padding: 10px 2px 20px; }
.wbo-kopf { align-self: start; min-height: 168px; }
.wbo-k { grid-column: span 4; padding: 12px 16px; }
.wbo-k:hover { box-shadow: var(--wb-rand); }   /* Kachel mit Formular hebt sich nicht an */
.wbo-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="wissen-ordner"] .bs-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wbo-kopf { grid-column: span 4; min-height: 120px; }
}
@media (max-width: 900px) {
  #bsBereich[data-bereich="wissen-ordner"] .bs-kacheln { gap: 12px; }
}
/* Handy: eine Spalte, Reihen wachsen mit dem Inhalt, nie seitlich scrollen */
@media (max-width: 699px) {
  #bsBereich[data-bereich="wissen-ordner"] .bs-kacheln { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  #bsBereich[data-bereich="wissen-ordner"] .bs-kachel { grid-column: auto; min-height: 132px; padding: 16px 18px; }
  .wbo-kopf, .wbo-k { grid-column: auto; }
  .wbo-k { padding: 8px 10px; }
}