/* 05-listen-chat-bemerkungen.css · Teil 5 von 19 · Projektliste, Handbuch, Chat & Verlauf, Bemerkungen, Anlegen-Formular, Transportliste, Unterreiter. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* Projektliste: nächstes Opening hervorheben */
.wb-table td.op-next { color:var(--navy); font-weight:700; }
/* Trennlinie: ab hier stehen die noch anstehenden Openings, darueber die vergangenen */
.wb-table tr.p-next > td { border-top:2px solid var(--pink); }
/* Lange Listen scrollen im eigenen Container — Spaltenkoepfe mitfuehren */
#viewContainer.vc-liste [id$="List"] .wb-table thead th { position:sticky; top:0; z-index:2; }

/* Handbuch: Gruppen in der Seitenleiste */
.hb-grp { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); padding:10px 8px 3px; }
.hb-grp:first-child { padding-top:2px; }
.hb-grp-tag { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:1px 6px; }
.hb-inhalt .ds-t { display:flex; align-items:center; gap:8px; }

/* Handbuch: Seitenleiste + Suche */
.hb-wrap { display:grid; grid-template-columns:264px minmax(0,1fr); gap:16px; align-items:start; }
.hb-sp { position:sticky; top:0; background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:10px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; gap:8px; }
.hb-suche { position:relative; flex:none; }
.hb-suchfeld { width:100%; box-sizing:border-box; padding:8px 28px 8px 10px; border:1px solid var(--border);
  border-radius:8px; font-family:inherit; font-size:12.5px; background:#FCFCFE; }
.hb-suchfeld:focus { outline:none; border-color:var(--pink); background:#fff; }
.hb-suchfeld::-webkit-search-cancel-button { display:none; }
.hb-suche-x { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:none;
  color:var(--muted); font-size:12px; cursor:pointer; padding:4px 6px; line-height:1; }
.hb-suche-x:hover { color:var(--pink); }
.hb-nav { overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.hb-nav-i { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none;
  font-family:inherit; font-size:12.5px; color:#3C3E48; cursor:pointer; padding:7px 8px; border-radius:7px; line-height:1.3; }
.hb-nav-i:hover { background:#F3F4F8; }
.hb-nav-i.aktiv { background:var(--navy); color:#fff; font-weight:600; }
.hb-nav-ic { flex:none; font-size:13px; }
.hb-nav-t { flex:1; min-width:0; }
.hb-nav-n { flex:none; background:var(--cyan); color:#0A3A3A; border-radius:10px; padding:0 6px; font-size:10.5px; font-weight:700; }
.hb-nav-i.aktiv .hb-nav-n { background:#fff; color:var(--navy); }
.hb-leer { font-size:12px; color:var(--muted); padding:10px 8px; line-height:1.5; }
.hb-inhalt { min-width:0; }
.hb-inhalt .ds { background:#fff; }
.hb-mark { background:#FFF1A8; color:inherit; border-radius:2px; padding:0 1px; }
.hb-blaettern { display:flex; justify-content:space-between; gap:10px; margin-top:4px; }
.hb-blaettern .btn.sec { max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px) {
  .hb-wrap { grid-template-columns:1fr; }
  .hb-sp { position:static; max-height:none; }
  .hb-nav { max-height:230px; }
}
/* Projekt-Chat & Verlauf */
.chat-add { display:flex; gap:8px; align-items:flex-end; }
.chat-add textarea { flex:1; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:14px; resize:vertical; min-height:42px; }
.chat-add textarea:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(84,104,217,.16); }
.chat-feed { display:flex; flex-direction:column; gap:12px; }
.chat-m { background:#fff; border:1px solid var(--border); border-radius:10px; padding:9px 12px; }
.chat-m.mein { background:#FBEFF2; border-color:#F1D3DB; }
.chat-k { display:flex; align-items:baseline; gap:8px; font-size:12px; margin-bottom:2px; }
.chat-a { font-weight:700; color:var(--navy); }
.chat-t { color:var(--muted); }
.chat-x { color:#B4232A; text-decoration:none; margin-left:auto; padding:0 4px; }
.chat-b { font-size:14px; color:#1F2430; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
/* Chat-Sprechblasen: eigene rechts/pink, fremde links/weiss */
.chat-row { display:flex; gap:10px; max-width:78%; align-items:flex-end; align-self:flex-start; }
.chat-row.mein { align-self:flex-end; flex-direction:row-reverse; }
.chat-row .chat-m { flex:1; min-width:0; }
.chat-av { width:26px; height:26px; border-radius:99px; background:var(--navy2); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:none; }
.chat-av.mein { background:var(--pink); }
/* Nachricht aus dem Sheet eines Technikpartners; Stand einer Erwähnung im Partner-Sheet */
.chat-av.tnp { background:#0E8C8D; }
.chat-m.tnp { background:#EEF8F8; border-color:#CDE9E9; }
.chat-m.tnp .chat-a { color:#0B6F70; }
.chat-pss { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chat-ps { font-size:11px; color:var(--muted); background:#F3F1EC; border-radius:99px; padding:1px 8px; }
.chat-ps.ok { color:#1F7A3D; background:#E3F3E8; }
.cv-sep { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); margin:2px 0; }
.cv-sep span { flex:1; height:1px; background:var(--border); }
/* Chat & Verlauf — zwei Spalten direkt auf der Grundfarbe (Flaechen-Modus,
   Vorlage): keine umschliessende Karte, nur eine Linie zwischen Chat und
   Verlauf; der Chat reicht bis an den linken Rand, der Verlauf bis rechts
   (Bleed ueber `.dk-inhalt > .cv-2`), die Eingabe ist ein weisser Streifen.
   Zwei eigene Scrollbereiche (Teamwunsch 11.10.2026): der Reiter fuellt genau die Hoehe von #viewContainer (der dann
   nicht selbst scrollt), der Projektkopf bleibt stehen, der Chat (`.cv-chat-feed`) und der Verlauf
   (`.cv-verlauf-liste`) scrollen je fuer sich — das Muster der Offerten/Material-Seiten. Der Hoehenzwang haengt
   an `:has(> .cv-2)`, gilt also nur in diesem Reiter; unter 900 px (eine Spalte) scrollt wieder die Seite. */
.cv-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); grid-template-rows:minmax(0,1fr); gap:0; align-items:stretch; }
#viewContainer:has(> .dk-inhalt > .cv-2) { overflow:hidden; }
.dk-inhalt:has(> .cv-2) { flex:1 1 0; min-height:0; }
.dk-inhalt > .cv-2 { flex:1 1 0; min-height:0; }
.cv-chat { display:flex; flex-direction:column; border-right:1px solid var(--border); min-width:0; min-height:0; }
.cv-verlauf { display:flex; flex-direction:column; min-width:0; min-height:0; padding:20px 0 0 28px; gap:14px; }
.cv-chat-kopf { padding:20px 28px 12px var(--fx); display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cv-chat-kopf h2, .cv-verlauf-kopf h2 { margin:0; font-size:13px; font-weight:600; color:#45434F; }
.cv-chat-kopf span { font-size:12px; color:var(--muted); }
.cv-chat-feed { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 28px 16px var(--fx); display:flex; flex-direction:column; }
.cv-chat-feed > *, .cv-verlauf-liste > * { flex:none; }
/* @Erwaehnungen: Hervorhebung im Text und Auswahl unter dem Textfeld */
.chat-at { border-radius:4px; padding:0 3px; font-weight:600; }
.chat-at.intern { background:#E8EAFB; color:#2E3178; }
.chat-at.intern.mich { background:#FBE3E8; color:#B4233F; }
.chat-at.extern { background:#F0EEE9; color:#5A5966; }
.cv-komp { position:relative; }
.chat-at-pop { position:absolute; left:var(--fx); right:28px; top:calc(100% - 6px); z-index:30; background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(26,27,75,.14); padding:4px; max-height:300px; overflow-y:auto; }
.chat-at-pop[hidden] { display:none; }
.chat-at-i { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; width:100%; text-align:left; padding:7px 10px; border:0; border-radius:7px; background:none; font:inherit; cursor:pointer; }
.chat-at-i.akt, .chat-at-i:hover { background-color:#F3F1EC; }
.chat-at-n { font-weight:600; font-size:13.5px; }
.chat-at-s { grid-column:1; font-size:12px; color:var(--muted); }
.chat-at-t { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:11px; border-radius:99px; padding:2px 8px; white-space:nowrap; }
.chat-at-t.intern { background:#E8EAFB; color:#2E3178; }
.chat-at-t.extern { background:#F0EEE9; color:#6B6A75; }
.chat-at-t.extern.tnp { background:#E3F3F3; color:#0B6F70; }
.cv-komp { padding:12px 28px 14px var(--fx); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; }
.cv-komp .chat-add { border:1px solid #DCD8CF; border-radius:10px; padding:8px 8px 8px 12px; align-items:flex-end; gap:10px; }
.cv-komp .chat-add textarea { border:0; padding:4px 0; min-height:40px; resize:none; }
.cv-komp .chat-add textarea:focus { box-shadow:none; }
.cv-komp .btn { height:36px; padding:0 14px; border-radius:8px; }
.cv-verlauf-kopf { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-right:var(--fx); }
.cv-verlauf-liste { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px; padding:0 var(--fx) 24px 0; }
.cv-tag { display:grid; grid-template-columns:82px minmax(0,1fr); gap:12px; }
.cv-tag-d { font-size:12px; font-weight:600; color:#45434F; padding-top:9px; font-variant-numeric:tabular-nums; }
.cv-tag-box { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.cv-row { display:grid; grid-template-columns:42px 100px minmax(0,1fr); gap:10px; align-items:start; padding:8px 11px; border-bottom:1px solid #F3F1EC; font-size:13px; }
.cv-tag-box .cv-row:last-child { border-bottom:none; }
.cv-row-z { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); padding-top:2px; }
.cv-row-txt { color:#1F2430; }
@media (max-width:900px){ .cv-2 { grid-template-columns:1fr; grid-template-rows:none; } .cv-chat { border-right:0; border-bottom:1px solid var(--border); }
  #viewContainer:has(> .dk-inhalt > .cv-2) { overflow-y:auto; }
  .dk-inhalt:has(> .cv-2), .dk-inhalt > .cv-2 { flex:1 0 auto; min-height:auto; }
  .cv-chat-feed, .cv-verlauf-liste { overflow:visible; }
  .cv-verlauf { padding:20px var(--fx) 24px; } .cv-verlauf-kopf { padding-right:0; } .cv-verlauf-liste { padding:0; }
  .cv-chat-kopf, .cv-chat-feed, .cv-komp { padding-right:var(--fx); } }
/* Bemerkungen (freie Notizen nach Thema) — .bm-z/.bm-txt/.bm-meta werden
   auch von der Venue-Detail-Notizen&Verlauf-Liste mitbenutzt. */
.bm-page { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0; align-items:stretch; }
/* Erfassungsbox (Vorlage): weiss, oben Thema + Chips mit Trennlinie, dann
   ein randloses Textfeld, unten Hinweis + Knopf. */
.bm-neu { background:#fff; border:1px solid var(--border); border-radius:10px; margin-bottom:24px; }
.bm-neu .bm-add { gap:0; }
.bm-neu .bm-add-kopf { padding:12px 14px; border-bottom:1px solid #EFEDE8; }
.bm-neu .bm-add > textarea { border:0; border-radius:0; padding:12px 14px 0; min-height:70px; resize:vertical; }
.bm-neu .bm-add > textarea:focus { box-shadow:none; }
.bm-neu .bm-add-fuss { padding:10px 14px; }
.bm-neu .bm-hint { font-size:12px; color:#9794A0; }
.bm-neu .btn { height:32px; padding:0 14px; border-radius:7px; font-size:13px; }
.bm-add { display:flex; flex-direction:column; gap:8px; }
.bm-add input, .bm-add textarea { padding:9px 11px; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:14px; }
.bm-add textarea { resize:vertical; min-height:56px; }
.bm-add input:focus, .bm-add textarea:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(84,104,217,.16); }
.bm-add-kopf { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bm-add-thema { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); flex-shrink:0; }
.bm-add-thema input { width:200px; height:30px; box-sizing:border-box; padding:0 8px; font-size:13px; }
.bm-chips { display:flex; gap:6px; flex-wrap:wrap; }
.bm-chip { height:26px; padding:0 10px; border:1px solid var(--border); border-radius:13px; background:#fff; font:inherit; font-size:12px; color:#45434F; cursor:pointer; }
.bm-chip:hover { border-color:var(--pink); color:var(--pink); }
.bm-add-fuss { display:flex; justify-content:space-between; align-items:center; }
.bm-topic { margin-bottom:24px; }
.bm-topic h2 { margin:0 0 8px; font-size:13px; font-weight:600; color:#45434F; display:flex; align-items:center; gap:8px; }
.bm-topic h2 span { font-weight:500; color:#9794A0; font-size:13px; }
.bm-z { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:8px; background:#fff; }
.bm-txt { font-size:14px; color:#1C1B22; line-height:1.6; white-space:pre-wrap; word-break:break-word; max-width:80ch; }
.bm-meta { display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin-top:10px; }
.bm-wer { display:flex; align-items:center; gap:8px; }
.bm-av { width:22px; height:22px; border-radius:99px; background:var(--pink); color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.bm-ic { width:28px; height:28px; border:0; border-radius:6px; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.bm-ic:hover { background:var(--bg); color:var(--pink); }
/* Weisses Seitenpanel bis an den Rand, wie `.vd-side` im Venue-Detail. */
.bm-side { background:#fff; border-left:1px solid var(--border); padding:24px; }
.bm-side h2 { margin:0 0 14px; font-size:13px; font-weight:600; color:#45434F; }
.bm-side nav { display:flex; flex-direction:column; gap:2px; }
.bm-nav-i { display:flex; justify-content:space-between; align-items:center; height:34px; padding:0 10px; border-radius:7px; font-size:14px; color:#45434F; text-decoration:none; }
.bm-nav-i:hover { background:#F3F1EC; }
.bm-nav-i.aktiv { background:#F3F1EC; font-weight:600; color:#1C1B22; }
.bm-nav-i span { font-size:12px; color:var(--muted); font-weight:400; }
.bm-side-hint { margin:14px 0 0; padding-top:14px; border-top:1px solid #EFEDE8; font-size:12px; line-height:1.5; color:var(--muted); }
@media (max-width:900px){
  .bm-page { grid-template-columns:1fr; }
  .bm-side { border-left:0; border-top:1px solid var(--border); padding:20px var(--fx); }
}
.bm-akt { display:inline-flex; gap:10px; }
/* Projektname-Vorschau im Anlegen-Formular */
.pf-vorschau { background:#F3F4F8; border:1px dashed var(--border); border-radius:8px; padding:9px 12px;
  font-size:13px; color:var(--navy); margin-bottom:6px; }
.pf-vorschau b { color:var(--pink); font-family:'IBM Plex Mono',monospace; }
/* Transportübersicht */
.tr-table td { vertical-align:top; }
.tr-zeit { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }
.tr-st { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.tr-st-l { font-size:11px; color:var(--muted); width:32px; }
.tr-badge { display:inline-block; font-size:11px; font-weight:600; padding:1px 9px; border-radius:99px; white-space:nowrap; }
.tr-badge.st-go { background:#E7F6EF; color:#0A6B49; }
.tr-badge.st-offen { background:#EEF0FB; color:#3C3489; }
.tr-badge.st-klaerung { background:#FFF3E0; color:#8A5300; }
.tr-badge.st-storno { background:#FDECEE; color:#B4232A; }
.tr-detail td { background:#FAFBFD; }
.trd { padding:6px 4px; font-size:13px; }
.trd-i { margin-bottom:4px; }
.trd-l { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); margin-right:4px; }
/* Projekt-Unterreiter */
.proj-subnav { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:14px; overflow-x:auto; }
/* Icons sind Strich-SVGs (stroke:currentColor) statt Emoji, genau wie im
   Hauptmenue - sie folgen damit automatisch derselben Textfarbe wie das
   Label: gedaempft in Ruhe, navy bei Hover/aktiv. */
.psub { display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  border-bottom:2px solid transparent; padding:8px 14px; font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; }
.psub:hover { color:var(--navy); }
.psub.aktiv { color:var(--navy); border-bottom-color:var(--pink); }
/* Unter-Reiter innerhalb eines Detail-Reiters (Material: gebucht / extern /
   Wunsch) als Pillen, der aktive dunkel gefuellt (Vorlage). */
.dk-inhalt .proj-subnav { border-bottom:0; gap:6px; margin-bottom:18px; }
.dk-inhalt .psub { height:32px; padding:0 12px; border:1px solid #DCD8CF; border-radius:16px; background:#fff;
  color:#45434F; font-size:13px; font-weight:600; }
.dk-inhalt .psub:hover { border-color:var(--muted); color:#1C1B22; }
.dk-inhalt .psub.aktiv { background:#1C1B22; border-color:#1C1B22; color:#fff; }
.dk-inhalt .psub .ct-count { background:transparent; color:inherit; opacity:.7; padding:0; margin-left:2px; }
.psub-i { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }