/* 14-kopf-showtimings.css · Teil 14 von 19 · Brotkrume/Suche im Shell-Kopf, Auswahl, Kennzahl-Leiste, Showtimings. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* ── Brotkrume im Shell-Kopf (#viewBc) und Suche fuer dessen rechten Bereich
   (#viewKopfR) — Vorlage vorschlag-a-showtimings-material.html. ── */
.fl-kopf-bc { display:block; font-size:12px; color:var(--muted); }
.fl-suche { display:flex; align-items:center; gap:8px; width:300px; max-width:100%; height:38px; padding:0 12px;
  background:#fff; border:1px solid #DCD8CF; border-radius:8px; color:var(--muted); }
.fl-suche input { border:0; outline:none; background:transparent; font:inherit; font-size:14px; flex:1; min-width:0; color:#1C1B22; }
.fl-suche .psub-i { width:15px; height:15px; }
/* Auswahl als ruhiger weisser Knopf (Vorlage: „Alle Partner ⌄") */
.fl-sel { height:38px; padding:0 34px 0 14px; border:1px solid #DCD8CF; border-radius:8px; background-color:#fff;
  font:inherit; font-size:14px; font-weight:500; color:#1C1B22; cursor:pointer; max-width:260px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231C1B22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.fl-sel:hover { border-color:var(--muted); }
/* Kennzahl-Leiste: eine Karte, Zellen durch 1px-Linien getrennt (Vorlage) */
.kz-leiste { display:flex; flex-wrap:wrap; gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; }
.kz { flex:1 1 210px; background:#fff; padding:12px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.kz-l { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.kz-l i { width:8px; height:8px; border-radius:2px; flex:none; }
.kz-w { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kz-w b { font-size:22px; font-weight:600; letter-spacing:-.02em; color:#1C1B22; font-variant-numeric:tabular-nums; }
.kz-w span { font-size:12px; color:var(--muted); }

/* Showtimings — Gesamtuebersicht (Vorlage): Tageskarten mit Zeitachse. Das
   Raster der Kopfzeile und der Zeilen ist dasselbe (150px Datum, dann
   Projekt · Achse · Zeit · Shows · Pikett), darum fluchten die Spalten. */
.st-oben { flex:none; padding:20px var(--fx) 0; display:flex; flex-direction:column; gap:16px; }
.st-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.st-sel { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* Scrollbereich **ohne** Innenabstand oben: ein klebendes Element haftet am
   Innenrand (Padding) des Scrollcontainers, nicht an seiner Oberkante — mit
   `padding-top:12px` blieb ueber der Spaltenzeile ein Streifen, in dem die
   erste Tageskarte weiterlief (vom Team am Screenshot gemeldet: die Zeile sass
   mitten in der Karte). Der Abstand steckt darum in der Kopfzeile selbst. */
#viewContainer.vc-liste .st-list { padding:0 var(--fx) 20px; border-radius:0; }
.st-metrik { flex:none; margin:0; padding:0 var(--fx) 12px; }
.st-kopfzeile { display:grid; grid-template-columns:150px minmax(0,220px) minmax(0,1fr) 110px 56px 140px; gap:16px;
  align-items:center; height:42px; padding:12px 17px 0; font-size:12px; font-weight:500; color:var(--muted);
  position:sticky; top:0; background:var(--bg); z-index:2; }
.st-kopfzeile .r { text-align:right; }
.st-achse { position:relative; height:14px; }
.st-achse span { position:absolute; top:0; transform:translateX(-50%); font-size:11px; font-family:'IBM Plex Mono',monospace; }
.st-achse span:first-child { transform:none; }
.st-achse span:last-child { transform:translateX(-100%); }
.st-tag { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:6px 16px; background:#fff;
  border:1px solid var(--border); border-radius:10px; }
.st-tag + .st-tag { margin-top:8px; }
.st-tag.st-heute { background:#FBEFF2; border-color:#F1C7D2; }
.st-d { display:flex; flex-direction:column; gap:3px; padding:6px 0; }
.st-dt { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#1C1B22; }
.st-wt { width:22px; color:var(--muted); font-weight:500; }
.st-dsub { display:flex; align-items:center; gap:8px; padding-left:30px; font-size:12px; color:var(--muted); }
.st-jetzt { font-size:11px; font-weight:600; color:#fff; background:#C21D48; padding:1px 6px; border-radius:4px; }
.st-z { display:flex; flex-direction:column; min-width:0; }
.st-r { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr) 110px 56px 140px; gap:16px;
  align-items:center; min-height:32px; font-size:14px; }
.st-p { font-weight:500; color:#1C1B22; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.st-p:hover { color:var(--pink); }
.st-pw { min-width:0; display:flex; flex-direction:column; }
.st-zone { display:block; font-size:11px; line-height:1.25; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-bahn { position:relative; height:10px; background:#F3F1EC; border-radius:5px; }
.st-bahn > i { position:absolute; top:0; bottom:0; border-left:1px solid #E8E5DD; }
.st-balken { position:absolute; top:0; bottom:0; border-radius:5px; min-width:3px; }
.st-u { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#45434F; white-space:nowrap; }
.st-s { text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.st-pk { display:flex; align-items:center; gap:6px; font-size:13px; color:#45434F; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-pk i { width:8px; height:8px; border-radius:2px; flex:none; }
.st-pk-leer { color:#B3B0BA; }
@media (max-width:900px) {
  .st-kopfzeile { display:none; }
  #viewContainer.vc-liste .st-list { padding-top:12px; }
  .st-tag { grid-template-columns:1fr; gap:4px; }
  .st-r { grid-template-columns:minmax(0,1fr) 96px 30px; row-gap:4px; }
  .st-bahn { grid-column:1/-1; grid-row:2; }
  .st-pk { grid-column:1/-1; }
}

/* Ordio (Projekte → Ordio): je Show eine Karte, je Checkliste eine Zeile, je Tag eine Zelle (ok/offen/ueberfaellig/keine Liste). */
.od-oben { flex:none; padding:20px var(--fx) 0; }
.od-leiste { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.od-sum { font-size:14px; color:#45434F; }
.od-sum b { color:#1C1B22; font-variant-numeric:tabular-nums; }
#viewContainer.vc-liste .od-list { padding:16px var(--fx) 20px; border-radius:0; display:flex; flex-direction:column; gap:14px; }
.od-metrik { flex:none; margin:0; padding:0 var(--fx) 12px; }
.od-karte { flex:none; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.od-kopf { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--border); }
.od-t { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.od-p { font-size:15px; font-weight:600; color:#1C1B22; cursor:pointer; text-decoration:none; }
.od-p:hover { color:var(--pink); }
.od-t small { font-size:12px; color:var(--muted); }
.od-pille { font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.od-p-ok { background:#E4F3EA; color:#16623F; }
.od-p-offen { background:#FFF3D6; color:#8A5A00; }
.od-p-ueber { background:#FBE9EA; color:#B4232A; }
.od-p-neutral { background:#F3F1EC; color:var(--muted); }
.od-akt { display:flex; align-items:center; gap:8px; }
.od-stand { font-size:12px; color:var(--muted); white-space:nowrap; }
.od-tab { display:flex; flex-direction:column; overflow-x:auto; }
.od-zeile { display:grid; grid-template-columns:minmax(180px,1.4fr) repeat(7, minmax(54px,1fr)); gap:6px; align-items:center;
  padding:8px 18px; min-width:560px; border-top:1px solid #F3F1EC; }
.od-zeile.od-k { border-top:0; padding-top:10px; padding-bottom:4px; font-size:11px; color:var(--muted); }
.od-tag { display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.od-tag b { font-weight:600; font-size:12px; color:#45434F; }
.od-tag.od-heute, .od-tag.od-heute b { color:#C21D48; }
.od-n { display:flex; flex-direction:column; min-width:0; font-size:13px; color:#1C1B22; }
.od-n > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-fehler { font-size:11.5px; color:#B4232A; }
.od-c { display:flex; align-items:center; justify-content:center; gap:3px; height:30px; border-radius:7px; font-size:13px; font-weight:600; }
.od-c .psub-i { width:15px; height:15px; }
.od-c small { font-size:10.5px; font-weight:500; }
.od-ok { background:#E4F3EA; color:#16623F; }
.od-offen { background:#FFF3D6; color:#8A5A00; }
.od-ueber { background:#FBE9EA; color:#B4232A; }
.od-leer { color:#B3B0BA; font-weight:400; }
.od-c.od-heute { box-shadow:inset 0 0 0 1.5px #E6304E; }
/* Antworten (23.10.2026): eine Zelle mit Liste ist ein Knopf (umschliesst .od-c), der Klick öffnet das Popup mit Fragen und Antworten; im Auszug die Spalte „Antworten“ */
.od-cb { display:block; width:100%; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; border-radius:7px; }
.od-cb:hover .od-c { filter:brightness(.95); }
.od-cb:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.od-ant { max-height:60vh; overflow:auto; margin:10px 0 4px; }
.od-ant-l { border:1px solid var(--border); border-radius:10px; margin:0 0 12px; overflow:hidden; }
.od-ant-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 14px; background:#FAF9F6; border-bottom:1px solid var(--border); font-size:12.5px; }
.od-ant-kopf small { color:var(--muted); }
.od-ant-st { font-size:11.5px; font-weight:600; padding:1px 9px; border-radius:999px; }
.od-ant-st.ok { background:#E4F3EA; color:#16623F; }
.od-ant-st.offen { background:#FFF3D6; color:#8A5A00; }
.od-ant-st.ueber { background:#FBE9EA; color:#B4232A; }
.od-ant-fr { margin:0; padding:0; list-style:none; counter-reset:odf; }
.od-ant-fr li { padding:9px 14px; border-top:1px solid #F3F1EC; counter-increment:odf; }
.od-ant-fr li:first-child { border-top:0; }
.od-ant-f { font-size:13px; color:#45434F; }
.od-ant-f::before { content:counter(odf) '. '; color:var(--muted); }
.od-ant-weg { color:var(--muted); font-style:italic; }
.od-ant-a { margin-top:2px; font-size:14px; color:#1C1B22; white-space:pre-wrap; overflow-wrap:anywhere; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.od-ant-leer { color:#9A99A3; font-style:italic; font-size:13px; }
.od-ant-nein { color:#B4232A; font-weight:600; }
.od-ant-z { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.od-ant-foto, .od-az-ant { font:inherit; font-size:12.5px; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--border); border-radius:7px; padding:3px 10px; cursor:pointer; white-space:nowrap; }
.od-ant-foto:hover, .od-az-ant:hover { border-color:#9A99A3; }
.od-az-tab td.od-az-an { text-align:right; }
/* Fragen der Checklisten (23.10.2026): Knopf unter dem Namen, aufgeklappt eine nummerierte Liste unter der Zeile; im Auszug ein Block je Projekt */
.od-fr-b { align-self:flex-start; margin-top:2px; font:inherit; font-size:11.5px; color:var(--navy); background:none; border:0; padding:0; cursor:pointer; }
.od-fr-b:hover { text-decoration:underline; }
.od-fr-b::after { content:' ▾'; }
.od-fr-b.aktiv::after { content:' ▴'; }
.od-fragen { min-width:560px; padding:6px 18px 12px; background:#FAF9F6; border-top:1px dashed #E7E4DC; font-size:13px; }
.od-fr-kopf { font-size:12px; color:var(--muted); margin-bottom:4px; }
.od-fr-kopf b { color:#1C1B22; font-weight:600; }
.od-fragen ol, .od-az-fv ol { margin:0; padding-left:22px; }
.od-fragen li, .od-az-fv li { padding:3px 0; color:#1C1B22; }
.od-fr-m { display:block; font-size:11.5px; color:var(--muted); }
.od-az-fr { border-top:1px solid #F3F1EC; padding:10px 18px 14px; }
.od-az-frk { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.od-az-fv + .od-az-fv { margin-top:10px; }
.od-az-fv > b { font-size:13px; }
.od-az-fv > small { margin-left:8px; font-size:11.5px; color:var(--muted); }
.od-hinweis { padding:14px 18px; font-size:13px; color:var(--muted); }
.od-hinweis.od-fehler { color:#B4232A; }
.od-vl { display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 14px; }
.od-vl span { font-size:12px; padding:2px 9px; border-radius:6px; background:#F3F1EC; color:#45434F; }
.od-knoepfe { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Zuordnungsdialog: Checklisten aus dem Katalog ankreuzen */
.od-kat-such { width:100%; margin-bottom:6px; }
.od-kat { display:flex; flex-direction:column; max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:4px 6px; }
.od-kat-i { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13px; cursor:pointer; }
.od-kat-i.od-aus { display:none; }
/* Auszug: Filterleiste, Tabelle je Projekt, Status als Pille */
.od-az-leiste { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; flex:none; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.od-az-leiste label { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); }
.od-az-leiste select, .od-az-leiste input[type=date] { padding:6px 9px; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:13px; color:#1C1B22; background:#fff; }
.od-az-leiste .od-az-nur { flex-direction:row; align-items:center; gap:6px; font-size:13px; color:#45434F; padding-bottom:7px; }
.od-az-leiste .btn { margin-left:auto; }
.od-az-erg { display:flex; flex-direction:column; gap:14px; }
.od-az-sum { padding:10px 18px; font-size:13px; color:#45434F; border-bottom:1px solid var(--border); }
.od-az-wrap { overflow-x:auto; }
.od-az-tab { width:100%; border-collapse:collapse; font-size:13px; }
.od-az-tab th { text-align:left; font-size:11px; font-weight:600; color:var(--muted); padding:8px 18px 6px; background:#FAF9F6; }
.od-az-tab td { padding:7px 18px; border-top:1px solid #F3F1EC; font-variant-numeric:tabular-nums; white-space:nowrap; }
.od-az-tab td.od-az-cl, .od-az-tab td.od-az-pj { white-space:normal; }
.od-az-pj a { color:var(--navy); font-weight:600; cursor:pointer; text-decoration:none; }
.od-az-pj a:hover { text-decoration:underline; }
.od-az-pj small { display:block; color:var(--muted); font-size:11.5px; }
/* Reiter Heute (23.10.2026): Kopfzeile mit der Summe des Tages, je Projekt eine Karte, unten wer heute keine Liste hat */
.od-ht-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:14px; color:#45434F; }
.od-ht-kopf b { color:#1C1B22; font-size:15px; }
.od-ht-p { font-size:12px; font-weight:600; padding:2px 10px; border-radius:999px; }
.od-ht-p.ok { background:#E4F3EA; color:#16623F; }
.od-ht-p.offen { background:#FFF3D6; color:#8A5A00; }
.od-ht-p.ueber { background:#FBE9EA; color:#B4232A; }
.od-ht-ohne { font-size:12.5px; color:var(--muted); }
.od-az-st { display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px; }
.od-az-ok .od-az-st { background:#E4F3EA; color:#16623F; }
.od-az-offen .od-az-st { background:#FFF3D6; color:#8A5A00; }
.od-az-ueber .od-az-st { background:#FBE9EA; color:#B4232A; }
.od-az-fehler { padding:8px 18px; font-size:12px; color:#B4232A; border-top:1px solid #F3F1EC; }
@media (max-width:700px) { .od-az-leiste .btn { margin-left:0; } }


/* Protokolle (Projekte → Protokolle): Stand je Formular, darunter „Nicht zugeordnet" je Formular und Stadt als Karte. */
.prt-oben { flex:none; padding:20px var(--fx) 0; display:flex; flex-direction:column; gap:12px; }
.prt-leiste { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.prt-sum { flex:1; font-size:13px; color:var(--muted); }
.prt-n { font-style:normal; font-size:11.5px; font-weight:600; background:#FFF3D6; color:#8A5A00; border-radius:999px; padding:0 7px; margin-left:6px; }
.prt-quellen { display:flex; flex-wrap:wrap; gap:8px; }
.prt-q { display:flex; align-items:center; gap:6px 14px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:7px 12px; font-size:12.5px; color:var(--muted); min-width:0; }
.prt-q-t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.prt-q b { font-size:13px; font-weight:600; color:#1C1B22; }
.prt-wer { font-size:11.5px; color:#9B98A8; }
.prt-q-fehler .prt-wer { color:#B4232A; }
.prt-q-fehler { border-color:#F0C4C7; background:#FDF6F6; color:#B4232A; }
.prt-q-aus { opacity:.6; }
#viewContainer.vc-liste .prt-list { padding:16px var(--fx) 20px; border-radius:0; display:flex; flex-direction:column; gap:12px; }
.prt-metrik { flex:none; margin:0; padding:0 var(--fx) 12px; }
.prt-gruppe { flex:none; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.prt-kopf { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:12px 18px; }
.prt-t { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.prt-t b { font-size:15px; font-weight:600; color:#1C1B22; }
.prt-t small { font-size:12px; color:var(--muted); }
.prt-t .prt-vor { color:#8A5A00; }
.prt-akt { display:flex; align-items:center; gap:8px; }
.prt-tab { overflow-x:auto; border-top:1px solid var(--border); }
.prt-tab .wb-table td { vertical-align:top; }
.prt-nw { white-space:nowrap; }
.prt-r { text-align:right; }
.prt-auff { font-size:12.5px; color:#B4232A; }
.prt-auff b { font-weight:500; color:#45434F; margin-right:4px; }
.prt-leise { color:#B3B0BA; }
.prt-klein { height:26px; padding:0 10px; font-size:12px; }
.prt-merk { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#45434F; margin:4px 0 12px; cursor:pointer; }
.prt-merk input { margin-top:2px; }