/*
  workspace-bento-konto.css — Gestaltung der Einstellungs-Seite (workspace-bento-konto.js).

  Kurzbeschreibung (für Laien): Die Einstellungen sind seit 24.10.2026 eine ganze Bento-Seite (Ralph) — auch innen:
  „alles Bento-Style, ausnahmslos". Übersicht und jede geöffnete Einstellung stehen im Raster der Startseite
  (6 Spalten, Reihen 168 px, 16 px Luft, Rundung 22 px, Schatten wie dort). Geöffnet: links die große blaue Kopfkarte
  (wie der CRM-Kopf), daneben je Einstellung eine eigene weiße Kachel mit Feld, Knopf und Meldung; Gefahrenzone rot getönt.
  Aufbau, Zurück-Pfeil und Kopf kommen aus der Bereichs-Vorlage (workspace-bento-seite.css).
  Greift nur mit html.ws-bento; Farben aus der Marke über die Bento-Werte (--wb-*), dunkel automatisch mit.
  Handy (< 700 px): eine Spalte, nie seitlich scrollen.
*/

/* Ohne Kennzahl-Kopf (er ist hier ausgeblendet) wäre das Raster sonst nur so hoch wie die Übersicht — die geöffnete Einstellung
   würde unten abgeschnitten. Darum füllt das Raster hier die ganze Höhe. */
:root.bs-offen #bsBereich[data-bereich="einstellungen"] { grid-template-rows: minmax(0, 1fr); }

/* ── Übersicht: Kacheln im Raster der Startseite (Bento-Regel 10) ── */
/* Halbe Höhe, Symbol links, Text rechts, 4 Spalten (Tablet 3, Handy 2 bzw. 1) – Ralph 26.10.2026, b4 (wie AIOS) */
#bsBereich[data-bereich="einstellungen"] .bs-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(84px, auto); gap: 12px; padding-top: 10px; }
#bsBereich[data-bereich="einstellungen"] .bs-kachel { grid-column: auto; min-height: 84px; display: grid; grid-template-columns: 36px minmax(0, 1fr);
  grid-auto-rows: auto; align-content: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; }
#bsBereich[data-bereich="einstellungen"] .bs-kachel > .wbe-sym { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
#bsBereich[data-bereich="einstellungen"] .bs-kachel > :not(.wbe-sym) { grid-column: 2; }
#bsBereich[data-bereich="einstellungen"] .bs-kachel .wbe-titel { font-size: 14px; }
#bsBereich[data-bereich="einstellungen"] .bs-kachel .wbe-kurz { font-size: 12px; line-height: 1.4; }
.wbe-sym { width: 36px; height: 36px; border-radius: var(--marke-r-m); display: inline-flex; align-items: center; justify-content: center;
  background: var(--wb-weich); color: var(--wb-text); flex: none; margin-bottom: 6px; }
