/*
  workspace-bento-notizen.css — Gestaltung des Bereichs „Notizen" in der Bento-Ansicht (Logik: workspace-bento-notizen.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — „eine Kachel pro Notiz, sonst gar nichts". Der Bereich zeigt nur
  ein Raster aus Kacheln. Raster, Kachel, Größen-Ecke, „+"-Kachel und Menü kommen unverändert von der Bento-Startseite
  (workspace-bento.css: .wb-raster, .wb-k, .wb-k.plus, .wb-kontext) — hier stehen nur die Teile, die eine Notiz-Kachel
  zusätzlich braucht (Titel- und Schreibfeld in der Kachel, kleiner Menü-Knopf, Hinweiszeile) und das Ausblenden
  von Kennzahlen, Suche, Filtern und Detail der Bereichs-Vorlage. Greift nur im geöffneten Notizen-Bereich
  (#bsBereich[data-bereich="notizen"]) bzw. an den Notiz-Kacheln (.bn-*).

  Menü-Modus (Beta, 02.11.2026): Statt Kacheln eine schlichte Liste links und die gewählte Notiz rechts (Klassen .wss-* aus
  workspace-bento-schlicht.css). Ganz unten stehen nur die Teile, die der Schreibbereich rechts (.bn-ed) zusätzlich braucht.
*/

/* ── Bereich: nur das Raster, die ganze Fläche ── */
:root.bs-offen #bsBereich[data-bereich="notizen"] { grid-template-rows: minmax(0, 1fr); padding-bottom: 0; }
#bsBereich[data-bereich="notizen"] .bs-kopf, #bsBereich[data-bereich="notizen"] .bs-werkzeug,
#bsBereich[data-bereich="notizen"] .bs-pillen, #bsBereich[data-bereich="notizen"] .bs-detail { display: none !important; }
#bsBereich[data-bereich="notizen"] .bs-liste-karte { overflow: visible; visibility: visible !important; background: transparent; box-shadow: none; padding: 0; }
/* Platz für Schatten und Hover rundum wie auf der Startseite (#wbStart: 12px oben, 20px seitlich/unten) */
#bsBereich[data-bereich="notizen"] .bs-liste { margin: 0 -20px; padding: 12px 20px 20px; }

/* ── Notiz-Kachel: Grundform ist .wb-k der Startseite ── */
.bn-k { cursor: default; gap: 6px; }
.bn-titel { flex: none; display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0 30px 0 0; border: 0; outline: 0; background: none;
  font: 600 15px/1.35 var(--marke-schrift); color: var(--wb-text); text-overflow: ellipsis; user-select: text; -webkit-user-select: text; }
