/* Gemeinsame Darstellung der bestehenden Kanalfassungen und Kundenentscheidungen.
   Alle Regeln sind auf diesen Ablauf begrenzt; Berechtigungen bleiben in den Modulen. */
.bf, .pe { --wf-accent: var(--gold, #ffcb14); --wf-line: rgba(255,255,255,.12); line-height: 1.55; }
.bf *, .pe * { box-sizing: border-box; }
.bf .bf-kopf { padding: 10px 0 8px; }
.bf-kopf > strong { font-size: 18px; letter-spacing: -.3px; }
.bf .bf-stand { color: var(--ink-dim, #bbb); }
.bf .bf-fassung, .pe .pe-karte {
  padding: 20px !important; margin-top: 16px !important; border-radius: 16px !important;
  border-color: var(--wf-line) !important; background: rgba(255,255,255,.025);
}
.bf-fassung-kopf > strong, .pe-kopf > strong { font-size: 17px; letter-spacing: -.25px; }
.bf-fassung-kopf > span:nth-child(2), .pe-kopf > span:nth-child(2) { color: var(--ink-dim, #aaa); }
.bf .bf-status { padding: 4px 10px !important; }
.bf .bf-freischaltung { flex-basis: 100%; color: var(--ink-dim, #aaa); }
.bf .bf-liefer { font-weight: 600; }
.bf .bf-ziel-info, .pe .pe-ziel { margin: 12px 0 !important; color: var(--ink-dim, #b5b5b5); overflow-wrap: anywhere; }
.bf-ziel-info strong, .pe-ziel strong { color: var(--ink, #eee); font-weight: 500; }
.bf label { line-height: 1.6; }
.bf input:not([type="checkbox"]):not([type="radio"]), .bf select, .bf textarea, .pe .pe-begruendung {
  max-width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--wf-line);
  border-radius: 9px; background: #202020; color: var(--ink, #f1f1f1); font: inherit; font-size: 13px;
}
.bf textarea { display: block; resize: vertical; margin: 5px 0 12px; line-height: 1.65; }
.bf input[type="file"] { width: 100%; }
.bf input[type="checkbox"], .bf input[type="radio"] { accent-color: var(--wf-accent); }
.bf select { text-overflow: ellipsis; }
.bf select option { background: #202020; color: #eee; }
.bf .bf-aktionen { padding-top: 14px; margin-top: 16px !important; border-top: 1px solid var(--wf-line); gap: 10px !important; }
.bf .btn, .pe .btn { min-height: 42px; padding: 10px 14px; border-radius: 9px; white-space: normal; line-height: 1.4; }
.bf .bf-akt:is([data-akt="einreichen"], [data-akt="pruefen"], [data-akt="uebergeben"], [data-akt="bestaetigen"]) {
  background: var(--wf-accent); border-color: var(--wf-accent); color: #171717; font-weight: 600;
}
.bf .bf-planung, .bf .bf-neu { padding: 16px; border: 1px solid var(--wf-line); border-radius: 12px; background: rgba(255,255,255,.02); }
.bf .bf-planung { margin-top: 16px !important; display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.bf .bf-planung > div { width: 100%; }
.bf .bf-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px !important; }
.bf .bf-format { flex: 1 1 240px; min-width: 0; }
.bf .bf-meldung:empty, .pe .pe-meldung:empty { display: none; }
.bf .bf-meldung:not(:empty), .pe .pe-meldung:not(:empty) { padding: 12px; margin: 10px 0; border: 1px solid var(--wf-line); border-radius: 10px; }
.bf .bf-lesefehler, .bf .bf-alt, .pe .pe-ladefehler { padding: 12px 0; line-height: 1.6; }
.bf :is(input, select, textarea, button):focus-visible, .pe :is(input, button, a):focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 3px; }
.bf .btn:disabled, .pe .btn:disabled { opacity: .5; cursor: wait; }
.bf img, .bf video { max-width: 100%; object-fit: contain; }

/* Sobald Kanalinhalte geladen sind, erhalten sie die Hauptspalte des Dialogs. */
.vdo-kanalmodus .vdo-panel { width: min(1180px, 100%); }
.vdo-kanalmodus .vdo-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.vdo-kanalmodus .b-kanal-entscheidungen { grid-column: 1; grid-row: 1; padding: 0; border: 0; background: none; min-width: 0; }
.vdo-begleitung-titel { display: none; }
.vdo-kanalmodus .vdo-begleitung-titel { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.vdo-kanalmodus .vdo-begleitung { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vdo-kanalmodus .vdo-main { min-width: 0; }
.vdo-kanalmodus .vdo-leerer-inhalt, .vdo-kanalmodus .vdo-lieferstatus, .vdo-kanalmodus .vdo-warte-hinweis { display: none; }
.vdo-kanalmodus .vdo-actions:empty { display: none; }
.pe .vdo-box-label { font-size: 17px; color: var(--ink, #f1f1f1); text-transform: none; letter-spacing: -.2px; margin-bottom: 4px; }
.pe .pe-status { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }
.pe .pe-offen { color: #f5d46a; background: rgba(255,203,20,.1); }
.pe .pe-ok { color: #8ddeae; background: rgba(80,200,130,.1); }
.pe .pe-aenderung { color: #ffbb87; background: rgba(255,160,80,.1); }
.pe .pe-alt { color: #bbb; }
.pe .pe-caption { font-size: 14px !important; line-height: 1.75; padding: 14px 0; overflow-wrap: anywhere; }
.pe .pe-medien { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.pe .pe-medien > div:first-child:not(.pe-medium), .pe .pe-nurtext { grid-column: 1 / -1; color: var(--ink-dim, #b5b5b5); }
.pe .pe-medium { min-width: 0; padding: 10px; border: 1px solid var(--wf-line); border-radius: 10px; background: rgba(0,0,0,.1); }
.pe .pe-medium > span { display: block; margin-bottom: 8px; color: var(--ink-dim, #b5b5b5); overflow-wrap: anywhere; }
.pe .pe-vorschau { opacity: 1 !important; }
.pe .pe-vorschau :is(img,video) { width: 100%; max-height: 300px; object-fit: contain; border-radius: 6px; background: #151515; }
.pe .pe-pdf { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px; color: var(--wf-accent); border: 1px solid var(--wf-line); border-radius: 8px; }
.pe .pe-aktionen { gap: 10px !important; padding-top: 16px; margin-top: 16px !important; border-top: 1px solid var(--wf-line); }
.pe .pe-aktionen > .btn-primary { flex-basis: 100%; }
.pe .pe-begruendung { min-width: 0 !important; flex: 1 1 180px !important; }
.pe .pe-tiktok { line-height: 1.7; padding-top: 12px !important; margin-top: 14px !important; }
@media (max-width: 850px) {
  .vdo-kanalmodus .vdo-grid { grid-template-columns: minmax(0,1fr); }
  .vdo-kanalmodus :is(.b-kanal-entscheidungen, .vdo-begleitung) { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) {
  .bf .bf-fassung, .pe .pe-karte { padding: 14px !important; border-radius: 12px !important; }
  .pe .pe-medien { grid-template-columns: minmax(0,1fr); }
  .pe .pe-aktionen > *, .bf .bf-aktionen > .btn { width: 100%; }
  .pe .pe-begruendung { flex-basis: 100% !important; }
  .bf .bf-planung > label, .bf .bf-planung > select { width: 100%; }
  .bf .bf-planung input { width: 100%; }
}