.wbe-sym svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wbe-titel { font-size: 15px; font-weight: 600; line-height: 1.3; }
.wbe-kurz { font-size: 13px; line-height: 1.45; color: var(--wb-leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bs-kachel.gefahr .wbe-titel, .bs-kachel.gefahr .wbe-sym { color: var(--wb-rot); }
.bs-kachel.gefahr .wbe-sym { background: color-mix(in srgb, var(--wb-rot) 10%, var(--wb-karte)); }

/* ── Geöffnete Einstellung: kein weißes Blatt, sondern ein Raster aus Kacheln auf dem grauen Grund ── */
#bsBereich[data-bereich="einstellungen"][data-ansicht="raster"].bs-detail-auf .bs-detail { background: transparent; box-shadow: none; padding: 10px 2px 20px; }
.wbk-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; gap: 16px; }
.wbk-kopf { grid-column: span var(--b, 2); grid-row: span var(--h, 1); min-height: 0; }
/* marke-ausnahme: Gefahrenzone als rote Kopfkarte — gleiche Form wie .bs-kopfkarte, Farbe aus der Marke (--marke-gefahr über --wb-rot) */
.bs-kopfkarte.wbk-rot { background: linear-gradient(135deg, var(--wbk-rot-fuell) 30%, color-mix(in srgb, var(--wbk-rot-fuell) 80%, #000)); }
.bs-kopfkarte.wbk-rot p { color: rgba(255, 255, 255, .92); }
/* Füllfarbe für weißen Text (Kontrast ≥ 4,5:1): hell = Marken-Rot, dunkel = abgedunkelt, damit Weiß lesbar bleibt (Befund 28.10.2026) */
:root { --wbk-rot-fuell: var(--marke-gefahr); }
:root[data-theme="dark"] { --wbk-rot-fuell: color-mix(in srgb, var(--marke-gefahr) 62%, #000); }
.wbk-k { grid-column: span var(--b, 2); grid-row: span var(--h, 1); position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box;
  padding: 20px 22px; border-radius: var(--wb-r); background: var(--wb-karte); color: var(--wb-text); box-shadow: var(--wb-rand); font-family: var(--marke-schrift);
  transition: box-shadow .25s; }
.wbk-k:hover { box-shadow: var(--wb-schatten-hover), var(--wb-rand); }   /* Kacheln mit Feldern heben sich nicht an (wie Home) */
.wbk-k[hidden] { display: none; }
.wbk-titel { margin: 0; font: 600 15px/1.3 var(--marke-schrift); color: var(--wb-text); }
.wbk-satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wb-leise); }
.wbk-satz strong { color: var(--wb-text); font-weight: 600; }
.wbk-k .bs-knopf { align-self: flex-start; }
.wbk-k .bs-knopf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wbk-msg { font-size: 12px; line-height: 1.45; color: var(--wb-leise); min-height: 0; display: flex; align-items: center; flex-wrap: wrap; }
.wbk-msg:empty { display: none; }
.wbk-msg.ok { color: color-mix(in srgb, var(--wb-gruen) 82%, var(--wb-text)); }
.wbk-msg.fehler { color: var(--wb-rot); }
.wbk-msg a { color: inherit; text-decoration: underline; }
.wbk-lade { align-items: center; justify-content: center; color: var(--marke-ladekreis); }
.wbk-lade.fehler { color: var(--wb-rot); font-size: 13px; text-align: center; }
.wbk-k.gefahr { background: color-mix(in srgb, var(--wb-rot) 7%, var(--wb-karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-rot) 22%, transparent); }
.wbk-k.gefahr .wbk-titel { color: var(--wb-rot); }

/* Felder und Wahl im Bento-Look (wie Suchfeld und Bereichs-Pillen) */
.wbk-eingabe { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); color: var(--wb-text);
  font: 400 13px var(--marke-schrift); box-sizing: border-box; outline: 0; }
.wbk-eingabe:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-text) 30%, transparent); }
.wbk-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.wbk-felder:not(.mit-server) { grid-template-columns: minmax(0, 1fr); }   /* Befund 28.10.2026: ohne Serverfelder nur eine Spalte, sonst bleibt die rechte Hälfte leer */
.wbk-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wbk-feld > span { font-size: 12px; font-weight: 500; color: var(--wb-leise); }
.wbk-feld.wbk-server { display: none; }
.wbk-felder.mit-server .wbk-feld.wbk-server { display: flex; }
.wbk-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wbk-pillen { margin: -2px 0 0 -4px; }
.wbk-pillen .wb-pille[aria-checked="true"] { background: var(--marke-grafit); color: #fff; }   /* An/Aus und Anbieter-Wahl Grafit statt Blau (Ralph 08.11.2026) */

/* Verbundenes Postfach */
.wbk-konto { gap: 4px; }
.wbk-konto .wbe-sym { margin-bottom: 4px; }
.wbk-adresse { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbk-art { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wb-leise); }
.wbk-trennen { position: absolute; top: 18px; right: 18px; height: 32px; padding: 0 12px; font-size: 12px; }
.wbk-trennen.scharf { background: var(--wb-rot); color: #fff; }
/* Schmale Fassung (rechts neben den Nachrichten): alle Postfächer in EINER Kachel, je Postfach eine Zeile mit Trennen */
.wbk-postfaecher { gap: 8px; }
.wbk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 0 0; border-top: 1px solid var(--wb-linie); }
.wbk-postfaecher > .wbk-titel + .wbk-zeile, .wbk-postfaecher > .wbk-titel + * + .wbk-zeile { border-top: 0; padding-top: 0; }
.wbk-zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wbk-zeile .wbk-adresse { font-size: 14px; }
.wbk-zeile .wbk-msg { grid-column: 1 / -1; }
.wbk-k .bs-knopf.wbk-trennen-klein { align-self: center; height: 28px; padding: 0 12px; font-size: 12px; }
.wbk-trennen-klein.scharf { background: var(--wb-rot); color: #fff; }
/* Verbunden: grüner Haken (Kreis mit Häkchen, Marke-Grün) */
.wbk-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--marke-ok); }
.wbk-ok svg { width: 18px; height: 18px; flex: none; fill: var(--marke-ok); stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wbk-ok svg circle { stroke: none; }
/* Eingeklappt: „+ Weiteres Postfach verbinden" als kleine Kachel (2 × 1) */
.wbk-mehr { align-items: flex-start; justify-content: center; min-height: 0; }
.wbk-k .bs-knopf.wbk-mehr-knopf { align-self: stretch; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }

/* Desktop-Widget, Handy-App */
.wbk-bild { flex-direction: row; align-items: center; gap: 16px; }
.wbk-bild img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.wbk-bild > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wbk-qr { align-items: center; text-align: center; }
.wbk-qr .wbk-titel { align-self: flex-start; }
.wbk-qr-feld { width: 184px; height: 184px; padding: 10px; box-sizing: border-box; border-radius: var(--marke-r-l); background: #fff; color: var(--marke-ladekreis);
  display: flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1px var(--wb-linie); }
.wbk-qr-feld svg:not(.a4h-spin), .wbk-qr-feld img { width: 164px; height: 164px; display: block; }
.wbk-qr .bs-knopf { align-self: center; }

/* ── Geliehene Teile der Kontoeinstellungen: Felder und Knöpfe im Bento-Look (wie .bs-knopf / .wbk-eingabe).
   marke-ausnahme: die Abschnitte tragen Inline-Stile aus workspace.html — nur hier per !important auf den Bento-Baukasten gezogen ── */
.wbk-geliehen > div { padding-top: 0 !important; border-top: 0 !important; gap: 10px !important; }
.wbk-geliehen label { display: none !important; }   /* steht schon als Titel der Kachel */
.wbk-geliehen > div > div:not([id]):not([style*="display:flex"]) { font-size: 13px !important; line-height: 1.5; color: var(--wb-leise) !important; margin: 0 !important; }
.wbk-geliehen input { height: 40px !important; padding: 0 16px !important; border: 0 !important; border-radius: var(--marke-r-pill) !important;
  background: var(--wb-weich) !important; color: var(--wb-text) !important; font: 400 13px var(--marke-schrift) !important; box-sizing: border-box; min-width: 0; }
.wbk-geliehen input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-text) 30%, transparent); }
.wbk-geliehen button, .wbk-geliehen a { height: 36px !important; padding: 0 16px !important; margin: 0 !important; border: 0 !important; border-radius: var(--marke-r-pill) !important;
  background: var(--wb-dunkel) !important; color: #fff !important; font: 600 13px var(--marke-schrift) !important; display: inline-flex !important;
  align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; text-decoration: none; cursor: pointer; align-self: flex-start; flex: none; }
