/*
  workspace-bento-suche.css — Trefferseite der Gesamtsuche (Logik: workspace-bento-suche.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — Treffer als Bento, bester oben groß. Raster, Radius, Schatten und
  Abstände exakt wie auf der Bento-Startseite (workspace-bento.css: 6/4/3/1 Spalten, Reihen 168 px bzw. 132 px am Handy,
  16/12 px Luft). Bester Treffer 2×2, fast gleich gute 2×1, Rest 1×1. Keine Kennzahl-Leiste, keine eigene Suche (das Feld
  oben sucht), Filter als eigene kleine Kachel im selben Raster, „+"-Kachel am Ende. Greift nur im Bereich „suche".
*/
:root.bs-offen #bsBereich[data-bereich="suche"] { grid-template-rows: minmax(0, 1fr); }
#bsBereich[data-bereich="suche"] .bs-kopf, #bsBereich[data-bereich="suche"] .bs-werkzeug, #bsBereich[data-bereich="suche"] .bs-liste-karte > .bs-pillen { display: none; }
#bsBereich[data-bereich="suche"] .bs-liste-karte { background: transparent; box-shadow: none; padding: 0; }

/* Raster wie die Startseite; Luft oben, damit Anheben und Hover nicht abgeschnitten werden */
.bsu-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; }   /* Hover-Luft kommt aus der Liste der Vorlage */
#bsBereich .bsu-raster .bsu-k { min-height: 0; gap: 6px; padding: 20px 22px; border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); overflow: hidden; }
#bsBereich .bsu-raster .bsu-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); }
#bsBereich .bsu-raster .bsu-k:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); }
.bsu-gross { grid-column: span 2; grid-row: span 2; }
.bsu-breit { grid-column: span 2; }
.bsu-filter { grid-column: span 2; }

.bsu-art { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsu-art svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bsu-titel { font-size: 14px; -webkit-line-clamp: 2; margin-top: 4px; }
.bsu-gross .bsu-titel { font-size: 20px; line-height: 1.3; -webkit-line-clamp: 3; letter-spacing: -.01em; }
.bsu-unter { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsu-text { -webkit-line-clamp: 2; }
.bsu-klein .bsu-text { -webkit-line-clamp: 1; }
.bsu-gross .bsu-text { -webkit-line-clamp: 7; font-size: 14px; margin-top: 4px; }
.bsu-k mark, #bsBereich[data-bereich="suche"] .bs-d-text mark { background: color-mix(in srgb, var(--marke-nav-blau) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* „Suche läuft" / „Mails werden durchsucht" — Kreis allein auf der Fläche: groß */
.bsu-laedt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; color: var(--bs-leise); font-size: 13px; }
.bsu-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding: 20px 22px; box-sizing: border-box;
  border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-leise); font-size: 12px; text-align: center; box-shadow: var(--wb-rand, none); }

/* „+"-Kachel wie „+ Kachel hinzufügen" auf der Startseite */
.bsu-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 20px 22px; box-sizing: border-box;
  border: 2px dashed var(--marke-linie-stark); border-radius: var(--bs-r); background: transparent; color: var(--bs-leise); font: 600 13px var(--marke-schrift);
  cursor: pointer; transition: background .2s, color .2s; text-align: center; }
.bsu-plus span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bsu-plus:hover { background: var(--bs-karte); color: var(--bs-text); }
.bsu-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
.bsu-plus svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* „Nichts gefunden" als normale Kachel im Raster, „+"-Kachel daneben (Testlauf 24.10.2026: war bildschirmhoch) */
.bsu-raster > .bsu-leer { grid-column: span 2; height: auto; min-height: 0; box-shadow: var(--wbs-schatten); }
@media (max-width: 699px) { .bsu-raster > .bsu-leer { grid-column: auto; } }

@media (max-width: 1100px) { .bsu-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .bsu-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 699px) {
  .bsu-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(132px, auto); }
  .bsu-gross { grid-column: auto; grid-row: auto; min-height: 200px; }
  .bsu-breit, .bsu-filter { grid-column: auto; }
  #bsBereich .bsu-raster .bsu-k, .bsu-plus, .bsu-status { padding: 16px 18px; }
  .bsu-gross .bsu-titel { font-size: 15px; }
  .bsu-gross .bsu-text { -webkit-line-clamp: 4; }
}