/*
  workspace-bento-planentwurf.css — Gestaltung von „Plan aus Beschreibung" im Bento-Planer (Logik: workspace-bento-planentwurf.js).

  Kurzbeschreibung (für Laien): Nur Kacheln im Raster des Planers (6 Spalten, Reihen 168 px, wie die Startseite). Eingabe-Kachel
  breit und doppelt hoch (Textfeld, Vorlage als Pillen, Mikrofon im Kästchen, Knopf „Entwurf erstellen"), daneben Überblick,
  kritischer Pfad, „Aus deinem Text erkannt" und Hinweise, danach je Vorgang eine Kachel (kritische Vorgänge mit roter Kante
  links), am Ende die gestrichelte „Vorgang ergänzen"-Kachel. Farben nur aus der Marke, Hover wie alle Kacheln (heben sich),
  Ladekreis zentriert. Greift nur im geöffneten Planer-Bereich (#bsBereich[data-bereich="planer"]).
*/

#bsBereich[data-bereich="planer"] .bpe-eingabe { grid-column: span 3; grid-row: span 2; gap: 8px; }
#bsBereich[data-bereich="planer"] .bpe-info, #bsBereich[data-bereich="planer"] .bpe-ueberblick { grid-column: span 2; grid-row: span 2; }
#bsBereich[data-bereich="planer"] .bpe-lade, #bsBereich[data-bereich="planer"] .bpe-fehler, #bsBereich[data-bereich="planer"] .bpe-ergebnis { grid-column: span 3; grid-row: span 2; }
#bsBereich[data-bereich="planer"] .bpe-pfad, #bsBereich[data-bereich="planer"] .bpe-erkannt, #bsBereich[data-bereich="planer"] .bpe-hinweise,
#bsBereich[data-bereich="planer"] .bpe-v { grid-column: span 2; }
#bsBereich[data-bereich="planer"] .bpe-pfad.hoch, #bsBereich[data-bereich="planer"] .bpe-erkannt.hoch, #bsBereich[data-bereich="planer"] .bpe-hinweise.hoch,
#bsBereich[data-bereich="planer"] .bpe-v.hoch { grid-row: span 2; }

/* Hover: alle Kacheln heben sich wie auf der Startseite */
#bsBereich[data-bereich="planer"] .bpe-eingabe, #bsBereich[data-bereich="planer"] .bpe-info, #bsBereich[data-bereich="planer"] .bpe-ueberblick,
#bsBereich[data-bereich="planer"] .bpe-pfad, #bsBereich[data-bereich="planer"] .bpe-erkannt, #bsBereich[data-bereich="planer"] .bpe-hinweise,
#bsBereich[data-bereich="planer"] .bpe-v, #bsBereich[data-bereich="planer"] .bpe-ergebnis, #bsBereich[data-bereich="planer"] .bpe-fehler { transition: box-shadow .25s, transform .25s; }
#bsBereich[data-bereich="planer"] .bpe-eingabe:hover, #bsBereich[data-bereich="planer"] .bpe-info:hover, #bsBereich[data-bereich="planer"] .bpe-ueberblick:hover,
#bsBereich[data-bereich="planer"] .bpe-pfad:hover, #bsBereich[data-bereich="planer"] .bpe-erkannt:hover, #bsBereich[data-bereich="planer"] .bpe-hinweise:hover,
#bsBereich[data-bereich="planer"] .bpe-v:hover, #bsBereich[data-bereich="planer"] .bpe-ergebnis:hover, #bsBereich[data-bereich="planer"] .bpe-fehler:hover {
  box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); }

#bsBereich[data-bereich="planer"] .bpe-start .bp-k-text { white-space: normal; }