.bn-titel-wrap, .bn-pw-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-titel-wrap { flex: none; }
.bn-pw-wrap { flex: 1 1 auto; }
.bn-feld-l { font-size: 11px; line-height: 1.3; font-weight: 500; color: var(--wb-leise); }
.bn-text { flex: 1 1 auto; min-height: 0; overflow: hidden; outline: 0; font-size: 13px; line-height: 1.5; color: var(--wb-text); overflow-wrap: anywhere;
  cursor: text; user-select: text; -webkit-user-select: text;
  /* so viel Text, wie hineinpasst — unten weich ausgeblendet; beim Schreiben scrollt das Feld */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.bn-text:focus { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.bn-text:empty::before { content: attr(data-platzhalter); color: var(--wb-leise); opacity: .7; pointer-events: none; }
.bn-text p, .bn-text ul, .bn-text ol { margin: 0 0 6px; }
.bn-text ul, .bn-text ol { padding-left: 20px; }
.bn-text h1, .bn-text h2, .bn-text h3 { font-size: 14px; margin: 0 0 6px; }
.bn-text a { color: var(--marke-akzent); }
.bn-k.nur-lesen .bn-titel, .bn-k.nur-lesen .bn-text { cursor: default; }
/* Beim Schreiben: Schatten wie beim Überfahren */
.bn-k:focus-within { box-shadow: var(--wb-schatten-hover); }
.bn-k:focus-visible { box-shadow: 0 0 0 2px var(--wb-grund), 0 0 0 4px var(--marke-akzent); }

/* Hinweiszeile (Raum, nur lesbar, Fehler beim Speichern) — nur wenn es etwas zu sagen gibt */
.bn-fuss { flex: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; line-height: 1.4; color: var(--wb-leise); padding-right: 18px; }
.bn-fuss[hidden] { display: none; }
.bn-ort, .bn-stand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-stand:empty { display: none; }
.bn-stand.rot { color: var(--marke-gefahr); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Kleiner Menü-Knopf oben rechts (Linien-Symbol), sichtbar beim Überfahren; am Touch-Gerät immer */
.bn-menue { position: absolute; top: 14px; right: 14px; z-index: 2; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--marke-r-m);
  background: none; color: var(--wb-leise); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.bn-menue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bn-k:hover .bn-menue, .bn-k:focus-within .bn-menue, .bn-menue:focus-visible { opacity: 1; }
.bn-menue:hover { background: var(--wb-weich); color: var(--wb-text); }
@media (hover: none) { .bn-menue { opacity: 1; } }
:root.wb-zieht .bn-menue { opacity: 0; }

/* „+"-Kachel (Form .wb-k.plus der Startseite) und Hinweis „nichts gefunden" */
.bn-plus.laedt { opacity: .6; pointer-events: none; }
.bn-hinweis { cursor: default; justify-content: center; font-size: 13px; color: var(--wb-leise); }

/* Menü: Form .wb-kontext der Startseite; Löschen in Rot */
.bn-kontext { min-width: 200px; }
.bn-kontext .bn-gefahr { color: var(--marke-gefahr); }

@media (max-width: 900px) {
  #bsBereich[data-bereich="notizen"] .bs-liste { margin: 0 -12px; padding: 8px 12px 12px; }
}
@media (max-width: 699px) {
  .bn-menue { top: 10px; right: 10px; }
}

/* ── Mit Passwort geschützt: gesperrte Kachel zeigt nur Titel, Schloss, „Gesperrt“ (und auf Klick das Passwortfeld) ── */
.bn-k.gesperrt { cursor: pointer; }
.bn-k.gesperrt .bn-titel { cursor: pointer; }
.bn-schloss { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bn-schloss[hidden] { display: none; }
.bn-schloss-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wb-leise); }
.bn-schloss-zeile svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-entsperren { display: flex; gap: 8px; align-items: center; min-width: 0; }
.bn-entsperren[hidden] { display: none; }
.bn-entsperren .a4h-field { width: 100%; min-width: 0; box-sizing: border-box; }
.bn-entsperren .a4h-btn { flex: none; }
.bn-meldung { font-size: 12px; line-height: 1.4; color: var(--marke-gefahr); }
.bn-meldung:empty { display: none; }

/* ── Menü-Modus: Liste links, Notiz rechts (nur mit html.wb-menue-modus) ── */
:root.wb-menue-modus #bsBereich[data-bereich="notizen"] .bs-liste { margin: 0; padding: 0; height: 100%; overflow: visible; }
:root.wb-menue-modus #bsBereich[data-bereich="notizen"] .bs-liste-karte { height: 100%; }
.bn-wss .wss-suche svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-wss .wss-suche input::-webkit-search-cancel-button { display: none; }
.wss-neu.laedt, .bsp-neu.laedt { opacity: .6; pointer-events: none; }
.bn-wss .wss-suche { min-width: 0; }
.bn-wss .wss-neu { white-space: nowrap; }
.bn-wss .wss-detail { overflow: hidden; }

.bn-ed { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--marke-sp-3); cursor: default; }
.bn-ed .bn-titel { font: 600 18px/1.35 var(--marke-schrift); padding: 0 40px 8px 0; border-bottom: 1px solid var(--wb-linie); }
.bn-ed .bn-text { flex: 1 1 auto; min-height: 120px; overflow-y: auto; font-size: 14px; line-height: 1.6; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
.bn-ed.nur-lesen .bn-text { cursor: default; }
.bn-ed .bn-menue { top: -2px; right: 0; opacity: 1; }
.bn-ed:focus-within { box-shadow: none; }
.bn-ed .bn-fuss { padding-right: 0; }
.bn-ed .bn-schloss { justify-content: flex-start; }

/* Übersicht ohne gewählte Notiz (Ralph 08.11.2026) */
.bn-wss .wss-leer p { margin: 0 0 12px; }
.bn-ue { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; max-width: 560px; }
.bn-ue-z { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--bsl-linie, var(--wb-linie)); border-radius: 9px; width: 150px; box-sizing: border-box; }
.bn-ue-z b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bn-ue-z span { font-size: 12px; color: var(--bs-leise, var(--wb-leise)); }
.bn-ue-titel { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.bn-ue-liste { display: flex; flex-direction: column; gap: 2px; }
.bn-ue-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.bn-ue-zeile:hover { background: var(--bs-weich, rgba(0,0,0,.05)); }
.bn-ue-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-ue-meta { flex: none; font-size: 12px; color: var(--bs-leise, var(--wb-leise)); }
.bn-ue-knopf { margin-top: 8px; }