.wbk-geliehen > div > div[style*="display:flex"] button { align-self: center; }
.wbk-geliehen button:hover:not(:disabled) { background: color-mix(in srgb, var(--wb-dunkel) 84%, #fff) !important; }
.wbk-geliehen .pwr-box { display: flex; flex-direction: column; gap: 8px; }
.wbk-geliehen .pwr-box .a4h-hint { font-size: 12px; color: var(--wb-leise); margin: 0; }
.wbk-geliehen #pushTestBtn, .wbk-geliehen .pwr-box button { background: var(--wb-weich) !important; color: var(--wb-text) !important; }
.wbk-geliehen #pushTestBtn:hover, .wbk-geliehen .pwr-box button:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)) !important; }
.wbk-geliehen #pushTestBtn { background: var(--wb-weich) !important; color: var(--wb-text) !important; }
.wbk-geliehen #pushTestBtn:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)) !important; }
.wbk-geliehen.gefahr button { background: var(--wbk-rot-fuell) !important; color: #fff !important; }
.wbk-geliehen.gefahr button:hover { background: color-mix(in srgb, var(--wbk-rot-fuell) 86%, #000) !important; }
.wbk-geliehen button:disabled { opacity: .5; cursor: default; }
.wbk-geliehen [id$="-msg"] { font-size: 12px !important; min-height: 0 !important; }
.wbk-geliehen [id$="-msg"]:empty { display: none; }

/* Tablet: 4 Spalten (wie die Startseite), große Kacheln bleiben 4 breit */
@media (max-width: 1100px) {
  .wbk-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #bsBereich[data-bereich="einstellungen"] .bs-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #bsBereich[data-bereich="einstellungen"] .bs-kacheln, .wbk-raster { gap: 12px; }
}
/* Handy: eine Spalte, Reihen wachsen mit dem Inhalt, nie seitlich scrollen */
@media (max-width: 699px) {
  #bsBereich[data-bereich="einstellungen"] .bs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  #bsBereich[data-bereich="einstellungen"] .bs-kachel { grid-column: auto; min-height: 84px; padding: 12px 14px; }
  .wbk-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .wbk-k, .wbk-kopf { grid-column: auto; grid-row: auto; }
  .wbk-k { min-height: 132px; padding: 16px 18px; }
  .wbk-kopf { min-height: 120px; }
  .wbk-felder { grid-template-columns: minmax(0, 1fr); }
  .wbk-geliehen > div > div[style*="display:flex"] { flex-wrap: wrap; }
  .wbk-geliehen > div > div[style*="display:flex"] input { flex: 1 1 100% !important; }
}
@media (max-width: 480px) { #bsBereich[data-bereich="einstellungen"] .bs-kacheln { grid-template-columns: minmax(0, 1fr); } }   /* schmales Handy: eine Spalte */
@media (prefers-reduced-motion: reduce) { .wbk-k { transition: none; } }

/* ── Kachel „Kontakte ins CRM holen": Weg „Datei aus Outlook hochladen" (workspace-bento-kontakt-datei.js) ── */
.wkdat, .wkdat-weg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wkdat-weg[hidden] { display: none; }
.wkdat-ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 12px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--wb-text) 22%, transparent); border-radius: var(--marke-r-l); background: var(--wb-weich);
  color: var(--wb-text); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.wkdat-ablage[hidden] { display: none; }
.wkdat-ablage small { font-size: 12px; color: var(--wb-leise); }
.wkdat-ablage:hover, .wkdat-ablage.drueber { border-color: var(--marke-akzent); background: color-mix(in srgb, var(--marke-akzent) 6%, var(--wb-weich)); }
.wkdat-ergebnis { font-size: 13px; line-height: 1.5; color: var(--wb-text); display: flex; flex-direction: column; gap: 8px; }
.wkdat-ergebnis:empty { display: none; }
.wkdat-ergebnis p { margin: 0; }
.wkdat-ergebnis.ok { color: color-mix(in srgb, var(--wb-gruen) 82%, var(--wb-text)); }
.wkdat-ergebnis.fehler { color: var(--wb-rot); }
.wkdat-fuss { display: flex; gap: 8px; flex-wrap: wrap; }
.wkdat-anleitung { font-size: 12px; line-height: 1.5; color: var(--wb-leise); }
.wkdat-anleitung summary { cursor: pointer; color: var(--wb-text); font-weight: 500; }
.wkdat-anleitung ol { margin: 8px 0 4px; padding-left: 20px; }
.wkdat-anleitung p { margin: 4px 0 0; }
.wkdat-anleitung strong { color: var(--wb-text); font-weight: 600; }

/* Dunkelmodus: Platzhalter und Knöpfe deutlicher (Befund 28.10.2026, Kontrast ≥ 4,5:1 bzw. klar erkennbare Knopffläche) */
:root[data-theme="dark"] .wbk-eingabe::placeholder, :root[data-theme="dark"] .wbk-geliehen input::placeholder { color: color-mix(in srgb, var(--wb-text) 62%, var(--wb-karte)) !important; opacity: 1; }
:root[data-theme="dark"] .wbk-k .bs-knopf:not(.zweit):not(.scharf), :root[data-theme="dark"] .wbk-geliehen:not(.gefahr) button:not(#pushTestBtn):not(.pwr-box button) { background: color-mix(in srgb, var(--wb-text) 24%, var(--wb-karte)) !important; color: var(--wb-text) !important; }
:root[data-theme="dark"] .wbk-k .bs-knopf:not(.zweit):not(.scharf):hover, :root[data-theme="dark"] .wbk-geliehen:not(.gefahr) button:not(#pushTestBtn):not(.pwr-box button):hover:not(:disabled) { background: color-mix(in srgb, var(--wb-text) 34%, var(--wb-karte)) !important; }