/*
  workspace-bento-konto-liste.css — Einstellungen (workspace-bento-konto.js) schlicht statt Kacheln im neuen Menü.
  Kurzbeschreibung (für Laien): Ralph, 02.11.2026 — „geöffnete Seiten ohne Bento-Design, schlicht und übersichtlich“.
  Solange html.wb-menue-modus gesetzt ist (Beta-Ring), stehen die Einstellungen (Konto, Postfach, Push, Widget, Handy-App,
  Gefahrenzone) als Abschnitte untereinander: kleine fette Überschrift, Inhalt, Trennlinie – keine blaue Kopfkarte, keine
  schwebenden weißen Kacheln. Eingaben und Knöpfe bleiben wie bisher. In der Arbeitsfläche (html.wb-menue-flaeche) ist die
  Liste der Einstellungen die Menü-Karte links; die eigene Liste ist dort ausgeblendet und der Inhalt nimmt die volle Breite.
  Ohne Beta-Ring greift nichts davon. Farben nur aus marke.css bzw. den Bento-Variablen (hell/dunkel), Akzent --wbm-f.
*/
/* ── Arbeitsfläche: die Liste der Einstellungen bleibt rechts stehen (Ralph 08.11.2026: „Hier auch Menü rechts“) – früher war sie
   hier ausgeblendet und die rechte Spalte leer, weil das Menü links dieselbe Liste zeigt. ── */

/* ── Abschnitte untereinander statt Kachel-Raster ── */
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .bs-detail { background: transparent; box-shadow: none; }
:root.wb-menue-modus .wbk-raster { display: flex; flex-direction: column; gap: 0; max-width: 760px; width: 100%; }
:root.wb-menue-modus .wbk-raster > .wbk-kopf { display: none; }
:root.wb-menue-modus .wbk-k { grid-column: auto; grid-row: auto; padding: 18px 0; border-radius: 0; background: none; box-shadow: none; gap: 10px;
  border-top: 1px solid var(--bsl-linie, var(--wb-linie)); min-height: 0; }
:root.wb-menue-modus .wbk-raster > .wbk-k:first-of-type, :root.wb-menue-modus .wbk-raster > .wbk-kopf + .wbk-k { border-top: 0; padding-top: 0; }
:root.wb-menue-modus .wbk-k:hover { box-shadow: none; }
:root.wb-menue-modus .wbk-titel { font: 700 14px/1.3 var(--marke-schrift); }
:root.wb-menue-modus .wbk-k.gefahr { background: none; box-shadow: none; }
:root.wb-menue-modus .wbk-lade { min-height: 80px; }

/* Verbundene Postfächer: Zeile statt Kachel */
:root.wb-menue-modus .wbk-konto { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-right: 96px; }
:root.wb-menue-modus .wbk-konto .wbe-sym { width: 32px; height: 32px; margin: 0; background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 12%, transparent); color: var(--wbm-f, var(--marke-akzent)); }
:root.wb-menue-modus .wbk-konto .wbk-adresse { flex: 1 1 160px; min-width: 0; }
:root.wb-menue-modus .wbk-trennen { top: 50%; right: 0; transform: translateY(-50%); }
:root.wb-menue-modus .wbk-zeile { border-top-color: var(--bsl-linie, var(--wb-linie)); }
:root.wb-menue-modus .wbk-mehr { align-items: flex-start; }
:root.wb-menue-modus .wbk-k .bs-knopf.wbk-mehr-knopf { align-self: flex-start; }

/* Felder: etwas ruhiger */
:root.wb-menue-modus .wbk-eingabe, :root.wb-menue-modus .wbk-geliehen input { background: var(--bs-weich, var(--wb-weich)) !important; }
:root.wb-menue-modus .wbk-eingabe:focus, :root.wb-menue-modus .wbk-geliehen input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 45%, transparent); }
:root.wb-menue-modus .wbk-bild { padding: 18px 0; }
:root.wb-menue-modus .wbk-qr { align-items: flex-start; text-align: left; }
:root.wb-menue-modus .wbk-qr .wbk-bild, :root.wb-menue-modus .wbk-qr .bs-knopf { align-self: flex-start; }
:root.wb-menue-modus .wbk-konto .wbk-art { flex: 1 1 100%; padding-left: 44px; margin-top: -2px; }