/* Eingabe */
#bsBereich[data-bereich="planer"] .bpe-eingabe .bp-k-text { margin-top: 0; white-space: normal; }
#bsBereich[data-bereich="planer"] .bpe-text { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; resize: none; padding: 10px 12px; font: 400 14px/1.45 var(--marke-schrift); }
#bsBereich[data-bereich="planer"] .bpe-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
#bsBereich[data-bereich="planer"] .bpe-etikett { flex: none; font: 600 12px var(--marke-schrift); color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-vorlagen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#bsBereich[data-bereich="planer"] .bpe-vorlagen::-webkit-scrollbar { display: none; }
#bsBereich[data-bereich="planer"] .bpe-luecke { flex: 1 1 auto; }
#bsBereich[data-bereich="planer"] .bpe-mic svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bsBereich[data-bereich="planer"] .bpe-mic.recording { background: var(--marke-aufnahme); color: #fff; border-color: var(--marke-aufnahme); }
#bsBereich[data-bereich="planer"] .bpe-pegel { display: none; align-items: flex-end; gap: 2px; height: 24px; }
#bsBereich[data-bereich="planer"] .bpe-pegel.an { display: inline-flex; }
#bsBereich[data-bereich="planer"] .bpe-pegel span { display: inline-block; width: 3px; height: 4px; border-radius: 2px; background: var(--marke-aufnahme); transition: height 80ms linear; }
#bsBereich[data-bereich="planer"] .bpe-diktat-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Erklärung, Listen */
#bsBereich[data-bereich="planer"] .bpe-info ol, #bsBereich[data-bereich="planer"] .bpe-pfad ol, #bsBereich[data-bereich="planer"] .bpe-erkannt ul,
#bsBereich[data-bereich="planer"] .bpe-hinweise ul { margin: 8px 0 0; padding-left: 18px; min-height: 0; overflow-y: auto; }
#bsBereich[data-bereich="planer"] .bpe-info li, #bsBereich[data-bereich="planer"] .bpe-pfad li, #bsBereich[data-bereich="planer"] .bpe-erkannt li,
#bsBereich[data-bereich="planer"] .bpe-hinweise li { margin: 4px 0; font-size: 13px; line-height: 1.4; color: var(--bs-text); }
#bsBereich[data-bereich="planer"] .bpe-hinweise li.bs-rot { color: var(--marke-gefahr); }
#bsBereich[data-bereich="planer"] .bpe-pfad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent), var(--wb-rand, 0 0 0 transparent); }

/* Laden: Ladekreis mittig */
#bsBereich[data-bereich="planer"] .bpe-lade { align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--marke-ladekreis); }
#bsBereich[data-bereich="planer"] .bpe-lade .bp-s { white-space: normal; }
#bsBereich[data-bereich="planer"] .bpe-fehler .bp-k-text { white-space: normal; margin-top: 8px; }

/* Überblick */
#bsBereich[data-bereich="planer"] .bpe-titel { width: 100%; box-sizing: border-box; margin: 8px 0 12px; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--bs-text); font: 700 15px/1.3 var(--marke-schrift); }
#bsBereich[data-bereich="planer"] .bpe-titel:focus { box-shadow: 0 1px 0 var(--marke-akzent); }
#bsBereich[data-bereich="planer"] .bpe-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bsBereich[data-bereich="planer"] .bpe-felder label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 500 12px var(--marke-schrift); color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-felder .a4h-field { width: 100%; box-sizing: border-box; min-width: 0; }
#bsBereich[data-bereich="planer"] .bpe-stand { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 12px 0 4px; font-size: 13px; color: var(--bs-text); }
#bsBereich[data-bereich="planer"] .bpe-stand b { font-weight: 700; }
#bsBereich[data-bereich="planer"] .bpe-ok { color: var(--marke-ok); }
#bsBereich[data-bereich="planer"] .bpe-ueberblick.spaet { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent), var(--wb-rand, 0 0 0 transparent); }
#bsBereich[data-bereich="planer"] .bpe-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
#bsBereich[data-bereich="planer"] .bpe-knoepfe .bs-knopf { display: inline-flex; align-items: center; }
#bsBereich[data-bereich="planer"] .bpe-ueberblick > .bp-s { margin-top: 6px; white-space: normal; }
#bsBereich[data-bereich="planer"] .bpe-mini { display: inline-flex; align-items: center; color: var(--marke-ladekreis); }

/* Vorgang */
#bsBereich[data-bereich="planer"] .bpe-v { padding-right: 52px; }
#bsBereich[data-bereich="planer"] .bpe-v.kritisch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent), var(--wb-rand, 0 0 0 transparent); }
#bsBereich[data-bereich="planer"] .bpe-v .bp-l { padding-right: 0; }
#bsBereich[data-bereich="planer"] .bpe-marken { display: inline-flex; gap: 4px; flex: none; }
#bsBereich[data-bereich="planer"] .bpe-marke { padding: 1px 8px; border-radius: var(--marke-r-pill); font-size: 11px; font-weight: 600; background: var(--bs-weich); color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-marke.rot { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); }
#bsBereich[data-bereich="planer"] .bpe-marke.warn { background: color-mix(in srgb, var(--marke-warn) 16%, var(--bs-karte)); color: var(--bs-text); }
#bsBereich[data-bereich="planer"] .bpe-name { width: 100%; box-sizing: border-box; margin: 8px 0 6px; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--bs-text); font: 700 15px/1.3 var(--marke-schrift); text-overflow: ellipsis; }
#bsBereich[data-bereich="planer"] .bpe-name:focus { box-shadow: 0 1px 0 var(--marke-akzent); }
#bsBereich[data-bereich="planer"] .bpe-v.meilenstein .bpe-name { padding-left: 16px;
  background: linear-gradient(45deg, transparent 35%, var(--bs-dunkel) 35%, var(--bs-dunkel) 65%, transparent 65%) 0 50% / 9px 9px no-repeat; }
