/* Heute page, v5.16 (Fabian 25.09.2026: "ich brauche MAXIMALE Übersicht, damit ich nicht immer den Fokus
   verliere"). Three new blocks – Lagezeile, "Was ist neu" (News), "Wie stehen die Projekte" – plus the one
   override the removed dock leaves behind. Own sheet: leitstand.css is being rebuilt elsewhere.
   Tokens (--ink, --line, --surface, …) come from leitstand.css, which is always loaded first.

   Rules this sheet follows:
   - reading sizes: body text 16px / 1.5, nothing on the page below 14px
   - one coloured accent per block, red only for overdue and errors; unread news by weight and a bar
   - fixed minimum heights, so the 15/60 s refresh never pulls a row away under the mouse pointer */

/* ---------- the dock left the Heute flow ----------
   Closed (the normal case) the board has the whole width. Opened from the Lagezeile it takes the left
   column again, next to the lanes - a drag that would need scrolling does not work in the browser, so the
   card has to be able to travel sideways onto a spur. */
.floor { grid-template-columns: minmax(0, 1fr); }
.dock-col { contain: none; margin-bottom: 18px; }
.dock-col .dock-list { max-height: 52vh; }
@media (min-width: 761px) {
  .floor:has(> .dock-col:not([hidden])) { grid-template-columns: clamp(296px, 23.6vw, 340px) minmax(0, 1fr); }
  .dock-col { margin-bottom: 0; }
  .dock-col .dock { position: sticky; top: 62px; }   /* below the sticky Lagezeile */
}

/* ---------- 1. Lagezeile (sticky) ---------- */
.lagezeile {
  position: sticky; top: 0; z-index: 25;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
  min-height: 46px;
  margin: 0 0 18px; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(21, 33, 44, .04);
}
/* The composer ("Aufgabe anlegen", leitstand.css: z-index 20) opens from the head, exactly where the sticky
   Lagezeile sits, and the line cut the form in two (#657). Above the line, below scrim (40) and drawers (50).
   Desktop only: below 761px the composer is a full-screen sheet with its own z-index (60). */
