/*
  workspace-bento-kachelwahl.css — Fenster „Kachel hinzufügen" (Logik: workspace-bento-kachelwahl.js).

  Kurzbeschreibung (für Laien): Kompaktes Auswahlfenster statt langer Liste — Suchfeld, Bereichs-Pillen, Raster kleiner
  Kacheln mit Symbol und Name, Sonderpunkte unten. Baukasten der Bento-Fenster (wb-fenster, wb-feld, wb-pille,
  wb-knopf-leise; workspace-bento.css) nach dem Baustein „Dialog" (marke/bausteine/43-dialog.html).
  Höchstens 80 % der Fensterhöhe, innen senkrecht scrollbar, nie seitlich; am Handy als Blatt von unten.
*/
.wkw-hinter { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px; background: var(--marke-abdunklung); font-family: var(--marke-schrift); box-sizing: border-box; }   /* oben verankert: beim Tippen springt das Fenster nicht */
.wkw-fenster { width: 100%; max-width: 680px; max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; overflow: hidden; animation: wbRein .18s ease both; }
.wkw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.wkw-kopf .wb-fenster-titel { margin-right: auto; min-width: 0; }
.wkw-zurueck[hidden] { display: none; }
.wkw-zurueck { margin-right: -4px; }   /* Pfeil „Zurück“ im Untermenü des strengen Katalogs (Baustein Dialog: runder Knopf wie Schließen) */
.wkw-marke svg.weiter { margin-left: 2px; }
.wkw-kopf .wb-rund svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Suchfeld mit Lupe (wie die Suche oben in der Kopfzeile) */
.wkw-suche { position: relative; display: block; flex: none; }
.wkw-suche svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none;
  fill: none; stroke: var(--wb-leise, var(--marke-text-2)); stroke-width: 2; stroke-linecap: round; }
.wkw-suche .wb-feld { padding-left: 38px; }
.wkw-suche .wb-feld::-webkit-search-cancel-button { cursor: pointer; }

/* Bereichs-Pillen: umbrechen statt seitlich scrollen */
.wkw-pillen { flex: none; gap: 4px; }
.wkw-pillen .wb-pille i { font-style: normal; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }

/* Raster kleiner Kacheln */
.wkw-raster { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overflow-x: hidden; display: grid; gap: 8px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); padding: 4px; margin: -4px; overscroll-behavior: contain; }
.wkw-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 92px;
  padding: 12px 8px; border: 0; border-radius: var(--wb-r-k, 14px); background: var(--wb-weich, var(--marke-flaeche-2));
  color: var(--wb-text, var(--marke-text)); font: 600 13px/1.3 var(--marke-schrift); text-align: center; cursor: pointer; box-sizing: border-box;
  transition: background .15s, box-shadow .15s; }
.wkw-kachel:hover { background: color-mix(in srgb, var(--wb-text, var(--marke-text)) 10%, var(--wb-karte, var(--marke-flaeche))); }
.wkw-kachel:focus-visible, .wkw-kachel.erster { outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-text, var(--marke-text)) 35%, transparent); }
.wkw-sym { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--marke-r-m, 9px); background: var(--wb-karte, var(--marke-flaeche)); color: var(--wb-text, var(--marke-text)); }
.wkw-sym svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wkw-name { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: normal; word-break: normal; hyphens: manual; }   /* Umbruch nur an Wortgrenzen (Ralph 26.10.2026, d5: „Auftragseingan / g“) */
.wkw-leer { grid-column: 1 / -1; padding: 24px 8px; text-align: center; font-size: 13px; color: var(--wb-leise, var(--marke-text-2)); }

/* Sonderpunkte unten */
.wkw-fuss { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--wb-linie, var(--marke-linie)); }

/* Handy: Blatt von unten */
@media (max-width: 600px) {
  .wkw-hinter { align-items: flex-end; padding: 0; }
  .wkw-fenster { max-width: none; max-height: 85vh; padding: 16px; border-radius: var(--wb-r, 22px) var(--wb-r, 22px) 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); animation: wkwHoch .22s ease both; }
  .wkw-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }   /* breit genug für lange Wörter in einer Zeile (d5) */
  .wkw-kachel { min-height: 84px; }
}
@keyframes wkwHoch { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wkw-fenster { animation: none; } }

/* Customized-Werkzeuge (nur dieses Konto) in Mint + Legende unter dem Raster (Ralph 25.10.2026) */
.wkw-kachel.custom { background: var(--marke-customized-kachel); }
.wkw-kachel.custom:hover { background: color-mix(in srgb, var(--marke-customized) 18%, var(--marke-customized-kachel)); }
.wkw-legende { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; font-size: 12px; color: var(--wb-leise); }
.wkw-legende-farbe { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--marke-customized-kachel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-customized) 35%, transparent); }

/* Konto-Admin-Ansicht (Ralph 26.10.2026, wie im AIOS; Logik: workspace-bento-kachelwahl-admin.js):
   „schon da“ und „entfernt“ ausgegraut und nicht anklickbar, kleine Zeile mit Schloss für Einschränkungen.
   Nach einer Rechtsklick-Aktion öffnet das Fenster ohne erneutes Hereinfliegen (wkw-still) – kein Ruckeln. */
.wkw-still .wkw-fenster { animation: none; }
.wkw-kachel.schon, .wkw-kachel.aus { cursor: default; }
.wkw-kachel.schon .wkw-sym, .wkw-kachel.schon .wkw-name { opacity: .55; }
.wkw-kachel.aus { background: transparent; box-shadow: inset 0 0 0 1px var(--wb-linie, var(--marke-linie)); }
.wkw-kachel.aus .wkw-sym, .wkw-kachel.aus .wkw-name { opacity: .45; }
.wkw-kachel.schon:hover { background: var(--wb-weich, var(--marke-flaeche-2)); }
.wkw-kachel.aus:hover { background: transparent; }
.wkw-marke { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: -4px; font: 500 11px/1.3 var(--marke-schrift);
  color: var(--wb-leise, var(--marke-text-2)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wkw-marke svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Leere Platzhalter-Bentos (workspace-bento-platzhalter.js): Symbol-Auswahl im Fenster „Neues leeres Bento“ / „Symbol ändern“ */
.wbp-symbole { gap: 4px; }
.wbp-sym { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0; }
.wbp-sym svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Rechte-Menü, Dialoge („Sichtbar für …“, Umbenennen) und Meldungen über dem offenen Fenster „Bento hinzufügen“
   (Ralph 26.10.2026: Fenster bleibt beim Rechtsklick offen) */
:root .wkw-hinter ~ .wb-kontext, :root .wkw-hinter ~ .a4h-overlay, :root .wkw-hinter ~ .wb-meldung[role] { z-index: 10060; }

/* Beta-Katalog (workspace-bento-katalog-beta.js): drei Gruppen mit Überschrift statt Reiter */
.wkw-gruppe { grid-column: 1 / -1; padding: 8px 2px 0; font: 700 12px var(--marke-schrift); letter-spacing: .02em; color: var(--wb-leise, var(--marke-text-2)); }
.wkw-gruppe:first-child { padding-top: 0; }