/* ── Rechte Spalte: Baustein BentoSpalte (workspace-bento-konto-spalte.js); die Liste des Seiten-Baukastens bleibt unsichtbar im Hintergrund (Klicks laufen darüber) ── */
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .bs-liste { display: none; }
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .wbk-spalte { grid-area: liste; min-height: 0; padding-right: 0; padding-left: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .wbk-spalte[hidden] { display: none; }
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .wbk-spalte { border-left: 1px solid var(--bsl-linie, var(--wb-linie)); width: 100%; }   /* Raster (Ralph 08.11.2026): Trennlinie am Spaltenanfang (x = 1196) wie auf Aufgaben, nicht mehr am Ende der Mitte */
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .bs-detail { border-right: 0; padding-right: 0; }
:root.wb-menue-modus .wbk-k.wbk-aus { display: none; }
/* Seite ohne echte Aktionen: keine rechte Spalte, die Mitte nutzt die volle Breite (Ralph 08.11.2026) */
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"][data-ohne-spalte] { grid-template-columns: minmax(0, 1fr) !important; }
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"][data-ohne-spalte] .bs-detail { border-right: 0; padding-right: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="einstellungen"][data-ohne-spalte] .wbk-raster { max-width: none; }

:root.wb-menue-modus .wbk-raster:has(> .wbk-k.wbk-aus) > .wbk-k { border-top: 0; padding-top: 0; }   /* nur ein Abschnitt sichtbar: keine Trennlinie darüber */
/* Handy und schmale Fenster: eine Spalte – Liste mit Unterpunkten oben, der gewählte Abschnitt darunter (nie zwei Spalten à 80 px) */
@media (max-width: 900px) {
  :root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
    grid-template-areas: "liste" "detail" !important; row-gap: var(--marke-sp-3); }
  :root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .bs-detail { border-right: 0; padding-right: 0; border-top: 1px solid var(--bsl-linie); padding-top: 12px; grid-row: auto; }
  :root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] :is(.bs-werkzeug, .bs-pillen, > .bs-kopf) { display: none; }
}

/* ── Zusammenfassung (Mitte) und Rückweg ── */
:root.wb-menue-modus .wbk-zus { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
:root.wb-menue-modus .wbk-zus .wbk-titel { margin-bottom: 8px; }
:root.wb-menue-modus .wbk-zus-zeile { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--bsl-linie, var(--wb-linie)); font: 400 14px/1.4 var(--marke-schrift); }
:root.wb-menue-modus .wbk-zus-name { color: var(--wb-leise); font-size: 13px; }
:root.wb-menue-modus .wbk-zus-wert { color: var(--wb-text); overflow-wrap: anywhere; }
:root.wb-menue-modus .wbk-uebersicht { appearance: none; border: 0; background: none; cursor: pointer; align-self: flex-start; padding: 4px 8px 4px 0; margin-bottom: 4px; font: 500 13px/1.3 var(--marke-schrift); color: var(--wb-leise); }
:root.wb-menue-modus .wbk-uebersicht:hover { color: var(--wb-text); }
:root.wb-menue-modus .wbk-uebersicht:focus-visible { outline: 2px solid var(--wbm-f, var(--marke-akzent)); outline-offset: 2px; }
@media (max-width: 900px) { :root.wb-menue-modus #bsBereich[data-bereich="einstellungen"] .wbk-spalte { height: auto; } }

/* Desktop-Widget: Herunterladen = Hauptknopf in Grafit, SmartScreen-Hinweis als ruhiger Text (Ralph 08.11.2026) */
:root.wb-menue-modus .wbk-k .bs-knopf.wbk-haupt { background: var(--bs-dunkel, #1f2430); color: #fff; border: 0; box-shadow: none; align-self: flex-start; }
:root.wb-menue-modus .wbk-ruhig .wbk-titel { font: 600 13px/1.3 var(--marke-schrift); color: var(--wb-leise); }
:root.wb-menue-modus .wbk-ruhig .wbk-satz { font-size: 12px; color: var(--wb-leise); }