#bsBereich[data-bereich="planer"] .bpe-weg { position: absolute; top: 16px; right: 14px; }
#bsBereich[data-bereich="planer"] .bpe-weg svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bsBereich[data-bereich="planer"] .bpe-weg:hover { color: var(--marke-gefahr); }
#bsBereich[data-bereich="planer"] .bpe-reihe { display: flex; align-items: center; gap: 8px; min-width: 0; }
#bsBereich[data-bereich="planer"] .bpe-dauer { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-dauer .a4h-field { width: 72px; height: 30px; padding: 0 8px; }
#bsBereich[data-bereich="planer"] .bpe-werl { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-wer { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; }
#bsBereich[data-bereich="planer"] .bpe-klein { font-size: 12px; color: var(--bs-leise); white-space: nowrap; }
#bsBereich[data-bereich="planer"] .bpe-klein.ok { color: var(--marke-ok); font-weight: 600; }
#bsBereich[data-bereich="planer"] .bpe-v .bp-k-text { margin-top: 8px; }
#bsBereich[data-bereich="planer"] .bpe-befunde { margin: 8px 0 0; padding-left: 16px; min-height: 0; overflow-y: auto; }
#bsBereich[data-bereich="planer"] .bpe-befunde li { margin: 2px 0; font-size: 12px; line-height: 1.4; color: var(--bs-leise); }
#bsBereich[data-bereich="planer"] .bpe-befunde li.bs-rot { color: var(--marke-gefahr); }

/* Ergebnis nach „Plan anlegen" */
#bsBereich[data-bereich="planer"] .bpe-ergebnis { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-ok) 40%, transparent), var(--wb-rand, 0 0 0 transparent); }
#bsBereich[data-bereich="planer"] .bpe-ergebnis .bp-k-text { white-space: normal; margin-top: 8px; }
#bsBereich[data-bereich="planer"] .bpe-pfadzeile { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--bs-text); min-height: 0; overflow-y: auto; }

/* Spalten wie die Startseite: 4 bis 1100 px, 3 bis 899 px, 1 unter 700 px */
@media (max-width: 1100px) {
  #bsBereich[data-bereich="planer"] .bpe-eingabe, #bsBereich[data-bereich="planer"] .bpe-lade, #bsBereich[data-bereich="planer"] .bpe-fehler,
  #bsBereich[data-bereich="planer"] .bpe-ergebnis { grid-column: span 4; }
}
@media (max-width: 899px) {
  #bsBereich[data-bereich="planer"] .bpe-eingabe, #bsBereich[data-bereich="planer"] .bpe-lade, #bsBereich[data-bereich="planer"] .bpe-fehler,
  #bsBereich[data-bereich="planer"] .bpe-ergebnis { grid-column: span 3; }
}
@media (max-width: 699px) {
  #bsBereich[data-bereich="planer"] .bpe-eingabe, #bsBereich[data-bereich="planer"] .bpe-info, #bsBereich[data-bereich="planer"] .bpe-ueberblick,
  #bsBereich[data-bereich="planer"] .bpe-lade, #bsBereich[data-bereich="planer"] .bpe-fehler, #bsBereich[data-bereich="planer"] .bpe-ergebnis,
  #bsBereich[data-bereich="planer"] .bpe-pfad, #bsBereich[data-bereich="planer"] .bpe-erkannt, #bsBereich[data-bereich="planer"] .bpe-hinweise,
  #bsBereich[data-bereich="planer"] .bpe-v { grid-column: span 1; }
  #bsBereich[data-bereich="planer"] .bpe-eingabe, #bsBereich[data-bereich="planer"] .bpe-ueberblick { grid-row: span 3; }
}