@media (min-width: 761px) { .composer { z-index: 30; } }
.lz-post {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink-2); cursor: pointer;
  font-size: 14.5px; line-height: 1.5; white-space: nowrap;
}
.lz-post + .lz-post { margin-left: 2px; }
/* a hairline instead of a middle dot: keeps the line quiet and survives wrapping */
.lz-post + .lz-post::before {
  content: ""; align-self: center;
  width: 1px; height: 15px; margin-right: 10px; margin-left: -6px;
  background: var(--line);
}
.lz-post .lz-n { font-size: 19px; font-weight: 700; font-stretch: 85%; color: var(--ink); }
.lz-post:hover { background: var(--hover); color: var(--ink); }
.lz-post.is-spaet .lz-n { color: var(--fault-t); }
.lz-post.is-warn .lz-n { color: var(--wait-t); }
.lz-dock {
  margin-left: auto; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.lz-dock:hover { color: var(--ink); border-color: var(--steel-deep); background: var(--hover); }
.lz-board { margin-left: auto; }
.lz-board + .lz-dock { margin-left: 8px; }
.lz-dock.is-auf { background: var(--hover); color: var(--ink); border-color: var(--steel-deep); }

/* ---------- shared head of the two new blocks ---------- */
.hn, .ps { margin: 0 0 22px; }
.blk-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.blk-head h2 { font-size: 17px; font-weight: 650; }
.blk-head h2 .count {
  margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.blk-head h2 .count.is-on { color: var(--ink); }
.blk-sub { flex: 1 1 260px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.blk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- 3. Was ist neu (News on the Heute page) ---------- */
.hn-list { display: grid; gap: 6px; min-height: 196px; align-content: start; }
.hn-item {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 9px 12px 9px 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px;
  overflow-wrap: anywhere;
}
/* unread: weight plus a bar in ink, no shouting colour */
.hn-item.is-neu { border-color: var(--steel-deep); }
.hn-item.is-neu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 9px 0 0 9px; background: var(--ink);
}
.hn-art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: var(--hover); color: var(--ink-2);
}
.hn-art.art-erledigt { border-color: var(--free); color: var(--free-t); background: #E9F7F1; }
.hn-art.art-deploy { border-color: var(--run); color: var(--run-t); background: var(--run-tint); }
.hn-art.art-sicherheit { border-color: var(--wait-line); color: var(--wait-t); background: var(--wait-tint); }
.hn-titel {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 16px; line-height: 1.5; font-weight: 550; color: var(--ink);
}
.hn-item.is-neu .hn-titel { font-weight: 700; }
.hn-titel:hover { text-decoration: underline; text-underline-offset: 2px; }
.hn-von { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
/* the collapsed one-liner and the expanded text both start in the title column */
.hn-zeile, .hn-text, .hn-fuss { grid-column: 2 / -1; }
.hn-zeile {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-text { font-size: 16px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; max-width: 78ch; margin-top: 4px; }
.hn-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.hn-mehr { padding: 4px 2px; font-size: 14px; }
.hn-mehr a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.hn-mehr a:hover { color: var(--ink); }
.hn-leer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 18px 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px;
}

/* ---------- 4. Wie stehen die Projekte ---------- */
.ps-list { display: grid; gap: 8px; min-height: 180px; align-content: start; }
.ps-gruppe {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px;
  overflow: hidden;
}
.ps-zeile {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.4fr);
  gap: 4px 16px; align-items: center;
  padding: 10px 14px;
}
.ps-zeile.is-wurzel { padding: 12px 14px; }
.ps-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ps-name {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-zeile.is-wurzel .ps-name { font-size: 16.5px; font-weight: 700; }
.ps-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-auf {
  flex: none; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--hover); color: var(--ink-2); cursor: pointer;
  font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.ps-auf:hover { color: var(--ink); border-color: var(--steel-deep); }

.ps-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.ps-zahl {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  padding: 0; border: 0; background: none;
}
.ps-zahl .ps-n { font-size: 16px; font-weight: 700; color: var(--ink); }
button.ps-zahl { cursor: pointer; }
button.ps-zahl:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the one red thing in this block */
.ps-zahl.ps-spaet .ps-n { color: var(--fault-t); }
.ps-zahl.ps-wartet .ps-n { color: var(--wait-t); }

.ps-fuss { display: grid; grid-template-columns: 1fr; gap: 3px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.ps-balken {
  display: block; height: 6px; border-radius: 999px; background: var(--steel); overflow: hidden;
}
.ps-balken > span { display: block; height: 100%; background: var(--ink-2); border-radius: 999px; }
.ps-balken-text, .ps-trend, .ps-bewegung { line-height: 1.5; }
.ps-trend { display: inline-flex; align-items: baseline; gap: 5px; }
.ps-trend.is-mehr { color: var(--fault-t); }
.ps-trend.is-weniger { color: var(--free-t); }
.ps-bewegung { color: var(--ink-2); }
.ps-news {
  grid-column: 1 / -1;
  margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--line-soft);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-news span:first-child { font-weight: 650; color: var(--ink); }

.ps-kinder { border-top: 1px solid var(--line-soft); background: var(--hover); }
.ps-kinder .ps-zeile { padding-left: 26px; }
.ps-kinder .ps-zeile + .ps-zeile { border-top: 1px solid var(--line-soft); }
.ps-leer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.ps-list > .ps-leer { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; }

/* ---------- narrow (390 px): same order, everything stacked, no horizontal scrolling ---------- */
@media (max-width: 760px) {
  .lagezeile {
    top: 0; gap: 4px 2px; min-height: 0; padding: 6px 8px; margin-bottom: 14px; border-radius: 9px;
  }
  .lz-post { padding: 4px 7px; font-size: 14px; }
  .lz-post .lz-n { font-size: 17px; }
  .lz-post + .lz-post::before { display: none; }
  .lz-post + .lz-post { margin-left: 0; }
  .lz-dock { margin-left: 0; font-size: 13.5px; }
  .dock-col { margin-bottom: 14px; }

  .blk-head { gap: 4px 10px; }
  .blk-tools { margin-left: 0; }
  .blk-sub { flex-basis: 100%; }

  .hn-list { min-height: 0; }
  .hn-item { grid-template-columns: auto minmax(0, 1fr); padding: 9px 11px 9px 13px; }
  .hn-von { grid-column: 2; font-size: 13px; }
  .hn-zeile, .hn-text, .hn-fuss { grid-column: 1 / -1; }
  .hn-titel { font-size: 16px; }
  .hn-text { font-size: 16px; max-width: none; }

  .ps-list { min-height: 0; }
  .ps-zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 11px 12px; }
  .ps-kinder .ps-zeile { padding-left: 18px; }
  .ps-zahlen { gap: 4px 10px; }
  .ps-news { white-space: normal; }
}

/* ---------- the project on every card where Fabian decides something (v5.16) ---------- */
.proj-chip {
  display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 8px; border-radius: 6px; vertical-align: 1px;
  background: var(--hover); border: 1px solid var(--line-soft); color: var(--ink-2);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.decision-proj { margin-right: 6px; }

/* ---------- Vorhaben: the short line on the Heute page ---------- */
.ps-vorhaben {
  margin-bottom: 2px; padding: 10px 14px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
.ps-vorhaben-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ps-vorhaben-titel { font-size: 13.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.ps-vorhaben-mehr { font-size: 13.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ps-vorhaben-mehr:hover { color: var(--ink); }
.ps-vorhaben-liste { display: grid; gap: 4px; }
.ps-vorhaben-zeile {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(0, 1.4fr) auto;
  gap: 4px 14px; align-items: baseline; font-size: 14px; color: var(--ink-2);
}
.ps-vorhaben-name {
  font-size: 15px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-vorhaben-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-vorhaben-etappen { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-vorhaben-naechste { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-vorhaben-naechste.is-spaet { color: var(--fault-t); }
.ps-vorhaben-offen { white-space: nowrap; }

/* ---------- Vorhaben: the project page (#vorhaben) ---------- */
.vh { display: grid; gap: 16px; }
.vh-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 90ch; }
.vh-list { display: grid; gap: 12px; }
.vh-gruppe {
  margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em;
}
.vh-karte {
  display: grid; gap: 10px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow-wrap: anywhere;
}
.vh-karte.is-klein { padding: 12px 16px; gap: 8px; background: var(--hover); }

.vh-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.vh-name {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 19px; font-weight: 700; color: var(--ink);
}
.vh-karte.is-klein .vh-name { font-size: 16.5px; }
.vh-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.vh-status {
  padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 650;
  border: 1px solid var(--line); background: var(--hover); color: var(--ink-2);
}
.vh-status.is-aktiv { border-color: var(--free); background: #E9F7F1; color: var(--free-t); }
.vh-status.is-pausiert { border-color: var(--wait-line); background: var(--wait-tint); color: var(--wait-t); }
.vh-status.is-fertig { border-color: var(--wait-line); background: var(--wait-tint); color: var(--wait-t); font-weight: 700; }
.vh-status.is-abgeschlossen { border-color: var(--free); background: #E9F7F1; color: var(--free-t); }
.vh-gruppe.is-abnahme { color: var(--wait-t); }
/* #654: second bar for the tickets, acceptance line, inline ticket list */
.vh-reihe { display: grid; gap: 4px; }
.vh-balken.is-tickets > span { background: var(--free-t); }
.vh-balken-text.is-tickets { font-weight: 500; color: var(--ink-2); }
.vh-abnahme { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); background: var(--hover); }
.vh-abnahme.is-wartet { background: var(--wait-tint); border: 1px solid var(--wait-line); color: var(--wait-t); font-weight: 650; }
.vh-abnahme.is-fertig { background: #E9F7F1; border: 1px solid var(--free); color: var(--free-t); }
.vh-etappe.is-abnahme .vh-etappe-text { font-weight: 650; }
.vh-tickets { display: grid; gap: 2px; padding: 8px 0 2px; border-top: 1px solid var(--line-soft); max-height: 60vh; overflow: auto; }
.vh-ticket { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; }
.vh-ticket.is-erledigt { color: var(--ink-2); }
.vh-ticket-status { font-size: 12.5px; font-weight: 650; white-space: nowrap; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--hover); color: var(--ink-2); text-align: center; }
.vh-ticket-status.is-wartet { border-color: var(--wait-line); background: var(--wait-tint); color: var(--wait-t); }
.vh-ticket-status.is-arbeit { border-color: var(--free); background: #E9F7F1; color: var(--free-t); }
.vh-ticket-status.is-erledigt { opacity: .8; }
.vh-ticket-titel { padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.vh-ticket.is-erledigt .vh-ticket-titel { color: var(--ink-2); }
.vh-ticket-titel:hover { text-decoration: underline; text-underline-offset: 3px; }
.vh-ticket-nr { color: var(--ink-2); font-weight: 600; }
.vh-ticket-meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.vh-bereich { margin-left: auto; font-size: 13.5px; color: var(--ink-2); }

.vh-ziel { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 80ch; }
.vh-ziel.is-leer { color: var(--ink-2); font-style: italic; }

.vh-fortschritt { display: grid; gap: 5px; font-size: 14px; color: var(--ink-2); }
.vh-balken { display: block; height: 8px; border-radius: 999px; background: var(--steel); overflow: hidden; }
.vh-balken > span { display: block; height: 100%; background: var(--ink-2); border-radius: 999px; }
.vh-balken-text { font-weight: 650; color: var(--ink); font-size: 14.5px; }
.vh-naechste { line-height: 1.5; }
.vh-naechste-label { font-weight: 650; color: var(--ink); }
.vh-naechste.is-spaet { color: var(--fault-t); }

.vh-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.vh-zahl {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 0; border: 0; background: none;
  font-size: 14px; color: var(--ink-2); white-space: nowrap;
}
.vh-zahl .vh-n { font-size: 17px; font-weight: 700; color: var(--ink); }
button.vh-zahl { cursor: pointer; }
button.vh-zahl:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vh-zahl.vh-spaet .vh-n { color: var(--fault-t); }
.vh-zahl.vh-wartet .vh-n { color: var(--wait-t); }

.vh-etappen { display: grid; gap: 4px; padding: 8px 0 2px; border-top: 1px solid var(--line-soft); }
.vh-etappe {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.vh-haken { font-weight: 700; color: var(--ink-2); text-align: center; }
.vh-etappe.is-fertig { color: var(--ink-2); }
.vh-etappe.is-fertig .vh-haken { color: var(--free-t); }
.vh-etappe.is-fertig .vh-etappe-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.vh-etappe-datum { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.vh-etappe.is-spaet .vh-etappe-datum { color: var(--fault-t); font-weight: 650; }

.vh-fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-2);
}
.vh-wer { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.vh-wer-eins { white-space: nowrap; }
.vh-wer-eins.is-leer { font-style: italic; }
.vh-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-leer {
  display: grid; gap: 8px; justify-items: start;
  padding: 26px 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.vh-leer-titel { font-size: 17px; font-weight: 650; color: var(--ink); }

@media (max-width: 760px) {
  .ps-vorhaben-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ps-vorhaben-naechste { white-space: normal; }
  .vh-karte { padding: 13px 14px; }
  .vh-name { font-size: 17.5px; }
  .vh-bereich { margin-left: 0; }
  .vh-ziel { font-size: 16px; max-width: none; }
  .vh-ticket { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .vh-ticket-status { justify-self: start; }
  .vh-ticket-meta { white-space: normal; }
  .vh-etappe { grid-template-columns: 18px minmax(0, 1fr); }
  .vh-etappe-datum { grid-column: 2; }
  .proj-chip { max-width: 16ch; }
}

/* Vorhaben: Hinweis, Zeitraum, Etappen-Ticket (v5.16) */
.vh-note.is-warn { color: var(--fault-t); font-weight: 600; }
.vh-hinweis { font-size: 14px; line-height: 1.5; color: var(--wait-t); }
.vh-zeitraum { font-size: 13.5px; color: var(--ink-2); }
.vh-etappe { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.vh-etappe-ticket {
  padding: 0 2px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 650; color: var(--run-t);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.vh-etappe-ticket:hover { color: var(--ink); }
@media (max-width: 760px) {
  .vh-etappe { grid-template-columns: 18px minmax(0, 1fr); }
  .vh-etappe-ticket, .vh-etappe-datum { grid-column: 2; }
}