/*
  workspace-bento-pcstart.css — Bento „PC-Start“ (Logik: workspace-bento-pcstart.js).

  Kurzbeschreibung (für Laien): So sieht das kleine Startmenü auf der Bento-Startseite aus — Raster aus Symbolen mit
  Namen darunter, Hover hebt einen Eintrag leicht hervor, oben rechts ein runder „+“-Knopf, ab 9 Einträgen ein
  Suchfeld. Symbole liegen wie bei den Favoriten in einem runden Kästchen. Nur Marken-Werte, nur Inter.
*/

.wpc-kopf { justify-content: space-between; }
.wpc-plus { flex: none; }
.wpc-suche { width: 100%; margin: 8px 0 0; box-sizing: border-box; }

.wpc-raster { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-top: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; align-content: start; }
.wpc-eintrag { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px;
  border: 0; border-radius: var(--marke-r-m, 9px); background: transparent; color: var(--wb-text, var(--marke-text));
  font: 600 12px/1.3 var(--marke-schrift); cursor: pointer; transition: background .15s, opacity .15s; }
.wpc-eintrag:hover { background: var(--wb-weich, var(--marke-flaeche-2)); }
.wpc-eintrag:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; }
.wpc-eintrag.laeuft { opacity: .55; }
.wpc-eintrag[hidden] { display: none; }
.wpc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

.wpc-symbol { flex: none; width: 40px; height: 40px; border-radius: var(--marke-r-l, 12px); display: inline-flex; align-items: center; justify-content: center;
  background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); overflow: hidden; }
.wpc-eintrag:hover .wpc-symbol { background: var(--wb-karte, var(--marke-flaeche)); }
.wpc-symbol img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.wpc-symbol.zeichen svg { width: 20px; height: 20px; }

.wpc-nichts { margin-top: 8px; }
.wpc-nichts[hidden] { display: none; }
.wpc-leer, .wpc-hinweis { gap: 8px; }
.wpc-hinweis svg { color: var(--wb-leise, var(--marke-text-2)); }
.wpc-hinweis b { font: 700 14px/1.3 var(--marke-schrift); color: var(--wb-text, var(--marke-text)); }
.wpc-hinweis span { line-height: 1.5; }